/* CSS-Tricks Redesign by Chris Coyier http://css-tricks.com modded by Jay Lashlee 12-25-2008 COLOR KEY: Red: #b30000 Hover background DarkRed: #64291a Search Hover BLUE: #0C4075 ButtonBackground, Selection was Orange: #fe4902 DarkGray: #2e2e2e Hover HoverBackground, Visited LightGray: #5e5d5d Font Blue: #3680a1 Hover, Visited LightBlue: #beebff Hover SkyBlue: #C5D7FF Font DarkBlue: #1f2c4b Background Turquoise: #39b9f2 Twitter Hover Creme: #fffaed Background Peach: #f1d798 Border */ /* RESET AND BASICS */ * { margin: 0; padding: 0; } body { font-family: Georgia, serif; background: white url(/images/body-background.jpg) 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: #0C4075; color: white; /* Safari */ } ::-moz-selection { background: #0C4075; color: white; /* Firefox */ } .button { background: #0C4075 url(/images/button-bg.png) top left repeat-x; color: white !important; font-weight: bold; font-size: 18px; -moz-border-radius: 10px; border: none; letter-spacing: -1px; padding: 8px 15px 6px 15px; -webkit-border-radius: 10px; } .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; } /* MAIN STRUCTURE */ #page-wrap { width: 984px; min-height: 1019px; position: relative; padding-bottom: 176px; background: white url(/images/page-background.jpg) top left no-repeat; overflow: hidden; } #Logo-wrap { width: 100%; min-height: 111px; position: relative; padding-bottom: 11px; background: white url(/lib/bgDiamond.jpg) repeat; overflow: hidden; } body#video-screencasts #page-wrap { background: white url(/images/page-videos-background.jpg) top left no-repeat; } body#contact #page-wrap { background: white url(/images/page-contact-background.jpg) top left no-repeat; } body#downloads #page-wrap { background: white url(/images/page-examples-background.jpg) top left no-repeat; } body#search-results #page-wrap { background: white url(/images/page-search-background.jpg) top left no-repeat; } body#bookshelf #page-wrap { background: white url(/images/page-bookshelf-background.jpg) top left no-repeat; } #home-link { text-indent: -9999px; position: absolute; top: 0px; left: 0px; width: 470px; height: 136px; } /* MAIN NAVIGATION */ #mainNavWrap { position: absolute; top: 0px; right: 20px; width: 450px; height: 100px; } #mainNav { position: absolute; top: 8px; right: 0px; width: 450px; list-style: none; } #mainNav li { float: right; margin-left: 10px; } #mainNav li a { display: block; padding: 5px 10px; color: white; background: #2e2e2e; text-decoration: none; font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif; font-size: 12px; background: #2d0404; } #mainNav li.iphone a, #mainNav li.iphone a:hover { background: none; } #banner-ad { width: 515px; height: 88px; position: absolute; right: -6px; top: 44px; background: url(/images/ad.jpg) bottom left no-repeat; } #banner-ad:hover { background-position: top left; } #banner-ad img { position: absolute; top: 12px; left: 22px; } body#home #mainNav li.articles a, body#downloads #mainNav li.downloads a, body#video-screencasts #mainNav li.videos a, body#contact #mainNav li.contact a, body#links #mainNav li.links a, body#forums #mainNav li.forums a { background: #fe4902; } /* 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-family: "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; font-size: 13px; line-height: 18px; } p strong, li strong { color: #2e2e2e; } blockquote { border-left: 1px solid #2e2e2e; padding: 0 0 0 25px; } code { font-size: 12px; overflow: auto; display: block; padding: 10px 10px 30px 10px; background: url(images/code-sample.png) no-repeat bottom left #F0F0F0; margin-bottom: 15px; margin-top: 5px; width: 540px; } pre code[class]:after { content: 'highlight: ' attr(class); display: block; text-align: right; font-size: smaller; padding-top: 0.5em; color: #666; } pre code, .ruby .subst { color: black; } .string, .function .title, .class .title, .tag .attribute .value, .css .rules .value, .preprocessor, .ruby .symbol, .built_in, .sql .aggregate, .django .template_tag, .django .variable, .smalltalk .class { color: #800; } .comment, .java .annotation, .template_comment { color: #888; } .number, .regexp, .javascript .literal, .smalltalk .symbol, .smalltalk .char { color: #080; } .javadoc, .ruby .string, .python .decorator, .django .filter .argument, .smalltalk .localvars, .smalltalk .array, .css .attr_selector, .xml .pi { color: #88F; } .keyword, .css .id, .phpdoc, .function .title, .class .title, .vbscript .built_in, .sql .aggregate, .rsl .built_in, .smalltalk .class, .xml .tag .title { font-weight: bold; } /* ARTICLE AREA */ #content-area { width: 570px; position: relative; top: 158px; left: 25px; float: left; } #content-area h2 { text-align: center; } #content-area a:hover { border-bottom: 1px dotted #2e2e2e; } p.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; } p.date span { padding: 3px 8px; background: white; position: relative; top: -4px; } p.date span a { color: #666; } p.date span a span { position: static; padding: 0; color: #fe4902; } #content-area p.date span a:hover { border: none; } p.date span a:hover span { color: #666; } p.date span strong { font-size: 36px; font-family: Courier, Sans-Serif; position: relative; top: 10px; color: #fe4902; } p.author em { text-transform: none; font-style: italic; color: #2e2e2e; letter-spacing: 0; } p.author { font-size: 13px; color: #2e2e2e; letter-spacing: 2px; text-align: center; font-family: Georgia, serif; text-transform: uppercase; } p.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; } #post-footer { overflow: hidden; } #post-footer a { display: block; float: left; width: 48px; height: 48px; opacity: 0.6; text-indent: -9999px; margin: 0 10px 0 0; } #post-footer a:hover { opacity: 1.0; border: none; } #post-footer a.delicious { background: url(/images/delicious_48.png) top left no-repeat; } #post-footer a.stumbleupon { background: url(/images/stumbleupon_48.png) top left no-repeat; } #post-footer a.designfloat { background: url(/images/designfloat_48.png) top left no-repeat; } #post-footer a.digg { background: url(/images/digg_48.png) top left no-repeat; } #post-footer a.dzone { background: url(/images/dzone_48.png) top left no-repeat; } /* 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 */ .commentInputs { width: 30%; float: left; margin: 0 19px 19px 0; } #commentform textarea { padding: 5px; height: 160px; width: 560px; border: 1px solid #ccc; margin: 0 0 10px 0; font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif; } input.comment-field { width: 100%; padding: 3px; border: 1px solid #ccc; font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif; } .comment-text { padding-left: 60px; } h4#comments, h4#respond { font-size: 24px; } #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; } ol.commentlist li.alt { } #content-area ol.commentlist li.bypostauthor { background: #fff0da; } #content-area ol.commentlist ul ul { margin: 15px 0 0 0; } ol.commentlist li.byuser { } ol.commentlist li.comment-author-admin { } ol.commentlist li.comment { } ol.commentlist li div.comment-author { padding: 0 170px 0 0; } ol.commentlist li div.vcard { } 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.vcard img.avatar-32 { } ol.commentlist li div.vcard img.photo { } ol.commentlist li div.vcard span.says { } ol.commentlist li div.commentmetadata { } ol.commentlist li div.comment-meta { font: bold 10px helvetica,arial; position: absolute; right: 10px; text-align: right; top: 5px; } ol.commentlist li div.comment-meta a { color: #333; text-decoration:n one; } 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 { background: #999; border:1px solid #666; -moz-border-radius: 2px; font-size: 10px; -webkit-border-radius: 2px; color:#fff; padding: 1px 3px; margin: 0 0 10px 0; width: 40px; text-align: center; } ol.commentlist li div.reply: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 { } ol.commentlist li ul.children li.alt { } ol.commentlist li ul.children li.bypostauthor { } ol.commentlist li ul.children li.byuser { } ol.commentlist li ul.children li.comment { } 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 ul.children li.depth-5 { } ol.commentlist li ul.children li.odd { } ol.commentlist li.even { background:#fff; } ol.commentlist li.odd { background:#f6f6f6; } ol.commentlist li.parent { } ol.commentlist li.pingback { } ol.commentlist li.pingback.parent { } ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; } ol.commentlist li.thread-alt { } ol.commentlist li.thread-even { } ol.commentlist li.thread-odd { } /* SIDEBAR */ #sidebar { float: right; width: 300px; position: relative; top: 180px; right: 38px; padding: 0 0 50px 0; } #subscribe-area { overflow: hidden; } .subscribe-link { width: 49%; float: left; margin: 0 0 5px 0; font-size: 15px; } .subscribe-link a { position: relative; top: 2px; } .subscribe-link a:hover { border-bottom: 1px dotted black; } .subscribe-link span { font-size: 10px; } .subscribe-link div { width: 30px; float: left; } #subscribe-area p { clear: both; font-size: 10px; text-align: center; } #cse-search-box #submit-button { background: #2e2e2e; color: white; border: none; padding: 5px; width: 67px; } #cse-search-box #submit-button:hover { background: #fe4902; } #cse-search-box #s { width: 200px; padding: 3px; } #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; } .slider-wrap { background: url(/images/tabs-bg.jpg) top left no-repeat; position: relative; } .slider-wrap .sidebar-inside { padding: 68px 72px 0 31px } .stripViewer { overflow: hidden; width: 300px; clear: both; } .stripViewer .panelContainer { position: relative; left: 0px; top: 0px; width: 100%; list-style: none; } .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 352px; } .stripViewer .panelContainer .panel .wrapper { padding: 0px; } .stripNav { margin-left: 0px; } .stripNav ul { list-style: none; } .stripNav ul li { float: left; } #sidebar .stripNav li a { display: block; height: 28px; text-indent: -9999px; padding: 0; border: none; z-index: 100; } .stripNav li.tab2 a { background: url(/images/tabs-featuredposts.jpg) top center no-repeat; width: 64px; position: absolute; left: 116px; top: 18px; } .stripNav li.tab1 a { background: url(/images/tabs-scriptstyle.jpg) top center no-repeat; width: 67px; position: absolute; left: 20px; top: 18px; } .stripNav li.tab3 a { background: url(/images/tabs-popularposts.jpg) top center no-repeat; width: 68px; position: absolute; left: 209px; top: 18px; } #sidebar .stripNav li a:hover { background-position: bottom center; background-color: white; } .stripNav li.tab2 a.current { background: url(/images/tabs-featuredposts.jpg) bottom center no-repeat; } .stripNav li.tab1 a.current { background: url(/images/tabs-scriptstyle.jpg) bottom center no-repeat; } .stripNav li.tab3 a.current { background: url(/images/tabs-popularposts.jpg) bottom center no-repeat; } .stripNavL, .stripNavR { display: none; } #sidebar .stripViewer .panel ul { margin: 0; list-style: none; } #sidebar p#ss-about { background: #fffaed; border: 1px solid #f1d798; padding: 4px; width: 232px; font-size: 10px; margin: 0 0 5px 0; text-align: center; } #sidebar .stripViewer ul { list-style: none; } #sidebar .stripViewer ul li a { display: block; width: 215px; color: #303030; padding: 4px; border-bottom: solid 1px #c1b599; text-decoration: none; font-size: 12px; } #sidebar .stripViewer ul li a:hover { background-color: #b30000; color: white; } #sidebar ul#ss-list li a.direct-link { position: absolute; top: 0px; right: 0px; height: 13px; width: 16px; padding: 0; background: none; border: none; } #sidebar ul#ss-list li { position: relative; width: 227px; padding-right: 16px; } #sidebar ul li { margin: 0; font-family: Georgia, serif; font-size: 12px; } #poll-area { background: url(/images/poll-background.jpg) top left no-repeat; padding: 42px 20px 0 22px; position: relative; margin: 20px 0 20px 0; } #poll-archive-link { position: absolute; top: 10px; right: 30px; font-size: 12px; } /* PAGE SPECIFIC CODE */ .post-meta { display: none; } body#video-screencasts dl, body#downloads dl { padding-bottom: 10px; overflow: hidden; border-bottom: 10px solid #ffefe4; margin-bottom: 10px; } body#video-screencasts dl dt, body#downloads dl dt { font-size: 20px; margin-bottom: 10px; } body#downloads dl dd.thumbnail { float: left; width: 230px; } body#video-screencasts dl dd, body#downloads dl dd { width: 338px; float: right; } body#video-screencasts dl dd.thumbnail { float: left; width: 245px; } body#video-screencasts dl dd { width: 325px; 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; } /* FOOTER */ #footer { background: black url(/images/footer-background.jpg) top left no-repeat; height: 777px; position: relative; min-width: 984px; } @font-face { font-family: 'Fontin-Italic'; src: url('/fonts/Fontin-Italic.otf') format('opentype'); } #footer h4 { font-family: 'Fontin-Italic', Georgia, Serif; color: #C5D7FF; font-size: 25px; margin: 0 0 10px 0; } #twitter-area { position: absolute; left: 295px; top: 38px; height: 168px; width: 235px; } #twitter-area ul { list-style: none; } #twitter-area ul li { font-size: 18px; color: white; font-family: Georgia, serif; line-height: 25px; } #twitter-area p { position: absolute; bottom: 0px; text-align: right; color: #c5d7ff; font-family: Georgia, serif; font-style: italic; width: 100%; } #twitter-area p a { font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif; text-transform: uppercase; letter-spacing: 3px; font-style: normal; font-size: 10px; color: white; border-bottom: 1px dotted white; padding: 0 3px; } #twitter-area p a:hover { border-bottom: 1px solid white; background: #1f2c4b; } #twitter-area #tweet a { color: #39b9f2; } #twitter-area #tweet a:hover { border-bottom: 1px dotted #39b9f2; } #footer-friends { position: absolute; width: 150px; left: 612px; top: 17px; } #footer-friends ul, #footer-meta ul { list-style: none; } #footer-meta { position: absolute; width: 150px; left: 800px; top: 17px; } #footer-friends ul li, #footer-meta ul li { margin: 0; font-size: 11px; } #footer-friends ul li a, #footer-meta ul li a { color: white; display: block; padding: 1px; } #footer-friends ul li a:hover, #footer-meta ul li a:hover { color: #beebff; } #author-area { position: absolute; top: 315px; width: 400px; left: 40px; } #author-area h4 { color: white; font-size: 25px; } #author-area h4 span { font-family: "Lucida Grande", Arial, Helvetica; text-transform: uppercase; font-size: 14px; } #author-area p { font-size: 18px; font-family: Georgia, serif; color: #999; line-height: 24px; } #author-area a:hover { color: #3680a1; border-bottom: 1px dotted #3680a1; } #hosting { display: block; width: 45px; height: 40px; text-indent: -9999px; position: absolute; top: 46px; left: 126px; } .forum-image { display: none; }