html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { min-height: 100%; font-size: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, audio, canvas, video { display: block; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } b, strong { font-weight: bold; } abbr[title] { border-bottom: 1px dotted; } input, textarea, button, select { margin: 0; font-size: 100%; line-height: normal; vertical-align: baseline; } button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } textarea { overflow: auto; } * {margin:0;padding:0;} /////////////////////////////////// /*@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; src: local('Quicksand Regular'), local('Quicksand-Regular'), url('http://themes.googleusercontent.com/static/fonts/quicksand/v1/sKd0EMYPAh5PYCRKSryvW7O3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } @font-face { font-family: 'Sorts Mill Goudy'; font-style: italic; font-weight: 400; src: local('Sorts Mill Goudy Italic'), local('SortsMillGoudy-Italic'), url('http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v2/UUu1lKiy4hRmBWk599VL1dvlBl0Jp7mnNhNNKZ7BGiU.woff') format('woff'); } @font-face { font-family: 'Sorts Mill Goudy'; font-style: normal; font-weight: 400; src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'), url('http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v2/JzRrPKdwEnE8F1TDmDLMUtsZ51dqzBwIdH2JuTl9mv4.woff') format('woff'); }*/ // VARIABLES ////////////////////// @bigFont: athelas,'Times New Roman',Times,Georgia,serif; @normFont: futura-pt,Tahoma,Verdana,sans-serif; @lilFont: futura-pt,Tahoma,Verdana,"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; @22fs: 22 / 16em; @20fs: 20 / 16em; @18fs: 18 / 16em; @17fs: 17 / 16em; @16fs: 16 / 16em; @15fs: 15 / 16em; @14fs: 14 / 16em; @13fs: 13 / 16em; @12fs: 12 / 16em; @11fs: 11 / 16em; @10fs: 10 / 16em; // MIXINS ///////////////////////// .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; behavior: url(/PIE.htc); } .box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -mox-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .transition(@prop: all, @duration: 0.3s, @timing: ease, @delay: 0) { -webkit-transition: @arguments; -moz-transition: @arguments; -o-transition: @arguments; transition: @arguments; } .transform(@scale: 1) { -webkit-transform: scale(@scale); -moz-transform: scale(@scale); -o-transform: scale(@scale); transform: scale(@scale); } /////////////////////////////////// html, body {height: 100%;} body { background: #fff; font: normal 100% @normFont; color: #444; padding-top: 25px; } img { max-width: 100%; } a { color: #222; text-decoration: none; outline: none; .transition(all,0.3s,ease,0); &:hover { color: #000; background: #fefee5; } } section { overflow: auto; clear: both; padding: 0 1% 150px 1%; margin: 0; } /////////////////////////////////// #container { background: transparent; height: auto; min-height: 100%; width: 90%; margin: 0 auto; padding: 25px 0 0 5%; } /////////////////////////////////// #title { width: 30%; float: left; padding: 0 0 3em 1%; font: normal @16fs @bigFont; letter-spacing: 0.1em; text-shadow: 0 1px 2px rgba(0,0,0,0.2); a { .transition(all,0.3s,ease-in-out); } span#profession { font: normal @11fs @lilFont; color: #666; text-shadow: none; text-transform: uppercase; } } /////////////////////////////////// #navigation { width: 60%; float: right; padding-top: 6px; margin-right: 6%; font: normal @11fs @lilFont; text-transform:uppercase; letter-spacing:0.1em; color:#999; } #d_Then { display: none; } #d_Project, #d_Escape, #d_Corrode, #d_Derelict { margin-right: 1.5em; } #d_Project:after, #d_Escape:after, #d_Corrode:after, #d_Derelict:after { content: "\2235"; } ul.topnav { padding: 0; text-align: right; li { float: right; margin: 0; padding: 0; position: relative; a { padding: 0 5px; color: #484848; color:rgba(0, 0, 0, 0.8); text-decoration: none; border: none; float: right; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2); } .subnav { text-align: left; list-style: none; position: absolute; left: 0; top: 13px; background: #fff; margin: 0; padding: 0; display: none; float: right; width: 130px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; behavior: url(/PIE.htc); opacity: 0.9; z-index: 999; .box-shadow(0,4px,5px,rgba(0,0,0,0.6)); li { text-align: left; clear: both; width: 103px; a { display: block; width: 100%; padding: 10px 0 10px 23px; border: none; color: #222; float: right; background: #fff; .border-radius(4px); text-transform: none; font-size: @20fs; margin: 2px; text-shadow:none; .transition(none); &:hover,&:focus { background: #222; color: #fff; } } } } } } /////////////////////////////////// #content { padding-bottom: 150px; } .project_mini { float: left; width: 20%; margin-right: 5%; padding-bottom: 1.7em; img { display: block; margin: 0 auto 0.5em; .border-radius(6px); .box-shadow(0, 1px, 5px, rgba(0,0,0,0.8)); } p { padding-top: 0; line-height: 1.2em; font: normal @14fs @lilFont; } h1 { font: normal @18fs @bigFont; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } a { .transition(all,0.3s,ease,0); } } .dated { font-size: 0.935em; color: #666; } /////////////////////////////////// footer { width: 100%; text-align: center; position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear: both; font: normal @13fs @lilFont; line-height: 2em; color: #666; background: transparent; a { text-transform: uppercase; font: normal @12fs @lilFont; letter-spacing: 0.2em; } b { font-weight: normal; } } a.atom-rss { margin: 0 0 0 6px; padding: 1px 4px 1px 4px; font-size: 1em; font: normal @15fs @lilFont; letter-spacing: 0.08em; background: #eee; .border-radius(4px); border: 1px solid #ccc; text-shadow: 0 1px 0 #fff; .box-shadow(0,1px,1px,#999); &:hover { border-color: #999; background: #ccc } } /////////////////////////////////// #project { position: relative; padding-left: 22.5%; p { padding-left: 0.9em; font: normal @16fs @normFont;color: #444; a { border-bottom: 1px solid #eee; } } } #prevnext { width: 58.333333%; max-width: 560px; list-style-type: none; text-align: center; font: normal @14fs @bigFont; font-style: italic; padding: 0 0 2em 0; color: #999; li { display: inline; } a { font: normal @11fs @normFont; text-transform: uppercase; letter-spacing: 0.2em; } } #galleryTitle { position: relative; padding: 0 0 1em 0.3em; font: normal @20fs @bigFont; text-shadow: 0 1px 1px rgba(0,0,0,0.3); letter-spacing: 0.1em; span { position: absolute; display: block; width: 22%; left: -29.5%; top: 0.3em; color: #666; font: normal @13fs @bigFont; text-align: center; text-shadow: none; letter-spacing: 0; font-style: italic; } } #project p#counting { position: absolute; width: 15.8%; height: 2.5em; left: 0; top: 10em; text-align: center; text-indent: 0; color: #666; background: transparent url(img/sideI.gif) 52% 100% no-repeat; padding-bottom: 0.1em; font: normal @14fs @bigFont; span { color: #484848; padding: 0 0.2em; text-shadow: 0 1px 0 #ccc; } } #subside { padding: 50px 0 150px 0; li { width: 17%; float: left; margin: 18px 0 0 0; img { display: block; .border-radius(4px); .box-shadow(0, 1px, 5px, rgba(0,0,0,0.8)); } a { clear: both; } } } /* * jQuery FlexSlider v1.8 * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {width: 100%; margin: 0; padding: 0;} .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {background: transparent; position: relative; .border-radius(5px); width: 58.333333%; max-width: 560px; zoom: 1; padding-top:2em;} .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} /* Caption style */ /* IE rgba() hack */ .flex-caption {background: transparent; -ms-filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; zoom: 1;} .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;} /* Direction Nav */ .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav4.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;} .flex-direction-nav li .next {background-position: -52px 0; right: -16px;} .flex-direction-nav li .prev {left: -16px;} .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .flex-control-nav {width: 100%; position: relative; bottom: -30px; text-align: center;} .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav2.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;} .flexslider img { .border-radius(6px); .box-shadow(0,2px,10px,rgba(0,0,0,0.8)); } /////////////////////////////////// label, input[type=button], input[type=submit], button { cursor: pointer; } #contact { min-height: 0; h1 { padding-left: 25%; font: normal 1.5em @bigFont; text-shadow: 0 1px 1px rgba(0,0,0,0.3); } p { text-indent: 0; padding: 2em 0 0 25%; font: normal @16fs @normFont; } } #contactForm { padding-top: 15px; overflow: hidden; font: normal @16fs @normFont; fieldset { padding-bottom: 10px; width:100%; border:0; padding:0; margin:0; ol { margin: 0; padding: 0; width:100%; } li { list-style: none; padding: 5px 0; margin: 0; width:100%; } } label { display: inline-block; line-height: 1.8em; vertical-align: top; width: 20%; text-align:right; padding-right: 5%; } } input { width: 20%; .border-radius(4px); border:1px solid #eee; border-top-color:#ccc; padding:5px; font: normal 1em @normFont; .transition(); outline:none; -moz-box-shadow: inset 0 1px 4px #eee; -webkit-box-shadow: inset 0 1px 4px#ee; box-shadow: inner 0 1px 4px #eee; } textarea { background: #fff; width: 25%; height:100px; .border-radius(4px); border:1px solid #eee; border-top-color:#ccc; padding:5px; font: normal 1em @normFont; .transition(); outline:none; -moz-box-shadow: inset 0 1px 4px #eee; -webkit-box-shadow: inset 0 1px 4px#eee; box-shadow: inner 0 1px 4px #eee; } select { width: 20%; .border-radius(4px); border: 1px solid #ccc; padding:5px; } input:focus, textarea:focus, select:focus { background:#fffff2; border-color:#ccc; border-top-color:#999; color:#000; -moz-box-shadow: inset 0 1px 4px #ccc; -webkit-box-shadow: inset 0 1px 4px#ccc; box-shadow: inner 0 1px 4px #ccc; } input:invalid, textarea:invalid { -moz-box-shadow: none; } input[type=submit], input[type=button] { margin-left: 25%; width: 22%; font: normal 0.685emm @normFont; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 0 1px 1px #555; color:#fff; background: #444; .border-radius(23px); border-style: solid; border-bottom-color: #ccc; border-top-color: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333)); background: -moz-linear-gradient(top, #666, #333); .box-shadow(0,1px,3px,#999); .transition(all,0.3s,ease,0); text-shadow:0 1px 0 rgba(0, 0, 0, 0.9); } input[type=submit]:hover, input[type=button]:hover { text-shadow:0 1px 0 rgba(0, 0, 0, 1); background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#444)); background: -moz-linear-gradient(top, #999, #444); } input[type=submit]:active, input[type=button]:active { color: #fff; background: #444; background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#666)); background: -moz-linear-gradient(top, #333, #666); } #form_error, #thank_you { padding-left: 18.333333%; } ::-webkit-validation-bubble-message { background: #fff; background-color: #fff; padding:5px; } /////////////////////////////////// #jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; } #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #jquery-lightbox a { border:none; text-decoration: none; background: transparent; } #jquery-lightbox a img { border: none; } #lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } #lightbox-container-image { padding: 10px; } #lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #lightbox-container-image-box > #lightbox-nav { left: 0; } #lightbox-nav a { outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; } #lightbox-nav-btnPrev { left: 0; float: left; } #lightbox-nav-btnNext { right: 0; float: right; } #lightbox-container-image-data-box { font:normal 1em @normFont; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } #lightbox-container-image-data { padding: 0 10px; color: #666; } #lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; } #lightbox-image-details-caption { font-weight: bold; } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; } #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; } /////////////////////////////////// #then.col h1 {padding: 0 0 0 22.5%;} #then .thing { position: relative; padding: 0 0 3em 22.5%; margin-bottom: 3em; h1 { position: absolute; display: block; width: 18%; left: 0; top: 0.3em; text-align: right; padding: 0; } p { font: normal @14fs @bigFont; } } /////////////////////////////////// #typekit-badge-akk8gpo {display:none !important;} .typekit-badge {display:none !important;} /////////////////////////////////// @media screen and (min-width: 1300px) { #container { padding: 25px 0 3% 3%; } #navigation { margin-right: 4%; } .project_mini { width: 17%; margin-right: 3%; } } @media screen and (max-width: 768px) { #container { width: auto; padding: 25px 0 0 8%; } #title { width: 23%; } #navigation { width: 65%; padding-right: 4%; } .project_mini { width: 25%; margin-right: 8%; } #project { padding-right: 8%; } #prevnext { width: auto; list-style-type: none; text-align: center; font: normal 0.75em @normFont; font-style: italic; padding: 0 0 2em 0; li { display: block; padding-bottom: 1em;} a { font-style: normal;} } #project p#counting { top: 14em; } .flexslider { width: auto; padding-top: 2em;} input { width:25%; } textarea { width:50%; } input[type=submit] {width:28%;} } @media screen and (max-width: 740px) { #container { margin: 0; width: auto; padding: 25px 0 0 8%; } #title { float: none; width: auto; padding-bottom: 1.5em; } #navigation { float: none; width: auto; text-align: left; float: left; padding: 0 0 2em 0.5em; } ul.topnav { text-align: left; } section { padding-top:1.5em; } input { width:45%; } textarea { width:50%; } input[type=submit] {width:48%;} #contactForm label { width: 20%;padding-right: 5%; } } @media screen and (max-width: 600px) { #project { position: relative; padding-left: 0; padding-right: 8%;width: auto; overflow: visible; } .flexslider { width: auto; padding-top: 1em;} #galleryTitle span { position: relative; display: inline; width: auto; left: 0; top: 0; color: #666; font: normal 0.625em @bigFont; text-align: center; text-shadow: none; letter-spacing: 0; } #project p#counting { position: relative; width: auto; height: 2.5em; left: 0; top: 0; text-align: center; text-indent: 0; color: #666; background: transparent url(img/sideI.gif) 52% 100% no-repeat; padding: 1em 0 0.1em 0; font: normal 0.93em @bigFont; span { color: #484848; padding: 0 0.2em; text-shadow: 0 1px 0 #ccc; } } #prevnext { width: auto; list-style-type: none; text-align: center; font: normal 0.75em @normFont; font-style: italic; padding: 0 0 2em 0; li { display: block; padding-bottom: 1em;} a { font-style: normal;} } #contact { min-height: 0; background-image:none; h1,p { padding-left:25%;} } } @media screen and (max-width: 480px) { body { padding: 0; margin: 0; } #container { margin:0; width: auto; padding: 25px 0 6% 6%; } section { margin-bottom: 0; } footer { margin-top: 1px; } #title { float: none; width: auto; text-align: center; padding-top: 3em; } #navigation {display: none;} .project_mini { width: 44%; margin-right: 6%; } #project { position: relative; padding-left: 0; padding-right:6%;width: auto; overflow: visible; } .flexslider { width: auto; padding-top: 01em;} #galleryTitle span { position: relative; display: inline; width: auto; left: 0; top: 0; color: #666; font: normal 0.625em @bigFont; text-align: center; text-shadow: none; letter-spacing: 0; } #project p#counting { position: relative; width: auto; height: 2.5em; left: 0; top: 0; text-align: center; text-indent: 0; color: #666; background: transparent url(img/sideI.gif) 52% 100% no-repeat; padding: 1em 0 0.1em 0; font: normal 0.93em @bigFont; span { color: #484848; padding: 0 0.2em; text-shadow: 0 1px 0 #ccc; } } #prevnext { width: auto; list-style-type: none; text-align: center; font: normal @14fs @bigFont; font-style: italic; padding: 0 0 2em 0; color: #999; li { display: block; padding-bottom:1em;} a { font: normal @11fs @normFont; text-transform: uppercase; letter-spacing: 0.2em; } } #contact { min-height: 0; background-image:none; margin-right: 6%; h1,p { padding-left:25%;} } #contactForm label { width: 20%;padding-right: 5%; } input, textarea { width: 70%; } input[type=submit], input[type=button] { margin-left: 26%; width: 74%; } }