/*------------------------------------------------------------------------------*
* IMPORT STYLES
--------------------------------------------------------------------------------*/
@import url('reset.css');
@import url('typography.css');
@import url('forms.css');

/*-------------------------------------------------------------------------------*
* ELEMENT STYLES
---------------------------------------------------------------------------------*/
body{
	background-color: #000;
	background-image: url("../images/bg.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	font-size:1em;
	line-height: 1.75em;
}

img.left, div.left {margin-right:20px;}
img.right, div.right {margin-left:20px;}

div#content div.left p, div#content div.right p {
	font-size: .9em;
	font-style: italic;
	text-align: center;
	margin-top: 2px;
	padding: 0;
	line-height: 1.2em;
}

/*-------------------------------------------------------------------------------*
* ID STYLES
---------------------------------------------------------------------------------*/
div#wrapper{margin: 0 auto;padding: 0;width:800px;background-color: #fff;}
div#header{background-image: url(../images/Powerhouse_header.jpg);background-repeat: no-repeat;height:200px;}
div#main_content{width:350px;}
#newsfeed{margin-top: 1em;}
div#content{padding: 60px 20px 20px;}
div#smallblock{margin: 40px 0px -40px 0px; padding-left: 20px; width:780px; height: 50px; background-color: #fff; position:relative;}
div#facebook{ height:50px; width:150px; right:15px; top: 0; position:absolute; text-align: right; }
div#facebook img { float: right; margin: 0 0 0 6px;}
div#facebook a { font-size:14px; font-weight:bold; line-height: 16px; padding: 9px 0 9px 0px; }

div#footer{
	height:100px;
	padding:20px  20px 0 0;
	clear: both;
	background-image: url("../images/footer_bg.jpg");
	background-repeat: repeat-x;
	margin-bottom:3em;
	text-align: right;
}

/*-------------------------------------------------------------------------------*
*#NAV STYLES
---------------------------------------------------------------------------------*/
ul#nav {background-color:#000; width:100%; height:auto;list-style: none;margin: 0;padding: 0;font-size: .70em; text-transform: uppercase; position: absolute; top:200px;width:800px;}
ul#nav li{display: inline;list-style: none;}
ul#nav li ul{display: none;background-color: #BC0000;}
ul#nav a:link, ul#nav a:visited{color:#fff;padding:10px 10px 10px 10px;text-decoration: none;}
ul#nav a:hover{background-color: #BC0000;color:#000;}


/*---------------------------------------------------------------------------------*
* Class Styles
*----------------------------------------------------------------------------------*/
.clear{clear: both;}
.left{float:left;}
.right{float:right;}
.feed_item{width:150px;height:150px;padding:30px;}


/*----------------------------------------------------------------------------------
* SCROLLABLE STYLES FOR THE HOME PAGE
----------------------------------------------------------------------------------*/
/* root element for scrollable */ 
div.scrollable{display:block;/* required settings */ 
position:relative;overflow:hidden;

/* vertical scrollers have typically larger height than width */     
height: 50px;      
width: 760px;     
} 

/* root element for scrollable items */ 
div.scrollable div.items {     
position:absolute; 
clear:both;
 
/* this time we have very large space for width */     
width:20000em;     
}

div.items div.feed_item{
width:100px;height:120px;
}

/* 
root element for the scrollable. 
when scrolling occurs this element stays still. 
*/
div.scrollable {

/* required settings */
position:relative;
overflow:hidden;	 	
height:180px;	

/* custom decorations */
padding:10px 0;	
background-color:#efefef;				
}

/* 
root element for scrollable items. Must be absolutely positioned
and it should have a super large width to accomodate scrollable items.
it's enough that you set width and height for the root element and
not for this element.
 */
div.scrollable div.items {	

/* this cannot be too large */
width:20000em;	
position:absolute;
clear:both;		

/* decoration */
margin-left:10px;
}

/* single scrollable item */
div.scrollable div.items div {
float:left;

/* custom decoration */
text-align:center;
width:110px;
font-size:20px;
border:1px outset #ccc;
background-color: #ddd;
margin-right: 20px;	
-moz-border-radius:5px;
}

.pdrt{padding-right: 1em;}
.pdlft{padding-left: 1em;}

input#email_address{width:408px;}
input#last_name,input#first_name{width:195px;}