/*======================
	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; 
}

/*
Search is also specifically placed
*/

#search
{
  float:right;
  width:120px;
  height:45px;
  padding:10px 0px 10px 15px;
  position:relative;
  right:50px;
  top:-8px;
}

/*
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.
*/

#search span
{
  display:block;
  margin-bottom:7px;
  font-size:14px;
  color:#fff;
}

/*
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.
*/

#search input
{
  width:120px;
  margin: 0 2px 0 2px;
  padding:3px;
  font-size:10px;
}

/*
The submit element gets a special style
*/

#search input.search
{
  background:url(../images/search_go.png) no-repeat;
  margin:0;
  border:0;
  width:21px;
  height:22px;
  position:relative;
  left:145px;
  top:-23px;
}

/*
This div sets the default height of your content and also adds a gray 
background to the right column. 
*/
#content
{
  float:left;
  width:940px;
  margin:10px; 
  min-height:515px;
  height:auto !important; /* IE 6 min-height fix */
  height:515px; /* IE 6 min-height fix */
}

/*
The Photo div controls the placement and dimensions of the image. 
*/
#photo
{
  float:left; 
  margin-right:1px; 
  width:282px; 
  height:550px;
  border:0; 
}

/* 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:240px; 
  width:650px;	
}

/*
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:390px; 
  height:240px;
  position:relative;
  left:10px; 
  top:20px; 	
}

/*
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:#000033; font-size:22px; margin: 0 0 10px 0; line-height:1; padding:0; font-weight:700; background:0;
}

#what-we-offer h3, #news-updates h3{  padding: 10px; font-size:14px; color:#fff; font-weight:700; }
	 
/*
Each element has the same text styles but different background
styles.
*/

#what-we-offer h3{ background:#000033; }
#news-updates h3{ background:#990066 }

#what-we-offer
{
  float:left;
  width:410px;
  height: 310px;
  position:relative;
}

#news-updates
{
  background-color:#FFCCFF;
  float:left;
  width:240px;
  height: 310px;
  margin-left:1px;
}