/*
Theme Name: Maywood Park
Theme URI: http://sebnitu.com/
Description: A minimalist, typographic design for the Maywood Park website.
Version: 1.0
Author: Sebastian Nitu
Author URI: http://sebnitu.com/
Tags: typographic, minimalist, two columns, light, soft

This theme is to be used only for the City of Maywood Park website along with all files attached. All rights reserved. If you would like to learn more about having a custom theme built for your website, please visit my website at: www.sebnitu.com
*/

/* ----- global styles ----- */

html { text-align: center; }

hr { border: 0 none; clear: both; height: 0; visibility: hidden; }

strong { font-weight: bold; }

em { font-style: italic; }

a { color: #1f77ae; text-decoration: none; }
a:hover { color: #489dd2; }

.btn a { background: url(images/black-btn.png) no-repeat left bottom; }
.btn a span { background: url(images/black-btn.png) no-repeat right bottom; }

.btn-tan a { background: url(images/black-btn-tan.png) no-repeat left bottom; }
.btn-tan a span { background: url(images/black-btn-tan.png) no-repeat right bottom; }

.btn a:hover { color: #e0ddd3; }

.btn a { display: block; float: left; padding: 0 0 0 13px; color: #fff; text-decoration: none; }
.btn a span { display: block; float: left; padding: 0 13px 0 0; }

.btn-tan a:hover { color: #e0ddd3; }

.btn-tan a { display: block; float: left; padding: 0 0 0 13px; color: #fff; text-decoration: none; }
.btn-tan a span { display: block; float: left; padding: 0 13px 0 0; }

.btn { float: right; line-height: 28px; margin-top: 10px; }
.btn-tan { float: right; line-height: 28px; margin-top: 10px; }

/* ----- structure styles ----- */

body {
	background: #efede7;
	text-align: left;
	}
	
.container {
	width: 840px;
	margin: 0 auto;
	position: relative;
	height: 100%;
	}

#header {
	background: #e9f3f3;
	border-bottom: 3px solid #525252;
	}

#main {
	background: #ffffff url(images/main-background.png) repeat-x top;
	}

#footer {
	background: url(images/footer-background.png) repeat-x top;
	}

.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .column-13, .column-14 {
	margin-left: 10px;
	margin-right: 10px;
	float: left;
	display: inline;
	}

.column-1 { width: 40px; }
.column-2 { width: 100px; }
.column-3 { width: 160px; }
.column-4 { width: 220px; }
.column-5 { width: 280px; }
.column-6 { width: 340px; }
.column-7 { width: 400px; }
.column-8 { width: 460px; }
.column-9 { width: 520px; }
.column-10 { width: 580px; }
.column-11 { width: 640px; }
.column-12 { width: 700px; }
.column-13 { width: 760px; }
.column-14 { width: 820px; }
	
/* ----- typography styles ----- */

body {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	color: #525252;
	line-height: 21px;
	}
	
h1, h2, h3, h4, h5, h6 { color: #272b2d; font-family: Georgia, serif; }

h1 { font-size: 38px; line-height: 38px; }
h2 { font-size: 28px; line-height: 28px; }
h3 { font-size: 22px; line-height: 38px; }

#banner #featured-content h1, #content #recent-news h2, #content #gallery h2, #content #links h2, #content #sidebar h2 {
	border-bottom: 1px solid #525252; padding-bottom: 10px; margin-bottom: 10px;
	}

p { margin-bottom: 10px; }

/* ----- header styles ----- */

#header #logo-icon {
	background: url(images/logo-icon-trans.png) no-repeat top center;
	text-indent: -9999px;
	height: 128px;
	width: 160px;
	margin: 28px 10px 0;
	float: left;
	display: inline;
	}
	
#header h1#logo-text {
	background: url(images/logo-text-trans.png) no-repeat top left;
	text-indent: -9999px;
	width: 640px;
	height: 32px;
	margin: 30px 10px 0;
	float: left;
	display: inline;
	}
	
#header ul#nav {
	font-family: Georgia, serif;
	font-size: 14px;
	margin: 40px 10px 0;
	float: left;
	display: inline;
	width: 640px;
	}
	
#header ul#nav li {
	float: left; display: inline;
	border-top: 1px solid transparent;
	}
	
#header ul#nav li:hover {
	border-top: none;
	}
	
#header ul#nav li a {
	border-top: 1px solid #525252;
	color: #525252;
	text-decoration: none;
	padding: 0 24px;
	line-height: 40px;
	display: block;
	}
	
#header ul#nav li a:hover {
	border-top: 2px solid #1f77ae;
	color: #1f77ae;
	}
	
#header ul#nav li.current_page_item a {
	background: #fff;
	}

#header #search-site {
	font-size: 12px;
	float: right;
	margin-top: 20px;
	display: inline;
	}


/* ----- main styles ----- */

/* banner */

#main #banner {
	padding: 35px 0 15px;
	border-bottom: 1px solid #e0ddd3;
	}
	
#main #banner #featured-img, #main #banner #featured-content {
	float: left;
	}

/* content */

#main #content {
	padding: 35px 0;
	}
	
#main #content #gallery .flickr_badge_image {
	display: inline;
	}
	
#main #content #gallery .flickr_badge_image a img {
	border: 5px solid #e0ddd3; margin: 15px 20px 0 0;
	}
	
#main #content #gallery .flickr_badge_image a img:hover {
	border: 5px solid #d1cec3;
	}
	
#recent-news ul li a.news-title, #links ul li span.news-title {	
	font-family: Georgia, serif;
	font-size: 16px;
	}
	
#recent-news ul li, #links ul li {
	border-bottom: 1px solid #e0ddd3;
	margin-bottom: 10px;
	}
	
a.r-link {
	border: 1px solid #e0ddd3;
	background: #efede7;
	display: block;
	float: left;
	padding: 2px 10px;
	margin: 15px 0;
	color: #525252;
	}
	
a.r-link:hover {
	background: #e9f3f3;
	border: 1px solid #cee0e0;
	}

/* page styles */

#content #main-content .postEntry h2, #content #main-content #featuredPost h2 {
	border-bottom: 1px solid #525252;
	border: none;
	}

#content #main-content #featuredPost {
	}

#content #main-content .postInfo {
	font-style: italic;
	}
	
#content #main-content #featuredPost {
	border-bottom: 1px solid #E0DDD3;
	margin: 20px 30px 20px 0;
	padding: 10px 0;
	}
	
#content #main-content .postEntry {
	border-bottom: 1px solid #E0DDD3;
	margin: 20px 30px 20px 0;
	padding: 10px 0;
	}
	
#content #main-content #articleContent {
	margin: 0 30px 0 0;
	}

small.postData {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 9px;
	padding: 2px 0;
	margin: 5px 0;
	display: block;
	letter-spacing: 2px;
	}
	
/* images styles */

.image-group {
	background: #EFEDE7;
	border: 1px solid #E0DDD3;
	padding: 0 0 10px 10px;
	float: left;
	width: 224px;
	margin-right: 20px;
	}

.image-group p {
	margin-bottom: 0;
	}
	
.image-group h3 {
	font-size: 10px;
	font-family: Verdana;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 16px;
	margin-top: 10px;
	border-bottom: 1px solid #E0DDD3;
	color: #96948b;
	margin-right: 10px;
	}

.image-group a img {
	margin: 10px 10px -5px 0;
	width: 100px;
	height: 100px;
	border: 1px solid #E0DDD3;
	}
	
.image-group a:hover img {
	border-color: #c1beb4;
	}


/* comments styles */

textarea#comment {
	width: 500px;
	}

/* calendar styles */

#tooltip h3 strong, #tooltip h3 br {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	}
	
/* sidebar styles */

#sidebar .sideItem {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #E0DDD3;
	}
	
#content #sidebar .sideItem h2 { 
	padding-top: 10px; 
	border-bottom: none;
	margin-bottom: 0px;
	}
	
#sidebar #subscribe ul li {
	display: inline;
	}
	
#sidebar #archive ul li a {
	background: #efede7;
	border: 1px solid #e0ddd3;
	color: #525252;
	display: block;
	padding: 2px 10px;
	margin-bottom: 5px;
	}
	
#sidebar #archive ul li a:hover {
	background: #e9f3f3;
	border: 1px solid #cee0e0;
	}

/* ----- footer styles ----- */

#footer .container {
	padding: 40px 0;
	}

#footer .right-side {
	float: left;
	border-left: 1px solid #525252;
	padding-left: 10px;
	}
	
#footer #contact-info h3, #footer #meta-data h3 {
	font-size: 18px;
	padding-right: 10px;
	float: left;
	display: block;
	text-align: right;
	}
	
#footer .contact-right {
	width: 200px;
	}
	
#footer .meta-right {
	width: 80px;
	}
	
#footer #copyright {
	text-align: right;
	float: right;
	}