/*======================
	TOP
========================*/
/*
The home page is broken up into two rows. Each row is being 
wrapped by a #top and #bottom div. 
*/
#top
{
	float:left; 
	margin-bottom:1px; 
}
/*
The Photo div controls the placement and dimensions of the image. 
*/
#photo
{
	float:left;
	margin-right:1px;
	width:238px;
	height:auto;
	border:0;
	text-align: center;
}
/* Disables the border */
#photo img{ border: 0 }
/* 
This sets the landscape background image and sets the width
and height of the #into div
*/
#intro
{
	background:url(../images/intro_background.jpg) no-repeat;
	float:left;
	margin-left:1px;
	height:auto;
	width:730px;
}
/*
I wanted the welcome text to be specifically placed and I didn't
want it to go too far to the right so I wrapped it in its own
#welcome div.
*/
#welcome
{
	float:left;
	width:470px;
	height:auto;
	position:relative;
	left:15px;
	top:10px;
}
/*
H1 is a very important heading for SEO, for this reason I 
still wantedto use it for my home page but didn't want to 
use the default styling for it. So I just created some custom 
styling for the home page. 
*/
#welcome h1
{
	color:#9EC026;
	font-size:22px;
	margin: 0 0 15px 0;
	line-height:1;
	padding:0;
	font-weight:700;
}
/*
Like on #welcome I wanted the #phone to be specifically
placed. 
*/
#phone
{
	float:left;
	width:200px;
	height:auto;
	position:relative;
	left:40px;
	top:-100px;
}
/*
Newslwetter is also specifically placed
*/
#newsletter
{
	float:left;
	width:190px;
	height:85px;
	padding:2px 0px 0px 15px;
	position:relative;
	left:0px;
	top:50px;
	border-top: solid 2px #dfdfdf;
	text-align: left;
}
/*
I used a span because I wanted to style the text but I didn't
want to give it extra emphasis to the search engines. 
*/
#newsletter span
{
	display:block;
	margin-bottom:7px;
	font-size:14px;
	color:#999999;
}
/*
In this case I wanted the input element to be the same
across all browsers so I opted to assign it a width instead
of using the traditional 'size' attribute. 
*/
#newsletter input
{ 
	width:120px; 
	margin: 0 2px 0 2px;  
	padding:3px;
	font-size:10px; 	
} 
/*
The submit element gets a special style
*/
#newsletter input.signup
{ 
	background:url(../images/sign_up_btn.png) no-repeat;
	margin:0;  
	border:0;  
	width:54px; 
	height: 21px; 
}
/*======================
	BOTTOM
========================*/
/*
This wraps the bottom layout and ads the two-column gray background
*/
#bottom
{
	background:url(../images/home_content_background.gif) repeat-y; 
	float:left; 
	margin-top:1px; 
}
/*
Each h3 element inherits the global styles that are set in 
typography.css, I wanted to change them all to a different style. 
*/
#testimonials h3, #what-we-offer h3, #recent-events h3{
	padding: 10px;
	font-size:16px;
	color:#FFFFFF;
	font-weight:700;
}

/*
Each element has the same text styles but different background 
styles. 
*/
#testimonials h3{
	background:#9EC026;
	font-size: 10pt;
}
#what-we-offer h3{

}
#recent-events h3{
	background:#ff8401
}
/*
This positionns the #testimonial divs
*/
#testimonials
{
	float:left;
	width:220px;
	margin-right:1px;
	padding:0;
}
/*
The margin: 0 1px 0 1px adds a white 'line' to the right and left of 
#what-we-offer
*/
#what-we-offer
{
	float:left;
	width:725px;
	margin:0 1px 0 1px;
}
/*
Recent events is the same width of the light gray column background
*/
#recent-events
{
	float:left;
	width:100px;
	margin-left:1px;
}
#testimonials   h2, #what-we-offer   h2, #recent-events   h2 {
	padding: 10px 5px 5px 5px;
	font-size:200%;
	color:#FFFFFF;
	font-weight:700;
	background-color: #FF8401;
}
#what-we-offer h3 a {
	font-size: 100%;
}


/*======================
    ##TYPOGRAPHY##

	HEADINGS
========================*/
h2{
	color:#FFFFFF;
	font-size:12pt;
	padding:0px;
	margin-bottom:0px
}
h3{
	color:#000000;
	font-size:240%;
	font-weight:700;
}
h1{
	font-size:12pt;
	font-weight:700;
	color:#FF0000;
	text-align: left;
}

h4, h5, h6{
	font-size:12px;
	font-weight:700;
	color:#999999;
}
/*======================
	LINKS
========================*/
a
{
	color:#FFFFFF;
	text-decoration: none;
}
a:hover
{
	color:#FFFFFF;
}
a:visited
{
	
}
/*======================
	PARAGRAPHS
========================*/
p
{
	margin-bottom:10px;
	color: #666666;
	text-align: justify;
}
/*======================
	STRONG/B EM/I
========================*/
strong, b
{
	font-weight:700;
}
em, i
{
	font-style:italic;
}
/*======================
	UNORDERED LIST
========================*/
ul
{
	list-style:disc; 	
	margin-left:30px; 	
	margin-bottom:15px; 
}
ul li
{
	
}
/*======================
	ORDERED LIST
========================*/
ol 
{
	list-style:decimal; 	
	margin-left:35px; 
	margin-bottom:15px; 
}
ol li
{
	
}
/*======================
	DEFINITION LIST
========================*/
dl{ margin-left:15px; }
dt{ 
	background:url(../images/bullet.png) no-repeat;
	display:block; 
	margin:10px 0 5px 0; 
	padding-left:23px; 
	font-size:14px; 
	font-weight:700; 
	text-decoration:none; 
}
dd{
	margin-left:23px;
	color:#999999;
}
/*======================
	MISC
========================*/
blockquote{
	background:url(../images/quote.png) no-repeat;
	padding:5px 0 0 18px;
	color:#999999;
	margin-bottom:10px;
}
blockquote span {
	display:block;
	text-align:left;
	font-weight:700;
	color:#999999;
}

abbr{ border-bottom:dotted #000 1px;  }

acronym{ border-bottom:dotted #000 1px; }

sub{ font-size:10px; line-height:1.5; vertical-align:bottom; }

sup{ font-size:10px; line-height:1.5; vertical-align:top; }

code{ }

small{ font-size:11px }

.large{ font-size:14px } 


/*======================
   ##GENERAL##
  
    TABLE
========================*/
/*
border-collapse makes combines two lines into one so that you
don't get extra thick lines. 
*/
table
{
	border-collapse:collapse;
	border:solid 0px #000;
}
/*
Search engines place extra emphasis on th, so make sure
that every table uses them. 
*/
table th
{
	background:#ff8401;
	padding:0px;
	border:solid 1px #000;
	border-bottom-width:2px;
	color:#999999;
	font-weight:700;
}
table td
{
	padding:0px;
	border:solid 0px #000;
}
/*======================
   IMAGE
========================*/
img
{
	border:solid 0px #bdbdbd;
}
/*======================
   EVENTS
========================*/
/*
Each event should have some space below it
*/
.event
{
	float:left;
	margin-bottom:1px;
}
/*
Each event div has a title with a calendar icon. 
*/
.event span 
{
	background:url(../images/calendar.png) no-repeat;
	display:block;
	padding: 2px 0 0px 20px;
	font-size:10px;
	color:#717171;
}
.event a
{
	display:block;
	margin-bottom:1px;
}
/*
We're going to make the news text smaller and 
lighter because we want more emphasis on the title. 
*/
.event p
{
	font-size:10px;
	color:#999999;
}
/*======================
 	ITEM
========================*/
/*
Each item is separated by plenty of padding and a soft gray line. 
*/
.item
{
	float:left;
	width:705px;
	padding:10px 0 5px 0;
	border-bottom:solid 1px #dfdfdf;
	margin: 10px 2px 2px 2px;
	height: auto;
	color: #FFFFFF;
	
}
/*
The .last element removes the soft gray border. 
*/
.last{ border-bottom:0 }
/*
This positions the icon and makes sure that only certain 
dimensions are displayed. 
*/
.item .icon
{
	float:left;
	width:120px;
	margin: -10px 0px 5px 0px;
	background-color: #FF8401;
	text-align: center;
	border: 1px;
	border-color: #FF8401;
	padding: 1px;
}
/*
This removes any styling that the images might inherit 
from the global image style set in typography.css. 
*/
.item .icon img{ border: 0 }
/*
Even though this class doesn't need styling it's good
to declare it anyway for the sake of completeness. 
*/
.item .info
{

}
.item .rank {
	float:left;
	width:45px;
	margin: 0 0px 0 1px;
	text-align: center;
	background-color: #FF8401;
}
.item .rates {
	float:left;
	width:65px;
	margin: 0 1px 0 0px;
	text-align: center;
	background-color: #FF8401;
}
.item .green {
	float:left;
	width:65px;
	margin: 0 1px 0 0px;
	text-align: center;
	background-color: #9EC026;
}
.item .ratesorder {
	float:left;
	width:100px;
	margin: 0 1px 0 0px;
	text-align: center;
	background-color: #FF0000;
}