body{
  <!-- background-image:url('../siteImages/bodyTop.jpg');
   background-repeat:repeat-x;-->
   margin:0;
   padding:0;
}
#container{
   width:1200px;
  
   margin:auto;
   height:100px;
}

#admin{
 float:left;
 color:yellow;
 width:100px;
 height:100px;
 text-align:center;
 
 background:rgba(0,f,f,0.1);
 vertical-align:middle;
 line-height:80px;
}

a{
   text-decoration:none;
 }

a:hover{
   text-decoration:none;
}

#menuoptions{
   float:right;
   display:block;
   height:100px;
   padding-top:60px;
   width:800px;
}

ul{ list-style-type:none;
    display:inline-block;
}

li{
    float:left;
    width:80px;
    color:#ffffff;
    text-align:center;
}

li:hover{
         color:yellow;
}

.hovered{
  opacity:0.5;
}

#admin a:hover{

 color:yellow;
}


ul{	list-style-type:none; 
	padding:0px; 
}


#pageHeader li{	display:inline-block; 
	float:left; 
	width:25%; 
	text-align:center;
	background-color:#0066FF;
	
}

#header{	width:800px;
			height: 200px;
			background-color:#006699;
}


#pageHeader{	margin-bottom:25px;
}

#mainWrapper{	width:800px;
				margin:auto;
}

#addProduct{	text-align:right;
}

#pageContent{	width:800px;
				text-align:left;
}

#productWrapper{	
					
					margin-bottom:10px;
                                        margin-right: 30px;
					
}


#productLeft{	width:30%; 
				float:left;
				
}

#studentInfo{	                width:300px;
				float:left;
				padding:5px;
                                
				
}
				

#productRight{	width:30%;
				float:left;
}

#studentImage{	
				
				
}

#productInfo{	
				
				
				
}

#productInfo li{}

#pageFooter{	clear:both;
}

.smallThumb{	
				
}

.stretch{
         width:200px;
}







#events{ clear:both;
         text-align:right;
         padding:5px;
         position: absolute:
         top:0px;
         left:0px;
padding:10px;
}


#mainEventWrapper{
 
 position:absolute;
 right:75px;
 top: 130px;
 
}



#eventWrapper{
 
 
 
}

#events div:nth-child(even){
   background:#5cb6f5;
}

#eventList{  width:200px;
             text-align:left;
             border:solid 2px black;
             border-radius:10px;         
             display:inline-block;

             position: absolute:
             top:0px;
             left:0px;
}




.spacer{
         width:800px;
         height:20px;
         background-color:black;
         clear:both;
         margin-bottom: 50px;

}
.drop-menu {
    display: block;
    float:left;
    text-align: left;
    padding: 10px 10px;
    font-size: 20px;
    height: 15px;
    max-height: 15px;
    width:120px;
    background: #fff;
    cursor: pointer;
    border: 1px solid #f6f0e4;
position:relative;
}


.drop-menu:hover .sub-menu {
    display: inline-block;
}


.sub-menu {
    display: none;
    width:120px;
    background: #fff;
    padding: 10px 10px;
    margin-left: -11px;
    margin-top: 0px;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}


.sub-menu li {
        list-style-type: none;
        display: block;
        border-bottom: 1px dotted #eaeaea;
        font-size: 15px;
        height: 22px;
        padding: 8px 0;
        color:black;
		
}

.sub-menu a{
		text-decoration:none;
}

a{
text-decoration:none;
}

a:visited{  color:black;}

.sub-menu li img {
            margin-right: .5em;
}

.sub-menu li:hover {
        border-bottom: 1px dotted #bababa;
}

.plus {
    display: inline-block;
    -webkit-transition: .1s ease-in-out;
      -moz-transition: .1s ease-in-out;
      -o-transition: .1s ease-in-out;
}

.drop-menu:hover .plus {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}


#outerTT{
margin:auto;
width:900px;
clear:both;

}

#daylabels div{

  width:105px;
  display:inline-block;
  float:left;
  text-align:center;
}

#daylabels div:nth-child(even){
   background:#0399f8;
}


#daylabels div:nth-child(odd){
   background:#47bcf8;
}

#columns{
         clear:both;
}

#daylabels{
       width:850px;
       margin-left:63px;
}


.active{
background-color: #2e2e2e !important;
color:yellow;
}


.fadeout{
           opacity:0;
}

#s_image{

width:80px; height:100px; opacity:1; -webkit-transition-property:opacity; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:linear;
}

#classlist{
                       
			float:left;
			width:260px;
			text-align:center;
			background:#0084ff;
			padding:10px;
                        margin-top:-20px;
                        margin-left:10px;
                        border-radius:20px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		
}
#pointsBox{
     width:800px;
     margin:auto;
     text-align:center;

}

#colorContainer{
     
     display:block;
     width:200px;
     margin:auto;
     text-align:center;
     padding:0px;
    
}

#colorContainer ul li{
    display:inline-block;
    list-style-type: none;
    float:left;
    width: 100px;
    height:100px;
    background:#f0f0f0;
    border-radius:50%;
    margin:10px;
}

#gradeContainer{
   text-align:center;
   margin:auto;
   width:900px;
   height:100px;
   
   
}

#gradeContainer ul li{
    display:inline-block;
    list-style-type: none;
    float:left;
    width: 100px;
    height:100px;
    color:white;
    border-radius:5%;
    margin:10px;
    background:#5cb6f5;
    
    line-height:100px;
    vertical-align:middle;
    font-size:300%;
}

#gradeContainer ul li:hover{
    -webkit-transform:rotate(5deg);
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

#houseContainer{
   margin-top:100px;
   width:840px;
   height:500px;
   margin-left:auto;
   margin-right:auto;
   color:red;
   padding:10px;  
}

.box {
    width: 100px;
    height: 100px;
    float:left;
    margin:auto;
    
}
 
.red {
    background: red;
}
 
.orange {
    background: orange;
}
 
.green {
    background: green;
}
 
.blue{
    background: blue;
}

#info{

    position:absolute; 
    top:50px; 
    left:150px; 
    width:100px; 
    height:100px; 
    border-radius:50%; 
    color:white; 
    line-height:100px; 
    vertical-align:middle; 
    text-align:center; 
    font-size:300%; 
    -webkit-box-shadow: 0 8px 6px -6px black;  
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    border:solid 1px #f0f0f0;"
}


input[id = "usrname"]
{
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
   
    height: 35px;
	border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
	}
input[id="usrname"]:hover {
    border: 1px solid #b6bfc0;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}

#searchContainer {
    
    margin:auto;
    margin-top:30px;
padding:5px;
    padding-bottom:20px;
    padding-top:20px;
    background:#5cb6f5;
    border-radius:5px;
   
    border: 1px solid #ccc;
    text-align:center;

    
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	
}

.showMe{
   display:visible;
}

#bigContainer{
  

  
}

#overlayContainer{

  position:absolute;
  display:none;
  width:200px;
  height:100px;
  top:100px;
  left:55px; 

}


#overlay{
   
   width: 200px;
   height: 100px;
   background: #5cb6f5;
   position:absolute;
   top:0px;
   left:0px;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
   
}
#overlay:before {
   content:"";
   position: absolute;
   right:100%;
   top: 25px;
   left:-26px;
   width: 0;
   height: 0;
  border-top: 13px solid transparent;
	border-right: 26px solid #5cb6f5;
	border-bottom: 13px solid transparent;
}

#slideInfo{
           display:none;
}