body,div,input { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
	height: 100%;
}
body{
	font-family:'century gothic', Georgia, serif;
	background: #fff url(bg.png) repeat top left;
	font-weight: 400;
	font-size: 13px;
	color: #1d3c41;
	overflow-y: scroll;
	
}

header, section{
	display: block;
	
}

 
#header
{ background: #36454f url(banner.png) no-repeat center;
  height: 152px;
  } 

#index_menu
{ width: 135px;
margin: 20px 0 0 0;}
 
#logo
{ width: 1000px;
  position: relative;
  height: 120px;
  background: transparent;}
  
#menubar
{ width: 1000px;
  height: 46px;
  padding-left: 154px;
  margin-left:0px;
  

} 
  

  
#main, #logo, #menubar, #page_content
{ margin-left: auto; 
  margin-right: auto;}

#logo #logo_text 
{ position: absolute; 
  top: 10px;
  left: 0px;}

#logo h1, #logo h2
{ font: normal 150% 'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0 0 0 9px;}

#logo_text h1
{ padding: 0px 0 0 0;
  color: #FFF;
  letter-spacing: 0.1em;
  text-decoration: none;}

#logo_text h2
{ font-size: 170%;
  padding: 5px 0 0 0;
  color: #DBAE58;}
    
#logo_text h1 .logo_colour
{ color: #E4EC04;}


#usr_con a {
  font: normal 90% 'century gothic', arial, sans-serif;
  margin: 15px 10px 0 10px;
  color: #FFF;
  float: right;
}
#usr_con a:visited, a:active {color:#FFF;}  /* visited link */
#usr_con a:hover {color:#ffc34d;}  /* mouse over link */

#con {
	float: left;
}

#discon {
	float: right;
}

/* Horizontal menu */ 
ul#menu
{ float: left;
  margin: 0;
  padding-left:0px;}

ul#menu li
{ float: left;
	
  padding: 0 0 0 7px;
  list-style: none;
  margin: 1px 2px 0 0;
  background: #488a99 url(tab.png) no-repeat 0 0;}

ul#menu li a
{ font: bold 110% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 8px 5px 8px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #488a99 url(tab.png) no-repeat 100% 0;} 

ul#menu li.selected a
{ height: 20px;
  padding: 6px 8px 5px 8px;}

ul#menu li.selected
{ margin: 1px 2px 0 0;
  background: #DBAE58 url(tab_selected.png) no-repeat 0 0;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #DBAE58 url(tab_selected.png) no-repeat 100% 0;
  color: #FFF;}

ul#menu li a:hover
{ color: #ffc34d}

/* END OF HORIZONTAL MENU */
#page_content
{ width: 1000px;
  /*overflow: hidden;*/
  margin: 20px auto 0 auto;
  padding: 0 0 10px 0;} 
  
  
#wrapper{
	width: 880px;
	right: 0px;	
	margin: 0px auto;	
	min-height: 250px; 
	position: relative;	
}

#container2{
	position: absolute;
	top: 0px;
	width: 56%;	
	padding: 8px 6% 40px 6%;
	margin: 0 0 35px 0;
	background: rgb(247, 247, 247);
	border: 1px solid rgba(147, 184, 189,0.8);
	-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	   -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	        box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	-webkit-box-shadow: 5px;
	-moz-border-radius: 5px;
		 border-radius: 5px;
}
#container2{
   z-index: 22;
}

.container_title{
    font: bold 130%  'century gothic', arial;
    color: #445158;
	line-height: 35px;
	position: relative;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    padding: 0px 0px 5px 0px;
} 

span{
    font:  bold 70% 'century gothic', arial;
    color: #ea8909;
	line-height: 35px;
	position: relative;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    padding: 0px 0px 5px 0px;
}



input {
  outline: none;
  padding-left: 7px;
}

/* all the input except submit and checkbox */
input[type=text]{
	width: 80%;
	margin-top: 0px;
	padding: 4px 5px 2px 12px;	
	border: 1px solid rgb(178, 178, 178);
    font-family: 'century gothic',Arial,sans-serif;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
input[type=date]{
	width: 130px;
	margin-top: 4px;
	padding: 3px 5px 1px 12px;
	border: 1px solid rgb(178, 178, 178);
    font-family: 'century gothic',Arial,sans-serif;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
input[type=text]:active,
input[type=text]:focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);	
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
} 

.checkboxcss{
	margin-top: -5px;
}
.checkboxcss input,
.checkboxcss label{
	display: inline-block;
	font-size: 12px;	
	font-style: italic;
}
.checkboxcss label{
	width: 80%;
}

select{
	width: 120px;
	margin-top: 4px;
	padding: 3px 5px 1px 12px;
	border: 1px solid rgb(178, 178, 178);
    font-family: 'century gothic',Arial,sans-serif;
    overflow:hidden; 
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
select:active,
select:focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);	
	overflow:hidden; 
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
select:disabled{
	background: #dddddd;
}
option{
    font-family: 'century gothic',Arial,sans-serif;
    overflow:hidden; 
}



/** FOR IE  */

.lt8 #wrapper input{
	padding: 10px 5px 10px 32px;
    width: 92%;
}
.lt8 #wrapper input[type=checkbox]{
	width: 10px;
	padding: 0;
}
.lt8 #wrapper h1{
	color: #066A75;
}




  
/* BUTTONS */

.button{
	text-align: left;
	margin: 5px 0;
}
.button input{
	width: 38%;
	cursor: pointer;	
	background: #f78d1d;
	padding: 4px 5px;
	font: bold 100% 'century gothic', arial;
	/*font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;*/
	color: #fff;
	/*font-size: 24px;*/	
	border: 1px solid #da7c0c;	
	margin-bottom: 10px;	
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	   -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	        box-shadow:0px 1px 0px 0px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 0px 0px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}
.button input:hover{
	background: #f47c20;
}

.button input:active{
	background: #fcd3a5;
	position: relative;
	top: 1px;
	border: 1px solid #da7c0c;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	   -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
	        box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}


 .button input:disabled{
	background: #dddddd;
}

.editButton{
 background: #fff url(edit.png) no-repeat 28% 0;
 width: 28px;
 height: 28px;
 border-radius: 2px;} 
 
.saveButton{
 width: 28px;
 height: 28px;
 border-radius: 2px;
 background: #fff url(save.png) no-repeat 28% ; } 
 
.deleteButton{
 width: 28px;
 height: 28px;
 border-radius: 2px;
 background: #fff url(delete.png) no-repeat 32%;} 


/* FOR floating-panel */

 #floating-panel {
 		width: 200px; 
        position: relative;
        z-index: 5;
        background-color: #68a4c3;
        padding: 20px 20px 20px 20px;
        margin:20px 0 0 20px;
        border: 1px solid #999;
        text-align: left;
        border-radius: 8px;
        z-index: 2;
 }
 
 
.orange {
	width: 200px; 
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	 *display: inline; 
	vertical-align: baseline;
	margin: 10px 2px ;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 16px/140% 'century gothic', Arial, Helvetica, sans-serif;
	padding: 5px 0 5px 0;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	
}

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.orange:disabled{
	background: #dddddd;
	border: solid 1px #808080;
}

 .fp_select {
 height:25px;
 width:180px;
 overflow:hidden; 
 border-radius: 6px;
 margin:0px 2px 10px 0;
 }

.fp_select:active,
.fp_select:focus{
	background: rgb(240, 240, 240);	
}

.fp_checkbox {
  transform: scale(1.5);
  margin: 10px 10px 10px 0;
}

input[type=radio] {
  transform: scale(1.5);
  margin: 10px 10px 10px 0;
}

/* END OF FLOATING-PANEL */
 table{ 
width:400px;
 margin: 10px 0 30px 0;}

table tr th
{ 

  background: #445158;
  color: #FFF;
  padding: 5px 4px;
  text-align: center;
  border-radius:4px;

  }

table tr td
{ /*background: #E5E5DB;
  color: #47433F;
  border-top: 1px solid #FFF;*/
  padding: 3px 4px;
  text-align: left;}
  
  /* class table */
.table{
  display: table;
  border-collapse:collapse;
}
.table-row{
	display: table-row;
	width:auto;
}
.table-cell, .table-head{
  display: table-cell;
  padding:2px 0 0 5px;
  /* border:#f0f0f0 1px solid; */
}
.table-head{
	padding:10px;
	font-weight:bold;
}



.arrange_table
{	background-color:rgba(0, 0, 0, 0);
	border: 0;
	padding:0 0 0 0;
	margin:0 0 0 0; 

}
.arrange_tr 
{ background-color:rgba(0, 0, 0, 0);
  border: 0;
  margin:0 0 0 0;
  padding: 0 0 0 0;
  }
  
.arrange_td 
{ background-color:rgba(0, 0, 0, 0);
  border: 0;
  margin:0 0 0 0;
  padding: 0px 10px 0px 0px;
  width: 1px;
 }


      
  #mapArea {
  		height:100%;
        margin: 5px 5px 5px 5px;
        border:2px solid #999;
        z-index: 1;
  }
  
 #map {
  		height:100%;
        margin: 5px 5px 5px 5px;
        border:2px solid #999;
        z-index: 1;
  }
  
 .fieldLabel
 {color: #445158;
  font: normal 120% 'century gothic', arial;
  letter-spacing: normal;
  padding: 10px 0 5px 2px;
  margin: 0;
 }
 
 // This is used in students.js for file selector 
/*#fileupload {
    position: relative;
    overflow: hidden;
}

#fileupload input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.001
}*/
.divfileContainer{
	background: #f78d1d;
}
.fileContainer {
    overflow: hidden;
    position: relative;
    min-width: 250px; 
    background-color:#f78d1d;
    border-style:double;
    padding: 3px 20px;
	font: bold 110% 'century gothic', arial;
	color: #fff;
	border: 1px solid #da7c0c;	
	margin-bottom: 10px;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;	
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	   -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	        box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 1px;
    filter: alpha(opacity=0);
    /*min-height: 100%;
    min-width: 100%;*/
    height: 30%;
    max-width: 50px;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
	
}


.shadowblockmenu-v{
font: normal 100% 'century gothic', arial;
width: 130px; /* width of menu */
background: #f7fafc;
}

.shadowblockmenu-v ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;


}

.shadowblockmenu-v ul li{
margin:0;
padding:0;
width:130px;
}

.shadowblockmenu-v ul li a{
display:block;
/*text-transform: uppercase;*/
color: #445158;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
border-radius:10px;
-moz-box-shadow: inset 7px 0 10px rgba(72,138,153, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(72,138,153, 0.6);
box-shadow: inset 7px 0 10px rgba(72,138,153, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{
color: black;
border-radius:10px;
-moz-box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8);
box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8);
}



ul#vermenu li.selected
{ color: black;
border-radius:10px;
-moz-box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8);
box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8);}

ul#vermenu li.selected a, ul#vermenu li.selected a:hover
{ color: black;
border-radius:10px;
-moz-box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8);
box-shadow: inset 7px 0 10px rgba(29,60,65, 0.5), inset 0 0 15px rgba(29,60,65, 0.6), inset 0 0 20px rgba(29,60,65, 0.8);}

/* This is used when user selects a student row */
.selectedrow{
	background:#cce6ff;
}


/* A spinner  */ 
.spinner {
  position: relative;
  left: 40px; 
  border: 10px solid #afacac;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  border-right: 10px solid orange;
  border-bottom: 10px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.spinnerMess {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index:999;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* end of spinner */


.loader {
    width: 10em;
	left: 440px; 
    height: 10em;
    font-size: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate 3s linear infinite;
	  z-index:999;
}

.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color:  #3498db;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.2em 0.2em 0em 0em;
    --deg: -45deg;
    animation-direction: normal;
}

.loader .face:nth-child(2) {
    width: 70%;
    height: 70%;
    color: orange;
    border-color: currentColor currentColor transparent transparent;
    border-width: 0.2em 0em 0em 0.2em;
    --deg: -135deg;
    animation-direction: reverse;
}

.loader .face .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--deg));
    transform-origin: left;
}

.loader .face .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 2em,
                0 0 4em,
                0 0 6em,
                0 0 8em,
                0 0 10em,
                0 0 0 0.5em rgba(255, 255, 0, 0.1);
}

@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}