/* Theme Name: WPTypo Theme URI: http://diggingintowordpress.com Description: A pure typography-based WordPress theme. Designed by Chris Coyier. Original theme coding by http://wpcoder.com. Additional coding by Chris Coyier. Released on http://diggingintowordpress.com. Copyright (C) 2009 CHRIS COYIER. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". Version: 1.1 Author: Chris Coyier Author URI: http://css-tricks.com */ /* COLOR: 240 240 240: #F0F0F0 229 229 229: #E5E5E5 Meta 191 191 191: #BFBFBF Content 127 127 127: #7F7F7F Title 64 64 64: #404040 */ /*----- CSS Reset -----*/ * { margin: 0; padding: 0; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.15; } a { outline: none; } a img { border:none; } /*----- General Styles -----*/ @font-face { font-family: Garamond; src: url('Garamond.ttf'); } @font-face { font-family: Garamond; font-weight: bold; src: url('GaramondBold.ttf'); } @font-face { font-family: Garamond; font-style: italic; src: url('GaramondItalic.ttf'); } body, html { height: 100%; } body { font: 15px/1.4em Garamond, 'Adobe Garamond Pro', 'Apple Garamond', 'ITC Garamond', Georgia, Times, 'Times New Roman', serif; /*font: 13px/1.6em Georgia, Times, 'Times New Roman', serif; font: 15px/21px Garamond, 'Adobe Garamond Pro', 'Apple Garamond', 'ITC Garamond';*/ } .clear { clear:both; } .clearfix:after { content: "."; visibility: hidden; display: block; height: 0px; clear: both; } .hide { display: none; } /*----- Page Structure & Resuables -----*/ #wrapper { width:960px; margin: 0 auto; padding: 0 0 27px 0; position: relative; } p.dots { color:#8e8e8e; font-size:1.5em; letter-spacing:1px; line-height:5px; } .navigation { overflow: hidden; margin: 0 0 25px 0; } .navigation a { text-decoration: none; color: #666; text-transform: uppercase; } /*--- Menu ---*/ #menu { color:#404040; font-size:16px; float:right; text-align:right; } #menu ul { padding:4px 0px; } #menu ul li { display:block; float:left; padding:3px 15px 0px 0px; } #menu ul li span { padding:0px 17px 0px 0px; } #menu ul li a { color:#404040; text-decoration:none; } #menu ul li a:hover { color:#aaa; } /*--- Header ---*/ #header { width: 800px; margin:0px auto; padding:60px 0px 9px 0px; height:40px; } #header #branding { float:left; } #header #blog-title { font-size:29px; font-weight:400; line-height:25px; margin:0; } #header #blog-title a { color:#404040; text-decoration:none; } #header #blog-description { font-size:16px; color:#bfbfbf; margin:0px; } /*--- Top-Image ---*/ .topimg-container { padding-bottom:20px; } .topimg-tbl { width:992px; left:-14px; position:relative; } .topimg-top { background:url(topimg-top.png); width:992px; height:37px; left:-14px; position:relative; top:31px; z-index:25; } .topimg-left { background:url(topimg-left.png); width:16px; z-index:23; } .topimg-right { background:url(topimg-right.png); width:16px; z-index:22; } .topimg-bottom { background:url(topimg-bottom.png); width:992px; height:33px; left:-14px; position:relative; top:-9px; z-index:24; } .topimg { width:960px; overflow:hidden; } /*--- Post ---*/ h2 { font-size:1.8em; margin:0px 0px 10px; color:#525252; } h3 { font-size:1.3em; margin:0px 0px 10px; font-weight:bold; text-transform:uppercase; color:#525252; } h4 { font-size:1.65em; margin:0px 0px 10px; font-style:italic; color:#525252; letter-spacing:1px; } h5 { font-size:1em; margin:0px 0px 10px; text-transform:uppercase; letter-spacing:3px; } h6 { font-size:1em; font-weight:bold; } .post { clear:both; } .post h1.entry-title { font-size:3em; color:#404040; float:left; display:block; line-height:1em; width:420px; } .post h2.title a { color:#404040; text-decoration:none; } .post h2.title a:hover { color:#222; } .post .entry-meta { float:left; margin:1px 20px 0 80px; text-align:right; width:155px; font-size:1em; color:#bfbfbf; line-height:1.4em; } .post .entry-date { text-transform:uppercase; } .post .entry-date abbr { border:none; } .post .meta-prep-author { font-style:italic; } .post .author a { color:#bfbfbf; text-decoration:none; } .post .entry-utility { clear:both; float:left; margin:40px 20px 0 55px; width:180px; text-align:right; font-size:14px; color:#404040; line-height:1.2em; } .post span.para { color:#d5d5d5; font-size:6.75em; display:block; width:70px; height:90px; margin:12px 20px 0px 75px; float:left; text-align:right; } .post .entry-right { float:left; margin:40px 0 0 20px; width:260px; } /* Entry Styles --*/ .post .entry-content { float:left; width:420px; margin:40px 0px 0px; font-size:1em; line-height:12m; color:#7F7F7F; } .post .entry-content p, .post .entry-utility p, .post .entry-right p, .post .entry-content table { margin-bottom:20px; } .post .entry-content p:first-child:first-line { font-size: 110%; line-height: 1.4; } .post .entry-content ul, .post .entry ol { margin:0px 0px 15px 50px; } .post .entry-content ul li { list-style:disc outside; } .post .entry-content ol li { list-style:decimal outside; } .post .entry-content ol ol li { list-style:lower-alpha outside; } .post .entry-content a { color:#525252; text-decoration:underline; } .post .entry-content a:hover { text-decoration:none; } .post .entry-content blockquote { background:#f1f1f1; padding:15px 30px 1px 10px; margin-bottom:15px; font-style:italic; position:relative; } .post .entry .blockquote_extender { background:#f1f1f1; position: absolute; width: 1000px; height: 100%; right: 445px; top: 0px; overflow:hidden; } .post .entry .blockquote_extender span { display:block; width:70px; height:0px; color:#d5d5d5; font-size:11em; top:90px; right:-10px; line-height:0px; position:absolute; } /*--- Comments ---*/ .comments { clear:both; width:610px; margin:0px auto 50px; padding-right:30px; font-size:1.4em; } .comments h3.heading { font-size:1.5em; color:#4c4b4a; margin:0px 0px 25px 150px; } .comments h3.heading span { text-transform:uppercase; } .comments p.notice { font-size:1.1em; color:#4c4b4a; margin:0px 0px 20px 160px; } .comments a { color:#525252; text-decoration:underline; } .comments a:hover { text-decoration:none; } /* Comment List */ .commentlist li { margin-bottom:30px; position:relative; } .commentlist li li { margin-bottom: 10px; } .commentlist li .byline { color:#a1a1a1; font-size:1em; width:140px; float:left; text-align:right; margin-right:25px; padding-top:8px; position:relative; z-index:50; } .commentlist li .byline .date { text-transform:uppercase; } .commentlist li .byline a { color:#a1a1a1; text-decoration:none; } .commentlist li .byline a:hover { border-bottom:1px solid #d5d5d5; } .commentlist li .byline strong { color:#4c4b4a; text-transform:uppercase; } .commentlist li .byline_expander { background:#f1f1f1; position: absolute; width: 1000px; height: 100%; right: 370px; top: 0px; overflow:hidden; z-index:40; } .commentlist li .comment_num { position:relative; width:70px; height:70px; float:left; overflow:hidden; } .commentlist li .comment_num .bg { font-size:40em; display:block; width:70px; height:70px; line-height:0px; position:absolute; left:-35px; top:-67px; color:#b4b4b4; z-index:50; } .commentlist li .comment_num .num { color:#ccc; font-weight:bold; text-align:center; display:block; width:70px; font-size:4.75em; position:absolute; z-index: 100; } .commentlist .text { width:360px; margin:0px 0px 0px 10px; float:left; color:#4c4b4a; font-size:1.1em; } .commentlist .text p { margin-bottom:10px; } .commentlist .text ul, .commentlist .text ol{ margin:0px 0px 15px 25px; } .commentlist .text ul li { list-style:disc outside; } .commentlist .text ol li { list-style:decimal outside; } .commentlist .text ol ol li { list-style:lower-alpha outside; } .commentlist .text blockquote { background:#f1f1f1; padding:15px 30px 1px 10px; margin-bottom:15px; font-style:italic; position:relative; } .commentlist li.author .byline { padding:15px 0px 13px; } .commentlist li.author .comment_num { margin-top:4px; } .commentlist li.author .comment_num .bg { color:#4c4b4a; } /* Form */ .comments form { clear:both; color:#4c4b4a; padding:5px 0px 0px; } .comments form label { display:block; float:left; font-size:1.35em; font-style:italic; width:140px; text-align:right; margin-right:25px; } .comments form input.text { border:none; background:transparent; border-bottom:1px solid #b4b4b4; margin-bottom:15px; display:block; float:left; width:250px; font-family:'Courier New', Courier, monospace; padding:5px 0px; outline:none; } .comments form .textbox { width:400px; float:left; position:relative; } .comments form .bracket { font-size:5em; } .comments form textarea { width:430px; border:1px dashed #b4b4b4; border-left:none; background:transparent; font-family:'Courier New', Courier, monospace; padding:10px 0px 10px 15px; outline:none; height:150px; } .comments form .allowed_tags { clear:both; margin-left:160px; text-align:right; padding-top:10px; font-family: Courier, monospace; font-size: 10px; color: #999; margin-bottom:10px; } .comments form p.submit { text-align:right; font-size:2.5em; } .comments form p.submit input#submit { background:#fff; border:none; text-transform:uppercase; font-size:0.6em; padding:10px 3px 0px; color:#4c4b4a; vertical-align:top; cursor:pointer; font-family:Georgia, Serif; } /*--- Explore ---*/ #explore-area { position: absolute; top: 0; left: 0; width: 100%; background: #ccc; padding: 10px; overflow: hidden; } #explore-area ul li a { display: block; padding: 10px; color: #3B3B3B; text-decoration: none; font-size: 16px; border-bottom: 1px solid #3B3B3B; text-align: center;} #explore-area ul li a:hover { background: #999; } #explore-area h3 { font-size:1.6em; margin: 0 0 10px; font-weight:bold; text-transform:uppercase; color:#3B3B3B; text-align: center; } #explore-area h3 span { font-style: italic; font-weight: normal; font-size: 0.8em; text-transform: lowercase; } #archives-area { width: 200px; margin-right: 20px; float: left; } #blogroll-area { width: 200px; margin-right: 20px; float: left; } #search-area { width: 200px; float: left; text-align: center; } #search-area p.submit { font-size: 2.5em; } #search-area p.submit input#searchsubmit { border:none; text-transform:uppercase; font-size:0.6em; padding:8px 3px 0px; color:#4c4b4a; vertical-align:top; cursor:pointer; font-family:Georgia, Serif; background: none; } /*--- Search & Archives ---*/ #page-sub-title { padding: 10px; background: #494949; color: white; margin: 0 0 25px 165px; font-size: 2.0em; text-transform: uppercase; letter-spacing: 4px; font-weight: normal; } /* REQUIRED by WordPress Theme Directory */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /*--- Footer ---*/ #footer { width:100%; padding:50px 0 60px; clear:both; float:left; } #footer a { text-decoration:none; } #footer a:hover { } #site-acknow { width:582px; text-align:right; font-size:16px; line-height:20px; color:#7F7F7F; float:left; } #site-acknow a { color:#7F7F7F; } #site-acknow a:hover { text-decoration:underline; } .bold { font-weight:bold; } .thanks { font-size:19px; line-height:30px; text-decoration:none; color:#404040; } #logo-mercator { height:80px; float:left; position:relative; top:3px; left:25px; } #logo-asf { height:77px; float:left; position:relative; top:3px; left:50px; } #asf-donate { font-size:16px; line-height:16px; float: right; position:relative; top:3px; } #asf-donate a { text-decoration:none; color:#7F7F7F; } #asf-donate a:hover .small { text-decoration:underline; } #asf-donate .small { font-size:12px; color:#404040; } .post a.ext-link { color: #5B9F7E; line-height: 15px; text-decoration: none; } .post a.ext-link:hover { text-decoration: underline; } .ext-link:before { content:"ยป"; font-size:1.4em; padding-right:5px; font-weight:bold; }