/* define styles for the body */
body {
  
  /* remove margin from around the edges of the browser window */
  margin: 0px;
  
  /* remove padding from around the edges of the browser window */
  padding: 0px;
  
  /* set a background image to the body to stretch the entire length of the browser window */
  background: #ffffff;
  
  /* define the font family for the site */
  font-family: Verdana, Arial, sans-serif;
  
  /* define the default text size - 0.8em is about 12px
     I define text size using em's; using pixels doesn't 
     allow the user to change the text size in IE6 */
  font-size: 0.8em;
}

/* styles for all paragraph and unordered list tags */
p, ul {

  /* remove the margin from around the elements */
  margin: 0px;
  
  /* set padding on the bottom of these elements */
  padding-bottom: 10px;
  
  /* increase the leading between each line */
  line-height: 140%;
}

/* styles for h1 tags */
h1 {
  
  /* remove the margin */
  margin: 0px;
  
  /* set padding on the bottom to 10px */
  padding-bottom: 10px;
}

/* styles for h2 tags */
h2 {

  /* remove the margin */
  margin: 0px;
  
  /* remove padding */
  padding: 0px;
  
  /* assign a blue color to the heading */
  color: #1c7ebb;
  
  /* set the font size */
  font-size: 1.5em;
}

/* styles for h3 tags */
h3 {

  /* remove the margin */
  margin: 0px;
  
  /* set padding on the bottom to 10px */
  padding-bottom: 10px;
  
  /* set the font size */
  font-size: 1.3em;
}

a img {
  border: 0px;
}

dl.services {

  /* remove margin */
  margin: 0px;
  
  /* remove padding */
  padding: 0px;
}

/* styles for the */
dl.services dd, dl.services dt {

  /* remove margin */
  margin: 0px;

  /* float the elements left */
  float: left;
}

dl.services dt {
  
  width: 70px;
  
  padding-bottom: 10px;
}

dl.services dd {

  width: 380px;

  padding-bottom: 10px;
}

.clear {
  clear: both;
}

.floatLeft {
  float: left;
  padding-right: 15px;
  padding-bottom: 5px;
}

.floatRight {
  float: right;
  padding-left: 15px;
  padding-bottom: 5px;
}

#mainContainer {
  
  /* define the width for the web site */
  width: 925px;
  
  background: #1b7dba;
}

/*=============
  HEADER STYLES
  =============*/

/* container div for the header */
#header {
  
  /* set the height */
  height: 85px;
  
  background: url("../images/header_bg.jpg") repeat-x;
}

#headerContent {
  width: 925px;
}

/* header h1 styles */
#header h1 {
  
  /* hide anything within the h1 tag
     this allows screenreaders and bots to see your branding */
  display: none;
}

/* div for the logo image */
#logo {

  position: absolute;
  
  top: 0px;
  
  left: 0px;

  /* define the height of the logo image */
  height: 75px;
  
  /* define the width of the logo image */
  width: 300px;
  
  /* float the logo div left */
  float: left;
  
  /* assign the logo image to the background of the div */
  background: url("../images/dreamstream_logo.jpg");
}

/* div for the flash banner */
#flashBanner {

  position: relative;
  
  right: 50px;

  /* set the height */
  height: 75px;
  
  /* set the width */
  width: auto;
  
  /* float the div to the right side */
  float: right;
}

/* END HEADER STYLES */

/*=================
  BREADCRUMB STYLES
  =================*/

/* div for the breadcrumbs */
#breadcrumbs {

  /* set a 1px grey border to the bottom of the breadrcumbs div */
  border-bottom: 1px solid #ccd2d2;
  
  /* make the font bold */
  font-weight: bold;
  
  /* set the font size */
  font-size: 0.8em;
  
  background: #ffffff;
}

/* increase the padding around the paragraph tag */
#breadcrumbs p {

  /* set the padding */
  padding: 5px   0      5px   10px;
  /*       top right  bottom  left */
  
}

/* END BREADCRUMB STYLES */

/*========================
  CONTENT CONTAINER STYLES
  ========================*/

/* define the column container div */
#container {
  
  position: relative;
  
  /* set the padding on the container to make room
     for the side columns */
  padding: 0 245px 0 0;
  
  margin-left: 180px;
  
  border-left: 1px solid #c4c0b8;
  
  background: #ffffff;
}

/* conatiners for the main content and left and right columns */
#mainContent, #leftContent, #rightContent {

  /* relative positioning */
  position: relative;
  
  /* float all the columns left so they will line up next to each other */
  float: left;
}

/* END CONTENT CONTAINER STYLES */

/*===================
  MAIN CONTENT STYLES
  ===================*/

/* container div for the content */
#mainContent {

  /* set the width to fill 100% of the container */
  width: 100%;
  
  /* set the background to be white */
  background: #ffffff;
}

/* inner content div with padding */
#mainText {

  /* increase the padding around the div
     this is a shorthand method to write it: */
  padding: 10px 20px;
  /*       top  right */
  
  /* even though just the top and right sides are defined,
     padding of 10px on the bottom and 20px on the left 
     are also applied */
}

/* style for any unordered lists within the mainText div */
#mainText ul, #mainText li {

  /* fix for IE 6, indents any unordered list in the content */
  padding-left: 20px;
}

/* custom orange bullets for unordered 
   lists that have a class="orangebullets" */
#mainText ul.orangebullets li {
  
  /* increase the leading between lines of text */
  line-height: 160%;
  
  /* assign a background image to the list items, rather than the default bullet */
  list-style-image: url("../images/bullet_orange.png");
}

#servicesBox {
  background: #ffcc66;
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}

/* END MAIN CONTENT STYLES */


/*==================
  LEFT COLUMN STYLES
  ==================*/

/* container div for the left column */
#leftContent {

  /* set the width to 180px */
  width: 180px;
  
  /* moves the left column off the left side of the screen */
  margin-left: -100%;
  
  /* moves the left column back to the right by its own width so that it 
     is displayed on the screen */
  right: 181px;
  
  /* add a border to the bottom */
  border-bottom: 1px solid #c4c0b8;
}

/* navigation container div */
#mainNav {

  /* set the text color */
  color: #ffffff;
  
  /* bold the text */
  font-weight: bold;
  
  /* set the font size */
  font-size: 0.8em;
  
  /* set the background color of the div */
  background: #1c7ebb;
}

/* styles for the navigation */
#mainNav ul {

  /* take out the margin */
  margin: 0px;
  
  /* take out the padding */
  padding: 0px;
  
  /* remove the bullets from the list */
  list-style: none;
}

/* styles for each list item within the navigation */
#mainNav li {

  /* display each item as a block level element */
  display: block;
  
  /* indents the text by 8px */
  text-indent: 8px;
  
  /* put a border on the bottom of each list item */
  border-bottom: 1px solid #c4c0b8;
}

/* styles for any list item with a heading class */
#mainNav li.heading {

  /* set the width */
  width: 180px;
  
  /* set the padding */
  padding: 5px 0 5px 0;
  
  /* set the background color */
  background: #10669f;
  
  /* put a border on the bottom of the item */
  border-bottom: 1px solid #c4c0b8;
  
  /* set the cursor to default, mainly a visual thing so that the
     cursor stays an arrow when the user hovers over top */
  cursor: default;
}

/* styles for any link within the navigation */
#mainNav li a {

  /* set the width */
  width: 175px;
  
  /* display each link as a block level element */
  display: block;
  
  /* set the padding */
  padding: 5px 0 5px 0;
  
  /* set the color of the link text */
  color: #ffffff;
  
  /* indents the text */
  text-indent: 12px;
  
  /* removes the underline from the links */
  text-decoration: none;
  
  /* puts in the blue border on the left */
  border-left: 5px solid #0f537f;
}

/* styles for any link that the user hovers over */
#mainNav li a:hover {

  /* change the background colour */
  background: #dcd8d0;
  
  /* change the text colour */
  color: #1c7ebb;
  
  /* change the border colour */
  border-left: 5px solid #0038a8;
}

/* END LEFT COLUMN STYLES */

/*=================== 
  RIGHT COLUMN STYLES 
  ===================*/

/* container div for the right column */
#rightContent {
  
  /* set the width */
  width: 245px;
  
  /* set the right margin to the negative width value, this lines
     up the column with the right side of the screen */
  margin-right: -245px;
}

/* inner contnet div for the right column with padding */
#rightText {

  /* put in padding around the column */
  padding: 10px 10px 0 10px;
  
  /* center the text */
  text-align: center;
  
  /* add a border to the left */
  border-left: 1px solid #ccd2d2;
  
  /* add a border to the bottom */
  border-bottom: 1px solid #ccd2d2;
  
  /* add a border to the right */
  border-right: 1px solid #ccd2d2;
}

/* stlyes for any p tags */
#rightText p {

  /* remove the margin */
  margin: 0px;
  
  /* add padding to the bottom */
  padding-bottom: 10px;
}

/* advertisement container class for the right column */
#rightText div.advert {

  /* display as a block level element */
  display: block;
  
  /* set the spacing between the div elements */
  margin: 10px 0 10px 0;
}

#rightText div.advert span.ad_heading {

  /* set the font size */
  font-size: 1.1em;
  
  /* bold the text */
  font-weight: bold;
}

/* assign styles to the advertisement links */
#rightText div.advert a {

  /* display as a block level element */
  display: block;
  
  /* set the padding inside the div */
  padding: 15px 5px 15px 5px;
  
  /* set the text colour */
  color: #0038A8;
  
  /* set the background colour */
  background: #eeeeee;
  
  /* remove the underline */
  text-decoration: none;
  
  /* set a border around the div */
  border: 1px solid #ccd2d2;
}

/* assign hover styles to the advertisement links */
#rightText div.advert a:hover {

  /* change text colour */
  color: #555555;

  /* change background colour */  
  background: #c2d6ff;
}

/* END RIGHT COLUMN STYLES */


/*=============
  FOOTER STYLES
  =============*/

/* footer container div */
#footer {

  /* Clear the floats for the left and right columns */
  clear: both;
}

/* styles for the bottom navigation */
#bottomNav {
  
  /* center all the text */
  text-align: center;
  
  /* change the fons size */
  font-size: 0.8em;
  
  /* increase padding around the left and right sides */
  padding: 0   10px    0    10px;
  /*      top right bottom  left */
}

#bottomNav ul {
  
  /* remove margin from around the unordered list */
  margin: 0px;
  
  /* remove padding from around the unordered list */
  padding: 0px;
}

#bottomNav li {

  /* set links to display inline, one after the other */
  display: inline;
}

/* END FOOTER STYLES */