/*
Theme Name: Sanura
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 -- Orange: #ff7200 */

@import "style/reset.css";

/*------------------------------------------------*/
/*---------------------TOOLS----------------------*/
/*------------------------------------------------*/
.line { clear: both; background: url(images/line.png) no-repeat; height: 2px; }
.post-line { clear: both; background: url(images/line.png) no-repeat; height: 2px; padding-top: 52px  }
.vertical-line { float: left; background: url(images/vertical-line.jpg) no-repeat; width: 2px; height: 333px; margin-top: 38px; }
.grey { color: #999999; }
.cache-images { visibility: hidden; }

/*------------------------------------------------*/
/*-----------------GENERAL STYLES-----------------*/
/*------------------------------------------------*/
#wrap { padding-top: 80px; width: 960px; margin: 0 auto; }
body { background-color: #ffffff; background: url(images/main-bg.jpg) repeat-x; color: #555555; line-height: 22px; font-family: Arial; font-size: 12px; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 40px; margin: 20px 0 15px 0; }
h2 { font-size: 26px; margin: 30px 0 15px 0; color: #333333; }
h3 { font-size: 22px; margin: 25px 0 15px 0; }
h4 { font-size: 18px; margin: 20px 0 10px 0; }
h5 { font-size: 16px; margin: 20px 0 5px 0; }
h6 { font-size: 14px; margin: 0 0 0 0; }
a:link, a:visited { color: #ff7200; text-decoration: none; }
a:hover, a:active { color: #555555; }
em { font-style: italic; }
p { margin: 0 0 15px 0; }

/*------------------------------------------------*/
/*-----------------HEADER-------------------------*/
/*------------------------------------------------*/
#header { margin: 0 0 0px -5px; width: 960px; height: 200px; }
#header h1 a { float: left; background: url(images/name.png) no-repeat; width: 639px; height: 82px; text-indent: -9999px; margin: 0 0 6px 0; }
#header h2 { float: left; background: url(images/subtitle.png) no-repeat; width: 549px; height: 65px; text-indent: -9999px; margin: 0 0 0 0; }

/*------------------------------------------------*/
/*-----------------NAVIGATION---------------------*/
/*------------------------------------------------*/
ul#nav { float: left; margin: 18px 0 12px 0px; }
ul#nav li { float: left; padding: 0 20px 0 0; }
ul#nav a { color: #222222; font-size: 24px; text-transform: uppercase; font-weight: bold; }
ul#nav a:hover, ul.nav a:active { color: #ff7200; }
ul#nav li span { padding-left: 20px; color: #ffffff; }
ul#nav li.current_page_item a { color: #ff7200; }

/*------------------------------------------------*/
/*-----------------FRONT PAGE---------------------*/
/*------------------------------------------------*/
#frontpage { float: left; margin: 48px 0 -8px -5px; }
#frontpage .featured-text { margin: 0 0 40px 0; }
#frontpage #featured-projects { margin: 0 0 40px 0; }
#frontpage #featured-projects h3 { background: url(images/featured-projects-text.jpg) no-repeat; width: 266px; height: 48px; text-indent: -9999px; margin: 40px 0 20px -5px }
#frontpage #featured-projects .featured-project-bg { float: left; background: url(images/featured-project-bg.jpg) no-repeat; width: 310px; height: 310px; margin: 0 0 50px 17px; }
#frontpage #featured-projects .featured-project-bg.first { margin-left: 0px; }
#frontpage #featured-projects img { margin: 2px 0 0 2px; }

#frontpage #services { float: left; margin: 36px 32px 0 0; }
#frontpage #services h4 { background: url(images/services-available.jpg) no-repeat; width: 219px; height: 33px; text-indent: -9999px; margin: 0 0 30px -7px; }
#frontpage #services .service { clear: both; width: 430px; margin: 0 0 0 0; height: 90px; }
#frontpage #services .service img { float: left; margin: 2px 0 0 2px; }
#frontpage #services .service a { font-size: 14px; margin: 0 0 0 0; }
#frontpage #services .service p { margin: 2px 0 0 0; }

#frontpage #posts { float: left; margin: 36px 0 0 50px; }
#frontpage #posts h4 { background: url(images/latest-blog-posts.jpg) no-repeat; width: 207px; height: 39px; text-indent: -9999px; margin: 0 0 24px -7px; }
#frontpage #posts .post { clear: both; width: 430px; margin: 0 0 0 0; height: 90px; padding-bottom: 0px; }
#frontpage #posts .post img { float: left; margin: 2px 0 0 2px; width: 56px; height: 56px; }
#frontpage #posts .post a { font-size: 14px; margin: 0 0 0 0; }
#frontpage #posts .post p { margin: 2px 0 0 0; width: 430px; }

.post-frontpage-img-bg { float: left; background: url(images/post-frontpage-img-bg.jpg) no-repeat; width: 66px; height: 66px; margin: 4px 15px 0 0; }

/*------------------------------------------------*/
/*------------------PORTFOLIO---------------------*/
/*------------------------------------------------*/
#portfolio { margin: 50px 0 0 0; font-size: 16px; }
#portfolio h2 { background: url(images/portfolio-text.jpg) no-repeat; width: 134px; height: 39px; text-indent: -9999px; margin: 0 0 40px -5px; }
#portfolio .portfolio-item .portfolio-img-bg { background: url(images/portfolio-img-bg.jpg) no-repeat; width: 460px; height: 310px; margin: 28px 0 0 0; }
#portfolio .portfolio-item { float: left; width: 460px; padding-left: 40px; margin: 0 0 50px 0; }
#portfolio .portfolio-item.first { float: left; width: 460px; padding-left: 0px; }
#portfolio .portfolio-item .project-name { float: left; margin: 0 0 0 2px;  }
#portfolio .portfolio-item .more-details { float: right; margin: 0 6px 0 0 }
#portfolio .portfolio-item img { margin: 2px 0 0 2px; }

/*------------------------------------------------*/
/*--------------------PROJECT---------------------*/
/*------------------------------------------------*/
#project { margin: 50px 0 0 0; font-size: 16px; }
#project h2 { background: url(images/portfolio-text.jpg) no-repeat; width: 134px; height: 39px; text-indent: -9999px; margin: 0 0 40px -5px; }
#project h3 { margin: 0 0 8px 0; }
#project #screenshots { float: left; margin: -20px 60px 0 0; }
#project .screenshot .portfolio-img-bg { background: url(images/portfolio-img-bg.jpg) 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: 400px; font-size: 12px; }
#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 -6px 0; }

/*------------------------------------------------*/
/*------------------BLOG POSTS--------------------*/
/*------------------------------------------------*/
.post { float: left; padding: 0 0 50px 0; width: 960px; }
.post-content { width: 500px; margin: -37px 0 0 0; }
.blog-title { background: url(images/blog-title.jpg) no-repeat; width: 74px; height: 47px; text-indent: -9999px; margin: 50px 0 40px -5px; }
.post-img-bg { float: left; background: url(images/post-img-bg.jpg) no-repeat; width: 210px; height: 210px; margin: 0 50px 0 0; }
.post-content { float: left; }
.post a img { border: none; margin: 2px 0 0 2px; }
.post h2 a { font-size: 30px; line-height: 35px }
.post .meta { font-size: 24px; color: #888888; margin: -8px 0 20px 2px; }
.post .meta a { color: #888888; }
.post p { width: 500px; margin-left: 2px; }
.post .read-more-button { float: left; display: block; background: url(images/read-more-button-orange.jpg) no-repeat; width: 109px; height: 38px; text-indent: -9999px; margin: 0 0 0 -6px; }
.post .read-more-button:hover { background: url(images/read-more-button-orange-hover.jpg) no-repeat; }
.post ol { margin-bottom: 20px; }
.post ol li { list-style:decimal; font-size: 12px; color: #555555; margin-left: 18px; padding-left: 5px;}
.post ul { margin-bottom: 20px; }
.post ul li { list-style:circle; color: #555555; font-size: 12px; margin-left: 15px; padding-left: 5px; }
.previous-posts a { background: url(images/previous-button-orange.jpg) no-repeat; width: 109px; height: 38px; margin: -5px 0 0 -6px; display: block; }
.previous-posts a:hover { background: url(images/previous-button-orange-hover.jpg) no-repeat; width: 109px; height: 38px; }
.newer-posts a { background: url(images/newer-button-orange.jpg) no-repeat; width: 109px; height: 38px; margin: -5px 0 0 -6px; display: block; }
.newer-posts a:hover { background: url(images/newer-button-orange-hover.jpg) no-repeat; width: 109px; height: 38px; }

#page { float: left; margin: 50px 0 0 0; width: 485px; }
.services-title { float: left; background: url(images/services.jpg) no-repeat; width: 129px; height: 37px; text-indent: -9999px; margin: 0 0 25px -5px; }

/* Search/Archive Pages */
.search-result, .archive-result { margin: 10px 0 20px 0; width: 500px; }
.search-link, .archive-link { font-size: 16px; margin: 0 0 0 0; }
.search-meta, .archive-meta { font-size: 10px; color: #888888; text-transform: uppercase; margin: -2px 0 0 0; }
.archive-title { margin: 50px 0 30px 0; }

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

#respond { float: left; margin: -15px 0 20px 0; }
#respond h3 { margin-bottom: 20px; }
#commentform { width: 485px; padding-top: 5px; }
#commentform input { background: url(images/comment-bg.jpg) repeat-x;border: 1px #dddddd solid; float: left; width: 255px; padding: 12px; margin-bottom: 20px; font-family: Arial; font-size: 12px; color: #555555; }
#commentform textarea { background: url(images/comment-bg.jpg) repeat-x; border: 1px #dddddd solid; margin: 5px 0 0 0; width: 425px; height: 238px; padding: 10px 10px; font-family: Arial; font-size: 12px; color: #555555; line-height: 20px; }
#commentform .submit { background: url(images/submit-button-orange.jpg) no-repeat; width: 109px; height: 38px; border: none; cursor: pointer; margin: 20px 0 0 -5px; }
#commentform .submit:hover { background: url(images/submit-button-orange-hover.jpg) no-repeat; width: 109px; height: 38px; }
#commentform label {  float: left; padding: 8px 0 0 20px; text-transform: uppercase; color: #888888; font-size: 10px; }
#cancel-comment-reply-link { font-size: 12px; }

/*------------------------------------------------*/
/*-----------------CONTACT PAGE-------------------*/
/*------------------------------------------------*/
#contact-page { float: left; margin: 50px 120px 0 0; font-size: 12px; width: 500px; }
#contact-page h2 { background: url(images/contact-me-text.jpg) no-repeat; width: 182px; height: 37px; text-indent: -9999px; margin: 0 0 20px -5px; }
#contact-page p { font-size: 12px; margin: 0 0 25px 2px; }
#contact-page #contact { margin: 0 0 0 0; }
#contact-page #contact fieldset { border: none; }
#contact-page #contact input { background: url(images/comment-bg.jpg) 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; }
#contact-page #contact textarea { background: url(images/comment-bg.jpg) repeat-x; 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; }
#contact-page #contact .submit { background: url(images/submit-button-orange.jpg) no-repeat; width: 109px; height: 38px; border: none; cursor: pointer; margin: 0 0 0 -6px; }
#contact-page #contact .submit:hover { background: url(images/submit-button-orange-hover.jpg) no-repeat; }
.contact_error { background: #eeeeee 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 #cccccc; margin: 0 0 20px 0; }
#contact #email_sent { background-color: #eeeeee; border: 1px #cccccc solid; padding: 10px; height: 60px; }
#contact #email_sent h3 { background: url('images/tick.png') left no-repeat; padding-left:22px; margin-top: 4px; }

/*------------------------------------------------*/
/*---------------CONTACT SIDEBAR------------------*/
/*------------------------------------------------*/
#sidebar { float: right; background: url(images/contact-sidebar-bg.jpg) no-repeat; margin: 50px -30px 0 0; padding: 28px 0 0 25px; width: 290px; height: 345px; }
#sidebar h3 { margin: 0; padding: 0; font-size: 16px; }
#sidebar p { margin-top: 0px; padding: 0; font-size: 14px; color: #999999; }

/*------------------------------------------------*/
/*-----------------FOOTER-------------------------*/
/*------------------------------------------------*/
#footer { clear: both; padding: 45px 0 80px 0; color: #888888; }
#footer .copyright { float: left; padding-top: 10px; }
#footer .design { float: right; width: auto; padding-top: 10px; }