* { margin:0; padding:0; }
body {  background: #b1dbeb url('../images/backgrounds/background.jpg') repeat-x;  font-family: 'trebuchet ms',sans-serif;  color: #10343f; }
fieldset { border-width:0; }

/* general element and class stylings */
a { text-decoration: none; color: inherit; }
a img {	border-width:0;}
.right { float: right; }
.left { float: left; }
img.left { float: left; margin: 10px 10px 2px 10px; }
p { padding: 5px 0 5px 5px; line-height: 25px; font-size: 100%; font-weight: normal; }
p a { text-decoration: underline; color: #0a8caf; }
p a:hover, span a { text-decoration: none; color: #10343f;}

#content { 
	background-image: url('../images/backgrounds/contentbak.jpg'); 
	background-repeat: no-repeat;
	overflow: auto;
	width: 1000px; 
	margin: 0 auto;
	position: relative;
}

#contentwrap { clear: both; width: 820px; padding: 0 10px 10px 10px; margin: 0 auto; }

/* navigation menu stylings */
#nav { float: right; clear: right; overflow: visible; width: 57%; margin-bottom: 60px; font-size: 90%; font-weight: bold; display: block; padding-right:55px; margin-top: 10px;}
#nav li { list-style-type: none; float: left; padding: 0 4px; }
#nav li a { padding: 4px 0 4px 16px; color: #8f8f8f; cursor: pointer;}
#nav b { display: inline-block; height: 19px; padding: 4px 0px 1px 0px; }
#nav li a span { padding: 4px 16px 6px 0; }
#nav li.selected a, #nav li a:hover { color: #104556; }
#nav li.selected a, #nav li a:hover { background: url('../images/backgrounds/menu_l.gif') left -1px no-repeat; }
#nav li.selected span, #nav li a:hover span { background: url('../images/backgrounds/menu_r.gif') right -1px no-repeat; }
#nav li.selected b, #nav li a:hover b { background-color: #c4e6f2; }

/* video access code form */
#vidaccesscode { display: block; position: relative; float: right; color: #5c7f8a; font-weight: bold; font-size: 120%; padding-right: 80px; width: 450px; }
#vidaccesscode label { position: absolute; margin-top: 15px;}
#vidaccesscode span.roundedinput { margin-left: 200px; display: block; background: transparent url('../images/forms/accesscode.gif') top left no-repeat; overflow: hidden; width: 230px; height: 50px; position: relative;}
#vidaccesscode fieldset div { font-size: 70%; float: right; margin-right: 60px; }
#vidaccesscode a { color:#8f8f8f;}
#vidaccesscode a:hover { text-decoration: underline; color: #23515f;}

/* rounded input general stylings */
span.roundedinput input, span.roundedinputArea textarea {
	border-width:0;
	background-color: transparent;
	width: 195px; 
	margin: 7px 0 0 14px;
	padding: 7px 6px 0 6px;
	height: 35px; 
	font-family: 'trebuchet ms',sans-serif;
	font-size: 100%; 
}

/* quick contact form stylings */
#rightcol { float: right; width: 240px; margin-left: 20px; padding-top:20px; clear: right;}
#rightcol a.howitworks { display: block; margin: 0 auto; text-align: center; font-size: 130%; padding-top: 30px; color: #10343f;}
#rightcol a.howitworks:hover { text-decoration: underline; }
#rightcol p a { text-decoration: underline; color: #0a8caf; }
#rightcol p a:hover { text-decoration: none; color: #10343f;}
#rightcol p { margin-top: 10px; }
#rightcol p.related { margin-bottom: 20px; }
#rightcol .contactform span.roundedinput { display: block; background: transparent url('../images/forms/textinput.gif') no-repeat; }
#rightcol .contactform span.roundedinput input, #rightcol .contactform span.roundedinputArea textarea { font-size: 120%; width: 200px; overflow: hidden;}
#rightcol .contactform span.roundedinputArea { display: block; height: 174px; background: transparent url('../images/forms/textarea.gif') no-repeat;  }
#rightcol .contactform textarea { font-family: 'trebuchet ms'; background-color: transparent; border-width:0; width: 185px; height: 160px; font-size: 120%; overflow: auto; }
#rightcol .contactform .submit { display: none; }
#rightcol .contactform #goodsubmit { font-size: 120%; padding: 5px; margin-left: 10px; margin-top: 10px; font-family: 'trebuchet ms',sans-serif; }
#sending { display: block; text-align: center; font-size: 115%; margin-top: 120px; margin-bottom: 15px; font-weight: bold; font-style: italic; }
#error #sending { margin-top:20px; }
img#loading { display: block; margin: 0 auto; }
#contacterror { display: block; margin: 0 auto; text-align: center; color: #f00; font-weight: bold; font-style: italic; padding: 10px 0; margin: 10px 0; background-color: #e69d9d; border: 1px solid #f00; font-size: 90%; }
#successmsg { display: block; margin: 0 auto; text-align: center; font-weight: bold; font-style: italic; padding: 10px 0; margin: 10px 0; color: #1c7d02; background-color: #80e55a; border: 1px solid #1c7d02; font-size: 90%; }
#error #goodsubmit { font-size: 120%; padding: 25px; margin: 10px auto; width: 80%; display: block;}

/* shopping cart stylings */
#cart { float: right; height: 30px; margin-right: 0px; font-family: verdana; font-size: 70%; line-height: 3em; width: 200px; margin-bottom: 20px;}
#cart img, #cart span { float: right; margin-left: 10px;}

/* contact page */
div.contact { float: left; width: 45%; height: 250px; margin: 30px 0 30px 30px; overflow: hidden; height: 1%; }
div.contact address { display: block; width: 165px; margin: 20px auto; font-size: 120%;}
div.contact input, div.contact select, div.contact textarea { padding: 5px; font-size: 130%; width: 260px; margin: 5px 0; font-family: 'trebuchet ms';}
div.contact textarea { height: 150px; }
div.contact select { width: 273px; }
div.contact input.submit { width: auto; }

/* courses menu */
#howitworksdescription { font-size: 80%; }
#howitworksdescription p { padding: 0 5px; text-indent: 5px; margin:0;}
.rightCol { border: 1px solid #2a3b41; background-color: #fff; padding: 5px; margin-bottom: 20px; padding-bottom: 10px; }
.rightCol small { display: block; margin-top: 5px; }
#courses { padding: 15px 5px; }
#courses ul { margin-left: 20px; }
#courses ul ul { display: none; margin-left: 0px;}
#courses ul li { font-size: 90%; list-style: none outside url('../images/liststyles/collapsed.gif'); font-weight: bold; padding-top: 5px; line-height: 1.3em;}
#courses ul a { color: #23515f; }
#courses ul ul a { color: #5c7f8a; }
#courses ul ul a:hover { color: #23515f; }
#courses ul li.expanded { list-style: none outside url('../images/liststyles/expanded.gif'); }
#courses ul li.expanded ul { display: block; }
#courses ul ul li { list-style-image: none; font-weight: normal; margin-left: 10px; font-size: 80%;}

/* h1 and h2 image replacement stylings */
h1 { padding-top: 45px; margin: 20px 0 10px 5px; overflow: hidden; height: 0px !important; background-color: transparent; background-repeat: no-repeat; }
h2 { margin: 5px 0 10px 5px; padding-top: 35px; overflow: hidden; height: 0px !important;  background-color: transparent; background-repeat: no-repeat;  clear: left;}

/* header background images */
h1#aboutme { background-image: url('../images/headings/aboutme.gif'); }
h1#accesserror { background-image: url('../images/headings/accesserror.gif'); }
h1#admin { background-image: url('../images/headings/administrationarea.gif'); }
h1#courseswetutor { background-image: url('../images/headings/courseswetutor.gif'); }
h1#contact { background-image: url('../images/headings/contact.gif'); }
h1#error404 { background-image: url('../images/headings/404error.gif'); }
h1#forgot { background-image: url('../images/headings/forgot.gif'); }
h1#heading { background-image: url('../images/headings/heading.gif'); }
h1#privacy { background-image: url('../images/headings/privacypolicy.gif'); }
h1#refund { background-image: url('../images/headings/refund.gif'); }
h1#resourceslist { background-image: url('../images/headings/mathresources.gif'); clear: both; margin-top: 25px;}
h1#termsofuse { background-image: url('../images/headings/termsofuse.gif'); }
h1#testimonials { background-image: url('../images/headings/testimonials.gif'); }
h1#thanks { background-image: url('../images/headings/thanks.gif'); }
h1#topicswetutor { background-image: url('../images/headings/topicswetutor.gif'); }
h1#yourshoppingcart { background-image: url('../images/headings/yourshoppingcart.gif'); }
h2#dropmealine { background-image: url('../images/headings/dropmealine.gif'); }
h2#eligibility { background-image: url('../images/headings/eligibility.gif'); }
h2#emailaddress { background-image: url('../images/headings/emailaddress.gif'); margin-top: 20px; margin-bottom:0;}
h2#forgotsubhead { background-image: url('../images/headings/forgotsubhead.gif'); }
h2#hightech { background-image: url('../images/headings/hightechform.gif'); }
h2#history { background-image: url('../images/headings/history.gif'); }
h2#howitworks {	background-image: url('../images/headings/howitworks.gif'); }
h2#login {	background-image: url('../images/headings/login.gif'); }
h2#oldfashioned { background-image: url('../images/headings/oldfashionedway.gif'); }
h2#pickyourcourse {	background-image: url('../images/headings/pickyourcourse.gif'); }
h2#pickyourtopic { background-image: url('../images/headings/pickyourtopic.gif'); }
h2#powerpoints { background-image: url('../images/headings/powerpoints.gif'); }
h2#refundsubhead { background-image: url('../images/headings/refundsubhead.gif'); }
h2#relatedvideos { background-image: url('../images/headings/relatedvideos.gif'); }
h2#repurchase {	background-image: url('../images/headings/buyagain.gif'); }
h2#requestproblem {	background-image: url('../images/headings/requestproblem.gif'); }
h2#subhead { background-image: url('../images/headings/subhead.gif'); }
h2#unavailable { background-image: url('../images/headings/unavailable.gif'); }
h2#whatdoyouthink {	background-image: url('../images/headings/whatdoyouthink.gif'); }
h2#whatpeoplesay { background-image: url('../images/headings/whatpeoplesay.gif'); }
h2#yourcomments { background-image: url('../images/headings/yourcomments.gif'); }

/* for math resources on bottom of index page */
#resources  {  margin-top: 10px; }
#resources li { list-style-type: none; float: left; width: 273px; text-align: center; color: #104556; margin-bottom: 30px; font-size: 140%; }
#resources li a { color: #2a3b41; }
#resources li a:hover { text-decoration: underline; }
#resources li img { display: block; margin: 0 auto; border: 1px solid #104556; }

/* footer stylings */
#footer { background-color: #20B4E2; padding: 10px 0; font-size: 80%; color: #dff7ff; border-top: 1px solid #7A98A2; clear: both;  overflow: auto; height: 1%;}
#footer div { width: 980px; margin: 0 auto; padding: 0 10px; }
#footer ul { float: right; clear: right;}
#footer li { float: left; list-style-type: none; padding: 0 8px; }
#footer li a { display: block; color: #fff; padding-bottom: 3px; }
#footer li a:hover { padding: 0 0 2px 0; border-bottom: 1px dotted #dff7ff; }
#footer address { float: right; display: block; width: 140px; }

/* for centered menus of provinces and courses */
#provinceList .centeredMenu { margin: 1em auto; width: 100%; padding: 0; list-style-type: none; text-align: center; }
#provinceList .centeredMenu li { display: -moz-inline-box; display: inline-block; padding: 0 10px; overflow: hidden; }
#provinceList .centeredMenu li { height: 260px; }
#provinceList .centeredMenu li a { display: block; display: inline-block; }
#provinceList .centeredMenu li a:hover { margin-top: -283px; }

#courseList .centeredMenu { margin: 1em auto; padding: 0; list-style-type: none; text-align: center; }
#courseList .centeredMenu li { display: -moz-inline-box; display: inline-block; text-align: center; }
#courseList .centeredMenu li span { display: block; text-align: center; font-weight: bold;}
#courseList .centeredMenu li img { display: block; margin: 0 auto; }
#courseList .centeredMenu li a { color: #10343f; display: block;  /* for Mozilla based browsers */ display: inline-block; padding: .7em; }
#courseList .centeredMenu li a:hover { color: #000; }


/* for list of units in each course */
#unitList { margin: 20px auto 60px auto; width: 90%; }
#unitList .header { clear: both; font-size: 140%; border: 2px solid #053D4F; color: #fff; background: transparent url('../images/backgrounds/unitname.gif') repeat-x; padding: 5px; margin-top: 10px; }
#unitList .header a { text-align: right; float: right; color: #fff; }
#unitList .header a:hover { text-decoration: underline;}
#unitList .content { margin:0; padding:0; }
#unitList .text { padding: 10px 0 10px 20px; background-color: #3bbae3; border: 2px solid #053d4f; border-top-width:0; overflow: auto; height: 1%;}
#unitList .description { width: 55%; float: left; padding-right: 10px; display: inline; }
#unitList .description p { font-size: 80%; line-height: 1.5em; font-family: verdana; }
#unitList .description span, #unitList .videoList span { font-weight: bold; font-size: 120%; text-decoration: underline; color: #10343f; }
#unitList .videoList { width: 40%; display: inline-block; }
#unitList .videoList ul { margin-top: 10px; }
#unitList .videoList li { list-style: none; font-size: 70%; font-family: verdana; margin:0; padding:0; line-height: 1.2em;}
#unitList .videoList a { text-decoration: underline; color: #053d4f;}
#unitList .videoList a:hover { text-decoration: none; }
#unitList .videoList div { text-align: center; width: 70%; font-size: 70%; font-family: verdana; display: block; margin: 40px auto;}

/* testimonials */
ul#testimonialList li { list-style: none; display: block; margin: 20px 0 20px 10px; background: #90d4eb url('../images/headings/leftquotation.gif') left top no-repeat; width: 55%; border: 1px solid #507f8f; border-right-color: #fff; border-bottom-color: #fff; padding: 10px 10px 10px 60px; font-size: 70%;}
ul#testimonialList li span { display: block; text-align: right; }

/* for videos page */
#video { background-color: #000; position: relative; border: 3px solid #fff; width: 500px; text-align: center; height: 333px; margin-top: 35px; }
p.description { width: 500px; text-align: justify;}
#video a img { position: absolute; top: -40px; right: -40px; z-index:2; }
#video span#noflash { margin-top: 120px; display: inline-block; width: 300px; }
#video span#noflash a { color: #23515f; text-decoration: underline; }
#video span#noflash a:hover { text-decoration: none; }
#video #container { position: absolute; left:0; top:0; }
#disclaimer { border: 1px solid #000; background-color: #fff; padding: 10px; font-family: verdana; font-size: 80%; margin-bottom: 50px;}
#disclaimer p { text-indent: 10px; line-height: 20px; }

/* for various errors */
#invalidcode { padding: 10px; width: 420px; border: 1px solid #f00; margin: 30px auto; text-align: center; font-size: 250%; background-color: #eeefb3; font-family: georgia; color: #f00; display: block;}
#invalidcode legend { color: #f00; font-weight: bold; font-size: 50%; font-family: 'trebuchet ms';  padding: 0 10px; margin-left: 10px; }
.accesserrorinput { width: 350px; font-size: 250%; padding: 15px; font-weight: bold; font-family: 'trebuchet ms'; display: block; margin: 40px auto; text-align: center; color: #9fd7e8; }
.mysqlerror { width:600px; text-align: center; font-weight: bold; padding: 10px; clear: right; margin: 0 auto; color: #f00; border: 1px solid #f00; background-color: #e69d9d; }
span#return { display: block; font-size: 250%; font-weight: bold; font-style: italic; margin-top: 150px; text-align: center; }
span#return a:hover { text-decoration: underline; }

/* shopping cart stylings */
#shoppingcart { margin: 30px auto; width: 90%; clear: right; overflow: auto; height: 1%; }
#shoppingcart h3 { margin: 10px 0; }
#shoppingcart h3 a { color: #2a3b41; }
#shoppingcart ul { width: 100%; margin: 0 auto; list-style: none; text-align: center; overflow: auto; height: 1%; font-family: verdana; font-size: 70%; padding: 5px 0;}
#shoppingcart ul li { padding: 6px 0; margin:0; float: left; }
#shoppingcart ul li a { color: #2a3b41; text-decoration: underline; }
#shoppingcart ul li a:hover { text-decoration: none; }
#shoppingcart ul li.even { width: 25%; }
#shoppingcart ul li.name { width: 33%; }
#shoppingcart ul li.remove { width: 11%; padding:0; }
#shoppingcart ul li.unit { width: 23%; }
#shoppingcart ul li.even { width: 25%; }
#shoppingcart ul li.quantity { width: 15%; padding: 0;}
#shoppingcart ul li.price { width: 17%; }
#shoppingcart ul.two { border-width: 1px 0; border-color: #053d4f; border-style: solid; background-color: #aad9eb; }
#shoppingcart ul.one { background-color: #c6e8f2; }
#shoppingcart ul.totals li { float: right; width: 19%; }
#shoppingcart ul#total { font-weight: bold; }
#shoppingcart ul#head { margin: 5px auto; font-weight: bold; font-size: 120%; font-family: 'trebuchet ms';}
#shoppingcart div { font-size: 200%; font-weight: bold; margin: 120px auto; color: #47a5bf; text-align: center; }
#shoppingcart a.sclink { color: #5c7f8a; float: right; text-decoration: underline; margin-bottom: 10px;}
#shoppingcart a.sclink:hover { text-decoration: none; }
#shoppingcart form span { margin: 25px 0; display: block; }
#shoppingcart form span input { padding: 10px; }
#shoppingcart form span input#proceed { float: right; }
#shoppingcart input.hidden { display: none; }
#shoppingcart input.quantity { margin: 0 auto; width: 30px; color: #5c7f8a; font-family: 'trebuchet ms'; padding: 1px; text-align: center; background-color: #9fd7e8; }
#shoppingcart #checkout { clear: both; margin: 20px auto;}
#shoppingcart #checkout img { display: block; margin: 0 auto; }
#shoppingcart #checkout span { font-family: verdana; font-size: 30%; font-weight: normal; width: 250px; text-align: center; margin: 10px auto; color: #5c7f8a; display: block;}
#shoppingcart #continue { float: none; }
#complete { font-weight: bold; font-family: 'trebuchet ms';width: 80%; margin: 0 auto 80px auto; padding: 10px; display: block; }

form p { text-align: center; display: block; font-size: 90%; margin: 70px auto 50px auto; width: 75%; }

/* for privacy policy and terms of use pages */
ol { width: 90%; margin-left: 5%; }
ol li { margin-bottom: 10px; }
ol li a { text-decoration: underline; color: #5c7f8a; }
ol li a:hover { color: #23515f; text-decoration: none; }

/* administration page stylings */

span.adminlinks { float: right; }
span.adminlinks a { color: #5c7f8a; text-decoration: underline; }
span.adminlinks a:hover { text-decoration: none; }
ul#adminhome { list-style-type: none; display: block; width: 80%; margin: 20px auto; height: 1%; overflow: hidden; font-size: 140%; }
ul#adminhome li { float: left; width: 50%; text-align: center; margin: 25px 0; }
ul#adminhome li img { display: block; margin: 0 auto; }
ul#adminhome a { color: #2a3b41; text-decoration: none; }
ul#adminhome a:hover { text-decoration: underline; }

div#userList ul { list-style-type: none; font-family: verdana; font-size: 80%; padding: 6px 0; border: 1px solid #000; border-width: 1px 0; background-color: #86d6ff; height: 1%; overflow: hidden; }
div#userList ul.two { background-color: transparent; border-width:0;}
div#userList ul li.username a { color: #5c7f8a; text-decoration: underline; }
div#userList ul li.username a:hover { text-decoration: none; }
div#userList ul#head li { font-weight: bold; margin-top:0;}
div#userList ul li { float: left; text-align: center; margin-top: 4px;}
div#userList ul li.username, div#userList ul li.created { width: 35%; }
div#userList ul li.delete { width: 10%; margin-top:2px;}
div#userList ul li.type { width: 15%; }

h3#editusers, h3#listusers { margin: 25px 0;}
h3#editusers a { color: #9f9f9f; margin-right: 10px; padding: 10px; border: 1px solid transparent;}
h3#editusers a.selected, h3#editusers a:hover { border: 1px solid #00617f; background-color: #effbff; color: #10343f;}