html, body {
width: 100%;
height:100%;
padding:0px;
margin:0px;
font-size:14px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height:15px;
cler:both;
color:#333333;
}

p{
font-size:14px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height:18px;
color:#333333;
margin:0px;
padding:0px;
}
div,td,h1,h2,h3,h5,h6,from input{
padding:0;
margin:0;
}
image {
border:0;
}
ul{
padding:0;
margin:0;
list-style-type:none;
}
a{
padding:0;
margin:0;
outline:none;
text-decoration:none;
color:#000000;
cursor:pointer;
}
.specer{
padding:0;
margin:0;
clear:both;
height:2px;
margin-bottom:10px;
margin-top:10px;
}
h1
{
color:#fe0a04;
font:bold 24px/30px Arno Pro;
}
h2
{
color:#000000;
font:16px/20px;
}
h3
{
color:#000000;
font-size:14px;
}
h4
{
margin:0;
padding:0;
color:#FFFFFF;
font:bold 15px/20px verdana;
}
h5
{
background:#666666;
height:25px;
font:bold 16px/25px verdana;
color:#FFCC00;
}
h5 span1
{
color:#00CC00;
}
h5 span2
{
color:#ED4B47;
}
/*-------------------------------------------------*/
#mainbody
{
width:90%;
margin:0 auto;
}
#midcontent
{
min-height:500px; 
padding-bottom:20px;
margin-bottom:20px;
}
login
{
background-color:#c5d2cb;
width:99.9%;
height:50%;
position: fixed; /* or absolute */
top: 25%;
bottom:25%;
}
.leftlogin{
width:35%;
height:100%;
float:left;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.textbox
{
height:25px;
width:250px;
color:#000000;
font-size:14px;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999999;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.textbox:hover{
box-shadow:0 0 4px #333333;
}
.textboxsmall
{
height:25px;
width:150px;
color:#000000;
font-size:14px;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999999;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.textboxsmall:hover{
box-shadow:0 0 4px #333333;
}
.selectboxsmall
{
height:35px;
width:162px;
color:#000000;
font-size:14px;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999999;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.selectboxsmall:hover{
box-shadow:0 0 4px #eeeeee;
}

.selectbox
{
height:35px;
width:260px;
color:#000000;
font-size:14px;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999999;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.selectbox:hover{
box-shadow:0 0 4px #eeeeee;
}

.submit
{
height:40px;
font-size:14px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#FFFFFF;
background:#222222;
text-align:center;
line-height:40px;
padding:0 15px;
border:none;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
font-weight:bold;
}
.submit:hover
{
background:#121e36;
color:#FFFFFF;
}
front
{
width:60%;
height:80%;
position: fixed; /* or absolute */
top: 8%;
bottom:5%;
right:5%;
left:36%;
background:#FFFFFF;
z-index:10001;
font-size:15px;
font-weight:500;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height:20px;
}

header
{
height:40px;
}
.topleft
{
width:50%;
float:left;
margin:15px 10px 0 10px;
}
.topright
{
width:40%;
float:right;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
margin:10px 10px 0 10px;
}
.menu
{
height:60px;
width:100%;
}
footer{
height:25px;
background:#333333;
position: fixed;
bottom: 0;
width: 100%;
color:#FFFFFF;
text-align:center;
padding-top:3px;
line-height:25px;
}
.boxDiv
{
border:1px solid #999999;
min-height:500px;
padding:10px;

margin:10px 20px 10px 20px;
}
.header
{
background:#039273;
border:1px solid #dadada;
height:40px;
font-size:16px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#FFFFFF;
}
.table-border1
{
border:1px solid #dcdcdc;
height:30px;
background:#E1E4FF;
font-size:15px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#222222;
}
.table-border1:hover{
background:#f3f3f3;
}
.table-border2
{
border:1px solid #dcdcdc;
height:30px;
background:#FFFFFF;
font-size:15px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#222222;
}
.table-border2:hover{
background:#FFFFFF;
}
#searchDiv
{
width:280px;
height:35px;
background:#fefefe;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999999;
}
.search
{
background: transparent;
z-index: 1;
border:none;
color:#727271;
padding:0 5px; 
font-size:15px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
width:250px;
height:40px;
}
.newrecord{
height:40px;
font-size:14px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height:30px;
color:#FFFFFF;
background:#222222;
text-align:center;
line-height:30px;
padding:3px 15px;
border:none;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
}
.newrecord:hover
{
background:#EEEEEE;
color:#222222;
border:1px solid #000000;
}
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 1200px;
background-color: #000000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.5;
filter: alpha(opacity=70);
}
.graph_content{
display: none;
position: fixed;
top:30%;
bottom:40%;
left: 35%;
width: 30%;
height: 30%;
border: 5px solid #999999;
z-index:1002;
-moz-border-radius:10px;
border-radius:10px;
overflow: auto;
background:#FFFFFF;
color:#333333;
font-size:14px;
}
.black_overlay1{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 1200px;
background-color: #000000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.5;
filter: alpha(opacity=70);
}
.graph_content1{
display: none;
position: fixed;
top:15%;
bottom:20%;
left: 15%;
width: 70%;
height: 70%;
border: 5px solid #999999;
z-index:1002;
-moz-border-radius:5px;
border-radius:5px;
overflow: auto;
background:#FFFFFF;
color:#333333;
font-size:14px;
}
.class1
{
height:40px;
background:#FFFFFF;
font-size:15px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#000000;
}
.class2{
height:40px;
background:#f3f3f3;
font-size:15px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#000000;
}
/*-------------------------------------------------*/
#iconDiv
{
height:100px;
width:175px;
/*border:3px solid #009900;*/

border: 3px solid transparent;
border-image: linear-gradient(to right, #3c5789, #275099, #0848a8, #003db4, #002ebe, #0523b7, #0b17b0, #1004a9, #0f0594, #0e067f, #0d056b, #0c0557) 1;

cursor:pointer;
-moz-border-radius:3px;
background: linear-gradient(to bottom, #FFFFFF, #f7f8d9);
box-shadow:6px 6px 6px #333333;
}
#iconDiv:hover {
  height: 100px;
  width: 175px;

  border: 3px solid transparent;
  border-image: linear-gradient(to right, #ffff00, #fffb00, #fff700, #fef200, #fdec00) 1;

  border-radius: 3px;

  background: linear-gradient(to bottom, #f7f8d9, #ffffff);
}

/*----------------------2016-01-19---------------------------*/
#identityDiv
{
width:320px;
height:170px;
border:1px solid #666666;
background-image: radial-gradient(circle, #fff4bf, #fff4a8, #fff491, #fff578, #fff55d);
border-radius: 15px;
position:relative;
font-size:12px;
font-weight:bold;
}
/*
#identityDiv .photo
{
position:absolute;
top:25px; 
left:215px;
}
#identityDiv .name
{
position:absolute;
top:145px; 
left:55px;
}
#identityDiv .cl
{
position:absolute;
top:145px; 
left:217px;
}
#identityDiv .roll
{
position:absolute;
top:145px; 
left:300px;
}
*/
#admitDiv
{
width:450px;
min-height:300px;
border:1px solid #666666;
background-image: radial-gradient(circle, #fff4bf, #fff4a8, #fff491, #fff578, #fff55d);
border-radius: 15px;
position:relative;
}
/*
#admitDiv .photo
{
position:absolute;
top:40px;
left:308px;
}
#admitDiv .ses
{
position:absolute;
top:75px;
left:180px;
}

#admitDiv .name
{
position:absolute;
top:105px;
left:60px;
}

#admitDiv .cl
{
position:absolute;
top:105px;
left:320px;
}
#admitDiv .roll
{
position:absolute;
top:130px;
left:110px;
}
*/
.admissionbutton
{
background:#00CC00;
color:#FFFFFF;
line-height:25px;
padding:5px 10px 5px 10px;
font:bold 14px/25px Georgia, "Times New Roman", Times, serif;
-moz-border-radius:5px;
border-radius:5px;
}
.enquirybutton
{
background:#FF3300;
color:#FFFFFF;
line-height:25px;
padding:5px 10px 5px 10px;
font:bold 14px/25px Georgia, "Times New Roman", Times, serif;
-moz-border-radius:5px;
border-radius:5px;
}
.borrowed
{
background:#FF0000;
color:#FFFFFF;
line-height:25px;
padding:5px 10px 5px 10px;
font:bold 14px/25px Georgia, "Times New Roman", Times, serif;
-moz-border-radius:5px;
border-radius:5px;
}
/*----------------------2016-01-20---------------------------*/
.areabox
{
height:100px;
width:350px;
color:#000000;
font-size:14px;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999999;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.areabox:hover{
box-shadow:0 0 4px #333333;
}
.unpaidbutton
{
background:#FF0000;
color:#FFFFFF;
line-height:25px;
padding:5px 10px 5px 10px;
font:bold 14px/25px Georgia, "Times New Roman", Times, serif;
-moz-border-radius:5px;
border-radius:5px;

}
.paidbutton
{
background:#84bf0d;
color:#FFFFFF;
line-height:25px;
padding:5px 10px 5px 10px;
font:bold 14px/25px Georgia, "Times New Roman", Times, serif;
-moz-border-radius:5px;
border-radius:5px;
}
.black_overlay_salary{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 1200px;
background-color: #000000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.5;
filter: alpha(opacity=70);
}
.graph_content_salary{
display: none;
position: fixed;
top:15%;
bottom:20%;
left: 10%;
width: 80%;
height: 70%;
border: 10px solid #999999;
z-index:1002;
-moz-border-radius:5px;
border-radius:5px;
overflow: auto;
background:#FFFFFF;
color:#333333;
font-size:14px;
}
#reportCardFront
{
width:400px;
height:500px;
border-left:15px solid #2f6eb3;
border-top:15px solid #2f6eb3;
border-bottom:25px solid #2f6eb3;
border-right:25px solid #2f6eb3;
background:#bdd7df;
}
#reportCardFrontInnerTop
{
border:0;
height:380px;
width:380px;
margin:10px;
color:#3693cf;
position:relative;
}
#reportCardFrontInnerBottom
{
width:390;
height:85px;
margin:3px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #3693cf;
color:#3693cf;
}

/*------------------Active/Inactive Button---------------------------*/
.switch_options{
    display: block;
    font-family: "Helvetica", Arial, Sans-serif;
    margin-bottom: 10px;
}
/* Main block clearfix */
.switch_options:before,
.switch_options:after{
    content:'.';
    display:block;
    overflow:hidden;
    visibility:hidden;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
}
.switch_options:after{clear:both;}
 
/*Options*/
.switch_options span{
    display: inline-block;
    float: left;
    padding: 4px 9px;
    margin: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    border: 1px solid #aaa;
    text-transform: uppercase;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
 
}
.switch_options span:first-of-type{
    border-radius: 2px 0 0 2px;
    border-right: 0;
}
.switch_options span:last-of-type{
    border-radius: 0 2px 2px 0;
    border-left: 0;
}
.switch_options span:hover{
    background: #fafafa;
}
 
/* Active option */
.switch_options span.selected{
    background: #00b7ea; /* Old browsers */
    background: -moz-linear-gradient(top,  #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #00b7ea 0%,#009ec3 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #00b7ea 0%,#009ec3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
    border-color: #0082A3;
    color: #fff;
}
/*----------------------------------------------------------------------*/
.wrong
{
height:40px;
line-height:40px;
border:1px solid #FF0000;
background:#FEEFE7;
color:#D93D09;
text-align:center;
margin:0 auto;
width:600px;
}