/*
Theme Name: Jenko
Theme URI: http://www.vooshthemes.com
Description: A Premium Business Theme Developed By Voosh Themes. Please look at the <a href="../wp-content/themes/jenko/instructions/instructions.html">instructions</a> that are included with the file you downloaded <a href="../wp-content/themes/jenko/instructions/instructions.html">(jenko/instructions/instructions.html)</a> for details about how to configure this theme. 
Author: Voosh Themes
Author URI: http://www.vooshthemes.com
*/

/* Colors: Red - #f03326 */

@import "styles/reset.css";

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap { width: 960px; margin: 0 auto; }
body { font-family: 'Vollkorn', times, serif; background: url(images/main-bg.jpg) repeat; color: #555; }
h1 { font-size: 38px; margin: 0 0 30px 50px; }
h2 { font-size: 34px; margin: 30px 0 0px 0; }
h3 { font-size: 24px; margin: 45px 0 15px 0; }
h4 { font-size: 20px; margin: 30px 0 15px 0;}
h5 { font-size: 18px; margin: 18px 0 5px 0;}
p { font-size: 16px; line-height: 26px; margin: 0 0 5px 0; }
a { text-decoration: none; color: #f03326; }
a:hover { color: #555; }
.title { margin-top: 0; color: #666; }
.hide { display: none; }
.cache-images { display: none; }

/* ----------- */
/* -- Tools -- */
/* ----------- */
.horizontal-line { clear: both; background: url(images/horizontal-line.png) no-repeat; width: 965px; height: 15px; margin: 0 0 0 -4px;  }
.vertical-line { float: left; background: url(images/vertical-line.png) no-repeat; width: 15px; height: 185px; margin: 0 42px; }

/* ---------------- */
/* -- Top Banner -- */
/* ---------------- */
#top-banner { background: url(images/top-banner-bg.png) repeat-x; width: 100%; height: 50px; margin: 0 0 0 0; }
p.quote { background: url(images/top-banner-text-bg.png) repeat-x; width: 971px; height: 45px; margin: 0 auto; text-align: center; color: #fff; padding: 11px 0; margin-top: -35px; }

/* ----------- */
/* -- Header -- */
/* ----------- */
#header { float: left; width: 100%; margin-top: 16px; text-align: center; }
#header img { padding-bottom: 42px; }
#header h1 { padding: 10px 0 15px 0; font-size: 60px; }
#header h1 a { color: #555; }

/* --------- */
/* -- Nav -- */
/* --------- */
#nav { float: left; text-align: left; width: 100%; margin: 0 0 50px 0; background: url(images/nav-bg.png) repeat-x; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid;  }
.menu {	float: left; position: relative; left: 50%; height: 21px; padding: 20px 0; }
.menu li { float: left; position: relative; right: 50%; font-size: 25px; padding: 0 25px; }
.menu a { display: block; margin: 0; color: #555; text-decoration: none; }
.menu .current a, .menu li:hover > a { color: #f03326; }
/* -- 2nd level -- */
.menu ul { background-color: #f0f2e4; display: none; margin: 0; padding: 0; width: 260px; height: auto; position: absolute; border: solid 1px #ddd; left: 25px; top: 25px; }
.menu ul li a:hover a, .menu li:hover li a { color: #555; }
.menu ul a:hover { background: #f03326 !important; color: #fff !important; }
.menu li:hover > ul { display: block; }
.menu ul li { float: none; margin: 0; padding: 0; }
.menu ul a { font-size: 16px; padding: 10px; }
.menu ul ul { left: 250px; top: -3px; }
.menu li.current_page_item a { color: #f03326; }
.menu .sub-menu li { float: left; position: static; right: 0%; font-size: 25px; padding: 0;  width: 100%; }
.menu .sub-menu li.current_page_item a { color: #f03326; }

/* ---------------- */
/* -- Front Page -- */
/* ---------------- */
#featured-section { clear: both; margin: 0 auto; padding-top: 5px; }
#featured-section h2 { text-align: center; color: #666; margin: 10px 0 5px 0; }
#featured-section #featured-box { background: url(images/featured-bg.png) repeat-x; height: 280px; margin: 20px 0 0 0; border: 1px #ddd solid; }
#featured-section #featured-box #featured-content { float: left; width: 420px; padding: 30px 20px 30px 30px; color: #666; }
#featured-section #featured-box #featured-content h3 { margin: 0 0 30px 0; font-size: 30px; border-bottom: 1px #ccc dotted; padding-bottom: 10px; }
#featured-section #featured-box #featured-content p { font-size: 18px; line-height: 26px; margin-bottom: 20px; }
#featured-section #featured-box #featured-content span { color: #444; }
#featured-section #featured-box #featured-content a { font-size: 18px; }
#featured-section #featured-box #featured-project { float: right; border-left: 1px #ddd solid; } 
#services { float: left; margin: 55px 0 0 0; }
#services .service { float: left; width: 430px; padding-left: 100px; margin: 0 0 40px 0; }
#services .first { padding-left: 0; }
#services .service img { float: left; padding: 0 20px 0 0; }
#services .service h3 { font-size: 26px; color: #666; margin: 5px 0 0 0;}
#services .service p { margin: 20px 0 0 0; line-height: 28px; }
#latest { float: left; margin: 45px 0 -55px 0; }
#latest h3 { margin: 0 0 28px 0; }
#latest .article-link { display: block; font-size: 18px; margin: 0 0 2px 0; }
#latest .meta { font-size: 18px; color: #888; margin-bottom: 10px; }
#latest p { font-size: 16px; }
#latest #latest-article { float: left; width: 430px; }
#latest #latest-tweet { float: right; width: 430px; }
#twitter_update_list li { list-style-type: none; font-size: 16px; line-height: 26px; }
#twitter_update_list li a { font-size: 16px !important; }
#twitter_update_list span { margin-right: 20px; }
#latest .update { margin: 28px 0 0 0; }

/* ------------- */
/* -- Content -- */
/* ------------- */
#main { clear: both; float: left; width: 100%; margin: 20px 0 0 0;  }
#content { float: left; width: 675px; }

/* --------------- */
/* -- Portfolio -- */
/* --------------- */
#portfolio { float: left; }
#portfolio .project { float: left; width: 430px; margin: 0 0 50px 100px; }
#portfolio .first { clear: both; margin-left: 0; }
#portfolio .project p { margin-bottom: 2px; }
#portfolio .project img { border: 1px #ddd solid; }
#project-content { float: left; width: 400px; }
.project-screenshot { float: right; }

/* -------------- */
/* -- Articles -- */
/* -------------- */
h3.post-meta { margin: -10px 0 20px 0; padding: 0; color: #888; }
.post { padding: 0 0 20px 0; }
.more-link { display: block; margin: 10px 0 0 0; }

/* ------------- */
/* -- Sidebar -- */
/* ------------- */
#sidebar { float: right; width: 200px; }
#sidebar h4 { margin: 3px 0 20px 0; font-size: 25px; color: #666; }
#sidebar p { font-size: 16px; line-height: 24px; }
#sidebar .sidebar-section { margin: 0 0 50px 0; }
#sidebar .sidebar-project { margin: 30px 0 0 0; }
#sidebar .sidebar-project p { margin-bottom: 2px; }
#sidebar .sidebar-project img { border: 1px #ddd solid }
#sidebar #previous-clients img { width: 200px; height: 186px; }

/* ------------------ */
/* -- Contact Form -- */
/* ------------------ */
#contact-form { margin: 20px 0 0 0; }
#contact-form fieldset { border: none; }
#contact-form input { background: url(images/input-bg.png) repeat-x; border: 1px #dddddd solid; padding: 12px 10px 10px 10px; font-size: 12px; color: #555555; font-family: Arial, Helvetica, sans-serif; margin: 0 200px 15px 0; width: 275px; font-size: 14px; }
#contact-form textarea { background: url(images/input-bg.png) repeat; border: 1px #dddddd solid; width: 515px; height: 249px; border: 1px #dddddd solid;  font-size: 12px; color: #555555; font-family: Arial, Helvetica, sans-serif; line-height: 22px; margin: 0 0 15px 0; padding: 20px 20px 0 15px; width: 450px; font-size: 14px; }
#contact-form input.submit { background: url(images/button-bg.png) no-repeat; cursor: pointer; margin: 0; color: #fff; width: 128px; height: 34px; border: none; padding: 8px 0; }
#contact-form .submit:hover { background: url(images/button-bg-hover.png) no-repeat; }
#response { background: url(images/input-bg.png) repeat; border: 1px #ccc solid; padding: 15px; color: #ff0000; }

/* -------------- */
/* -- Comments -- */
/* -------------- */
#comments { clear: both; width: 480px;  }
#comments h3 { padding-bottom: 0; }
/* actual comment styling */
.commentlist { margin: 25px 0 30px 0; }
.commentlist .comment { border: 1px solid #dddddd; padding: 15px; margin: 15px 0 0 0; background: url(images/input-bg.png) repeat; }
.commentlist .fn { color: #555555; font-size: 18px; margin-bottom: 15px; display: block; }
.commentlist .url { color: #f03326; font-size: 18px; }
.commentlist .comment-meta { color: #888888; text-transform: uppercase; font-size: 10px; margin: -4px 0 0 0; }
.commentlist img { float: right; width: 25px; height: 25px; margin: 0 0 0 7px; padding: 2px; border: 1px solid #cccccc; }
.commentlist p { margin: 10px 0 10px 0; }
.commentlist .comment-reply-link { margin: 5px 0 0 -7px; display: block; }

/* respond form */
#respond h3 { margin-bottom: 10px; }
#respond .cancel-comment-reply { padding: 0 0 10px 0; }
#commentform { width: 480px; margin: 0 0 0 0; }
#commentform input { background: url(images/input-bg.png) repeat-x; float: left; color: #555555; width: 255px; font-size: 14px; padding: 12px 12px 12px 12px; margin-bottom: 20px; font-family: arial, sans-serif; border: 1px #ddd solid; }
#commentform textarea { background: url(images/input-bg.png) repeat; color: #555555; width: 456px; height: 238px;  margin: 5px 0 0 0; font-size: 14px; padding: 12px 12px; font-family: arial, sans-serif; border: 1px #ddd solid; line-height: 20px; }
#commentform .submit { background: url(images/button-bg.png) no-repeat; cursor: pointer; margin: 25px 0 0 0; color: #fff; width: 128px; height: 34px; border: none; padding: 8px 0;  }
#commentform .submit:hover { background: url(images/button-bg-hover.png) no-repeat; color: #fff; }
#commentform label { float: left; padding: 8px 0 0 20px; text-transform: uppercase; color: #888888; font-size: 10px; }
#commentform .logged { margin: 0; }
.commentlist .comment-reply-link { margin: 10px 0 0 0; color: #f03326; font-size: 14px;  }
.commentlist .comment-reply-link:hover { color: #555; }

/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer { clear: both; float: left; margin: 80px 0 0 0; padding-bottom: 50px; }
#footer p.copyright { float:left; color: #888; font-size: 16px; padding: 5px 0 0 0; margin: 0; }
#footer a.twitter { float: right; font-size: 16px; padding: 10px 0 0 0; }