@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700);

/*
Theme Name: CSSKarma
Author: Tim Wright
*/

/*
 * Reset browser defaults
-----------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td                   { margin:0;padding:0;}
body                               { line-height:1;color:#222;background:#fff;}
h1,h2,h3,h4,h5,h6,p                { font-size:100%;font-weight:400;}
ol,ul                              { list-style:none;}
caption,cite,code,th               { font-style:normal;font-weight:400;}
fieldset,img                       { border:0;}
caption,th                         { text-align:left;}
:focus                             { outline:1px dotted #eee;}
table                              { border-collapse:collapse;border-spacing:0;}
hr                                 { border:0;border-top:1px solid #555;margin:0;height:1px;}
label,
button,
input[type="submit"]               { cursor:pointer;}

/*
 * General Elements
-----------------------------*/
html                               { text-align:center; }
body                               { background:#f6f6f6;font:12px/1.3 Tahoma, Arial, Sans-serif;background:#fff ;
                                     text-align:left; }
h1                                 { font-size:30px; }
h2                                 { font:300 38px/1.3 "Yanone Kaffeesatz", Arial, Sans-serif;margin:0 0 15px; }
h3                                 { font-size:20px; }
h4                                 { font-size:18px; }
h5                                 { font-size:14px; }
h6                                 { font-size:12px; }
p                                  { margin:0 0 15px;line-height:1.8; }
p,
ul,
ol                                 { font-size:12px; }
ul,
ol                                 { margin:0 0 15px 30px; }
ul                                 { list-style:disc; }
ol                                 { list-style:decimal; }
li                                 { line-height:1.8; }
dl                                 {  }
dd                                 { margin:0 0 20px;line-height:1.8 }
dt                                 { font-size:16px; }
pre                                { padding:10px;background:#e4e4e4;color:#222;border:1px solid #ccc;margin:15px 0 30px;overflow:auto; }
iframe                             { width:590px; }
pre span{color:#888;}
blockquote{width:66%;margin:0 auto 25px;border-left:10px solid #ccc;padding:0 15px;}
blockquote cite{display:block;padding:5px 0 0;font-style:italic;text-align:right;}

div:target{ 
   background: #fffedf !important;
    border: 1px solid #e5e6a4;
    border-radius:7px;
    position: relative;
padding:15px 15px 0;
    width: 100%;
    margin:0 0 15px;
 }

div:target:before{ font:700 16px Candara;content:'here ->';display:block;margin-left:-70px;height:0;overflow:visible; }

/*
 Archors
*/
a                                  { color:#036;overflow:hidden;text-decoration:none; }
a:hover,
a:focus                            { color:#00509f; }

.post a{ border-bottom:1px solid #036; }
.post a:hover{ border-bottom:1px solid #ccc; } 

.post h2 a{ border:0; }

/*
 * Utility Classes
-----------------------------*/
.right                             { float:right; }
.left                              { float:left; }
.clear                             { clear:both; }
.accessibility                     { position:absolute;top:-9999px;left:-9999px; }
.accessibility:focus               { position:static; }
.formError                         { color:red; }
.rss a { color:orange !important;font-weight:700;text-transform:uppercase; }

/*
 * Layout IDs
-----------------------------*/

#branding,
#content,
#nav,
#footer                            { max-width:700px;margin:0 auto;position:relative; }

/*
 Branding
*/
#branding                          { padding:10px 0; }
#branding h1 a                     { display:block;margin:0;color:#333;font:50px "American Typewriter", Consolas, "Courier New", Monospace;; }
#branding p.tagline                { display:none; }
#branding p.slogan                 { display:none; }

/*
 Navigation
*/
#nav                               { padding:0 0 20px;clear:both;border-bottom:1px solid #ccc; }
#nav ul                            { font-size:16px;margin:0;list-style:none; }
#nav li                            { display:inline-block;margin-right:50px;text-transform:lowercase;line-height:2.6; }
#nav a                             { text-decoration:none;color:#333; }
#nav a:hover,
#nav a:focus                       { border-bottom:1px solid #ccc; }

/* 
 Search
*/
#searchform                        { position:absolute;top:0;border:1px solid #ccc;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;
                                     width:250px;background:#fff;padding:5px;right:0; }
#searchform label                  { position:absolute;top:-9999px;left:-9999px; }
#searchform input#q                { border:0;display:block;float:left;padding:2px;width:200px;color:#666;font-size:14px; }
#searchform button                 { border:0;text-indent:-9999px;height:20px;width:20px;display:block;float:right;
                                     background:url(http://www.csskarma.com/img/btn_search.gif); }

/*
 Content
*/
#content                            {clear:both;margin-top:30px;  }


/* Main content */
#content-main                       {  }
.lab #content-main,
.errors #content-main,
.search #content-main,
.contact #content-main,
.articles #content-main,
.research #content-main             { min-height:290px;float:left;background:;margin:-30px 0 20px;padding:20px;width:66%;-moz-border-radius:7px;
                                      -webkit-border-radius:7px;-moz-box-shadow:0 0 5px #999;-webkit-box-shadow:0 0 5px #999; }
.contact #content-main form ul      { margin:0;list-style:none; }
.contact #content-main form li      { padding:5px 10px; }
.contact #content-main form label   { display:block;font-size:16px; }
.contact #content-main form input,
.contact #content-main form textarea{ -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #777;font-size:14px;padding:5px; }
.contact #content-main form textarea{ font-family:Tahoma, Arial, Sans-serif; }
.contact #content-main button       { color:#444;background:#e4e4e4;border:0;font-size:16px;padding:10px;-moz-border-radius:7px;-webkit-border-radius:7px;margin-left:10px; }
.contact #content-main button:hover { background:#d4d4d4;color:#252525; }

/* Sub content */
#content-sub                        { background:#fff;width:28%;float:right;margin:-30px 0 0;-moz-border-radius:7px;-webkit-border-radius:7px; }
#content-sub h3                     { font-size:16px;color:#333;padding:10px 10px 0 10px; }
#content-sub ul                     { margin:0;list-style:none;padding:10px 10px; }
#content-sub li                     { padding:7px 5px;-moz-border-radius:7px;-webkit-border-radius:7px; }
#content-sub li:hover               { background:#e4e4e4; }

/*
 Site info
*/
#site-info                          { clear:both;background:#05487a url(http://www.csskarma.com/img/bg_footer.png) repeat-x 0 0;border-top:20px solid #05487a;
                                      padding:0 0 20px;text-align:left; }
#footer #profiles,
#footer #blogfeed,
#footer #twitter                    { width:30%;float:left; }
#footer #blogfeed                   { margin:0 1%; }
#site-info h3                       { color:#fff;font-size:20px;line-height:50px; }
#site-info #profiles ul,
#site-info #blogfeed ul             { margin:0;list-style:none;font-size:13px; }
#site-info #profiles a,
#site-info #blogfeed a              { color:#fff;padding:5px 5px 5px 35px;display:block;background:#043254;margin:5px;-moz-border-radius:7px;
                                     -webkit-border-radius:7px; }
#site-info #profiles li a           { background-image:url(http://www.csskarma.com/img/sprite_social.gif);background-repeat:no-repeat; }
#site-info #blogfeed a              { padding-left:10px; }
#site-info #blogfeed a:hover,
#site-info #blogfeed a:focus,
#site-info #profiles a:hover,
#site-info #profiles a:focus        { background-color:#04263f; }
#site-info #profiles li.twitter a   { background-position:7px -32px; }
#site-info #profiles li.facebook a  { background-position:7px 8px; }
#site-info #profiles li.dopplr a    { background-position:7px -73px; }
#site-info #profiles li.linkedin a  { background-position:7px -112px; }
#site-info #profiles li.flickr a    { background-position:7px -152px; }
#site-info #twitter                 { margin:15px 0 0 5px;width:300px; }
#site-info #twitter img             { margin:0 10px 0 0;border:10px solid #043254;-moz-border-radius:7px;-webkit-border-radius:7px;float:left;}
#latest_tweet                       { color:#fff;background:url(http://www.csskarma.com/img/bg_quotes_blue.png) no-repeat 0 0;float:right;width:115px;padding:5px 0 5px 5px;}
#latest_tweet a                     { color:#eee;border-bottom:1px solid #eee; }
#blogfeed p.error                   { display:none; }

#content-sub              { display:none; }
#content-main             { background:#fff;margin:-15px auto 20px;
                             }
#content-main img         { display:block;margin:auto;padding:1px;border:5px solid #e4e4e4; }
#content-main img:hover   { border-color:#d4d4d4 }
.post                     { border-bottom:1px solid #eee;margin-bottom:20px; }
.meta                     { opacity:.3; }
.post:hover .meta{ opacity:1; }
#content .post .date      { padding:0;margin:0; }
p.demo a                  { background:#3f657f;color:#fff;padding:5px;display:block;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;text-align:center;font-size:14px; }
p.demo a:hover,
p.demo a:focus            { background:#578aaf; }
#content-main h5          { font-size:16px;margin:20px 0 10px; }
#content-main p.fineprint { font-size:10px;color:#777;line-height:1.2; }

p code                    { color:#000; }

#content-main .commentlist img.avatar   { float:left;border-radius:30px;margin:-5px 10px 0 0; }
.commentlist              { margin:0;list-style:none; }
.commentlist li           { padding:10px 0;border-bottom:1px solid #e4e4e4;float:left;width:100%;clear:both; }
h3#comments               { font-size:18px;margin:0 0 20px; }

.comment-author           { font-weight:400;font-size:16px;letter-spacing:-1px;line-height:1; }
.comment-body             { padding:10px; }
.comment-meta             { clear:both;margin:0 0 10px 0;padding:0;font-size:10px; }

.comment-body pre{width:auto !important;padding:0;}

span.says                 { display:none; }
#content .comment-body img{ border:0;display:inline; }
#respond                  { padding:20px 0; }
img.avatar                {  }
#content-main .comment-body p{ clear:both;margin:0 0 5px 0;line-height:1.4;padding:0; }

ul.children               { margin:0 0 0 70px; }
ul.children li            { list-style:none;border:0;border-left:1px solid #ccc; }

.pingback,
.trackback                { opacity:.5; }

#content-main h3          { font-size:22px;margin:0 0 15px;padding:0 0 5px;font-family:Georgia, Times, Sans-Serif;border-bottom:5px solid #e4e4e4;color:#333; }
#content-main h4          { font-size:18px;font-family:Georgia, Times, Sans-Serif;margin:0 0 15px;color:#444; }
#content-main p strong    { color:#272727; }
#content-main p,
#content-main ol,
#content-main ul          { color:#555;margin-bottom:20px;font-size:16px !important;line-height:1.5; }
#content-main p.otherposts{ text-align:center;margin:30px 0;font-weight:700; }

#commentform textarea     { width:570px;height:150px;padding:5px;display:block;margin:10px 0; }
#commentform input[type="text"]{ padding:5px;}

#commentform textarea,
#commentform input[type="text"]{ -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #aaa;font:14px/1.6 Tahoma, Arial, Sans-Serif;color:#333; }

#commentform textarea:focus,
#commentform input[type="text"]:focus{ border:1px solid #666 }

#commentform input[type="submit"]{ color:#444;background:#e4e4e4;border:0;font-size:14px;padding:10px;-moz-border-radius:7px;-webkit-border-radius:7px; }
#commentform input[type="submit"]:hover{ background:#d4d4d4;color:#252525; }

#content-main .post img:first-child{}
#content-main .post-meta{padding:0;margin:-20px 0 20px 0;}

p.morecomments{text-align:center;color:#fff !important;}

#verts{width:125px;margin:10px auto}
#verts a{display:block;margin-bottom:10px;}

#trackbacks{margin:0 0 30px;}
#trackbacks ul,
#pingbacks ul{list-style:none;margin:0 0 0 10px;}
#trackbacks .comment-body,
#pingbacks .comment-body{padding:10px 5px;border-bottom:1px solid #ccc;}
#trackbacks .comment-body p,
#trackbacks .comment-body .reply,
#pingbacks .comment-body p,
#pingbacks .comment-body .reply{display:none;}
#trackbacks .comment-body .comment-author,
#pingbacks .comment-body .comment-author{display:block !important;}

/* sliding labels plugin release */
#slidinglabels-plugin-release{  }
.demo{ margin:0 0 0 25px;list-style:none;height:80px;clear:both;}
.demo li{display:inline;}
.demo li a{ display:block;line-height:50px;width:30%;float:left;text-align:center;margin-right:3%;background:#036;
background:-webkit-gradient(linear,left bottom,left top,color-stop(0, #592E03),color-stop(0.99, #834304));
background:-moz-linear-gradient(center bottom,#592E03 0%,#834304 99%);text-shadow:0px 1px 0px #2f1700;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;color:#fff;font-size:14px; }
.demo a:hover{opacity:.9;}
#content-main p { font-size:14px;font-family:Georgia;margin-bottom:20px;color:#333; }
#slidinglabels-plugin-release p strong{color:#000;}
#slidinglabels-plugin-release h3{ margin-top:40px; }


#content-main .book{margin: 30px 0;clear:both;border:1px solid #fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:10px;-moz-box-shadow:0 0 2px #aaa;-webkit-box-shadow:0 0 2px #aaa;box-shadow:0 0 2px #aaa;background:#f3f3f3;
background:-moz-linear-gradient(
    center top,
    #eee,
    #fff
);
background:-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #eee),
    color-stop(1, #fff)
);
}
#content-main .book h3{margin:0 0 10px;padding:0;border:0;}
#content-main .book img{border:0;float:left;margin:10px;-moz-box-shadow:2px 2px 2px #999;}
#content-main .book p{padding:0;margin:-10px 0 0;line-height:1.6}
#content-main .book .author a{display:block;font-size:14px;float:right;border:1px solid #ccc;padding:10px;margin:5px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#content-main .book .author a:hover{background:#f9f9f9;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;box-shadow:0 0 4px #bbb;}
#content-main .book a:hover img {opacity:.9}

.depth-2{padding:0 10px !important;}
.depth-2 textarea{width:500px !important;}


@media only screen and (max-width: 480px) {

    #searchform{ display:none; }
    #branding,
    #content,
    #nav,
    #footer                            { margin:0 10px; }
    label{ display:block; }
    #branding h1{ text-align:center; }
    
    #nav                               { top:-40px; }
    #nav ul                            { font-size:20px;margin:10px 0;list-style:none;text-align:center; }
    #nav li                            { display:inline-block;margin-right:10px;text-transform:capitalize; }
    #nav a                             { text-decoration:none;color:#333; }
    #nav a:hover,
    #nav a:focus                       { border-bottom:5px solid #05487a; }
    
    #content-main h2{ font-size:28px; }
    textarea,pre{ white-space:normal !important;overflow:auto;max-width:95%; }

}