@font-face{
    font-family:'GE_SS';
    src: url('/styles/ge_ss_two_medium.eot');
    src: url('/styles/ge_ss_two_medium.eot#') format('eot'), 
    url('/styles/ge_ss_two_medium.woff') format('woff'), 
    url('/styles/ge_ss_two_medium.ttf') format('truetype'), 
    url('/styles/ge_ss_two_medium.svg#ge_ss_twomedium') format('svg');
    font-weight: normal;
    font-style:normal;
}
@font-face{
    font-family:'Myriad_AR';
    src: url('/styles/myriad.eot');
    src: url('/styles/myriad.eot?#iefix') format('embedded-opentype'), 
    url('/styles/myriad.woff') format('woff'), 
    url('/styles/myriad.ttf') format('truetype');
    font-weight: normal;
    font-style:normal;
	font-size:16px;
}
body{
	font-family:Arial;	
}
h1{
	font-family:'GE_SS';	
}
input[type="text"],input[type="password"]
{
	border:2px solid #009966;
	border-radius:10px;
	background-color:#eeeff4;
	width:90%;
	height:1.5em;
	margin:0.25em 0.5em;
	font-size:2em;
	color:#999999;
	padding:0.20em;
}
input[type="submit"]{
	border: 2px solid #66cc00;
	border-radius:10px;
	float:left;
	margin:1em 1em;
	width:20%;
	height:3em;
	cursor:pointer;
	font-family:'GE_SS';
	color:#fff;
	font-size:1.2em;
	text-shadow: 2px -2px 5px #99ff33;
background: #ffff33; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmYzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NmNjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffff33 0%, #66cc00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff33), color-stop(100%,#66cc00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffff33 0%,#66cc00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffff33 0%,#66cc00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffff33 0%,#66cc00 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffff33 0%,#66cc00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff33', endColorstr='#66cc00',GradientType=0 ); /* IE6-8 */
}
button, input[type="button"]{
    margin: 0em;
    border-radius: 5px;
    border: 1px solid #418100;
    padding: 5px;
    background-color: #66cc00;
    color: #fff;
    cursor: pointer;
}
button:disabled,input[type="button"]:disabled{
	background:#c1c1c1;
	color:#838383;
	border:1px solid #838383;
	text-shadow:none;
	cursor:default;
}
#wrapper{
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  background-color: #ffffff;
  position: relative;
}
#langselect{float:left;margin:1em 0px;text-align:left;}
#langselect a{
	color:#009966;
	font-family:Arial;
}
.logout{
	font-family:'GE_SS' !important;
	font-weight:bolder;
	text-align:left;
	line-height:3em;
	text-decoration:underline;	
}
#menu{
	height:3em;
	background-color:#66cc00;
	width:100%;	
	float:right;
	border-radius:10px;
}
#menu a{font-family:'GE_SS';color:#fff;line-height:3em;margin:0 0.8em;}
#menu a:hover{color:#fff000;text-decoration:underline;}
#loginpanel{
	position:fixed;
	top:50%;
	right:50%;
	border: 3px solid #66cc00;
	border-radius:10px;
	margin: -250px -250px;
	width:500px;
	height:520px;
	background-color:#fff;	
}
div.filterbar{
	background-color:#E1E1E1;
	padding:0.5em;
	width:100%;
	height:2em;
	line-height:2em;
}
div.filterbar div{
	padding:0em 0.5em;
}
#mobileActions{
	display:none;
}
input.small[type="text"] {
    border: 1px solid #a9a9a9;
    line-height: 1em;
    height: 1em;
    font-size: 1em;
    border-radius: 0px;
}
@media screen and (max-width:450px) {
	#admins{max-width:200px;}
	/*#order{max-width:70px;}
	#classToShow{max-width:100px;}*/
	#searchlbl,#searchbtn{display:none;}
	div.filterbar div{float:right !important;margin:0em 0.3em !important;}
	div.filterbar {height:5em;box-sizing:border-box;}
	#mobileActions{display:block;margin: 1em;width:140px;}
	div.studentactions button{display:none;}
	.studentreport, .invalidstudentreport{width:90% !important;}
	#diffRange{width:100px;}
	#diffLevel{width:100px;}
	.group{width:31% !important;-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;box-sizing: border-box;font-size:.75em;}
	.ui-dialog{width:100% !important;right:0px !important;padding:0px !important;box-sizing: border-box !important;}
	.ui-dialog-content{padding:0px !important;}
	.lazyloaded{max-height:230px;width:100%;}
	.blockUI{width:100% !important;right:0px !important;left:auto !important;-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
	#searchbox{width: 98% !important;min-width:auto !important;-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box !important;}
	#skillcontainer{width:98%;}
	.guideitem{width:95% !important;margin:2% !important;}
	select#classes{width:120px;}
	div.lane{width:100% !important;}
	div.assstats{width:100% !important;line-height:2em !important;}
	div.statscontainer{display:grid !important;padding:1em 0em 0.5em 0em !important;}
	div.assbtns{width:100% !important;}
	.mhalf{width:47% !important;box-sizing:border-box !important;}
	.mhalf select{width:100% !important;max-width:auto !important;height:2em !important;}
	.mfull{width:100% !important;box-sizing:border-box !important;}
	.wblbl{display:none;}
	.sidemenu{width:100% !important;}
}

#searchbox{
padding:0.1em;height:1.5em; margin:0;background-color:#fff;min-width: 380px;border-radius: 0px !important;border: 1px solid #a9a9a9;font-size:1.2em;font-family:Myriad_AR;vertical-align: middle;color:#000;width:auto;}

div.filterbar span{
	float:left;
}
#mascot{
	background-image:url('../../images/school/mascot.png');	
	background-size:cover;
	width:96px;
	height:96px;
	margin:1em auto;
	border-radius:10px;
}
#password{
	color:#000;	
}
.clear{
	clear:both;	
}
#maincontent{
	float:right;
	width:100%;	
}
#footer{
	font-size:1.5em;
	font-family:'Myriad_AR';
	color:#333333;
	text-align:center;
	font-weight:bolder;	
}
.copyright{
font-family:'Myriad_AR';
font-size:1.5em;
position:fixed;
top:50%;
margin-top:300px;
width:100%;
text-align:center;
font-weight:bolder;
color:#333333;	
}
#list-container
{
	width:100%;box-sizing:border-box;	
}
a h3{
	white-space: nowrap;
}
.story-cover{
	float:right;
	width:31%;
	height:215px;
	position:relative;
	margin:1%;
	box-shadow: -5px 5px 5px #a0a0a0;
}

.rating-icon{
position:absolute;z-index:9;box-shadow:0px 1px 1px #000;
}
.cat-icon{
position:absolute;right:36px;z-index:9;width:37px;margin:0px;opacity:.8;box-shadow:0px 1px 1px #000;
}
.story-cover img.cover{
	width:100%;
	height:100%;
}
.cover-title{
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
width: 100%;
font-family:Tahoma;
color:white;
background-color:black;
opacity:0.8;
text-align: center;	
}

/**************** story single view *********************/
.slider{
	background-color:#2c2b2b;
	height:3.2em;
	opacity:1;
	position:relative;
	clear:both;
}
.back{
	cursor:pointer;
	}
.next{
	cursor:pointer;	
	}
	#reader-loader
{
	background: url(../images/ajax-loader-green.gif) 50% 50% no-repeat;
	display:none;
	/*width:100%;
	height:100%;*/
	min-height:50px;
	min-width:50px;
	margin:0;
	padding:0;
	z-index:2;
	bottom:10px;
	right: 10px;
	position:absolute;
}
#exit
{
	position:absolute;
	z-index:2;
	bottom:5px;
	left:5px;
	width:50px;
	height:50px;
	background: url(../images/exit.png);
	cursor:pointer;
}
.scriptbackground
{
	background:#000;opacity:0.8;position:absolute;bottom:0px;right:0px;width:100%;color:#fff; text-align:center;cursor:pointer;
}
#moreText
{
	display:none;
	position:absolute;
	left:0;
}
#showMoreText
{
	position:absolute;
	left:0;
}
#progressBar {
position: absolute;
z-index: 999999;
top: 0;
right: 0;
width: 0%;
height: 4px;
background: #33cc00;
border-radius: 10%;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progressBar:before {
position: absolute;
content: '';
top: 0;
opacity: 1;
width: 10%;
left: 0px;
height: 4px;
box-shadow: #33cc00 1px 0 6px 2px;
border-radius: 50%;
}
.altrow{
	background-color:#E1E1E1;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #66cc00;
  border-radius:10px;
  z-index:5;
}

        ul.topnav li a {
                display: inline-block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                transition: 0.3s;
                font-size: 17px;
            }

        ul.topnav li.icon {display: none;}
        @media screen and (max-width:750px) {
 ul.topnav li:not(:first-child) {display: none;}
      ul.topnav {border-radius:0;}
    ul.topnav li a {border-bottom:2px solid;}

  ul.topnav li.icon {
    display: inline-block;
  }
		}
        @media screen and (max-width:750px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    top: 0;
  }
  
 
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
  }
  

}
#studentlist {
         width:32%;
}

@media screen and (min-width:700px) and (max-width:850px) {
body{font-size:0.8em;}
#menu a{font-size:0.9em;}
ul.topnav li{height: auto !important;}
.group{width:17% !important;}
.guideitem{width:41% !important;}
#studentlist {width:49% !important;}
#searchlbl{display:none;}
#searchbtn{display:none;}
.wblbl{display:none;}
select{height:2em;}
button, input[type="button"]{font-size:0.8em;}
.field{clear:none !important;line-height:32px;}
.mcomma{line-height:32px;}
} 
.mcomma{display:none;}
.tablehead {
        width:100%;
        text-align:center;
        font-weight:bold;
        color:white;
    }

.tablehead div {
            height: 50px;
            margin: 1px;
            background-color: #66cc00;
            display:flex;
            align-items:center;
        }
    
.tablerow {
        width:100%;
		clear:left;
        text-align:center;
    }
    
.tablerowalt {
        width: 100%;
        clear: left;
        text-align: center;
    }
        
.tablerowalt div {
            background-color: #E1E1E1;
        }
    
.headcol1 {
        width: 10%;
    }
    
.headcol2 {
        width: 18%;
    }
    
.headcol3 {
        width: 9%;
    }
    
.headcol4 {
        width: 18%;
    }
    
.headcol5 {
        width: 13%;
    }
    
.headcol6 {
        width: 30%;
    }
    
.col1 {
        width:10%;
    }
    
.col2 {
        width: 18%;
    }
    
.col3 {
        width: 9%;
    }
    
.col4 {
        width: 18%;
    }
    
.col5 {
        width: 13%;
    }
    
.col6 {
        width: 30%;
    }
    
.col1, .col2, .col3, .col4, .col5, .col6 {
        height: 114px;
        margin: 1px;
        display:flex;
        align-items:center;
    }
    
.cntr {
        text-align:center;
        width:100%;
    }

@media screen and (min-width:980px) {
        .tablerow span, .tablerowalt span {
            display:none;
        }
    }
    
@media screen and (max-width:980px) {
        .tablehead {
            display:none;
        }
        .col3, .col4, .col5 {
            display:none;
        }
        .col2 {
            width: 60%;
        }
        .col6 audio {
            width:45px;
        }
        .col6 {
            width:14%;
        }
        .col1 {
            width:22%;
        }
     }
.legend { list-style: none;-webkit-padding-start: 10px;margin-top:0em;padding-bottom:2em; }
.legend li { float: right;}
.legend span { border: 1px solid #ccc; float: right; width: 12px; height: 12px; margin: 2px; }
/* your colors */
.legend .beginner { background-color: #3c9c0e; }
.legend .intermediate { background-color: #fdd601; }
.legend .advanced { background-color: #fd4e01; }
#barinfo div {
float:right;
}
.baar div {
float:right;
border-top-right-radius:7px;
border-bottom-right-radius:7px;
}
#translator{position:fixed;bottom:-100px;right:0px; cursor:pointer;border:1px solid #939393;}
#transhead{background-color:#eb8029;color:#ffffff;padding:0.5em;}
#transpane{background-color:#E7E7E7;color:#000000;padding:0.5em 0.1em;}
input#transtext{width:auto;font-size:1em;border-radius:2px;color:#000;font-family:Myriad_AR;}
#transresult{padding:0.5em;}
@media print { 
 /* All your print styles go here */
 #topHeader, #footer, #menu,.filterbar,#translator { display: none !important; } 
}