/*  
Theme Name: City of Beavercreek
Theme URI: http://www.ci.beavercreek.oh.us/
Description: City of Beavercreek Theme
Version: 1.0
Author: Ingenesis Limited
Author URI: http://www.ingenesis.net/
*/

@import "core.css";

/**
 * Base Typography & Colors
 **/
 
body { background: #000; color: #cccbc5; font: 13px/1.3 "Tahoma","Arial","Helvetica",sans-serif; } 
a { text-decoration: none; }
a:hover { }
p { margin-bottom: 15px; }
h1 {  }
h2 {  }
h3 { font: 24px "Arial","Helvetica",sans-serif; color: #fff; margin-bottom: 20px; }
h3 strong { color: #a2dbec; text-transform: uppercase; }
h4 {  }

/**
 * Header
 **/

#header { background: #000; width: 769px; margin: 0 auto ; position: relative; }

#navigation { text-transform: uppercase; font: 12px "Tahoma","Helvetica","Arial",sans-serif; margin: 15px 0 0 20px; color: #fff; }
#navigation a { color: #fff; }
#navigation li { float: left; margin-right: 15px; padding: 5px 5px; }
#navigation li.active { background: #c9c9c9; }
#navigation li.utilities { margin-right: 30px; padding: 0; }
#navigation li.utilities li { margin-right: 5px; padding: 0; }

#menus { position: relative; clear: both; background: #c9c9c9; font: bold 11px "Tahoma","Helvetica","Arial",sans-serif; padding: 10px; }
.submenu { float: left; position: absolute; }
.submenu li { float: left; }
.submenu a { display: block; color: #555; padding: 5px 10px; width: 167px; }
.submenu a:hover { color: #111; background: #bbbbbb; }

#cob  { background: url('images/cobbg.png') repeat-x left; height: 45px; width: 769px; position: relative; clear: both; }
#cob h1 { padding: 8px 0 0 20px; }
#beaver { position: absolute; top: 7px; right: 13px; z-index: 1; }

/**
 * Homepage
 **/
 
#homepage { background: #296171; width: 769px; margin: 0 auto; position: relative; }
#homepage .container { margin: 20px 0 0 0; padding-bottom: 50px; padding-left: 40px; }
#homepage a { color: #fff; }
#homepage h3 { margin-bottom: 10px; }

#homepage .headline { width: 285px; float: left; }
#homepage .headline p strong { color: #fff; font-weight: bold; text-align: center; }
#homepage .headline p { width: 200px; padding-bottom: 5px;  }
#homepage .headline p { text-align: justify; } 

#homepage .headline.recentevents { padding-left: 40px; width: 370px; font-size: 11px; }
#homepage .headline.recentevents p { padding: 0; margin-bottom: 0; }
#homepage .headline.recentevents ul ul li { margin-bottom: 20px; padding-right: 15px; } 
#homepage .headline.recentevents li { float: left; }
#homepage .headline.recentevents p.morenews { margin-bottom: 20px; }
#homepage .headline.recentevents p.morenews a { font-weight: bold; }

/**
 * Content
 **/

#content { background: #296171 url('images/contentbg.jpg') repeat-x; width: 769px; margin: 0 auto; position: relative; }
#content a,strong { color: #fff; font-weight: bold; }
#content ul { list-style-type: disc; padding-left: 30px; padding-bottom: 10px; }
#content ol { list-style-type: upper-roman; padding-left: 30px; padding-bottom: 10px; }
#content ol li ol { list-style-type: upper-alpha; }
#content em { font-style: italic; } 

#content table tr.even td { background: #254d59; }
#content table tr.head td { background: #541c1c; }

#content .beavertail { position: relative; background: url('images/beaver.png') no-repeat left -38px; width: 46px; height: 40px;  left: 709px; }

#content > .beavertail { display: none; }

#content .widefat,#content .column { padding: 15px 20px; }

#content .column { width: 431px; float: left; overflow: hidden; }
#content .column.first { padding-right: 0; }
#content h3 strong { color: #a2dbec; text-transform: uppercase; }

#content .column.second { padding-left: 0; }

#content .column img { border: 3px solid #fff; margin-top: 50px; } 
#content .column.photo { width: 278px; overflow: hidden; text-align: center; }

#homepage .image { overflow: hidden; width: 131px; height: 50px; border: 3px solid #fff; }
#homepage .image p { width: auto; height: auto; margin: 0; }
#homepage .headline .image.featured { width: 218px; height: 154px; }

/**
 * Forms
 **/
form ul { width: 100%; clear: both; line-height: 1; }
form ul li { text-indent: 0; clear: both; display: block; padding: 4px 0; margin: 0; }
form label { clear: both; display: block; }
form ul li label.inline { display: inline; clear: none; }
form ul li:before { content: ""; }
form ul li div.inline { width: auto; clear: both; }
form ul li div.inline input { width: auto;  }
form ul li div.inline label { clear: none; display: inline; }
form ul li span input { margin: 0 0 5px 0; }
form ul li div input,
form ul li div select { width: 100%; }
form ul li div.left { display: inline; width: 47%; float: left; margin: 0; clear: left; }
form ul li div.right { display: inline; width: 47%; float: right; margin: 0; clear: right; }
form ul li.half { display: inline; width: 47%; float: left; clear: none; }
form ul li.half.right { display: inline; float: right; }
form ul li span { float: left; padding: 0 5px 0 0; display: inline-block; text-align: left; }
form ul li span label,
form div label { clear: both; }

#content form p,em { color: #fff; }
#content form ul { padding-left: 0; width: 400px; }
form label { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 5px; }
form span label,
form div label { font-size: 12px; font-weight: normal; margin-bottom: 8px;}
form p.submit { text-align: right; }

/**
 * Footer
 **/

#footer { background: #000 url('images/footerbg.jpg') repeat-x; width: 769px; height: 300px; margin: 0 auto; position: relative; }

#sitemap { float: none; clear: both; line-height: 1.2; list-style: none; padding: 20px 5px 0 20px; }
#sitemap li { float: left; padding: 5px 20px 0 0;   }
#sitemap li.right { float: right; display: inline; position: relative; right: 0; top: 0; }
#sitemap ul { clear: both; }
#sitemap li ul { margin-bottom: 14px; list-style: none; padding: 0; }
#sitemap ul li { position: relative; float: none; margin: 0; padding: 0;}
#sitemap li a { display: inline; color: #cbe4f8; text-transform: uppercase; font-weight: bold; }
#sitemap ul li a { display: inline; color: #cbe4f8; text-transform: none; font-weight: normal; }
#sitemap ul li a:hover { color: #ecebf3; font-style: italic; }