/*

The MathPlayer plugin always removes the DOCTYPE, so there's no way to have Internet Explorer 
render the page in Strict mode when MathML content is on the page. We've added an xml declaration 
to make Internet Explorer also render the pages without MathML in Quicky mode.

Most rules for fixing problems with Quirky mode in IE have a selector starting with '* html' or come
with comments explaining their use.

*/

/* basic typography */

body,
input,
textarea
{
  font-family: "Lucida Grande", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
  font-size: 13px;
}
* html body
* html input,
* html textarea
{
  font-size: small;
}
body
{
  line-height: 18px;
}
* html body
{
  line-height: 1.2em;
}
input,
textarea,
table
{
  line-height: 1em;
}
table
{
  font-size: .8em;
}

/* Regular markup */

h1
{
  margin: 0 0 1em 0;
  font-size: 1.8em;
  font-weight: normal;
}
h2
{
  margin: 0 0 1.3em 0;
  padding: .2em 0 0 0;
  font-size: 1.2em;
  font-weight: normal;
}
#public #content h2
{
  margin: 1em 0 .5em 0;
  border-bottom: 1px solid #999;
}
h3
{
  margin: 1em 0 0 0;
  font-size: 1em;
}
#public #content h3
{
  margin-bottom: 0
}
#public #content p
{
  margin-top: 0;
}
#public #content em
{
  font-style: normal;
  background-color: #ff9;
}
a
{
  color: #00c;
}
a:visited
{
  color: #009;
}
table
{
  margin: 1em 0;
  border-collapse: collapse;
  empty-cells: show;
}
td, th
{
  padding: 0 1em 0 0;
  vertical-align: top;
  text-align: left;
}

/* global layout */

hr
{
  display: none;
}
html,
body
{
  margin: 0;
  padding: 0;
  background-color: #aebaca;
}
body
{
  text-align: center; /* This centers #shadow1 in Internet Explorer */
}
#shadow1
{
  width: 725px;
  margin: 0 auto; /* This centers #shadow1 in standard compliant browsers */
  padding: 0 0 0 5px;
  background: #aebaca url(shadowl.gif) repeat-y top left;
  text-align: left; /* This 'resets' the centering defined above */
}
* html #shadow1
{
  width: 730px;
}
#authorized #shadow1
{
  width: 500px;
}
* html #authorized #shadow1
{
  width: 505px;
}
#admin #shadow1
{
  width: 95%
}
#shadow2
{
  padding: 0 5px 0 0;
  background: #aebaca url(shadowr.gif) repeat-y top right;
}
#main
{
  background-color: #fff;
}
#bshadow1
{
  width: 725px;
  margin: 0 auto;
  padding: 0 0 0 5px;
  background: #aebaca url(shadowbl.gif) no-repeat top left;
}
#authorized #bshadow1
{
  width: 500px;
}
#admin #bshadow1
{
  width: 95%
}
#bshadow2
{
  padding: 0 5px 0 0;
  background: #aebaca url(shadowbr.gif) no-repeat top right;
}
#bmain
{
  padding: .5em 0 0 0;
  background: #aebaca url(shadowb.gif) repeat-x top right;
  color: #888;
  font-size: .8em;
  text-align: center;
}
#bmain a
{
  color: #888;
}
#header
{
  display: none;
}
#public #header
{
  display: block;
  height: 250px;
  background: #fff url(header.png) no-repeat bottom left;
}
#header h1
{
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}
#header p
{
  margin: 0;
  font-weight: bold;
}
#header p a
{
  display: block;
  float: left;
  padding: 5px 15px;
  color: #000;
  text-decoration: none;
}
#header p a:hover
{
  text-decoration: underline;
}
#nav
{
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid #000;
  background: #000 url(navbg.gif) repeat-x top left;
  color: #888;
  font-weight: bold;
}
#nav ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#authorized #nav ul
{
  text-align: center;
}
#nav li
{
  display: inline;
  padding: 0 16px 0 0;
}
#authorized #nav li
{
  padding: 0;
}
#authorized #nav li.modules
{
  float: left;
  text-align: left;
}
#nav li.user
{
  padding: 0;
  float: right;
  text-align: right;
}
#authorized #nav li.modules,
#authorized #nav li.user
{
  width: 6em;
}
#nav li a
{
  color: #fff;
  text-decoration: none;
}
#nav li a:hover
{
  text-decoration: underline;
}
.page_nav
{
  margin: 0 -16px;
  padding: 2px 16px 3px 16px;
  background-color: #eee;
  color: #888;
}
* html .page_nav
{
  width: 495px;
}
.page_nav a,
.search_nav a
{
  color: #000;
  text-decoration: none;
}
.page_nav a:hover,
.search_nav a:hover
{
  text-decoration: underline;
}
.page_nav .prev,
.page_nav .progress,
.page_nav .tables,
.page_nav .next
{
  float: left;
}
.page_nav .prev,
.page_nav .next
{
  display: block;
  width: 129px;
}
.page_nav .progress
{
  margin: 4px 0 0 0;
  width: 202px;
  border: 1px solid #ccc;
  color: #666;
  font-size: 9px;
  line-height: 9px;
}
.page_nav .progress div
{
  position: relative;
  background-color: #fff;
  border: 1px solid #fff;
}
.page_nav .progress div span
{
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  color: #888;
}
* html .page_nav .progress div span
{
  top: 1px;
}
.page_nav .progress div div
{
  z-index: 1;
  text-align: right;
  border: none;
  background-color: #ccc;
}
.page_nav .progress div div div
{
  display: inline;
  padding-right: 1px;
  text-align: right;  /* This is needed for Internet Explorer */
  background-color: transparent;
}
.page_nav .tables
{
  width: 202px;
  text-align: center;
}
.page_nav .tables a
{
  color: #666;
}
.page_nav .next
{
  float: right;
  text-align: right;
}
.search_nav
{
  margin: 1em -16px .5em -16px;
  padding: 2px 16px 3px 16px;
  background-color: #eee;
  color: #888;
}
.search_nav span
{
  padding: 0 1em;
}
#wrapper
{
  padding: 0 0 1px 0; /* Forcing mozilla to display the background */
  background: #fff url(mainbg.gif) repeat-y top left;
  min-width: 0; /* peekaboo bug (IE7) */
}
/* fixing the peekaboo bug (IE6) with the holly hack */
* html #wrapper 
{
  height: 1%;
}
#container
{
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 -220px 0 0;
}
#container #content 
{
  margin: 0 220px 0 0;
}
#sidebar 
{
  float: right;
  width: 220px;
}
#content div.inner
{
  padding: 16px 16px 8px 16px;
}
#authorized #content div.inner
{
  padding: 0 16px;
}
#sidebar div.inner
{
  margin: 0;
  padding: 16px 16px 8px 16px;
}
.clear
{
  clear: both;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#footer
{
  display: none;
}
#public #footer
{
  display: block;
  border-top: 1px solid #bbb;
  background-color: #d7d7d7;
  text-align: center;
}
#footer img
{
  border: none;
  padding: 8px;
}

/* forms and error message */

fieldset
{
  margin: 0 0 1em 0;
  padding: 2px 4px 4px 4px;
  border: none;
  background-color: #eee;
}
label
{
  display: block;
  color: #444;
}
form p
{
  margin: .5em 0;
  color: #444;
}
form div a.cancel
{
  padding-left: 1em;
  color: #666;
}
#certificate_list img,
form img
{
  vertical-align: middle;
  padding: 0 0 0 .5em;
}
#certificate_list
{
  margin: 1em 0;
  padding: 0;
  list-style-type: none; 
}
#certificate_list li
{
  margin: 0;
  padding: 0;
}
#certificate_list span
{
  font-size: .8em;
  color: #666;
}
#certificate_total p
{
  color: #000;
}
#errorExplanation,
#warning
{
  margin: 1em 0;
  padding: .4em;
  border: 2px solid #c00;
  background-color: #eee;
}
#public #content #errorExplanation h2 
{
  margin: -.4em -.4em 0 -.4em;
  padding: .4em 1em;
  background-color: #c00;
  color: #fff;
  text-align: left;
  font-weight: bold;
  font-size: 1em;
  border: none;
}
#public #content #errorExplanation p 
{
  margin: .4em 0;
  padding: 0 .4em;
}
#errorExplanation ul 
{
  margin: .4em;
}
form .fieldWithErrors 
{
  padding: 2px;
  background-color: #c00;
  display: table;
}
p.notice
{
  margin: 1em 0;
  padding: .4em;
  background-color: #aebaca;
  color: #fff;
  border: 1px solid #bbb;
}
p.blank
{
  margin: 1em 0;
  padding: .4em;
  color: #bbb;
}
p.help
{
  padding: .4em;
  background-color: #ffb;
  border: 1px solid #eee;
}

/* sidebar */

#sidebar
{
  color: #444;
}
#sidebar h2
{
  margin-top: 0;
  border: none;
}
#sidebar ul
{
  margin: 0 0 16px 0;
  padding: 0 0 16px 0;
  list-style-type: none;
  border-bottom: 1px solid #bbb;
}
#sidebar li
{
  padding: 0;
  font-weight: bold;
  padding: 2px 0;
}
#sidebar li a
{
  display: block;
  margin: -2px -16px;
  padding: 2px 16px;
  color: #000;
  text-decoration: none;
}
#sidebar li a:hover
{
  background: #000 url(navbg.gif) repeat-x center left;
  color: #fff;
  text-decoration: underline;
}

/* module overview and search results */

.module p
{
  margin: 0;
}
.module p strong
{
  background-color: #ff9;
  outline: 1px solid #ff9;
}
.module ul
{
  float: right;
  margin: 0;
  list-style-type: none;
}
.module li
{
  padding: 0;
}
.login
{
  color: #888;
}

/* continue box */

.continue
{
  margin: .8em 0em;
  padding: .5em 1em;
  background-color: #ff9;
  border: 1px solid #888;
}

.continue p
{
  margin: 0;
}
.continue a
{
  font-weight: bold;
}

/* page comment form */

#comment-link
{
  text-align: right;
  margin: 0;
}
#comment-link a
{
  font-size: .8em;
  color: #888;
}
#comment
{
  padding: 0;
}
#comment form
{
  padding: 2px 8px 4px 8px;
  background-color: #eee;
}
textarea
{
  width: 100%;
  height: 4em;
}
#comment textarea
{
  margin: 0 0 4px 0;
}

/* module content page */

#bsocontent .visual
{
  margin: 1em 0 .5em 0;
}
#bsocontent .visual object
{
  margin: 0 -8px 0 -5px;
  padding: 0;
}
#bsocontent .visual .caption
{
  padding: 0 5px;
  color: #888;
}
#bsocontent .visual .caption p
{
  margin: 0 0 .5em 0;
}
#bsocontent .figure
{
  margin: 1em 0;
}
#bsocontent .figure table
{
/*  width: 463px; */
  margin: 0;
  background-color: #fff;
}
* html #bsocontent .figure table
{
  width: 463px;
}
#bsocontent .figure ul
{
  margin-bottom: 0;
}
.question form
{
  margin: 1em 0;
  padding: 2px 8px 4px 8px;
  border: none;
  background-color: #eee;
}
#bsocontent #clickbg
{
  margin: 1em 0;
}
#bsocontent #dragbg
{
  margin: 1em auto;
}
#bsocontent .click .area:hover
{
  border: 1px solid #9eaeae;
  cursor: pointer;
}
#bsocontent .drag .area:hover
{
  cursor: move;
}
#bsocontent .feedback
{
  margin: 1em 0;
  padding: 0 5px 0 50px;
  min-height: 40px;
}
* html #bsocontent .feedback
{
  height: 40px;
}
#bsocontent .feedback p
{
  margin: .5em 0;
}
#bsocontent .correct
{
  background: #e5ffe5 url(icon-correct.png) no-repeat 2px 50%;
  border-top: 1px solid #0f0;
  border-bottom: 1px solid #0f0;
}
#bsocontent .wrong
{
  background: #ffebeb url(icon-wrong.png) no-repeat 2px 50%;
  border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
}
#bsocontent table 
{
  border: 1px solid #f0f0f0;
}
#bsocontent td
{
  padding: 2px 6px;
  border: 1px dotted #f0f0f0;
}
#bsocontent th
{
  padding: 1px 6px;
  background-color: #f0f0f0;
  font-weight: normal;
  border: 1px solid #f0f0f0;
}
#bsocontent tbody
{
  border-top: 1px solid #9eaeae;
  border-bottom: 1px solid #9eaeae;
}
#bsocontent td em
{
  font-style: normal;
  font-weight: bold;
  color: #888;
}
#bsocontent label
{
  display: block;
}
/* semantic classes */
#bsocontent td.tot
{
  border-top: 1px solid #666;
}
#bsocontent td.totl
{
  border-left: 1px solid #666;
}
#bsocontent .group1
{
/* background: #ffe url(pat1.png); */
}
#bsocontent .group2
{
/* background: #eef url(pat2.png); */
}
#bsocontent .group3
{
/* background: #eff url(pat1.png); */
}
#bsocontent .group4
{
/* background: #fef url(pat2.png); */
}
/* presentation classes */
#bsocontent .floatl
{
  float: left;
}
#bsocontent .hspaced
{
  padding-left: 1em;
  padding-right: 1em;
}
/* math elements */
mstyle[fontweight=bold]
{
  background-color: #d1e6f2;
}
/* Hmm... The OS X and the Linux version of iTex2MML handle display style math differently... */
math[display=block],
math[mode=display]
{
  text-align: left;
  margin: 1em 0 1em 6em;
}
mtd
{
  text-align: left;
}

/* admin */

#admin table
{
  border-top: 1px solid #ccc;
}
#admin tr
{
  border-bottom: 1px solid #ccc;
}

/* overview table */
table.overview
{
  font-size: 1em;
  line-height: 1.4em
}
table.overview,
table.overview tr
{
  border: none !important;
}
table.overview th
{
  text-align: right;
}

/* certificates receipt table */

table.receipt
{
  width: 470px;
  font-size: 1em;
  line-height: 1.4em
}
table.receipt th
{
  border-top: 1px solid #888;
}
table.receipt td,
table.receipt th
{
  width: 75px;
  text-align: right;
}
table.receipt td.description
{
  width: 320px;
  text-align: left;
}

/* certificates order buttons */

#buttonlist
{
  margin: 1em 0;
}
#buttonlist form,
#buttonlist form div
{
  display: inline;
}
#buttonlist input.back
{
  float: left;
}
#buttonlist input.order
{
  float: right;
}

/* tables popup */

#tables #nav
{
  position: fixed;
  width: 100%;
  padding: 2px;
  font-size: .8em;
}
#tables,
#tables #main
{
  background-color: #fff;
}
#tables #main
{
  padding: 2px 8px 16px 8px;
  text-align: left;
}
#tables h2
{
  margin: 0;
  padding: 3em 0 .5em 0;
  font-size: 1em;
  border: none;
}
#tables table
{
  margin: 0;
  padding: 0;
}
#tables tr:hover td
{
  background-color: #eef;
}
#tables th,
#tables td
{
  padding: 1px 2px;
}
#tables td
{
  border: 1px solid #eee;
}

/* static pages */

.images img
{
  border: 1px solid #000;
  width: 230px;
}
.colophon dl dt
{
  width: 18em;
  float: left;
  font-weight: bold;
}
.colophon dl dd
{
  margin-left: 18em;
}
.colophon ul
{
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
}
.colophon li
{
  margin: .5em 0;
  padding: 0;
}
.colophon p.copyright
{
  color: #666;
}