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

/* -- Color: Green - #068eb4 -- */

@import "styles/reset.css";

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap { width: 960px; margin: 0 auto; }
body { font-family: arial, sans-serif; background: url(images/main-bg.png) repeat-x; color: #666; }
h1 { font-size: 38px; margin: 0 0 30px 0; }
h2 { font-size: 34px; margin: 0 0 30px 0; }
h3 { font-size: 24px; margin: 30px 0 20px 0; }
h4 { font-size: 20px; margin: 30px 0 15px 0;}
h5 { font-size: 18px; margin: 30px 0 5px 0;}
p { font-size: 14px; line-height: 22px; margin: 0 0 15px 0; }
a { text-decoration: none; color: #068eb4; }
a:hover { color: #555; }

/* ----------- */
/* -- Tools -- */
/* ----------- */
.line { clear: both; border-bottom: 2px #eee solid; }
.hide { display: none; }
.post-line { clear: both; border-bottom: 2px #eee solid; padding: 30px 0 0 0; margin: 0 0 45px 0; }

/* ------------ */
/* -- Header -- */
/* ------------ */
#header { padding: 70px 0 0 0; }
#header h1 { font-size: 78px; margin-bottom: 0px; }
#header h2 { background: url(images/subtitle.png) no-repeat; width: 563px; height: 57px; text-indent: -9999px; }

/* --------- */
/* -- Nav -- */
/* --------- */
#nav { float: left; margin: 21px 0 0 -25px; }
.menu {	padding: 7px 6px 0 6px; }
.menu li { margin: 0 12px 7px 12px; padding: 9px;  float: left; position: relative; }
.menu a { display: block;  margin: 0; color: #444; text-decoration: none; font-size: 20px; }
.menu .current a, .menu li:hover > a { color: #068eb4; }
.menu ul li:hover a, .menu li:hover li a { color: #444; }
.menu ul a:hover { background: #068eb4 !important; color: #fff !important; }
.menu ul { background: #eee; display: none; margin: 0; padding: 0; width: 250px; position: absolute; top: 35px; left: 10px; border: solid 1px #ddd; }
.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: #068eb4; }
.menu .sub-menu li.current_page_item a { color: #068eb4; }

/* ---------------- */
/* -- Front Page -- */
/* ---------------- */
#frontpage-content #featured-section { float: left; padding: 0 0 40px 0; }
#frontpage-content { clear: both; float: left; margin: 55px 0 0 0; }
#frontpage-content #featured-section-details { float: left; width: 440px; padding: 0 60px 0 0; }
#frontpage-content #featured-section-details h2 { background: url(images/featured-title.png) no-repeat; width: 418px; height: 36px; text-indent: -9999px; margin: 0 0 0 -7px; }
#frontpage-content #featured-section-details h3 { background: url(images/featured-subtitle.png) no-repeat; width: 418px; height: 36px; text-indent: -9999px; margin: 0 0 0 -7px; }
#frontpage-content #featured-section-details p { color: #888; font-size: 18px; line-height: 26px; margin: 22px 0 35px 0; }
#frontpage-content #featured-section-details p span { color: #555; font-size: 18px; line-height: 26px; }
#frontpage-content #featured-section-details .more-details-button { display: block; background: url(images/button-bg.png) no-repeat; width: 203px; height: 48px; text-align: center; padding: 15px 0; color: #f5f5f5; }
#frontpage-content #featured-section-details .more-details-button:hover { color: #222; }

#frontpage-content #featured-section-image { float: right; padding: 6px 6px 9px 6px; background-color: #eee; border: 1px #ccc solid; margin: 6px 0 0 0; }
#frontpage-content #featured-section-image img { border: 1px #ccc solid; } 
#frontpage-content .overlay { background: url(images/overlay.png) no-repeat; width: 440px; height: 37px; margin: -55px 0 0 1px; position: relative; z-index: 2; text-align: center; padding: 7px 0; color: #fff; }

#recent-projects { float: left; margin: 55px 0 65px 0; width: 100%; }
#recent-projects h2 { background: url(images/recent-projects-title.png) no-repeat; width: 183px; height: 38px; text-indent: -9999px; margin: 0 0 30px -7px; }
#recent-projects .recent-project { float: left; margin-left: 45px; }
#recent-projects .recent-project h4 { color: #777; font-size: 16px; margin: 0 0 7px 0; }
#recent-projects .recent-project-img-wrap { padding: 8px 8px 6px 8px; background-color: #eee; border: 1px #ccc solid; }
#recent-projects .recent-project-img-wrap img { border: 1px #ccc solid; }
#recent-projects .first { margin-left: 0; }

#other-details { float: left; margin: 55px 0 55px 0; }
#testimonials { float: left; width: 403px; padding: 0 75px 0 0; border-right: 2px #eee solid; }
#testimonials h2 { background: url(images/client-testimonials-title.png) no-repeat; width: 224px; height: 33px; text-indent: -9999px; margin: 0 0 30px -7px; }
#testimonials .testimonial { float: left; margin: 0 0 20px 0; }
#testimonials .author { margin: -12px 0 0 0; color: #333; }

#contact {  float: right; width: 405px; padding: 0 0 0 75px; }
#contact h2 { background: url(images/get-in-touch-title.png) no-repeat; width: 169px; height: 33px; text-indent: -9999px; margin: 0 0 30px -7px; }
#contact #contact-form input { background: url(images/input-bg.png) repeat-x; background-color: #fff; border: 1px #ddd solid; padding: 10px; width: 250px; margin: 0 0 15px 0; font-size: 12px; color: #555; font-family: arial, sans-serif; }
#contact #contact-form textarea { background: url(images/textarea-bg.png) repeat-x; background-color: #fff; border: 1px #ddd solid; padding: 10px; width: 300px; margin: 0 0 15px 0; font-size: 12px; color: #555; line-height: 18px; height: 50px; font-family: arial, sans-serif; }
#contact #contact-form .submit { display: block; background: url(images/button-bg-small.png) no-repeat; width: 99px; height: 28px; color: #f5f5f5; font-size: 12px; text-align: center; margin: 5px 0 0 0; border: none; cursor: pointer; position: relative; padding: 2px 0; }
#contact #contact-form .submit:hover { color: #222; }
#contact #response { background-color: #eee; border: 1px #ddd solid; padding: 10px; color: #ff0000; }
#contact #contact-details p { margin: 0 0 2px 0; }

/* ------------- */
/* -- Content -- */
/* ------------- */
#main { clear: both; float: left; margin: 60px 0 50px 0; }
#content { float: left; width: 480px; margin: 0 100px 80px 0; }

/* ---------- */
/* -- Post -- */
/* ---------- */
.blog-title { margin-bottom: 40px; font-size: 34px;}
.title { margin-bottom: 30px; font-size: 30px; }
.post-title { font-size: 26px; margin: 0; padding: 0; line-height: 30px; }
.post-meta { font-size: 20px; color: #888; padding: 0; margin: 5px 0 25px 0; }
.post-meta a { color: #888; }
.post a.more-link { display: block; background: url(images/button-bg-small.png) no-repeat; width: 99px; height: 28px; color: #fff; font-size: 11px; text-align: center; padding: 3px 0; margin: 20px 0 0 0; }
.post a.more-link:hover { color: #222; }

/* -------------- */
/* -- Comments -- */
/* -------------- */
#comments { clear: both; width: 480px;  }
#comments h3 { padding-bottom: 0; }
.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-x; background-color: #fff; }
.commentlist .fn { color: #555555; font-size: 18px; line-height: 25px }
.commentlist .url { color: #1c83a9; 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: 5px 0 0 7px; padding: 2px; border: 1px solid #cccccc; }
.commentlist p { margin: 10px 0 10px 0; }
.commentlist .comment-reply-link { margin: 30px 0 0 -7px;  }

/* 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/textarea-bg.png) repeat-x; 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; background-color: #fff; }
#commentform .submit { display: block; background: url(images/button-bg-small.png) no-repeat; width: 99px; height: 28px; color: #fff; text-align: center; padding: 7px 0; font-size: 12px; margin: 25px 0 0 -2px; border: none; cursor: pointer; }
#commentform .submit:hover { color: #222; }
#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: #1c83a9; font-size: 14px;  }
.commentlist .comment-reply-link:hover { color: #555; }

/* ------------- */
/* -- Sidebar -- */
/* ------------- */
#sidebar { float: right; width: 280px; margin: 0 0 0 100px; }
#sidebar h3 { margin-bottom: 25px; }
#sidebar .sidebar-title { margin-top: 0; margin-bottom: 10px; }
#sidebar p { font-size: 14px; line-height: 22px;  }
.sidebar-project-thumb { float: left; padding: 5px 5px 3px 5px; background-color: #eee; border: 1px #ccc solid; margin: 0 0 30px -1px; }
.sidebar-project-thumb img { border: 1px #ccc solid; }
.sidebar-project-title { float: left; padding: 0 0 7px 0; }

/* --------------- */
/* -- Portfolio -- */
/* --------------- */
#portfolio-content { float: left; }
#portfolio-content .title { margin-bottom: 15px; }
#portfolio-content .project { float: left; margin: 20px 0 30px 60px; width: 280px; }
#portfolio-content .first { margin-left: 0; }
#portfolio-content .project h3 { font-size: 14px; margin: 0 0 7px 0; padding: 0; }
#portfolio-content .project-title { float: left; }
#portfolio-content .read-more { float: right; }
#portfolio-content .project .project-img-wrap { float: left; padding: 5px 5px 3px 5px; background-color: #eee; border: 1px #ccc solid; }
#portfolio-content .project img { border: 1px #ccc solid; }
#project-content { float: left; width: 430px; margin: 0 98px 0 0; }
#project-image-large { float: right; border: 1px #ddd solid; }

/* ------------------ */
/* -- Contact Form -- */
/* ------------------ */
#contact-form { margin: 25px 0 0 0; }
#contact-form input { background: url(images/input-bg.png) repeat-x; background-color: #fff; border: 1px #ddd solid; padding: 15px; width: 250px; margin: 0 0 15px 0; font-size: 12px; color: #555; font-family: arial, sans-serif; }
#contact-form textarea { background: url(images/textarea-bg.png) repeat-x; background-color: #fff; border: 1px #ddd solid; padding: 15px; width: 350px; margin: 0 0 15px 0; font-size: 12px; color: #555; line-height: 18px; height: 150px; font-family: arial, sans-serif; }
#contact-form .submit { display: block; background: url(images/button-bg-small.png) no-repeat; width: 99px; height: 28px; color: #fff; font-size: 12px; text-align: center; margin: 5px 0 0 0; border: none; cursor: pointer; position: relative; padding: 2px 0;  }
#contact-form .submit:hover { color: #222; }
#response { background-color: #eee; border: 1px #ddd solid; padding: 10px; color: #ff0000; }
#contact-details p { margin: 0 0 2px 0; }
#contact-details span { color: #333; }
.contact-sidebar-intro { margin-top: 20px; }

/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer { clear: both; }
#footer p { font-size: 18px; color: #aaa; margin: 15px 0 50px 0; }