body {
 
    background: #d3daf6 url('../icons/new2.png') repeat-x;
    background-attachment: fixed;
    color: black;
    font-size: 13px;
    font-family: tahoma;
    padding: 0px;
    margin: 0px;
  
}


#overlay {

     visibility: hidden;

     position: fixed;

     left: 0px;

     top: 0px;

     width: 100%;

     height: 100%;

     text-align: center;

     background: url(imgs/overlay_back.png) repeat-x;

     background-attachment: fixed;
}

.overlay_box_1 {

     width: 450px;

     height: 300px;

     margin: 150px auto;

     background: white;

     border: 7px solid #8ABDE8;

     padding: 3px;

     text-align:center;

     border-radius: 5px 5px 5px 5px;

}

.overlay_box_2 {

     width: 750px;

     height: 250px;

     margin: 250px 400px auto;

     background: white;

     border: 7px solid #8ABDE8;

     padding: 3px;

     text-align:center;

     border-radius: 5px 5px 5px 5px;

}

a:link { 
  color: #000099;   
  text-decoration: none;
}

a:visited {
  color: #000099;  
}


input[type="text"] {
  padding: 10px;
  border: solid 5px #c9c9c9;
  transition: border 0.3s;
}

input[type="text"]:focus,
input[type="text"].focus {
  border: solid 5px #969696;
}

div {
    margin-right: auto;
    margin-left: auto;
}

table {  
    margin-right: auto;
    margin-left: auto;
    font-family: tahoma; 
}

td { vertical-align: top; }
select { height: 30px; }
.selector { height: 50px; }

input  { vertical-align: middle; height: 30px; font-family: tahoma; padding: 2px; }

option { vertical-align: bottom; height: 25px; }

.assessmentnamer{
    vertical-align: bottom;
    width: 50px;
    text-align: center;
    border: thin solid #C7DCF2;
    border-bottom: none;
}

.checkerbox { vertical-align: middle; height: 15px; }

.abstraction { 
    height: 650px;
    border: thin solid #8ABDE8;
    border-top: 3px solid #8ABDE8;
    border-radius: 5px 5px 0px 0px;
    padding: 0px;
    background: url(imgs/abstract1.jpg); 
}

.alttext { font-family: narkisim; }

.ash { color: #666666; }

.alert_icon { width: 20px; height: 20px; }

.alink { color: black; }

.alink:hover
{ text-decoration: underline; }

.backer
{
    width: 100%;
    background: #e7e9f6;
    border: none;
    border-radius: 0px 0px 5px 0px; 
    min-height: 650px;
    position: relative;
}


.backer2
{
  width: 95%;
  background: #C7DCF2;
  border: none;
  border-radius: 5px 5px 5px 5px; 
  padding: 5px;
  
}

.backer3
{
    width: 100%;
    background: #C7DCF2;
    border: none; 
}

.backerx
{
    width: 100%;
    background: #e7e9f6;
    border: none;
    -webkit-border-radius: 0px 0px 5px 0px; 
    min-height: 650px;
}

.backer_xt
{

    background: rgba(200,255,198,0.5);
    border: none;
    -webkit-border-radius: 5px 5px 5px 5px; 
    padding: 5px;

}

.bar_x{
    height: 25px;
    background: white;
    border: thin solid #e1e1e1;
    width: 95%;
    padding: 5px;
}

.bar{
    height: 25px;
    background: white;
    border: thin solid #e1e1e1;
    font-weight: bold;
    width: 95%;
    padding: 5px;
}

.bar2{
    text-align: right;
    height: 25px;
    font-weight: bold;
    background: #8ABDE8;
    border: thin solid #BBC7E0;
    border-right: thin solid #616399;
    width: 95%;
    padding: 5px;

}

.bar3{
    text-align: left;
    height: 40px;
    padding: 5px;
}

.big_selector { height: 50px; }

.bigtxt{ font-size: 30px; }

.bigger { font-size: 20px; }

.boldtxt{ font-weight: bold; }

.bottomer { vertical-align: bottom; }

.blue { color: #616399; }

.blue2 { color: #333399; }

.black { color: black; }
.black_crate { background: #999999; }

.button1 
{
    height: 30px;
    background: #f1f1f1;  
    border: thin outset #6666CC;  
    text-align: center;
    vertical-align: middle;
    border-radius: 5px 5px 0px 0px;
}

.button 
{
    height: 50px;
    text-align: center;
    border: thin outset #8ABDE8;
    padding: 10px;
    color: green;
    font-weight: bold;
}

.buttonx 
{
    height: 50px;
    text-align: center;
    padding: 10px;
    color: green;
    font-weight: bold;
}

.buttonz { height: 50px; }

.bottomless { border-bottom: none; }

.bottomed { border: none; border-bottom: thin solid black; }

.borderless { border: none; }

.crater { border: thin solid #c0c0c0;  background: white; }

.crater2 { border: thin solid #FFCCCC; background: white; }

.crater3 { border: thin solid #C7DCF2; background: #f7f7f7; }

.crater_red { border: thin solid #FFCCCC; background: #FCB4BA; }

.crater_black { border: thin solid black;  background: white; }

.crater_blue { border: thin solid #C7DCF2; }

.centerly { text-align: center; }

.curvaceous { 
    border-radius: 5px 5px 5px 5px;
    border: thin solid #c0c0c0;
    background: white;
    padding: 5px;
}

.curvaceous2 { 
    border-radius: 5px 5px 5px 5px;
    border: thin solid #C7DCF2;
    background: white;
    padding: 3px;
}

.curvaceous2x { 
    border-radius: 5px 5px 5px 5px;
    border: 2px solid #C7DCF2;
    background: white;
    padding: 5px;
}

.curved{ 
    border: thin solid #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    background: white;
}

.curved2{ 
    border: thin solid #C7DCF2;
    border-radius: 5px 5px 5px 5px;
    background: white;
}

.curvedx{ 
    border: none;
    border-radius: 5px 5px 5px 5px;
    background: white;
}

.curvedtop{ 
    border: thin solid #c0c0c0;
    border-radius: 5px 5px 0px 0px;
    background: white;
}

.curvedblack{ 
    border: thin solid black;
    border-radius: 5px 5px 5px 5px;
    background: white;
    margin-left: 3px;
}

.curve_blue{
    background: white;    
    border: thin outset #8ABDE8; 
    border-radius: 5px 5px 5px 5px;
}

#db_in_use {  }

.db_selector_1 { 
    height: 30px; font-size: 15px; 
    border-radius: 5px 5px 5px 5px;
    border: thin solid #c0c0c0;
    background: white;
    padding: 3px; font-weight: bold; width: 400px;}

.db_selector_2 { height: 35px; 
                font-size: 18px; 
                border: thin solid #c0c0c0; 
                width: 400px; 
                border-radius: 5px 5px 5px 5px;
                padding: 3px; font-weight: bold;
                vertical-align: middle; }

.displaypage
{
    min-height: 650px;
    height: auto;
    background: white;
    border: thin solid #8ABDE8;
    border-top: thin solid #8ABDE8;
    border-radius: 5px 5px 0px 0px;
    padding: 0px;
}


.display1
{
    float: left;
    width: 20%;
}

.display2
{ 
    width: 50%; 
    border: thin solid #8F96E8;
    border-top: none;
}

.display2b
{ 
    width: 60%; 
    border: thin solid #8F96E8;
    border-top: none;
}

.display3 { width: 29%; padding: 3px; }

.display3b { width: 19%; }

.displayxx
{ 
    width: 79.8%; 
    border-left: thin solid #8ABDE8;
    border-right: none;
    min-height: 850px;
    height: auto;
}

.fivepad { padding: 5px; }

.floatout{
    
    border: 5px solid #C7DCF2;  
    border-radius: 5px;
    background: white; 
    position: absolute; 
    width: 600px;
    padding: 5px;

}

.floatout2{
    border: 5px solid #C7DCF2; 
    -webkit-border-radius: 5px; 
    background: white; 
    position: absolute; 
    width: 450px;
    padding: 5px;

}

.floatout3{
    border: 5px solid #FCC9C9; 
    -webkit-border-radius: 5px; 
    background: white; 
    position: absolute; 
    width: 350px;
    padding: 5px;

}

.footer
{
    background: white;
    height: 50px;
    border: none;
    border-top: 5px solid #7AA7CD;
    padding: 3px;
}

.full
{
    width: 1120px;
    text-align: left;
}

.gradecolumn{
    width: 50px;
    padding-left: 15px;
    border: thin solid black;
    border-bottom: none;
    border-left: none;
    font-weight: bold;
} 

.green { color: green; }

.half
{
    width: 50%;
    text-align: left;
}
    
.headbanner{  
    height: 40px;
    background: #6990B1;
    color: white;
    font-size: 15px;
    vertical-align: bottom;
}

.headbanner img { height: 25px; }
.headbanner a { color: #fff; }

.headbanner_inner {
    text-align: left;
}

.head_menu { height: 30px; width: 35px; vertical-align: middle; }

.headingbar{
    background: #7AA7CD;
    padding: 5px;
    font-weight: bold;
    color: white;
}

.headingbar_2{
    background: #e7e9f6;
    padding: 5px;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
}

.headingbar_3{
    background: #e7e9f6;
    padding: 5px;
    font-weight: bold;
    border: thin outset #7AA7CD;
}

.headliner {
background: #f7f7f7;

}

.heighter { height: 300px; }

.heighter2 { height: 550px; }

.home1{
    height: 30px;
    background: white;  
    border: thin solid #AAC5DD;  
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    vertical-align: middle;
}

.home2{
    height: 30px;
    background: #B2CFDF;  
    border: thin solid #AAC5DD;  
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    vertical-align: middle;
}

.home3 { 
    background: white; 
    border: thin solid #8ABDE8; 
    border-bottom: none; 
    border-radius: 5px 5px 0px 0px; 
    padding: 5px; 
}

.home4 { }

.home5{
    background: #e7e9f6; 
    border: thin outset #6666CC; 
    border-bottom: none; 
    border-radius: 5px 5px 0px 0px; 
    padding: 10px; 
    font-weight: bold;
}

.home6{
    background: white; 
    border: thin solid #6666CC;
    border-bottom: #f1f1f1; 
    border-radius: 5px 5px 0px 0px; 
    padding: 7px;
}


.icon {
    width: 20px;
    height: 20px;
    border: none;
    vertical-align: middle;
}

.icon2 {
    width: 30px;
    height: 30px;
    border: none;
}

.icon3 {
    width: 50px; 
    height: 50px;
}

.icon4 {
    width: 80px; 
    height: 100px;
    vertical-align: middle;
}

.infobar { background: #C7DCF2; }

.infobar2 { background: #FFEBFE; }

.infospace { border:thin dashed #BBC7E0; }

.inputx { width: 95%; }

.input1 { border: thin solid #C7DCF2; }

.layer{
    border: 0px; 
    background: #C7DCF2;  
    height: 1px;
    width: 100%;
}

.layerx{
    border: 0px; 
    background: #C7DCF2;  
    height: 3px;
    width: 100%;
}

.lefty { text-align: left; }

.liner { background: #6666CC; height: 1px; }

.middler { vertical-align: middle; }

.marginated { margin-left: 50px; }

.marginator { margin-left: 0px; }
.marginator_top { margin-top: 0px; }

.nav{ 
    width: 1050px;
    font-weight: bold;
    font-size: 12px;   
}

.navcol1{
    padding-top: 5px;
    background: #8ABDE8;  
    border: 2px solid #8ABDE8;  
    width: 95%;
    height: 35px;
    vertical-align: bottom;
    color: white;
    border-radius: 5px 5px 0px 0px;
}

.navcol2{ 
    padding-top: 5px;
    border: thin solid #8ABDE8;
    border-bottom: none;
    width: 95%;
    height: 30px;
    vertical-align: bottom;
    border-radius: 5px 5px 0px 0px;
    background: white;
}

.navcolx{
    border: none;
    vertical-align: middle;
    width: 25%;
}

.navcolx2{
    border: none;
    vertical-align: middle;
    height: 40px; 
    width: 115px;
      
}

.navcolx3{
    border: none;
    vertical-align: middle;
    height: 40px; 
    width: 125px;
      
}

.navcol_cbt{ 
    padding-top: 5px;
    border: thin solid #8ABDE8;
    border-bottom: none;
    width: 95%;
    height: 30px;
    vertical-align: bottom;
    border-radius: 5px 5px 0px 0px;
    background: #94CCCE;
}

.nav2_main {
    background: #217AB3;   
    height: 50px;
    border-radius: 10px 10px 0px 0px;
    color: #fff;
    vertical-align: middle; line-height: 50px;
}

.nav2_1 { 
    padding: 5px 10px 5px 10px;
    border: thin solid #c0c0c0;
    border-radius: 5px;
    background: #8ABDE8;
    font-weight: bold;
    color: black;
    width: 100px;
}

.nav2_2 { 
    padding: 5px 10px 5px 10px;
    border: thin solid #c0c0c0;
    border-radius: 5px;
    background: #fff;
    font-weight: bold;
    color: black;
    width: 100px;
}

.num_box {
text-align: center;
border: thin solid black;
border-left: none;
border-bottom: none;
}

.payment_box1{
    text-align: left;
    border: thin solid #C7DCF2;
    border-bottom: none;
}

.payment_box2{
    width: 50px;
    text-align: center;
    border: thin solid #C7DCF2;
    border-bottom: none;
}

.page_breaker{ page-break-after: always; }

.padded_top { padding-top: 7px; }

.photocrate {
    border: 3px solid #e1e1e1;
    border-radius: 5px;
}

.ratings_box_x{
    border: thin solid #e1e1e1;
    border-top: none;
    border-left: none;
    text-align: center;
}

.ratings_box{
    border: thin solid black;
    border-top: none;
    border-left: none;
    padding-left: 3px;
}


.ratings_box2{
    border: thin solid black;
    border-top: none;
    border-left: none;
    text-align: center;
}

.ratings_box2x{
    border: thin solid black;
    border-top: none;
    border-left: none;
    text-align: right;
}

.ratings_box3x{
    border: thin solid black;
    border-bottom: none;
    border-left: none;
}

.ratings_box3{
    border: thin solid black;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.resultcolumn{
    width: 50px;
    text-align: center;
    border: thin solid #C7DCF2;
    border-bottom: none;
}


.resultcolumn2 {
    width: 50px;
    text-align: center;
    border: thin solid black;
    border-bottom: none;
    border-left: none;
    font-weight: bold;    
}


.resultcolumn2b{
    width: 50px;
    text-align: center;
    border: thin solid black;
    border-bottom: none;
    border-left: none;
    font-weight: bold;
    color: red;
} 

.result_column_x{
    width: 50px;
    text-align: center;
    border: thin solid black;
    border-bottom: none;
    border-left: thin solid black;
    font-weight: bold; 
}

.result_commenter{ height: 15px; }

.result_assessment{
    width: 50px;
    text-align: center;
    border: thin solid black;
    border-bottom: none;
    border-top: none;
    border-left: none;
    vertical-align: bottom;
}

.result_assessment2{
    width: 50px;
    text-align: center;
    border: thin solid black;
    border-bottom: none;
    border-top: none;
    vertical-align: bottom;
}

.result_assessmentb{
    text-align: center;
    border: thin solid black;
    border-bottom: none;
    border-top: none;
    border-left: none;
    vertical-align: bottom;
}

.resultname{
    border: thin solid #C7DCF2;
    border-bottom: none;
    vertical-align: middle;
    width: 350px;
}

.resultname2{
    border: thin solid black;
    border-bottom: none;
    vertical-align: middle;
    width: 370px;
    
}

.result_row1{ background: #EAEFFF;}

.result_row2{ background: white; }

.result_row3{ background: #fbfbfb; }

.result_subject_bar{
    width: 50%;
    background-color: rgb(199, 220, 242);
    padding: 3px;
}

.result_subject_bar1{
    text-align: center;
    font-weight: bold;
    background-color: rgb(199, 220, 242);
    width: 100%;
    height: 30px;
    padding-top: 5px;
}

.result_subject_bar2{
    text-align: center;
    background: white;
    border: thin solid #c0c0c0;
    border-bottom: thin solid #C7DCF2;
    width: 100%;
    height: 30px;
    padding-top: 5px;
}

.resultsheet_subject{
    vertical-align: middle;
    color: red;
    font-weight: bold;
}

.resultsheet_subject2{
    
    color: black;
    font-weight: bold;
    border: thin solid black;
    border-bottom: none;
    border-top: none;
    width: 150px;
    padding: 3px
}

.resultheader{    
    font-weight: bold;
    vertical-align: top;
}

.resultsubheader{ font-family: nyala; }

.resulttable{ border: thin solid black; }

.resulttable2{ border: thin solid black; }

.resulttablex { border: thin solid #C7DCF2; }

.righty{ text-align: right; }

.response { color: #FF6666; }

#response { color: #FF6666; }

.responder_green { border-radius: 3px; border: thin solid green; background: #EEFDFF; color: black; }

.row1{ background: #EAEFFF;}

.row2{ background: white; }

.row3{ background: #fbfbfb; }

.schoolheader{
    font-family: Vivaldi;
    font-weight: bold;
    vertical-align: middle;
} 

.searchbar{
    background: #F2EFF9;
    padding: 5px;
    width: 100%;
}

.searchinput{
    width: 100%; 
    border: thin solid #C7DCF2; 
}

.sevenpad { padding: 7px; }

.smalltxt { font-size: 12px; }

.spinner{ display: none; }

.status_bar {
    height: 50px;
    border-radius: 0px 0px 5px 5px;
    border: thin solid #8ABDE8;
    background: #fff;
}
.status_bar_inner { font-size: 30px; font-weight: bold; }

.status_bar img { height: 40px; width: 50px; vertical-align: middle; }

.steps {
    border: thin solid #EAEAEA; 
    padding: 5px; 
}

.steps2 {
    border: 2px solid rgba(157,166,198,0.5); 
    padding: 5px; 
    background: rgba(157,166,198,0.5);
}

.steps3 {
    border: 2px solid rgba(54,242,180,0.5); 
    padding: 5px; 
    background: rgba(54,242,180,0.5);
}

.student_namebar{
    width: 100%; 
    border: thin solid #C7DCF2; 
}

.student_moreinfo{
    height: 30px;
    border: thin solid #e1e1e1;
}

.staff_namebar{
    width: 100%;
    border: thin solid #FFCCCC;
}

.subtxt
{ 
    color: #c0c0c0; 
    font-size: 11px; 
}

.subtxt2
{ font-size: 11px; }

.subtxt3
{ font-size: 13px; }

.subtxt4
{ font-size: 12px; }

.subtxtblue
{ 
    color: blue; 
    font-size: 11px; 
}

.total { width: 100%; }

.update { color: #FF6666; }

.twothird
{
    width: 65%;
    text-align: left;
}

.threequater
{
    width: 75%;
    text-align: left;
}

.tenpad { padding: 10px; }

.five
{ width: 5%; }

.ten
{ width: 10%; }

.twelve
{ width: 12%; }

.fifteen
{ width: 15%; }

.twenty
{ width: 20%; }

.twentyfive
{ width: 25%; }

.thirty
{ width: 30%; } 

.fourty
{ width: 40%; }

.fifty
{ width: 50%; }

.sixty
{ width: 60%; }

.seventy
{ width: 70%; }

.seventyfive
{ width: 75%; }

.eighty
{ width: 80%; }

.eightyfive
{ width: 85%; }

.ninety
{ width: 90%; }

.ninetyfive
{ width: 95%; }

.ninetyeight
{ width: 98%; }


.left { float: left; }
.right { float: right;  }

.threepad { padding: 3px; }

.unseen { display: none; }
.hide_this { visibility: hidden; }

.widthleft { float: left;  }

.widthright { 
    float: right; 
    position: relative;
    height: 100%; 
    border: thin solid #CCCCFF; 
    border-right: none;
    border-bottom: none;
    border-top: none;
    -webkit-border-radius: 0px 0px 5px 0px; 
}

.widthleft2 {  
    width: 700px; 
    height: 500px; 
    border: thin solid #CCCCFF; 
    -webkit-border-radius: 0px 0px 5px 0px; 
}

.shadow{
    -webkit-box-shadow: 0px 1px 4px #ddd;
    -moz-box-shadow: 0px 1px 4px #ddd;
}

.effect{
    color: #363836;
    font-size: 13px;
    text-decoration: none;
    background-color: #f1f1f1;
    background: -webkit-gradient(linear, left top, left 30, from(#f1f1f1), color-stop(4%, #ffffff), to(#f4f4f4));
    background: -moz-linear-gradient(top, #f1f1f1, #ffffff 1px, #f4f4f4 30px);
    border: 1px solid #dadada;
    text-shadow: 1px 1px 0px #fff;
}


/* Login Form */

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}

.login-body {
  background: #76b852; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}

/* float out menu */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #1F1F5F;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidenav div {
    padding: 4px 4px 4px 50px;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    display: block;
    width: 400px;
    transition: 0.3s;
}

.sidenav a {
    text-decoration: none;
    font-size: 25px;
    color: #E9E9E9;
    transition: 0.3s;
}

.sidenav a:hover {
    color: black;
}

.sidenav_closebtn {

    margin-right: 5px;
    font-size: 36px;
}

#sidenav_topbar {
    background: #666666;
    height: 50px;
    font-size: 25px;
    top: 0;
}

.sidenav_menu1 {
    border-bottom: thin solid #666666;
    height: 35px;
    width: 80%;   
}

.sidenav_menu1:hover {
    background: #EFE5FF;
    color: black;
}

.sidenav_menu1 a:hover { color: black; }

/* end */

@media screen and (min-width: 1200px){
    
    .headbanner { width: 100%; }  
    .footer { width: 100%; }
}