@media (-webkit-min-device-pixel-ratio: 2) { } a.blackbold:link { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #000; font-weight:bold; text-decoration: none; } a.blackbold:visited { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #000; font-weight:bold; text-decoration: none; } a.blackbold:hover { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #034281; font-weight:bold; text-decoration: none; } a.blackbold:active { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #000; font-weight:bold; text-decoration: none; } a.phonecart:link { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #fff; text-decoration: none; padding-left:.8em; } a.phonecart:visited { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #fff; text-decoration: none; } a.phonecart:hover { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #fff; text-decoration: none; } a.phonecart:active { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #fff; text-decoration: none; } .main h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .85em; color: #333; font-weight:bold; text-decoration: none; text-shadow:none; padding:1em 0 0 0; } .pic { float:right; max-width:30%; padding:.2em; margin:0 0 .1em .1em; } /******************************************** Tag Resets ********************************************/ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; border: 0; } /******************************************** Normalize CSS http://necolas.github.com/normalize.css/ ********************************************/ html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { min-height: 100%; font-size: 100%; background:#fff url("../img/dirt3.png") repeat; text-decoration:none; } img { max-width: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 { 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; } table { border-collapse: collapse; border-spacing: 0; } /* ****************************************** Web Fonts ****************************************** */ @font-face { font-family: 'Roboto Condensed Light'; src: url('../fonts/robotocondensed-light-webfont.eot'); src: url('../fonts/robotocondensed-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/robotocondensed-light-webfont.woff') format('woff'), url('../fonts/robotocondensed-light-webfont.ttf') format('truetype'), url('../fonts/robotocondensed-light-webfont.svg#RobotoCondensedLight') format('svg'); font-weight: normal; font-style: normal; } body { font-family: "Arial narrow", sans-serif; } /* For details on font-size:100% see here: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/ For details on line-height:1 see here: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ For details on text-size-adjust:100% see here: https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust */ html { font-size: 100%; line-height: 1; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* ****************************************** IE 7 and below, legacy browser style fixes ****************************************** */ .ie .wrapper { *behavior: url("http://absolute-path.com/js/boxsizing.htc");/*place own website url to the left*/ } .locations-bar { *behavior: url("http://absolute-path.com/js/boxsizing.htc");/*place own website url to the left*/ } /* Clearfix */ .group { *zoom: 1; } h2, h3, h4, h5, h6 { font-weight:100; text-decoration: none; } /** old h1 { font-size:3.189em; /* 3 x 1.063 = 3.189em line-height:1.223; }*/ h1 { font-size:1.2em; /* 3 x 1.063 = 3.189em */ line-height:1.176; font-weight:200; } h2 { font-size:2.126em; /* 2 x 1.063 = 2.126em */ line-height:1.223; } h3 { font-size:1.382em; /* 1.063 x 1.3 = 1.382em */ line-height:1.176; /* 1.625 / 1.382 = 1.176 */ } h2 { text-shadow: 0 2px 2px rgba(0, 0, 0, .65); } h4 { background:#efeeee; color:#000; font-size: 1em; line-height: 1.56; text-transform: uppercase; text-decoration:none; text-align:center; border-bottom:#fff 2px solid; } #portfolio h4 { line-height: 1.82; } h5 { font-family: "Helvetica", Helvetica, Arial, sans-serif; font-size: .85em; line-height: 1.53; font-weight: 500; } h6 { font-family: "Helvetica", Helvetica, Arial, sans-serif; font-size: .85em; line-height: 1.53; font-weight: 500; } .box ul { list-style: none; } .box-home ul { list-style: none; padding: 0; } #nav h3 { text-transform: capitalize; } #content article{ padding-top:.65em; padding-bottom:1.3em; } .box h4 { background:#666; color: #fff; border-top: 0px double #fff; padding-top:0; margin-top:0px; margin-bottom:0; /* 3/4 of 1.3 */ text-align: center; text-decoration: none; border-radius:7px; } .box-home h4 { background:#034281; color: #fff; border-top: 4px double #fff; margin-bottom: .975em; /* 3/4 of 1.3 */ text-align: center; text-decoration: none; } figure, #portfolio figure,.box,.box-home { background: #fff; -moz-box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 ); -webkit-box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 ); box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 ); padding: .600em; /* 3/4 of 1.3 */ } section footer { clear: both; } #masthead{ color:#fff; } #container { background:#fff; max-width:65em; } #container-content { padding: .2em 0; max-width:63.5em; margin:auto; background:#fff; } .box-home { padding:14px; height:11em; } .box { margin:auto; padding:2px 2px 0 2px; height:auto; border-radius:10px; } img { max-width:100%; } #masthead, #content, #colophon { margin: 0 3.3%; } #nav { margin: 0 3.3%; background:#fff; } /* Float Clearing http://nicolasgallagher.com/micro-clearfix-hack */ .group:after { content: " "; /* 1 */ display: table; /* 2 */ clear: both; } .group { *zoom: 1; /* 3 */ } p, #resume li { font-size:1.063em; /*17px/ 16px = 1.063em*/ line-height:1.223; /*1.3 x 1.063 = 1.223 */ margin:.612em 0; } .wrapper { padding: 0 .65em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #masthead { width:100%; padding:0 0; } /******************************************** Fluid Media ********************************************/ figure { position: relative; } figure img, figure object, figure embed, figure video { display: block; max-width: 100%; } img { border: 0; -ms-interpolation-mode: bicubic; } /* interpolation-mode http://css-tricks.com/ie-fix-bicubic-scaling-for-images/ */ /* Creates hover effect on Portfolio images */ #portfolio figure:hover, .box-home:hover { -moz-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 ); -webkit-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 ); box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 ); } .box:hover { -moz-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 ); -webkit-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 ); box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 ); } /* Image Offset for Indication of Linked Content */ #portfolio figure:hover { bottom: .26em; } --------------------------- Style nav section for single column smallscreen view --------------------------- /* Navigation */ /* - Create faux section height using padding. */ #nav { padding: .65em 0; } /* - Float heading and capitalize content. */ #nav h3 { float: left; text-transform: capitalize; } /* - Remove
). - Override default link color - Remove default text-decoration of underline. - Add padding, keeping horizontal and vertical rhythm. */ #nav a { display: block; font-size: 1.063em; color: #333; text-decoration: none; padding: .975em 1.3em; } /* 13. Style :hover for non-touch enabled browsers/devices. */ #nav a:hover { background: #EFEEEE; } /* Hide