/* RESET CSS */

/* First blob here is derived from YUI's "reset" CSS file v 2.5.0 */
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}

/* Global modifications to "reset" to make it more typical */
h1,h2,h3,h4,h5,h6{font-weight:bold;}
td { vertical-align: top; padding-right: 3px; padding-bottom: 3px }
input,select { font-size: 90% }
strong { font-weight: bold; }
em { font-style: italic; }
blockquote { margin: 0 5em 0 5em; }
ul,ol { margin: 1em 1em 1em 1.5em; }
ul li { list-style-type: disc; }
ol li { list-style-type: decimal; }

/* Strong and em together work oddly -- a known issue in YUI */
strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }


/* Main CSS */
/* 

The page structure is a simple fixed-width wrapper that contains:
   - the header graphic
   - a complex menu along the top (see menu section below) 
   - a content block
   - and a footer.
The content block has various more-or-less complicated things shoved into it. 
  
*/




/* PAGE STRUCTURE */

html { background: url(/images/zigzag.png); } 

body 
{
  margin: 0;
  padding: 0;
  color: black;
  font: 1em arial, sans-serif;
  text-align: left;
  line-height: 130%;
}

#wrapper
{
  position: relative; /* To allow absolute positioning inside the wrapper in IE. */
  width: 900px;
  margin: 0 auto; /* centered */
  padding: 0;
}

/* The content box contains just the content, no menu or footer. 
   It is used primarily to add padding across all pages. 
   */
   
#content
{
  margin: 0;
  padding: 15px 30px;
  border: 1px solid #cecece;
  border-width: 0 1px;
  background: #fbfbfb;
}

#footer
{
  clear: both;  /* in case we have floaty bits in content */
  margin: 0;
  padding: 5px;
  background: #ddd;
  color: black;
  text-align: right;
  font-size: small;
}
#footer p { margin: 0; }


/* MENU */

#menu {
    cursor: default;
    margin: auto;
    text-align: left;
    background-color: #a00009;/*#f2f2f2;*/
    width: 898px;
    border-bottom: 0px;
    font-size: 13px;
    font-weight: bold;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}
#menu div {
    display: inline-block;
    margin-left: 14px;
    padding: 7px 10px 8px 10px;
    color: #fff;/*#a00009;*/
}
#menu div a {
    color: #fff;/*#a00009;*/
    text-decoration: none;
}
#menu div:hover {
    background: #a00009;
    color: #fff;
}
#menu div a:hover {
    color: #fff;
}
#menu div div {
    position: absolute;
    background: #a00009;
    min-width: 130px;
    font-weight: 200;
    display: none;
    margin-left: -10px;
    margin-top: 8px;
    z-index: 5;
}
#menu div:hover div {
    display: block;
    color: #fff;
    padding: 0px;

}
#menu div:hover a {
    color: #fff;
}
#menu div div a {
    padding: 4px 10px 4px 10px;
    display: block;
    color: #fff;
}
#menu div div a:hover {
    background: #b72720/*#b23237*/;/*#c4373b*/
}
#menu #selected {
    background: #c4373b;
    color: #fff;
}
#menu #selected a {
    color: #fff;
}
#menu #selected div {
    background: #c4373b;
}
#menu #selected div a:hover {
    background: #d95859; /*#d95859*/
}
#red-line {
    width: 900px;
    height: 6px;
    margin: auto;
    background: #a00009;
}

#submenu {
    cursor: default;
    margin: auto;
    text-align: left;
    background-color: #f2f2f2;
    width: 898px;
    border: 1px solid #d0d0d0;
    border-top: 0px;
    border-bottom: 0px;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 0px 5px 0px;
}

#submenu ul
{
    margin: 0;
    padding: 0;
    padding-left: 1.8em;
}

#submenu li
{
  margin: 0 2em 0 0; /* space menu items but on the other side this time */
  padding: 0;
  font-weight: normal;
  display: inline;
}

#submenu a
{
    text-decoration: none;
}

#submenu a.selected
{
    text-decoration: underline;
    font-weight: bold;
}

/* SPECIALIZED (third-tier) MENU */

#specialized_menu
{
    display: inline;
    float: left;
    margin: 1em;
    margin-left: 30px;
    margin-bottom: 2em;
    border: 1px solid gray;
    background: #eee;
    width: 836px;
}

#specialized_menu h2
{
    display: inline;
    text-align: center;
    font-size: small;
    margin: 0 3em 0 1em;
}

#specialized_menu_list
{
    display: inline;
}

#specialized_menu ul
{
    margin: 0;
    padding: 0;
    display: inline;
}

#specialized_menu li
{
    display: inline;
    margin: 0 2em 0 0;
    list-style-type: none;
}

#specialized_menu li.selected
{

}

#specialized_menu a
{
    text-decoration: none;
}

#specialized_menu a.selected
{
    text-decoration: underline;
    font-weight: bold;
}



/* LOGIN  & HEADER ADS */


/* The login info is positioned absolutely so that it appears part of the menu, but it's not really. */
   
#login_info
{
  position: absolute;
  top: 141px;
  right: 10px;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: small;
  color: #fff;
}

#login_info a
{
  color: #fff;
}

a.login_profile:link,
a.login_profile:visited
{
  text-decoration: none;
}
a.login_profile:hover,
a.login_profile:active
{
  text-decoration: underline;
}


/* Similarly, the header ads are positioned absolutely so that they appears part of the header graphic. 
   Each one is carefully positioned pixel-by-pixel!
   */

#topbar_2bee
{
  position: absolute;
  top: 7px;
  right: 0px;
}

#topbar_cellyourflashgame
{
  position: absolute;
  top: 3px;
  right: 0;
}

#topbar_come2play
{
  position: absolute;
  top: 9px;
  right: 0px;
}

#topbar_cpmstar
{
  position: absolute;
  top: 10px;
  right: 0px;
}

#topbar_fizzy
{
  position: absolute;
  top: 0px;
  right: 0px;
}

#topbar_fog
{
  position: absolute;
  top: 9px;
  right: 0px;
}

#topbar_fupa
{
  position: absolute;
  top: 2px;
  right: 0px;
}

#topbar_gamersafe
{
  position: absolute;
  top: 21px;
  right: 0px;
}

#topbar_ourworld
{
  position: absolute;
  top: 0px;
  right: 0px;
}

#topbar_sos
{
  position: absolute;
  top: 24px;
  right: 0px;
}

#topbar_whosegame
{
  position: absolute;
  top: 32px;
  right: 210px;
}

#topbar_whosegame_box
{
  position: absolute;
  top: 20px;
  right: 13px;
}

#topbar_gameschart,
#topbar_youyouwin
{
  position: absolute;
  top: 5px;
  right: 0px;
}

/* FGL Topbar text */

#topbar_fgl
{
  position: absolute;
  top: 5px;
  left: 132px;
}

#topbar_fgl h1
{
    font-size: xx-large;
    margin-bottom: 0;
    padding: 0;
}

#topbar_fgl a:link {text-decoration: none; color: black; }
#topbar_fgl a:visited {text-decoration: none; color: black; }
#topbar_fgl a:active {text-decoration: none; color: black; }
#topbar_fgl a:hover {text-decoration: none; color: black; }

#topbar_fgl p a:link {text-decoration: none; color: gray; }
#topbar_fgl p a:visited {text-decoration: none; color: gray; }
#topbar_fgl p a:active {text-decoration: none; color: gray; }
#topbar_fgl p a:hover {text-decoration: none; color: gray; }


/* OTHER ADS */

table.opportunity-table, 
table.opportunity-table td 
{
  border-collapse: collapse;
  /* border: 1px solid red; */ /* For testing only */
}

table.opportunity-table { width: 100%; }
table.opportunity-table td 
{ 
  width: 50%;
  padding: 1em; 
}

table.opportunity-table td p
{
  margin: 0;
  text-align: left;
  font-size: small;
}
table.opportunity-table td p.kindisoft { padding-left: 120px; }
table.opportunity-table td p.cpmstar-site { width: 310px; }

.ad_forum
{
  float: right;
  margin: 0 0 1em 0;
  padding: 1em;
  border: 1px dotted #cecece;
  text-align: center;
}

.ad_forum_blank
{
  width: 200px;
  height: 120px;
  border: 0;
}





/* INDEX - NOT LOGGED IN */

/* We do all sorts of special things on the index page to make us look good for new potential sign-ups. 
   Most styles use the index_ naming convention to make it clear how special they are. 
   */


/* #index_content replaces the normal #content div on the index page, mainly so we can ignore normal margins and padding. 
   That means we have to replicate the rest of the normal #content CSS and we have to watch our padding on the rest of this page!
   */

#index_content
{
  margin: 0;
  padding: 0;
  background: #fbfbfb;
}


/* We use these columns for different sections on the index page, 
   so they just specify size and shape. */

.index_column
{
  float: left;
  margin: 0;
  padding: 39px; /* IE6 gets annoyed if this is 40px even though there should be enough space */
  width: 368px;
}

#index_content p.index_info
{
  margin: 0;
  padding: 7px 0;
  font-size: small;
}

/* The index_headline div holds big attention-getting headline text. 
   We center the h1 and then manually align the rest of the text to make it look cool.
   */

div.index_headline
{
  margin: 0;
  padding: 20px;
  background: #b10006;
  color: white;
}

div.index_headline h1 
{ 
  margin: 0 0 0.5em 0; 
  text-align: center;
}
div.index_headline p { margin: 0 40px; }

div.index_headline p.start { text-align: left; }
div.index_headline p.middle { text-align: center; }
div.index_headline p.end { text-align: right; }


/* The index_signup div wraps two index_column divs for sponsor and developer signup, 
   mostly so we can have a consistent border and background even though the two columns are different lengths. 
   */
   
div.index_signup
{
  border: 1px solid #cecece;
  border-top: 0;
  background: #fbfbfb url(/images/gradient_72.png) repeat-x bottom left;
}

div.index_signup h2
{
  font-size: 150%;
}

div.index_signup li
{
  list-style-image: url(/images/list_check.png);
  list-style-type: disc;
}

/* The index_sell div represents the rest of the page (i.e. the sell sheet). 
   It contains a bunch of different little boxes, but the main structure is (again) two side-by-side columns.
   */

div.index_sell
{
  border: 1px solid #cecece;
  border-width: 0 1px; 
}

div.index_sell h2 
{
  border-bottom: 1px solid #cecece;
}


/* Block quotes on the index page get the full treatment! Note that the background image is statically sized, 
   so if the quote gets much longer or shorter you may need to change the image itself. 
   */

#index_content blockquote
{
  margin: 0;
  padding: 30px 20px; /* use padding instead of margin so we have space for the quote images */
  background: transparent url(/images/quotes.png) no-repeat top left;
}

#index_content blockquote p
{
  margin: 0;
  text-align: justify;
}

#index_content blockquote p.author
{
  text-align: right;
}


/* We also specialize the rhboxes on the index page. */

#index_totaldeals 
{ 
  float: left;
  width: 180px;
} 

#index_weekdeals 
{ 
  float: right;
  width: 180px;
} 

#index_money 
{ 
  clear: both;
} 

#index_totaldeals,
#index_weekdeals,
#index_money
{
  text-align: center;
  margin: 0 0 20px 0;
}

#index_totaldeals p,
#index_weekdeals p,
#index_money p
{
  margin: 0;
  padding: 0;
  font-size: 250%;
  line-height: 100%;
  font-weight: bold;
  color: green;
}

#index_latest h3
{
  text-align: center;
}

#index_latest img
{
  float: left;
  width: 100px;
  margin-right: 15px;
}

#index_latest p
{
  padding-left: 115px;
}


/* The cute little FGLopedia box is another link displayed as a block. */

a.FGLopediaBox
{
  display: block;
  width: 231px; /* 371px - 40px left padding */
  height: 42px; /* 72px - 30px top/bottom padding */
  margin: 40px 0;
  padding: 15px 0;
  padding-left: 140px; /* to move the text over off the graphic */
  background: white url(/images/FGLopedia.png);
  color: black;
  font-size: 12px; /* set in px since the button can't resize anyway */
  text-decoration: none;
}
a.FGLopediaBox:hover, a.FGLopediaBox:active { background-position:0 -72px; }


/* The cute little FGL FAQ box is another link displayed as a block. */

a.FAQBox
{
  display: block;
  width: 231px; /* 371px - 40px left padding */
  height: 42px; /* 72px - 30px top/bottom padding */
  margin: 40px 0;
  padding: 15px 0;
  padding-left: 140px; /* to move the text over off the graphic */
  background: white url(/images/FGLfaq.png);
  color: black;
  font-size: 12px; /* set in px since the button can't resize anyway */
  text-decoration: none;
}
a.FAQBox:hover, a.FAQBox:active { background-position:0 -72px; }





/* ROUNDED BOX WITH HEADER */

/* These are used all over the site when we want a rounded box with a gradiated header bar. 
   NOTE: You can make variants that set their width as needed, but do not go wider than 
   */

.rhbox, .rhbox_body, .rhbox_head, .rhbox_head h3, .rhbox_body_calendar
{
  background: transparent url(/images/rhbox.png) no-repeat;
} 

.rhbox_red, .rhbox_red h3
{
  background: transparent url(/images/rhbox_red.png) no-repeat;
} 

.rhbox 
{ 
  background-position: bottom right; 
} 

.rhbox_head 
{ 
  background-position: top right; 
} 

.rhbox_head h3 
{ 
  height: 27px; /* height + top/bottom padding > 35px (so the entire 'header' graphic can show) */
  background-position: top left; 
  padding: 8px 15px 0 15px; /* place the text without changing the background placement */
  margin: 0;
  margin-right: 10px; /* to keep background clear of top right corner */
} 

.rhbox_body 
{ 
  background-position: bottom left; 
  margin-right: 10px; /* to keep background clear of bottom right corner */
  padding: 10px 0 10px 10px; /* to keep text off the bottom and away from corners */
} 

.rhbox_body_calendar
{ 
  padding-left: 15px;
} 




/* IMAGES */


a img
{
  border: 0; 
  text-decoration: none;
}

.thumbnail
{
  width: 100px;
  height: 100px;
}

.inline_img
{
  vertical-align: middle;
}

.left_fgl_guy
{
    float: left;
    padding: .5em 1.5em .5em 0;
}

.right_fgl_guy
{
    float: right;
    padding: .5em 1.5em .5em 0;
}




/* FORMS */


form
{
  margin: 0 0 1em 0;
}

fieldset
{
  padding: 1em 1em 1em 1em;
  -moz-border-radius: 8px; 
  -webit-border-radius: 8px;
}


legend
{
  color: #ad1f1d; 
  font-size: large;
  margin-left: -0.1em;
  padding: 0.5em 0;
}


/* Form notes are used to add blocks of callout info to the right side of a form. Example: edit_game */

.form_notes
{
  float: right;
  width: 12em;
  background: #e8e8e8;
  padding: 1em;
  margin-left: 1em;
}

.form_notes h3
{
  color: #ad1f1d; 
  font-size: medium;
  margin-bottom: 0;
}

.form_notes p
{
  margin: 0;
}


/* The wide class is used as a modifier to form_notes. */ 

.wide 
{
  width: 22em;
}

.full_wide
{
  float: left;
  width: 90%;
}

.red_header
{
  color: #ad1f1d; 
  font-size: medium;
}

/* TABLE - SEARCH RESULTS */


/* This is a generic search-results table that is used in many places. */

table.results 
{
  margin: 0 0 2em 0;
  width: 100%;
  text-align: center;
  font-size: small;
}

table.results, table.results tr, table.results th,  table.results td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0.5em;
}

table.results th
{
  background: #dedede url(/images/th_bkgnd.jpg) repeat-x;
  text-align: center;
  font-weight: bold;
}

/* Details popup on the bid table */

.bid_details_popup
{
    display: none;
    position: relative;
    height: auto;
    width: auto;
    padding: 8px;
    border: 1px solid red;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    text-align: left;
    visibility: hidden;
}

/* Note that we use this alternating row color in other table types as well. */

tr.alt
{
  background-color: #eeeeee;
}





/* TABLE - CMS (FGLopedia) Editing */


table.cmsedit 
{
  margin: 0 0 2em 0;
  width: 100%;
  font-size: small;
}

table.cmsedit, table.cmsedit tr, table.cmsedit th,  table.cmsedit td
{
  border: 0px solid #dedede;
  padding: 0.5em;
}

table.cmsedit tr
{
  border-bottom: 1px solid #dedede;
}

table.cmsedit th
{
  background: #dedede url(/images/th_bkgnd.jpg) repeat-x;
  font-weight: bold;
}

/* VIEW - CMS (FGLopedia) Displaying */

.fglopedia table
{
    border-color: gray;
}

.fglopedia td
{
    padding: 4px;
}


/* LOGIN & SIGNUP */


#login .label
{
  width: 6em;
}

#signup .label
{
  width: 15em;
}





/* DASHBOARDS */


/* All three dashboards have the same two-column structure. 
   The dashboard_main div is on the left and wider; 
   the dashboard_sidebar on the right and thinner.
   */

.dashboard_main
{
  float: left;
  width: 550px;
}

.dashboard_sidebar
{
  float: right;
  width: 245px;
}

/* The dashboards make heavy use of the rounded box with header, defined elsewhere. 
   But we do need to specialize them a bit. 
   */

.dashboard_main .rhbox, 
.dashboard_sidebar .rhbox
{
  margin: 20px 0;
}

.dashboard_main .rhbox ul, 
.dashboard_sidebar .rhbox ul
{
  margin: 0;
  padding: 0 0.5em 0.5em 2em; /* we're using ems here since some boxes use small font and some medium */
}

.dashboard_main .rhbox li, 
.dashboard_sidebar .rhbox li
{
  margin: 0;
  padding: 0; 
}



/* Specialized Boxes */


/* Note that the news div sits inside the rhbody div so it's easier for us to set padding without messing up the graphics. */
#news
{
  padding: 15px;
}

.dashboard_sidebar .fakeredbutton_notice { margin: 20px 0; }

#dashboard_search p
{
  margin: 0;
  margin-top: 0.5em;
}


/* Dashboard Games and Bids Tables */

.dashboard_table
{
  margin: 0;
  width: 100%;
  font-size: small;
  text-align: center;
}

.dashboard_table th
{
  font-weight: bold;
}

.dashboard_table td.label, #dashboard_table th.label
{
  text-align: left;
}

.dashboard_table tr.alt
{
  background-color: #eeeeee;
}

/* This is the text under the dashboard table. */

p.dashboard_table
{
  font-size: small;
  text-align: right;
  margin-bottom: 0;
}


/* Spotlights */

.game_spotlight
{
  text-align: center;
}

.game_spotlight h3
{
  text-align: left;
}

.game_spotlight p
{
  text-align: left;
  font-size: small;
}

/* extra specification is neccesary here to override the .dashboard_sidebar .rhbox ul rule above */
.dashboard_sidebar .game_spotlight ul
{
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: small;
  list-style-type: none;
}

.game_spotlight li
{
  list-style-type: none;
}

.game_spotlight p.game_spotlight_view_all
{
  font-size: x-small;
}


/* Special Twune Spotlight */

.game_spotlight ul.twune
{
  margin: 10px;
  padding-left: 15px;
}

.game_spotlight ul.twune li
{
  list-style-type: disc;
}



 



/* EDIT GAME */


.edit_game .label
{
    width: 8em;
}

.edit_game .instructions
{
    font-style: italic;
    font-size: small;
}

.edit_game  .fieldbox
{
    margin-bottom: 1em;
}

.edit_game .swfbox
{
    border: 1px solid gray;
    background-color: #DDD;
    padding: 10px;
    width: 20em;
    height: 10em;
    margin-left: 40px;
}

.edit_game .swfbox h3
{
    text-align: center;
}

.edit_game .swfbox th
{
    padding-right: 10px;
}

.edit_game .swfbox td
{
    font-weight: bold;
}

.edit_game .thumbnailBox
{
    margin-left: 40px;
    width: 20em;
    height: 10em;
}

.edit_game .screenshotBox
{
    margin-left: 40px;
    min-width: 20em;
    min-height: 10em;
}

.edit_game .youtubeBox
{
    margin-left: 20px;
    width: 430px;
    height: 370px;
    border: 1px dotted #ddd;
    padding: 0;
    text-align: center;
}

.edit_game fieldset
{
    margin-left: 2em;
    margin-right: 5em;
}



/* SEARCH */

#search .label
{
  width: 9em;
}

#search h2
{
  margin-bottom: -0.5em;
}

#search p
{
  margin: 0;
  padding: 1em 0 0 0;
}


/* VIEW ACCOUNT */

table.account_info 
{
  margin: 2em 0;
}

table.account_info, table.account_info tr, table.account_info th,  table.account_info td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0 1em;
  font-size: small;
}

table.account_info th
{
  background: #dedede url(/images/th_bkgnd.jpg) repeat-x;
}


td.rejected_game
{
  color: red;
  text-decoration: line-through;
}

td.pending_game
{
  color: green;
  text-decoration: line-through;
}

.newFeatureBox
{
    border: 1px dotted black;
    margin-bottom: 1em;
    /*
    background-image: url(/images/fgl/learned%20a%20tip.png);
    background-repeat: no-repeat;
    padding-left: 150px;
    */
    padding: 1em;
}

#payment_info .label
{
  width: 15em;
}


/* The list of games (in icon form) by this account. */

table.game_list 
{
  margin: 2em 0;
}

table.game_list, table.game_list tr, table.game_list th,  table.game_list td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0 1em;
  font-size: small;
  text-align: center;
}

.level_icons_small
{
  width: 24px;
  height: 24px;
  vertical-align: middle;
}




/* VIEW BIDS */

/* The list of bids uses a results table (above), but adds special row types when needed. */

tr.deadbid td
{
  text-decoration: line-through;
  color: gray;
}

tr.deadbid a
{
  color: gray;
}

tr.wonbid
{
  font-weight: bold;
}

div.callout_box_wide
{
  border: 1px dotted #cecece;
  margin: 0;
  padding: 1em;
  float: right;
  width: 18em;
}

div.starred_bid
{
  border: 1px dotted black;
  background: #fbfbfb url('/images/star_gold.png') no-repeat left; /* very subtle grey gradient, with a star in it */
  padding-left: 40px;
  margin: .5em 0 .5em 0;
}

div.bid_notes
{
    border: 2px dotted #cecece;
    margin: 0;
    padding: 0 1em 0 1em;
}

p.bid_notes_header
{
    margin-top: 0.5em;
    margin-bottom: 0;
    font-size: large;
    color: #ad1f1d;
}



/* VIEW GAMES */

/* Special spacing for the cell that contains a list of vertical buttons. */

td.button_list input
{
  width: 10em;
  margin: 0 1em;
}

.home_game
{
  margin: 2em 0em;
  border: 1px solid #cecece;
  padding: 1em;
  overflow: auto;
}

.home_game_label
{
  width: 8em;
  float: left;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.home_game_value
{
  float: left;
  margin: 0;
  padding: 0;
}


fieldset.swf
{
  text-align: center;
}

table.game_information th
{
  width: 11em;
}

span.rating_reminder
{
  display: none;
  color: red;
}

.viewgame_box
{
  margin-top: 2.5em;
}

#adminApproveGame td
{
  vertical-align: bottom;
}


/* VIEW MY GAMES */

div.my_games_what_now
{
  padding: 1em;
  border: 1px dotted #a20a0d;
}




/* VIEW FIRST IMPRESSIONS */

tr
{
  vertical-align: top;
}


td.comments
{
  text-align: left;
}




/* VIEW MESSAGES */


/* The list of messages uses a results table (above), but it adds a special unread row class for unread messages. */

tr.unreadmessage
{
  font-weight: bold;
  font-size: 105%;
}


/* The e-mail headers table is used when viewing private messages. 
   It encompasses the header info (to, from, date sent, etc). 
   Note the wide margin on the right - to leave room for the proxy callout. */

table.emailheaders, table.emailheaders tr, table.emailheaders th, table.emailheaders td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0.5em;
}

table.emailheaders
{
  margin: 1em 17em 1em 0;
}


/* The proxy callout is displayed if we think the message might contain a hidden bid. */

.proxy_callout
{
  border: 1px dotted #a20a0d;
  margin: 1em 0;
  padding: 1em;
  float: right;
  clear: right;
  width: 13em;
}

.proxy_callout ul
{
  margin: 0;
  padding: 0;
}

.proxy_callout li
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.proxy_button
{
  width: 15em;
}

.emailbody
{
  border: 1px solid #dedede;
  margin: 0;
  padding: 0.5em 1em;
  clear: both;
  /* Style-hack fix */
  overflow: hidden; position: relative;
  /* End Style-hack fix */
}

.emailbody p
{
  margin: 0 0 1em 0 !important;
  padding: 0;
}


/* FORUMS */

/* The forum_list lists all the possible forums in one table.
   It is used at the top level of forums, when you choose a forum. 
   */

#forum_list
{
  position: relative;
  clear: both;
}

#forum_list #hug_top
{
  position: absolute;
  top: -45px; /* sized to fit red button */
  left: 0;
}

#forum_list table 
{
  width: 100%;
  margin: 0 0 15px 0;
}

#forum_list table, 
#forum_list table tr, 
#forum_list table th,  
#forum_list table td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0.5em;
}

#forum_list table th
{
  background: #dedede url(/images/th_bkgnd.jpg) repeat-x;
  font-weight: bold;
  text-align: center;
}

#forum_list table h2, 
#forum_list table p
{
  margin: 0;
  padding: 0;
}

.first_poster_name
{
  font-size: x-small;
  font-weight: normal;
  display: inline;
}

.forum_sig
{
    max-height: 250px;
}

/* The forum display represents a single forum. 
   It lists all the threads in that forums in table form. 
   */

h1.forum_display
{
  margin: 0.5em 0 0.5em 0;
}

p.forum_display
{
  margin: 1em 0 0.5em 0;
}

p.forum_display_restrictions
{
  margin: 1em 0 4em 0;
}


#forum_display
{
  position: relative;
  clear: both;
  margin: 0;
}

#forum_display #hug_top
{
  position: absolute;
  top: -45px; /* sized to fit red button */
  left: 0;
}

#forum_display table.forum 
{
  margin: 0 0 15px 0;
  width: 100%;
  font-size: small;
}

#forum_display table.forum, 
#forum_display table.forum tr, 
#forum_display table.forum th,  
#forum_display table.forum td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0 3px;
}

#forum_display table.forum th
{
  background: #dedede url(/images/th_bkgnd.jpg) repeat-x;
  font-weight: bold;
}

#forum_display table.forum th, 
#forum_display table.forum td
{
  vertical-align: middle;
  height: 27px;
}

#forum_display table.forum td img
{
  vertical-align: middle;
}


/* The forum_thread table represents a single thread of multiple posts. 
   Note that the forum_post tables are nested inside the forum_thread table. 
   */

body.body_forum_thread #content
{
  padding: 15px 20px;
}

table.forum_thread
{
  margin: 0 0 0.5em 0;
  width: 100%;
  text-align: center;
  font-size: small;
}

table.forum_thread, table.forum_thread tr, table.forum_thread th,  table.forum_thread td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0;
}


/* The forum_post table represents a single post nested inside a forum_thread table. */

table.forum_post
{
  width: 856px;
  table-layout: fixed; /* Used to keep long text and wide images from sending the table outside the page. */
}

table.forum_post, table.forum_post tr, table.forum_post th,  table.forum_post td
{
  border: 0;  /* Explicitly turn off borders since we're inside a table with borders. */
}

table.forum_post form
{
  padding: 0;
  display: inline;
}

/* Each cell in the forum_post is labeled with its own class. */

table.forum_post td.thread_poster_info
{
  text-align: center;
  border-right: 1px solid #dedede;
  vertical-align: top;
  width: 153px;
}

table.forum_post td.thread_post
{
  text-align: left; 
  font-size: medium;
  width: 700px;
}

table.forum_post td.thread_post div
{
  padding: 0 5px;
  overflow: auto; /* Adds a scroll bar to any posts with really long text strings or wide images. */
  min-height: 235px;
}

table.forum_post td.thread_post div div
{
  min-height: 0px;  /* because sometimes divs get inside the HTML users upload */
}


table.forum_post td.thread_post div p
{
  margin-bottom: 1em !important;
}


table.forum_post td.forum_commandbar
{
  border-top: 1px solid #dedede;
  color: #aaaaaa;
}

.forum_commandbar a
{
  color: #aaaaaa;
}

tr.unreadpost
{
  font-weight: bold;
  font-size: 100%;
}

table.forum_post .level_icons
{
  margin: 6px 1px 4px 1px;
}

table.forum_post blockquote 
{ 
    background: #DEDEDE url(/images/quote.png) no-repeat 98% 3px;
    margin: 0 5em 0 5em;
    border: 1px solid #999;
    font-style: italic;
    padding: 3px;
    min-height: 4.25em;
}

.tagfix
{
  /* Style-hack fix */
  vertical-align: top;
  clear: both;
  overflow: hidden; position: relative;
  /* End Style-hack fix */
}


.great_post
{
  font-size: larger;
  color: blue;
}


.amazing_post
{
  font-size: larger;
  color: blue;
}


.perfect_post
{
  font-size: larger;
  color: blue;
}




/* Forum Search Page */

h1#forum_search
{
  margin-bottom: 0.5em;
}

h2#forum_search
{
  margin-top: 2em;
}

#search_forum_form_div fieldset
{
  padding-top: 0;
}

table#forum_search_form
{
  margin-bottom: 1em;
}

table#forum_search_form th
{
  padding-top: 0.5em;
  padding-right: 1em;
}

table#forum_search_form td
{
  padding-right: 1em;
}

#show_search_forum_form,
#hide_search_forum_form
{
  font-size: small;
}

table#forum_search_results
{
  text-align: left;
}








/* First Impression Results, inner table embedded in a results table */

table.fi_results
{
  margin: -0.5em;
  width: 100%;
  text-align: left;
  font-size: small;
}

table.fi_results, table.fi_results tr, table.fi_results th,  table.fi_results td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0.5em;
}

table.fi_results th
{
  width: 10em;
  text-align: center;
  font-weight: bold;
}

.fi_results_faux_ht
{
  width: 10em;
}


/* First Impressions order pages */
div.fi_order_helptext
{
    padding: 0.5em;
    margin-bottom: 1em;
    float: left;
    width: 58%;
}

table.fi_order_callout tr
{
    height: 2em;
}

form.fi_order
{
    border: 3px solid #dedede;
    padding: 1em;
}

.fi_rightside
{
    float: right;
    width: 18em;
}

.fi_rightside_callout
{
    border: 1px dotted #cecece;
    padding: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
}




/* BROWSE */

/* This is the outside table that holds the various browse groups in place. */

table.browse
{
  width: 100%;
}

table.browse td
{
  padding: 10px;
  width: 50%;
}

/* And this is a single browse group! */

table.browse_group
{
  width: 100%;
}

table.browse_group td
{
  width: 33%;
  height: 150px;
  padding: 0 5px;
  text-align: center;
}

/* And this is a genre browse group at the bottom. It's special. */

table.browse_genre
{
  width: 100%;
}

table.browse_genre td
{
  width: 20%;
  padding: 0;
}

/* Browse by Screenshot: */

table.screenshot
{
  margin: 0 -10px;
}

table.screenshot td
{
  background: black;
  width: 253px;
  height: 190px;
  border: 10px solid #fbfbfb;
  padding: 10px;
  vertical-align: middle;
}

table.screenshot td img
{
  width: 253px;
}

table.screenshot_wide
{
  margin: 0 -20px;
}

table.screenshot_wide td
{
  background: black;
  width: 369px;
  height: 277px;
  border: 20px solid #fbfbfb;
  padding: 20px;
  vertical-align: middle;
}

table.screenshot_wide td img
{
  width: 369px;
}





/* UBIQUITOUS RED BUTTONS */
/* (These buttons are actually <a> tags with a <span> for the label.) */

/* styles for dynamic and fixed width buttons */
.button, .button2,.buttonFixed{
	background: url(/images/red-btn-left.png) no-repeat top left;
	display: block;
	color: #fff;
	float: left;
	line-height: 22px;
	font-weight: bold;
	padding-left: 5px;
	text-decoration: none;
	padding-right: 7px;
	margin: 3px 2px 5px 0;
}
.button2{
	background: url(/images/red-btn-left2.png) no-repeat top left;
}

.btnNarrow /* this is a mixin that goes with .button or .button2 */
{
	width: 87px;
	text-align: center;
	padding-right: 3px;
}

.btnMedium /* this is a mixin that goes with .button or .button2 */
{
	width: 125px;
	text-align: center;
	padding-right: 3px;
}

.btnWide /* this is a mixin that goes with .button or .button2 */
{
	width: 250px;
	text-align: center;
	padding-right: 3px;
}

.btnEol /* this is a mixin that goes with .button or .button2 */
{
	margin: -6px 2px 5px 0;
}

.buttonFixed{
	width: 150px;
	text-align: center;
}
.button span,.button2 span,.buttonFixed span{
	background: url(/images/red-btn-right.png) no-repeat top right;
	display: block;
	padding: 4px 15px 4px 10px;
	color: #fff;
}
.button2 span{
	background: url(/images/red-btn-right2.png) no-repeat top right;
}
.button:hover,.button2:hover,.buttonFixed:hover{
	background-position: 0 -30px;
}
.button:hover span,.button2:hover span,.buttonFixed:hover span{
	background-position: 100% -30px;
}
.button:active,.button2:active,.buttonFixed:active{
	background-position: 0 -60px;
}
.button:active span,.button2:active span,.buttonFixed:active span{
	background-position: 100% -60px;
}



/* These are the obsolete "candy-like" buttons. Only fakeredbutton_notice is currently in use,
   except by a few crazy developers who used our button styles for their forum signatures.
   Leaving them in for a while to give them time to transition to something better... 

   NOTE: The pixel dimensions encoded in the image names match the original button sizes, but they tended to grow a bit with the effects.
   So don't assume that the image names are exact pixel sizes. 
   */

.fakeredbutton
{
  display: block;
  width: 145px;
  height: 23px;
  background: red url(/images/redbtn_145x22.png) no-repeat;
  color: white;
  font-weight: bold;
  font-size: small;
  text-align: center;
  text-decoration: none;
  padding: 2px 1px 0px 2px;
  margin: 5px 5px 5px 0;
}
.fakeredbutton:link, .fakeredbutton:visited, .fakeredbutton:hover, .fakeredbutton:active { color: white; }
.fakeredbutton:hover, .fakeredbutton:active { background-position:0 -25px; }


.fakeredbutton_narrow
{
  display: block;
  width: 87px;
  height: 23px;
  background: transparent url(/images/redbtn_87x22.png) no-repeat;
  color: white;
  font-weight: bold;
  font-size: small;
  text-align: center;
  text-decoration: none;
  padding: 1px 1px 0px 1px;
  margin: 5px 5px 5px 0;
}
.fakeredbutton_narrow:link, .fakeredbutton_narrow:visited, .fakeredbutton_narrow:hover, .fakeredbutton_narrow:active { color: white; }
.fakeredbutton_narrow:hover, .fakeredbutton_narrow:active { background-position:0 -24px; }


.fakeredbutton_wide
{
  display: block;
  width: 200px;
  height: 23px;
  background: white url(/images/redbtn_200x22.png) no-repeat;
  color: white;
  font-weight: bold;
  font-size: small;
  text-align: center;
  text-decoration: none;
  padding: 1px 1px 0px 1px;
  margin: 5px 5px 5px 0;
}
.fakeredbutton_wide:link, .fakeredbutton_wide:visited, .fakeredbutton_wide:hover, .fakeredbutton_wide:active { color: white; }
.fakeredbutton_wide:hover, .fakeredbutton_wide:active { background-position:0 -24px; }


.fakeredbutton_notice
{
  display: block;
  width: 242px;
  height: 70px;
  background: transparent url(/images/button_red_notice.png) no-repeat;
  color: white;
  font-weight: bold;
  font-size: small;
  text-align: center;
  text-decoration: none;
  padding: 6px 0px 0px 0px;
  margin: 9px 0 0px 0;
}

.fakeredbutton_notice:link, .fakeredbutton_notice:visited, .fakeredbutton_notice:hover, .fakeredbutton_wide:active { color: white; }
.fakeredbutton_notice:hover, .fakeredbutton_notice:active { background-position:0 -76px; }


.fakeredbutton_tall
{
  display: block;
  width: 227px;
  height: 26px; /* 32px - 6px top padding */
  margin: 0;
  padding: 0;
  padding-top: 6px;
  background: #b10006 url(/images/redbtn_225x30.png) no-repeat;
  font-weight: bold;
  font-size: 15px; /* set in px since the button can't resize anyway */
  text-align: center;
  text-decoration: none;
}
.fakeredbutton_tall:link, .fakeredbutton_tall:visited, .fakeredbutton_tall:hover, .fakeredbutton_tall:active { color: white; }
.fakeredbutton_tall:hover, .fakeredbutton_tall:active { background-position:0 -32px; }


input.checkbox
{
  margin: .15em .15em 0 0;
}





/* FGLopedia */

form.fglopedia
{
  margin-top: 1em;
}

table#fglopedia_search
{
  width: 100%;
}

table#fglopedia_search h2
{
  margin: 0.5em 0 0 0;
}

table#fglopedia_search p
{
  margin: 0 0 0.5em 0;
}

.paddedlist
{
    margin-bottom: 0.5em;
}




/* GENERAL FORMATTING */

hr
{
    color: #ccc;
    background-color: #ccc;
    border: 0;
    width: 100%;
    height: 1px;
}

h1
{
  font-size: 125%;
  margin: .5em 0 1.5em 0;
}

h2 { font-size: 100%; }
h3 { font-size: 100%; }

h1 .level_icons
{
  margin: 0 2px 0 2px;
  vertical-align: middle;
}

p { margin: 1em 0; }

a:link { color: black; }
a:visited { color: black; }
a:hover { color: #a20a0d; }
a:active { color: #a20a0d; }

.center
{
  text-align: center;
  margin: inherit auto;
}
.textleft { text-align: left; }
.textright { text-align: right; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.nomargin { margin: 0; }
.small { font-size: small; }
.x-small { font-size: x-small; }
.error { color: red; }
.highlight { color: blue; font-size: larger; }
.note { color: blue; }
.eyecatching { font-size: large; color: red; line-height: 120% }
.alertbox { border: 1px solid #dedede; padding: 10px}
.big_number { font-size: x-large; font-weight: bold; }
.dead { color: gray; }

table.simpletable, table.simpletable tr, table.simpletable th, table.simpletable td
{
  border: 0px solid #dedede;
  padding: 0;
  align: center;
}



.breadcrumb { font-size: small; }
.breadcrumb h1 { display: inline; }

.firstparagraphinfieldset { margin-top: 0; }


/* Things only used in forum posts and other user-generated content */

var
{
  background-color: #eee;
  border: 1px solid #ccc;
  font-family: Monospace;
  font-size: 110%;
}

big
{
  font-size: 130%;
  color: red;
}

h5 /* h5 and h6 are only used in user forum posts */
{
  font-size: 130%;
  font-weight: bold;
  font-family: 'arial';
  padding-top: 1.5em;
}

h6
{
  font-size: 120%;
  font-weight: bold;
  font-style: italic;
  font-family: 'arial';
  padding-top: 1em;
}


.googleKeyword, .adobeKeyword
{
    background-color: #eee;
    border: 1px solid #ccc;
    font-family: Monospace;
    font-size: 110%;
}

.sourceCode
{
    background-color: #eee;
    border: 1px solid #aaa;
    font-family: Monospace;
    font-size: 95%;
    overflow: auto;
    width: 640px;
}


/* Terms of Service */

#tos .label
{
  padding-right: 10px;
}

#tos input.signature
{
  width: 175px;
  border: 1px solid black;
}


/* Recent Game Sales */

.recent_game_sales
{
  margin: 2em 0em;
  border: 1px solid #cecece;
  padding: 1em;
  overflow: auto;
}

.recent_game_sales table.thumb
{
  float: right;
  margin-left: 2em;
}

.recent_game_sales table.thumb td
{
  margin: 2em 0em;
  padding: 1em;
  text-align: center;
}

.recent_game_sales table.stats td
{
  padding: 5px 1em 0 0;
}



/* External Game View */

h1.external_gameshop
{
  clear: both;
  margin: 2em 0 0 0;
}

a.external_gameshop
{
  margin: 1.5em auto;
}

p.external_gameshop
{
  text-align: center;
  font-size: 200%;
  color: blue;
}

p.signup_external
{
  line-height: 200%;
}

td.signup_external
{
  width: 9em;
}


/* Game Shop - Buy */

blockquote.custom
{
  margin-left: 1em;
  padding-left: 1em;
  border-left: 1px solid #cecece;
}

/* Trailers */

div.trailer_channel
{
  clear: both;
  margin-top: 1em;
  padding-bottom: 2em;
  border-bottom: 1px dotted #cecece;
}

div.trailer
{
  margin: 1em 0 2em 0;
}

div.trailer h3
{
  font-size: 90%;
  margin: 1em 0;
}


/* FRIENDS LIST */

.friend_status
{
  text-align: left;
}


/* POLLS */

/* Admin Management */

table#poll_details
{
  width: 100%;
}

table#poll_details th
{
  width: 8em;
}

table#poll_details td
{
  padding-bottom: 1em; 
}

table#poll_list
{
  text-align: left;
}

table#poll_list td
{
  padding: 0.5em 1em 0 1em;
}

table#poll_list td textarea
{
  width: 100%;
  height: 3em;
}

table#poll_list td.cmd { width: 1%; } /* As narrow as possible */
table#poll_list td.cmd a { margin: 0 auto; }

table#poll_list p { margin: 0.5em 0;}

table#poll_list table, 
table#poll_list table tr,
table#poll_list table td
{
  border: 0;
}

table#poll_list table td { padding: 0.25em; }
table#poll_list table td form { display: inline; }


/* Display */

h2.poll
{
  margin: 2em 0 1em 0;
}


.anon_poll { color: maroon; }


ul.poll, ul.poll li
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.poll { margin: 0 2em; }

ul.poll li { padding: 3px 0; }


table.poll
{
  margin: 0 2em;
}

table.poll th, table.poll td
{
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

table.poll td.label
{
  text-align: right;
}

textarea.poll
{
  margin: 0 2em;
  width: 90%;
  height: 4em;
}

/* Rating Form Plugin (user content generated from wysiwyg editor) */

table.rating_form 
{
  margin: 0 0 2em 0;
  width: 100%;
  text-align: center;
  font-size: small;
}

table.rating_form, table.rating_form tr, table.rating_form th,  table.rating_form td
{
  border: 1px solid #dedede;
  border-collapse: collapse;
  padding: 0.5em;
}

table.rating_form th
{
  background: #dedede url(/images/th_bkgnd.jpg) repeat-x;
  text-align: center;
  font-weight: bold;
  width: 1%;
}

td.rating_form_score
{
  width: 1%;
}


/* Generic admin stuff */

#badge_form .label
{
    float: left;
    width: 8em;
}