/*==============================
	GLOBALS
Sets the default document font size, family
and color
===============================*/
body
{
	font-family:Verdana;
	font-size:16px; 
	color:#ffffff;
	background: #0c0c0c;
}
img {
	border:0;
}
a 
{
	color: #683e32;
}
form fieldset {	border: 0; font-size: 12px; }
form fieldset p br { clear: left; }
label {
	margin-top: 5px;
	font-size: 12px;
    display: block;
    width: 100px;
    padding: 0;
    float: left;
}
input {
	font-family: Verdana;
	font-size: 12px;
    border: 1px solid #CCC;
	margin-bottom: 5px;
    background-color: #FFF;
    padding: 2px;
}
input:hover {
	border: 1px solid #222;
    background-color: #EEE;
}
/*==============================
	SITE WRAPPER
===============================*/
.site-wrapper
{
	width:1024px; 
 
	/* min-height lets your site grow vertically 
	(like in tables). */
	min-height:703px; 
 
	/* By setting these to auto you are centering the 
	site */
	margin-left:auto;  
	margin-right:auto; 
 
	border:solid 1px #2f140e; 
}
/*==============================
	HEADER WRAPPER
===============================*/
.header-wrapper
{
	width:1024px; 
	height:103px; 
 
 
	background:url('images/header_bg.gif'); 
 
	/* css lets you designate how you want an image to 
	repeat. Along the x-axis, y-axis or not at all. */
	background-repeat:repeat-x; 
	border-bottom: solid 1px #683e32;
}
/* this sets the position of the title. 
header.gif goes here here */
.header-title
{
	float:left; 
}

/* This sets the position of the menu */
.header-menu
{
	float:right; 
	width:450px; 
	height:54px; 
}
 
/*  The Menu  */
/*Whey you follow a class definition with an html element (such 
as ul) all styles that you apply will only affect that element. 
So for instance, in this case you read it as "apply these 
settings to every ul html element inside every div tag named 
<b>header-menu</b>, but no other."
*/
.header-menu ul
{
	padding:0; 
 
	/* the removes the left margin */
	margin:0;
 
	/* this removes the bullet */
	list-style:none; 
}
.header-menu li.home
{
	float:left; 
	background:url('images/icon_home.gif') 0 -206px no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li.contact
{
	float:left; 
	background:url('images/icon_contact.gif') 0 -206px no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li.links
{
	float:left; 
	background:url('images/icon_links.gif') 0 -206px no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li.about
{
	float:left; 
	background:url('images/icon_about.gif') 0 -206px no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li.support
{
	float:left; 
	background:url('images/icon_support.gif') 0 -206px no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li, li a.home
{
	float:left; 
	background:url('images/icon_home.gif') no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li, li a.home:hover
{
	background-position:0 -103px;
}
.header-menu li, li a.contact
{
	float:left; 
	background:url('images/icon_contact.gif') no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li, li a.contact:hover
{
	background-position:0 -103px;
}
.header-menu li, li a.links
{
	float:left; 
	background:url('images/icon_links.gif') no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li, li a.links:hover
{
	background-position:0 -103px;
}
.header-menu li, li a.about
{
	float:left; 
	background:url('images/icon_about.gif') no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li, li a.about:hover
{
	background-position:0 -103px;
}
.header-menu li, li a.support
{
	float:left; 
	background:url('images/icon_support.gif') no-repeat; 
	width: 110px;
	height: 103px;
}
.header-menu li, li a.support:hover
{
	background-position:0 -103px;
}
/*==============================
		BODY WRAPPER
===============================*/
.body-wrapper
{
	margin-top:3px; 
	background: #353535;
 
 
	/* floats are crucial to the creation of any
	web interface. Every web developer must master
	this concept. Don't worry I'll be writing a
	tutorial about this a little later.	:)	*/
	float:left; 
 
 
	width:1024px; 
	min-height:600px; 
}

/*==============================
	CONTENT-WRAPPER
===============================*/
.content-wrapper
{  
	float:left; 
	width:700px;
	margin-right:5px; 
	padding-left: 10px;
	padding-top: 10px;
}
/*==============================
		PANEL CONTENT
===============================*/
.panel
{ 
	margin-bottom:5px;
	border:solid 1px #663d30;
}
/*The panel content */
.panel_content
{
	padding:4px; 
	padding-left: 10px;
	background:#1a1a1a;
}
/* The panel title */
.panel_title
{	  
	height:18px; 
	font-size:16px; 
	color:#effaff; 
	padding:2px; 
	padding-left:6px; 
	background:url(images/panel_bg.gif)#121212 no-repeat; 
	border-bottom: solid 1px #663d30;
}

/*==============================
	SIDEBAR-WRAPPER
===============================*/
.sidebar-wrapper
{
	float: right;
	width: 284px;
	padding-right: 10px;
	padding-top: 10px;
}
/*==============================
		SIDEBAR CONTENT
===============================*/
.sidebar
{ 
	margin-bottom:5px;
	border:solid 1px #663d30;
}
/*The panel content */
.sidebar_content
{
	padding:4px; 
	padding-left: 10px;
	background:#1a1a1a;
}
.sidebar_content ul
{
	padding-left: 20px;
}
.sidebar_content li
{
	font-size: 14px;
	padding-left: 10px;
}
/* The panel title */
.sidebar_title
{	  
	height:18px; 
	font-size:16px; 
	color:#effaff; 
	padding:2px; 
	padding-left:6px; 
	background:url(images/panel_bg.gif)#121212 no-repeat; 
	border-bottom: solid 1px #663d30;
}
/*==============================
		FOOTER
===============================*/
.footer
{
	/* clears are the sisters to float, it's 
	time to meet the whole family :) */
	clear:left; 
	height:20px; 
	width: 1024px;
	background:url(images/footer.gif); 
}
.loading
{
	float: left;
	padding: 4px;
	font-size:12px;
}
.copyright
{
	float: right;
	padding: 4px;
	font-size:12px;
}