/* RESET */
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, font, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
html { height: 100%; overflow-y: scroll; -webkit-text-size-adjust: none; }
body { height: 100%; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
/* ########################################################################## */
a:link, a:visited { text-decoration: none; color: #00aced; }
a.external { padding-left: 10px; background: url(/images/arrow.gif) no-repeat 0 4px; }
a:hover { color: #d3d30c; text-decoration: underline; }
/* LAYOUT - A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
font-family: 'Museo500';
src: url('/fonts/museo-500/Museo500-Regular.eot');
src: local('☺'), url('/fonts/museo-500/Museo500-Regular.woff') format('woff'), url('/fonts/museo-500/Museo500-Regular.ttf') format('truetype'), url('/fonts/museo-500/Museo500-Regular.svg#webfontf03s8Hmu') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: 'Lucida Grande', Verdana, Arial, sans-serif; font-size: 11px; color: #cccccc; text-align: left; letter-spacing: 0; background: #141a1e url(/images/layout/bg-wood.jpg) left top; }
div#wrapper { width: 100%; min-height: 100%; height: auto !important; margin: 0 auto -160px 0; }
.ruler { width: 100%; height: 13px; display: block; background: url(/images/layout/ruler.png) repeat-x 0 -1px; position: absolute; top: 287px; z-index: 20; }
div#logo { width: 465px; height: 58px; margin: 19px 0 0 22px; position: absolute; z-index: 30; left: 0; }
div#logo a { width: 465px; height: 58px; display: block; background: url(/images/layout/page-elements.png) no-repeat 0 0; text-indent: -6000px; }
a.btnLinkedIn { width: 136px; height: 29px; position: absolute; right: 20px; margin-top: 98px; display: block; background: url(/images/layout/page-elements.png) no-repeat -500px 0; text-indent: -6000px; }
a.btnLinkedIn:hover { background-position: -700px 0; }
div#header { width: 100%; min-width: 980px; height: 150px; margin: 0; border-bottom: solid #1c3442 1px; }
div#headerContents { width: 930px; height: 150px; /*background: url(/images/layout/swirls.png) no-repeat left top;*/ padding: 0; margin: 0; }
div#push { height: 160px; }
div#footer { width: 100%; min-width: 980px; height: 160px; display: block; background: transparent url(/images/layout/vancouver-skyline.png) no-repeat left bottom; }
div#footerContents { width: 930px; display: block; padding: 132px 0 0 50px; color: #cccccc; }
div#footerContents ul { margin: 0 0 0 0; padding: 0; }
div#footerContents ul li { float: left; background: none; margin: 0 20px 0 0; padding: 0; }
div#footer a { margin-right: 0; font-weight: normal; color: #cccccc; }
/* ########################################################################## */
/* TYPOGRAPHY */
h1 { font-family: 'Museo500', 'Lucida Grande', Lucida, Verdana, sans-serif; font-size: 20px; line-height: 20px; color: #00aced; text-align: left; margin: 0 0 16px -1px; font-weight: normal; }
h2 { font-family: 'Museo500', 'Lucida Grande', Lucida, Verdana, sans-serif; line-height: 15px; font-weight: normal; font-size: 14px; margin: 16px 0 8px 0; color: #d3d30c; }
h3 { font-family: 'Museo500', 'Lucida Grande', Lucida, Verdana, sans-serif; font-size: 11px; color: #ffffff; margin: 0 0 4px 0; }
h4 { font-family: 'Museo500', 'Lucida Grande', Lucida, Verdana, sans-serif; font-size: 18px; line-height: 18px; font-weight: normal; color: #ffffff; }
h6 { font-family: 'Museo500', 'Lucida Grande', Lucida, Verdana, sans-serif; font-size: 20px; color: #536981; }
p { font-size: 11px; line-height: 16px; margin: 0 0 12px 0; }
ul { list-style: none; font-size: 11px; font-weight: normal; margin: 0 0 12px 0; }
ul li { padding: 0 0 0 24px; background: url(/images/layout/bullet.png) no-repeat 10px 5px; line-height: 16px; margin: 0; }
ul li ul { margin: 8px 0 0 0; }
/* ########################################################################## */
/* MAIN NAVIGATION */
ul#nav { width: 100%; margin: 94px 0 0 49px; float: left; }
ul#nav li { display: inline; float: left; padding: 0; background: none; }
ul#nav a { display: block; height: 17px; background: url(/images/layout/page-elements.png) no-repeat; text-indent: -6000px; margin: 16px 40px 0 0; }
ul#nav #navHome { width: 147px; height: 33px; background-position: 0 -66px; margin-top: 0; }
ul#nav .sel #navHome, ul#nav #navHome:hover { background-position: 0 -106px; }
ul#nav #navPortfolio { width: 70px; background-position: -190px -82px; }
ul#nav .sel #navPortfolio, ul#nav #navPortfolio:hover { background-position: -190px -122px; }
ul#nav #navServices { width: 64px; background-position: -300px -82px; }
ul#nav .sel #navServices, ul#nav #navServices:hover { background-position: -300px -122px; }
ul#nav #navClients { width: 52px; background-position: -405px -82px; }
ul#nav .sel #navClients, ul#nav #navClients:hover { background-position: -405px -122px; }
ul#nav #navAbout { width: 47px; background-position: -498px -82px; }
ul#nav .sel #navAbout, ul#nav #navAbout:hover { background-position: -498px -122px; }
ul#nav #navBlog { width: 37px; background-position: -585px -82px; }
ul#nav .sel #navBlog, ul#nav #navBlog:hover { background-position: -585px -122px; }
ul#nav #navContact { width: 61px; background-position: -662px -82px; margin-right: 0; }
ul#nav .sel #navContact, ul#nav #navContact:hover { background-position: -662px -122px; }
/* ########################################################################## */
/* CONTENT */
div.content { width: 930px; display: block; margin: 42px 0 0 0; }
div.content .grid_1 { width: 260px; float: left; margin-left: 50px; }
div.content .grid_2 { width: 570px; float: left; margin-left: 50px; }
div.content .grid_3 { width: 880px; margin-left: 50px; }
div.content .sidebar { padding-top: 36px; }
div.content .sidebar img { display: block; }
div.content .separator { width: 40px; height: 260px; padding-top: 20px; float: left; background: url(/images/layout/separator.png) no-repeat right 20px; }
div.portfolio { display: block; margin: 12px 0 0 0; }
div.portfolio a img { display: block; padding: 0; }
/* ########################################################################## */
/* CAROUSEL */
.js { overflow: hidden; zoom: 1; }
.projectCarousel, .projectCarousel .carousel-wrap { margin: 0; border: 0; zoom: 1; min-width: 980px; height: 310px; overflow: hidden; }
.js .carousel-wrap { display: inline-block; vertical-align: middle; width: 100%; margin: 0; padding-bottom: 10px; background: #536981 url(/images/layout/yellow-strip.jpg) repeat-x left bottom; }
.IE .js .carousel-wrap { display: inline; }
.projectCarousel .carousel-control { overflow: hidden; display: inline-block; vertical-align: middle; width: 10px; height: 10px; padding: 10px; cursor: pointer; text-indent: -6000px; zoom: 1; display: none; }
.projectCarousel .carousel-previous { float: left; }
.projectCarousel .carousel-previous:hover { background-position: 4px -241px; }
.projectCarousel .carousel-next { float: right; }
.projectCarousel .carousel-next:hover { background-position: -887px -241px; }
.projectCarousel .disabled,.projectCarousel .disabled:hover { -moz-opacity:.1;opacity:0.10;filter:alpha(opacity=10);cursor:default;}
.projectCarousel div { margin: 0; padding: 0; border: 0; }
.projectCarousel ul { list-style: none; margin: 0; padding: 0; zoom: 1; }
.projectCarousel ul li { position: relative; width: 600px; height: 300px; margin: 0; background: none; padding: 0; float: left; }
.projectCarousel ul li a img { display: block; padding: 0; background-color: #536981; }
.projectCarousel ul li a:hover { text-decoration: none; }
.projectCarousel ul li cite { display: none; position: absolute; bottom: 4px; right: 4px; padding: 2px 5px 2px 6px; line-height: 18px; font-size: 11px; background: #536981; color: #ffffff; filter: alpha(opacity=75); opacity: 0.75; -moz-opacity: 0.75; font-style: italic; }
div.center-wrap { width: 100%; height: 16px; margin: 0; overflow: hidden; clear: both; zoom: 1; text-align: right; position: absolute; top: 327px; right: 17px; }
div.center-wrap p { display: block; margin: 0; float: right; padding: 0; }
div.center-wrap p a { float: left; display: block; width: 16px; height: 16px; padding: 0; margin-left: 4px; text-indent: 6000px; background: url(/images/layout/page-elements.png) 3px -157px no-repeat; cursor: pointer; }
div.center-wrap p a:hover { background-position: 3px -187px; }
div.center-wrap a.active { background-position: -47px -157px; }
div.center-wrap a.active:hover { background-position: -47px -187px; }
/* ########################################################################## */
/* PROJECT NAV */
div.projectNav { clear: both; display: block; padding-top: 16px; }
div.projectNav a { color: #cccccc; display: block; }
div.projectNav a:hover { text-decoration: none; color: #00aced; }
div.projectNav div.left { text-align: left; float: left; }
div.projectNav div.left a { padding-left: 20px; background: url(/images/layout/arrow-left.png) left 5px no-repeat; }
div.projectNav div.left a:hover { background-position: left -25px; }
div.projectNav div.right { text-align: right; float: right; }
div.projectNav div.right a { padding-right: 20px; background: url(/images/layout/arrow-right.png) right 5px no-repeat; }
div.projectNav div.right a:hover { background-position: right -25px; }
/* ########################################################################## */
/* BUTTONS */
.btnWrap { display: block; margin: 12px 0; }
.btnMed { display: block; background: transparent url(/images/layout/page-elements.png) 0 0 no-repeat; height: 20px; border: 0; text-indent: -6000px; overflow: hidden; cursor: pointer; color: transparent; text-transform: capitalize; }
#btnSubmit { width: 84px; background-position: -300px -150px; }
#btnSubmit:hover { background-position: -300px -180px; }
.btnShowcase { width: 173px; background-position: -400px -150px; }
.btnShowcase:hover { background-position: -400px -180px; }
.btnLaunchSite { width: 123px; background-position: -600px -150px; }
.btnLaunchSite:hover { background-position: -600px -180px; }
.btnContactMe { width: 123px; background-position: 0 -300px; }
.btnContactMe:hover { background-position: 0 -330px; }
.btnCheckItOut { width: 130px; background-position: -200px -300px; }
.btnCheckItOut:hover { background-position: -200px -330px; }
.btnLaunchCalc { width: 186px; background-position: -400px -300px; }
.btnLaunchCalc:hover { background-position: -400px -330px; }
.btnLaunchWipSite { width: 182px; background-position: -600px -300px; }
.btnLaunchWipSite:hover { background-position: -600px -330px; }
/* ########################################################################## */
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
* html .clearfix {
height: 1%; /* IE5-6 */
}
* + html .clearfix {
display: inline-block; /* IE7not8 */
}
.clearfix:after { /* FF, IE8, O, S, etc. */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}