body {
    background-image: url(images/background2.jpg); /** Link to the image you created **/
    background-repeat: repeat-y; /** Repeats the image vertically **/
    background-position: center; /** Centers the Background image **/
    background-color: #f7f4ee; /** Website BG colour (matches canvas colour in Step 1) **/
}



#container {
	background-color: #FFFFFF;
	width: 928px;
	margin: 0 auto;
text-align: center;
	
	
}

#top {
	width: 927px;
	
	height: auto;
	clear: right;

	}
	

#navbar {
	background-color: #ffffff;
	height: 25px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 52px;
	
	
	
}


#leftside {
	background-color: #ffffff;
	float: left;
	width: 163px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	


	
}



#story {
	background-color: #FFFFFF;
	float: right;
	width: 755px;
	height: auto;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
	
	
	
}

.clear {
	clear: both;
}


#footer {
	background-color: #ffffff;
	width: 927px;
	height: 120px;
	padding-right: 0px;
	padding-left: 0px;
	
	padding-bottom: 5px;
}



#rightpanel {
	
	background-color: #D8E7FE;
	float: right;
	clear: none;
	width: 210px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 1px;
	margin-bottom: 10px;
	border: thin solid #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
	text-decoration: none;
}




div.float {
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  }
  
div.float p {
   text-align: center;
   }




div.spacer {
  clear: both;
  }





	
	
	
		


	
.imageright {
	clear: right;
	float: right;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
	
}

.imageleft {
	clear: none;
	float: left;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: auto;
	
}

.imagetop {
	clear: none;
	width: 100px;   
	float: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-color:#8CB8E2
	
}


.imagebottom {
	clear: none;
	width: 100px;
	float: left;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	
}




.bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #666666;
	text-decoration: none;
	
}

.boldlink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	color: #003366;
	text-decoration: none;
}
.boldlink:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: x-small;
	color: #000000;
	text-decoration: none;
}


.tinylink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	color: #99CC66;
	text-decoration: none;
}
.tinylink:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: x-small;
	color: #666666;
	text-decoration: none;
}

.biglink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	
	font-size: small;
	color: #666666;
	text-decoration: underline;
}
.biglink:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	
	font-size: small;
	color: #000000;
	text-decoration: underline;
}
.smalltext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	color: #000000;
	font-weight: bold;
}


.news {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
	text-decoration: none;
}









#homer a {   

display: block;   

background:  url(images/home2.gif) top;   

width: 100px;   

height: 25px;
 

}


#homer a:hover {   

background:  url(images/home2.gif) no-repeat bottom;   

}

#products a {   

display: block;   

background:  url(images/products2.gif) top;   

width: 100px;   

height: 25px;

    

}

#products a:hover {   

background:  url(images/products2.gif) no-repeat bottom;   

}

#contact a {   

display: block;   

background:  url(images/contact2.gif) top;   

width: 100px;   

height: 25px;   

  
}

#contact a:hover {   

background:  url(images/contact2.gif) no-repeat bottom;   

}







  
 #articlebox_content {
	float: left;
	clear: none;
	width: 420px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	margin-right: 5px;
	margin-left: 10px;
	margin-top: 1px;
	margin-bottom: 10px;
	border-bottom: thin solid #8CB8E2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
	text-decoration: none;
  background-color: #ffffff;
  text-decoration: none;
  }
  
  
  img
{  border-style: none;
}

hr {
  border: 0;
  width: 100%;
  color: #8CB8E2;

height: 1px;

}