body{ background:#fff; margin:5px 5px;  }

#wrapper{width: 100%; font-size:90%; margin:0 auto; text-align: center; font-family: Arial,Verdana,sans;}

/*START OF HEADER */

#header{ height: 166px;  background: url(./i/top_bg.gif) ; text-align:center}

/*END OF HEADER */


/*START OF COMMON */
.left{float:left}
.right{float:right}
  
h1{ font-size:160%; font-family: Arial,Verdana,sans; font-weight: normal; width:100%; text-align: center; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px}
h2{ font-size:140%; font-family: Arial,Verdana,sans; font-weight: normal; width:100%; text-align: center; margin: 0px 0px 0px 0px; padding: 0px}
h3{
	font-size:100%;
	font-family: Arial,Verdana,sans;
	font-weight: normal;
	width:100%;
	text-align: center;
	margin: 0px 0px 0px 0px;
}

/*END OF COMMON */


/*START OF MAIN */
table#main{ background:#fff; width:990px; margin: 0px auto; font-family: Arial,Verdana,sans; }

table#main td{ vertical-align: top; }

table#main #free_trial{ border:1px solid #999; padding: 5px 5px 5px 5px; background: #f5f5f5; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:0.9em}
table#main #Tbox{ border:1px solid #5CBDDE; padding: 5px 5px 5px 5px; background: url(./i/Tboxbackground.jpg) repeat-x; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:left; }
table#main #Sbox{ border:1px solid #5CBDDE; padding: 5px 5px 5px 5px; background: url(./i/Sboxbackground.jpg) repeat-x; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:left; margin-top: 10px}
table#main #Abox{ border:1px solid #FFCC00; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; margin-top: 10px; overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }
table#main #PRZone{ border:1px solid #FF0000; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#FFff00 }
table#main #PHZone{ border:1px solid #009900; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#CAFF70 }
table#main #GRZone{ border:1px solid #000080; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#003EFF }
table#main #PIZone{ border:1px solid #800000; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#FF0000 }
table#main #AllZone{ border:1px solid #302B54; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#42C0FB }

table#main td#nav{width: 186px; vertical-align: top }

table#main td#nav #buttons_panel{font-size:90%; margin-top:11px; margin-right:10px; width: 180px; text-align: center;font-family: verdana; font-weight: bold; }
table#main td#nav #buttons_text{font-size:90%; margin-top:30px; margin-right:5px; width: 181px; text-align: center;font-family: verdana}
table#main td#nav{width: 186px; vertical-align: top }
table#main td#nav #buttons_panel{font-size:90%; margin-top:11px; margin-right:10px; width: 180px; text-align: center;font-family: verdana; font-weight: bold; }
table#main td#nav #buttons_text{font-size:90%; margin-top:30px; margin-right:5px; width: 181px; text-align: center;font-family: verdana}

table#main td#nav #buttons_panel .button{   
text-align: center; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: #0033CC 1px 1px 1px;
-moz-box-shadow: #0033CC 1px 1px 1px;
box-shadow: #0033CC 1px 1px 1px;
background: #5CBDDE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#5CBDDE), to(#FFFFFF));
background: -webkit-linear-gradient(#5CBDDE, #FFFFFF);
background: -moz-linear-gradient(#5CBDDE, #FFFFFF);
background: -ms-linear-gradient(#5CBDDE, #FFFFFF);
background: -o-linear-gradient(#5CBDDE, #FFFFFF);
background: linear-gradient(#5CBDDE, #FFFFFF);
-pie-background: linear-gradient(#5CBDDE, #FFFFFF);
 behavior: url(pie/PIE.htc);
 margin: 5px 0px; padding: 11px 5px 10px 5px}

table#main td#nav #buttons_panel .button a{ color: #009; text-decoration: none}
table#main td#nav #buttons_panel .button a:hover{ color: #009; text-decoration: underline}

table#main td#nav #buttons_panel .button-y{   	background-color: #99ccff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 1px 1px 1px #0033cc;
-webkit-box-shadow: 1px 1px 1px #0033cc;
box-shadow: 1px 1px 1px #0033cc;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 135, color = '#0033cc');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 135, Color = '#0033cc')";
/*Shadows look very different in IE (Only cardinal directions supported)*/
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element should have a background-color*/
/*All filters must be placed together*/
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FFCC00', endColorstr = '##ffff00');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FFCC00', endColorstr = '##ffff00')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #FFCC00, ##ffff00);
background-image: -ms-linear-gradient(top, #FFCC00, ##ffff00);
background-image: -o-linear-gradient(top, #FFCC00, ##ffff00);
background-image: -webkit-gradient(linear, center top, center bottom, from(#FFCC00), to(##ffff00));
background-image: -webkit-linear-gradient(top, #FFCC00, ##ffff00);
background-image: linear-gradient(top, #FFCC00, ##ffff00);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
 margin: 5px 0px; padding: 11px 5px 10px 5px}
table#main td#nav #buttons_panel .button-y a{ color: #009; text-decoration: none}
table#main td#nav #buttons_panel .button-y a:hover{ color: #009; text-decoration: underline}

table#main td#nav #buttons_panel .button-r{	background-color: #99ccff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 1px 1px 1px #0033cc;
-webkit-box-shadow: 1px 1px 1px #0033cc;
box-shadow: 1px 1px 1px #0033cc;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 135, color = '#0033cc');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 135, Color = '#0033cc')";
/*Shadows look very different in IE (Only cardinal directions supported)*/
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element should have a background-color*/
/*All filters must be placed together*/
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cc0000', endColorstr = '#ff6600');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cc0000', endColorstr = '#ff6600')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #cc0000, #ff6600);
background-image: -ms-linear-gradient(top, #cc0000, #ff6600);
background-image: -o-linear-gradient(top, #cc0000, #ff6600);
background-image: -webkit-gradient(linear, center top, center bottom, from(#cc0000), to(#ff6600));
background-image: -webkit-linear-gradient(top, #cc0000, #ff6600);
background-image: linear-gradient(top, #cc0000, #ff6600);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
 margin: 5px 0px; padding: 11px 5px 10px 5px }
table#main td#nav #buttons_panel .button-r a{ color: #FFff00; text-decoration: none}
table#main td#nav #buttons_panel .button-r a:hover{ color: #FFff00; text-decoration: underline}

table#main td#nav #buttons_panel .button_big{ background: url(./i/button_big.gif); background-repeat:no-repeat; margin: 20px 0px; padding: 15px 5px; line-height:1.5em}
table#main td#nav #buttons_panel .button_big a{ color: #009; text-decoration: none}
table#main td#nav #buttons_panel .button_big a:hover{ color: #009; text-decoration: underline}


table#main td#content{ height: 279px; padding: 5px 15px 15px 15px}
table#main td#content #page{ margin: 20px 0px; font-family: Tahoma, helvetica, Verdana; font-size: 90%}
table#main td#content .school {background-color:#FFFFFF; vertical-align:top; padding: 5px}
table#main td#content .iconhelp {background-color:#FFFFFF; vertical-align:middle; padding: 10px}
table#main td#content .whitebox{ border:1px solid #000000; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#FFFFFF }

table#log .A6 {vertical-align: top; background: url(./i/A6.jpg); width: 220px; height:147px; background-repeat: no-repeat; background-position:right; border-collapse:collapse; font-size:90%; text-align: center; margin: 0px 0px 0px 0px}
table#log .A7 {vertical-align: top; background: url(./i/A7.jpg); width: 220px; height:147px; background-repeat: no-repeat;background-position:left; border-collapse:collapse; margin: 0px 0px 0px 0px}
table#log .A9 {vertical-align: top; background: url(./i/A9.jpg); height:147px; background-repeat: no-repeat; background-position:top; margin: 0px 0px 0px 0px}
table#log .A8 {vertical-align: top; background: url(./i/A8.jpg); height:147px; background-repeat: no-repeat; background-position:top; margin: 0px 0px 0px 0px}
table#log .logintop { background: url(./i/login-top.jpg); height:73px; width:400px; background-repeat: no-repeat; background-position:bottom; margin-top:30px; text-align:center}
table#log .loginleft {vertical-align: top; background: url(./i/login-left.jpg); height:57px; width:200px; background-repeat: no-repeat; background-position:top; margin: 0px 0px 0px 0px}
table#log .loginright {vertical-align: top; background: url(./i/login-right.jpg); height:57px; width:200px; background-repeat: no-repeat; background-position:top; margin: 0px 0px 0px 0px}
table#log .loginbottom {vertical-align: top; background: url(./i/login-bottom.jpg); height:44px; width:400px; background-repeat: no-repeat; background-position:top; margin: 0px 0px 0px 0px}
table#main td#right_col{width:230px}
table#main td#left_col{width:60px}
table#main td#content .StoryScript{ border:1px solid #FF0000; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#FFff00; overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }
table#main td#content .Lyrics{ border:1px solid #FF0000; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#00FFFF; overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }
table#main td#content .greenbox{ border:1px solid #006600; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#00FF00; overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }
table#main td#content .bluebox{ border:1px solid #0066FF; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#6699FF; overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }
table#main td#content .orangebox{ border:1px solid #CC3300; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#FF9900; overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }
table#main td#content .redbox{ border:1px solid #FFff00; padding: 5px 5px 5px 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background-color:#FF0000; overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px; }		
table#main .main_col0{
	padding:5px 5px;
	font-family: Tahoma, helvetica, Verdana; font-size: 100%;
}
table#main .main_col1{
	padding:5px 5px;
	border-style:solid;
	border-color:#0099FF;
	border-width:thin;
	font-family: Tahoma, helvetica, Verdana; font-size: 100%;
	
}
table#main .main_col2{
	padding:5px 5px;
	border-style:solid;
	border-color:#99FF00;
	border-width:thin;
	font-family: Tahoma, helvetica, Verdana; font-size: 100%;
	
}

.roundblue {
	border-style: solid;
	border-width: 1px;
	border-color:#66CCFF;
	background-color: #66ccff;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:5px 5px;
	font-family: Tahoma, helvetica, Verdana; font-size: 100%;
}
.roundwhite {
	border-style: solid;
	border-width: 1px;
	border-color:#66CCFF;
	background-color: #FFFFFF;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:5px 5px;
	font-family: Tahoma, helvetica, Verdana; font-size: 100%;
}
.roundneutral {
	border-style: solid;
	border-width: 1px;
	border-color:#FFFFFF;
	background-color: #FFFFFF;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:5px 5px;
	font-family: Tahoma, helvetica, Verdana; font-size: 100%;
}
.roundyellow {
	border-style: solid;
	border-width: 1px;
	border-color:#FFFF33;
	background-color: #FFFF33;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:5px 5px;
	font-family: Tahoma, helvetica, Verdana; font-size: 100%;
}
.roundorange{
	border-style: solid;
	border-width: 1px;
	border-color:#FF9900;
	background-color: #FF9900;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.roundpink {
	border-style: solid;
	border-width: 1px;
	border-color:#FF66FF;
	background-color: #FF66FF;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.roundgreen {
	border-style: solid;
	border-width: 1px;
	border-color:#99FF00;
	background-color: #99FF00;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;}

.roundpurple {
	border-style: solid;
	border-width: 1px;
	border-color:#9900CC;
	background-color: #9900CC;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;}

.roundred {
	border-style: solid;
	border-width: 1px;
	border-color:#FF0000;
	background-color: #FF0000;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;}	
	
.roundroyalblue {
	border-style: solid;
	border-width: 1px;
	border-color:#6699cc;
	background-color: #6699cc;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;}	
	
table#main .buttontry{   border-style: solid;
	border-width: 1px;
	border-color:#FF9900;
	background-color: #FF9900;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;}
table#main .buttontry a{ color: #009; text-decoration: none}
table#main .buttontry a:hover{ font-size:200%; color: #009; text-decoration: none}

table#main .buttonlog{   border-style: solid;
	border-width: 1px;
	border-color:#99FF00;
	background-color: #99FF00;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;}
table#main .buttonlog a{ color: #009; text-decoration: none}
table#main .buttonlog a:hover{ font-size:200%; color: #009; text-decoration: none}

table#main .buttonsubschool{   border-style: solid;
	border-width: 1px;
	border-color:#FF0000;
	background-color: #FF0000;
	left: -50px;
	top: -50px;
	overflow: visible;
	-khtml-border-radius: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;}
table#main .buttonsubschool { color: #ffff; text-decoration: none} 
table#main .buttonsubschool a{ color: #ffff; text-decoration: none}
table#main .buttonsubschool a:hover{ font-size:200%; color: #ffff; text-decoration: none}
/*END OF MAIN */


/*START OF FOOTER */
#footer{ background: url(./i/bottom_bg.gif); height: 28px;}
/*END OF FOOTER */