/* Theme Name: Sackcloth Seven Theme URI: http://sackclothstudios.com/ Description: Wordpres theme for Sackcloth Studios. Author: Alex Mansfield Author URI: http://sackclothstudios.com/ Colors: #210, #432, #245, #9cf */ /******************** reset ********************/ *{outline-color: #9cf;} html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 } img{border: 0;} li{list-style-position: inside; } body{font-size: 62.5%; /* Resets 1em to 10px */ line-height: 2.2em;} /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them div, h1, h2, h3, h4, h5, h6, p {position: relative;} */ /******************** layout ********************/ body{text-align: center;} #wrapper{width: 960px; margin: 0 auto; padding-top: 26px; text-align: left; background: transparent;} #content{float: left; width: 550px; padding: 0 25px 25px;} /******************** header ********************/ #header{height: 110px;} #header a{outline-color: #775533;} #nav-one{float: right; padding: 25px 15px 0 0; font-size: 1.3em;} #nav-one li{display: inline;} #nav-one li a{padding: 0 8px; color: #fff} /******************** sidebar ********************/ #sidebar{float: right; width: 340px; position: relative;} #sidebar ul img{margin: 0; padding: 0 0 5px;} #sidebar ul li{margin: 15px 10px; padding:0; list-style: none;} #sidebar ul ul{position: static; padding: 0 0 5px; } #sidebar li li{display: block; width: 100%; margin: 0; padding: 0;} #sidebar li li a{display: block; height: 25px; line-height: 25px; padding: 0 10px 0 15px; font-size: 1.4em; color: #432; outline-color: #775533;} #sidebar li li a:hover{} /******************** footer ********************/ #footer{width: 100%; height: 35px; padding: 15px 0 10px;} #footer{background: #245; repeat-x top left; color: #ddd; clear:both;} #footer a{color: #fff;} /* This keeps the footer at the bottom of the page */ html, body, #wrapper {height: 100%;} body > #wrapper {height: auto; min-height: 100%;} #core {padding-bottom: 50px;} /* must be same height as the footer */ #footer {position: relative; clear:both; height: 50px; margin-top: -50px;} /* negative value of footer height */ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /******************** content ********************/ p{padding: 8px 0;} #content p{font-size: 1.2em;} #content h2{color: #432; font-size: 2.5em; margin-bottom: 15px;} #content h2 a{color: #432;} #content h3{font-size: 2.0em;} #content .date{float: right; line-height: 12px; color: #257; font-weight: bold;} .post{padding: 10px 0;} #content p.post-meta{font-size: 0.95em;} /******************** page ********************/ p{padding: 8px 0;} #page p{font-size: 1.2em;} #page h2{color: #432; font-size: 2.5em; margin-bottom: 15px;} #page h2 a{color: #432;} #page h3{font-size: 2.0em;} #page .date{float: right; line-height: 12px; color: #257; font-weight: bold;} #page textarea{width: 550px;} .post{padding: 10px 0;} #page p.post-meta{font-size: 0.95em;} /******************** comments ********************/ #comments{padding-bottom: 10px;} #respond{clear: both; margin-top: 25px;} .post-comments{float: left; width: 550px; overflow:auto;} .post-comments h3{color: #432;} .post-comments li{clear: both; padding: 10px 0 15px; border-top: 1px dashed #964; list-style: none outside;} .post-comments li p{padding: 0 10px 0 220px;} .post-comments .commenter{float: left; width: 200px;} .post-comments .commenter img{float: left; padding-right: 10px;} .post-comments .commenter cite{display: block; font-size: 1.5em; line-height: 1;} .post-comments .moderation{ margin: 0 0 10px 0; padding: 0 10px; background: #def; border: 1px dashed #257;} #commentform #submit{background: #432; border: 1px solid #210; color: #fff; font-weight: bold;} #commentform .input{padding: 3px 0;} #commentform input{border: 1px solid #432; padding: 3px;} #commentform textarea{width: 525px; border: 1px solid #432; padding: 3px;} /******************** general ********************/ body{background: #fff url(images/header-bg.jpg) repeat-x top left; border-top: 10px solid #123; margin-top: -10px;} h1{width: 100%; padding-bottom: 15px; font-size: 2.5em; color: #432;} a{color: #257; font-weight: bold; text-decoration: none;} a:hover{text-decoration: underline;} #pagination{clear: both; width: 100%;} #pagination li{width: 400px;} /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. */ .aligncenter { display:block; margin:0 auto } .alignleft { float:left } .alignright { float:right } .clear{clear: both;} .clear-left{clear: left;} .clear-right{clear: right;} .wp-caption { border:1px solid #9cf; text-align:center; background: #fff; padding:10px; margin:10px } p.wp-caption-text{padding: 10px 0 5px;} /******************** typography ********************/ body{font-family: Verdana, Geneva, Tahoma, sans-serif; color: #210} /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */ h1, h2, h3, h5, h5, h6 { font-weight:bold } /******************** home page ********************/ .row-wrap{background: transparent;} #welcome-wrap{margin: 0 0 20px 0; border-top: 0 solid;} #welcome{padding: 0 0 15px 0; height: 210px; background: url(images/home.jpg) no-repeat center;} #monitor{margin: 0; padding: 0;} .row-wrap{border-top: 1px dashed #964;} .row{ padding: 15px 2px; overflow: hidden; background: #fff;} .row h3{float: left; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;} .row .right-side{margin-left: 275px;} #last-project a{margin-right: 0;} .row .right-side .project a{float: left; border: 1px solid #245; padding: 6px; margin: 0 12px 0 0;} .row .right-side .project a:hover{border: 1px solid #245; padding: 6px; margin-right: 12px; background: #245;} .row p{font-size: 1.2em; text-align: justify;} .row .wpcf7-mail-sent-ok{border: 2px solid #38b; background-color: #fff; font-size: 1.2em; } .row input{border: 1px solid #38b; padding: 3px;} .row textarea{width: 525px; border: 1px solid #38b; padding: 3px;} /* Font stack options The following represents a list of font stacks, as recommended by Nathan Ford in http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ I've added inverted commas around the relevant family names to ensure compatibility. p = balanced for paragraphs or body copy t = balanced for headlines or titles - - - - Arial, 'Helvetica Neue', Helvetica, sans-serif - p, t Baskerville, 'Times New Roman', Times, serif - p Baskerville, 'Times, Times New Roman', serif - t Cambria, Georgia, Times, 'Times New Roman', serif - p, t 'Century Gothic', 'Apple Gothic', sans-serif - p, t Consolas, 'Lucida Console', Monaco, monospace - p, t 'Copperplate Light', 'Copperplate Gothic Light', serif - p, t 'Courier New', Courier, monospace - p, t 'Franklin Gothic Medium', 'Arial Narrow Bold', Arial, sans-serif - p, t Futura, 'Century Gothic', 'Apple Gothic', sans-serif - p, t Garamond, 'Hoefler Text', 'Times New Roman', Times, serif - p Garamond, 'Hoefler Text', Palatino, 'Palatino Linotype', serif - t Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif - p Geneva, Verdana, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif - t Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif - p Georgia, Times, 'Times New Roman', serif - t GillSans, Calibri, Trebuchet, sans-serif - p GillSans, Trebuchet, Calibri, sans-serif - t 'Helvetica Neue', Arial, Helvetica, sans-serif - p Helvetica, 'Helvetica Neue', Arial, sans-serif - t Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif - p, t 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif - p, t Palatino, 'Palatino Linotype', Georgia, Times, 'Times New Roman', serif - p Palatino, 'Palatino Linotype', 'Hoefler Text', Times, 'Times New Roman', serif - t Tahoma, Geneva, Verdana - p Tahoma, Verdana, Geneva - t Times, 'Times New Roman', Georgia, serif - p, t Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif - p Trebuchet, Tahoma, Arial, sans-serif - t Verdana, Geneva, Tahoma, sans-serif - p Verdana, Tahoma, Geneva, sans-serif - t */