/* RESET AND BASICS */ * { margin: 0; padding: 0; } body { font-family: Georgia, serif; background: #b4cfe4 url(../images/bg-top-repeat.png) top left repeat-x; } a, a:visited { text-decoration: none; outline: none; color: #1f6d8c; } a:hover { color: #2e2e2e; } a img { border: none; } img { vertical-align: middle; } .clear { clear: both; } fieldset { border: none; } ::selection { background: #015168; color: white; /* Safari */ } ::-moz-selection { background: #015168; color: white; /* Firefox */ } .button { background: #b4cfe4 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#dgg #page-wrap, #header { background: white url(../images/bg-top-middle.png) no-repeat; height: 224px; position: relative; } #intro { position: absolute; right: 24px; top: 3px; color: white; font: italic 12px Georgia, Serif;} #intro span { text-transform: uppercase; letter-spacing: 2px; font-style: normal; } #intro a { color: #b4cfe4; border-bottom: 1px dotted #b4cfe4; } #intro a:hover { border-bottom-style: solid; } #home-link { text-indent: -9999px; position: absolute; top: 100px; left: 70px; width: 470px; height: 70px; } #welcome {position:absolute; top:30px; right:10px; color:white; font: italic 16px Georgia, "Times New Roman", Times, serif;} /* MAIN NAVIGATION */ #mainNavWrap { position: absolute; top: 159px; left: 100px; width: 880px; height: 58px; } #mainNav { position: absolute; bottom: 0; left: 0; width: 880px; list-style: none; } #mainNav li { display: inline; margin: 0 3px 0 0; } #mainNav li a { padding: 8px 16px; color: #fff; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; background: #CF5839 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; } 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#dgg #mainNav li.dgg 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; color:#3a1936; } h2 { font-size: 32px; padding-top:20px; } h2 a, h2 a:visited { color: #2e2e2e; } h2 a:hover { color: #b4cfe4; border-bottom: 1px dotted #2e2e2e; } h3 { color:#fff;} 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: #b4cfe4; } /* 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; } p.title { background: url(../images/graydot.png) center center repeat-x; font-family: Georgia, serif; text-align: center; font-size: 22px; color: #626c1e; margin: 8px 0 1px 0; } p.title span { padding: 3px 8px; background: white; position: relative; top: -4px; } p.title span a { color: #666; } p.title span a span { position: static; padding: 0; color: #b4cfe4; } #content-area p.title span a:hover { border: none; } p.title span a:hover span { color: #666; } p.title span strong { font-size: 36px; font-family: Courier, Sans-Serif; position: relative; top: 10px; color: #b4cfe4; } p.date em { text-transform: none; font-style: italic; color: #1f6d8c; letter-spacing: 0; } p.date { font-size: 23px; color: #1f6d8c; letter-spacing: 2px; text-align: center; font-weight:bold; font-family: Georgia, serif; text-transform: uppercase; margin-top:30px; } body#dgg p.date { letter-spacing: 0px; } 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; } body#dgg p.author { letter-spacing: 0px; } #content-area h3 { color: #3a1936; font-size: 16px; font-style: italic; font-weight:bold; } #content-area h4 { color: #1f6d8c; font-size: 14px; font-style: normal; font-weight:bold; } #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; text-align: center; margin: 10px 0; } #post-footer a { display: block; float: left; width: 48px; height: 48px; opacity: 0.6; text-indent: -9999px; margin: 0 9px 0 0; } #post-footer a:hover { opacity: 1.0; border: none; } .readmore a {color:#00526F; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; text-align:right; float:right;} .oldposts a {color:#372C25; font-family:Georgia, "Times New Roman", Times, serif; font-size:18px; text-align:left; font-weight:bold; } .newposts a {color:#372C25; font-family:Georgia, "Times New Roman", Times, serif; font-size:18px; text-align:right; float:right; font-weight:bold; } /* SOCIAL NETWORKING */ a.twitter { position:absolute; top:100px; right:350px; } a.facebook { position:absolute; top:100px; right:300px; } a.myspace { position:absolute; top:100px; right:250px; } a.delicious { position:absolute; top:100px; right:200px; } a.stumbleupon { position:absolute; top:100px; right:150px; } a.digg { position:absolute; top:100px; right:100px; } a.reddit { position:absolute; top:100px; right:50px; } a.email { position:absolute; top:100px; right:0px; } .socialfooter { position:relative; right:580px; top:-35px;} /* ARCHIVES / SEARCH RESULTS */ #content-area h2.archiveTitle { display: inline; background: #b4cfe4; 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; } #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: #b4cfe4; 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 { 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: #b4cfe4; 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 20px 0; position: relative; right: 21px; top: -66px; } #sidebar h3 { height: 71px; background: url(../images/bg-sidebar-title.png) no-repeat; margin: 0 0 0 -39px; padding: 12px 20px 5px 25px; width: 306px; position: relative; } p#search-by { margin: 3px 0 10px 0; text-align: right; font-size: 11px; padding: 0 20px 0 0; position: relative; } #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-dgg { 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-dgg { 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-dgg { 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; margin-top:6px; } .ad-bridge img { position: absolute; top: 2px; left: 13px; } .ad-bridge p { position: absolute; bottom: 10px; left: 0; text-align: center; font-size: 11px; width: 100%; line-height: 1.4; } .ad-bridge2 { position: relative; left: -23px; width: 346px; height: 380px; background: url(../images/ad-bridge2.png) no-repeat; margin-top:6px; } .ad-bridge2 img { position: absolute; top: 2px; left: 13px; } .ad-bridge2 p { position: absolute; bottom: 10px; left: 0; text-align: center; font-size: 11px; width: 100%; line-height: 1.4; } .calltoday { width:320px; height:20px; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; color:#333; padding-top:360px; text-align:center;} .didyouknow { font-size:16px; font-weight:bold; color:#3a1936; padding-left:5px;} .didyouknowtext { font-family:Georgia,serif; font-size:12px; margin:0; width:320px; height:64px; padding-left:7px; padding-top:5px;} #sidebar ul { list-style: none; 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: #909e2c; color: #fff; } #sidebar ul li:last-child a { border: none; } #sidebar #featured { margin: -25px 0 25px -10px; width: 230px; } #sidebar #sidedate { margin: -25px 0 25px 0; width: 70px; position:relative; top:-23px; left:230px; } \input[type=radio] { vertical-align: middle; } #sidebar #sidedate2 { margin: -25px 0 25px 0; width: 70px; position:relative; top:-20px; left:230px; } #sidebar #sidedatemain { margin: -35px 0 25px 0; width: 70px; padding-top:5px; position:relative; top:-20px; left:230px; } #sidebar ul .firstarticle {} #sidebar ul .article {margin-top:-48px; padding-bottom:25px; padding-top:5px;} #sidebar ul .lastarticle {margin-top:-46px; padding-bottom:20px; padding-top:3px;} /* POLL */ .js-kit-poll {margin-top:-20px; border:0px;} .js-pollContainer {border:0px solid #fff; margin:-50px 5px; padding:0px 5px; width:265px;} .js-pollSectionContainer {border:0px dotted #C0C0C0; margin:5px; padding:5px;} .js-poll-byJSKit {clear:both; color:#808080; font-family:Verdana,Helvetica; font-size:7pt; margin-right:0.3em; text-align:right; display:none; visibility:hidden;} /* 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; } dl dd h4 { font-weight: bold; margin: 0 0 10px 0; } /* FOOTER */ #footer { height: 292px; background: black url(../images/bg-footer-repeat.png) repeat-x; } #footer-inside { background: black url(../images/bg-footer-middle.jpg) no-repeat; height: 292px; width: 990px; margin: 0 auto; position: relative; } #footer h4 { font: italic 18px Georgia, Serif; color: #1f6d8c; 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 { 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: #b4cfe4; 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: 240px; height: 28px; display: block; position: absolute; text-indent: -9999px; border: none; top: 392px; left: 412px; } .forum-image { display: none; } .copyright { color: #000; font-size: 11px; width:600px; text-align:center; padding-left:17px;}