body { font-size: .75em; font-family: Verdana, Helvetica, Sans-Serif; margin: 0; padding: 0; background: #DADADA url('bg.png') repeat-y scroll center top; }
body.widget { background-image: none; background-color: Transparent; }
.ie body { background-image: url('bg.gif'); }
a { color: #0d9ddb; }
div.wrapper { margin: 0 auto; min-height: 100%; width: 1000px; position: relative; left:-1px;  }
.chrome div.wrapper { left: 1px; }
.ie div.wrapper { left: 0px; min-height: 0; }
dl { clear: left; }
dl dt { margin:0; font-weight: bold; float: left; width: 150px; }
dl dd { margin:0; font-weight: normal; float: left; width: 250px; }
h2 { font-family: Trebuchet MS; font-size: 15pt; font-weight: normal; padding:1px 0 1px 5px; margin:10px 0 0 0; background-color: #5F5F5F; color: White; border-bottom: solid 1px #5F5F5F;}
h3 { font-family: Trebuchet MS; font-size: 10pt; padding:1px 0 1px 5px; margin:0; background-color: #cedde4; color: #333333; border: solid 1px #cedde4; }
h2.light { background-color: Transparent; border-bottom: solid 1px #0d9ddb; color: #0d9ddb; font-family: Trebuchet MS; font-size: 14pt; margin: 0 0 10px 0; padding: 0 0 5px 0; }
h3.light { background-color: Transparent; border: none; margin: 0; padding: 0;}
blockquote { margin: 0 0 10px 0; padding: 10px; background-color: #5f5f5f; color: White; }
table.data { border-collapse: collapse; width: 610px; font-size: 10pt;}
table.data td, table.data th { text-align: left; }
table.data thead { color: #0d9ddb; }
table.data th { border-bottom: solid 1px #0d9ddb; }
table.data th.sorted {  background-image: url('icon_datatable_sprite.png'); background-repeat: no-repeat; background-position: -3px -15px; }
table.data th.sorted span { color: Black; display: block; padding-left: 11px; }
table.data th.n { width: 25px; }
table.data th.thplayer { width: 160px; }
table.data th.coins { width: 70px; }
table.data th.cards { width: 60px; }
table.data th.batavg { width: 85px; }
table.data th.playtime { width: 75px; }
table.data th.joined { width: 115px; text-align: right;  }
table.data tbody { background: white; }
table.data td.first { text-align: right; }
table.data tr { border-bottom: 1px solid #999999; }
table.data td { padding-top: 3px; padding-bottom: 3px;  }
table.data td.first { padding-right: 0; }
table.data td.last, table.data th.last { text-align: right; }
table.data tfoot td { border-top: solid 1px #0d9ddb; }
table.data tfoot tr { border-bottom: none; }
table.data tfoot td { padding-top: 5px; }
table.data tfoot td.next {  text-align: right; }
table.data tfoot td.prev { }
table.data tfoot td.pageinfo { text-align: center; }
.clear { clear: both; }
.kern { letter-spacing: -1px; }
.strikethrough { text-decoration: line-through; }
#iewarning { position: fixed; width: 300px; height: 150px; background-color: White; border: solid 3px black; top: 0; right: 0; z-index: 5000; padding: 10px; }
#iewarning.hide { display: none; }

/* Form validation */
form { border: solid 1px #9A9A9A; margin: 10px; font-family: Arial; height: 100%; }
form.inline { border: none; display:inline;  }
form h3 { background-color: #9A9A9A; border: none; }
form .intro { margin: 0 20px 20px 20px; border-bottom: dotted 1px #CCCCCC; }
form .intro h6 { font-size: 18pt; margin:10px 0 5px 0; font-weight: normal;  }
form .intro div { color: #444444; padding-bottom: 0.5em; margin-bottom: 0.5em; }
form .fields { padding-bottom: 20px;  }
form .fields .field { padding: 5px 0 5px 0; }
form .fields .field.focus { background-color: #FFF7C0; }
form .fields .field label { float: left; width: 125px; text-align: right; padding-right: 0.5em; display: block; height: 1em; font-weight: bold; padding-top: 7px; font-family: Arial; font-size: 11pt; color: #9A9A9A; }
form .fields .field input[type=text], form .fields .field input[type=password], form .fields .field select { font-family: Arial; font-size: 14pt; }
form .fields .field input[type=submit] { margin-left: 131px; font-family: Arial; font-size: 14pt; }
form .fields .field input[type=button] { font-family: Arial; font-size: 14pt; }
form .fields .field .message { margin-left: 10px; background-repeat: no-repeat; background-position: 0 2px; padding-left: 20px; height: 20px; font-size:11pt; font-family: Arial; }
form .fields .field.valid-y .message { color: Green; background-image: url(valid-y.png); }
form .fields .field.valid-n .message { color: Red; background-image: url(valid-n.png); }
form .content { padding: 0 20px 20px 20px; }
form .help { border-top: dashed 1px #CCCCCC; margin: 0 20px 0 20px; padding-top: 0.5em; }
form .help ul li { list-style-type: square; list-style-position: outside; }
form input.search { background: transparent url(http://i.stackoverflow.com/Content/Img/search.png) no-repeat scroll left center; max-width:230px; padding: 3px 3px 3px 16px; margin:0; border: 1px solid #999999; font-family: Trebuchet MS }
form .errmsg { display: block; font-weight: bold; color: Red; }

/* Header, top of the page with logo and guide */
#header { background-color: White; height: 70px; border-bottom: solid 1px #CEDDE4; background: url('bg_header_70px.png'); }
#header a.logo { background-image: url('/content/logo_sprite.png');width:250px;height:70px;display:block;background-position: 0px 0px; }
#header a.logo:hover { background-position: 0px -70px; }
#header div.balloon { background-image: url('balloon_left.png'); background-repeat: no-repeat; height: 70px; }
#header span.balloon { display: block; height: 60px; padding: 7px 0 3px 20px; font-size: 8pt; }
#header td.balloon { background-image: url('balloon_right.png'); width: 18px; }
#account { height:70px; width: 125px; color: White; }
#account.authFalse { background-image: url('account_up.png'); text-align: center; }
#account.authTrue { padding: 4px 10px 0 10px; width: 160px; height: 58px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomright: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; background-color: white; border-color: #79DFF7; border-style: none solid solid solid; border-width: 2px; position: relative; top:-3px; color:Black; }
#account.up span { display: block; padding-top: 3px; }
#account a, #account a:visited { color: #0d9ddb; text-decoration: none; }
#account.authFalse a, #account.authFalse a:visited { color: White; }
#account a:hover { text-decoration: underline; color: #ff4a09; }
#account ul { margin:0; padding:0; padding-top: 2px; }
#account ul li {  }
#account ul li.coins, #account ul li.cards { display: inline; }
#account ul li.coins strong, #account ul li.cards strong { font-weight: normal; color: #FF4A09; }
#account ul li.coins:after { content: "c"; }
#account ul li.cards:after { content: "w"; }
#account ul li.links { text-align: right; list-style-type: none; padding-top: 1em;}
#account .links { font-family: Arial; }
#account.authFalse .score { margin-top: 15px; color: Black; }
#account.authFalse .score .promo { color: #5f5f5f; font-weight: normal; font-size: 8pt; }
#account.authFalse .score .coins { color: #FF4A09; font-weight: bold; }

/* Login/Join */
#padding { height: 425px; }
#leftbox { position: absolute; left: 0px; top: 0px; height: 400px; width: 475px; }
#rightbox { position: absolute; right: 0px; top: 0px; height: 400px; width: 475px; }
#separator { position: absolute; left: 465px; top: 0px; height: 400px; width: 70px; }
#or { text-align: center; padding-top: 190px; font-family: Arial; font-size: 18pt; font-style: italic; }
#leftbox div.help { position: absolute; bottom: 0px; width: 425px; left: 0px; }
#rightbox div.help { position: absolute; bottom: -13px; width: 425px; right: 0px; }


/* Navbar, directly below the header with important news and navigation */
#navbar .wrapper { background-color: #CEDDE4; }
#navbar strong { color: #ff4a09; }
#navbar .wrapper div { padding: 5px 0 8px 5px; }
#navbar ul { list-style-type: none; list-style-position: outside; list-style-image: none; margin:0; padding: 0; font-size: 12pt; font-weight: bold; font-family: Trebuchet MS; float: right; position: relative; top: -25px;}
#navbar ul li { display: inline; border-left: solid 1px #999999; margin-left: 0; margin-right: 0; padding-left: 0; padding-left: 8px;}
#navbar ul li.on a { color: #ff4a09; }
#navbar ul li.last { padding-right: 16px; }
#navbar ul li.primary { background-color: #0d9ddb; padding: 1px 8px 1px 8px; border: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
#navbar ul li.primary a { color: White;  }
#navbar a { text-decoration: none; color: Black;  }
#navbar a:hover { background-color: White; }
#navbar ul li.primary a:hover { background-color: Transparent; }
#navbar ul li.primary:hover { background-color: #ff4a09; }
#navbar ul li.on a:hover { background-color: Transparent; }
.ie #navbar { height: 17px; }

/* Billboard, used to show highlights */
#billboard { background-image: url('bg_billboard.jpg'); height: 158px; background-repeat: no-repeat; background-position: 10px 10px; padding:  85px 15px 15px 15px; font-family: Trebuchet MS; }
#billboard h1 { color: #333333; font-size: 41pt; font-weight: bold; padding:0; margin: 0; letter-spacing:-2px; position: absolute; top: 13px; left: 230px;  }
#billboard h2 { font-size: 18pt; font-weight: normal; padding:0; margin:0 0 15px 40px; color: #393939; background-color: Transparent; border: none; }
#billboard h3 { font-size: 14pt; font-weight: normal; padding:0; margin:0 0 0 225px; color: #6A6A6A; background-color: Transparent; border: none; background-image: url('icon_arrow_7F6CA7.png'); background-repeat: no-repeat; background-position: 0 4px; padding-left: 20px; }
#billboard h3 strong { color: #7F6CA7; font-weight: normal; text-decoration: underline; }
#playbutton { background-color: #ff4a09; color: White; padding: 10px 10px 10px 10px; text-align:center; font-size: 16pt; font-family: Trebuchet MS; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 80px; height: 30px; display: block; position:relative; top:-31px; left:590px;}
#playbutton:hover { border: solid 4px #ff4a09; background-color: white; color: #ff4a09; text-decoration: underline; width: 72px; height: 26px; padding-top: 6px; text-decoration: none; }
#joinbutton { background-color: #E90085; color: White; padding: 5px 10px 10px 10px; text-align:center; font-size: 12pt; font-family: Trebuchet MS; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 80px; height: 18px; display: block; position:relative; top:10px; left:480px;}
#joinbutton:hover { border: solid 4px #E90085; background-color: white; color: #E90085; text-decoration: underline; width: 72px; height: 13px; padding-top: 2px; text-decoration: none; }
#learnbutton { background-color: #7F6CA7; color: White; padding: 5px 10px 10px 10px; text-align:center; font-size: 12pt; font-family: Trebuchet MS; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 80px; height: 18px; display: block; position:relative; top:43px; left:375px; letter-spacing: -0.5px; }
#learnbutton:hover { border: solid 4px #7F6CA7; background-color: white; color: #7F6CA7; text-decoration: underline; width: 72px; height: 13px; padding-top: 2px; text-decoration: none; letter-spacing: -0.5px; }
.chrome #learnbutton, .chrome #learnbutton:hover { letter-spacing: -1px; }
.btn1 { background-color: #ff4a09; color: White; text-align:center; font-family: Trebuchet MS; text-decoration: none; -moz-border-radius: 4px; display: block; }
.btn1:hover { border: solid 4px #ff4a09; background-color: white; color: #ff4a09; text-decoration: underline; text-decoration: none; }

/* Advertising, including house ads */
.ads.homepage { clear: both; padding: 20px;  }
.ads.homepage .left { float: left;  }
.ads.homepage .right { float: right; }
.homepage-ad-clear { clear: both; height: 20px; }
div.ad { border: solid 1px #7f7f7e; }
div.au468x60 { width: 468px; height: 60px; }

/* Footer at the bottom of the page, but not including the legal bar */
#footer { width: 1000px; background-image: url('bg_footer.png'); background-repeat: repeat-y; background-color: #000100; color: #7f7f7e; font-family: "Lucida Grande", Verdana, Arial, Sans-Serif; font-size: 10pt; overflow: auto; padding-top: 10px; }
#footer a { color: #7f7f7e; text-decoration: none; }
#footer a:hover { color: White; text-decoration: underline; }
#footer .column { display: block; float: left; padding-left: 30px;  position: relative; width: 20%; }
#footer .column.last { background-image: url('footer_divider.png'); background-position: 10px 0; background-repeat: no-repeat; width: 25%; }
#footer h4 { color: #cef2ff; color: White; margin: 0; padding: 0; font-family: Trebuchet MS; font-size: 16pt; }
#footer h5 { color: #cef2ff; color: White; margin: 0; padding: 0; font-family: "Lucida Grande", Verdana, Arial, Sans-Serif; font-size: 10pt; padding-top: 1em; }
#footer textarea { background-color: #4a4b4a; margin:0;padding:0; color:White; font-family: "Lucida Grande", Verdana, Arial, Sans-Serif; font-size: 10pt; width: 250px; }
#footer input { background-color: #4a4b4a; border: solid 2px #f8f8f8; margin-left: 191px; color: White; border-top-width: 0; }
#footer ul { list-style-type: none; padding-left: 30px; line-height: 150%; margin-left: 0px; }
#footer ul.careers { list-style-type: square; padding-left: 15px; }
#footer ul.aboutus { background-image: url('abstract_bar.png'); position: 0 0; background-repeat: no-repeat;  } #footer ul.aboutus li { line-height: 200%; }
#footer ul.forum { line-height: 100%; padding: 0; } #footer ul.forum li { background:url('abstract04.png') top left no-repeat; padding-left: 28px; list-style: none; margin-bottom: 1em; }

/* Legal includes copyright information and other such goodies. */ 
#legal { width: 1000px; background-image: url('bg_legal.png'); background-repeat: repeat-y; background-color: #1c1d1c; color: #9ea7a7; padding: 3px 0px 4px 0px; }
#legal small { font-family: "Lucida Grande", Verdana, Arial, Sans-Serif; font-size: 9px; display: block; padding-left: 30px; }
#legal small a, #legal small a:visited { color: White; }

/* Subnavigation */
#subnav { list-style-image: none; list-style-position: outside; list-style-type: none; margin:0; padding:0; width: 1000px; }
#subnav li { display: block; float: left; margin:0; padding:0; }
#subnav a { height: 28px; width: 125px; }
#subnav.user { background-image: url('bg_subnav_user_nocolor.png'); width: 1000px; height: 28px; display: block; } 
#subnav.user a { background: transparent url('bg_subnav_user_nocolor.png') no-repeat scroll 0 0; display: block; text-indent: -2100px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium; }
#subnav.user li.t1 a { background-position: 0 0; }
#subnav.user li.t2 a { background-position: -125px 0; }
#subnav.user li.t3 a { background-position: -250px 0; }
#subnav.user li.t4 a { background-position: -375px 0; }
#subnav.user li.t5 a { background-position: -500px 0; }
#subnav.user li.t6 a { background-position: -625px 0; }
#subnav.user li.t7 a { background-position: -750px 0; }
#subnav.user li.t8 a { background-position: -875px 0; }
#subnav.user li.t1 a:hover { background-position: 0 -28px; }
#subnav.user li.t2 a:hover { background-position: -125px -28px; }
#subnav.user li.t3 a:hover { background-position: -250px -28px; }
#subnav.user li.t4 a:hover { background-position: -375px -28px; }
#subnav.user li.t5 a:hover { background-position: -500px -28px; }
#subnav.user li.t6 a:hover { background-position: -625px -28px; }
#subnav.user li.t7 a:hover { background-position: -750px -28px; }
#subnav.user li.t8 a:hover { background-position: -875px -28px; }
#subnav.user li.t1.on a { background-position: 0 -56px; }
#subnav.user li.t2.on a { background-position: -125px -56px; }
#subnav.user li.t3.on a { background-position: -250px -56px; }
#subnav.user li.t4.on a { background-position: -375px -56px; }
#subnav.user li.t5.on a { background-position: -500px -56px; }
#subnav.user li.t6.on a { background-position: -625px -56px; }
#subnav.user li.t7.on a { background-position: -750px -56px; }
#subnav.user li.t8.on a { background-position: -875px -56px; }
ul.subnav { margin: 0; padding: 2px 0 0 0; width: 100%; height: 24px; background-color: #5F5F5F; color: White; font-family: Trebuchet MS; font-size: 12pt; }
ul.subnav li { margin: 0 15px 0 0; padding: 0 5px; float: left; display: block; }
ul.subnav li a { color: White; text-decoration: none; }
ul.subnav li:hover { background-color: White; }
ul.subnav li:hover a { color: Black; }

/* Home page */
#hpguides, #hplb { height: 445px; }
#hpguides div.body, #hplb div.body { height: 365px; }

/* Prizes pages */
#prizes #promo { background-color: #5f5f5f; color: White; text-align: left; padding: 25px; height: 50px; }
.ie #prizes #promo { margin-top: 15px; }
#prizes #promo h1 { font-family: Trebuchet MS; font-size: 28pt; margin:0; border: none; }
#prizes #promo h1 a { color: White; text-decoration: none; }
#prizes #promo h1 a:hover { color: White; border-bottom: dotted 1px white; }
#prizes #promo h2 { background-color: White; -moz-border-radius: 10px; -webkit-border-radius: 10px; color: Black; width: 150px; height: 50px; position: relative; top: -58px; left: 795px; font-family: Trebuchet MS; font-size: 14pt;}
#prizes #balance { display: block; background-image: url('/content/icon_coins_trans_24px.png'); background-repeat: no-repeat; padding-left: 30px; }
#prizes ul.carousel li { width: 165px; height: 225px; background-color: White; border: solid 1px #dcdcdc; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 0; text-align: center; cursor: pointer;  }
#prizes ul.carousel li div.top { padding: 5px; }
#prizes ul.carousel li div.bottom { padding: 5px; height: 105px; }
#prizes ul.carousel li.hover { border: solid 2px #5f5f5f; width: 163px; height: 223px; -moz-border-radius: 0px; -webkit-border-radius: 0px;}
#prizes ul.carousel li.hover div.top { padding-top: 4px;  }
#prizes ul.carousel li.hover div.bottom { background-color: #efefef; padding: 5px 4px 5px 4px; height: 104px; }
#prizes .prize h2, #prizes .prize h3, #prizes .prize h4 { background-color: Transparent; border: none; color: Black; margin:0;padding:0; }
#prizes .prize h2 { color: #0d9ddb; line-height: 1em; padding-bottom: 5px; }
#prizes .prize h3 { font-family: Arial; font-weight: normal; color: #5f5f5f; }
#prizes .prize h4 { font-family: Arial; }
#prizes label { font-family: Trebuchet MS; color: #ff4a09; font-size: 18pt; font-weight: bold; position: relative; top: 10px; left: 10px; }
#prizes label span { font-weight: normal; color: #8f8f8f; font-size: 14pt; }
#prizes span.coins { font-weight: bold; color: #DF8B05; }
#prizes #btn { text-align: center; width: 300px; cursor: pointer; font-family: Trebuchet MS; -moz-border-radius: 7px; border: solid 2px #EFEFEF; background-color: #ff4a09; color: White; font-size: 18pt; margin: 5px; padding: 5px 10px; text-align: center; text-decoration: none;  }
#prizes #btn:hover { border: solid 2px #5f5f5f; }
#prizes #btn.go { background-color: #0d9ddb; }
#prizes #btn.disabled { background-color: #EFEFEF; font-style: italic; }
#prizes .prize.redeem img { float: left; margin-right: 25px; }
#prizes .prize.redeem h2 { margin-top: 10px; font-size: 26pt; }
#prizes .links { margin-top: 1em; margin-bottom: 0.5em; text-align: center; }

#prizes #raffle label { color: Black; font-family: Verdana,Helvetica,Sans-Serif; font-size: 10pt; font-weight: bold; left: auto; top: auto; position: static; }
#prizes #raffle form { border: none; height: auto; margin: 0; }

#store .header { background-color: #5f5f5f; color: White; margin-top: 0; }
#store div.leftnav { width: 90px; float: left; padding: 5px; }
#store div.main { width: 890px; float: right; padding: 5px; }
#store ul.departments { padding:0; margin:0; list-style-type: none; }
#store .products .product { width: 175px; padding-right: 25px; float: left; height: 300px; }
#store .products img { border: none; width: 100px; height: 100px; }
#store .products a:hover { font-weight: bold; }
#store .products label { color: #9F9F9F; }
#store .products .product .image { width: 100px; height: 100px;}
#store .products .product .title { font-size: 12pt; padding-top: 0.25em; }
#store .products .product .lede { color: #3C3C3C; padding-top: 6px; }
#store .products .product .lede p { margin:0; padding:0; }
#store .products strong { color: #FF4A09;}

/* Learn page */
#learn #promo { background-color: #5f5f5f; color: White; text-align: center; padding: 25px; }
#learn h1 { font-family: Trebuchet MS; font-size: 28pt; margin:0; }
#learn h2 { font-family: Trebuchet MS; font-size: 18pt; color: #e0e0e0; background-color: Transparent; border: none; font-weight: normal; margin:0; }
#learn h3 { font-family: Trebuchet MS; font-size: 26pt; border: none; background-color: Transparent; line-height: 0.8em; }
#learn h4 { color: #dcdcdc; padding: 0; font-family: Trebuchet MS; font-size: 26pt; border: none; background-color: Transparent; border-bottom: solid 1px #dcdcdc; margin-right: 50px; }
#learn h2 strong { color: White; }
#learn .pods { width: 850px; margin: 0 50px 0 100px; }
#learn .pod { width: 340px; height: 150px; float: left; padding-right: 50px; background-repeat: no-repeat; }
#learn .pod h3 { color: #0d9ddb; padding-left: 60px; }
#learn .pod p { margin-top: 0.4em; padding-left: 62px; width: 300px; }
#learn .cta { font-size: 18pt; font-family: Trebuchet MS; font-weight: bold; margin: 40px 0 10px 50px; text-align: center; }
#learn .pod.cards { background-image: url('bg_learn_cards.png'); }
#learn .pod.coins { background-image: url('bg_learn_coins.png'); }
#learn .pod.prizes { background-image: url('bg_learn_prizes.png'); }
#learn .pod.players { background-image: url('bg_learn_players.png'); }
#learn .pod.badges { background-image: url('bg_learn_badges.png'); clear: none; }
#learn #playnow { display: block; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: solid 2px #e0e0e0; color: White; font-size: 16pt; margin: 0 5px 0 50px; padding: 7px 2px; text-align: center; text-decoration: none; background-color: #ff4a0b; }
#learn #playnow:hover { background-color: #0D9DDB; }
#learn .bottom { clear: both; text-align: center; padding-top: 5em; margin-bottom: 1em; }
/* Learn page badges */
#learn #badges { margin: 10px 25px 10px 25px }
#learn #badges h1 { color: #e0e0e0;  font-size: 16pt; margin-bottom: 15px; border-bottom: dotted 1px #e0e0e0; margin-top: 1em; }
#learn #badges .badge { width: 305px; height: 155px; float: left; }
#learn #badges .badge .medal { width: 75px; height: 150px; float: left; }
#learn #badges .badge .txt { width: 200px; height: 100px; padding-left: 15px; float: left; padding-right: 15px;  }
#learn #badges .badge .txt .info big { font-family: Myriad Pro; font-size: 22pt; font-weight: bold; display: block; line-height:80%; }
#learn #badges .badge .txt .info small { font-size: 12pt; color: #444444; display: block; margin-top: 3px; }
/*
.badge .txt .award { padding-top: 8px; }
.badge .txt .award .player { margin-top: 3px; }
*/
/*
ul.stats { list-style-type: none; padding:0;margin:0; margin-top: 10px;  }
ul.stats li { font-size: 14pt; height: 21px; padding-left: 18px; font-weight: bold; width: 20px; }
ul.stats li.timer { color: #a5a7a6; background: transparent url('icon_timer_16px.png') no-repeat 0 3px; margin-left: 16px; }
ul.stats li.coins { color: #df8b05; background: transparent url('icon_coins_16px.png') no-repeat 0 3px; float: right; margin-right: 21px; }
*/

#browser .cards { background-color: #79dff7; height: 290px; }
#browser .card { background-image: url('bg_card_white_200px.png'); width:190px; height: 270px; font-family: Arial; float:left; padding: 20px 5px 0 5px; cursor:pointer; margin-right: 20px; }
#browser .card h1 { font-size: 14pt; font-weight: bold; margin: 0 10px 0 10px; padding-left: 10px; background: transparent url(genre/1.png) no-repeat -100px -100px; height: 2em; line-height:1em;}
#browser .card h1.g1 { background-image: url(genre/1.png); }
#browser .card h1.g2 { background-image: url(genre/2.png); }
#browser .card h1.g3 { background-image: url(genre/3.png); }
#browser .card h1.g4 { background-image: url(genre/4.png); }
#browser .card h1.g5 { background-image: url(genre/5.png); }
#browser .card h2 { color: #444444; background-color: Transparent; font-size: 10pt; border: none; margin: 0 0 0 15px; }
#browser .card h2 span { color: Black; }
#browser .card ul.stats { list-style-type: none; padding:0;margin:0; margin-top: 4px;  }
#browser .card ul.stats li { font-size: 14pt; height: 21px; padding-left: 18px; font-weight: bold; width: 20px; }
#browser .card ul.stats li.timer { color: #a5a7a6; background: transparent url('icon_timer_16px.png') no-repeat 0 3px; margin-left: 16px; }
#browser .card ul.stats li.coins { color: #df8b05; background: transparent url('icon_coins_16px.png') no-repeat 0 3px; float: right; margin-right: 21px; }
#browser .card .screenshot { padding: 20px 15px 0 17px;  }
#browser .card .screenshot img { border: solid 1px #606060; margin-top: 13px; }
#browser .card .play { font-size: 14pt; margin: 0 18px 0 18px; width: 150px; height: 30px; padding-top: 120px; background-color: Black; color: White; font-weight: bold; text-align: center; position: relative; top: -151px; background: black url('icon_play.png') no-repeat 60px 40px; z-index: 10; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
#browser .card.end { background-image: url('bg_card_D3EF9D_200px.png'); }
#browser .card p { margin: 5px 15px 5px 20px; line-height: 1.1em; }
#browser .card .playbtn { text-align: center; background-color: #E90085; color: White; font-family: Trebuchet MS; font-size: 12pt; height: 25px; width: 75px; padding: 5px 10px; margin-left: 50px; margin-top: 30px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* Pods are used to contain modular content */
.pod { padding: 5px; float: left; }
.pod h2 { border: solid 1px #5F5F5F; }
.pod div.body { border: solid 1px #cedde4; padding: 5px; }
.pod.onethird { width: 34%; }
.pod.twothird { width: 63%; }

div.stats { }
div.stats dl { font-size: 14pt; line-height: 120%; padding: 4px 0 4px 0; }
div.stats dl dt { width: 200px; font-weight: normal; }
div.stats dl dd { font-weight: bold; }
div.stats dl.coins dd  { background: transparent url('icon_coins_24px.png') no-repeat 0 0; color: #df8b05; padding-left: 30px; }
div.stats dl.timer dd  { background: transparent url('icon_timer_24px.png') no-repeat 0 0; color: #a5a7a6; padding-left: 30px; }

ul.cardlist { list-style-type: none; margin:0 20px 50px 20px;padding:0; }
ul.cardlist li.cardlistitem { clear:both; padding: 5px 0 0px 0; margin: 5px 0 0px 0; border-bottom: dotted 1px #cccccc; height: 50px; }
ul.cardlist div.block { float: left; height: 50px; margin-right: 10px; }
ul.cardlist div.fav { width: 32px; height: 16px; background-image: url('icon_fav_on.png'); background-repeat: no-repeat; font-weight: bold; color: #D4A849; padding-top: 24px; font-family: Arial; font-size: 8pt; text-align: center; cursor: pointer;}
ul.cardlist div.fav.off { background-image: url('icon_fav_off.png'); color: #919191; }
ul.cardlist div.title { font-size: 14pt; font-weight: bold; width: 325px; }
ul.cardlist div.subtitle { font-size: 10pt; color: #444444; }
ul.cardlist div.subtitle span { color: Black; font-weight: bold; }
ul.cardlist ul.stats { list-style-type: none; padding:0;margin:0;  }
ul.cardlist ul.stats li { font-size: 14pt; height: 21px; width: 80px;padding-left: 18px; font-weight: bold; float:left; display: block; }
ul.cardlist ul.stats li.timer { color: #a5a7a6; background: transparent url('icon_timer_16px.png') no-repeat 0 3px; }
ul.cardlist ul.stats li.coins { color: #df8b05; background: transparent url('icon_coins_16px.png') no-repeat 0 3px; }
ul.cardlist div.result small { font-size: 8pt; color: #444444; display: block; }
ul.cardlist div.result { font-size: 14pt; background-image: url('icon_played_win.png'); padding-left: 37px; height: 40px; background-repeat: no-repeat;  background-position: 0 3px; width: 175px;}
ul.cardlist div.result.result5 { background-image: url('icon_played_abort.png'); color: #663232; }
ul.cardlist div.result.result4 { background-image: url('icon_played_timeout.png'); color: #444444; }
ul.cardlist div.result.result2 { background-image: url('icon_played_lose.png'); color: #444444; }
ul.cardlist div.result.result1 { color: #00580b; }
ul.cardlist div.block.results { width: 240px; padding-top: 3px; }
ul.cardlist div.results .timer { background-image:url('icon_timer_16px.png'); height: 18px; background-repeat: no-repeat; padding-left: 22px; }
ul.cardlist div.results .coins { background-image:url('icon_coins_16px.png'); height: 18px; background-repeat: no-repeat; padding-left: 22px; }
ul.cardlist div.results .coins strong { font-weight: bold; color: #df8b05; }
ul.cardlist div.playbutton .btn1 { padding: 4px; font-size: 10pt; height: 19px; width:70px;}
ul.cardlist div.playbutton .btn1:hover { height: 15px; width:62px; padding-top: 0px; }

/* Player widget, which shows the main attributes of a player */
.player { cursor: pointer; padding: 3px;  height: 32px; width: 155px; float:left; }
.player:hover { background-color: #E0E0E0; }
.player .pic { float: left; margin-right: 8px;  }
.player .name { height: 14px; line-height: 80%; }
.player .name a { text-decoration: none; font-size: 10pt; }
.player .name a:hover { text-decoration: underline; }
.player .stats { height: 16px; }
.player .coins { font-weight: bold; font-size: 10pt; display: block; float: left; padding-right: 0.5em; color: #df8b05; }
.badges { height: 16px; clear: both; width: 85px; }
.badges span { display: block; padding-left: 16px; height:16px; background-repeat: no-repeat; float: left; letter-spacing: -1px; }
.badges .g { background-image:url('icon_badge_gold_16px.png'); }
.badges .s { background-image:url('icon_badge_silver_16px.png'); }
.badges .b { background-image:url('icon_badge_bronze_16px.png'); }
#account .player:hover { background-color: Transparent; }
#account .player { cursor: default; }

.badge .medal { width: 50px; height: 100px; float: left; }
.badge .txt { width: 250px; height: 100px; padding-left: 15px; float: left;  }
.badge .txt .info big { font-family: Myriad Pro; font-size: 16pt; font-weight: bold; display: block; line-height:80%; }
.badge .txt .info small { font-size: 8pt; color: #444444; display: block; margin-top: 3px; }
.badge .txt .award { padding-top: 8px; }
.badge .txt .award .player { margin-top: 3px; }




/* Guides page */
#guides { padding-top: 25px; }
#guides h1 { font-family: Trebuchet MS; font-size: 26pt; margin: 0 0 0 44px; }
#guides h2 { font-family: Trebuchet MS; color: #777777; font-size: 16pt; margin: 0 0 10px 40px; background-color: Transparent; border: none; }
#guides .columns { clear: both; margin-left: 7px; }
#guides .column { width: 213px; height: 450px; background-color: #e7e7e7; margin: 10px 0 0 10px; text-align: center; padding: 10px; float: left; }
#guides .column:hover { background-color: #c7c5c5; cursor: pointer; }
#guides .column.noclick:hover { background-color: #e7e7e7; cursor: default; }
#guides .column h3 { background-color: Transparent; font-family: Trebuchet MS; font-size: 22pt; color: #0d9dda; border: none; }
#guides .column h3 a { text-decoration: none; }
#guides .column h3 a:hover { color: Black; }
#guides .column .profile { height: 130px; margin-top: 10px; }
#guides .column h4 { margin: 0; }
#guides .column p { margin:0; line-height: 1.25em; margin-top: 1em; }
#guides .column p strong { display: block; color: #0d9dda; }
#guides .lineup { background-image: url('guides_lineup.png'); width: 1000px; height: 300px; clear: both; position: absolute; top: 315px; }
#guides .clear { clear: both; height: 50px; }

#guide { padding: 25px; }
#guide h1 { font-size: 46pt; margin: 0; color: #c7c5c5; font-family: Trebuchet MS; text-align: right; letter-spacing: -1px;  }
#guide div.imgWrapper { float: left; margin: 0 25px 15px 0; }
#guide p { text-align: justify; }
#guide #selector { border-left:1px dashed #C7C5C5;border-bottom:1px dashed #C7C5C5; float:right; height:364px; margin-left:15px; padding-left:15px; width:50px; }
#guide #selector div { margin-bottom: 10px; }

/* Guides listing on the homepage */
#guidelist a { color: Black; text-decoration: none; }
#guidelist img { border: none; }
#guidelist a:hover .pic { background-color: #CEDDE4; }
#guidelist h5 { font-size: 16pt; font-family: Trebuchet MS; font-weight: normal; margin:0; }
#guidelist h6 { font-size: 10pt; font-family: Verdana; font-weight: normal; margin:2px 0 15px 0; font-style: italic; }
#guidelist .pic { width: 50px; float: left; margin-left: 10px; margin-right: 15px; margin-top: 4px; }


/* Badge overlay */
#overlay { background-color: #666666; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 150; opacity: 0.9; }
#badgebox { display: block; height: 420px; left: 564px; top: 151px; width: 420px; margin: 0; padding: 18px 18px 33px 33px; position: absolute; }

/* Public profile */
#profile { }
#profile h1 { background-color: #5f5f5f; color: White; margin:0; padding: 20px; font-family: Trebuchet MS; font-size: 24pt; }
#profile h2 { background-color: Transparent; border-bottom: solid 1px #0d9ddb; color: #0d9ddb; font-family: Trebuchet MS; font-size: 14pt; margin: 0 0 10px 0; padding: 0 0 5px 0; }
#profile div.col { float: left; }
#profile div.col div.pad { margin: 15px; }
#profile div.profile-snapshot { width: 130px; text-align: center; }
#profile div.profile-stats { width: 495px; }
#profile div.profile-badges { width: 350px; }

#profile div.profile-snapshot .profile-pic { border: solid 1px #DCDCDC; background-color: #EFEFEF; padding: 5px 5px 10px 5px; width: 102px; }
#profile div.profile-snapshot .profile-pic img { border: solid 1px #5f5f5f; width: 100px; }
#profile div.profile-snapshot .profile-coins { text-align: right; width: 102px; border: solid 1px #DCDCDC; padding: 5px;}
#profile div.profile-snapshot .profile-coins span.coins { background:transparent url('/content/icon_coins_trans_24px.png') no-repeat scroll 0px 4px; color: #DF8B05; text-align: left; padding-left: 28px; letter-spacing:-1px; font-size: 18pt; width: 100%; display: block; }
#profile div.profile-snapshot .badges { text-align: right; width: 102px; border: solid 1px #DCDCDC; padding: 5px; }

#p2rofile div.coins { background:transparent url('/content/icon_coins_trans_24px.png') no-repeat scroll 0px 4px; color: #DF8B05; text-align: left; padding-left: 24px; letter-spacing:-1px; margin-top: 15px;}
#p2rofile div.coins span.coins { font-size: 20pt; font-weight: bold;  }
#profile dl { font-family: Arial; font-size: 12pt; height: 1.5em; margin:0; padding: 0;}
#profile dt { color: #5f5f5f; display: block; width: 150px; margin-right: 1em; float: left; }
#profile dd { font-weight: bold; float: left; width: 200px; }
#profile dl.smaller dd { width: 125px; }

#favlist { width: 455px }
#favlist td.icon { width: 40px; }
#favlist td.title { width: 305px; }
#favlist td.info { width: 74px; }
#favlist td.action { width: 36px; }

#favlist td.icon div.star { height: 16px; width: 32px; background-image: url('/content/icon_fav_on.png'); background-repeat: no-repeat; color: #D4A849; font-family: Arial; font-weight: bold; text-align: center; padding-top: 24px; }
#favlist td.title a { color: Black; text-decoration: none; }
#favlist td.title h5 { margin: 0; padding: 0; font-size: 14pt; font-weight: bold; letter-spacing: -1px; }
#favlist td.title h6 { margin: 0; padding: 0; color: #444444; font-size: 10pt; font-weight: normal; margin-bottom: 10px; }
#favlist td.title h6 span { color: Black; font-weight: bold; }
#favlist td.info div.timer { width: 38px; font-size: 10pt; background: transparent url('/content/icon_timer_16px.png') no-repeat scroll 0px 1px; color: #6B6B6D; padding-left: 18px; margin:0;  }
#favlist td.info div.coins { width: 38px; text-align: right; font-size: 10pt; background: transparent url('/content/icon_coins_16px.png') no-repeat scroll 0px 1px; color: #DF8B05; padding-left: 18px; margin:0; }
#favlist td.action a { width: 35px; background-color: #FF4A09; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: block; font-family: Trebuchet MS; color: White; text-align: center; height: 27px; text-decoration: none; line-height: .8em; padding-top: 8px; border: solid 1px #FF4A09;}
#favlist td.action a:hover { background-color: White; color: #FF4A09; }


/* My pages */
#mybar h1 { background-color: #5f5f5f; color: White; margin:0; padding: 20px; font-family: Trebuchet MS; font-size: 24pt; }
#my { padding: 10px; clear: left; }
#my table.cards { font-size: 14pt; font-family: Myriad Pro;}
#my table.cards td { padding-right: 1em; }
#my table.cards td.title { font-weight: bold; }
#my table.cards td.url a { color: Black; }

#comingsoon { width: 1000px; height: 600px; background-image: url(stamp_comingsoon.gif); background-repeat: no-repeat; background-position: 50px 100px; opacity:0.5; }

/* Submit a card */
/*
#card { position: absolute; top: 90px; right: 0px; }
#card h1 { font-size: 20pt; font-weight: bold; margin: 10px 0 0 15px; padding:0; background: transparent url(genre/1.png) no-repeat -100px -100px; height: 2em; line-height: 1em;}
#card h2 { font-size: 14pt; font-weight: normal; margin: 0 0 10px 0; padding: 5px 15px 5px 15px;  color: #bbbebd; background-color: Transparent; border: none;}
#card h2 span { color: #444444; font-weight: normal; }
#card .screenshot { padding: 25px 15px 0 15px;  }
#card .screenshot iframe { border: solid 1px #606060; }
#submitcard form { width: 625px; margin-left: 20px; }
#submitcard .field { padding: 5px 10px 5px 10px;  }
#submitcard .field label { display: block; font-size: 14pt; font-family: Trebuchet MS; font-weight: bold; }
#submitcard .field label span { color: #5f5f5f; font-size: 10pt; font-family: Arial; font-weight: normal; padding-left: 2em; }
#submitcard .field input, #submitcard .field textarea { font-family: Arial; font-size: 14pt; color: #5f5f5f; }
#submitcard .field label.rb { font-family: Arial; font-size: 14pt; font-weight: normal; color: #5f5f5f; display: inline; padding-right: 1em; }
#submitcard .field input[type=text] { width: 98%; }
#submitcard .field input.timer { width: 25px; }
#submitcard .field textarea { width: 98%; height: 70px; }
#submitcard p { margin-left: 20px; font-size: 12pt;  }
#submitcard .field.focus { background-color: #fdecb2; }
*/

/* Notifications */
#notifications .band { color:#FFFFFF; font-family:Arial,Helvetica,sans-serif; font-size:130%; font-weight:bold; left:0; letter-spacing:-1px; position:fixed; top:0; width:100%; z-index:100; }
#notifications .band a { color: White; }
#notifications .band .message { background-color:#FF4A09; border-bottom:2px solid #79dff7; padding:7px 0; text-align:center; }
#notifications .band .dismiss a { background-color:#FF4A09; border:2px solid #FFFFFF; color:#FFFFFF; padding-left:5px; padding-right:5px; text-decoration:none; position: absolute; right: 5px; top: 5px; cursor: pointer; }

/* Ajax waiting */
#waiting.pod { text-align: center; }
#waiting.pod .box { background-color: #cedde4; }
#waiting.pod .box .msg { font-size: 14pt; padding: 1em 0 1em 0; }
#waiting.pod .box .icon { background-image: url('/content/waiting_66px_cedde4_ff4a09.gif'); width: 66px; height: 66px; margin-left: 275px; }

/* Facebook connect */
a.fbconnect { text-decoration: none; font-size: 12pt; line-height: 1.1em; font-weight: bold; width: 150px; color: White; background-color: #526DA4; float: left; display: block; padding: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center; }

/* Infoboxes, which are collapsible */
.infobox { -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #CEDDE4; padding: 0 0 15px 64px; margin: 0 0 15px 0; background-image: url('icon_callouts_sprite.png'); background-repeat: no-repeat; background-position: 0 -192px; }
.infobox.exclaim { background-position: 0px -64px;  }
.infobox.question { background-position: 0px 0px;  }
.infobox.check { background-position: 0px -128px;  }
.infobox.empty { background-image: none; padding-left: 15px; background-color: #FF4A09; color: White; }
.infobox h1 { font-size: 12pt; padding:15px 0 0 0; margin: 0; }
.infobox p { margin: 0; padding: 0; }
.infobox a.close { display: block; background-image: url('icon_close_sprite.png'); width: 17px; height: 17px; text-indent: -3000px; float: right; margin: 5px 5px 0 0;  }
.infobox a.close:hover { cursor: pointer; background-position: 0px -17px; }


/*******************************************
 Colors
 #79dff7	Dark card blue
 #b6e7f7	Light card blue
 #ff4a09	Logo orange
 #0d9ddb	Logo blue
 #df8b05	Coin gold
 #a5a7a6	Timer grey
 #5f5f5f	Dark grey
 #cedde4	Slate

 Guides
 #a7294e	Caitlin
 #3a537f	Chip
 #871211	Gordon
 #47514e	Higgins
 #3f5643	Reno
*******************************************/