@import "/includes/globalnav/v07b/globalnav.css";
@import "/includes/footer/footer-v07b.css";

img, div { behavior: url('/superspeller/iepngfix.htc') }

/* MAIN COLOURS

light blue (links, on dark backgrounds) - #c8e0ee
yellow (hover states, highlights) - #ffee49
copy background (mid-level blue) - #4abbff
medium blue (default text) - #0753aa
dark blue (titles, headers) - #061733

*/

.css_yellow { color: #ffee49; }
.css_darkblue { color: #061733; }
.css_lightblue { color: #c8e0ee; }

body { padding: 0px; margin: 0px; background: url('/superspeller/images/tiled_bg.jpg') top center repeat-y; font: 11px/12px Verdana; color: #0753aa;}
#site_wrapper { padding: 0px; margin: 0px; width: 100%; height: 100%; min-height: 1040px; background: url('/superspeller/images/css_bg.jpg') top center no-repeat; }
#css_main { position: relative; left: 50%; padding: 0px; margin: 0px 0px 0px -493px; width: 986px; height: auto; }
#spellername { position: absolute; top: -200px; left: -200px; height: 20px; width: 100px; visibility: hidden; }

/* HEADER STYLES */
#globalnav { background-color: #ffffff; padding-bottom: 3px; }

#css_header { position: relative; padding: 0px; margin: 0px; width: 986px; height: 260px; background: url('/superspeller/images/top_banner_bg.png') 0 0 no-repeat; }
#css_logo { position: absolute; top: 0px; left: 0px; width: 270px; height: 235px; }
#site_nav_wrapper { position: absolute; top: 114px; left: 278px; width: 669px; height: 45px; }
#site_nav { height: 45px; width: 669px; margin: 0px; padding: 0px; list-style: none; }
#site_nav li { height: 45px; display: inline; padding: 0px; list-style: none; }
#site_nav li a { float: left; margin-left: 5px; background-position: left bottom; text-decoration: none; }
#site_nav li a:hover { background-position: left top; text-decoration: none; }
#site_nav li a.home { width: 94px; height: 45px; background-image: url('/superspeller/images/button_home.gif'); }
#site_nav li a.spellers { width: 140px; height: 45px; background-image: url('/superspeller/images/button_spellers.gif'); }
#site_nav li a.hosts { width: 94px; height: 45px; background-image: url('/superspeller/images/button_hosts.gif'); }
#site_nav li a.about { width: 166px; height: 45px; background-image: url('/superspeller/images/button_about.gif'); }
#site_nav li a.games { width: 150px; height: 45px; background-image: url('/superspeller/images/button_games.gif'); }
#site_nav li a span { visibility: hidden; }

#spellers_nav_wrapper { position: absolute; width: 709px; height: 60px; top: 174px; left: 251px; }
#spellers_nav { height: 60px; width: 697px; margin: 0px; padding: 0px; list-style: none; text-align: center; }
#spellers_nav li { width: 56px; height: 60px; display: inline; padding: 0px; list-style: none; font: 9px/10px Verdana; color: #0083ff; text-align: center; }
#spellers_nav li a { float: left; margin-right: 2px; text-decoration: none; color: #0083ff; }
#spellers_nav li a:hover { color: #ffee49; text-decoration: none; }
#spellers_nav li a img { border: 1px solid #000000; margin-bottom: 2px; }
#spellers_nav li a:hover img { border: 1px solid #ffee49; margin-bottom: 2px; }


/* BODY STYLES */
#css_body { float: left; padding: 0px 43px 10px 43px; margin: 0px; width: 900px; height: auto; min-height: 200px; background: url('/superspeller/images/content_bg.png') 0 0 repeat-y; display: inline; }

#left_column { width: 586px; height: auto; float: left; display: inline; }
.left_header { width: 586px; height: 46px; float: left; display: inline; }
.left_header span { visibility: hidden; }

.generic_box { float: left; width: 566px; height: auto; padding: 10px; background-color: #4abbff; margin-bottom: 15px; font: 12px/14px Verdana; color: #0753aa; display: inline; }

#latest_episode { float: left; width: 586px; height: 382px; background-color: #4abbff; margin-bottom: 15px; display: inline; }

#css_promo { float: left; width: 586px; height: 480px; background-color: #4abbff; margin-bottom: 15px; display: inline; }

#bio_box { float: left; width: 565px; padding: 10px; background-color: #4abbff; margin-bottom: 15px; }
#bio_image { float: left; width: 380px; height: 253px; padding: 0px; margin: 0px; }
#bio_image.host { float: left; width: 380px; height: 253px; padding: 0px; margin: 0px 0px 0px 87px; }
#bio_text { float: right; width: 175px; height: 223px; padding-top: 20px; font: 18px/22px Verdana; color: #061733; text-align: center; font-weight: bold; letter-spacing: -0.4px; }
#bio_text .header { font: 14px/18px Verdana; color: #0753aa; text-transform: uppercase; letter-spacing: -0.2px; }
#bio_description { float: left; clear: both; width: 545px; height: auto; margin: 15px 10px 0px 10px; font: 12px/14px Verdana; color: #061733; }

#spellers_box { float: left; width: 551px; padding: 17px; background-color: #4abbff; margin-bottom: 15px; color: #061733; }
#spellers_box img, #spellers_box a img { border: 1px solid #000; }
#spellers_box a:hover img { border: 1px solid #ffee49; }
#spellers_box .speller_item { float: left; margin-right: 12px; height: 100px; width: 100px; }
#spellers_box .speller_item_last { float: left; height: 100px; width: 100px; }
#spellers_box .speller_grid_text { float: left; width: 100px; text-align: center; }
#spellers_box a { color: #061733; text-decoration: none; }
#spellers_box a:hover { color: #ffee49; text-decoration: none; }
#spellers_box .host_item { float: left; margin: 0px 12px 0px 12px; height: 330px; width: 250px; }
#spellers_box .host_grid_text { float: left; width: 250px; text-align: center; font: 18px/30px Verdana; height: 30px; }


#fan_activity { font: 12px/35px Verdana; }
#fan_activity .fan_activity_item { clear: both; float: left; width: 555px; padding-left: 5px; margin-bottom: 5px; }
#fan_activity .fan_activity_badge { float: left; width: 120px; height: 30px; padding: 5px 10px 5px 0px; text-align: center; }
#fan_activity .kid { background: url('/superspeller/images/badge_kid_small.png') 0px 5px no-repeat; color: #ffee49; font: 10px/24px Verdana; font-weight: bold; letter-spacing: -0.3px; }
#fan_activity .adult { background: url('/superspeller/images/badge_adult_small.png') 0px 5px no-repeat; color: #0753aa; font: 10px/24px Verdana; font-weight: bold; letter-spacing: -0.3px; }
#fan_activity .itemText { float: left; margin: 5px 7px 0px 0px; }
#fan_activity .itemImage { float: left; margin: 5px 0px 0px 0px; padding: 0px; }
#fan_activity .speller { float: left; width: 150px; height: 37px; display: block; padding: 0; margin: 3px 0px 0px 0px; }
#fan_activity .speller img { float: left; border: 1px solid #000000; }
#fan_activity .speller a { float: left; height: 37px; text-decoration: none; font: 9px/10px Verdana; color: #0753aa; text-align: center; }
#fan_activity .speller a img { float: left; border: 1px solid #000000; }
#fan_activity .speller a:hover img { border: 1px solid #ffee49; } 
#fan_activity .speller a:hover { color: #ffee49; text-decoration: none; }
#fan_activity .speller .spellerName { float: left; font: 14px/35px Verdana; color: #0753aa; margin-left: 5px;}
#fan_activity .speller a .spellerName{ color: #0753aa; }
#fan_activity .speller a:hover .spellerName { color: #ffee49; }

#leaderboard { font: 10px/14px Verdana; color: #0753aa; font-weight: normal; }
#leaderboard #leaderboard_adult { float: left; width: 265px; height: auto; margin-bottom: 10px; }
#leaderboard #leaderboard_kid { float: right; width: 265px; height: auto; margin-bottom: 10px; }
#leaderboard .badge { float: left; width: 90px; height: 90px; }
#leaderboard .scores_wrapper { float: right; width: 165px; height: auto; }
#leaderboard .header { float: left; width: inherit; height: 16px; border-bottom: 1px solid #061733; margin-bottom: 5px; }
#leaderboard .names { float: left; text-align: left; width: 105px; margin-right: 10px; height: auto; }
#leaderboard .scores { float: left; text-align: center; width: 45px; height: auto; }
#leaderboard #leaderboard_disclaimer { clear: both; float: left; width: 566px; height: 30px; text-align: center; font: 9px/30px Verdana; font-style: italic; }

#photogallery { float: left; width: 575px; height: auto; min-height: 98px; padding: 5px 6px 5px 5px; background-color: #4abbff; margin-bottom: 15px; }
html>body #photogallery { padding: 5px 6px 0px 5px; }
#photogallery .photo { float: left; width: 140px; height: 93px; margin-right: 5px; margin-bottom: 5px; }
#photogallery .lastphoto { float: left; width: 140px; height: 93px; margin-right: 0px; margin-bottom: 5px; }

#spellingchallenge { float: left; width: 586px; height: 420px; padding: 0px; background-color: #4abbff; margin-bottom: 15px; }


/* RIGHT COLUMN STYLES */
#right_column { width: 300px; height: auto; float: right; display: inline; }
.right_header { width: 300px; height: 46px; float: left; display: inline; }
.right_header span { visibility: hidden; }

.bigboxad { float: left; width: 300px; height: 260px; padding-top: 20px; margin-bottom: 15px; background: #061733 url('/superspeller/images/ad_header.gif') 0 0 no-repeat; display: inline; }

#wotd { float: left; width: 280px; height: 100px; padding: 10px; margin-bottom: 15px; background-color: #4abbff; font: 11px/12px Verdana; color: #0753aa; }
#wotd a { color: #c8e0ee; text-decoration: none; }
#wotd a:hover { color: #ffee49; text-decoration: none; }
#wotd .wotd_wordlink { float: left; width: 280px; color: #c8e0ee; text-decoration: none; font: 18px/18px Verdana; font-weight: bold; margin-bottom: 15px; }
#wotd .wotd_description { float: left; margin-left: 20px; width: 240px; margin-bottom: 15px; }
#wotd .wotd_courtesy { float: left; width: 280px; text-align: right; font: 9px/10px Verdana; font-style: italic; }

#your_profile { float: left; width: 280px; height: auto; padding: 10px; margin-bottom: 15px; background-color: #4abbff; font: 11px/12px Verdana; color: #0753aa; display: inline; }
#your_profile h2 { padding: 0px 0px 7px 0px; margin: 0px; font: 14px/16px Verdana; color: #ffee49; font-weight: bold; }
#your_profile a { color: #c8e0ee; text-decoration: none; }
#your_profile a:hover { color: #ffee49; text-decoration: none; }
#your_profile li { padding-bottom: 3px; }
#your_profile a.profileButton { float: left; width: 100px; height: 15px; padding: 5px 10px 5px 10px; text-align: center; background-color: #c8e0ee; border: 1px solid #0083ff; margin: 5px 8px 5px 8px; color: #0083ff; text-decoration: none; display: inline; }
#your_profile a.profileButton:hover { color: #ffee49; text-decoration: none; background-color: #0753aa; }
#your_profile #profileHeaderText { float: left; width: 280px; height: auto; padding: 0px; margin: 0px; display: inline; }
#your_profile #ageGroupContent { float: left; width: 280px; height: auto; margin: 10px 0px 10px 0px; padding: 0px; display: inline; }
#your_profile #ageGroupContent .badgeLeft { float: left; width: 90px; margin-left: 20px; cursor: pointer; display: inline; }
#your_profile #ageGroupContent .badgeRight { float: right; width: 90px; margin-right: 20px; cursor: pointer; display: inline; }
#your_profile #ageGroupContent .conjunction { float: left; width: 60px; text-align: center; font: 14px/14px Verdana; color: #0753aa; font-weight: bold; padding-top: 35px; display: inline; }
#your_profile #ageGroupContent .header { float: left; width: 280px; height: 20px; text-align: center; margin-bottom: 10px; font: 14px/16px Verdana; color: #061733; display: inline; }
#your_profile #ageGroupContent .miscText { float: left; width: 280px; height: auto; text-align: left; margin-bottom: 15px; font: 12px/14px Verdana; color: #0753aa; display: inline; }
#your_profile #ageGroupContent .challengeScore { float: right; width: 160px; height: 90px; text-align: center; font: 14px/16px Verdana; color: #0753aa; display: inline; }
#your_profile #ageGroupContent .scoreDisplay { font: 24px/24px Verdana; font-weight: bold; margin-bottom: 5px; display: inline; }
#your_profile #myFavesContent { float: left; width: 280px; height: auto; font: 14px/18px Verdana; color: #061733; margin-bottom: 10px; display: inline; }
#your_profile #myFavesContent .header { float: left; width: 280px; height: auto; margin-bottom: 10px; font: 14px/18px Verdana; color: #061733; display: inline; }
#your_profile #myFavesContent .miscText { float: left; width: 280px; height: auto; font: 12px/14px Verdana; color: #0753aa; display: inline; }
#your_profile #myFavesContent img { float: left; margin: 7px; border: 1px solid #000; display: inline; }
#your_profile #myFavesContent a:hover img { border: 1px solid #ffee49; }
#your_profile #keepInformed { float: left; width: 270px; height: auto; padding: 5px; margin-bottom: 5px; background-color: #c8e0ee; display: inline; }
#your_profile #keepInformed .checkbox { float: left; width: 30px; display: inline; }
#your_profile #keepInformed .informed_text { float: left; width: 240px; font: 12px/14px Verdana; display: inline; }

#fans { float: left; width: 260px; height: auto; min-height: 170px; margin-bottom: 15px; padding: 10px 20px 10px 20px; background-color: #4abbff; display: inline; }
#fans #fan_text { float: left; width: 160px; height: 100px; padding-top: 20px; margin-right: 10px; font: 18px/22px Verdana; font-weight: bold; color: #061733; letter-spacing: -0.3px; display: inline; }
#fan_callout { float: left; width: 90px; height: 120px; cursor: pointer; display: inline; }
#fan_callout_badge { float: left; width: 90px; height: 90px; margin: 0px; padding: 0px;}
#fan_callout_fan { float: left; display: none; width: 90px; height: 120px; margin: 0px; padding: 0px; }
#fan_callout_text_fan { float: left; width: 90px; height: 30px; text-decoration: none; text-align: center; font: 12px/12px Verdana; color: #ffffff; line-height: 30px; }
#fan_callout_badge_fan { background: url('/superspeller/images/fan_indicator_on.gif') 0px 0px no-repeat; }
#fan_callout .noFan { background: url('/superspeller/images/fan_indicator_off.gif') 0px 0px no-repeat; }
#fan_callout .yesFan { background: url('/superspeller/images/fan_indicator_on.gif') 0px 0px no-repeat; }
#fan_callout_noFan { float: left; display: none; width: 90px; height: 120px; margin: 0px; padding: 0px; }
#fan_callout_text_noFan { float: left; width: 90px; height: 30px; text-decoration: none; text-align: center; font: 12px/12px Verdana; color: #ffffff; line-height: 30px; }
#fan_callout_badge_noFan { background: url('/superspeller/images/fan_indicator_off.gif') 0px 0px no-repeat; }

#fans #fan_list { float: left; width: 260px; height: auto; min-height: 50px; display: inline; }
#fans #fan_list .itemRight { float: right; width: 120px; height: 30px; padding: 5px 0px 10px 0px; text-align: center; display: inline; }
#fans #fan_list .itemLeft { float: left; width: 120px; height: 30px; padding: 5px 0px 10px 0px; text-align: center; display: inline; }
#fans #fan_list .kid { background: url('/superspeller/images/badge_kid_small.png') 0px 5px no-repeat; color: #ffee49; font: 10px/24px Verdana; font-weight: bold; letter-spacing: -0.3px; }
#fans #fan_list .adult { background: url('/superspeller/images/badge_adult_small.png') 0px 5px no-repeat; color: #0753aa; font: 10px/24px Verdana; font-weight: bold; letter-spacing: -0.3px; }

/* FOOTER STYLES */
#body_bumper { clear: both; float: left; padding: 0px; margin: 0px; width: 900px; height: 10px; font: 7px/7px Verdana; display: inline; }
#css_footer { float: left; padding: 30px 0px 0px 0px; margin: 0px; height: 70px; width: 986px; background: url('/superspeller/images/footer_bg.png') 0 0 no-repeat; font: 10px/10px Verdana; color: #0083ff; text-align: center; display: inline; }
#css_footer a { margin-top: 4px; height: 14px; vertical-align: top; color: #0083ff; text-decoration: none; display: inline; }
#css_footer a:hover { color: #ffee49; text-decoration: none; }

#page_footer { clear: both; width: 100%; background-color: #ffffff; padding: 3px 0px 10px 0px; }