/*
Theme Name: The CSS Ninja
Theme URI: http://www.thecssninja.com/
Description: Custom theme for the <a href="http://www.thecssninja.com/">cssninja</a> blog.
Version: 2
Author: Ryan Seddon
Author URI: http://www.thecssninja.com/
Tags: css, ninja, cssninja, thecssninja

    http://www.thecssninja.com/

    This theme was designed and built by Ryan Seddon,
    whose blog you will find at http://www.thecssninja.com/

*/

*, html
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

body, form, ul, li, p, h1, h2, h3, h4, h5
{
    margin: 0;
    padding: 0;
}
html, body 
{
    height: 100%;
}
body { }
body#error { background: #000000; text-align: center; height: auto !important; }

.clear
{
    height: 0 !important;
    line-height: 0 !important;
    clear: both !important;
    font-size: 1px !important;
    margin: 0;
    padding: 0;
    float: none !important;
    display: block !important;
}
img
{
    border: none;
}
p
{
    font-size: 1em;
    margin: 0 0 1em 0;
}

::selection { background: #109610; color: #fff; /* Safari */ }
::-moz-selection { background: #109610; color: #fff; /* Firefox */ }


/* Styles for scalable font consistency */

html { font-size: 100%; height: 100%; /* IE hack */ }
body { font-size: 0.75em; } /* Base font 12px */
table { font-size: 100%; /* IE hack */ }

input, select, textarea, th, td { font-size:1em; }

h1, .title01 { font-size: 5.416em; line-height: 1em; } 
h1.title02, h2 { font-size: 2em; line-height: 1em; margin: 0 0 0.792em 0; }
h2 .search-term { color: #1A1A1D; }
h2.subtitle01 { color: #ffffff; margin-bottom: 118px; }
h2.subtitle02 { font-size: 1.167em; line-height: 1em; margin: 0 0 0.5em 0; } /* 14px/14px/6px */
h2.subtitle03 { margin-bottom: 1.833em; }

h3 { font-size: 1.167em; line-height: 1em; margin: 0 0 0.5em 0; } /* 14px/14px/6px */
h3.subtitle01 { color: #fff; margin: 0 0 0.5em 27px; }

/* START: @Structural styling */
#maincontainer
{
    
}
#maincontainer #innermaincontainer,
#footer #innerfooter
{
    width: 988px;
margin: 0 auto;}

#maincontainer 
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -186px; /* the bottom margin is the negative value of the footer's height */
}
#errorcontainer
{
    margin: 159px auto 0;
    width: 988px;
}

.multi-column01
{
    
}
    .multi-column01 .column
    {
        width: 648px;
        float: left;
        
    }
        .multi-column01 .column .column-padding
        {
            padding: 0 25px 0 0;
        }
        .multi-column01 h2,
        .multi-column01 h1.title02
        {
            color: #4C4C4C;
        }
        .multi-column01 h2.subtitle02
        {
            color: #1a1a1d;
        }
    .multi-column01 .column02
    {
        width: 282px;
        float: left;
    }
        .multi-column01 .column02 .column-padding
        {
            padding: 0 15px 0 24px;
        }
/* END: Structural styling */

/* START: @Header styles */
#header
{
    height: 234px;
    background-image: black;
    opacity: 4; 
    background-color: #444444;   
    background-image: url(assets/gr_header-ninja.jpg), -webkit-gradient(linear, left top, left bottom, from(#000), to(#666));
    background-image: url(assets/gr_header-ninja.jpg), -webkit-linear-gradient(left, #000, #666);
    background-image: url(assets/gr_header-ninja.jpg), -moz-linear-gradient(left, #000, #666);
    background-image: url(assets/gr_header-ninja.jpg), -ms-linear-gradient(left, #000, #666);
    background-image: url(assets/gr_header-ninja.jpg), -o-linear-gradient(left, #000, #666);
    background-image: url(assets/gr_header-ninja.jpg), linear-gradient(left, #000, #666); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#666666'); 
    background-repeat: no-repeat; 
    margin-top: -40px;  
   border-radius: 3px;
}
#header .navigation
{
    height: 35px;
    float: right;
margin-top: 44px; margin-right: 16px;}
.navigation ul
{
    float: left;
}
.navigation ul li
{
    list-style: none;
    float: left;
    display: block;
    padding: 10px 0 0 9px;
    background: url(assets/gr_nav-seperator.gif) 4px 13px no-repeat;
}
.navigation ul li a
{
    color: #ffffff;
    font-size: 1em;
    line-height: 1em;
    text-decoration: none;
}
.navigation ul li a:hover
{
    text-decoration: underline;
}
.navigation ul li.first
{
    padding: 10px 0 0 0;
    background: none;
}

.search
{
    background: #ffffff url(assets/gr_search-icon.gif) 0 0 no-repeat;
    margin: 6px 0 0 20px;
    float: left;
    width: 222px;
}
    .search .search_inner
    {
        background: url(assets/gr_search-right.gif) 100% 0 no-repeat;
        border: none;
        height: 19px;
        margin: 0;
        padding: 3px 8px 0 27px;
    }
    .search label { display: none; }
    .search input
    {
        border-width: 0;
        width: 180px;
        height: 16px;
        padding: 0;
        margin: 0;
    }
    
#banner
{
    padding: 20px 0 0 269px;
    color: #ffffff;
}
    #banner h1,
    #banner .title01
    {
        margin: 0 0 17px 0;
        color: #ffffff;
        text-indent: -9999em;
        background: url(assets/tl_css-ninja.png) 0 0 no-repeat;
        height: 57px;
    }
    #banner a
    {
        display: block;
        width: 202px;
        height: 216px;
        float: left;
        margin: -60px 0 0 -244px;
        text-indent: -9999em;
        outline: none;
    }
/* END: Header styles */
    
/* START: Content styling */
#content
{
    padding: 26px 0 0 55px;
}
#content a
{
    color: #18191D;
}
#content a:hover
{
    text-decoration: none;
}
#content p
{
    color: hsl(0, -50%, 30%);
    margin: 0 0 1.833em 0;
    line-height: 1.5em;
    text-align: justify;
}

.error input,
.error textarea,
.error select
{
    background-color: #F1CFCF;
}
.error label
{
    color: #74011B !important;
    font-weight: bold;
}

.caption01 /* Appears below article image */
{
    margin: -30px 0 0;
    display: block;
}

#content .shorty01 
{ 
    padding: 5px; 
    border: 1px solid #FFFFFF;
    float: right; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
}

#adverts
{
    overflow: hidden;
    margin: 1em 0 2em;
}
        
.article
{
    margin: 0;
    padding: 0 0 0.917em;
    position: relative;
    width: 100%;
}
    #content .article h1.title02,
    #content .article h2
    {
        line-height: 1.458em;
        
        padding: 0 0 0 -2px;
        color: #1a1a1d;
        margin: 0 0 0.5em 0;
        float: left;
        width: 577px;
    text-decoration: none!important; font-weight: normal;}
    #content .article h2.subtitle02
    {
        line-height: 1em;
        background: none;
        padding: 0;
        float: none;
        width: auto;
    }
    #content .article code { font-style: italic; }
.article-detail
{
    margin: 0 0 3.167em 0;
    padding: 0;
    border: none;
}
    .article-img
    {
        border: 5px solid #bebebe;
        display: block;
    }
    .left-img
    {
        float: left;
        margin: 3px 13px 13px 0;
    }
    .display-img
    {
        float: left;
        margin: 3px 13px 1.636em 0;
    }
    .main-img
    {
        margin: 0 0 1.636em 0;
    }
    .article .right-img,
    .article-detail .right-img,
    .search-item .right-img
    {
        float: right;
        margin: 0 0 13px 13px;
    }
    
    .article blockquote,
    blockquote.pull-quote01
    {
        background: url(assets/gr_bg_pull-quote01.gif) 0 0 no-repeat;
        padding: 0.33em 0 0 39px;
        margin: 0;
    }
        .article blockquote p,
        blockquote.pull-quote01 p
        {
            font-style: italic;
        }
    blockquote.breakaway-quote01
    {
        background: url(assets/gr_bg_pull-quote01.gif) 0 0 no-repeat;
        padding: 0 0 0 39px;
        margin: 0;
        float: right;
        width: 200px;
    }
        blockquote.breakaway-quote01 p
        {
            font-style: bold;
            border: 5px solid #18191d;
            border-width: 5px 0;
            padding: 8px 3px 10px;
            font-style: italic;
        }
    
    .code
    {
        padding: 10px 13px 15px;
        margin: 0 0 2.083em 0;
        background: #000000;
        color: #318df2;
        font-size: 1.083em;
        -moz-border-radius: 0 0 11px 0; -webkit-border-bottom-right-radius: 11px;border-radius: 0 0 11px 0;
    }
        .code * { font-size: 1.1em; font-family:monospace; }
	.code pre,
	.code .css,
        .code .html4strict,
        .code .javascript
        {
            font-family:monospace;
            overflow: auto;
            width: 593px;
        }
        .code .html4strict, .code .html4strict * { color: #318df2 !important; font-weight: normal !important; }
        .code .css, .code .css * { color: #da2427 !important; font-weight: normal !important; }
        .code .javascript, .code .javascript * { color: #109610 !important; font-weight: normal !important; }
	/* Highlight colouring */
	.syntax .hll{background-color:#49483e}.syntax{background:none repeat scroll 0 0 #272822;color:#f8f8f2}.syntax .c{color:#75715e}.syntax .err{background-color:#1e0010;color:#960050}.syntax .k{color:#66d9ef}.syntax .l{color:#ae81ff}.syntax .n{color:#f8f8f2}.syntax .o{color:#f92672}.syntax .p{color:#f8f8f2}.syntax .cm{color:#75715e}.syntax .cp{color:#75715e}.syntax .c1{color:#75715e}.syntax .cs{color:#75715e}.syntax .ge{font-style:italic}.syntax .gs{font-weight:bold}.syntax .kc{color:#66d9ef}.syntax .kd{color:#66d9ef}.syntax .kn{color:#f92672}.syntax .kp{color:#66d9ef}.syntax .kr{color:#66d9ef}.syntax .kt{color:#66d9ef}.syntax .ld{color:#e6db74}.syntax .m{color:#ae81ff}.syntax .s{color:#e6db74}.syntax .na{color:#a6e22e}.syntax .nb{color:#f8f8f2}.syntax .nc{color:#a6e22e}.syntax .no{color:#66d9ef}.syntax .nd{color:#a6e22e}.syntax .ni{color:#f8f8f2}.syntax .ne{color:#a6e22e}.syntax .nf{color:#a6e22e}.syntax .nl{color:#f8f8f2}.syntax .nn{color:#f8f8f2}.syntax .nx{color:#a6e22e}.syntax .py{color:#f8f8f2}.syntax .nt{color:#f92672}.syntax .nv{color:#f8f8f2}.syntax .ow{color:#f92672}.syntax .w{color:#f8f8f2}.syntax .mf{color:#ae81ff}.syntax .mh{color:#ae81ff}.syntax .mi{color:#ae81ff}.syntax .mo{color:#ae81ff}.syntax .sb{color:#e6db74}.syntax .sc{color:#e6db74}.syntax .sd{color:#e6db74}.syntax .s2{color:#e6db74}.syntax .se{color:#ae81ff}.syntax .sh{color:#e6db74}.syntax .si{color:#e6db74}.syntax .sx{color:#e6db74}.syntax .sr{color:#e6db74}.syntax .s1{color:#e6db74}.syntax .ss{color:#e6db74}.syntax .bp{color:#f8f8f2}.syntax .vc{color:#f8f8f2}.syntax .vg{color:#f8f8f2}.syntax .vi{color:#f8f8f2}.syntax .il{color:#ae81ff}
        
    .article-detail .resources01
    {
        background-color: #1E528C;
        border: 1px solid #ffffff;
        margin: 0 0 1.636em;
        padding: 0.833em 0;
        text-align: center;
        border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
    }
        #content .article-detail .resources01 a.demo
        {
            background: url(assets/ico_demo.png) 0 50% no-repeat;
            margin: 0 16px 0 0;
            padding: 5px 0 5px 28px;
            line-height: 2em;
            color: #ffffff;
        }
        #content .article-detail .resources01 a.demo.source
        {
            background: url(assets/ico_source.png) 0 50% no-repeat;
        }
    .article-detail .resources02
    {
        background-color: #6b6b6c;
    }
        .article-detail .resources02 ul
        {
            margin: 0 0 0 50px;
        }
        .article-detail .resources02 li
        {
            float: left;
            margin: 0 5px 0 0;
            padding: 2px 0;
            background: none;
        }
            .article-detail .resources02 li a
            {
                padding: 0 0 0 24px;
            }
        
.comments-listing
{
    padding: 2em 0 1.5em 27px;
    margin: 0;
}
    .comments-listing .item
    {
        margin: 0 0 1.33em 0;
        position: relative;
        list-style: none;
		border-bottom: 1px solid #18191D;
    }
        .comments-listing .item img
        {
            float: left;
            border: 3px solid #bebebe;
        }
        .comments-listing .comment
        {
            margin: 0 0 0 70px;
            width: 522px;
        }
            .comments-listing .comment-padding
            {
                border: 2px solid #fff;
                margin: 0 0 0 33px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
            }
            .comments-listing .comment-content
            {
                padding: 0 10px 10px 41px;
                margin: 0 0 0 -33px;
            }
            .comments-listing  .item .comment-content img { border: 0 none; float: none; }
			.comments-listing  .item .comment-content .code pre { width: 100%; }
            .comments-listing .comment p
            {
                margin: 0 0 1.583em 0;
            }
            .comments-listing .comment-author,
            #content .comments-listing .comment-author a
            {
                color: #010101;
            }
            .comments-listing .comment-author
            {
                font-size: 0.833em;
            }
    
    .comments-listing .trackback
    {
        border-top: 2px solid #fff;
        margin-bottom: 1.667em;
        padding: 5px;
    }

/* ZOMG pure CSS speech bubble stolen from http://nicolasgallagher.com/pure-css-gui-icons/demo/ */
.comment-count-link {
    position:absolute;
    overflow:hidden;
    padding:0;
    margin:0 0 0.25em;
    width: 36px; height: 31px;
     display: block;
    text-decoration: none;
    top: 9px;
    left: -50px;
}
.comment-count-link .counter { position: relative; display: block; text-align: center; line-height: 23px;  }

.comment-count-link:hover, 
.comment-count-link:focus, 
.comment-count-link:active {
    color:#730800;
    background:transparent;
}

.comment-count-link:before, 
.comment-count-link:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}

.comment-count-link:before, 
.comment-count-link:after {
    margin:-8px 0 0;
    background: #BEBEBE;
}

.comment-count-link:before {
    width:36px;
    height:23px;
    margin-top:-15px;
    /* css3 */
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px; 
}

.comment-count-link:after {
    left:14px;
    bottom: 0;
    top: auto;
    border:4px solid transparent;
    border-top-color: #BEBEBE;
    border-right-color: #BEBEBE;
    margin-top:4px;
    background:transparent;
}
        
.datebox
{
    float: right;
    width: 2.667em;
    background-color: hsla(211, 45%, 49%, 1);
    border: 1px solid #000000;
    color: #ffffff;
opacity: 0.6;}
    .datebox .month
    {
        display: block;
        text-align: center;
        font-size: 0.666em;
        line-height: 1em;
        padding: 2px 0;
        background-color: #1e528c;
        text-transform: uppercase;
    }
    .datebox .day
    {
        display: block;
        text-align: center;
        font-size: 1.333em;
        line-height: 1em;
        font-weight: bold;
        padding: 2px 0;
    }
    
.rss,
.twitter
{
    background: url(assets/ico_rss.gif) 0 0 no-repeat;
    padding: 0 0 1.5em 20px;
    color: #18191d;
    display: block;
}
.twitter { background: url(assets/ico_twitter.gif) 0 0 no-repeat; }

.search-item
{
    padding: 0 0 1.33em 0;
}
    .search-item .date
    {
        font-size: 0.83em;
        display: block;
        margin: -4px 0 3px 0;
    }

.post-nav .left { float: left; }    
.post-nav .right { float: right; }
    #content .post-nav a
    {
        padding: 6px;
        font-weight: bold;
        color: #ffffff;
        text-decoration: none;
        background: #2C7AD0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -webkit-transition: background 1s ease;
    }
    #content .post-nav a:hover
    {
        background: #1E528C;
    }
/* END: Content styling */

/* START: @List styles */
ul.list01,
.article ul
{
    margin: 0 0 1.25em 0;
}
    .article ul,
    .search-item ul
    {
        margin: 0 0 1.25em 10px;
    }
    ul.list01 li,
    .article ul li,
    .search-item ul li
    {
        list-style: none;
        color: #18191d;
        background: url(assets/ico_ninja-star02.gif) 0 0.333em no-repeat;
        padding: 0 0 0.333em 12px;
    }
    ul.list01 li
    {
        list-style: none;
        color: #18191d;
        background: url(assets/ico_ninja-star02.gif) 0 0.333em no-repeat;
        padding: 0 0 0.5em 12px;
        line-height: 1.33em;
    }
    .article ul li,
    .search-item ul li
    {
        color: #4C4C4C;
    }
    ul.list01 li.title
    {
        font-size: 1.167em;
        line-height: 1em;
        margin: 0 0 0.5em 0;
        background: none;
        padding: 0;
        font-weight: bold;
    }
    ul.list01 li a,
    .article ul li a
    .search-item ul li a
    {
        color: #18191d;
        text-decoration: underline;
    }
    
ul.list02
{
    margin: 0 0 1.25em 0;
}
    ul.list02 li
    {
        color: #fff;
    }
/* END: List styles */

/* START: @Form styles */
.form-container01
{
    padding: 0 0 0 27px;
}
    .form-container01 h3
    {
        color: #ffffff;
        margin: 0 0 2.167em 0;
    }
.cform fieldset
{
    border: none;
    margin: 0;
    padding: 0;
}
    .linklove,
    .cform legend
    {
        display: none;
    }
    .cform ol.cf-ol
    {
        padding: 0;
        margin: 0;
    }
        .cform ol.cf-ol li
        {
            list-style: none;
            float: left;
            width: 617px;
            margin: 0 0 1em;
        }
        .cform ol.cf-ol li.cf_li_err
        {
            background: #BE1515;
            padding: 10px;
            border: 1px solid #ffffff;
            width: 597px;
            border-radius: 0.5em;
            -moz-border-radius: 0.5em;
            -webkit-border-radius: 0.5em;
        }
    .cform .cf-sb
    {
        padding: 0 0 0 110px;
    }
.field01,
#content .fieldwrap
{
    margin: 0 0 0.833em 0;
    overflow: hidden;
}
    .field01 label,
    ol.cf-ol li label
    {
        width: 110px;
        display: block;
        float: left;
        color: #4C4C4C;
        text-align: right;
        margin: 0 10px 0 0;
    }
    .field01 input,
    ol.cf-ol li input
    {
        width: 464px;
        border: 1px solid #343434;
        float: left;
        line-height: 1.5em;
        padding: 3px 3px 4px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    ol.cf-ol li input
    {
        margin-right: 3px;
    }
    .field01 textarea,
    ol.cf-ol li textarea
    {
        width: 463px;
        border: 1px solid #343434;
        overflow: auto;
        margin: 0;
        padding: 3px 3px 4px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .field01 input.button01,
    ol.cf-ol li input.button01,
    .form-container01 .button01
    {
        width: auto !important;
        border: none;
        padding: 0 0 0.833em 120px;
    }
    
    .field01.field02 textarea
    {
        width: 508px;
        height: 132px;
    }
    .failure,
    .success
    {
        margin-bottom: 1.833em;
        border:1px solid #ffffff;
        background: #BE1515 url(assets/ico_error.gif) 10px 50% no-repeat;
        padding: 10px 10px 10px 50px;
        min-height: 20px;
        height: auto !important;
        height: 20px;
        color: #ffffff;
        border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
    }
    .success
    {
        background: #109610 url(assets/ico_success.gif) 10px 50% no-repeat;
    }
    
#recaptcha_widget_div,
#recaptcha-submit-btn-area
{
    padding: 0 0 0.833em 148px;
}
#content p.recaptcha-error
{
    background-color: #be1515;
    margin-left: 238px;
    border: 1px solid #000;
    text-align: center;
    padding: 10px;
}

.subscribe-to-comments { padding: 0 0 0 146px; }
/* END: Form styles */

/* START: @Footer styles */
#footer, .push 
{
    height: 186px; /* .push must be the same height as .footer */
}
#footer
{
    background: url(assets/gr_bg_footer_bu.gif) 0 0 repeat-x;
}
    #footer #innerfooter
    {
        height: 186px;
    }
    #footer p
    {
        font-size: 0.917em;
        color: #ffffff;
        text-align: center;
        padding: 148px 0 0 0;
    }
/* END: Footer styles */

/* START: Ad styles */
body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;}
body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0 15px 0 0;margin:0;}
body .one .bsa_it_ad:hover img{-moz-box-shadow:0 0 3px #000;-webkit-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000;}
body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:none;margin:0 0 5px; width: 100%; overflow: hidden;}
body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
body .one .bsa_it_ad .bsa_it_t{padding:6px 0 0 0;color:#18191D;}
body .one .bsa_it_ad .bsa_it_d{color:#18191D;}
body .one .bsa_it_p{display:none;}
body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:10px;margin:12px 15px 0 0;}
/* END: Ad styles */