body { 
  background-color : #F0FFFF;     /* Azure */
  font-size : 13px;
  font-family : Arial, Verdana, Helvetica, sans-serif;
}

div#wrapper {	
  width : 900px;
  margin : 0 auto;	              /* this will center the div */
  background-color : #F0F8FF;     /* Aliceblue */
}


/* THE HEADER AND MENU */
div#header {
  width : 900px;
/* To inclde a background image in the header, see http://www.dreamincode.net/forums/topic/36070-simple-css-layout/ */
  background-color : #4682B4;     /* Steelblue */
}

div#header p {  /*We want to style the paragraph tags inside of the header*/
  color : #FFFFFF;                /* White */
  font-size : 38px;
  margin : 0;
  padding : 30px 16px 20px 16px;   /* Top Right Bottom Left */
}

/* horizontal menu made by unordered lists */
div#menu {
  height : 50px;
  font-size : 13px; 
  text-decoration : none;
  color : #0000CD;                /* Mediumblue */
  background-color : #B0E0E6;     /* Powderblue */
} 

div#menu ul {
  margin : 0;
  padding : 0;
  list-style-type : none; 
}

div#menu ul li {
  display : inline;
}

div#menu ul li a {
  float : left;
  padding : 6px 12px;
  text-decoration : none;
  /* width : 95px; */
  text-align : center;
} 

div#menu ul li a:visited {
  color : #CD5C5C;               /* Indianred */
  text-decoration : none;
} 

div#menu ul li a:hover {
  color : #DC143C;               /* Crimson */
  text-decoration : underline;
} 


/* NOW FOR THE CONTENT */
div#content {
  background-color : F0FFFF ;     /* Azure */
  width : 900px;  
}

/* We style the p tag here again, as well as our h tags */
div#content h1 {
  font-size : 22px;
  font-weight : bolder;         
  margin : 0 10px;
  padding : 15px 10px 3px 3px;
}

div#content h2 {
  font-size : 18px;
  font-weight : bolder;          
  margin : 0 6px;
  padding : 15px 0 3px 0;
}

div#content p {
  color : #000000;               /* Black */
  font-size : 15px;
  font-weight : normal;
  margin : 0 6px;                /* Top/Bottom Left/Right; paragraph flush to bottom of h1 */ 
  padding : 0 6px 9px 6px; 
}

/* Sidebar Right */
div#sidebarright {
  margin : 15px 6px;   /* this will position it level w/ the h1 and a bit from the edge */
  width : 262px;
  float : right;
  background-color : #FFF8DC;     /* Cornsilk */
  border : 1px solid #4682B4;     /* Steelblue */
}

div#sidebarright h3 {
  font-size : 16px;
  color : #0000CD;                /* Mediumblue */
  font-weight : normal;           /*All h tags are BOLDED by default*/
  margin : 0 6px;
  padding : 15px 0 3px 0;
}

div#sidebarright p {
  font-size : 13px;
  color : #0000CD;                /* Mediumblue */
  margin : 0;
  padding : 6px;
}

/* Sidebar Lef */
div#sidebarleft {
  margin : 15px 6px;   /* this will position it level w/ the h1 and a bit from the edge */
  width : 262px;
  float : left;
  background-color : #FFF8DC;     /* Cornsilk */
  border : 1px solid #4682B4;     /* Steelblue */
}

div#sidebarleft h3 {
  font-size : 16px;
  color : #0000CD;                /* Mediumblue */
  font-weight : normal;           /*All h tags are BOLDED by default*/
  margin : 0 6px;
  padding : 15px 0 3px 0;
}

div#sidebarleft p {
  font-size : 13px;
  color : #0000CD;                /* Mediumblue */
  margin : 0;
  padding : 6px;
}

/* SPLASH BOX */

div#splashbox {
  background-color : #FFF8DC ;     /* Cornsilk */
  margin : 15px;
  border-top : thick ridge #F08080;    /* Lightcoral */ 
  border-bottom : thick ridge #5D5C5C;  /* Indianred */
  border-left : thick ridge #F08080;   /* Lightcoral */ 
  border-right : thick ridge #5D5C5C;  /* Indianred */
  padding : 3px 5px;
  width : 540px; 
  float : left;
}

/* We style the p tag here again, as well as our h tags */
div#splashbox h1 {
  color : #B22222;                 /* Firebrick */
  font-size : 22px;
  font-weight : bolder;         
  margin : 0 10px;
  padding : 12px 0px 3px 3px;
}

div#splashbox h2 {
  color : #DC143C;                 /* Crimson */
  font-size : 18px;
  font-weight : bolder;          
  margin : 0 6px;
  padding : 0;
}

div#splashbox p {
  color : #8B0000;               /* Darkred */
  font-size : 15px;
  font-weight : bold;
  margin : 0 6px;                /* Top/Bottom Left/Right; paragraph flush to bottom of h1 */ 
  padding : 6px; 
}

/* THE FOOTER IS THE MOST IMPORTANT PART WHEN USING ANY FLOATING DIVS */
div#footer {
  clear : both;         /*This ensures that the floating sidebar pushes the wrapper to the bottom of the box; leaving this out would result in the sidebar poking out of the wrapper into the body like a tab */
   background-color : #4682B4;       /* Steelblue */
   border-top : thin solid #000000;  /* Black */
}

div#footer p {
  text-align : center;
  font-size : 12px;
  font-weight : bold; 
   color : #FFFFFF;             /* White */
  margin : 0;
  padding : 6px;
}