/* @override http://emazon.imagineindigo.com/css/unbranded-template.css */



/* Live editing in CSSEdit:
   To observe changes to this .css file in a live CSSEdit window, 
   include the full URL (of this .css file) within an @override command 
   (see above).
*/
 
 
body {
	background: #000000 url(/images/bg-image-1.jpg) repeat-y center;
	margin: 0px;
	padding: 0px;
}
 
 
/* @group Page Structure Styles */

div#centered-structure {
	position: relative;
	height: 600px;
	margin-top: -5px;
	width: 880px;
	margin: 0px auto;
	background: url(/images/main-banner-2.png) no-repeat;
}

div#header-structure {
	background-color: #b6bdc6;
	margin: 20px;
}

div#navigation-structure {
	width: 180px;
	position: absolute;
	top: 260px;
	left: 10px;
}

div#page-title-structure {
	position: absolute; 
	width: 690px;
	height: 150px;
	top: 200px;
	left: 200px;
	background: url(/images/effect-heading.png) no-repeat;
}

div#main-content-structure {
	width: 690px;
	padding-bottom: 40px;
	padding-top: 10px;
	margin: 10px;
	position: absolute;
	top: 340px;
	left: 190px;
	background: url(/images/body-bg.png) repeat-y;
}

div#main-content-structure.without-sidepanel {
	padding-bottom: 40px;
}

div#pagelinks-structure {
	background-color: #000000;
	margin: 20px;
}

div#footer-structure {
	background-color: #000000;
	margin: 20px;
}

/* @end page structures */



/* @group Page Title styles */

div#page-title-region {
	margin: 10px;
	height: 150px;
	padding: 1px;
	position: relative;
	color: #b3b366;
	font-family: georgia;
	font-weight: bold;
	font-style: italic;
	letter-spacing: -0.04em;
	visibility: hidden;
}

/*	Note: Page Title Styling

	The page title does not get published with any tags eg:
	<h1>Page Title</h1>
	
	To style the page title, target its containing div eg:
	<div id="page-title-region"> 
	
	The 'containing div' has the page title insertion hook eg:
	<INSERT page-title>
	
*/

div#page-title-region {
	font-size: 45px;
}

/* @end page title styles */



/* @group Main Content Area styles */

div#main-content-area {
}

div#main-content-area.without-sidepanel {
	width: 628px;
	margin: 10px;
	margin-left: 40px;
	padding-bottom: 20px;
	color: #b6bdc6;
	font: 12px verdana;
	border-left: 5px solid #323232;
}

/* @end main content area styles */



/* @group Page Region Styles */

div#header-region {
	background: #586b83;
	margin: 10px;
	padding: 1px;
}
	
div#pagelinks-region {
	margin: 10px;
	padding: 1px;
}

div#footer-region {
	margin: 10px;
	padding: 1px;
}

div#sidepanel-region {
}

/* @end page region styles */



/* @group Absolute positioning & Inman clearing */

/* Background:
   Absolutely positioned elements are taken out of the normal flow
   of a document - as such they take up no space. If they are contained 
   within a parent div it will collapse. The Inman technique (described below)
   is an elegant solution to this problem:
   www.shauninman.com/plete/2006/05/clearance-position-inline-absolute
*/

/* 1. Identify the parent div (which should ONLY contain the 
      absolutely positioned child elements (NO inline elements))
   2. Apply the class="clear_children" to the parent div
   3. Apply the following properties and values:
*/

.clear_children {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

/* 4. Identify the parent div's child elements
   5. Apply a styling class to each eg: class="child1", class="child2"
   6. Set each child's position as follows:
*/

.child1, .child2 {
	position: absolute;
	top: 0;
	left: 0;
}

/* 7. Position each child
   8. The reference for any absolute positioning is the nearest 
      "relatively positioned ancestor" (eg: "clear_children")
   9. Use ONLY the "top" and "left" properties to position each child:
*/

.child1 {
	top: 10px;
	left: 10px;
	width: 452px;
	margin-bottom: 10px;
}

.child2 {
	top: 10px;
	left: 475px;
	width: 279px;
	margin-bottom: 10px;
}

/* 10. In the template:
		a. Apply the class="cc_tallest" to the tallest child (expected most often)
		b. Just before the </body> tag reference:
           <script type="text/javascript" src="/js/si-clear-children.js"></script> 
   11. The javascript ensures the tallest child has class="cc_tallest"
   12. The styles below make the .cc_tallest child position: relative; 
*/

.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */

/* If the tallest child has a position: relative; then it is still in the normal flow 
   of the document (but offset according to the values ascribed to "top" and "left" 
   properties) and the parent div will not collapse.
*/

/* @end inman position clearing */