body {
    background-color:#F9F6F4;
    background-color:#F5FAFA;
    
    font-family:verdana;
}
.wrapper{
    
    width:95%;
    margin:0px auto;
    
}
.header{
    float:left;
    height:130px;
    width:100%;
    margin-top:0px;
    background-color:blue;
    
}
.user_login{
    float:left;
    height:220px;
    width:21.5%;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.user_login hr{
    width:250px;
    color:#2E4372;
}

.user_login td{
    padding:3px;
    padding-left:8px;
    font-size:15px;
    font-family:verdana;
}
.user_login .caption{
    font-size:20px;
    color:#2E4372;
    font-weight:bold;
}
.user_login .button1{
    padding-top:8px;
}
.user_login .button{
    background: linear-gradient(to bottom, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 98%,rgba(99,147,193,1) 100%); /* W3C */
    font-size:18px;
    color:#2E4372;
    border:1;
    font-weight: bold;
    cursor:pointer;
    
}

.image{
    margin-left:10px;
    width:76.5%;
    height:350px;
    float:right;
   border:1px;
   border-radius:10px;
   position:relative;
}
.image .text{
     position:absolute;
    top:10px;
    left:10px;
    width:100%;
    
}
.image .text h3{
color:white;

}
.navbar ul {
  list-style-type:none;  
  

background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
  margin-bottom:13px;
  padding:0px;
}
.navbar li {
  display:inline-block;
  font-size:18px;
}
.navbar a{
  text-decoration:none; 
  background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
  color:white;
  padding:5px;
  display:inline-block;
}
.navbar a:link, a:visited {
    display: block;
    width: 150px;
    font-weight: bold;
    color: white;
    background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
    text-align: center;
    text-decoration: none;
    
}

.navbar a:hover, a:active {
    background:#29526D;
    color: white;
}
.left_panel{
    margin-top: 15px;
    float:left;
    height:510px;
    width:21.5%;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.left_panel p,h3{
    padding:6px;
}
.left_panel li{
    padding:5px;
}
.right_panel{
    margin-left:10px;
    margin-top:15px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 

    width:76.5%;
    height:382px;
    float:right;
   border:1px solid dodgerblue;
   border-radius:5px;
}
.right_panel p,h3{
    padding:6px;
}
.right_panel li{
    padding:8px;
}
.footer{
    float:left;
    height:35px;
    width:100%;
    margin-top:10px;
    background: #8CA6DE;
    border-radius:5px;    
}
.footer ul {
    list-style-type: none;
    float:left;
   
}
.footer li {
float:left;
font-size:15px;
font-family:verdana;
}
.footer li{
    text-decoration: none;
    color:black;
    padding-left:25px;
}
.footer a{
    text-decoration: none;
    color:black;
    padding-left:25px;
}

.footer a:hover{
    font-weight: bold;
}
.footer_content{
    text-align:center;
}

.content .user_login{
    margin-top:60px;
   margin-left:40%;
    height:250px;
    width:300px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.content{
    height:400px;
    width:100%;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 97%,rgba(160,216,239,1) 100%); /* W3C */
}

.content .user_login .button{
    font-size:22px;
    color:#2E4372;
    border:1;
    font-weight: bold;
    cursor:pointer;
    margin-top:10px;
}
.admin_change_pwd{
    margin-left:15%;
    margin-top:5%;
    float:left;
    height:200px;
    width:400px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.admin_change_pwd td{
    font-size:17px;
    padding-top:10px;
    padding-bottom:10px;
 
}

.content .admin_staff{
   margin-left:15%;
    margin-top:5%;
    float:left;
    height:180px;
    width:200px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.content .admin_customer{
    margin-left:5%;
    margin-top:5%;
    float:left;
    height:180px;
    width:200px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.content .admin_staff li{
    
    font-size:15px;
    padding-top:5px;
    padding-bottom:10px;
 list-style-type:none;
}
.content .admin_customer li{
    
    font-size:15px;
    padding-top:5px;
    padding-bottom:10px;
    list-style-type:none;
 
}
.content a{
    text-decoration:none;
}
.content a:link,a:visited {
    color:blue;
}
.content a:hover {
    font-weight:bold;
}
.admin_nav{
    float:left;
    height:95%;
    width:200px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
    border:1px solid dodgerblue;
    border-radius:5px;
    margin:5px;
}
.admin_nav li{
    
    text-align:left;
    padding-top:5px;
    padding-bottom:20px;
    padding-left:0px;
    list-style-type:square;
}
.admin_nav a{
    text-decoration:none;
}
.admin_nav a:hover {
    font-weight:bold;
}
.admin_nav a:visited {
    color:blue;
}
.admin_nav li#caption{
list-style-type:none;

}

.addstaff{
    
    height:95%;
    width:400px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
    border:1px solid dodgerblue;
    border-radius:5px;
    margin:5px;
    margin:auto;
    margin-top:10px;
}
.addstaff td{
    padding:7px;
}
.content_addstaff{
    height:610px;
    width:100%;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 97%,rgba(160,216,239,1) 100%); /* W3C */
}
.addstaff_button{
    background: linear-gradient(to bottom, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 98%,rgba(99,147,193,1) 100%); /* W3C */
    font-size:18px;
    color:#2E4372;
    font-weight: bold;
    cursor:pointer;
    
}
.displaystaff_content{
    height:400px;
    width:100%;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 97%,rgba(160,216,239,1) 100%); /* W3C */

}
.displaystaff_content table{
    margin-top:30px;
}
.customer_nav{
    float:left;
    height:95%;
    width:240px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
    border:1px solid dodgerblue;
    border-radius:5px;
    margin:5px;
}
.customer_nav li{
    
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:0px;
    list-style-type:square;
}
.customer_nav a{
    text-decoration:none;
}
.customer_nav a:hover {
    font-weight:bold;
}
.customer_nav a:visited {
    color:blue;
}
.customer_nav li#caption{
list-style-type:none;

}
.content_customer{
    height:630px;
    width:100%;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 97%,rgba(160,216,239,1) 100%); /* W3C */
}
.content_customer table{
    margin-top:50px;
}
.customer_top_nav{
    
    height:30px;
    width:1000px;
    float:left;
    margin-top:5px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 97%,rgba(160,216,239,1) 100%); /* W3C */
}
.customer_top_nav .text{
    margin-left:39%;
   margin-top:3px;
    font-weight:bold;
    color:#2E4372;
}
.customer_body{
    height:95%;
    width:1000px;
    float:left;
    margin-top:5px;
    border-radius:5px;
}
.customer_body p{
    
    text-align:left;
    margin-left:10px;
}
.customer_body .heading{
    font-weight:bold;
    color:#2E4372;
}
.heading{
    font-weight:bold;
    color:#2E4372;
}
.content1{
    margin-left:15%;
    margin-top:5%;
    float:left;
    height:180px;
    width:230px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.content2{
    margin-left:15%;
    margin-top:5%;
    float:left;
    height:180px;
    width:330px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.content1 p{
    padding-top:10px;
}
.content2 p{
    padding-top:10px;
}
.content3{
    margin-left:15%;
    margin-top:5%;
    float:left;
    height:270px;
    width:250px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.content3 p{
    padding-top:10px;
}
.content4{
    margin-left:15%;
    margin-top:5%;
    float:left;
    height:270px;
    width:250px;
    border:1px solid dodgerblue;
    border-radius:5px;
    background: linear-gradient(to bottom, rgba(224,243,250,1) 49%,rgba(184,226,246,1) 100%,rgba(182,223,253,1) 100%); 
}
.content4 p{
    padding-top:10px;
}
.contact{
    height:85%;
    width:95%;
    margin-left:30px;
    border-radius:5px;
    
}
.contact li{
    padding:7px;
}