body {
font-family: helvetica, arial, sans-serif;
font-size: 11px;
}

ul, li, img {
list-style: none;
margin: 0; padding: 0;
}

#slider {
   	padding-top: 3px;
   	padding-left: 3px;
   	width: 496px; /* important to be same as image width */
   	height: 200px; /* important to be same as image height */
   	position: relative; /* important */
   	overflow: hidden; /* important */

}

#sliderContent {
   width: 496px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 2; /* important */
   margin-left: 2; /* important */
}

.sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.sliderImage span {
   position: absolute; /* important */
   padding: 10px 13px;
   width: 496px; /* width of image minus left and right padding. Needed for IE */
   background-color: #000;
   filter: alpha(opacity=40); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   left: 0;
   bottom: 0;
}

.clear {
   clear: both;
} 
#header {
	height: 550px;
	width: 820px;
	margin: 0 auto;
	text-align: center;
}

#logo {
	padding-bottom: 5px;
	text-align: left;
	height: 112px;
	width: 820px;
}

#rotator {

	width: 502px;
	height: 208px;
	border-color: #e8e8e8;
	border-width: 1px;
	border-style: solid;
	text-align: center;
	float: left;

}

#menu {
	background-repeat: no-repeat;
	background-position: right center;
	background-image: url(http://theevolutionofdesign.com/sites/jjohnston/images/judyjohnstonsite_06.png);
	color: #707070;
	text-align: left;
	font-size: 30px;
	font-family: "Lucida Bright";
	float: right;
	width: 300px;
	height: 209px;
}

#featuredbox {
	clear: both;
	text-align: center;
	height: 160px;
	width: 100%;
}

#menu a {
	color: #707070;
	text-decoration: none;
}

#menu a:hover {
	color: #333333
}

#featuredwrapper {
	background-position: center center;
	margin-top: 0px;
	margin-left: 40px;
	height: 150px;
	width: 730px;
	vertical-align: bottom;
}

.main {
	margin-top: 0px;
}

#featuredmenu {
	color: #707070;
	padding-top: 8px;
	padding-left: 15px;
	text-align: left;
	font-size: 18px;
	font-family: "Lucida Bright";
	float: left;
	clear: both;
	height: 150px;
	width: 200px;
}

#featuredoptions {
	float: right;
	height: 150px;
	width: 500px;
}

#featuredmenubox {
	float: left;
	background-position: center center;
	background-repeat: no-repeat;
	height: 150px;
	width: 200px;
	background-image: url(http://theevolutionofdesign.com/sites/jjohnston/images/featuredmenu.png);
}

#featuredoption1 {
	padding-top: 25px;
	text-align: center;
	height: 100px;
	width: 500px;
}

#featuredoption2 {
	visibility: hidden
	background-color: white;
	padding-top: 25px;
	text-align: center;
	height: 100px;
	width: 500px;
}

#featuredoption3 {
	visibility: hidden
	background-color: white;
	padding-top: 25px;
	text-align: center;
	height: 100px;
	width: 500px;
}

#featuredmenu a {
	text-decoration: none;
	color: #707070;
}
#featuredmenu a:hover {
	color: #333333;
}
#featuredoption1 img {
	padding-right: 7px;
	padding-left: 7px;
}
#featuredoption2 img {
	padding-right: 7px;
	padding-left: 7px;
}
#featuredoption3 img {
	padding-right: 7px;
	padding-left: 7px;
}
#featuredoptions a {
	text-decoration: none;
}
#content {
	clear: both;
	text-align: center;
	border-style: solid;
	width: 100%;
	border-color: #e8e8e8;
	border-width: 1px;
	
}
#contenttitlewrapper {
	margin-left: 10px;
	height: 85px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(http://www.theevolutionofdesign.com/sites/jjohnston/images/titlebg.png);
	margin-top: 10px;
	width: 800px;
}
#contenttitle {
	height: 35px;
	max-width: 400px;
	text-decoration: none;
	float: left;
	padding-top: 15px;
	padding-left: 10px;
	font-size: 30px;
	font-family: Georgia;
}
#author {
	padding-top: 32px;
	text-align: left;
	font-size: 15px;
	font-family: Georgia;
	padding-right: 30px;
	float: right;
	height: 20px;
	width: 350px;
}
#postcontent {
	font-size: 14px;
	font-family: Georgia;
	margin-left: 10px;
	text-align: left;
	width: 800px;
}
#contentspacer {
	clear: both;
	height: 15px;
	width: 500px;
}
#footer {
	clear: both;
}
#contenttitle a {
	color: #191919;
	text-decoration: none;
}
#logo a {
	text-decoration: none;
}

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */