/* LAYOUT */ /* ----------------------------------------- */ /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */ .aligncenter { display:block; margin:0 auto } .alignleft { float:left } .alignright { float:right } /* You might find the following useful */ br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */ div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */ li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */ /* Float clearing goodness from Handcrafted CSS book ------------------------------------------------------------- */ .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .group { height: 1%; } *:first-child+html .group { min-height: 1px; } /* COMMON ELEMENTS */ #container, #header #navigation ul, #headercontainer, #title h2, #search, #lowercontainer, #devbar .devcontainer { width: 1060px; margin: 0 auto; } a img:hover { -webkit-transform: scale(1.01); -moz-transform: scale(1.01); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); } a img:active { -webkit-transform: scale(1.00); -moz-transform: scale(1.00); -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); } ul li { margin-left: 20px; } input[type="text"], textarea { padding: 10px; border: 2px solid #5f5f5f; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 449px; } input[type="text"]:hover, textarea:hover { border: 2px solid #22c3eb; } input[type="text"]:focus, textarea:focus { border: 2px solid #972324; background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#fff), color-stop(0.3, #fff)); } #comments textarea:focus, .wpcf7-form-control-wrap textarea:focus { background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#fff), color-stop(0.05, #fff)); } #comments a { position: relative; z-index: 10; } /* --- HEADER --- */ #devbar { background-color: rgba(57, 135, 0, 0.1); width: 100%; padding: 10px 0; height: 37px; } #devbar a.livelink { float: right; } #devbar p.dev-devtext { float: left; background: url(../images/live.png) no-repeat; padding-left: 47px; padding-top: 5px; height: 40px; margin-bottom: 0px; } #devbar p.links { float: right; } /* body.logged-in { border-left: 30px solid rgb(57, 135, 0); } */ #header { width: 100%; } /* navigation */ #navigation { background: url(../images/grid.gif); padding: 7px 0 5px 0; border-bottom: 1px solid #efefef; } #navigation ul li { display: inline; margin-left: 0px; } #navigation ul li a { padding: 8px 15px; } #header #navigation li.mega ul li a { text-transform: lowercase; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-weight: normal; } li.mega ul { position: absolute; top: 37px; z-index: 2; background-color: #fff; background-color: rgba(255, 255, 255, 0.97); padding: 10px 0; border-top: 2px solid #22C3EB; -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.18); } li.mega ul li { float: left; width: 145px; display: block; } li.mega ul li a { line-height: 30px; } #navigation ul li.tags a { padding-right: 25px; background: url(../images/arrow.png) 50px 16px no-repeat; } #navigation ul li.tags a:hover { background: url(../images/arrow.png) 50px -10px no-repeat; } #navigation ul li.tags li a, #navigation ul li.tags li a:hover { background: none; } #navigation ul li.tags li a { display: block; padding: 0px 15px; } #navigation ul li.tags li a:active { border: none; } #navigation ul li.tags li { float: left; width: 160px; } /* Navigation Mega-drop-down!!!111one ------------------------------------------------------------------------------------------- li.mega ul.two { -webkit-column-count: 7; -webkit-column-gap: 10px; -webkit-column-width: 160px; -moz-column-count: 7; -moz-column-gap: 10px; -moz-column-width: 160px; column-count: 7; }*/ li.mega ul.two.second { display: none !important; } li.mega ul { position: absolute; left: -9999px; } li.mega:hover ul, li.mega li ul:hover { left: auto; } body.category-articles #navigation ul li.articles a, body.category-bestoftheweek #navigation ul li.bestoftheweek a, body.category-tutorials #navigation ul li.tutorials a, body.page-template-page-about-php #navigation ul li.about a, body.page-template-page-contact-php #navigation ul li.contact a { color: #fff; background-color: #22c3eb; } /* title area */ #titlearea { background: url(../images/squares.gif); background-attachment: fixed; border-bottom: 1px solid #efefef; position: relative; } #titlearea #headercontainer { padding: 40px 0; } #subscribe { position: absolute; right: 30px; top: 42px; } #subscribe #twitterarea, #subscribe #rssarea { float: right; clear: both; display: block; } #subscribe #rssarea { float: right; clear: both; position: relative; left: -14px; top: 20px; } .connect_widget_share_comment_span { display: none !important; } #subscribe p { float: left; clear: right; } #subscribe p.rss a { color: #eb8522; } #subscribe p.rss a:hover { color: #972324; } #subscribe a.twitterimg { float: right; display: block; background: url(../images/subscribe2.png) no-repeat 0 0; width: 130px; height: 47px; text-indent: -9999px; clear: right; } #subscribe a.rssimg { float: left; display: block; background: url(../images/subscribe2.png) no-repeat 0 -47px; width: 116px; height: 45px; text-indent: -9999px; position: relative; top: 2px; } /* --- MAIN --- */ #title { border-bottom: 1px solid #efefef; } #title.home { height: 48px; } #container { border-left: 1px solid #efefef; border-right: 1px solid #efefef; overflow: hidden; background: url(../images/containerBg.gif) repeat-y; } /* Content */ #content { width: 700px; float: left; position: relative; } #content .post { padding: 20px; padding-right: 35px; } body.home #content .post.snippet, body.search-results #content .post.snippet, body.archive #content .post.snippet { padding: 15px 20px 10px 20px; } #content img { border: 1px solid #efefef; } #content a.retweet { float: left; margin-right: 15px; position: relative; top: 5px; margin-bottom: 5px; } #content a.retweet.horizontal { float: none; margin-right: 0px; margin-bottom: 0px; top: 0; } .alignleft { margin: 5px 10px 10px 0; position: relative; top: 5px; } img.hide { display: none; } /* Search Results */ body.search-results #title { background-color: #fef9e4; } span.search-terms { font-weight: bold; color: #9d882e; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } /* Archive Pages */ body.archive #title { background-color: #f4fcfe; } /* Navigation */ .wp-pagenavi { padding: 20px; } .wp-pagenavi a { margin: 0 3px; } .wp-pagenavi a.page { padding: 2px 6px; background-color: #22c3eb; color: #fff; } .wp-pagenavi a.page:hover { background-color: #972324; color: #fff; } .wp-pagenavi a.page, .wp-pagenavi .current { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .wp-pagenavi .current { margin: 0 2px; padding: 2px 6px; background-color: #efefef; color: #5f5f5f; } .wp-pagenavi .extend { color: #efefef; } /* 404 page */ .error404page #content p, .error404page #content form { margin-left: 20px; } .error404page #content { padding-top: 20px; } /* Homepage */ body.home #content .post, body.search-results #content .post, body.archive #content .post { padding: 30px 20px; border-bottom: 1px solid #efefef; } .wp-post-image { float: left; margin: 0 15px 15px 0; } /* Author Info */ #authorinfo { padding: 20px; padding-bottom: 10px; background: url(../images/squares.gif); background-attachment: fixed; border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; margin-bottom: 30px; margin-top: 10px; } #authorinfo img { float: left; } #authorText { position: relative; top: -10px; width: 485px; margin-left: 80px; } /* Google Ads */ #gglad { width: 336px; margin: 0 auto; border: 1px solid #efefef; height: 280px; } #horizontalg { margin: 0 0 30px 20px; border: 1px solid #efefef; height: 60px; width: 468px; } /* Related Posts */ #related { padding: 0 20px 10px 20px; margin-top: 30px; } #related ul li { margin: 10px -20px; padding: 10px 20px; background: url(../images/grid.gif); border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; list-style: none; } /* Comments */ #comments ul { margin: 0; } #comments li { list-style: none; margin-left: 0px; } #comments li #respond { padding-top: 0px; margin-top: -20px; } #comments li h3 { display: none; } #comments textarea, .wpcf7 textarea { width: 636px; min-height: 250px; margin-bottom: 10px; } .commentlist a.comment-reply-link { z-index: 15; position: relative; left: 580px; } .commentlist a.comment-reply-link, input[type="submit"], a.readmore { background: #fff url(../images/button_bg.png) repeat-x; display: inline-block; padding: 7px 17px 8px; color: #555; text-decoration: none; font-weight: bold; font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: rgba(0, 0, 0, 0.246094) 0px 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.246094) 0px 1px 3px; border: 1px solid rgba(0, 0, 0, 0.246094); border-bottom: 1px solid rgba(0, 0, 0, 0.347656); cursor: pointer; text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 1px; } .commentlist a.comment-reply-link:hover, input[type="submit"]:hover { background-color: #eee; } .commentlist a.comment-reply-link:active, input[type="submit"]:active, a.readmore:active { position: relative; top: 1px; border-bottom: 1px solid rgba(0, 0, 0, 0.347656); } #comments input[type="submit"], a.readmore, .wpcf7 input[type="submit"] { background-color: #22c3eb; color: #fff; text-shadow: rgba(255, 255, 255, 0.496094) 0px 0px 0px; } #comments input[type="submit"]:hover, a.readmore:hover, .wpcf7 input[type="submit"]:hover { background-color: #972324; color: #fff; } #comments input#submit { float: right; } .commentlist { border-bottom: 1px solid #efefef; } .children a.comment-reply-link { left: 500px; } .comment-author img { padding: 3px; background-color: #fff; } .comment-author .fn { position: relative; top: -40px; margin-left: 20px; } .comment-author .says { display: none; } .comment-meta { position: relative; left: 80px; margin-top: -45px; } .comment-body { padding: 30px 20px 30px 20px; border-top: 2px dotted #efefef; } .comment-body:first-of-type { border-top: 1px solid #efefef; } .comment-body p { margin-left: 80px; } .children { width: 100%; } .children li { padding-right: 0; } .children .comment-body { padding: 30px 20px 30px 100px; } .bypostauthor { background-color: #f4fcfe; } .comment-author-tkenny .comment-body { background-color: #fef9e4; } .comment-author-tkenny li .comment-body { background-color: #fff; } .comment-body em { margin-bottom: 20px; display: block; margin-top: -40px; position: relative; left: 80px; } .comment { background-color: #fff; } /* Reply Form */ #respond { padding: 30px 20px 30px 20px; } #respond p { margin-bottom: 5px; margin-top: 20px; } #cancel-comment-reply { float: right; position: relative; top: -57px; right: 85px; } input#subscribe { position: relative; top: auto; right: auto; } #respond p.moderation { margin-top: 0px; } #respond p.subscribe-to-comments input { margin-right: 5px; } /* Contact form */ .wpcf7 p { margin: 0; } .wpcf7 p input, .wpcf7 p textarea { margin: 5px 0 20px 0; } .wpcf7.wpcf7 input[type="submit"] { margin-top: -15px; float: right; position: relative; z-index: 10; } div.wpcf7-mail-sent-ok { border: none !important; color: green; } div.wpcf7-response-output { margin: 0 !important; padding: 0 !important; } /* SIDEBAR */ #sidebar { float: left; width: 349px; margin-left: 1px; position: relative; } #sidebar li:hover, #related li:hover { background-color: #f4fcfe; background-image: none; } #sidebar li { margin-left: 0px; } #sidebar #twitter li:first-of-type { border-top: 1px solid #fff; } #sidebar #twitter li:first-of-type:hover { border-top: 1px solid #efefef; } #twitter iframe { margin: 5px 0 0 30px; } #twitter iframe span { font-size: 14px !important; } .smashing-network { float: left; clear: left; margin: 30px 0 45px 78px; } /* Carbon Ad */ #carbonads-container { background: url(../images/grid.gif); padding: 15px; border-bottom: 1px solid #efefef; float: left; width: 329px; } img.carbonad-image { margin-right: 15px !important; } .carbonad-text, .carbonad-text a { line-height: 14px; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; color: #5f5f5f !important; } .carbonad { border: none !important; background: none !important; } .carbonad-tag { margin-top: 3px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; text-align: left !important; } .carbonad-tag a { font-size: 12px !important; color: #22C3EB !important; font-weight: normal !important; text-align: left !important; } /* Popular Posts */ #popular { float: left; } #popular ul li { padding: 10px 30px; background: url(../images/grid.gif); width: 309px; border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; margin: 10px 0; list-style: none; } #popular ul { margin-top: -10px; } /* Google Ads */ #google { float: left; margin: 10px 0 30px 28px; width: 300px; height: 250px; border: 1px solid #efefef; } #google-long { float: right; margin-top: 10px; margin-right: 35px; margin-bottom: 30px; } /* Tags */ #tags { border-top: 1px solid #efefef; } #sidebar #tags li:hover { background-color: #fff; } #tags { width: 228px; border-right: 1px solid #efefef; border-bottom: 1px solid #efefef; float: left; } /* Twitter */ #twitter { width: 359px; float: left; } #twitter ul { margin-top: 5px; } #twitter li { list-style: none; border-bottom: 1px solid #efefef; padding: 30px; } #twitter a.twitterLink { float: left; margin-left: 55px; } /* FOOTER */ #footer { width: 100%; } #footer ul { margin-left: 0px; margin-bottom: 0px; } #footer li { list-style: none; margin-left: 0px; margin-right: 10px; } #footer p { margin-bottom: 0px; } #footer p.copy { float: right; margin-top: -37px; margin-right: 48px; } #footer #search input[type="text"] { margin-left: 20px; border: 1px solid #959595; } #footer #search input[type="submit"] { margin-left: 5px; position: relative; top: -1px; } #footer #search input[type="text"]:hover { border: 1px solid #22c3eb; } #footer #search input[type="text"]:focus { border: 1px solid #972324; background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#fff), color-stop(0.3, #fff)); } #footer #upper { background: url(../images/grid.gif); border-bottom: 1px solid #efefef; border-top: 1px solid #efefef; padding: 10px 0 10px 0; } #footer #lower { padding: 30px 0 30px 0; background: url(../images/squares.gif); background-attachment: fixed; } #footer li.topics { margin-left: 20px; } #footer li.topics ul { width: 300px; } #footer li.topics ul li { float: left; width: 90px; } #footer .subscribe { margin-left: 315px; height: 50px; position: relative; top: -10px; } #footer a.twitterimg { display: block; background: url(../images/subscribe2.png) no-repeat 0 0; width: 130px; height: 47px; text-indent: -9999px; position: relative; top: -35px; left: 70px; } #footer a.rssimg { display: block; background: url(../images/subscribe2.png) no-repeat 0 -47px; width: 116px; height: 45px; text-indent: -9999px; position: relative; top: -35px; left: 95px; } #footer p.footerrss { margin-top: -71px; margin-left: 225px; } #footer a.logo { background: url(../images/small-logo.png); display: block; width: 227px; height: 43px; float: right; text-indent: -9999px; margin-top: -65px; z-index: 10; } #footer li.logo { float: right; display: block; } /* ----- In-page Examples ----- */ a.button { background: url(../images/button.png) no-repeat 0 0; width: 186px; height: 52px; display: block; text-indent: -9999px;} a.button:hover { background-position: 0 -52px; opacity: 1; } a.button:active { background-position: 0 -104px; border-bottom: none; } .center { margin: 0 auto; } #buttonDemo { background-color: #f1f1f1; width: 100%; margin-bottom: 20px; padding: 15px 0; } #update { background-color: #f9e8bc; border: 2px solid #dec88e; width: 556px; margin-bottom: 20px; clear: left; } #update p { color: #957a33; padding: 20px; margin: 0; } .wp-caption { margin: 0; padding: 0px; border: none; background-color: #efefef; margin-bottom: 20px; } .wp-caption img { margin: 0 auto; } p.wp-caption-text { padding: 0 10px; margin: 0; font-size: 12px; font-weight: bold; position: relative; top: -3px; } .postfull .codecolorer-container { border: none; margin-bottom: 20px; width: 560px !important; height: auto !important; } .postfull .codecolorer-container .codecolor { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .Snippet pre { width: 250px; overflow-x: visible; } pre { overflow-x: auto; } code { overflow-x: auto; } .attention, #content h3.attention { background-color: #fef9e4; border-bottom: 1px solid #fbecac; border-top: 1px solid #fbecac; } .attention, #content h3.attention, #content h3.attention a { font-size: 42px; } #content img.noborder { border: none; } .css3button { color: #fff; padding: 8px 14px 10px; background-color: #22C3EB; border: none; margin-bottom: 20px; display: block; text-transform: uppercase; text-align: center; font-family: Arial; position: relative; z-index: 1; -webkit-user-select: none; -webkit-box-shadow: inset 0px 0px 16px rgba(255, 255, 255, 0.2), inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0px 0px 16px rgba(255, 255, 255, 0.2), inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0px 0px 16px rgba(255, 255, 255, 0.2), inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); } .css3button:after { content: ""; width: 20px; height: 20px; border-bottom: 10px solid red; position: relative; z-index: 10; } .css3button:hover { color: #fff; } .css3button:active { position: relative; top: 3px; background-color: #22C3EB; border: none; -webkit-box-shadow: inset 0px 0px 16px rgba(255, 255, 255, 0.2), inset 0px -3px 0px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); -moz-box-shadow: inset 0px 0px 16px rgba(255, 255, 255, 0.2), inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); box-shadow: inset 0px 0px 16px rgba(255, 255, 255, 0.2), inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); } /* Page Navi style -------------------------------------------------------------------------------------------- */ #content .wp-pagenavi span.current { font-weight: normal; border: none; } #content .wp-pagenavi a, .wp-pagenavi span, #content .wp-pagenavi span { border: none; } #content img.left, #content .left { float: left; margin: 0 15px 15px 0; border: none; }