* { margin: 0; padding: 0; outline: none; }
body { font: 13px/1.5 Arial, Sans-Serif; color: #fff; background: #02090f url(../images/bg.jpg) no-repeat 50% 0; }
body.logged-out { background-image: url(../images/bg-home.jpg); background-position: 50% -33px; }
body.error { background-position: 50% -33px; }

/* Generic/Reset Styles */
p { padding-bottom: 15px; }
a { text-decoration: underline; color: #1c99cc; }
a:hover { color: #33ccff; }
ul { list-style: none; }
form input { line-height: 1.0; }

.site-center { width: 960px; margin: 0 auto; }
.site-container { width: 100%; float: left; padding-bottom: 30px; }

.nav { width: 738px; height: 33px; float: left; padding-left: 111px; }
.nav ul { width: 736; float: left; padding-left: 2px; background: url(../images/nav-divide.png) no-repeat; }
.nav ul li { float: left; padding-right: 2px; background: url(../images/nav-divide.png) no-repeat right top; }
.nav ul li a { height: 33px; float: left; text-indent: 300px; overflow: hidden; white-space: nowrap; background: url(../images/nav-sprite.png) no-repeat; }
.nav ul li.home a { width: 62px; background-position: 0 top; }
.nav ul li.language a { width: 167px; background-position: -62px top; }
.nav ul li.multiplayer a { width: 212px; background-position: -229px top; }
.nav ul li.comics a { width: 76px; background-position: -441px top; }
.nav ul li.links a { width: 125px; background-position: -517px top; }
.nav ul li.logout a { width: 82px; background-position: -642px top; }
.nav ul li.home a:hover,
.nav ul li.home.active a { background-position: 0 bottom; }
.nav ul li.language a:hover,
.nav ul li.language.active a { background-position: -62px bottom; }
.nav ul li.multiplayer a:hover,
.nav ul li.multiplayer.active a { background-position: -229px bottom; }
.nav ul li.comics a:hover,
.nav ul li.comics.active a { background-position: -441px bottom; }
.nav ul li.links a:hover,
.nav ul li.links.active a { background-position: -517px bottom; }
.nav ul li.logout a:hover { background-position: -642px bottom; }

.logo-container { width: 960px; float: left; }
.logo-container .logo { width: 240px; height: 90px; float: left; text-indent: 300px; overflow: hidden; white-space: nowrap; }
.logo-container .info { width: 360px; float: left; padding-top: 20px; text-align: left; text-transform: uppercase; font-size: 14px; font-weight: bold; }
.logo-container .info span { color: #32b9ff; font-weight: normal; }
.logo-container .info span.user-points { color: #fff; font-weight: bold; }
.logo-container .info.points { text-align: right; }
.logo-container .leaderboard-link a { width: 115px; height: 23px; float: right; text-indent: 200px; overflow: hidden; white-space: nowrap; background: url(../images/btn-leaderboard.png) no-repeat; }
.logo-container .leaderboard-link a:hover { background-position: left bottom; }

.welcome { width: 910px; height: 203px; float: left; margin-top: 27px; padding-left: 50px; }
.welcome .log-in { width: 201px; float: left; padding-left: 60px; }
.welcome .log-in h1 { width: 201px; height: 42px; float: left; margin-top: 19px; text-indent: 300px; overflow: hidden; white-space: nowrap; background: url(../images/h-log-in.png) no-repeat; }
.welcome ul { width: 240px; float: left; clear: left; margin-top: 6px; padding-left: 30px; }
.welcome ul li { width: 120px; float: left; text-align: center; }
.welcome ul li a { font-size: 11px; color: #bcbcbc; }
.welcome ul li a:hover { color: #fff; }
.welcome .not-member { width: 268px; float: left; clear: left; margin-top: 8px; padding: 18px 0 0 64px; background: url(../images/login-divide.png) no-repeat; }
.welcome .not-member h2 { width: 193px; height: 27px; text-indent: 200px; overflow: hidden; white-space: nowrap; background: url(../images/h-not-member.png) no-repeat; }
.welcome .create-account { width: 156px; float: left; clear: left; padding-left: 83px; }
.welcome .create-account a { width: 156px; height: 27px; display: block; text-indent: 200px; overflow: hidden; white-space: nowrap; background: url(../images/btn-create-account.png) no-repeat; }
.welcome .create-account a:hover { background-position: left bottom; }

.login-form { width: 282px; float: left; clear: left; margin-top: 1px; padding-left: 33px; }
.login-form form p { float: left; position: relative; padding: 0; }
.login-form form p label { position: absolute; top: 6px; left: 12px; color: #666; font-size: 12px; line-height: 1.0; }
.login-form form p input { border: none; background: none; color: #000; font-size: 12px; }
.login-form form p.username { width: 120px; }
.login-form form p.username input { width: 86px; height: 13px; padding: 5px 12px; background: url(../images/bg-username.png) no-repeat; }
.login-form form p.password { width: 101px; }
.login-form form p.password input { width: 77px; height: 13px; padding: 5px 12px; background: url(../images/bg-password.png) no-repeat; }
.login-form form p.submit { width: 37px; }
.login-form form p.submit input { width: 37px; height: 23px; text-indent: 50px; overflow: hidden; white-space: nowrap; background: url(../images/btn-login.png) no-repeat; }
.login-form form p.submit input:hover { background-position: left bottom; }

.form-error { width: 686px; height: 78px; float: left; margin-top: 30px; padding: 0 137px; }
.form-error p { width: 558px; height: 48px; padding: 30px 64px 0 64px; background: url(../images/bg-error.png) no-repeat; }
.form-error p a { color: #fff; }
.form-error p a:hover { color: #ccc; }

.content { width: 960px; min-height: 570px; height: auto !important; height: 570px; float: left; padding-bottom: 30px; }

.overlay { width: 800px; float: left; padding: 0 80px; }
.overlay .top { width: 800px; height: 90px; float: left; background: url(../images/bg-overlay-top.png) no-repeat; }
.overlay .top h1 { height: 38px; margin: 45px 0 0 70px; text-indent: 600px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; }
.overlay .top h1.create-account { width: 440px; background-image: url(../images/h-create-account.png) }
.overlay .top h1.forgot-username { width: 482px; background-image: url(../images/h-forgot-username.png) }
.overlay .top h1.forgot-password { width: 487px; background-image: url(../images/h-forgot-password.png) }
.overlay .top h1.reset-password { width: 448px; background-image: url(../images/h-reset-password.png) }
.overlay .mid { width: 640px; min-height: 350px; height: auto !important; height: 350px; float: left; padding: 0 80px; background: url(../images/bg-overlay-mid.png) repeat-y; }
.overlay .bottom { width: 800px; height: 40px; float: left; background: url(../images/bg-overlay-bottom.png) no-repeat; }

.overlay .form-error { margin-top: 0; padding: 0; }
.overlay .form-error p { margin-left: -23px; }

.overlay .form { padding-bottom: 15px; position: relative; }
.overlay .form p { width: 372px; float: left; padding: 15px 0 0 0; }
.overlay .form p br { float: left; clear: both; }
.overlay .form ul { width: 372px; float: left; clear: both; color: #ff9000; }
.overlay .form label { width: 250px; float: left; }
.overlay .form label span { color: #ff9000; }
.overlay .form span.right { width: 122px; float: left; text-align: right; }
.overlay .form span.right span { color: #ff9000; }
.overlay .form p.text input { width: 348px; height: 14px; padding: 11px 12px; border: none; background: url(../images/bg-text-input.png) no-repeat; font-size: 13px; }
.overlay .form p.submit { width: 600px; }
.overlay .form span.submit { width: 116px; float: right; padding-top: 5px; }
.overlay .form span.submit input { width: 116px; height: 27px; border: none; text-indent: 150px; overflow: hidden; white-space: nowrap; background: url(../images/btn-submit.png) no-repeat; }
.overlay .form span.submit input:hover { background-position: left bottom; }

.chapter-select { width: 190px; height: 257px; margin: 20px 0 0 245px; padding: 165px 148px 90px 267px; background: url(../images/bg-game-select.png) no-repeat; }
.chapter-select ul { padding: 4px; padding-bottom: 0; }
.chapter-select ul li { width: 182px; height: 33px; padding-bottom: 3px; }
.chapter-select ul li a { width: 182px; height: 33px; display: block; text-indent: 200px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; }
.chapter-select ul li a:hover,
.chapter-select ul li.active a { background-position: 0 -33px; }
.chapter-select ul li span { width: 182px; height: 33px; display: block; text-indent: 200px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; background-position: 0 -66px; }
.chapter-select ul li.chapter-1 a,
.chapter-select ul li.chapter-1 span { background-image: url(../images/btn-chapter-1.png); }
.chapter-select ul li.chapter-2 a,
.chapter-select ul li.chapter-2 span { background-image: url(../images/btn-chapter-2.png); }
.chapter-select ul li.chapter-3 a,
.chapter-select ul li.chapter-3 span { background-image: url(../images/btn-chapter-3.png); }
.chapter-select ul li.chapter-4 a,
.chapter-select ul li.chapter-4 span { background-image: url(../images/btn-chapter-4.png); }
.chapter-select ul li.chapter-5 a,
.chapter-select ul li.chapter-5 span { background-image: url(../images/btn-chapter-5.png); }
.chapter-select ul li.chapter-6 a,
.chapter-select ul li.chapter-6 span { background-image: url(../images/btn-chapter-6.png); }
.chapter-select ul li.chapter-7 a,
.chapter-select ul li.chapter-7 span { background-image: url(../images/btn-chapter-7.png); }

.game { width: 800px; height: 500px; margin: 0 22px; padding: 67px 56px 61px 60px; background: url(../images/bg-game.png) no-repeat; }
.game .missing { width: 100%; text-align: center; padding-top: 150px; }
.game .missing h3 { font-weight: normal; font-size: 18px; padding: 30px 0; }

.content-container { width: 806px; float: left; padding: 0 77px; background-repeat: no-repeat; }
.content-container .top { width: 806px; height: 130px; float: left; }
.content-container .overflow-group { width: 806px; float: left; position: relative; overflow: hidden; }
.content-container .mid { width: 806px; min-height: 350px; height: auto !important; height: 350px; float: left; background: url(../images/bg-content-mid.png) repeat-y; }
.content-container .bottom { width: 806px; height: 47px; float: left; background: url(../images/bg-content-bottom.png) no-repeat; }
.content-container .bottom-frame { width: 806px; height: 3px; float: left; background: url(../images/bg-content-bottom.png) no-repeat left bottom; }

.multiplayer .top { background-image: url(../images/bg-multiplayer.png); }
.multiplayer .professor { width: 143px; height: 546px; position: absolute; top: 0; right: 3px; background: url(../images/professor.png) no-repeat; }
.multiplayer .mid { padding-left: 35px; }
.multiplayer ul.games { width: 700px; float: left; }
.multiplayer ul.games li { width: 294px; height: 213px; float: left; padding: 13px 21px 20px 13px; background: url(../images/bg-multiplayer-game.png) no-repeat; }
.multiplayer ul.games li a { width: 294px; height: 213px; display: block; text-indent: 300px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; }
.multiplayer ul.games li a:hover { background-position: left bottom; }
.multiplayer ul.games li.word-soup a { background-image: url(../images/btn-word-soup.jpg); }
.multiplayer ul.games li.word-builder a { background-image: url(../images/btn-word-builder.jpg); }
.multiplayer ul.games li.head-to-head a { background-image: url(../images/btn-head-to-head.jpg); }
.multiplayer ul.games li.phrases-in-space a { background-image: url(../images/btn-phrases-in-space.jpg); }
.multiplayer ul.games li span { width: 294px; height: 213px; display: block; text-indent: 300px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; }

.head2head-chapters { width: 190px; height: 257px; margin: 0 80px; padding: 279px 108px 63px 502px; background: url(../images/bg-h2h-chapter-select.png) no-repeat; }
.head2head-chapters ul { padding: 4px; padding-bottom: 0; }
.head2head-chapters ul li { width: 182px; height: 33px; padding-bottom: 3px; }
.head2head-chapters ul li a { width: 182px; height: 33px; display: block; text-indent: 200px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; }
.head2head-chapters ul li a:hover,
.head2head-chapters ul li.active a { background-position: 0 -33px; }
.head2head-chapters ul li span { width: 182px; height: 33px; display: block; text-indent: 200px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; background-position: 0 -66px; }
.head2head-chapters ul li.chapter-1 a,
.head2head-chapters ul li.chapter-1 span { background-image: url(../images/btn-chapter-1.png); }
.head2head-chapters ul li.chapter-2 a,
.head2head-chapters ul li.chapter-2 span { background-image: url(../images/btn-chapter-2.png); }
.head2head-chapters ul li.chapter-3 a,
.head2head-chapters ul li.chapter-3 span { background-image: url(../images/btn-chapter-3.png); }
.head2head-chapters ul li.chapter-4 a,
.head2head-chapters ul li.chapter-4 span { background-image: url(../images/btn-chapter-4.png); }
.head2head-chapters ul li.chapter-5 a,
.head2head-chapters ul li.chapter-5 span { background-image: url(../images/btn-chapter-5.png); }
.head2head-chapters ul li.chapter-6 a,
.head2head-chapters ul li.chapter-6 span { background-image: url(../images/btn-chapter-6.png); }
.head2head-chapters ul li.chapter-7 a,
.head2head-chapters ul li.chapter-7 span { background-image: url(../images/btn-chapter-7.png); }

.multiplayer-flash { width: 800px; height: 600px; margin: 0 80px; }

.comics .top { background-image: url(../images/bg-comics.png); }
.comics .eddie { width: 104px; height: 470px; position: absolute; top: 10px; right: 3px; background: url(../images/eddie.png) no-repeat; }
.comics .mid ul { width: 724px; float: left; padding-left: 23px; }
.comics .mid ul li { width: 166px; float: left; padding: 0 15px 15px 0; }
.comics .mid ul li h3 { width: 166px; height: 216px; }
.comics .mid ul li h3.unavailable { text-indent: 200px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; background-position: left bottom; }
.comics .mid ul li h3 a { width: 166px; height: 216px; display: block; text-indent: 200px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; }
.comics .mid ul li h3 a:hover { background-position: left -216px; }
.comics .mid ul li h3.chap-1.unavailable,
.comics .mid ul li h3.chap-1 a { background-image: url(../images/btn-comics-1.png); }
.comics .mid ul li h3.chap-2.unavailable,
.comics .mid ul li h3.chap-2 a { background-image: url(../images/btn-comics-2.png); }
.comics .mid ul li h3.chap-3.unavailable,
.comics .mid ul li h3.chap-3 a { background-image: url(../images/btn-comics-3.png); }
.comics .mid ul li h3.chap-4.unavailable,
.comics .mid ul li h3.chap-4 a { background-image: url(../images/btn-comics-4.png); }
.comics .mid ul li h3.chap-5.unavailable,
.comics .mid ul li h3.chap-5 a { background-image: url(../images/btn-comics-5.png); }
.comics .mid ul li h3.chap-6.unavailable,
.comics .mid ul li h3.chap-6 a { background-image: url(../images/btn-comics-6.png); }
.comics .mid ul li h3.chap-7.unavailable,
.comics .mid ul li h3.chap-7 a { background-image: url(../images/btn-comics-7.png); }

.exercise-selection { width: 156px; height: 368px; margin: 0 77px; padding: 164px 53px 94px 597px; background: url(../images/bg-exercises.png) no-repeat; }
.exercise-selection a { text-decoration: none; text-transform: uppercase; }
.exercise-selection ul { width: 143px; padding: 6px 6px 0 7px; line-height: 1.0; }
.exercise-selection ul li { text-align: center; }
.exercise-selection ul li h3 { width: 143px; height: 33px; margin-top: 3px; font-size: 13px; font-weight: bold; color: #000; }
.exercise-selection ul li h3.unavailable { height: 23px; padding-top: 10px; background: url(../images/btn-language-chapter.png) no-repeat 0 -66px; text-transform: uppercase; }
.exercise-selection ul li h3 a { width: 143px; height: 23px; padding-top: 10px; display: block; background: url(../images/btn-language-chapter.png) no-repeat; color: #7baad1; }
.exercise-selection ul li h3 a:hover,
.exercise-selection ul li h3.ui-state-active a { background-position: 0 -33px; color: #fff; }
.exercise-selection ul li ul { padding: 0; }
.exercise-selection ul li ul li a { width: 143px; height: 19px; margin-top: 2px; display: block; padding-top: 5px; background: url(../images/btn-language-exercise.png) no-repeat; font-size: 11px; color: #6d6d6d; }
.exercise-selection ul li ul li a:hover { background-position: left bottom; color: #fff; }

.exercise-flash { width: 818px; height: 618px; margin: 0 71px; }

.leaderboard { width: 806px; float: left; padding: 0 77px; }
.leaderboard .top { width: 728px; height: 216px; padding: 135px 37px 0 41px; background: url(../images/bg-leaderboard-top.png) no-repeat; }
.leaderboard .top .my-standing { width: 728px; height: 112px; }
.leaderboard .top .top-100-header { width: 728px; height: 67px; padding-top: 37px; }
.leaderboard .mid { width: 728px; padding: 0 37px 0 41px; background: url(../images/bg-leaderboard-mid.png) repeat-y; }
.leaderboard .bottom { width: 806px; height: 62px; background: url(../images/bg-leaderboard-bottom.png) no-repeat; }
.leaderboard table th { vertical-align: bottom; text-align: left; font-size: 20px; font-weight: bold; }
.leaderboard table td { vertical-align: center; height: 45px; padding-bottom: 2px; background-repeat: no-repeat; font-size: 20px; font-weight: bold; }
.leaderboard table .rank { width: 92px; padding-right: 20px; text-align: right !important; background-position: -235px 0; }
.leaderboard table .score { width: 364px; padding-left: 17px; background-position: -347px 0; }
.leaderboard table .misc { width: 235px; }
.leaderboard table .misc img { width: 41px; float: left; padding: 3px 5px 0 5px; }
.leaderboard table .misc span { width: 150px; float: left; padding-top: 8px; color: #212121; font-size: 30px; font-weight: bold; line-height: 1; }
.leaderboard table tr.you .misc span { color: #392408; }
.leaderboard table tr.you td { background-image: url(../images/bg-leaderboard-row-you.png); color: #fec62f; }
.leaderboard table tr.alt td { background-image: url(../images/bg-leaderboard-row-alt.png); }

.leaderboard .my-standing table th { height: 54px; }
.leaderboard .my-standing table th.misc { height: 44px; padding-bottom: 10px; font-size: 17px; color: #9b6a0e; }
.leaderboard .top-100-header table th { height: 67px; }
.leaderboard .top-100-header table th.misc { height: 57px; padding-bottom: 10px; font-size: 26px; color: #8d8d8d; }

.link-container { width: 806px; float: left; padding: 0 77px; }
.link-container .top { width: 530px; height: 174px; float: left; padding: 125px 230px 0 46px; background: url(../images/bg-links-top.png) no-repeat; }
.link-container .top h2 { font-size: 40px; font-weight: normal; }
.link-container .top p { color: #c4c4c4; padding: 5px 0 0 0; font-size: 14px; }
.link-container .bottom { width: 806px; height: 60px; float: left; background: url(../images/bg-links-bottom.png) no-repeat; }
.link-container .mid { width: 799px; float: left; padding: 0 4px 0 3px; background: url(../images/bg-links-mid.png) repeat-y; }
.link-container .mid h3 { font-size: 18px; font-weight: normal; text-transform: uppercase; }
.link-container .mid-inner { width: 799px; min-height: 200px; height: auto !important; height: 200px; float: left; background: url(../images/bg-links-side.png) no-repeat right top; }
.link-container .categories { width: 193px; float: left; padding-left: 20px; }
.link-container .categories h3 { width: 181px; height: 33px; padding: 10px 0 0 12px; background: url(../images/h-links-categories.gif) no-repeat; color: #bebebe; }
.link-container .categories ul { padding: 14px 0 0 17px; }
.link-container .categories ul li { padding: 3px 0 3px 12px; background: url(../images/arrow-links.png) no-repeat left center; }
.link-container .categories ul li a { color: #646464; text-decoration: none; }
.link-container .categories ul li a:hover { color: #39d6ff; }
.link-container .categories ul li a.selected { font-weight: bold; }
.link-container .links { width: 480px; float: right; padding-right: 45px; }
.link-container .links h3 { width: 478px; height: 33px; padding: 10px 0 0 12px; background: url(../images/h-links.gif) no-repeat; color: #fff; }
.link-container .links ul { padding: 30px 0 0 12px; color: #484747; }
.link-container .links ul li { padding-bottom: 15px; }
.link-container .links ul li a { color: #00a6cf; }
.link-container .links ul li a:hover { color: #006f8b; }

.footer { width: 960px; float: left; font-size: 11px; color: #999; }
.footer .copyright { width: 100%; float: left; text-align: center; }
.footer ul { width: 100%; float: left; margin-top: 5px; line-height: 1.0; text-align: center; }
.footer ul li { display: inline; padding: 0 8px 0 10px; border-left: solid 1px #1c99cc; }
.footer ul li.first { border: none; }
.footer ul li a { color: #1c99cc; text-align: center; }
.footer ul li a:hover { color: #33ccff; }

.error-page { width: 806px; height: 386px; margin: 0 77px; padding-top: 240px; background: url(../images/bg-error-page.png) no-repeat; }
.error-page h1,
.error-page h2 { text-indent: 600px; overflow: hidden; white-space: nowrap; background-repeat: no-repeat; margin: 0 auto; }
.error-page h1.page-not-found { width: 505px; height: 57px; background-image: url(../images/h-page-not-found.png); }
.error-page h1.site-error { width: 455px; height: 57px; background-image: url(../images/h-website-error.png); }
.error-page h2 { width: 164px; height: 32px; margin-top: -10px; background-image: url(../images/h-oops.png); }
.error-page p { width: 600px; margin: 0 auto; text-align: center; }