/*
	MyHobbySite CSS Document
	Copyright (c) 2011 sjmike.com
	CSS document composed by Caleb Appleman
*/

/* Overall HTML elements and page layout */

body {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 12px;
    margin:0;
    padding:0;
	background-color: #787870;
	background-image: url(images/page_bg.jpg);
	background-position: top right;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #403f38;
	min-width: 100%;
	white-space: normal;
	word-wrap: break-word;
}

#wrapper {
	position: relative;
	text-align: left;
	margin: 0;
	margin-right: 330px;
	margin-bottom: 15px;
	width: 100%-330;
	min-height: 800px;
	border-left: 0px solid #403f38; /* Specifying a border for each side fixes a Firefox bug in which the border disappears on large pages */
	border-right: 5px solid #403f38;
	border-bottom: 5px solid #403f38;
	border-top: 0px solid #403f38;
	background-color: #bbb9ac;
	background-image: url(images/wrapper_bg.gif);
	background-repeat: repeat-y;
	color: #403f38;
}

a:link, a:visited, a:active {
	color: #676557;
	text-decoration: underline;
}

a:hover {
	color: #635d1c;
	text-decoration: none;
}

.thumbnail {
	border: 5px solid #797546;
	margin: 5px;
	vertical-align: top;
}

a img, #header img, #navigation_menu img  {
	border: 0px;
}

/* Header and top menu styles */

#header_bg {
    background-color: #1b1c17;
	background-image: url(images/header_bg.gif);
	background-repeat: repeat-x;
	margin: 0px;
}

#header {
    background-color: transparent;
	background-image: url(images/header.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0px;
}

/* Content Styles */

#content {
	margin-left: 177px;
	padding: 18px;
	padding-bottom: 0px;
	width: 100%-36;
	border-left: 0px solid #FFFFFF; /* Specifying a border for each side fixes a Firefox bug in which the border disappears on large pages */
	border-right: 0px solid #FFFFFF;
	border-bottom: 0px solid #FFFFFF;
	border-top: 0px solid #FFFFFF;
	background-color: #bbb9ac;
	background-image: url(images/content_bg.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

p {
	margin-top: 0px;
}

h1 {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 21px;
	color: #403f38;
	margin-top: 0px;
	margin-bottom: 3px;
	text-decoration: none;
}

h2, h2 a:hover, h2 a:visited, h2 a:active, h2 a:link {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 18px;
	color: #797546;
	margin-bottom: 3px;
	text-decoration: none;
}

h3 {
	font-size: 16px;
	color: #403f38;
	margin-top: 0;
	margin-bottom: 2px;
}

h4 {
	margin-top: 0px;
	margin-bottom: 3px;
	font-size: 14px;
	color: #797546;
}

hr {
	color: #797546;
	height: 1px;
}

/* Table styles */

table.content_table {
	background: #c6c0a8;
	border: #403f38 3px solid;
	width: 100%;
	color: #34332a;
}

tr.table_header {
	color: #8b897b;
	font-weight: bold;
	padding: 5px;
	background: #403f38;
}

tr.first_row td {
	background: #c6c0a8;
	color: #34332a;
	padding: 5px;
}

tr.second_row td {
	background: #aba488;
	color: #34332a;
	padding: 5px;
}

tr.first_row td a:link, tr.first_row td a:visited, tr.first_row td a:active, tr.second_row td a:link, tr.second_row td a:visited, tr.second_row td a:active {
	color: #34332a;
	text-decoration: underline;
}

tr.first_row td a:hover, tr.second_row td a:hover {
	color: #635d1c;
	text-decoration: none;
}

tr.row_separator td {
	background: #7a7664;
	color: #dddccb;
	font-weight: bold;
}

tr.row_separator td a:link, tr.row_separator td a:visited, tr.row_separator td a:active, tr.row_separator td a:hover {
	color: #dddccb;
	text-decoration: none;
}

.details {
	font-size: 10px;
	color: #686557;
	text-decoration: none;
	font-style: italic;
}

/* Forms, labels, and buttons */

form {
	margin: 0;
	padding: 0;
}

.forms, .select_forms {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 13px;
	background-color: #c6c0a8;
	border: 1px solid #616056;
	color: #333124;
	font-style: italic;
	padding: 2px;
	margin: 2px;
	margin-left: 0;
}

.select_forms {
	padding: 0;
}

.button {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 13px;
	background-color: #616056;
	border-top: 1px solid #a4a39e;
	border-left: 1px solid #82827a;
	border-right: 1px solid #494841;
	border-bottom: 1px solid #3b3b35;
	color: #cdc9b8;
	margin: 2px;
}

.menu_forms, .menu_select_forms {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 12px;
	background-color: #45443a;
	border: 1px solid #c4c299;
	color: #a2a071;
	font-style: italic;
	padding: 2px;
	margin: 2px;
	margin-left: 0;
}

.menu_select_forms {
	padding: 0;
}

.menu_button {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 12px;
	background-color: #c4c299;
	border-top: 1px solid #dddcc4;
	border-left: 1px solid #d0cfaf;
	border-right: 1px solid #949273;
	border-bottom: 1px solid #78775e;
	color: #45443a;
	margin: 2px;
}

label {
	margin: 2px;
	margin-left: 0;
	color: #6c6754;
	font-weight: bold;
}

/* Breadcrumb links */

.breadcrumb_links {
	display: block;
	font-size: 16px;
	color: #797546;
	margin-bottom: 10px;
	font-weight: bold;
}

.breadcrumb_links a:link, .breadcrumb_links a:visited, .breadcrumb_links a:active {
	color: #797546;
	text-decoration: none;
}

.breadcrumb_links a:hover {
	color: #605d35;
	text-decoration: underline;
}

/* Footer styles */

#footer {
	margin: 0;
	margin-left: 177px;
	padding: 18px;
	padding-bottom: 0px;
	width: 100%-36;
	min-height: 169px;
	color: #616056;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 11px;
	background-color: #bbb9ac;
	/*background-image: url(images/footer_bg.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;*/
	text-align: center;
	vertical-align: middle;
}

#footer a:link, #footer a:visited, #footer a:active {
	color: #616056;
	text-decoration: underline;
}

#footer a:hover {
	color: #45443a;
	text-decoration: none;
}

/* Offline page */

body.offline_body {
	height: 100%;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	margin: 0;
	background-color: #1b1c17;
	background-image: none;
	white-space: normal;
	word-wrap: break-word;
}

.offline {
	background: #bbb9ac;
	border: #403f38 5px solid;
	padding: 10px;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 200px;
}

/* Content blocks */

.content_block {
	background: #c6c0a8;
	background-image: url(images/content_block_bg.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	border: #403f38 3px solid;
	padding: 8px;
	width: 100%-16;
	height: auto;
	color: #34332a;
}

.inner_content_block {
	float: left;
	background: #aba488;
	border: #403f38 1px solid;
	padding: 5px;
	margin: 5px;
	color: #34332a;
}

/* Rating style - uses lists because it's more semantic. No JavaScript required.
All the stars are contained in one matrix to solve rollover delay problems. The background position is shifted to reveal the correct part of the image.
Each rating star is 16px by 16px and the background position is shifted in negative 16px increments.
 Key: B = Blank, O = Orange, G = Green 
B B B B B - (0 0)
G B B B B - (0 -16px)
G G B B B - (0 -32px)
G G G B B - (0 -48px)
G G G G B - (0 -64px)
G G G G G - (0 -80px)
O B B B B - (0 -96px)
O O B B B - (0 -112px)
O O O B B - (0 -128px)
O O O O B - (0 -144px)
O O O O O - (0 -160px) */

.rating{
	width: 80px;
	height: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	background: url(images/ratings.png) no-repeat 0 0;
	float: left;
}

ul.rating:hover {background: none!important;}

ul.rating li {
	cursor: pointer;
	float: left; /* ie5 mac doesn't like it if the list is floated but ie6 does */
	text-indent: -999em; /* hide text */
}

ul.rating li a {
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	text-decoration: none;
	z-index: 200;
}

ul.rating li.one a {left: 0;}
ul.rating li.two a {left: 16px;}
ul.rating li.three a {left: 32px;}
ul.rating li.four a {left: 48px;}
ul.rating li.five a {left: 64px;}

ul.rating li a:hover {
	z-index: 2;
	width: 80px;
	height: 16px;
	overflow: hidden;
	left: 0;
	background: url(images/ratings.png) no-repeat 0 0;
}

ul.rating li.one a:hover {background-position: 0 -96px;}
ul.rating li.two a:hover {background-position: 0 -112px;}
ul.rating li.three a:hover {background-position: 0 -128px;}
ul.rating li.four a:hover {background-position: 0 -144px;}
ul.rating li.five a:hover {background-position: 0 -160px;}

.rated {
  width: 80px;
  height: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  background: url(images/ratings.png) no-repeat 0 0;
  float: left;
}

ul.rated li {
  cursor: auto;
  float: left; /* ie5 mac doesn't like it if the list is floated */
  text-indent: -999em;
}

ul.rated li.one a {left: 0;}
ul.rated li.two a {left: 16px;}
ul.rated li.three a {left: 32px;}
ul.rated li.four a {left: 48px;}
ul.rated li.five a {left: 64px;}

.no_rating {background-position: 0 0;}
.one_rating {background-position: 0 -16px;}
.two_rating {background-position: 0 -32px;}
.three_rating {background-position: 0 -48px;}
.four_rating {background-position: 0 -64px;}
.five_rating {background-position: 0 -80px;}

/* Styles for the navigation menu */

#navigation_menu {
	float: left;
	width: 162px;
	padding: 5px;
	padding-top: 54px;
	background-color: transparent;
	background-image: url(images/menu_bg.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	min-height: 405px;
	text-align: center;
}

.menu {
	background: transparent;
	color: #c4c299;
	width: 100%;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-align: center;
}

.menu a:link, .menu a:visited {
	color: #c4c299;
	text-decoration: none;
	/*background: transparent url(images/menu_link_bg.png);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;*/
	padding: 4px;
}

.menu a:hover {
	color: #8f8d69;
	text-decoration: none;
}

ul.menu {
	list-style-type: none;
}

ul.menu li {
	background: transparent;
	margin-top: 2px;
	margin-bottom: 4px;
}