/* Body + General styling */
body {
	margin: 0;
	padding: 0;
	text-align: center; /* For IE6 */
	font-size: 62.5%; /* Set 1em = 10px */
	font-family: 'Lucida Sans Unicode', 'Lucida Sans', 'Trebuchet MS', Tahoma, sans-serif;
	background: #494e49 url(/images/background.gif);
	color: #000;	
}

h1, h2, h3, p, form, input, textarea, select, ul, li, ol {
	font-family: 'Lucida Sans Unicode', 'Lucida Sans', 'Trebuchet MS', Tahoma, sans-serif;
}

strong {
	font-weight: bold;
}

a {
	color: #669624;
	text-decoration: none;
}

hr {
	display: none;	
}

#container {
	width: 810px;
	margin: auto;
	text-align: left; /* Reset text-alignment now that IE6 has rendered the box in the middle */	
}

/* Floaty Callout */
.callout {
	margin-left: -8px;
}
	
.callout div {
	float: left;
	background: transparent url(/images/callout-shadow.png);
	padding: 0 2px 2px 0;
	margin-left: 2px;
}
	
.callout h1 {
	background: #dce7ee;
	padding: 4px;
	margin-left: -2px;
	color: #576d7c;
	font-size: 1.1em;
}
	
.callout img {
	float: left;
	clear: both;
	margin-top: -2px;
}

/* The header */
#header {
	background: transparent url(/images/header.png) top left no-repeat;
	width: 820px;
	height: 90px;
	color: #000;
	text-indent: -5000px; /* Offset the header because we have an image */	
}

/* Navigation Links */
#navigation {
	margin-top: -15px;
	padding-top: 15px;
	background: transparent url(/images/navigation.png) top left no-repeat;
	height: 35px;
	text-align: left;
	font-size: 1.5em;
	font-family: "Trebuchet MS", sans-serif;
	font-weight: bold;
	color: #384954;
}

#navigation ul {
	padding: 7px 0 10px 26px;
	list-style: none;
	list-style-image: none;
	display: block;
}

#navigation li {
	display: inline;
	padding: 8px 0 10px 0;
}

#navigation li a {
	text-align: left;
	text-decoration: none;
	color: #384954;
	height: 32px;
	padding: 8px 8px 10px 8px;
	border: 0;
}

#navigation li a:hover, .nav-link-here {
	background: #7592A9;
	color: #dadada;
}

.navigation-red {
	background: transparent url(/images/navigation-red.png) top left no-repeat !important;
	color: #704242 !important;
}

.navigation-red li a {
	color: #704242 !important;
}

.navigation-red li a:hover, .navigation-red li .nav-link-here {
	background: #a97575 !important;
	color: #dadada !important;
}

/* The Content */
#content-container {
	width: 820px;
	background: transparent url(/images/content-tile.png) top left repeat-y;
	color: #000;
	overflow: hidden;
	font-size: 1.3em;
}

#content-left {
	float: left;
	padding: 12px 12px 0 27px;
	width: 523px;
	borderd: 1px #F00 solid;
}

#content-container-forum {
	width: 820px;
	background: transparent url(/images/content-tile-forum.png) top left repeat-y;
	color: #000;
	overflow: hidden;
	font-size: 1.3em;
}

#content-forum {
	padding: 10px 35px 10px 27px;
}


#get-a-steamcard {
	margin: -12px -14px 12px -12px;
	background: #6f8da2 url(/images/get_a_steamcard.png) top left repeat-y;
	padding: 0 0 10px 0;
}

#get-a-steamcard p {
	text-align: center;
	clear: both;
}

.get-a-steamcard-red {
	background: #a05e5e url(/images/get_a_steamcard-red.png) top left repeat-y !important;
}

.get-a-steamcard-red .callout h1 {
	background: #eedcdc;
	color: #7c5757;
}

#content-right {
	z-index: 20;
	float: right;
	padding: 12px 32px 0 7px;
	width: 215px;
	bordser: 1px #F00 solid;
}

#content-right h2 {
	color: #6b93ba;
	font-size: 1.1em;
	letter-spacing: -0.1px;
	border-bottom: 1px #cddbdd solid;
	margin: 10px 0 0px 0;
}


#newly-made {
	margin-left: -3px;
	text-align: center;	
}

#newly-made img {
	padding: 3px;	
}

#twitter-sidebar {
	text-align: center;
	padding-top: 7px;
}

/* Get a steamcard form */

#get-a-steamcard .callout {
	padding-top: 10px;
}


#get-a-steamcard form {
	clear: both;
	padding: 2px 0;
	text-align: center;	
	width: 370px;
	margin: auto;
}

#form-steamid {
	width: 327px;
	height: 20px;
	background: transparent url(/images/form-steamid.png) top left no-repeat;
	border: 0;
	text-align: center;
	font-size: 1.2em;
	color: #252525;
	padding: 6px;
	margin: 0 0 4px 3px;
	float: left;
}

#form-help {
	background: transparent url(/images/form-help.png) top left no-repeat;
	width: 28px;
	height: 32px;
	float: right;
	cursor: help;
}

#form-style {
	width: 296px;
	height: 22px;
	background: #96B4CC url(/images/form-style.png) top left no-repeat;
	border: 0;
	border-left: 1px #5E7485 solid;
	border-right: 1px #6F8AA0 solid;
	padding: 3px 4px 2px 0px;
	text-align: left;
	margin-left: 0px;
	color: #3a5e76;
}

#form-style-container {
	width: 296px;
	float: left;
	height: 18px;
	text-align: left;
}

#steamcard-url,
#steamcard-bbcode {
	width: 357px;
	height: 16px;
	background: transparent url(/images/form-steamid.png) top left no-repeat;
	border: 0;
	text-align: center;
	font-size: 0.9em;
	color: #252525;
	padding: 8px 5px;
	margin: 0 0 4px 0;
}

.get-a-steamcard-result {
	text-align: center;
}

/* The Stylized one! */
.form-style-jquery {
	font-size: 1em;
	float: left;
	width: 286px;
	height: 18px;
	background: transparent url(/images/form-style-drop.png) top left no-repeat;
	border: 0;
	padding: 3px 4px 2px 5px;
	text-align: left;
	cursor: pointer;
	margin-left: 2px;
	color: #3a5e76;
}

div.form-style-jquery-drop {
	float: left;
}

div.form-style-jquery-drop ul {
	position: absolute;
	margin: -2px 0 0 2px;
	width: 292px;
	background: #a9c2d5;
	border: 1px #5E7485 solid;
	color: #3a5e76;
	font-size: 0.9em;
	z-index: 2;
}

}
div.form-style-jquery-drop ul li.selected { 
  background-color: #EAF2FB;
}
div.form-style-jquery-drop ul li.current { 
  background-color: #EAF2FB;
}
div.form-style-jquery-drop ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px 4px;
  cursor:pointer;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
}


#form-submit {
	float: right;
	background: transparent url(/images/form-submit.png) top left no-repeat;
	border: 0;
	width: 71px;
	height: 22px;
}

/* Slidy info box */
#form-help-slider {
	background: #8da4b4;
	display: none;
	clear: both;
	width: 358px;
	margin: auto;
	padding: 5px;
	color: #DAE5EC;
}

#form-help-slider p {
	font-weight: bold;
	color: #FFF;
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 5px;
}

#form-help-slider a {
	color: #FFF;
}

#form-help-slider li {
	list-style-type: decimal;
	list-style-position: inside;
	border-bottom: 1px #9cb2c2 solid;
	padding: 2px 0;
}

#form-help-slider img {
	padding-top: 5px;
}

/* What is a steamcard? */
#steamcard-explanation {
	background: #eef4ee;
	padding: 5px 7px 5px 10px;
	margin: -5px -14px 10px 0;
	color: #414541;
	line-height: 110%;
}

#steamcard-explanation p {
	padding: 5px 0;
}

/* Ads */
.ad-content {
	width: 468px;
	height: 60px;
	background: #E4EBE4;
	margin: auto;
}

.ad-side {
	width: 200px;
	height: 200px;
	background: #F7FEF8;
	margin: auto;
	font-family: 'Lucida Sans Unicode', 'Lucida Sans', 'Trebuchet MS', Tahoma, sans-serif;
}

/* News */
#news {
	padding-top: 0px;
}

#content-left h2 {
	margin: 10px 0 0 0;	
	color: #406140;
	font-size: 1.5em;
	font-family: "Trebuchet MS", sans-serif;
	letter-spacing: -0.5px;
}

.news-item {
	border-bottom: 1px #dde9ec solid;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.news-item-info {
	color: #6b93ba;
	font-size: 0.8em;
	font-weight: bold;
}

.news-item-content {
	color: #6c7a83;
	font-size: 1.0em;
}

/* General forms */
.styled-form fieldset {
	clear: both;
	font-size: 100%;
	border-color: #8AA3B8;
	border-width: 1px 0 0 0;
	border-style: solid none none none;
	padding: 10px;
	margin: 0 0 0 0;
}

.styled-form fieldset legend {
	color: #384954;
	font-weight: bold;
	font-family: "Trebuchet MS", sans-serif;
	margin: 0 0 0 0;
	padding: 0 5px;
}

.styled-form input {
	font-size: 1.1em;
	border: 1px #E4EBE4 solid;
	background: #FFF;
	padding: 2px;
	margin: 0px 0 5px 15px;
}

.styled-form label {
	padding-left: 5px;
}

.styled-form input[type=submit] {
	float: right;
	background: #89A3B7;
	border: 1px #384954 solid;
	color: #FFF;
	font-family: "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	padding: 0 2px;
	margin-top: -20px;
}

div.form-error {
	padding: 3px;
	background: #eedcdc;
	color: #7c5757;
}

span.form-error {
	padding: 3px;
	background: #eedcdc;
	color: #7c5757;
	margin: 2px;
}

/* Table Styles */
table {
	margin: auto;
	border: 1px #C2CFC2 solid;
	background: #FFF;
}

table thead tr th {
	color: #686F68;
	background: #E4EBE4;
	padding: 3px 10px;
}

table tr td {
	padding: 3px 10px;
	background: #F7FEF8;
}

.table-col-even {
	background: #eef6ef !important;
}

.table-col-odd {
	background: #F7FEF8 !important;
}

/* Examples */
#examples {
	overflow: hidden;	
}

#examples h2 {
	color: #669624;
}

.examples-left {
	float: left;
	margin: 0 0 0 30px;
	padding: 0 0 10px 0;
}

.examples-right {
	float: right;
	margin: 0 30px 0 0;
	padding: 0 0 10px 0;
}

.examples-full {
	clear: both;
	text-align: center;
}


/* Footer */
#footer {
	width: 810px;
	height: 30px;
	background: transparent url(/images/footer.png) top left no-repeat;
	font-size: 1.1em;
	color: #1D1F1D;
	text-align: right;
	padding: 20px 0px 10px 0;
	clear: both;
}

#footer-forum {
	width: 810px;
	height: 30px;
	background: transparent url(/images/footer-forum.png) top left no-repeat;
	font-size: 1.1em;
	color: #1D1F1D;
	text-align: right;
	padding: 20px 0px 10px 0;
	clear: both;	
}

#footer p,
#footer-forum p {
	margin-right: 10px;
}