/* Main CSS for FlashGameBlogs.com */

/* COLOR GUIDE

  #f6f6f6 - main background
  #89b4bf - header border
  #e9e9e9 - menu bar background
  #f1f6fc - footer background
  #f0f6fb - entry background
  #6b92b9 - footer text
  #b3cde6 - entry border, footer border
  #dfe8f1 - sidebar border
  #146cc3 - big date text, sidebar title text, link, main border
  #616161 - entry text, sidebar text, menu bar text
  #093057 - visited link
  #57abf1 - hover/active link
  
*/



/* STRUCTURE */

body 
{
  margin: 0;
  padding: 0;
  background: white url("images/blue_bkgrnd.png") repeat-x;
  color: #616161;
  font: 1em arial, sans-serif;
  text-align: center;
}


/* This is a semantically void div that wraps the entire page and allows us to use a graphic that fased in at the bottom of the page. */
#bkgrnd
{
  background: url("images/bkgrnd_btm.png") bottom repeat-x;
}

/* This just wraps the content pieces so we don't have to set all their widths. */ 
#fixed_width
{
  margin: 14px auto;
  width: 780px;
}

#content_pane
{
  margin: 0;
  padding: 7px 0 20px 0;  /* The top padding sets the menu bar down just a bit without causing collapsing margin issues. */
  background: #f6f6f6;
  position: relative;  /* IE hack to make sidebar work */
  border: solid #146cc3;
  border-width: 0 1px;
}



/* HEADER & FOOTER */

#logo
{
  margin: 0; 
  background: url("images/blue_logo.png") center no-repeat;
  height: 179px;
  border: 1px solid #89b4bf;
}

#logo h1
{
  margin: 2em 0;
  font: italic normal bold 3em arial, sans-serif;
  color: #146cc3;
  visibility: hidden;
}

/* Structurally, the menu_bar is inside the content_pane so it can share a background. Conceptually, we regard it as part of the page header. */

#menu_bar
{
  margin: 0;
  padding: 0;
  background: #e9e9e9;
  color: #616161;
  text-align: center; 
  font-size: small;
}

#menu_bar form 
{ 
  margin: 0;
  padding: 0;
}

#menu_bar ul
{
  list-style-type: none; 
  list-style-image: none; 
  margin: 0 .5em 0 0; 
  padding: 0;
}

#menu_bar li { 
  display: inline; 
  padding: 0 .4em;
}

#footer
{
  margin: 0;
  padding: 0 2em;
  background: #f1f6fc;
  color: #6b92b9;
  text-align: right;
  border-left: 1px solid #146cc3; 
  border-right: 1px solid #146cc3; 
  border-top: 1px solid #b3cde6; 
  border-bottom: 1px solid #b3cde6; 
}



/* SIDEBAR */

/* The sidebar takes up a total of 200px in width. */

.sidebar 
{
  position: absolute;
  top: 4em;
  right: 0;
  width: 169px;
  border-left: 1px solid #dfe8f1;
  font-size: 75%;
  text-align: left;
  padding: 15px;
  background: #f6f6f6;
}

.sidebar p
{
  margin: 0 0 1em 0;
}

.sidebar h2 
{
  margin: 1em 0 0.5em 0;
  padding: 0;
  font-size: medium;
  color: #146cc3;
}

.sidebar ul
{
  list-style-type: none; 
  list-style-image: none; 
  margin: 0 0 0 1em; 
  padding: 0;
}

.sidebar li
{
  margin: 0; 
  padding: 0;
}


.sidebar .message:hover 
{
  cursor: help;
  text-decoration: line-through;
}

.amazoncontent 
{
  margin: 0 0 3em 1em;     
  padding: 0;     
  text-align:left;     
  font-size: x-small;     
  position:relative;     
  overflow:hidden; 
} 

.amazonimage 
{     
  height:110px;
  margin:2px 0px;
  padding-top:7px; 
} 

#footer.short
{
  text-align: left;
}


/* MAIN CONTENT */

.dategroup 
{
  width: 541px; 
  margin: 20px 219px 0 18px;
  text-align: left;
  background: url("images/blue_date_tab.png") no-repeat;
}

.dategroup h2
{
  margin: 0.25em 1em 0 1em; 
  color: #146cc3;
}

.entry_top, .entry_btm
{
  height: 11px;
  margin: 0;
  padding: 0;
}


.entry_top
{
  background: url("images/blue_entry_top.png") no-repeat;
}

.entry_btm
{
  margin-bottom: 2em;
  background: url("images/blue_entry_btm.png") bottom no-repeat;
}

.entry
{
  margin: 0;
  padding: 0 1em 1em 1em;
  border-left: 1px solid #b3cde6;
  border-right: 1px solid #b3cde6;
  background: #f0f6fb; 
  border-top: 1px solid transparent; /* This prevents unfortunate extra non-collapsing margins -- no one knows why. */
}

.entry h3 a:link { color: #146cc3; }
.entry h3 a:visited { color: #093057; }
.entry h3 a:hover { color: #57abf1; }
.entry h3 a:active { color: #57abf1; }

.entry h4
{
  margin: 0;
  padding: 0;
  font-size: 80%;
}

.feed_info
{
  margin: 0;
  padding: 0;
  font-size: 80%;
}

.content 
{
  margin: 1em 0 0 0;
}

.content img
{
  margin: 0 10px; 
  padding: 0;
}


/* HISTORY */

.history
{
  border: 3px double white;
  text-align: left;
  padding: 1em;
  margin: 20px 219px 0 18px;
  background: #134c57;
  color: white; 
}

.history h2
{
  margin: 0;
  font-size: medium;
}

.history a:link { color: white; }
.history a:visited { color: white; }
.history a:hover { color: #57abf1; }
.history a:active { color: #57abf1; }

.history_nav
{
  margin: 0;
  margin-bottom: 2em;
}

.history_nav .previous
{
  float: left;
}

.history_nav .next
{
  float: right;
}


/* GENERAL FORMATTING */

a img
{
  border: 0; 
}

a:link { color: #146cc3; }
a:visited { color: #093057; }
a:hover { color: #57abf1; }
a:active { color: #57abf1; }


.embed
{
  font-size: x-small;
}