/*
Theme Name: Apes of Wrath 2010
Author: Reston Dooly
Tags: custom header, not fixed width, three columns
*/


/* THREE COLUMN LAYOUT */
*{
	margin:0; padding:0;
}
html{
	background-color:#000000;
}
body {
	text-align:center;  /* IE6 needs this to center the layout in the browser window */
	background-color:black;
}
#main_wrapper {
	margin-right:auto;*/ /* centers max'd layout in browser */
	text-align:left; /* prevents page inheriting IE6 centering hack on body */
	min-width:1024px;
}

/* HEADER */

/* LEFT SIDE OF THE HEADER */
#header{
	width:100%;
	background-image:url('/img/dark_gradient.png');
	background-repeat:repeat-y;
	border-bottom:1px solid #000000;
}
#ape_menu{ 						    /* left side of menu shrinks as the browser window shrinks*/
	float:left;						/* min width is 1024 px*/
	width:45%;
	height:55%;					/* another way to size the ape is to specify position:apsolute and make top,right,bottom, and left with percentages*/
}
#ape_inner{							/* ape logo fills the space of ape_menu div*/
	width:100%;						/* this is used so that the picture will grow and shrink depending on browser window size */
	height:100%;		
}


/* HEADER MENU */

#ape_menu * {
	margin:0; padding:0;								/* removes the default margins and padding on the menu elements*/
}
#ape_menu {
	position:relative;									/* links move relative to the ape_menu container*/
}
#ape_menu li{
	list-style-type:none;
}
#ape_menu a{
	text-decoration:none;
	display:block;
	padding:.3em 6px;
	font-family:font-family:Papyrus, Trajan Pro, sans-serif;
	color:white;
}
#home_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:40%;
	bottom:57%;
}
#pictures_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:19%;
	bottom:79%;
}
#links_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:24%;
	bottom:68%;
}
#blogs_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:22%;
	bottom:47%;
}
#jpn_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:6%;
	bottom:87%;
}
#nevermrs_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:-3%;
	bottom:58%;	
}

#forums_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:-3%;
	bottom:72%;
}
#info_link{
	position:absolute;									/* links stay the same distance from the right and bottom of container */
	right:7%;
	bottom:42%;	
}

/* END OF HEADER MENU*/


/* END OF LEFT SIDE OF HEADER*/

/* RIGHT SIDE OF HEADER */

#title{
	position:relative;							/* same as the left side of header*/
	text-align:center;     
	float:right;
	width:55%;
}
#title_inner{
}
#ou_title{
	width:65%;/* 65*/
	/*height:42%; /* 42 */
	position:absolute;
	top:2%;
	right:20%;
	bottom:55%;
}
#ou_title_inner{
	width:100%;
	height:100%;
}
#pictures{
	margin-top:21%;           /* used to push the pictures down to the bottom of the header */
}
.picture_inner{
	width:46%;
}
/* END OF RIGHT SIDE OF HEADER*/

/* END HEADER */
		
#main_section{
	width:100%;
}
#nav {
	width:18%;
	float:left;
}
#content {
	width:60%; 
	float:left;
}
#promo {
	width:21%; 
	float:left;
}
#footer {
	width:100%;
	clear:both;
}	
#header_inner, #nav_inner, #content_inner, #promo_inner {
	overflow:hidden; /* prevents oversize elements from breaking the layout */
}
#nav_inner {
	margin:.5em .5em;
}
#content {
	margin:.5em 0;
	border-left-width:1px; 
	border-left-style:dotted;
	border-left-color:white;
	border-right-width:1px; 
	border-right-style:dotted;
	border-right-color:white;
}
#content_inner{
	margin:0 .5em;
}
#promo_inner {
	text-align:center;
	margin:1em 0;
}
#nav_inner{
	text-align:right;
}
#twitter_link{
	display:block;
	text-align:right;
	text-decoration:none;
	color:red;
}
#sidebar_title{
	text-align:center;
}
#twitter_div{
	text-align:right;
}
#twitter_update_list{
	text-align:right;
	text-decoration:none;
}
#footer{
	background-color:black;
	background-image:url('/img/dark_gradient.png');
	background-repeat:repeat-y;
}
#footer_inner {
	padding:.5em 10em;
	text-align:center;
	
}
#footer p {
	margin:0;
}







/* a fix for IE6 only - see Star Hack in Stylin' with CSS to see how the comments and * html hide this hack from other browsers \*/
* html * {
	zoom:100%; 
/* triggers IE6 "haslayout" - google 'IE6 haslayout' for details*/
	}
/* without the above hack, IE6 does not draw the header until the page is resized */
/* the problem is triggered by the universal * selector below that resets the margins, but I need to do that, hence the hack */


* {
	margin:0;
	padding:0;
}
body {
	font: 1em Lucida, Arial, sans-serif; /* 1em = 16pts */
}

/* DEFAULT TAG STYLES - font sizes, margins, padding, etc. */

/* NOTE: text colors follow below */


h1, h2, h3, h4, h5, h6, ul, ol, dl {
	font-family: 'Trebuchet MS', Verdana,  serif;
} 

/* TEXT COLOR AND FONT SIZES */
h1 {
	font-family: sans-serif;
	color:white;
	font-variant:small-caps;
	letter-spacing:-.079em;
	font-size:4.3em; 
}
#heading{
	width:100%;
	height:100%;	
}
#ape_menu a{
	font-size:1.4em;
}
h2 {
	color:#808073;
	font-size:1.375em; /* 22pt */
	line-height:1.25;
	padding:.5em 0 0 0;	
}
h3 {
	color:#808073;
	font-size:1.125em; /* 18pt */
	line-height:1.25;
}
h4 {
	color:#808073;
	font-size:1.125em; /* 18pt */
}
h5 {
	color:#808073;
	font-size:1em; /* 16pt */
}
h6 {
	color:#000000;
	font-size:.875em; /* 14pt */
}
p  {
	color:white;
	font-size:.8em; /* 12pt */
	line-height:1.25; /* on 15pt */
	margin-bottom:.75em; /* 12pts of space */
 }
a {
	font-family:Papyrus, Trajan Pro, sans-serif;
	font-weight:bold;
	text-decoration:none;
	color:red;
}
a:hover{
	color:#808073;
}

#header a:hover{
	background-color:white;
	color:red;
	text-decoration:none;
}
#content p{
	color:white;
}
/* basic list styling - more-styled lists in list.css */
ul, dl, ol {
	color:white;
	/*margin:0 1em .75em 1em; */ /* lists without specific classes */
	font-size:.8em;
	line-height:1.5;
	list-style-type:none;
}
li, dd {
	padding:0em 0; /* lists without specific classes */
	/*margin-left:2em;*/
	color:white;
	list-style-type:none;
	
}
content{
	text-align:center;
}
content ul, li{
	text-align:center;
}
content a{
	color:red;
}
conent a:hover{
	color:#808073;
}
#nav ul{
	color:white;
}
#nav a {
	color:red;
}
#nav a:hover{
	color:#808073;
}
#nav ul, #nav dl, #nav ol {
	/*margin:.5em 1em .75em 1em;*/ /* lists without specific classes */
}
#nav li {
	list-style-type:none;
	margin-left:0
}

#promo p{
	color:white;
}
#promo ul, #promo dl, #promo ol {
	margin:.5em 1em .75em 1em; /* lists without specific classes */
}
#promo li {
	list-style-type:none;
	margin-left:0
}		
dt {
	font-weight:bold;
}
code {
	font-size:1.25em;
}
* html code {
	font-size:1.1em;
} /* default size is smaller in IE */
	
cite {
	color:#808073;
	font-size:.85em;
	font-style:italic;
}

abbr, acronym {
	border-bottom:1px dashed #000;
	cursor:default;
}
address {
	margin:0 1em .75em 1em;
}
img {
	border:0;
}

/* basic table styling  - more-styled tables in tables.css */
table caption {
	font-weight:bold;
	font-size:1em;
	margin-top:.6em;
}
table {
	color: #BFBFAC;
	margin: .3em 1em 1em 1em;
	border-top:1px solid #069;
	border-collapse:collapse;
	font-size:.8em;
}
form {
	color: #BFBFAC;
}
table th {
	padding: .3em .5em .3em .5em;
	border-bottom:2px solid #069;
}
table td{
	padding: .3em .5em .3em .5em;
	border-bottom:1px solid #069;
}
/* THE ALSETT CLEARING METHOD */
.clearfix:after {
	 content: “.”;
	 display: block; 
	 height: 0;
	 clear: both;
	 visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/ LEAVE THIS COMMENT RIGHT HERE! 
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end backslash hack */