/* CSS Document */

body {
   background: #FAED9E;
   color: #454545;
   font-family: Veranda, Helvetica, Arial;
   font-size: 14px;
   margin: 0 auto;
}

a, a:visited, a:active {
   color: #000000;
}

a:hover {
   color: #FF0000;
}

#header {
   width:780;
   /*uncomment the next line and insert your header image as a background if desired.*/
   /* background-image: url('http://yourdomain.com/path/to/image.gif');*/
   align:center;
   text-align: center;
}

#page {
   /*I do not recomend using dynamic widths with the css templates as they can have unpredictable behavior
   //from browser to browser. Thus they all have fixed widths. I have fixed the width at 780px to accomodate
   //the some 90% of surfers who still surf at that resolution. If you want to use a variable width template start from
   //the HTML vanilla and "colorize" it to suit. If you want to design for wider screen resolutions (bad idea) then
   //increase the width here to the width of your page. Then also increase the width of the #content declaration
   // and the #sidebar declaration. Remember to make the sum of those two less than the value of the #page.
   //margins, borders, padding and browser rendering will throw these numbers off some.*/
   width:780px;
   text-align: left;
}

#content {
   width:520;
   margin: 5px;
   float:left;
}

#sidebar {
	margin: 5px;
	padding: 5px;
	float:left;
	width: 175px;
	border: 2px dashed #D77C02;
	background-color: #FFD004;
}

#post {
   background: #ffffff;
   padding: 5px;
   margin: 5px;
   border: 2px dashed #999999;
}

#post_title {
   border-bottom: 1px solid #454545;
   font-size: 16px;
}

h1 {
   font-size: 20px;
   color: #000000;
   font-weight: bold;
}

h2 {
   font-size: 18px;
   color: #000000;
   font-weight: bold;
}

h3 {
   font-size: 16px;
   color: #000000;
   font-weight:bold;
}

img {
   border: 0;
}