/* 

CSS Document for The Villages of Detroit
Author: Todd Ridley
Company: A Few Good Marketers


BASIC COLOR PALETTE

FONT: #333333
LINKS: #4197D0
BACKGROUND: #005E8A
TOP NAV: #97C4E4

*/

/*
						RESET												
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0;outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}


body {margin:0px; background-color:#005E8A; font-family: "Times New Roman", Times, serif; color:#333; font-size: 12px;}
a {text-decoration: none; color:#4197D0;}

.alignright {float:right; padding: 0 0 20px 20px;}
.alignleft {float:left; padding: 0 20px 20px 0;}
.wp-caption-text {font-size: 10px; font-style:italic; color:#666; line-height: 12px; padding-top: 5px;}

.clear {clear:both;}

.topnav {background: #97C4E4; text-align:center; font-size: 13px; color:#FFF;}
.topnavcontainer {width: 940px; margin-left: auto; margin-right: auto; padding-right:0px;}
.topnavcontainer a {color:#FFF; text-decoration: none;}
.topnavcontainer ul {list-style: none; padding:0px; margin: 0px;}
.topnavcontainer li {float: right; padding: 7px 10px; border-right: 1px solid #86B9DF;border-left: 1px solid #B4D3EB;}
.topnavcontainer li#charrette {padding-left: 30px; background:url(../images/backgrounds/charrette.gif) no-repeat 10px 7px;}
.topnavcontainer li#greenways {padding-left: 78px; background:url(../images/backgrounds/greenways.gif) no-repeat 10px 7px;}
.topnavcontainer li#livinginthev {padding-left: 30px; background:url(../images/backgrounds/livinginthev.gif) no-repeat 10px 5px;}
.topnavcontainer li#why {border-left: none; background:url(../images/backgrounds/why.gif) no-repeat;}
.topnavcontainer li#why span {font-family: "Arial Black"; line-height: 0px;}
.topnavcontainer li#social {border-right:none; height:16px;}
.topnavcontainer li#social a {padding: 0px 5px 0px 5px; width: 14px; margin:0px;}
.topnavcontainer li#social a:hover {background: url(../images/backgrounds/social.png) no-repeat center;}
.topnavcontainer li#search1 {border-left:none; padding-left:5px; padding-bottom:7px;}
.topnavcontainer li#search2 {border-right:none; padding-right: 0px; padding-left:15px; padding-right:5px; padding-top: 6px; padding-bottom:6px; height:18px; background:url(../images/backgrounds/search.png) no-repeat 12px 7px;}
.topnavcontainer li#search2 input {width: 95px; height:16px; font-family:"Times New Roman", Times, serif; font-size:12px; padding:1px 2px 0px 2px; margin:0px; background:none; overflow: visible;color:#4197D0; border:none;}

.topnavpop {background: url(../images/backgrounds/topnavpop.jpg) repeat-x; text-align:center;}
.topnavpopnav {width: 980px; margin-left: auto; margin-right: auto; margin-bottom: 0px;}
.topnavpopnav p {font-size: 14px;}
.topnavpopnav p a {color: #333;}
.topnavpopnav p a:hover {text-decoration: underline;}
.topnavpopnav p.link {width: 950px; padding-right: 30px; float: left; text-align:right;}
.topnavpopnav p.link span {font-family: "Arial Black"; line-height: 0px;}

.maincontent {background: url(../images/backgrounds/main.jpg) center top no-repeat;}
.contentwrap {background:#FFF; width:980px; margin-left:auto; margin-right:auto; min-height: 450px;}
.navlogo {width: 310px; float:left; padding:20px 0 0 30px;}
.navwrap {width:640px; float:left; padding-bottom:30px;}


#socialcontainer {width: 640px; float:left;}

#tools {font-size: 16px; text-align:right; padding: 18px 37px 12px 0; color:#4197D0; float:left; width: 445px;}
#tools a {text-decoration:underline;}

#fblike {float:left; width: 120px; margin: 18px 20px 0 0;}
.blogsocial { padding: 0 0 20px 0;}


#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	background:none;
	width: 640px; clear:both;
}

#nav a {
	display: block;
	width: 160px;
	color:#333333;
}

#nav a:hover {text-decoration: underline;}

#nav li { /* all list items */
	float: left;
	width: 160px; /* width needed or else Opera goes nuts */
	background:none;
	font-size: 16px;
}
#nav li a {width: 160px; padding: 18px 0 10px 0; text-align: center; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; font-size: 18px; line-height:20px; background: url(../images/backgrounds/menuoff.png) no-repeat center;}
#nav li a:hover {background: url(../images/backgrounds/menuhover.png) no-repeat center;} 

#nav li ul { /* second-level lists */
	position: absolute;
	border: none;
	text-align:center;
	width: 160px;
	padding-bottom: 15px;
	left: -999px; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	background: url(../images/backgrounds/menudrop.png) no-repeat center;
}
#nav li ul li {}
#nav li ul li a {font-size: 13px; font-family:"Times New Roman", Times, serif; padding: 5px 0; background:none;}
#nav li ul li a:hover {background:none;}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

#content {
	clear: both;
	color: #ccc;
}


.footer {background: #005E8A url(../images/backgrounds/footer.jpg) no-repeat; padding:20px 30px 40px 30px;color:#FFF; float:left;}
.footer a {color:#9CC9E7;}
.footer a:hover {text-decoration:underline;}
.footer p {padding: 20px 0 0 0;}
.footer p.links {color:#9CC9E7; padding: 5px 0 0 0;}
.footer p.description {width: 500px;}
.footer div.left {width:555px; font-size: 16px; float:left;}
.footer div.right {width:365px;float:left; text-align: right; font-size: 28px; color:#9CC9E7;}
.footer div.right p {padding: 0px;}
.footer div.right p.credits {font-size: 16px; color: #FFF; padding-top: 64px;}

/*.posts {width:916px; padding:0px 32px 30px 32px; background-color:#FFFFFF; float:left;}*/

.post {background-color: #FFF;}

.post h1 {font-family:Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight:normal;}
.post h1 {font-family:Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight:normal;}
.post div.meta {padding: 5px; font-size: 9px; font-family:Verdana, Arial, Helvetica, sans-serif; border-top: dashed 1px #EAEAEA; border-bottom: dashed 1px #EAEAEA; margin-top: 10px; background:#FCFCFC;margin-bottom: 20px; width: 680px; float:left;}
.post div.meta p {padding-right: 10px; text-align: left;}

.post div.content {font-size: 14px; line-height: 24px;}
.post div.content p {padding-bottom: 20px;}
.post div.content ul {padding: 10px 0 20px 10px;}
.post div.content li {list-style:square inside;}
.post div.content img#float {float:right; padding: 0 0 20px 20px;}
.post div.content h1 {font-size:28px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; padding: 0 0 20px 0;}
.post div.content p.homehead {font-size:28px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; padding: 0 0 20px 0;}
.post div.content strong {font-size:20px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; padding: 20px 0 20px 0;}

.comments {font-size: 14px; float:left; width: 920px; padding-top: 20px;}
.comments p {padding-bottom: 20px;}
.comments p.formfield1 {padding-bottom: 30px; float:left; width:306px;background-color: #33FF00; background: url(../images/backgrounds/form1.gif) no-repeat left 35px;}
.comments p.formfield2 {padding-bottom: 30px; float:left; width:306px;background-color: #33FF00; background: url(../images/backgrounds/form2.gif) no-repeat left 35px;}
.comments p.formfield3 {padding-bottom: 30px; float:left; width:306px;background-color: #33FF00; background: url(../images/backgrounds/form3.gif) no-repeat left 35px;}
.comments h2 {text-transform:uppercase; font-size: 16px; font-weight:normal; padding-bottom: 20px;}
.comments h3 {text-transform:uppercase; font-size: 16px; font-weight:normal; padding-bottom: 20px;padding-top: 20px; border-top: dashed 2px #CCC;}
.comments span {font-size: 12px; font-style:italic; color: #999;;}
.comments label {text-transform:uppercase; font-size: 16px; font-weight:normal; color:#999; padding-bottom: 10px;}
.comments input {padding: 5px 8px 5px 8px; margin-right: 10px; font-size: 18px; color:#4197D0; font-family: "Times New Roman", Times, serif; border: none; background-color:#EAEAEA; width: 270px;}
.comments textarea {padding: 5px 8px 5px 8px; font-size: 18px; color:#4197D0; font-family: "Times New Roman", Times, serif; background-color:#EAEAEA;border: none; width: 883px; height:100px;}

.commentslink {font-size: 16px; padding-bottom: 20px; margin-bottom: 30px; border-bottom: dashed 2px #CCC;}

.commentlist li { list-style: none;}
.commentlist li p {background: #EAEAEA; padding:15px; margin:0px;}
.commentlist li p.author {padding: 10px 0 30px 550px; background:#FFF url(../images/backgrounds/comment.gif) no-repeat 485px top; }

.sidebarmain {float:right; padding: 0 0 20px 15px; width:171px;}
.sidebarmain img {padding-bottom: 20px;}

#sidebar {width: 160px; float:right; padding: 0 0 0 20px; margin: 0 0 30px 20px; border-left: 1px solid #CBE1F1; background-color:#FFF;}
#sidebar ul {list-style: inside square; font-size: 16px; padding-bottom: 20px;}
#sidebar ul li.categories {list-style:none; font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color:#666666;}
#sidebar ul li#archives {list-style:none; font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color:#666666;}
#sidebar ul li.linkcat {list-style:none; font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color:#666666;}


/*background:url(../images/backgrounds/footer.jpg) no-repeat center top*/


/* PAGE */

.page {width:916px; padding:0px 32px 30px 32px; background-color:#FFFFFF; float:left;}

/* search */

.search {width:916px; padding:100px 32px 30px 32px; background-color:#FFFFFF; float:left;background:url(../images/backgrounds/searchresults.gif) no-repeat top center;}

/* blog */

.blog {width:916px; padding:100px 32px 30px 32px; background-color:#FFFFFF; float:left; background:url(../images/backgrounds/blog.gif) no-repeat top center;}

.resource {float:right; width: 450px; padding: 20px; margin: 0 0 30px 30px; background-color:#97C4E4;}
.resourcecenter {float:right; width: 410px; padding: 20px; background-color:#FFF;}
.resourcecenter table {background: #FFF;}
.resourcecenter table input {padding-top: 20px;}

.resources { width: 380px; float:right; padding: 0 20px 20px 20px; background: #97C4E4; margin: 0 0 30px 30px;}
.resources a {text-decoration: underline; color:#333333;}
.resources a:hover {color:#000;}

.resources div.rowtop {float: left; width: 360px; padding: 10px; color:#FFF; font-style:italic; text-align:center; font-weight:bold; font-size:16px;}
.resources div.rowtop div {float:left;}
.resources div.rowtop div.rowa {width: 185px; padding: 0 10px 0 0;}
.resources div.rowtop div.rowb {width: 45px;}
.resources div.rowtop div.rowc {width: 120px;}

.resources div.row {float: left; width: 360px; background:#FFF; padding: 10px; margin-bottom: 5px; line-height: 18px; }
.resources div.row div {float:left;}
.resources div.row div.rowa {width: 185px; padding: 0 10px 0 0;}
.resources div.row div.rowb {width: 45px; text-align: center; padding-top: 5px;}
.resources div.row div.rowc {width: 120px; text-align: center;}

.resources div.rownote {float: left; width: 360px; padding: 3px 10px 15px 10px; color: #333333; font-style:italic; text-align:center; font-weight:bold; font-size:16px; line-height: 16px;}

.resourcestitle {float: left;width: 360px; padding: 20px; color:#FFF; font-size: 44px; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; letter-spacing:-1px;}