/* @override http://demo6.try-indigo.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-color: #dddddd;
}
 
 
/* @group Page Structure Styles */

div#centered-structure {
	border: 1px solid #333333;
	width: 810px;
	margin: 50px auto;
	background-color: #bbbbbb;
}

div#header-structure {
	border: 2px solid #333333;
	background-color: #FFFFFF;
	margin: 20px;
}

div#navigation-structure {
	border: 2px solid #333333;
	background-color: #FFFFFF;
	margin: 20px;
}

div#page-title-structure {
	border: 2px solid #333333;
	background-color: #FFFFFF;
	margin: 20px;
}

div#main-content-structure {
	width: 766px;
	border: 2px solid #333333;
	background-color: #FFFFFF;
	padding-bottom: 10px;
	margin: 20px;
}

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

div#pagelinks-structure {
	border: 2px solid #333333;
	background-color: #FFFFFF;
	margin: 20px;
}

div#footer-structure {
	border: 2px solid #333333;
	background-color: #FFFFFF;
	margin: 20px;
}

/* @end page structures */



/* @group Page Title styles */

div#page-title-region {
	border: 1px dashed #CCC;
	margin: 10px;
	padding: 1px;
}

/*	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: 50px;
}

/* @end page title styles */



/* @group Main Content Area styles */

div#main-content-area {
	border: 1px dashed #CCCCCC;
}

div#main-content-area.without-sidepanel {
	width: 744px;
	margin: 10px;
	padding: 1px;
}

/* @end main content area styles */



/* @group Page Region Styles */

div#header-region {
	border: 1px dashed #CCC;
	background: #FFF;
	margin: 10px;
	padding: 1px;
}

div#navigation-region {
	border: 1px dashed #CCC;
	margin: 10px;
	padding: 1px;
}
	
div#pagelinks-region {
	border: 1px dashed #CCC;
	margin: 10px;
	padding: 1px;
}

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

div#sidepanel-region {
	border: 1px dashed #CCCCCC;
}

/* @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 */