/* css by Dylan Fries of Vagabond Brigade. 

 color key : beige: d4b894
             brown: 2b1d17
			orange: b7611c

CSS Contents:
1) Layout
2) Fonts
3) Headers - general
4) Body - general
	i) main text
	ii) sidebar
5) Footer - general
6) Page Specific
	i) Who
*/
/* ********** (1) LAYOUT ********** */

body{
	background-color: #d4b894;
	}
.whole_page{
	background: #2b1d17 url('../images/header_bg.gif') repeat-x top left;
	background-color: #d4b894;
	height:  100%;
	bottom: 0px;
}

#sidebar{
	padding: 30px 0px;
}

/* ********** (2) FONT ************ */
/* h2 = body hdrs 
	h3= sidebar subheadings
	h4 = profile names
*/

a{
	color: #b7611c;
	text-decoration: none;	
}

h1{
	text-transform:  uppercase;
}

/*sidebar headers */
h2{
	color: #2b1d17;
}

h4{
	color: #b7611c;
}

/* main web design blob*/
h5{
	background-color: #2b1d17;
	border-top: 10px solid #2b1d17;
	border-bottom: 10px solid #2b1d17;
	color: #d4b894;
	font-size:  182%;
	text-align: center;
	text-transform: uppercase;	
}

/* sidebar sub-link descriptions */
h6{
	font-size:  108%;
	color: #d4b894;
	margin-left: 0.5em;
}

p{
	font-size: 123.1%;
	color: #2b1d17;
}

/* fixes ff dotted borders */
a:active{
	outline: none;
}
a:focus{
	-moz-outline-style: none;
}

/* ********** (3) HEADER ********** */
#hd{
	height: 225px; /* height of header_bg.gif */
	background: #2b1d17 url('../images/header_bg.gif') repeat-x top left;
	position: relative;
	top:  0px;
}

#logo{
	position: absolute;
	padding:30px 0 0 20px;
}

/* the main navigation bar */
ul#top_nav{ 

	position:  absolute;
	right:  0px;
	bottom: 0px;  
	margin:0;
	padding: 0;
	width: 530px;
	height: 100px;
	list-style: none;
}
/* the nav images : base = 0height; orange= -74px; with message = -149px */
ul#top_nav li { float: left; display: inline; height: 75px; width: 130px; margin: 0;padding:0;}
ul#top_nav li a {display: block; text-indent: -999em; height: 75px;}
/* inital call to images */
ul#top_nav li.home a{ background: url('../images/home_btn.png') 0 0 no-repeat;}
ul#top_nav li.who a{ background: url('../images/who_btn.png') 0 0 no-repeat;}
ul#top_nav li.what a{ background: url('../images/what_btn.png') 0 0 no-repeat;}
ul#top_nav li.etc a{ background: url('../images/etc_btn.png') 0 0 no-repeat;}

/* ******** hover effects ********* */
/* adjustments to images on hover/select $$ one px too low, should be -75/-150 */

ul#top_nav li.home a:hover, 
	ul#top_nav li.who a:hover, 
	ul#top_nav li.what a:hover, 
	ul#top_nav li.etc a:hover{background-position: 0 -149px; } 

ul#top_nav li.home a.active,
	ul#top_nav li.who a.active,
	ul#top_nav li.what a.active,
	ul#top_nav li.etc a.active{background-position: 0 -74px; }

/* ********* (4) BODY ********** */
/* --------> (4.i) main text */
#bd{
	background-color: #d4b894;
}

#main_text{
	padding: 30px 30px;
}

#main_body{
	display: inline;
	min-height: 500px;

}

.text{
	margin: 30px;
}

.text p{
	padding: 10px 10px 20px 10px;
}

/* ------> main text */
div#main_text h1{
	font-size: 153.9%;
	color: #2b1d17;
	padding-top: 10px;
}

/* ---------> (4.ii) sidebar */
#sidebar li{
	padding: 3px 5px 0px 5px;
}
#sidebar h2{
	border-bottom: 2px solid #b7611c;
	color: #b7611c;
	font-size: 138.1%;
	text-transform: uppercase;
	margin-bottom: 0.5em;	
}

#sidebar h3{
	text-transform: uppercase;
	font-size: 123.1%;
	padding: 15px 0 0 0;
}

#sidebar a{
	font-size:  108%;
}

#side_text li a:hover{
	color: #d4b894;
}

#sidebar p{
	color: #b7611c;
	font-size: 108%;
	padding: 0;
}

#side_text{
	padding: 10px;
	color: #d4b894;
	border: solid 6px #b7611c;
	background-color: #2b1d17;
	min-height: 500px;
}

#twitter_link{
	display:block;
	text-align:right;
}

.sidebar_title{
	text-transform: uppercase;
	
}
/* trumps #sidebar a */
#sidebar .sidebar_title a{
	font-size: 108% ;
}

/* ********* footer *********** */
#ft{	
	padding-top: 90px;
}

/* ************* (6)i) WHO - page specific *************** */

/* ------> profile */
/* pushes the dev of the month down 60px */
div#main_text #dev{
	padding-top: 30px;
}
div#profiles{
	border: solid 5px #b7611c;
	background-color: #2b1d17;
	display: block;
	position: relative;
	top: 20px;
	width: auto;
	height: 150px;
}

div#profiles img{
	float: left;
	width: auto;
	border-right: solid 2px #b7611c;
}

div#profile_content{
	float: left;
	width: 294px;
	height: 150px;
}

div#profiles h4{
	margin-left: 5px;	
	padding-top:  10px;
	border-bottom: solid 1px #b7611c;
	font-size: 138.1%;
}

div#profiles p{
	padding: 5px 5px;
	font-size: 123.1%;
	font-weight:  lighter;
	color: #d4b894;
}

#twitter_div{
	margin-right: 10px;
	padding: 10px 0;
}

/* ****************** (7)i) WHAT - page specific *************** */

/* floating thumbs */
.thumb{
	position: relative;
	z-index: 0;
}

.thumb:hover{
	background-color: transparent;
	z-index: 50;
}

.thumb span{
	left:  -2000px;
	position:  absolute;	
	visibility: hidden;
}

.thumb:hover span.horiz{
	visibility: visible;
	top: -75px;
	left:  -310px;
}

.thumb:hover span.vert{
	visibility: visible;
	top: -125px;
	left:  -210px;
}