/* Setup the main containers of the Shuffletime framebar */
#stfb { background-image: url('/content/bg_framebar_70px.png'); height: 70px; width: 100%; z-index: 500;  position: fixed; top: 0; left: 0; }
#stfb .c { position: absolute; top: 0; height: 65px; padding: 2px 3px 0px 3px; border-right: 1px solid  #d9dada; z-index: 501; }
#stfb-me       { left: 0; width: 180px;  }
#stfb-guide    { left: 184px; width: 375px; }
#stfb-card     { left: 560px; width: 245px; } 
#stfb-actions  { left: 815px; width: 113px; } 
#stfb-anon     { left: 815px; width: 113px; } 
#stfb-shuffle  { right: 0px; width: 230px;  }

/* Overrides for IE */
html.ie8 #stfb-anon { border-right: none; }
html.ie8 #stfb-shuffle { position:fixed; }

/* Me */
#stfb-logo { display: block; background-image: url('/content/logo_framebar.png'); height: 26px; width: 159px; background-position: 0 0; text-indent: -2000px; position: absolute; top: 10px; left: 10px; }
#stfb-player { background-color: White; position: absolute; top: 39px; left: 6px; width: 163px; height: 18px; border: solid 1px #DCDCDC; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#stfb-username { display: block; position: absolute; left: 4px; top: 2px; font-weight: bold; }
#stfb-score { display: block; position: absolute; left: 110px; top: 0px; font-weight: bold; color: #DF8B05; width: 50px; text-align: right; font-size: 11pt; }

/* Guide */
#stfb-guide-pic { position: absolute; top: 8px; left: 11px; }
#stfb-guide-pic.community { border: solid 2px #D9DADA }
#stfb-guide-carrot { position: absolute; top: 4px; left: -14px; z-index: 510;}
#stfb-guide-voice { position: absolute; top: 3px; left: 74px; width: 285px; background-color: White; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 8pt; line-height: 11px; padding: 3px 5px 3px 5px; min-height: 54px; z-index: 505; }
#stfb-guide-voice p { margin: 0; }
#stfb-question { position: absolute; top: 0px; left: 63px; width: 285px; font-weight: bold; font-family: Trebuchet MS; letter-spacing: -1px; background-repeat: no-repeat; background-position: -4px 6px; padding-left: 18px; height: 34px; overflow: auto; z-index: 1500 }
#stfb-question.l1 { font-size: 14pt; }
#stfb-question.l2 { font-size: 11pt; line-height: 16px; padding-top: 2px; padding-right: 13px; }
#stfb-form { position: absolute; top: 34px; left: 81px; z-index: 300; }
#stfb-form input { font-family: Arial; font-size: 13pt; }
#stfb-form input[type=text] { width: 190px; }
#stfb-form input[type=submit] { width: 78px; }

/* Card */
#stfb-title { position: absolute; top: 4px; left: 13px; font-weight: bold; font-family: Trebuchet MS; font-size: 13pt; color: #a5a7a6; letter-spacing: -1px; }
#stfb-title abbr { border-bottom: none; }
#stfb-timer { font-family: Arial; position: absolute; top: 24px; left: 0; font-size: 20pt; color: #6b6b6d; font-weight: bold; background-image: url('/content/icon_timer_trans_24px.png'); background-repeat: no-repeat; background-position: 0 4px; padding-left: 28px; letter-spacing: -1px; }
#stfb-coins { font-family: Arial; position: absolute; top: 24px; left: 118px; font-size: 20pt; color: #df8b05; font-weight: bold; background-image: url('/content/icon_coins_trans_24px.png'); background-repeat: no-repeat; background-position: 0 4px; padding-left: 25px; letter-spacing: -1px; }

/* Actions */
#stfb-actions-std { height: 24px; padding-left: 6px; }
#stfb-actions-std a { display: block; float: left; width: 24px; height: 24px; text-indent: -2000px; background-image:url('/content/icon_actions_sprite.png'); }
#stfb-action-favorite { background-position: 0px 0px; }
#stfb-action-discuss  { background-position: 72px 0px; }
#stfb-action-report   { background-position: 48px 0px; }
#stfb-action-share    { background-position: 24px 0px;}
#stfb-action-favorite:hover, #stfb-action-favorite.checked { background-position: 0px 24px; }
#stfb-action-discuss:hover, #stfb-action-discuss.checked   { background-position: 72px 24px; }
#stfb-action-report:hover, #stfb-action-report.checked     { background-position: 48px 24px; }
#stfb-action-share:hover, #stfb-action-share.checked       { background-position: 24px 24px;}
#stfb-actions-pu { border: dashed 1px #D9DADA; height: 32px; padding: 3px; } 
#stfb-actions-pu img { cursor: pointer; }
#stfb-actions-pu img.used { cursor: progress; }

/* Shuffle */
#stfb-shuffle-btn { border: 2px solid white; background-color: #0D9DDB; -moz-border-radius: 10px; -webkit-border-radius: 10px; height: 48px; margin-top: 3px; color: White; font-family: Trebuchet MS; font-size: 27pt; padding-left: 8px; padding-top: 4px; margin-right: 28px; }
#stfb-shuffle-btn a { color: White; text-decoration: none; display: block; margin-top: 1px;}
#stfb-shuffle-btn:hover { background-color: #FF4A0B; }
#stfb-opts { position: absolute; text-indent: -2000px; background-image: url('/content/btn_opts_70px.png'); background-position: -147px -11px; height: 45px; width: 50px; top: 12px; right: 39px; z-index: 600; }
#stfb-opts.on { background-image: url('/content/btn_opts_70px.png'); }
#stfb-go { position: absolute; top: 9px; right: 104px; }
#stfb-minimize-btn { position: absolute; width: 24px; height: 24px; top: 5px; right: 5px; text-indent: -3000px; background-image: url('icon_windowshade_sprite.png'); }
#stfb-minimize-btn:hover { background-position: 0 -24px; cursor: pointer; }
#stfb.minimize-btn.down { background-position: 0 -48px; top: 0px; right: 5px; }
#stfb.minimize-btn.down:hover { background-position: 0 -72px; }
#stfb-shuffle-disabled { padding-right: 28px; }

/* Guide color-coding */
#stfb.Caitlin #stfb-guide-voice { border: 1px solid #923976; }
#stfb.Gordon  #stfb-guide-voice { border: 1px solid #9e2042; }
#stfb.Higgins #stfb-guide-voice { border: 1px solid #68662c; }
#stfb.Chip    #stfb-guide-voice { border: 1px solid #5081a3; }
#stfb.Reno    #stfb-guide-voice { border: 1px solid #444b57; }
#stfb.Bill    #stfb-guide-voice { border: 1px solid #12561d; }
#stfb.Tara    #stfb-guide-voice { border: 1px solid #82415f; }
#stfb.Comm	  #stfb-guide-voice { border: 1px solid #D9DADA; }
#stfb.Caitlin #stfb-question   { background-image: url('/content/icon_challenge_arrow_caitlin.png'); }
#stfb.Gordon  #stfb-question   { background-image: url('/content/icon_challenge_arrow_gordon.png'); }
#stfb.Higgins #stfb-question   { background-image: url('/content/icon_challenge_arrow_higgins.png'); }
#stfb.Chip    #stfb-question   { background-image: url('/content/icon_challenge_arrow_chip.png'); }
#stfb.Reno    #stfb-question   { background-image: url('/content/icon_challenge_arrow_reno.png'); }
#stfb.Bill    #stfb-question   { background-image: url('/content/icon_challenge_arrow_bill.png'); }
#stfb.Tara    #stfb-question   { background-image: url('/content/icon_challenge_arrow_tara.png'); }
#stfb.Comm	  #stfb-question   { background-image: url('/content/icon_challenge_arrow_comm.png'); }    
/* Anon promo */
#stfb-anon span { font-size: 8pt; display: block; line-height: 13px; padding-top: 3px;  }    
#stfb-anon a { font-weight: bold; color: #0D9DDB; }
#stfb-anon a:visited { color: #0D9DDB; }

/* Shuffle options */
#optsToggle { background-image: url(btn_opts_off.png); background-repeat: no-repeat; background-position: 0 -4px;  }
#optsToggle.on { background-image: url(btn_opts_on.png); }
#opts { background-color: #5f5f5f; color: White; position: fixed; top: 58px; right: 32px; height: 570px; width: 280px; z-index: 2000; font-family: Arial; border: solid 2px white; -moz-border-radius: 10px; }
#opts h1 { font-family: Trebuchet MS; font-size: 16pt; margin: 5px 15px 3px 10px; padding: 0 0 3px 0; border-bottom: solid 1px white; }
#opts h2 { margin:0; padding: 2px 0 3px 10px; font-family: Arial; font-size: 13pt; font-weight: normal; }
#opts ul.genres { background-color: White; color: Black; margin: 0 10px 10px 10px; width: 250px; list-style-type: none; padding: 5px 0 5px 5px; height: 78px; }
#opts ul.genres li { width: 113px; height: 24px; float: left; margin-right: 5px; padding-left: 4px; margin-bottom: 3px; }
#opts ul.genres li:hover { background-color: #DCDCDC; cursor: pointer; }
#opts ul.genres li span { display: block; float: left; }
#opts ul.genres li .i { background-image: url('icon_genres_sprite.png'); width: 16px; height: 16px; margin-top: 4px; background-repeat: no-repeat; }
#opts ul.genres li .t { font-family: Trebuchet MS; font-size: 12pt; width: 92px; font-weight: normal; padding-left: 4px; padding-top: 1px; }
#opts ul.genres li.game .i { background-position: 0 0; }
#opts ul.genres li.video .i { background-position: -16px 0; }
#opts ul.genres li.image .i { background-position: -32px 0; }
#opts ul.genres li.article .i { background-position: -48px 0; }
#opts ul.genres li.website .i { background-position: -64px 0; }
#opts ul.genres li.selected { background-color: #0D9DDB; color: White; }
#opts ul.genres li.selected .t { background-image: url('white_checkmark.gif'); background-position: 74px 6px; background-repeat: no-repeat; }
#opts ul.guides { background-color: White; color: Black; margin: 0 10px 10px 10px; width: 255px; list-style-type: none; padding: 5px 0; margin-bottom: 10px; }
#opts ul.guides li { background-repeat: no-repeat; margin: 5px 0; padding: 5px 5px 5px 67px; background-position: 10px 0; height: 40px; }
#opts ul.guides li:hover { background-color: #DCDCDC; cursor: pointer; }
#opts ul.guides li.caitlin { background-image: url(/content/guide/caitlin_nb.png); }
#opts ul.guides li.gordon  { background-image: url(/content/guide/gordon_nb.png); }
#opts ul.guides li.higgins { background-image: url(/content/guide/higgins_nb.png); }
#opts ul.guides li.chip    { background-image: url(/content/guide/chip_nb.png); }
#opts ul.guides li.reno    { background-image: url(/content/guide/reno_nb.png); }
#opts ul.guides li.tara    { background-image: url(/content/guide/tara_nb.png); }
#opts ul.guides li big { display: block; font-family: Trebuchet MS; font-size: 20pt; line-height: 0.8em; }
#opts ul.guides li small { display: block; font-family: Arial; font-size: 8pt; color: #5f5f5f; margin-top: 4px; padding-left: 7px; }
#opts ul.guides li.selected { color: White; background-color: #0D9DDB; }
#opts ul.guides li.selected big, #opts li.selected small { color: White; }
#opts ul.guides li.selected big { background-image: url(white_checkmark.gif); background-position: 160px 5px; background-repeat: no-repeat; }
#opts .help { padding-left: 10px; padding-right: 20px; font-size: 8pt; line-height: 1em; }


/* Sidebar */
#stfb-sidebar { height: 100%; width: 250px; overflow: hidden; position: fixed; top: 70px; right: 0px; z-index: 3000; }

/* The mini framebar */
#stfb-mini { display: block; background-color: #4F4F4F; height: 24px; z-index: 499; width: 100%; position: fixed; top: 0; text-decoration: none; }
#stfb-mini:hover { background-color: #6F6F6F; cursor: pointer; }
#stfb-mini-logo { color: White; font-family: Trebuchet MS; font-size: 12pt; font-weight: bold; padding-left: 5px; }
#stfb-mini-restore { display: block; position: fixed; top: 0px; right: 0px; width: 24px; height: 24px; background-image: url('icon_windowshade_sprite.png'); background-position: 0 -48px; text-indent: 3000px; }
#stfb-mini:hover #stfb-mini-restore { background-position: 0 -72px; }