/*
Theme Name: Chris Skellett Consulting Theme
Theme URI: http://www.chrisskellettconsulting.co.nz/
Description: Wordpress version of new design
Version: 2.0
Author: Alex Gilks / Julian Moller
Author URI: http://www.chopchop.co.nz/
*/

html, body{ background: #f9f6ef; color: #6e6945; font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; position: relative; }

/* links */
a, a:link, a:visited{ text-decoration: none; color: #47c4d8; transition: color linear 0.3s; }
a:active, a:hover{ color: #309eb0; }


/* general elements and classes */
.clear{ clear: both; }

/* layout */
.content{ padding: 0 10px; margin: 0 auto; position: relative; }

.bg{ display: block; position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 1; background: url('/wp-content/themes/chrisskellett/images/top.png') 0 0 repeat-x; }

#page{ position: relative; z-index: 2; max-width: 840px; padding: 0 20px; margin: 0 auto; }

#main{ position: relative; max-width: 580px; float: left; border-right: 20px solid #fff; }

#header{ width: 100%; background: #fff; }

    #top{ height: 199px; padding-top: 40px; background: url('/wp-content/themes/chrisskellett/images/chris-top.png') 100% 100% no-repeat; }
    
    #nav{ clear: both; float: left; width: 100%; padding: 5px 0; font-weight: bold; background: #e8f8fe; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
    #nav li{ float: left; padding: 0; margin: 0 15px 0 0; }
    #nav a{ display: block; float: left; line-height: 25px; }
    #nav .current_page_item a{ color: #6fb220; }
    
    #logo{ color: #47c4d8; font-size: 84px; line-height: 70px; font-weight: 100; width: 300px; letter-spacing: -3px; }
    #logo a{ color: inherit; }
    
    #tagline{ color: #d14f12; font-size: 16px; line-height: 20px; text-transform: uppercase; font-weight: 600; width: 300px; margin: 5px 0 0 0; }
    

#content{ padding: 30px 60px 30px 20px; width: 500px; letter-spacing: 0.01em; }

#footer{ clear: both; max-width: 580px; border-right: 20px solid #fff; }
#footer a{ font-weight: 600; line-height: 21px; padding-left: 31px; background: url('/wp-content/themes/chrisskellett/images/facebook.png') 0 50% no-repeat; }
#footer p{ color: #888888; font-size: 14px; line-height: 20px; padding: 5px 0; margin: 10px 0; border-top: 15px solid #fff; }

#sidebar{ float: left; width: 200px; padding: 50px 0 0 35px; font-weight: 600; color: #d14f12; line-height: 20px; border-left: 20px solid #fff; margin: 0 0 0 -20px; }
    #sidebar .widget{ margin-bottom: 40px; }
    #sidebar .widget-title{ display: none; }
    
#title{ display: none; }

/* content */
#content h1, 
#content h2, 
#content h3, 
#content h4{ clear: both; margin: 0 0 10px 0; }
#content h1{font-size: 28px; font-weight: 900; line-height: 28px; color: #6e6945;  } 
#content h2{font-size: 26px; font-weight: 800; line-height: 28px; color: #e0772d; padding-top: 15px; }
#content h3{font-size: 20px; font-weight: 700; line-height: 20px; color: #b88e4e; }

#content p{ margin: 0 0 10px 0; padding: 0 0 0 10px; }
#content p.intro{ padding: 0; color: #6fb220; font-size: 24px; line-height: 26px; font-weight: bold; }

#content ul, #content ol{ margin: 0 0 7px 0; padding: 0 0 0 30px; }
#content li{ margin: 0 0 3px 0; }

#content img{ max-width: 100%; height: auto; }

#content strong{ font-weight: 600; }

img.alignright{ float: right; margin: 0 0 10px 20px; }
img.alignleft{ float: left; margin: 0 20px 10px 0; }
img.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.alignright{ float: right; }
.alignleft{ float: left; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }


@media (max-width: 880px) {
    #main{ float: none; }
    #sidebar{ float: none; width: auto; max-width: 540px; padding: 0 20px 20px; border-right: 20px solid #fff; border-left: 0; margin: 0; }
    #sidebar .widget{ clear: both; float: left; width: 100%; margin-bottom: 20px; }
    #sidebar .image{ float: left; margin-right: 20px; }
}


@media (max-width: 640px) {
    #top{ background: #fff; }
    #main, #sidebar, #footer{ border-right: none; }
    #content{ width: auto; }
}

@media (max-width: 460px) {
    #sidebar .image{ float: none; margin-right: 0; }
    #page{ padding: 0; }
    #top, #content, #sidebar, #footer{ padding: 10px; }
    #nav{ padding: 5px 10px; width: auto; }
    
    .bg{ background: transparent; }
    #top{ height: auto; }
    #logo, #tagline{ width: auto; }
    #logo{ font-size: 50px; line-height: 50px; margin: 10px 0; }
    
    #content p{ padding: 0; }
    #content ul, #content ol{ padding: 0 0 0 20px; }
}