/* Common Styles for EQAO Online Test */

body {margin:0;padding:0; font:10pt Helvetica, Arial, sans-serif;background:#fff;color:#000;}
body.fr #header li.first { margin-left: 10px; }
a img { border:none; }
a { color: #0000EE; text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { color: #0D6491; font-size: 1.5em; line-height: 2em; margin: 0; }
h2.r { color: #9C003F;}

#container { min-width: 768px; }
/* columns - for same-height columns */
body, #container { background: #fff url(images/1.gif) repeat-y 0 0; }
/* fix IE top banner full-width issue using a bgimg */
#container { background: transparent url(images/1top.gif) no-repeat top right; }

#title-nav { background: #A2AE88; }

img#logo { border: none; }

#header { position: absolute; top: 0; left: 183px; overflow: visible; background:#A2AE88; height: 100px; text-align: center; width: 639px; }
#header h1 { position: relative; padding: 3px 0 8px; margin: 0; text-align: center; font-size: 24px; vertical-align: top; width: 100%; color: #FFF; background: #A2AE88; }
#header h1.grade-title { font-size: 16px; padding: 0; }
.noheader { margin-top: 10px;}

#TopNav-container ul { margin: 10px auto 0; padding: 0; width: 200px; text-align: center; display: block; }
#TopNav-container li { display: inline;  margin: 0; padding: 0; border-left: 2px solid #666; }
#TopNav-container li a { font-weight: bold; font-size: 0.9em; color: #4c5f23; margin: 0 10px; }
#TopNav-container #nav a.active {color:#9c003f;}
#TopNav-container { position: absolute; top: 100px; left: 183px; overflow: visible; background:#E4EDCF; height: 35px; text-align: center; width: 639px; }
#TopNav-container li.first { margin-left: 0;border-left:0; }
#TopNav-container li.first a {margin-left:0;}

#sidebar { margin: 0; padding: 0; width: 167px; float: left; display: inline; background: #E4EDCF; padding-bottom: 30px; }
#sidebar h2 { display: none; }
#sidebar h3 { color: #A2AE88; font-size: 1.1em; margin: 2px 0 2px; padding: 0 0 10px 4px; }
#sidebar h3 a { color: #FFF; font-size: 1em; }
#sidebar .sidenav-container h3 { color: #FFF; margin: 0; padding: 0; }
.sidenav-container { background: #A2AE88; padding: 4px 4px 5px 6px; }
#sidebar ul, #sidebar li, #header ul, #header li { color: #FFF; font-weight: bold; margin: 0; padding: 0; list-style: none; }
#sidebar a, #header a { color: #666; font-size: 1.1em; }
#sidebar a { font-size: 0.9em; font-weight: bold; color:#FFF; }
#sidebar li div { padding: 0.5em 0; }
#sidebar li ul li { padding-bottom: 0.2em; }
#sidebar li ul li a { text-decoration: underline; }
#sidebar ul a.active { font-weight: bold; color:#9c003f; padding: 2px; }

h6.equation { background: #9c003f; color: white; font-weight: bold; padding: 10px; display: block; text-align: center; margin: 1em 0; font-size: 1.1em; }
h6.equation span { display: block; }

#content { width: 571px; line-height: 1.1em; padding: 0; margin-top: 50px; margin-left: 183px; overflow: visible; }
#content strong { color: #9C003F; }
#content div.heading { background: #006a8a; padding:5px; }
#content div.heading strong { color: #FFF; }
#content div.heading h2 { margin: 5px 0 10px 0; padding: 0; color: #fff; }
#content div.heading p, #content div.heading div { border: 3px solid #fff; background: #899dbe; color: #fff; padding: 5px; font-weight: bold;margin: 0; }
#content div.heading div p { border: none; background: transparent; }
#content h3 { color: #0d6491; font-size: 1.1em; }

#footer { clear: both; margin-left: 172px; text-align: center; font-size: 0.8em; color: #444; border-top: 1px solid #aaa; padding-top: 7px; margin-top: 20px; }

table, th, tr, td { border: 2px solid #777; margin: 0; padding: 0; border-collapse: collapse; }
table { width: 571px; }
thead, tbody { margin:0; padding:0 }
td, th { padding: 5px; }
td.code { text-align: center; width: 46px; font-size: 1.1em; font-weight: bold; }
table li { font-weight: normal; font-size: 0.9em; }
#content table.rubric td strong { color: #000; }

div.togglebox a.toggler { font-size: 0.8em; float: right; margin: 0 5px 3px 0; }
div.togglebox, div.toggleon h4 { clear: both; } /* fixes alignment issues caused by above declaration */
div.togglebox div { display: none; } the javascript does this anyways, but hides the flash onpageload
div.toggleon { background: #ffe; padding: 5px; margin-right: 5px; border: 1px dashed #ccc; clear:both; }
div.toggleon div { text-align: center; }
div.toggleon div .imgwrap { overflow: auto; max-height: 250px; }
* html div.toggleon div .imgwrap { height: 50px; }
div.toggleon div h4 { text-align: left; margin: 5px 0 15px 0; padding: 5px; color: #fff; background: #9c003f; font-size: 1em; }
span.closepanel { float: right; cursor: pointer; margin-top: 7px; color: #9c003f; font-weight: bold; padding-top: 1px; padding-right: 17px; background: #fff url(images/x.png) no-repeat right center; }
@media print { div.togglebox a.toggler { display: none; } }

.notes { padding-top: 1em; }
.notes h4 { font-size: 1em; }

.clear { clear: both; }
.error { color: #a00; font-weight: bold; border: 1px solid #e88; padding: 5px; text-align: left; margin-bottom: 1em; }
.error h2 { color: #900; }

#board img { float: left; margin: 0 10px 10px 0; clear: left; }
#board strong { color: #0D6491; }

.access { display: none; }

ul.alpha { list-style-type: lower-alpha }

ol li ul { margin-bottom: 1em }
#top { clear: both; }

.spacebelow { margin-bottom: 1em; }

.pdftext { font-weight: normal; font-size: 0.8em; }
strong.or { display: block; }

div.gotop { text-align: right; }
strong.r { color: #9c003f; }
strong.equation { background: #9c003f; color: white; font-weight: bold; padding: 10px; display: block; text-align: center; margin: 1em 0; font-size: 1.1em; }
strong.equation span { display: block; }

.rubric-footer { background: #EEE; padding: 0.5em; font-size: 11px; border: 2px solid #666; border-top: none; }