/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Author: Sean Connors, Web Merchant Services, www.WMSmerchantservices.com
	
	Notes as of 02/16/2009:
	Validated against W3C transitional compliance.
	Tested against IE 7, FF 2 & 3, Google Chrome 1, Opera 9, Safari 3.
	IE6: Because of issues with PNGs transparencies, a seperate style sheet is needed on 
	condition: see ltIE7.css
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
General styling:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body {
	margin: 0;	/* Adjust margins as needed */
	background: #721D00 url(/images/theme/background.jpg) no-repeat fixed top center;
	font: 10px Helvetica, Arial, Sans-Serif; /* Starting with 10px font-size makes it easy to "em" sizes later vis a vis a 10px base. */
											/* That is, if you want a 12px font-size somewhere, just assign 1.2em to get the same size, 
											   while alowing users to expand font sizes to their preference. 
											*/
	color: #fff;
}

img {
	border: 0;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Header styling:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/
#header {
	position: relative;
	height: 101px;
	background: #000 url(/images/theme/header-bg.png) repeat-x top;
	border: 0;
	color: #fff;
}

#header-banner {
	width: 934px;
	margin: auto;
}

#header img {
	display: block;
	margin-left: 80px;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Content Area styling:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#bounding-container {
	position: relative;	/* This is just to assist with any relative positioning or z-indexing below */
	width: 934px;		/* Fixed width */
	margin: auto;		/* Center it */
}

#contents-container {
	margin-top: 30px;
	margin-left: 55px;
}

#contents-col {
	float: right;		/* Here in lies the trick: by floating this and the left colum to the right, they naturally flow in reverse order ;-) */
	width: 600px;		/* The width is also crucial to get things positioned correctly using the float property */
	padding: 0;		
	background: transparent;
}

#contents-top {
	width: 600px;
	height: 68px;
	background: transparent url(/images/theme/content-top.png) no-repeat top center;
}

#contents-top h1 {
	position: relative;
	top: 30px;
	left: 15px;
	width: 490px;
	height: 29px;
	margin: 0;
	padding: 3px 0 0 10px;
	background: transparent url(/images/theme/h1.jpg) no-repeat top center;
	font-size: 2em;
}

#contents-bucket {
	width: 600px;
	min-height: 550px;
	background: transparent url(/images/theme/content-bg.png) repeat-y top center;
	font-size: 1.3em;
}

#contents-content {
	width: 485px;
	padding: 1px 10px 1px 20px;
	text-align: justify;
	/*background: #aaa;*/
}

#contents-content p, #contents-content li {
	font-size: 1.2em;
	line-height: 1.5em;
	font-family: Georgia;
}

#contents-content li {
	padding-bottom: 1.5em;
}

#contents-content ol, #contents-content ul {
	margin-bottom: -1.5em;
}

#contents-content img {
	border: 1px #E88764 solid;
}

#contents-content a {
	color: #FFECCA;
	text-decoration: underline;
}

#contents-content a:hover {
	color: #FFC763;
	text-decoration: underline;
}

#contents-content h2 {
	margin-top: 20px;
	width: 490px;
	height: 24px;
	background: transparent url(/images/theme/h2.png) no-repeat bottom center;
	font-size: 1.5em;
	text-align: left;
}

#contents-content hr {
	width: 490px;
	height: 1px;
	border: 0;
	background: url(/images/theme/h2.png) no-repeat top left;
}

#contents-content #animation {
	width: 488px;
	height: 326px;
	border: 1px #E88764 solid;
}

#contents-content #animation img {
	border: 0;
}

#contents-btm  {
	width: 600px;
	height: 70px;
	background: transparent url(/images/theme/content-bottom.png) no-repeat bottom center;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Navigation Column Styling:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/
#nav-col {
	float: right;		/* Same as with the contents-col div */
	width: 259px;		/* Again, same as above, only if this is changed, remember to change the width of the contents-col */
	background: transparent;
	font-size: 1.3em;
}

/* Top Level Navigation: */
#nav-col ul {
	margin: 0;
	padding: 0;
	list-style:none;
}

#nav-col ul li.top {
	width: 279px;
	height: 34px;
	padding-top: 34px;
	padding-left: 8px;
	position: relative;
	background: transparent url(/images/theme/nav-top.png) no-repeat top left;
}

#nav-col ul li {
	padding-left: 8px;
	position: relative;
	background: transparent url(/images/theme/nav-bg.png) repeat-y top left;
}

#nav-col ul li a {
	display: block;
	height: 20px;
	color: #fff;
	text-decoration: none;
	background: transparent url(/images/theme/link-separation.png) no-repeat bottom left;
	padding: 7px 3px 7px 10px;
	font-size: 1.3em;
	font-weight: bold;
}

#nav-col ul li a:hover {
	background: transparent url(/images/theme/nav-selected.png) no-repeat top left;
	color: #fff;
}

#nav-col ul li.sub a {
	padding-left: 25px;
}

#nav-col ul li.btm {
	width: 279px;
	height: 108px;
	background: transparent url(/images/theme/nav-bottom.png) no-repeat top left;
}

/* Sub Level Navigation: */
#nav-col ul li ul {
	display: none;
	position: absolute;
	z-index: 10;
	width: 279px;
	top: -20px;
	left: 209px;
	background: transparent;
}

#nav-col ul li:hover ul {
	display: block;
}

#nav-col ul li ul li.top {
	padding-top: 21px;
	background: transparent url(/images/theme/sub-nav-top.png) no-repeat top left;
	/*background: transparent url(/images/theme/sub-nav-top-arrow.png) no-repeat top left;*/
}

#nav-col ul li.sub ul li a {
	padding-left: 10px;
	font-size: 1.1em;
}

#nav-col ul li ul li a {
	font-size: 1.1em;
}

#nav-col ul li ul li {
	background: transparent url(/images/theme/sub-nav-bg.png) repeat-y top left;
}

#nav-col ul li ul li a:hover {
	background: transparent url(/images/theme/sub-nav-selected.png) no-repeat top left;
}

#nav-col ul li ul li.btm {
	height: 108px;
	background: transparent url(/images/theme/sub-nav-bottom.png) repeat-y top left;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Footer Styling:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

#footer-wrapper {
	position: relative;
	clear: both;		/* Clear the floats in the above two columns */
	background: #000;
	color: #fff;
}

#footer {
	width: 934px;
	margin: auto;
	padding: 5px;
}

#footer-content {
	width: 520px;
	margin-left: 335px;
	text-align: justify;
	color: #eee;
	font-size: 1.1em;
}

#footer-copyright {
	width: 520px;
	margin-top: 20px;
	margin-left: 335px;
	text-align: center;
	color: #eee;
	font-size: 1.1em;
}

#footer-copyright a {
	color: #eee;
	text-decoration: none;
}

#footer-copyright a:hover {
	color: #fff;
	text-decoration: underline;
}