/*
COLORS
Define main colors used in a site here for easy reference

Green/BG = 809e3f
Green/Text = 366009
Maroon = 5b1400

*/

html {
	height: 100%;
}

body {
	height: 100%;
	font: 62.5%/1.5em arial, helvetica, sans-serif;
	text-align: center;
	background: #000000 url(../images/background.jpg) no-repeat;
	color:#ffffff;
}

/* ----------------
	DEFAULTS
    ------------- */
h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
}  

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited  {
    color: #ffffff;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #ffffff;
} 

h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; } 

h1, h2 { 
	margin-bottom: 0.5em; 
	line-height: 1.2em;
}

dt {
}
dd {
}
	dd p:first-child {
	}
 
a,
a:link,
a:visited { 
	color: #ffffff; 
	text-decoration: none;
	
}
a:hover,
a:active {
    color: #ffffff;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

p { 
	margin: 0 0 1.2em 0;
	line-height: 1.5em; 
}

/* For HR's with background images */	
div.hr {
  	height: 3px;
  	margin: 10px 0;
  	background: #fff url() 0 0 repeat-x;
}
	div.hr hr {
	  	display: none;
	}

ul, ol {
}

ol {
}
	ol ul,
	ol ol {
	}

/* orderedList class can be assigned manually, or with jQuery method. 
Intended to style bullets differently than text.  */
ol.orderedList li span { color: #666; }
ol.orderedList { color: #000; }

blockquote, q {
    margin: 1em 2em;
    padding: 1em;
    border-left: 1px solid #dcd6c6;
    font-style: italic; 
    font-size: 1.2em;   
    color: #666; 
}   

small,
.small { font-size: .8em; }

/* table { border: 0; border-collapse: collapse; } */


/* ----------------
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
	
	html, body, page, wrapper, and footer rules are designed to fix footer's at the bottom of the page.
	Wrapping the site in the page div also allows for double background images.
    ------------- */
#page {
	position: relative;
	min-height: 100%;
	text-align: center;
	padding: 0;
	width:865px;
	margin:auto;
	padding-top:100px;
	font-size: 1.2em; /* Render type approximately 12px in size across all browsers */
}

#wrapper {
	position: relative;
	min-height: 100%;
	min-width: 1344px;
	margin: 0 auto;	
	text-align: left;

}


#footer {
	position: relative;
	padding: 45px 180px 30px 180px;
	clear: both;
	background: url(../images/design/bg_footer.gif) 37% 0 no-repeat;
}

#content {
	position: relative;
	min-height: 520px;
}
#leftColumn {
	width:512px;
	
}
#rightColumn {
	width: 350px;
	text-align:left;
}
.left {
	float: left;
}
.right {
	float:right;
}
.bottomText {
color:#929292;
}
#getWasted{
background: url(../images/title2.png) no-repeat;
height:56px;
width:143px;
}
#passItAround{
background: url(../images/title3.png) no-repeat;
height:19px;
width:113px;
}
#facebookFans{
background: url(../images/title4.png) no-repeat;
height:19px;
width:110px;	
}
#getWasted:hover{
background-position:0px -56px;
}
#passItAround:hover, #facebookFans:hover{
background-position:0px -19px;
}