/*-----------------------------------------------------------------------------
 * Default screen CSS
 *---------------------------------------------------------------------------*/

/**
 * Fonts and margins for main body
 */
 
body {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}

/** 
 * Default heading, link, list and para styles
 */
 
h1 {
	color:#BA8647;
	font-size:2em;
}

h2 {
	color:#000;
	font-size:1.4em;
}

h3 {
	color:#BA8647;
	font-size:1.1em;
}

p {
	line-height:1.8em;
}

a {
	color:#000;
}

a:hover {
	color:#F04D26;
}

ul {
	margin:0 0 0 20px;
	padding:0;
}

li {
	padding:2px 0 2px 10px;
	list-style-image:url(../images/bullet.png);
	background-repeat:no-repeat;
}

/* CSS min-height prop */ 
.prop {
	height:550px;
	float:left;
	width:1px;
	border:1px solid red;
}

/**
 * Mast head and repeating background.
 */ 

#masthead {
	background-image:url(../images/header_repeat.png);
	background-repeat:repeat-x;
	height:129px;
}

/**
 * Masthead header image
 */

#header {
	background-image:url(../images/header.png);
	background-repeat:no-repeat;
	height:129px;
	width:750px;
}

/**
 * Main menu positioned within the header.
 */

#menu {
	position:absolute;
	color:#fff;
	padding:85px 0 0 260px;
}

/**
 * Link states for menu anchors.
 */

#menu a {
	color:#fff;
	text-decoration:none;
	padding:0 8px 0 8px;
}

#menu a:hover {
	color:#DDC4A4;
	text-decoration:none;
}

#menu a.on {
	color:#000;
}

/**
 * Main menu flyout menus
 */
 
.flyout {
	display:none;
	position:absolute;
	top:105px;
	left:323px;
	border:1px solid #fff;
	z-index:100;
}

.flyout a {
	display:block;
	width:160px;
	padding:4px 4px 4px 6px;
	font-size:0.8em;
	color:#fff;
	text-decoration:none;
	background-color:#98713D;
	border-top:1px solid #fff;
}

.flyout a:hover {
	color:#98713D;
	background-color:#eee;
}

.flyout a.first {
	border-top:0;
}

/**
 * Main layout bounding box
 */
 
#layout {
	position:relative;
	background-image:url(../images/sidebar_repeat.png);
	background-repeat:repeat-y;
	background-position:right;
	margin:0;
	padding:0;
	width:100%;
}

/**
 * Top and bottom right corner cap, the right positioning here is perfect for IE.
 * We need to use a hack to make the position correct in all other browsers.
 */
 
#topright {
	position:absolute;
	background-image:url(../images/corner_topright.png);
	background-repeat:no-repeat;
	background-position:right;
	width:50px;
	height:48px;
	top:0;
	right:23px;
}

#bottomright {
	position:absolute;
	background-image:url(../images/corner_bottomright.png);
	background-repeat:no-repeat;
	background-position:right;
	width:64px;
	height:48px;
	right:23px;
	margin:-48px 0 0 0;
}

/**
 * IE hack for pixel perfect positioning. This positions the corner in 1 more
 * pixel for all browsers except IE.
 */
 
html>body #topright {
	right:24px;
}

html>body #bottomright {
	right:24px;
}

/**
 * Sidebar of main content containing log, story and AGES logo
 */

#sidebar {
	position:absolute;
	left:0;
	width:210px;
}

#logo {
	padding:16px 16px 16px 20px;
}

#ages {
	position:absolute;
	bottom:0px;
	padding:0 0 40px 80px;
}

/**
 * The Ourosboros story/blurb
 */

#story {
	padding:16px 0px 16px 22px;
	color:#BA8647;
	font-style:italic;
	font-weight:bold;
	font-size:0.8em;
	line-height:25px;
}

/**
 * Main body content position
 */

#bodycontent {
	margin:0 0 0 230px;
	padding:20px 50px 20px 20px;
	font-size:0.9em;
	height:550px;
}

html>body #bodycontent {
	height:auto;
	min-height:550px;
}

/**
 * Footer
 */

#footer {
	background-color:#BA8647;
	padding:8px 20px 20px 250px;
	font-size:0.7em;
	font-weight:bold;
	color:#fff;
}

#footer p {
	margin:0;
	padding:0;
}

/** 
 * Contact us box
 */
 
#contact {
	border-top:1px solid #BA8647;
}

#contact p {
	margin:14px 0 14px 0;
}

#contact address {
	margin:0 0 10px 0;
	font-style:normal;
}

#contact dl {
	margin:0;
}

#contact dl dt {
	font-weight:bold;
	color:#BA8647;
	display:inline;
}

#contact dl dd {
	display:inline;
	margin:0 10px 0 5px;
	padding:0;
}