/* Theme Name: Saftel Theme URI: http://jamesmuspratt.com Description: HTML5 and CSS by James Muspratt. March 2012. Version: 1.0 */ /* ------------------------ Reset ------------------------*/ body, body * {margin:0; padding:0; text-indent:0;text-decoration: none;outline:none; font-weight:normal;} body img {border:0;} /* ------------------------ Layout ------------------------*/ html, body {height: 100%; } body {padding:0 10px 10px 10px; background:transparent url(images/stripe.png) repeat-x 0 0; background-attachment:fixed;} #top {position:relative;} /* ------- tidbits -------*/ .left, .alignleft {float:left; margin-right:15px;} .right, .alignright {float:right; margin-left:15px;} .clear {clear:both;} .cf:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;} #main:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;} /* ------------------------ Fullscreen ------------------------*/ body.fullscreen {padding:0;} body.fullscreen #top {position:static; padding:0; margin:0;} body.fullscreen #main {float:none; margin-top:0;} body.fullscreen #main-header-wrap {position:absolute; z-index:999;} p.controls {width:245px; z-index:10; position:absolute; top:50px;} .zoomin, .zoomout {display:block; text-transform:uppercase; font-size:10px; color:#fff; padding:7px 0 0 33px; width: 72px; height:23px;} .zoomin {float:left; background: rgba(0,98,189,.3) url(images/fullscreen-plus.png) no-repeat 12px center; } .zoomout {float:left; background: rgba(0,98,189,.3) url(images/fullscreen-minus.png) no-repeat 12px center;} .zoomin:hover, .zoomout:hover {background-color:rgba(0,98,189,.5); color:#fff;} .close {float:left; display:block; z-index:5000; text-indent:-9999px; width:33px; padding:0; height:30px; background:rgba(135,53,43,.3) url(images/fullscreen-close.png) no-repeat center center;} .close:hover {background-color:rgba(135,53,43,.5); } /* ------------------------ Global Type ------------------------*/ body {font-family: 'BauWeb', arial, sans-serif; font-size:13px; line-height:20px;} strong {font-family: 'BauWeb-Bold', arial, sans-serif; font-weight:normal;} span.caps {text-transform:uppercase; letter-spacing:1px; font-size:90%;} a {color:#0063bf; font-family: 'BauWeb-Medium'; font-weight:normal;} /* blue */ a:hover {color:#228ced;} /* light blue */ p {margin-bottom:10px;} h2 {font-size: 18px; margin-bottom:10px; } h3 {font-size:12px; line-height:15px; color:#62615b; font-family: "BauWeb-Medium"; margin:40px 0 20px 0;} h3.page-title {color:white; margin-top:0;} h4 {font-size:12px; line-height:15px; color:black; font-family: "BauWeb-Medium"; } em {font-style:normal; font-family: "BauWeb-Italic";} blockquote p {margin-left:40px; margin-right:40px;} /* ------------------------ Transitions ------------------------*/ a, a img, #search-field, #search-submit, label { -webkit-transition: height .15s ease, color .2s ease, background-color .2s ease, border-color .2s ease; -moz-transition: height .15s ease, color .2s ease, background-color .2s ease, border-color .2s ease; -o-transition: height .15s ease, color .2s ease, background-color .2s ease, border-color .2s ease; transition: height .15s ease, color .2s ease, background-color .2s ease, border-color .2s ease; } /* ------------------------ Header ------------------------*/ header#main-header { z-index:10; margin-top:-10px;} header#main-header h1 a {display:block; text-indent:-9999px; background:transparent url(images/andrew-saftel.png) 0 1px; width:245px; height:60px; } /* body.tag header#main-header h1 a, body.single header#main-header h1 a {background-color:#e7e3d2;}*/ /* body.fullscreen header#main-header h1 a {background-color:transparent;}*/ header#main-header nav {padding:18px 10px 10px 20px; width:215px; background:#fff;} header#main-header ul {list-style:none;} nav h2 {font-size: 13px; line-height:18px; color:black; font-family: 'BauWeb-Bold'; margin-bottom:4px;} nav ul {margin-bottom:10px;} nav ul#page-list {margin-bottom:5px;} /* nav li.n-index a {font-size:12px;}*/ li.current_page_item a, a.current_page_item, a.current-term {color:#87342b;} nav li {display:block; font-family: 'BauWeb-Medium', arial, sans-serif; margin-bottom:2px; font-size: 13px; line-height:18px;} nav li a {display:inline-block; font-family: 'BauWeb-Medium', arial, sans-serif; } /* ------------------------ Search Form ------------------------*/ #search-form {margin:0px 0 0px 0; display:inline-block; zoom:1; border:1px solid #eaeaea; padding:5px 10px;} #search-field {margin:0; border:0; display:inline-block; background:transparent; width:125px; color:#bab49b; font-family: 'BauWeb-Medium'; font-size:13px;} #search-submit {margin:0; border:0; display:inline-block; background:transparent; outline:0; color:#0063bf; font-family: 'BauWeb-Bold'; font-size:10px; line-height:10px; text-transform:uppercase; letter-spacing:1px;} #search-submit:hover {color:#228ced; cursor:pointer; } /* light blue */ #search-results #search-submit {color:#87342B;} /* ------------------------ Home Page ------------------------*/ #home #main-header h1 a:hover {cursor:default;} /* ------------------------ Artwork tag page ------------------------*/ #main {margin-top:10px; } div.tag-description {font-family: 'BauWeb-Medium';} .work-list {list-style:none; width:100%;} .work-list li {float:left; height:250px; margin:0 25px 10px 0; max-width:80% !important;} /* width is set inline, by the way */ .work-list li a.text {display:block; color:#bab49b; font-family:"BauWeb-Medium"; font-weight:normal; font-size:12px; line-height:15px; padding-right:8px; } .work-list li a.text:hover {color:#a6a087;} .work-list li img {padding-bottom:1px; max-width:100%; height:auto !important;} /* ------------------------ Stories page ------------------------*/ .stories-list {list-style:none;} .stories-list li {padding:10px 0; margin:0 0 10px 0; border-bottom:1px solid #eaeaea; font-family:"BauWeb-Medium"; } .stories-list li img {float:right; margin-top:-1px;} .stories-list li p.excerpt {width:430px;} /* ------------------------ Artwork single page ------------------------*/ /*- Prev-Next -*/ .prev-next-post {list-style:none; margin:0 0 10px 0; width: 245px; height:35px;} .prev-next-post li a {display:block; text-indent:-9999px; width: 110px; height:35px; border:1px solid #eaeaea; background:transparent url(images/prev-next-arrows.png) no-repeat 50px 9px;} .prev-next-post li.prev-post a {float:left;} .prev-next-post li a:hover {background-position: 50px -31px; border-color:#228ced;} .prev-next-post li.next-post a {background-position: -50px 9px; float:right;} .prev-next-post li.next-post a:hover {background-position: -50px -31px;} .single article img {max-width:100%; height:auto !important;} header.work {margin-bottom:20px; padding: 0;} #timeline header.work {margin-bottom:10px} header.work h1 {font-family:'BauWeb-Bold'; font-weight:normal; font-size:30px; line-height:35px; } .title-caption {font-size:13px; line-height:18px; border-top:1px solid #eaeaea; padding-top:10px;} header.work .title-caption h1 {font-size:15px; line-height:18px; margin:-1px 0 0px 0;} ul.meta {list-style:none; margin-top:0;} ul.meta li {font-size:13px; color:#bab49b; font-family: 'BauWeb-Medium'; font-weight:normal;} p.view-large {margin:20px 0 10px 0; color:#bab49b; font-family: 'BauWeb-Medium'; font-weight:normal; } p.view-large a {display:inline-block; padding:2px 0 0 25px; background: transparent url(images/view-large.png) no-repeat 0 center; } /*- Detail images -*/ h3#details {margin-top:20px;} .details-list {list-style:none; } .details-list li {float:left; margin:0 10px 10px 0;} /* ------------------------ Index Page ------------------------*/ #thumb-show-hide {float:right; margin-bottom:10px; width:196px;} #thumb-show-hide label {font-size:11px; font-family: 'BauWeb-Medium';} #thumb-show-hide label:hover {cursor:pointer; color:##bab49b;} .index-table {max-width:700px; margin-top:10px; border-bottom:1px solid #eaeaea; font-family:'BauWeb-Medium'; color:#bab49b;} .index-table th {text-align:left; vertical-align:top;} .index-table th:hover {color:#a6a087; cursor:pointer; } .index-table th.headerSortDown, .index-table th.headerSortUp {color:#87342B;} .index-table th.headerSortDown:after {content:" ↓";} .index-table th.headerSortUp:after {content:" ↑";} .index-table td {text-align:left; vertical-align:top; margin:0; padding:10px 25px 10px 0; border-top:1px solid #eaeaea;} .index-table td a.thumb {display:none;} /*can be overridden by javascript checkbox*/ /* ------------------------ Timeline Page ------------------------*/ #year-nav {list-style:none;} #year-nav li {display:inline;} #year-nav li a {display:inline-block; margin-right:10px;} #timeline #main {width:100%;} #timeline-wrap {width:100%; margin:0 auto; height:auto; overflow-x:auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;} #timeline-content {display: flex; align-items: flex-start; justify-content: flex-start; padding:20px 0 10px 0;} #timeline-content .timeline-item {flex:0 0 auto; margin-right:50px; height:350px; overflow:hidden;} #timeline-content .timeline-item.year {border-left:1px solid #eaeaea; width:120px; height:350px; text-align:right; padding:10px 0 0 10px; font-family: 'BauWeb-Bold'; font-size:18px; color:#87342b;} #timeline-content .timeline-item.year:after {content: " →"; font-family:"lucida grande", arial, sans-serif; font-weight:normal;} /* ------------------------ Pages ------------------------*/ .page article h4 {font-size: 15px; line-height:20px; } .page article p, .page article li {font-size: 15px; line-height:20px; color:#62615b;} .page article p, .page article ul {margin-bottom:20px;} /* stories and essays */ .page#stories-and-essays h4 {margin-bottom:0;} /* cv */ .page h3 {clear:both; padding-bottom:2px; border-bottom:1px solid #e1e0dc; } .page h3.page-title {border:0;} .page#cv article h4 {float:left; width:75px; clear:both; margin-bottom:20px; } .page#cv article ul {margin-left:75px; list-style:none; } .page#cv article ul li {display:inline-block; margin-bottom:10px;} /*------------ Desktop/Tablet Styles ------------*/ /*------------ Add the following rules for 600px wide and up ------------*/ @media screen and (min-width: 600px) { body {padding:0;} #top {padding:10px 20px; margin:0 auto;} #main {float:left; } #main-header-wrap {position:absolute; width:220px; left:auto; right:70px; bottom:0; } header#main-header {position:fixed; top:0; } nav {position:fixed; bottom:0; } /*header#main-header h1 a, nav {box-shadow: 0px 0px 5px #d7d7d7;} */ nav {border:1px solid #eaeaea;} /* home page exceptions*/ #home #main {padding-bottom:0; } #home #main img:hover {cursor:auto !important; } .page article {width:80%;} /* tag page*/ body.tag #main {padding-bottom:315px;} /* single page*/ body.single #top, body.page #top {min-width:1000px; max-width:1200px; } header.work.single {width:245px;} .single article {margin-top:20px;} .single article aside {position:absolute; top: 60px; right:44px; width:245px;} /* .aside-content {position:fixed;}*/ /* fullscreen stuff */ body.fullscreen header#main-header {right: 45px;} p.controls {position:fixed; right:0px; top:50px;} .zoomin, .zoomout {float:none; position:absolute; } .zoomin {right:79px;} .zoomout {right:185px;} .close {float:none; position:absolute; right: 45px; } .smooth_zoom_preloader {background: transparent url(images/preloader.gif) center center no-repeat;} body#timeline #main {padding-bottom:0;} body.page #main {width: 700px;} body#search-results #main {width: 100%;} .stories-list {width:700px;} }