/*
Theme Name: Kanzoo
Theme URI: http://www.vooshthemes.com
Description: A Premium Portfolio Theme Developed By Voosh Themes.
Author: Voosh Themes
Author URI: http://www.vooshthemes.com
*/

/* Colors -- Blue: #0a86f2 */

@import "reset.css";

/*------------------------------------------------*/
/*---------------------TOOLS----------------------*/
/*------------------------------------------------*/
.line { clear: both; background: url(../images/line.jpg) no-repeat; height: 2px; }
.post-line { clear: both; background: url(../images/post-line.jpg) no-repeat; height: 2px; margin: 0 0 25px 0; }
.vertical-line { float: left; background: url(../images/vertical-line.jpg) no-repeat; width: 2px; height: 237px; margin: -8px -1px 0 0; }
.cache-images { visibility: hidden; }
.grey { color: #888; }
.icon { float: left; background: url(../images/icon-blue.png) no-repeat; width: 40px; height: 21px; margin: 0 0 0 -3px; }
#slider2 { display: none; }

/*------------------------------------------------*/
/*-----------------GENERAL STYLES-----------------*/
/*------------------------------------------------*/
#wrap { width: 960px; margin: 0 auto; }
body { background-color: #eee; color: #555555; line-height: 22px; font-family: Arial; font-size: 12px; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 60px; margin: 35px 0 25px 0; }
h2 { font-size: 28px; margin: 30px 0 20px 0; }
h3 { font-size: 24px; margin: 30px 0 15px 0; line-height: 24px; }
h4 { font-size: 18px; margin: 25px 0 10px 0; }
h5 { font-size: 16px; margin: 20px 0 5px 0; }
h6 { font-size: 14px; margin: 10px 0 0 0;}
a:link, a:visited { color: #0a86f2; text-decoration: none; }
a:hover, a:active { color: #555555; }
p { font-size: 14px; color: #666; margin: 0 0 15px 0; line-height: 22px; }
em { font-style: italic; }

/*------------------------------------------------*/
/*-----------------HEADER-------------------------*/
/*------------------------------------------------*/
#header { margin: 60px 0 0 0; }
#header h1 a { float: left; background: url(../images/logo-blue.png) no-repeat; width: 478px; height: 122px; text-indent: -9999px; margin: 0 0 0 -10px; padding: 0 0 40px 0; }
#header h2 { float: right; background: url(../images/subtitle.png) no-repeat; width: 311px; height: 44px; text-indent: -9999px; margin: 0; }
#header h3 { float: right; background: url(../images/email.png) no-repeat; width: 231px; height: 30px; text-indent: -9999px; margin: 46px 0 0 0; }

/*------------------------------------------------*/
/*-----------------NAVIGATION---------------------*/
/*------------------------------------------------*/
#nav { height: 66px; }
#nav li { float: left; padding: 0 20px 10px 0; font-size: 24px; margin: 22px 0 0 0; }
#nav li a { color: #888888; text-transform: uppercase; }
#nav a:hover, ul.nav a:active { color: #0a86f2; }
#nav li span { padding-left: 20px; color: #eeeeee; }
#nav li.current_page_item a { color: #0a86f2; }  
    
/*------------------------------------------------*/
/*-----------------MAIN LAYOUT--------------------*/
/*------------------------------------------------*/
#main { float: left; padding: 45px 0 0 0; margin-bottom: 40px; width: 100%; height: 100%; }
#content { float: left; width: 580px; padding: 0 40px 20px 0; }
#sidebar { float: left; width: 293px; padding: 0 0 0 45px; }

/*------------------------------------------------*/
/*-------------------FRONTPAGE--------------------*/
/*------------------------------------------------*/
#benefits { float: left; width: 580px; }
#benefits .benefit { float: left; width: 230px; margin: 0 0 35px 60px; }
#benefits .first-benefit { float: left; width: 230px; margin: 0 0 35px 0; }
#benefits .benefit img, #benefits .first-benefit img { float: left; margin: 0 0 0 -5px; }
#benefits .benefit h2, #benefits .first-benefit h2 { float: left; font-size: 20px; color: #555; font-weight: normal; margin: -2px 0 12px 7px; }
#benefits .benefit p, #benefits .first-benefit p { clear: both; line-height: 20px; font-size: 12px; margin-bottom: 0px; }

/*------------------------------------------------*/
/*-----------------TESTIMONIALS-------------------*/
/*------------------------------------------------*/
#testimonials { float: left; margin: 0 0 0 65px; width: 310px; }
#testimonials h2 { float: left; font-size: 20px; color: #555; font-weight: normal; margin: -2px 0 12px 0; }
#testimonials .testimonial { margin: 0 0 25px 0; }
#testimonials .testimonial p { clear: both; line-height: 20px; font-style: italic; color: #777; font-size: 12px; margin-bottom: 0px; }
#testimonials .testimonial .testimonial-meta { font-style: normal; color: #666; font-weight: bold; }
#testimonials .testimonial .testimonial-meta span { color: #0a86f2; font-weight: normal; }

/*------------------------------------------------*/
/*-----------------POSTS/PAGES--------------------*/
/*------------------------------------------------*/
.post { margin: 0 0 30px 0; }
h2.post-title { font-size: 28px; width: 540px; margin: 0 0 5px 0; line-height: 36px;  }
.post p { font-size: 14px; margin: 10px 0 15px 0; }
.post h3.meta { color: #888; margin: 0 0 25px 0; }
.post h3.meta a { color: #888; }
.post h3.meta a:hover { color: #aaa; }
#main .page { border-right: none; }

/*------------------------------------------------*/
/*-----------------SIDEBARS-----------------------*/
/*------------------------------------------------*/
#sidebar { font-size: 14px; }
#sidebar h3.widgettitle { clear: both; color: #888; font-size: 24px; margin: 20px 0 20px 3px; }
#sidebar .sponsors { float: left; padding-bottom: 20px;  }
#sidebar .sponsors h3 { margin-top: 0; color: #888; }
#sidebar .sponsors a img { float: left; margin: 0 10px 10px -3px; }
#sidebar ul li ul { margin: -5px 0 0px 4px; }
#sidebar ul li ul li { padding: 0 0 2px 0; }
#sidebar ul li ul li a { text-decoration: none; }
#sidebar ul li ul li a:hover { color: #555555; }
#sidebar .textwidget, #sidebar #calendar_wrap, #sidebar #searchform { margin: 0 0 0 4px; }
#sidebar #s { border: 1px solid #cccccc; padding: 5px; margin: 0 15px 10px 0; }
.screen-reader-text { display: none; }

/* contact sidebar */
#sidebar-contact { float: right; background: #e2e2e2; border:1px solid #ccc; width: 220px; padding: 20px 20px 5px 20px; }
#sidebar-contact h3 { margin: 0; padding: 0 0 20px 0; font-size: 20px; }
#sidebar-contact h4 { margin: 0; padding: 0; font-size: 16px; }
#sidebar-contact p { font-size: 14px; color: #888; margin: 0 0 15px 0; line-height: 18px; }
 
/*------------------------------------------------*/
/*------------------SLIDER------------------------*/
/*------------------------------------------------*/
#slider { position: relative; z-index: -1; }
.strip { float: left; background: url(../images/strip.png) no-repeat; width: 113px; height: 112px; position: relative; z-index: 2; margin: -457px 0 0 858px; }

/*------------------------------------------------*/
/*-------------------PORTFOLIO--------------------*/
/*------------------------------------------------*/
#portfolio { margin: 40px 0 0 0; }
#portfolio h3 { font-size: 18px; margin: 0 0 5px 0; }
#portfolio .portfolio-item { float: left; margin: 0 0 40px 45px; }
#portfolio .portfolio-item-first { float: left; margin: 0 0 40px 0; }
#portfolio .portfolio-item .portfolio-img, #portfolio .portfolio-item-first .portfolio-img { float: left; background: url(../images/portfolio-img-bg.png) no-repeat; width: 290px; height: 210px; }
#portfolio .portfolio-item .portfolio-img img, #portfolio .portfolio-item-first .portfolio-img img { margin: 2px 0 0 2px; }

/*------------------------------------------------*/
/*-----------------COMMENTS-----------------------*/
/*------------------------------------------------*/
#comments { width: 500px; margin: 35px 0 0 0; }
#comments ol, #comments ul { padding: 0; }
.commentlist { margin: 25px 0 30px 0; }
.commentlist .comment { background: url(../../images/comment-bg.jpg) repeat-x; border: 1px solid #ccc; background-color: #e8e8e8; padding: 15px 15px 0 15px; margin: 0 0 15px 0; list-style: none; }
.commentlist .fn { color: #555555; font-size: 16px; }
.commentlist .url { color: #0a86f2; font-size: 16px; font-style: normal; }
.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; width: 475px; }
.commentlist .comment-reply-link { margin: 5px 0 10px -7px; background: url(../images/reply-button-blue.png) no-repeat; width: 73px; height: 28px; display: block; }
.commentlist .comment-reply-link:hover { background: url(../images/reply-button-blue-hover.png) no-repeat; }

#respond h3 { margin-bottom: 20px; }
#commentform { width: 485px; }
#commentform input { border: 1px #cccccc solid; float: left; width: 255px; padding: 12px; margin-bottom: 20px; font-family: Arial; font-size: 14px; color: #555555; }
#commentform textarea { border: 1px #cccccc solid; margin: 5px 0 0 2px; width: 468px; height: 238px; padding: 10px 10px; font-family: Arial; font-size: 14px; color: #555555; }
#commentform .submit { background: url(../images/submit-button-blue.png) no-repeat; cursor: pointer; margin: 20px 0 0 -2px; border: none; width: 109px; height: 38px; }
#commentform .submit:hover { background: url(../images/submit-button-blue-hover.png) no-repeat; }
#commentform label {  float: left; padding: 8px 0 0 20px; text-transform: uppercase; color: #888888; font-size: 10px; }

/*------------------------------------------------*/
/*-----------------CONTACT FORM-------------------*/
/*------------------------------------------------*/
#contact-page { float: left; font-size: 14px; width: 500px; margin: 0 0 40px 0; }
#contact-page p { font-size: 14px; margin: 0 0 25px 2px; }
#contact-page #contact { margin: 0 0 0 0; }
#contact-page #contact fieldset { border: none; }
#contact-page #contact input { 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-page #contact textarea { 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: 24px; margin: 0 0 15px 0; padding: 20px 20px 0 15px; width: 450px; font-size: 14px; }
#contact-page #contact .submit { background: url(../images/submit-button-blue.png) no-repeat; width: 109px; height: 38px; border: none; cursor: pointer; margin: 0 0 0 -5px; }
#contact-page #contact .submit:hover { background: url(../images/submit-button-blue-hover.png) no-repeat; }
.contact_error { background: #ddd url('../images/cross.png') no-repeat 10px center; display: block; height: 22px; line-height: 22px; padding: 3px 10px 3px 35px; color:#555555; border: 1px solid #888; margin: 0 0 20px 0; }
#contact #email_sent { background-color: #ddd; border: 1px #888 solid; padding: 10px; height: 60px; }
#contact #email_sent h3 { background: url('../images/tick.png') left no-repeat; padding-left:22px; margin-top: 4px; }

/*------------------------------------------------*/
/*--------------------PROJECT---------------------*/
/*------------------------------------------------*/
#project { float: left; margin: 40px 0 40px 0; width: 100%; }
#project h3 { margin: 0 0 8px 0; }
#project h4 { font-size: 20px; }
#project #screenshots { float: right; margin: -20px 0 0 0; }
#project .screenshot .portfolio-img-bg { background: url(../images/portfolio-img-large-bg.png) no-repeat; width: 460px; height: 310px; margin: 28px 0 0 0; }
#project .screenshot img { margin: 2px 0 0 2px; }
#project #project-content { float: left; margin: 6px 0 0 0; width: 450px; }
#project #project-content .completion { margin-bottom: 25px; }
#project #project-content .portfolio-title { margin-top: 25px; margin-bottom: 15px; }
.testimonial-author { font-weight: bold; margin: -8px 0 -3px 0; }

/*------------------------------------------------*/
/*-----------------FOOTER-------------------------*/
/*------------------------------------------------*/
#footer { clear: both; padding: 8px 0 0 0; margin: 0 0 80px 0; font-size: 10px; color: #777; }
#footer .copyright { float: left; margin: 8px 0 0 0; }