/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude Wordpress theme. Phwoar! (Based on the famous Kubrick by Michael Heilemann)
Version: 2.8
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com
Tags: starkers, naked, clean, basic
*/
@import "style/css/reset.css";
/* @import "style/css/typography.css"; */
/* @import "style/css/layout.css"; */
* {margin: 0; padding: 0;}
img {border: 0;}
body {color: #737373; font-family: "freight-text-pro", Arial, Helvetica, sans-serif;}
/* FONTS */
h1, h2, h3, .ribbon {font-family: "camingodos-web", Arial, sans-serif;}
.h1 {font-size: 28px;}
.h2 {font-size: 24px;}
.h3 {font-size: 18px;}
p {font-size: 16px; line-height: 1.4em; letter-spacing: 0.01rem;}
a {color: #005687; text-decoration: none;}
a:hover {text-decoration: underline;}
.blue {color: #005687;}
.darkBlue {color: #45526E;}
.lightGray {color: #ccc;}
.ribbon {background: url(ribbon.png) no-repeat; color: #fff; height: 31px; left: 50%; line-height: 31px; margin: -76px 0 0 -93px; position: absolute; text-align: center; width: 186px;}
/* LAYOUT */
.pageWidth {margin: 0 auto; width: 960px;}
.section {overflow: auto;}
.marginTop {margin-top: 20px;}
.marginBottom {margin-bottom: 20px;}
.marginBottomSmall {margin-bottom: 10px;}
.marginTopBottom {margin-top: 10px; margin-bottom: 10px;}
.marginLeft {margin-left: 20px;}
.marginRight {margin-right: 20px;}
.largeMarginRight {margin-right: 30px;}
.paddingTop {padding-top: 20px;}
.paddingBottom {padding-bottom: 20px;}
.right {float: right; margin: 0 0 20px 20px;}
.left {float: left; margin: 0 20px 20px 0;}
.imgRight {float: right; margin: 0 0 30px 30px;}
.imgLeft {float: left; margin: 0 30px 30px 0;}
.sectionBorder {border-bottom: 1px solid #eee;}
.sectionPadded {padding: 60px 0;}
.texture {background: url(furley_bg@2x.jpg) repeat; background-size: 600px 600px;}
.column1-3 {float: left; margin-right: 30px; width: 300px;}
.column2-3 {float: left; width: 630px;}
#thumbnails .column1-3:nth-of-type(3n+3) {margin-right: 0;}
.column1-4 {float: left; margin-right: 28px; width: 218px;}
.column3-4 {float: left; width: 710px;}
.column1-2 {float: left; margin-right: 30px; width: 465px;}
.columnSmall1-2 {float: left; margin-right: 30px; width: 285px;}
#thumbnails .columnSmall1-2:nth-of-type(2n+2) {margin-right: 0;}
.columnSmallMargin {margin-right: 28px;}
.columnNoMargin {margin-right: 0;}
/* ICONS */
.icon {background: url(icons_sprite.png) no-repeat; background-size: 297px 60px; height: 30px; width: 33px;}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.icon {background: url(icons_sprite@2x.png) no-repeat; background-size: 297px 60px;}
}
.iconAbout {background-position: 0 0;}
.iconAbout:hover, .iconAboutOn {background-position: 0 -30px;}
.iconWork {background-position: -33px 0;}
.iconWork:hover, .iconWorkOn {background-position: -33px -30px;}
.iconBlog {background-position: -66px 0;}
.iconBlog:hover, .iconBlogOn {background-position: -66px -30px;}
.iconContact {background-position: -99px 0;}
.iconContact:hover, .iconContactOn {background-position: -99px -30px;}
.iconTwitter {background-position: -132px 0;}
.iconTwitter:hover {background-position: -132px -30px;}
.iconDribbble {background-position: -165px 0;}
.iconDribbble:hover {background-position: -165px -30px;}
.iconLinkedin {background-position: -198px 0;}
.iconLinkedin:hover {background-position: -198px -30px;}
.iconGoogle {background-position: -231px 0;}
.iconGoogle:hover {background-position: -231px -30px;}
.iconEmail {background-position: -264px 0;}
.iconEmail:hover {background-position: -264px -30px;}
/* HEADER */
header {background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid #eee; padding-bottom: 5px; position: fixed; top: 0; width: 100%; z-index: 1200;}
header h2 {float: left; font-weight: normal; margin-top: 26px;}
header+section {margin-top: 87px;}
#logo {float: left; margin-right: 20px;}
nav {float: right; margin-top: 30px;}
nav li {float: left; list-style-type: none; margin-left: 10px;}
nav li:first-child {margin-left: 0;}
nav li div {margin: 0 10px;}
nav li p {color: #005687; display: none; font-size: 10px; margin-top: 5px; text-align: center;}
nav li a:hover + p {display: block;}
#mainTitle a:hover {color: #005687;}
#mainTitle a, #mainTitle a:hover .blue {color: #737373; text-decoration: none;}
/* HOMEPAGE */
#about {background: url(homepage_photo.jpg) no-repeat top center; background-size: 1500px 380px; min-height: 380px;}
#introWrapper {padding-top: 10px;}
#intro {background: rgba(255, 255, 255, 0.9); margin-top: 90px; padding: 30px 40px; width: 460px;}
#intro .h1, #intro .h3 {font-weight: normal;}
.blogPostHome {margin-bottom: 40px;}
.blogPostHome:last-of-type {margin-bottom: 0;}
#thumbnails {padding-bottom: 5px;}
.thumbnail {background: #fff; border: 1px solid #ddd; padding: 5px 5px 0px 5px; position: relative;}
.thumbnail img {width: 100%;}
.thumbnail:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
/* PORTFOLIO */
.fullImage {width: 100%;}
.fullImage2 {width: 203%;}
#portfolio div {margin-bottom: 30px; position: relative;}
#portfolio img {float: left;}
#projectHeader p {font-size: 20px; line-height: 1.6em;}
#portfolioContent p {text-align: center;}
#portfolioContent p+img {border-top: 1px solid #eee; margin-top: 40px; padding-top: 50px;}
#portfolioContent img {margin-bottom: 30px;}
#portfolioFooter li {margin-bottom: 6px;}
.portfolioDescription {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.9);
color: #737373;
font-size: 20px;
opacity: 0;
padding: 10px;
position: absolute;
bottom: 2px;
left: 2px;
right: 2px;
-ms-transition: opacity .4s ease;
-o-transition: opacity .4s ease;
-moz-transition: opacity .4s ease;
-webkit-transition: opacity .4s ease;
transition: opacity .4s ease;
z-index: 1000;}
#portfolio div:hover .portfolioDescription, .thumbnail:hover .portfolioDescription {opacity: 100;}
.stogieAnimation {position: absolute; margin-top: -680px; left: 50%; margin-left: -383px;}
/* BLOG */
.blogThumbnails .column1-3 {min-height: 340px;}
.blogThumbnails img {margin-bottom: 10px; width: 100%;}
.postDetails {font-size: 14px; font-style: italic; margin-bottom: 72px;}
.postDetails img {margin-left: 10px;}
.postDetails img:first-child {margin-left: 0;}
.screen-reader-text {display: none;}
#postFooter {border-top: 1px solid #ccc; font-size: 14px; font-style: italic; margin-bottom: 40px; text-align: right;}
#postFooter p {font-size: 14px;}
#postFooter a {color: #666; text-decoration: none;}
.comment {border: 1px solid #ccc; padding: 10px; margin-bottom: 15px;}
.comment-body p {margin-left: 47px;}
.comment-author {margin-bottom: 4px;}
.comment-author img {float: left; margin: 0 15px 15px 0;}
.commentmetadata {font-size: 11px; font-style: italic; margin-bottom: 15px;}
.commentmetadata a {color: #333; text-decoration: none;}
.commentmetadata a:hover {text-decoration: underline;}
#respond #submit {margin-top: 15px;}
#respond p {margin-bottom: 10px;}
#blogThumbnails {margin-bottom: 15px; text-align: center;}
#blogThumbnails img {border: 1px solid #ccc; height: 40px; margin: 0 10px; padding: 2px;}
#blogThumbnails img:hover {border: 1px solid #666; cursor: pointer;}
#blogThumbnails img:first-child {margin-left: 0;}
.recentPostList li {margin-bottom: 14px;}
.addthis_toolbox {margin: 40px 0 5px;}
#dsq-global-toolbar {background: #444; padding: 6px 10px 2px 10px;}
#dsq-reply {border-bottom: 1px solid #444; margin-bottom: 20px;}
.dsq-like-activity {color: #ccc; font-size: 14px;}
#blogPaging {margin-bottom: 20px; text-align: center;}
#blogPaging a {border: 1px solid #ccc; padding: 4px 6px;}
#articleContent {float: left; width: 600px;}
#side {float: right; width: 300px;}
article #side ul li {font-size: 16px; list-style-type: none; margin-left: 0;}
article #side ul li > ul li {line-height: 1.4em; list-style-type: disc; margin-left: 20px;}
div.pop-inside ul li .pop-title {font-weight: normal;}
div.pop-inside ul li {padding: 8px 8px;}
ul.pop-widget-tabs li {font-weight: normal;}
ul.pop-widget-tabs li {border: 0; margin: 0 1px -1px 0;}
ul.pop-widget-tabs li a {background: #ddd; color: #888; font-size: 12px; letter-spacing: 0; padding: 0 8px;}
ul.pop-widget-tabs li a.active {background: #f9f9f9; color: #666;}
ul.pop-widget-tabs li a:hover {background: #f3f3f3;}
article h1 {margin-bottom: 20px;}
article h2 {font-size: 24px; margin: 50px 0 10px;}
article h3 {font-size: 20px; font-weight: bold; margin: 40px 0 10px; text-transform: uppercase;}
article p, article li {font-size: 18px; line-height: 1.5em; letter-spacing: 0.01rem;}
article #thumbnails p {font-size: 16px; line-height: 1.3em; letter-spacing: 0.01rem;}
.dsq-comment-message p {font-size: 18px;}
article p {margin-bottom: 24px;}
article ul {margin-bottom: 20px;}
article ol li {list-style-type: decimal; margin-left: 40px; margin-bottom: 10px;}
article ul li {list-style-type: circle; margin-left: 40px; margin-bottom: 10px;}
.postDate {font-size: 14px; font-style: italic; line-height: 36px; margin-top: -10px;}
.callout {margin-bottom: 20px; padding: 20px;}
.callout p:last-of-type {margin-bottom: 0;}
code {font-size: 14px;}
pre {background: #eee; margin-bottom: 24px; overflow: scroll; padding: 5px;}
.search-field {border: 1px solid #ccc; height: 30px; font-size: 14px; padding: 3px 8px 5px 8px; width: 220px; -webkit-appearance: none; border-radius: 0;}
.search-field:focus {border: 1px solid #005687; outline: none;}
#side .search-field {width: 270px;}
.search-submit {border: 1px solid #ccc; margin-left: -4px; vertical-align: bottom; width: 28px; height: 28px; -webkit-appearance: none; border-radius: 0;}
#categoryCountList .cat-item {color: #bbb; float: left; list-style-type: none; margin: 0 10px 10px 0; width: 200px;}
.blogSmallSidebar #recentPostTitle, .blogSmallSidebar .recentPostList {display:none;}
.post, #disqus_thread {margin: 0 auto; max-width: 728px;}
#disqus_thread {margin-bottom: 30px;}
.post p {line-height: 1.5em;}
#relatedArticles {overflow: auto;}
#relatedArticles li {list-style-type: none; float: left; font-size: 16px; text-align: center; width: 170px;}
#relatedArticles li:first-child {margin-left: 0;}
#relatedArticles img {height: 100%; width: 100%;}
#adFooter {margin: 0 auto; width: 728px;}
.blogfooter {width: 728px; height: 90px;}
.arrow-up {float: left; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #005687; margin: 8px 6px 0 0;}
/* CONTACT */
#contactList li {list-style-type: none; line-height: 30px; margin-bottom: 10px;}
#contactList .icon {float: left; margin-right: 10px;}
#contact {background: url(contact_photo2.jpg) no-repeat top center; background-size: 1500px 380px; min-height: 380px;}
#introContact {background: rgba(255, 255, 255, 0.9); margin-top: 55px; padding: 20px; width: 260px;}
#contactForm textarea, #contactForm input[type=text] {border: 1px solid #ccc; font-size: 14px;}
#contactForm input[type=text] {padding: 4px; width: 96%;}
#contactForm textarea {padding: 4px; width: 96%;}
#contactForm input[type=submit] {background: #005687; border: 0; color: #fff; cursor: pointer; font-size: 14px; padding: 8px 12px;}
#formThanks {text-align: center;}
/* FOOTER */
footer {line-height: 30px; margin: 30px 0; text-align: center;}
#social {float: right; margin-left: 60px;}
#social li {float: left; list-style-type: none; margin-left: 15px;}
#social li:first-child {margin-left: 0;}
#copyright {float: left; margin-right: 60px;}
/* MEDIA QUERIES */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
#about {background: url(homepage_photo.jpg) no-repeat top center; background-size: 1500px 380px;}
#contact {background: url(homepage_photo.jpg) no-repeat top right; background-size: 1500px 380px;}
.ribbon {background: url(ribbon@2x.png) no-repeat; background-size: 186px 31px;}
}
@media screen and (max-width: 990px) {
.pageWidth {width: 735px;}
.column1-3 {width: 225px;}
.column2-3 {width: 480px;}
.column1-2 {width: 352px;}
.columnSmall1-2 {margin-right: 8%; width: 46%;}
#about, #contact {background-size: 1247px 316px; min-height: 316px;}
#intro {margin-top: 35px; width: 380px;}
#introContact {margin-top: 20px; width: 190px;}
#articleContent {float: none; width: 100%;}
#side {float: none;}
article p, article li, #projectHeader p {line-height: 1.5em;}
footer {margin: 15px 0;}
#social {float: none; margin: 0 auto; margin-bottom: 10px; overflow: auto; width: 177px;}
#copyright {margin-right: 0;}
#copyright, .postDate {float: none;}
.stogieAnimation {display: none;}
}
@media screen and (max-width: 760px) {
p {font-size: 14px; line-height: 1.4em;}
.pageWidth {width: 550px;}
.column1-3 {margin-right: 4% !important; width: 48%;}
.column2-3 {width: 100%;}
#thumbnails .column1-3:nth-of-type(2n+2) {margin-right: 0 !important;}
#portfolio .column1-3, #portfolio .column1-2 {margin-right: 0; width: 100%;}
.imgRight, .imgLeft {float: none; margin: 0 0 20px 0; width: 100%;}
#about, #contact {background-size: 1038px 263px; background-position-x: right;}
#intro, #introContact {background: none; margin-top: 0; padding-bottom: 40px; padding-top: 270px; padding-left: 0; padding-right: 0; text-align: center; width: 100%;}
#contactList {margin: 0 auto; width: 130px;}
article p, article li, #projectHeader p {line-height: 1.4em;}
}
@media screen and (max-width: 570px) {
.h1 {font-size: 26px;}
.h2 {font-size: 22px;}
.h3 {font-size: 16px;}
.pageWidth {width: 94%;}
header {text-align: center;}
header h2 {float: none; margin: 4px 0;}
#logo {height: 75px; width: 45px;}
nav {float: none; margin: 0 auto; margin-bottom: 5px; overflow: auto; width: 227px;}
nav li {margin-left: 5px;}
nav li a:hover + p {display: none;}
header+section {margin-top: 80px;}
#about, #contact {background-size: 872px 221px;}
#intro, #introContact {padding-top: 250px; width: 100%;}
.blogPostHome .column1-3 {margin-right: 0 !important; width: 100%;}
#relatedArticles li {width: 40%;}
#adFooter {margin: 0 auto; width: 468px;}
.blogfooter {width: 468px; height: 60px;}
}
@media screen and (max-width: 400px) {
#about, #contact {background-size: 663px 168px;}
#intro, #introContact {padding-top: 180px;}
.column1-3 {margin-right: 0 !important; width: 100%;}
#relatedArticles li {float: none; width: 100%;}
#relatedArticles li {margin-left: 0;}
#adFooter {margin: 0 auto; width: 300px;}
.columnSmall1-2 {float: none; width: 100%;}
.blogfooter {width: 300px; height: 250px;}
}