* { padding:0; margin:0; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, tr, th, td, embed, object { margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif}
ul { list-style:none; }
/**************** Global Elements *****************/
html { margin:0; padding:0; }
/* fixes MSIE scrollbar bug DO NOT REMOVE, has no effect in Mozilla, or Opera */
body { height:100%; width:980px; background-image:url("../images/bckgrnddark.jpg"); font-family:veranda; text-align:center; margin:0 auto; }
/**************** Typographic Elements *****************/
h1, h2, h3, h4, h5, h6, p, blockquote, em, h1, h3, h5, i, td { font-family:Verdana, Arial, Helvetica, sans-serif;}
h6 { font-size:10px; }
h5 { font-size:11px; }
h4 { font-size:12px; }
h3 { font-size:14px; }
h2 { font-size:16px; }
h1 { font-size:22px; }
a:link, :visited, :active { color:#00CCFF; text-decoration:underline;}
a:hover { color:#FFFF33; text-decoration:underline; }
a.whitelink:link, a.whitelink:visited {color:#FFFFFF;text-decoration: underline;}
img.a:hover { text-decoration:none; border:5px inset #FFFF00; }
p { margin-right:5px; margin-left:5px; font-size:12px; }
ul { margin-bottom:5px; margin-left:20px; }
ol { margin-bottom:5px; margin-left:35px; }
/************************************ Division Elements *****************************************/
body {width:980px; text-align:center; margin:0 auto; margin-top:3px; background-color:#000000;position:relative; }
.wrap { color:#ffffff; display:block; width:980px; padding-left:0px; vertical-align:top; text-align:center; margin:0 auto; clear: both; }
#HorizantalDivider{ width:980px; clear:both; border-bottom:#FFFFFF double 4px;border-left:#000 solid 25px; margin-bottom:10px; margin-top: 12px; margin-left:0 auto; margin-right:0 auto; }
/*=========main page positioning========*/
#main {width:735px; color:#ffffff; text-align:center; padding-left:5px; padding-top:15px; padding-right:10px;float:right; }
.main-row{ clear:both; text-align:justify }
#upper-horiz-cont{width:980px; margin-top:30px;}
#HorizantalDivider{ position:relative; width:890px; clear:both; border-bottom:#FFFFFF double 4px; margin-bottom:10px; margin-right: 0px; margin-left: 0px; padding-left: 25px; }
#lower-horiz-cont{width:980px;}

/*#nav { height:230px;width:170px;float:left; }
/* mnu moves the manu around */
/*#mnu { height:355px; left:1px; top:-121px; width:160px; vertical-align:top; position:relative; }*/

#navigationBlock {width:170px;height:310px;float:left;margin-left:5px;font-size:12px;color:#ffffff;clear:left;}
#lower-nav{ width:140px; color:#ffffff; padding: 5px; }
#nav { height:280px; width: 170px;float: left; }
#mnu { left: 7px; top: -100px; width: 160px; vertical-align:top; height:255px; z-index:20; }
#footing {color:#ffffff; text-align:center; width:980px; margin:0px auto;}
#footer { margin:15px auto 0; width:980px; font-size:12px; color:#ffffff; }
.cpywrt { font-size:12px; text-align:center; clear:both; width:850px; color:#ffffff; float:right; clear:none; text-align:center; }
#quote { float:left; clear:both; padding-top:30px; padding-bottom:40px; font-size:12px; text-align:center; }
/*=========Lesson page positioning========*/
#bodytextBlock { color:#ffffff; text-align:left; padding-left:15px; padding-top:5px; padding-right:10px; float:right;width:735px;}
#bodytextBlock img { margin-left:30px; margin-right:10px; z-index:-1; margin-bottom: 10px; }
#hdln{ width:980px;/*border-bottom:#FFFFFF 4px double; margin: 0px; adding-top:10px;padding-bottom:10px;*/}
#movieBlock {width:712px;color:#ffffff; text-align:left;}
#materialsBlock { width:233px; color:#ffffff; font-size:12px; vertical-align:top; text-align:left;position:relative;}
iframe { width:712px; height:468px; background:#000000; z-index:1; }
header { font-size: 9px; text-align: center; color: #FFFFFF; }
#bookmkbar { color:#ffffff; width:790px; display: inline; margin-left: 10px; }
a.friend:link, a.friend:visited { float:left; border:2px outset #999999; font-size:11px; color:#000000; text-align:center; display:block;  background-color:#cccccc; text-decoration:none; padding:1px 5px; margin-left:10px; }
a.friend:hover { border:2px inset #999999; background-color:#FFFFFF; }
a.butt:link, a.butt:visited { border:2px outset #999999; float:left; font-size:12px; color:#333333; text-align:center; vertical-align:top; display:block; padding:2px; width:170px;  margin: 5px 10px 5px 5px; text-decoration: none; background: #CCCCCC; }
a.butt:link:hover { border: 2px inset #999999; background-color:#ffffff; }
a:hover span.donate { display:block; float:left; margin-left:-10px; color:#000000; border:20px; }
.donate, a.donate:link, a.donate:visited { font-size: 12px; color:#000000;  border: 2px outset #FFFFFF; display:inline; height: 21px; padding: 0px 0px 2px; float: left; width: 220px; margin-left: 50px; background: #CCCCCC; }
.donate:hover, a.donate:hover { color:#000000; background-color:#ffffff; border:1px inset #FFFFFF; }
a.buttdark:link, a.buttdark:visited { height: 24px; font-size: 12px; color: #CCCCCC; font-weight: bold; text-align: left; border: 3px outset #999999; background: #333333; padding: 2px; text-decoration:none }
a.buttdark:link:hover { border: inset #999999; background-color:#FFFFFF; color:#000000; }
.flot { z-index:6; }
/* This next section is for the materials list */
.palette { position:relative; width:233px; color:#999999; font-size: 15px; font-weight: bold; vertical-align: top; margin-top: 15px; margin-bottom: 5px; padding-top: 3px; }
.palettepic { width:99px; float:right; height:50px; }
/*next 2 lines generate the box shown by "info" link and position it*/
a span { display:none; line-height: 20px;position:absolute; z-index:50; }
/* increasing right moves it left; increasing top moves it down*/
a:hover span {left:-20px; top:-35px;  display: block;width:145px; height:157px; margin:0px; z-index:80; color:#000000; text-align:center; border: 3px inset #FFCC33; background: #CCCCCC; }
/*next 6 lines affect materials list*/
.first { width:197px; float:left; z-index:11; color:#FFFFFF; text-align:left; vertical-align:middle; white-space:nowrap; }
.white { color: #FFFFFF; font-size: 12px; white-space: nowrap; display: inline; text-align: left;width:30px;float:left;clear:both;z-index: 12;  }
span.white { color: #000000; position:relative; left:-50px; z-index:10; }
#center { float:left; width:115px; margin-top:15px; }
#left { float:left; clear:none; margin-left:6px; margin-top:44px; width:30px; z-index: 12; color:#FFFFFF; text-align:left; vertical-align:middle; white-space:nowrap; }
#right { float:left; z-index: 10; color:#ffffff; text-align:left; vertical-align:middle; white-space: nowrap; }
.oneline { width:590px; margin:0 auto; border-top-width:2px; border-top-style:solid; border-top-color:#999999; clear:both; padding:10px; vertical-align:middle;/* text-align:justify;*/ }
img.oneline { margin-right:40px; margin-left:40px; }
.frame { border: 4px ridge #FFCC33; margin-right:5px; margin-left:5px; }
#bodytextBlock .frame{margin-top:12px;margin-bottom:12px;}
.caption { margin-right:25px; margin-left:25px; border: 3px double #CCCCCC; padding: 8px; }
.box { margin:8px; }
.tip { border:2px inset #FF0000; position:absolute; left:-5px; top:-25px; width:200px;/*height:200px;*/ background-color:#EAF1F2; padding:6px; margin-bottom: 5px; }
.add2a { float:left; font-size:12px; display:inline; margin: 5px 7px 5px 20px; }
.add2small { float:left; cursor:pointer; font-size:10px; display:inline; width:30px; display:inline;margin: 2px; height: 30px; }
.smal { font-size:9px; }
.menunote { position:relative; color:#003366; background-color:#FFCCCC; border:5px inset #006699; padding:5px; width:325px; z-index:0; width:300px; font-family:Verdana; left:325px; font-size:12px;  text-align:center; display:block; float:right; height:125px; }
/*.video { height:280px; width:430px; text-align:left; float:left; border:2px inset #FFCC33; font-size:12px; }*/

.video { height:460px; width:708px; border:2px inset #FFCC33; font-size:12px; margin: 0px; vertical-align: bottom;color: #FFCC33;z-index:1;}
.vid { float:left; height:26px; border:inset #FF9900 2px; text-align:center; font-size: 16px; font-weight: bold; padding: 10px 6px 6px; margin-top: 0px; }


.movie { background:#000000;z-index:2;}
#size-select{float: left;margin-top:6px;margin-right:40px;}
input { color:#000000; background:#FFFFFF; }
textarea { color:#000000; background:#FFFFFF; }
option { color:#000000; background:#FFFFFF; }
.inc { margin:0 auto; clear:both; padding-top:30px; padding-bottom:2px; font-size:12px; color:#ffffff; text-align:center; width:750px; font-style:italic; }
.height { height:100%; }
input, option, select, textarea { font-size:16px; }
#movie-select { float:left; clear:none; width:100%; text-align:right; margin-top:4px; margin-left: 5px; }
/**************** index only *****************/
.grup { clear:both; width:980px;/* border: #FF66CC solid;*/ padding-top:5px; margin-bottom:-12px; display:block; margin-top: 20px; }
.grup h2 { width:500px; padding:6px; font-size:22px; border:double #FFFFFF 5px; text-align:center; margin:0 auto; display:block; }
.lefthalf { float:left;width:468px;padding-left:10px;padding-right:10px;text-align:left; clear:left; margin-top:15px;font-size:12px;}
.rghthalf { float:right;width:468px;padding-left:10px;padding-right:10px; text-align:left; clear:right; margin-top:15px;font-size:12px;}
.col p { color:#ffffff; /*text-align:justify; */padding-top: 3px; border-top: 1px solid #666666; margin-top:20px;}
.co p:first-line { font-weight: 900; }
.col { width:980px; }
.col a { padding: 1px; margin-top:0px; }
.col img { float:left; border: 4px ridge #FFCC33; margin:5px 5px 1px; }
.col a img:hover { clear:both; border:4px inset #FF9933; }
.indnt { width:438px;margin-left:30px;}
/**************** javascript menu coding *****************/
.m0l0mouto, .m0l1mouto, .m0l2mouto, .m0l3mouto, .m0l4mouto, .m0l0mdowno, .m0l1mdowno, .m0l2mdowno, .m0l3mdowno, .m0l4mdowno { /*This sets the javascript menu font size - next line too >>>*/ font-size: 11px; color: #000000; border: 2px outset #666666; text-align: center; font-weight: bold;  background:#CCCCCC;/*this must >= template.js height for there to be a seperation between buttons*/line-height: 20px; z-index:88; }
.m0l0movero, .m0l1movero, .m0l2movero, .m0l3movero, .m0l4movero { font-size: 11px; background: #FFFFFF; color: #333333; border: 2px inset #666666; text-align: center; font-weight: bold; line-height:20px; z-index:31; }
/****************old css menu coding *****************/
#menu {width: 200px;z-index:50;text-align:center;background-image: url(images/bckgrnd.jpg);
}
#menu ul {width: 200px;
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {width: 200px;
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	border: 2px outset #CCCCCC;
	margin: 0;
	padding-bottom: 2px;
}
#menu h2 {width: 200px;
color: #fff;
background: #000;
text-transform: uppercase;
	padding-bottom: 2px;
}
#menu a {background: #ccc;
color: #000;
background-image: url(images/bckgrnd.jpg);
text-decoration: none;
	padding-bottom: 2px;
}
#menu a:hover {width: 200px;border: 2px inset #CCCCCC;
	color: #000000;
	background: #fff;
	border: 2px inset #CCCCCC;
	padding-bottom: 2px;
}


#menu li {width: 200px;
position: relative;
}
#menu ul ul ul {width: 200px;
position: absolute;
top: 0px;
left: 100%;
width: 100%;
}


div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
.height {width: 200px;z-index:10;
	height: 100%;
}

/***************************************  CSS MENU *********************************************/

#cssmenu {height:; width:; position:relative;z-index:91;height:250px;}
#cssmenu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px; background:#ccc;}
#cssmenu li {margin:0; padding:0; list-style:none;color:#000000;text-align:center;/**/}
#cssmenu li {display:inline;}
#cssmenu ul ul {position:absolute; left:-9999px;}
#cssmenu ul#level-upper {position:absolute; left:0; top:0;}
#cssmenu a {display:block; font:/*bold*/ 12px verdana,arial,sans-serif; color:#000; background-color:#ccc;line-height:22px; text-decoration:none;padding:0 20px 0 10px;border:#999999 2px outset;/*width optional*/} 
#cssmenu li a.newlist {}
#cssmenu li a:hover {background-color:#fff; color:#000; border:#999999 2px inset;}/*covers all hovers*/ 
#cssmenu li:hover > a {}/*seems unnecessary*/
#cssmenu ul li:hover > ul {left:100%; margin-top:-23px; margin-left:-1px;}
#cssmenu a:hover ul,
#cssmenu a:hover a:hover ul, 
#cssmenu a:hover a:hover a:hover ul {left:100%;}
#cssmenu a:hover ul ul, 
#cssmenu a:hover a:hover ul ul {left:-9999px;}
#cssmenu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}

/**************** javascript menu coding *****************/
.m0l0mouto, .m0l1mouto, .m0l2mouto, .m0l3mouto, .m0l4mouto, .m0l0mdowno, .m0l1mdowno, .m0l2mdowno, .m0l3mdowno, .m0l4mdowno { /*This sets the javascript menu font size - next line too >>>*/ font-size: 12px; color: #000000; border: 2px outset #666666; text-align: center; font-weight: bold; background:#CCCCCC;/*this must >= template.js height for there to be a seperation between buttons*/ line-height: 20px; z-index:50; }
.m0l0movero, .m0l1movero, .m0l2movero, .m0l3movero, .m0l4movero { font-size: 12px; background: #FFFFFF; color: #333333; border: 2px inset #666666; text-align: center; font-weight: bold; line-height:20px; z-index:50; }
/**************** css menu coding *****************/