/* by Chris Coyier http://css-tricks.com */ /* RESET AND BASICS */ * { margin: 0; padding: 0; } html { overflow: scroll; } body { font-family: Georgia, serif; background: white url(/images/bg-top-repeat.png) top left repeat-x; } a, a:visited { text-decoration: none; outline: none; color: #3680a1; } a:hover { color: #2e2e2e; } a img { border: none; } img { vertical-align: middle; } .clear { clear: both; } fieldset { border: none; } ::selection { background: #fe4902; color: white; /* Safari */ } ::-moz-selection { background: #fe4902; color: white; /* Firefox */ } .button { background: #fe4902 url(/images/button-bg.png) top left repeat-x; color: white !important; font-weight: bold; font-size: 15px; -moz-border-radius: 16px; -webkit-border-radius: 12px; border: none; letter-spacing: -1px; padding: 5px 12px 3px 12px; } .button:hover { background: #2e2e2e; cursor: pointer; } .alignCenter { text-align: center; } .floatLeft { float: left; } .floatRight { float: right; } #sitemap td.archive-date { font-family: Courier, Sans-Serif; font-size: 10px; white-space: nowrap; } #banner-clickable-area { position: absolute; width: 473px; height: 67px; left: 489px; top: 57px; text-indent: -9999px; } #foxy-area-1 { position: absolute; width: 171px; height: 25px; left: 660px; top: 123px; text-indent: -9999px; } #foxy-area-2 { position: absolute; width: 129px; height: 25px; left: 833px; top: 123px; text-indent: -9999px; } /* MAIN STRUCTURE */ #page-wrap { width: 990px; position: relative; margin: 0 auto; overflow: hidden; background: white url(/images/bg-middle.png) repeat-y; } body#forums #page-wrap, body.page-template-page-nosidebar-php #page-wrap { background: white; } #header { background: white url(/images/bg-top-middle.png) no-repeat; height: 133px; position: relative; } body#forums #header, body.page-template-page-nosidebar-php #header { background: white url(/images/bg-header-middle-forums.png) no-repeat; height: 133px; position: relative; } #intro { position: absolute; right: 24px; top: 11px; color: white; font: italic 12px Georgia, Serif;} #intro span { text-transform: uppercase; letter-spacing: 2px; font-style: normal; } #intro a { color: #fe4902; border-bottom: 1px dotted #fe4902; } #intro a:hover { border-bottom-style: solid; } #home-link { text-indent: -9999px; position: absolute; top: 0px; left: 0px; width: 470px; height: 36px; } /* MAIN NAVIGATION */ #mainNavWrap { position: absolute; top: 47px; left: 210px; width: 450px; height: 58px; } #mainNav { position: absolute; bottom: 0; left: 0; width: 450px; list-style: none; } #mainNav li { display: inline; margin: 0 3px 0 0; } #mainNav li a { padding: 8px 16px; color: #2f2626; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; background: #eadbb6 url(/images/tab-off-bg.png) bottom left repeat-x; text-decoration: none; font: bold 13px "Lucida Grande", Arial, Helvetica, Sans-Serif; } #mainNav li a:hover { background: #2f2626; color: white; } #mainNav li.rss a { background: url(/images/rsstab.png) no-repeat; display: block; position: absolute; width: 40px; height: 34px; text-indent: -9999px; left: -48px; bottom: -7px; padding: 0; } body#home #mainNav li.articles a, body#downloads #mainNav li.downloads a, body#video-screencasts #mainNav li.videos a, body#video-screencasts-2 #mainNav li.videos a, body#contact #mainNav li.contact a, body#forums #mainNav li.forums a { background: white; color: #2f2626; } #talking { color: white; position: absolute; top: 52px; left: 211px; font-size: 11px; } #search-form-only { position: absolute; left: 656px; top: 67px; width: 300px; } /* GENERAL TYPOGRAPHY */ h1, h2, h3, h4, h5 { font-weight: normal; margin: 0 0 5px 0; } h2 { font-size: 32px; } h2 a, h2 a:visited { color: #2e2e2e; } h2 a:hover { color: #fe4902; border-bottom: 1px dotted #2e2e2e; } p, li, dd { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; } td, th { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; } p strong, li strong { color: #2e2e2e; } blockquote { border-left: 10px solid #ccc; padding: 0 0 0 10px; } blockquote, blockquote p { font: italic 13px/18px "Lucida Sans", "Lucida Grande", Arial, Helvetica, Sans-Serif; } code { font-size: 12px; overflow: auto; display: block; padding: 10px; background: #F0F0F0; margin-bottom: 15px; margin-top: 5px; width: 540px; } pre code[class]:after { content: attr(class); display: block; text-align: right; font-size: smaller; padding-top: 0.5em; color: #fe4902; } /* ARTICLE AREA */ #content-area { width: 570px; float: left; padding: 0 0 50px 20px; } #content-area h2 { text-align: center; } #content-area a:hover { border-bottom: 1px dotted #2e2e2e; } .date { background: url(/images/graydot.png) center center repeat-x; font-family: Georgia, serif; text-align: center; font-size: 12px; color: #fe4902; margin: 8px 0 1px 0; } .date span { padding: 3px 8px; background: white; position: relative; top: -4px; } .date span a { color: #666; } .date span a span { position: static; padding: 0; color: #fe4902; } #content-area .date span a:hover { border: none; } .date span a:hover span { color: #666; } .date span strong { font-size: 36px; font-family: Courier, Sans-Serif; position: relative; top: 10px; color: #fe4902; } .author em { text-transform: none; font-style: italic; color: #2e2e2e; letter-spacing: 0; } .author { font-size: 13px; color: #2e2e2e; letter-spacing: 2px; text-align: center; font-family: Georgia, serif; text-transform: uppercase; } .date a { color: #fe4902; } body#forums p.author { letter-spacing: 0px; } #content-area h3 { color: #fe4902; font-size: 20px; font-style: italic; } #content-area ul { margin: 0 0 0 5px; list-style: none; } #content-area ol { margin: 15px 0 0 25px; list-style: decimal; } #content-area ol ol { list-style: lower-alpha; } #content-area ul li { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; } #content-area ul ul { margin: 15px 0 0 25px; list-style: disc; } #content-area ul ul li { background: none; padding: 0; } .post { padding: 0 0 65px 0; background: url(/images/post-sep.png) bottom center no-repeat; margin: 0 0 25px 0; } /* ARCHIVES / SEARCH RESULTS */ #content-area h2.archiveTitle { display: inline; background: #fe4902; padding: 8px 18px; color: white; text-transform: uppercase; letter-spacing: 3px; font-size: 13px; } #content-area ul#archiveList li { margin: 0 0 25px 0; font-size: 12px; } #content-area ul#archiveList li h5 { font-size: 20px; font-family: Georgia, Serif; } /* COMMENTS */ #leave-comment-title { width: 220px; height: 19px; background: url(images/leave-comment-title-bg.png) no-repeat; text-indent: -9999px; margin: 25px 0 10px 0; } #comment-writer-info { overflow: hidden; margin: 0 0 8px 0; } #comment-writer-info div { width: 188px; float: left; position: relative; z-index: 100; } #comment-writer-info div img { position: absolute; top: 4px; left: 4px; width: 23px; } #comment-writer-info label { position: absolute; top: 7px; left: 45px; z-index: 50; color: #333; font-size: 13px; } #comment-writer-comment label { position: absolute; top: -9999px; left: -9999px; } #comment-writer-info div input { border: 1px solid #f69c3a; padding: 9px 5px 5px 42px; width: 128px; height: 15px; outline: none; background-color: white; } #author { background: url(images/commentform-name-bg.png) top left no-repeat; } #email { background: url(images/commentform-email-bg.png) top left no-repeat; } #url { background: url(images/commentform-url-bg.png) top left no-repeat; } #comment-writer-comment { overflow: hidden; } #comment-writer-comment textarea { width: 343px; padding: 10px; border: 1px solid #f69c3a; font: 13px "Lucida Grande", Arial, Sans-Serif; float: left; outline: none; } #remember-area { width: 177px; float: right; padding: 17px 17px 0 0; } #remember-area h5 { font: bold 14px "Lucida Grande", Sans-Serif; margin: 0 0 10px 0; color: black; } #remember-area ul { margin-left: 15px; list-style: outside disc; } #remember-area ul li { background: none !important; padding: 0; margin: 0 0 8px 0; font: 11px/1.2 "Lucida Grande", Sans-Serif; color: black; } #content-area .cancel-comment-reply { margin: 0 0 8px; } #content-area #cancel-comment-reply-link { padding: 1px 4px; background: #620303; color: white; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #content-area #cancel-comment-reply-link:hover { background: red; border: none; } #comment-writer-submit { text-align: right; padding: 5px 20px 0 0; background: url(images/submit-area-line-bg.png) top right no-repeat; margin: 0 0 20px 0; } /* REPLIES */ ol.commentlist #respond #leave-comment-title { display: none; } ol.commentlist #comment-writer-info { width: 250px; } ol.commentlist #comment-writer-info div { width: 220px; float: none; margin: 0 0 8px 0; } ol.commentlist #comment-writer-comment textarea { width: 257px; } ol.commentlist #remember-area { width: 132px; float: left; padding: 17px 0 0 15px; } #content-area ol.commentlist #remember-area ul { list-style: outside disc; margin: 0 0 0 15px; } #content-area ol.commentlist #remember-area ul li { padding: 0; border: 0; list-style: outside disc !important; } .comment-text { padding-left: 60px; } #content-area ol#commentList { list-style: none; margin: 0; } .commentArrow { position: absolute; left: -14px; top: 7px; } .commentPreview .authorInfo { width: 115px; float: left; } .commentPreview code { width: 375px; background: none; margin: 0; padding: 0; } #commentList li.item { margin: 0 0 35px 0; } #commentList .commentText, .commentPreview .commentText { width: 380px; float: right; border: 1px solid #999; background: #eee; padding: 15px; position: relative; min-height: 50px; margin: 0 0 10px 0; } #commentList li.author .commentText p { color: black; } #content-area ol.commentlist { list-style: none; margin: 0; padding: 0; text-indent: 0; } #content-area ol.commentlist li { border: 1px solid #d5d5d5; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 0 0 10px; padding: 5px 7px 5px 57px; position:relative; background: white; list-style: none !important; } #content-area ol.commentlist code { width: 370px; } #content-area ol.commentlist li.bypostauthor { background: #fff0da; } #content-area ol.commentlist ul ul { margin: 15px 0 0 0; } ol.commentlist li div.comment-author { padding: 0 170px 0 0; } ol.commentlist li div.vcard cite.fn { font-style: normal; font-weight: bold; font-size: 14px; } ol.commentlist li div.vcard cite.fn a.url { color: #fe4902; text-decoration: none; } ol.commentlist li div.vcard cite.fn a.url:hover { color: #000; } ol.commentlist li div.vcard img.avatar { border: 5px solid #d5d5d5; left: 7px; position:absolute; top: 7px; } ol.commentlist li div.comment-meta { font: bold 10px helvetica,arial,sans-serif; position: absolute; right: 10px; text-align: right; top: 5px; } ol.commentlist li div.comment-meta a { color: #333; text-decoration: none; } ol.commentlist li div.comment-meta a:hover { color: #000; } ol.commentlist li p { margin: 0 0 1em; } ol.commentlist li ul { list-style: square; margin: 0 0 1em; padding: 0; text-indent: 0; } ol.commentlist li div.reply { margin: 0 0 10px 0; } ol.commentlist .comment-reply-link { background: #999; border:1px solid #666; -moz-border-radius: 3px; font-size: 10px; padding: 4px 8px; margin: 0 0 10px 0; -webkit-border-radius: 3px; color:#fff; } #content-area ol.commentlist .comment-reply-link:hover { background: #fe4902; border: 1px solid #c00; } ol.commentlist li div.reply a { color:#fff; text-decoration: none; text-transform: uppercase; } ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; } ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; } ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; } ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; } ol.commentlist li.even { background:#fff; } ol.commentlist li.odd { background:#f6f6f6; } ol.commentlist li.pingback div.vcard { padding: 0 170px 0 0; } /* SIDEBAR */ #sidebar { float: right; width: 312px; padding: 0 0 50px 0; position: relative; right: 21px; top: -66px; } #sidebar h3 { height: 71px; background: url(/images/bg-sidebar-title.png) no-repeat; margin: 0 0 0 -23px; padding: 12px 20px 5px 25px; width: 326px; position: relative; } p#search-by { margin: 3px 0 10px 0; text-align: right; font-size: 11px; padding: 0 20px 0 0; position: relative; width: 296px; } #archive-link { position: absolute; left: 0; top: 0; } #search-button, #search-button-f, #search-button-a { color: white; border: none; vertical-align: middle; } #cse-search-box #s, #s-blog, #s-forums { width: 216px; padding: 3px; border: none !important; margin: 0 0 0 15px; vertical-align: middle; outline: none; background: none; color: white; font: italic 18px Georgia, serif; } #cse-search-box #s, #cse-search-box #s[style], #s-forums { background: none !important; border: none !important; } #cse-search-box p, #cse-search-box a { color: #64291a; font-size: 11px; } #cse-search-box a { border-bottom: 1px dotted #64291a; } #cse-search-box a:hover { border-bottom: 1px solid #64291a; } #blog-searchform, #cse-search-box-forums { display: none; } .cur-search, .cur-search:visited { font-weight: bold; text-decoration: underline; } .ad-bridge { position: relative; left: -23px; width: 346px; height: 123px; background: url(/images/ad-bridge.png) no-repeat; } .ad-bridge img { position: absolute; top: 8px; left: 20px; } .ad-bridge p { position: absolute; bottom: 10px; left: 0; text-align: center; font-size: 11px; width: 100%; line-height: 1.4; } #sidebar #explore-nav { position: relative; overflow: hidden; top: -41px; margin: 0; } #sidebar #explore-nav li { width: 88px; float: left; margin: 0 7px 0 0; } #sidebar #explore-nav li a { display: block; padding: 3px 5px; background: #959290 url(images/minitabshadow2.png) repeat-x; color: white; font-size: 9px; text-align: center; } #sidebar #explore-nav li a:hover, #sidebar #explore-nav li.current a { background-color: #FE4902; } #sidebar ul li#submit-sns { border: 1px solid #f2deb0; background: #fefcd1; padding: 5px; text-align: center; } #sidebar ul li#submit-sns a { display: inline; } #sidebar ul li#submit-sns a:hover { background: none; text-decoration: underline; color: black; } #sidebar ul { list-style: none; width: 285px; margin: 0 0 25px; position: relative; z-index: 1000; } #sidebar ul li { margin: 0; font-family: Georgia, serif; font-size: 12px; } #sidebar ul li a { display: block; border-bottom: 1px solid #ccc; padding: 3px; } #sidebar ul li a:hover { background: #fe4902; color: white; } #sidebar ul li:last-child a { border: none; } #featured, #core { display: none; } #all-list-wrap { margin: -25px 0 25px 0; } input[type=radio] { vertical-align: middle; } #sidebar .wp-polls h4 { margin: -18px 0 10px 0; width: 290px; } /* PAGE SPECIFIC CODE */ .post-meta { display: none; } body#downloads dl { padding-bottom: 10px; overflow: hidden; border-bottom: 10px solid #ffefe4; margin-bottom: 10px; } body#downloads dl dt { font-size: 20px; margin-bottom: 10px; } body#downloads dl dd.thumbnail { float: left; width: 230px; } body#downloads dl dd { width: 338px; float: right; } .shelf { padding: 0 0 71px 218px; background: url(/images/shelf.jpg) no-repeat bottom center; overflow: hidden; position: relative; } .shelf p { font-size: 11px; } .shelf p.book-author { font-weight: bold; } .shelf p.book-author span { font: italic 11px Georgia, Serif; } .book { position: absolute; bottom: 51px; left: 36px; } dl dd h4 { font-weight: bold; margin: 0 0 10px 0; } /* FOOTER */ #footer { height: 454px; background: black url(/images/bg-footer-repeat.png) repeat-x; } #footer-inside { background: black url(/images/bg-footer-middle.jpg) no-repeat; height: 454px; width: 990px; margin: 0 auto; position: relative; } #footer h4 { font: italic 18px Georgia, Serif; color: #f8a64e; font-size: 22px; margin: 0 0 10px 0; } #footer h4 span { font-family: "Lucida Grande", Sans-Serif; text-transform: uppercase; font-size: 16px; font-style: normal; } #footer p { color: #feffed; font-size: 11px; } #footer ul { margin: 0 0 0 15px; } #footer li { color: #feffed; font-size: 12px; margin: 0 0 3px 0; } #footer a { color: #feffed; border-bottom: 1px dotted #666; } #footer a:hover { color: white; border-bottom: 1px solid white; } #footer #author-footer { position: absolute; top: 100px; left: 10px; width: 215px; } #projects { position: absolute; top: 280px; left: 10px; width: 215px; } #nav { position: absolute; top: 100px; left: 410px; } #sub { position: absolute; top: 280px; left: 250px; } #faq { position: absolute; top: 280px; left: 410px; } #footer .hid-link { width: 8px; height: 8px; display: block; position: absolute; text-indent: -9999px; border: none; } #footer .hid-link:hover { background: #fe4902; border: none; } #footer .footer-richard { top: 359px; left: 803px; } #footer .footer-spooner { top: 359px; left: 811px; } #footer .footer-jeff { top: 359px; left: 819px; } #footer .footer-starr { top: 359px; left: 827px; } #footer .footer-david { top: 367px; left: 811px; } #footer .footer-noura { top: 367px; left: 819px; } #footer .footer-benjamin { top: 367px; left: 827px; } #footer .footer-eric { top: 375px; left: 811px; } #footer .footer-steven { top: 375px; left: 819px; } #footer .footer-leah { top: 375px; left: 827px; } #footer .tweet { position: absolute; top: 15px; left: 100px; width: 285px; height: 55px; overflow: hidden; display: table; } #footer .tweet ul { display: table-row; } #footer .tweet li { display: table-cell; vertical-align: middle; font-size: 11px; list-style: none; color: #0074ae; line-height: 15px; } #footer .tweet li a { color: #0074ae; border: none; } #footer .tweet li a:hover { color: #02a4f5; } #footer #mt { width: 120px; height: 28px; display: block; position: absolute; text-indent: -9999px; border: none; top: 392px; left: 412px; } #footer #mob { width: 120px; height: 28px; display: block; position: absolute; text-indent: -9999px; border: none; top: 392px; left: 532px; } .forum-image { display: none; } /* __ __ __ ___ __ __ __ / ` /__` /__` __ | |__) | / ` |__/ /__` \__, .__/ .__/ | | \ | \__, | \ .__/ by: Chris Coyier */