body { background-color: #F2F2F2; text-align: center; }

#container { width: 700px; margin: 0 auto; text-align: left; position: relative; }

#header { padding: 12px 0 10px 0; height: 20px; }

#title  { background-color: #47679F; color: #FFFFFF; padding: 8px 24px; }
#subtitle { background-color: #7697CA; color: #FFFFFF; padding: 8px 24px; }
#title h1, #subtitle h2 { color: #FFFFFF; }
#subtitle h2 { font-size: 18px; }
#subtitle h2 a:link, #subtitle h2 a:visited, #subtitle h2 a:hover, #subtitle h2 a:active { color: #FFFFFF; text-decoration: none;  }
#title #pagenumber { float: right; padding-top: 6px; color: #DDDDDD; }

#toptitle { position: absolute; top: 11px; right: 0; }

#content { background-color: #FFFFFF; padding: 14px 24px 24px 24px; min-height: 300px; }

#flash { width: 700px; height: 450px; }

#nav { height: 50px; padding-top: 6px; position: relative; }

a.start { display: block; height: 36px; width: 346px; text-decoration: none; text-indent: -9999px; background: url(start.jpg) 0 0 no-repeat; }

a.button-mainmenu, a.button-resources, a.button-contactus, a.button-saveprogress,
a.button-previous, a.button-next, a.button-nextlesson { display: block; height: 30px; text-decoration: none; text-indent: -9999px; }

a.button-previous { width: 90px; background: url(previous.gif) 0 0 no-repeat; float: left; }
a.button-next { width: 67px; background: url(next.gif) 0 0 no-repeat; float: right; }
a.button-nextlesson { width: 108px; background: url(nextlesson.gif) 0 0 no-repeat; float: right; }

#slider { height: 40px; width: 414px; position: absolute; left: 150px; top: 12px; background: url(slider-bg.gif) 0 0 no-repeat; }
.ui-slider-horizontal { height: 18px; width: 390px; position: absolute; left: 10px; top: 0; }
.ui-slider-horizontal .ui-slider-handle { position: absolute; z-index: 2; width: 18px; height: 18px; cursor: pointer; background: url(slider-circle.gif) 0 0 no-repeat; margin-left: -.6em; }
#slidertext { position: absolute;  top: 20px; font-size: 11px; color: #555555; }

#menu-welcome, #menu-list, #menu-assessment { display: block; float: left; height: 17px; text-indent: -9999px; outline: none; margin-right: 24px; }
#menu-welcome { width: 74px; background: url(menu.gif) 0 0 no-repeat; }
#menu-list { width: 82px; background: url(menu.gif) -101px 0 no-repeat; }
#menu-assessment { width: 89px; background: url(menu.gif) -210px 0 no-repeat; }

#menu-welcome.selected, #menu-welcome:hover { background: url(menu.gif) 0 -20px no-repeat; }
#menu-list.selected, #menu-list:hover  { background: url(menu.gif) -101px -20px no-repeat; }
#menu-assessment.selected, #menu-assessment:hover  { background: url(menu.gif) -210px -20px no-repeat; }


/* ---- Overlay --------------- */

#overlay-container { display: none; position: fixed; top: 30px; left: 50%; margin-left: -375px; padding: 47px 60px 50px 60px; width: 630px; height: 380px; z-index: 100; background: url(overlay.png) 0 0 no-repeat; }
#overlay-container div { width: 630px; }
#overlay-container div h4 {  margin-top: 0; padding-right: 40px; }
#overlay-container div p { font-size: 90%; }
#overlay-close { position: absolute; top: 48px; right: 58px; }

#overlay-darken { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 99; background: black; }