/* Site: STRESSLIMIT Description: Finally, a website Version: 0.4 Author: Stresslimit (http://stresslimitdesign.com) / ___|_ _| _ \| ____/ ___/ ___|| | |_ _| \/ |_ _|_ _| \___ \ | | | |_) | _| \___ \___ \| | | || |\/| || | | | ___) || | | _ <| |___ ___) |__) | |___ | || | | || | | | |____/ |_| |_| \_\_____|____/____/|_____|___|_| |_|___| |_| Table of Contents: Reset Layout General Styles text links images tables lists forms utility Section Styles header content sidebar footer Page Styles index network Media & Print */ /* --------------------------------------------------------- RESET --------------------------------------------------------- */ html, body, div, span, a, img, h1, h2, h3, h4, h5, h6, hgroup, p, dl, dialog, dt, dd, ol, ul, li, abbr, acronym, address, b, big, blockquote, cite, code, del, dfn, em, i, ins, kbd, pre, q, samp, tt, var, small, strong, sub, sup, object, iframe, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section, figure, menu, time, mark, audio, video { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; vertical-align: baseline; white-space: normal; text-align: left; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; } textarea, input, select { font-family: inherit; font-size: 100%; font-weight: normal; font-style: normal; white-space: normal; text-align: left; margin: 0; padding: 0; } article, aside, footer, header, nav, section, dialog, figure, hgroup, menu { display: block; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } del, ins { text-decoration: none; } ol, ul { list-style: none; } nav ul { list-style-type: none; } table { border-collapse: separate; border-spacing: 0; background-color: transparent; width: auto; height: auto; } :focus { outline: 0; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* -------------------------------------------------------------- LAYOUT -------------------------------------------------------------*/ header > div, #content > div, footer > div, .simplecontent, section.content /* tools section */ { width:1020px; margin:0 auto; clear:both; } article { width:600px; float:left; position:relative; } .third { width:340px; float:left; } .half { width:480px; padding-right:30px; float:left; } #sidebar { width:300px; float:right; } footer {} /* -------------------------------------------------------------- GENERAL STYLES -------------------------------------------------------------*/ /* ----- Text ----- */ body { background:#fff; color:#404749; font-size:20px; line-height:1.5em; font-family:"ff-meta-serif-web-pro", Georgia, serif; } pre { font-family:'Courier New', courier, monospace; font-size:14px; margin-bottom:1.5em; word-wrap:break-word; line-height:1.6em; } sup { /* height:0; */ line-height:1; vertical-align:baseline; position:relative; bottom:0.8em; font-size:50%; } p { line-height:1.5em; margin-bottom:0.9em; } p.small { font-size:0.9em; line-height:1.6em; margin-bottom:0.3em; } .strike { text-decoration:line-through !important; } .textcenter { text-align:center; } .underline { text-decoration:underline; } blockquote { color:#737d80; font-style:italic; background:url('images/bg_blockquote.png') left top no-repeat; padding:0 55px 0; margin:1.5em 0; } strong, b { font-weight:700; } i, em { font-style:italic; } pre { white-space:pre; } h1, h2, h3, h4, h5, h6 { font-weight:normal; } h2, h3, h4, h5 { } h1 { font-size:2em; line-height:1.2em; padding-bottom:10px; } h2 { font-size:1.6em; padding:0.3em 0 0.1em; } h3 { font-size:1.4em; padding:0.2em 0; } h4 { font-size:1em; } h6 { font-size:0.7em; text-transform:uppercase; } /* ----- Links ----- */ a { color:#777; text-decoration:underline; } a:hover { text-decoration:none; background:#bddbe3; color:#404749; } h1 a, .sidebar a { color:#404749; text-decoration:none; } h1 a:hover, .sidebar a:hover { } a.chip { position:relative; } a.chip::after { content:''; height:9px; width:3px; position:absolute; bottom:0; right:0; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAJCAYAAAD3s5bZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADlJREFUeNpi/P//PwMU6DIxIEAgI5LMJQYQB4i1gPg/TFkgmITKXPoPZaj/hwImuBKoskswGYAAAwBcXzPAPkFiqQAAAABJRU5ErkJggg=='); } /* ----- Lists ----- */ article ul, article ol { margin-left:10px; } article li { margin-left:20px; margin-bottom:0.9em; } article ol li { list-style-type:decimal; } article ul li { list-style-type:disc; } /* ----- Forms ----- */ input, select { padding:0.3em; } input[type=password], input[type=text] { background-color:#ffffff; border:1px solid #05807b; } select { background-color:#FFFFFF; border:1px solid #05807B; font-weight:bold; padding:2px 0 0 5px; } /* ----- Tables ----- */ table { border-collapse:collapse; width:100%; margin:20px 0; } td, th { vertical-align:top; } /* --- Button --- */ .button { cursor:pointer; position:relative; } .button span { display:-moz-inline-box; display:inline-block; line-height:1; text-align:center; text-transform:uppercase; height:22px; } .selector, .button { display:-moz-inline-box; display:inline-block; vertical-align:middle; zoom:1; *display:inline; } /* --- Select --- */ div.selector { position:relative; width:190px; background:#ddd url('images/buttons/black-arrow-down.png') 178px center no-repeat; height:26px; } div.selector span { color:#000; font-size:12px; width:170px; padding:0 10px; text-shadow: 0 1px 0 white; background-position:right 0px; line-height:26px; display:block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } div.selector select { width:190px; position:absolute; top:0; opacity:0; filter:alpha(opacity:0); height:25px; border:none; background:none; } div.selector select:focus { outline:0; } div.selector.active { } div.selector.active span { background-position: right -26px; } div.selector.focus, div.selector.hover, div.selector:hover { outline:1px solid #fff; /*box-shadow:0 0 3px red;*/ } div.selector.focus span, div.selector.hover span, div.selector:hover span { background-position: right -52px; } /* ----- Utility ----- */ .alignleft { float:left !important; } .alignright { float:right !important; } .no-float { float:none; } .nomargin { margin:0 !important; } .indent { padding-left:74px; } /* pushes over content for logo to float */ .obfuscate { direction:rtl; unicode-bidi:bidi-override; } .loading { background:transparent url('images/util/loading.gif') 50% 50% no-repeat; } .clearfix:before, .clearfix:after { content:''; display:block; height:0; visibility:hidden; } .clearfix:after { clear:both; } .clearfix { zoom:1; } /* -------------------------------------------------------------- SECTION STYLES -------------------------------------------------------------*/ /* HEADER --------------- */ /* all pages */ header { margin:100px 0; padding-top:9px; position:relative; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACFJREFUeNpi+o8Ezp8/z4DMAZIMyBwoH84B8ZE5QAAQYAA9XUfocadZGAAAAABJRU5ErkJggg==') repeat-x; } header > div { position:relative; min-height:10px; } #logo, #title { top:-58px; position:absolute; } #title { text-indent:-9999em; width:250px; height:96px; left:74px; padding:0; background:transparent url('images/sld_title.png') no-repeat; } #logo.fixed, .home #logo.fixed { position:fixed; top:10px; z-index:999; } /* home page only */ header.homebanner { z-index:9999; border-top:9px solid #bddbe3; border-bottom:1px solid #f1f1f1; padding:0; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpimbN5oZSiMTMLO5OojB4HmyDzf2YWXh6RPwy///z7BRBgAGiuCRKrXNKvAAAAAElFTkSuQmCC'); } header.homebanner::before { content:''; height:5px; width:100%; position:absolute; bottom:-7px; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACFJREFUeNpi+o8Ezp8/z4DMAZIMyBwoH84B8ZE5QAAQYAA9XUfocadZGAAAAABJRU5ErkJggg=='); } header.homebanner::after { content:''; height:150px; width:50px; position:absolute; bottom:-7px; right:0; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAACWCAYAAACcsttJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAzJJREFUeNrsnP+HG0EYh+cajnCUcJRSSjlKOEoJRwnhCGF5GfbP7k9HCUs4Sv+Dku7ohjSSzezO+877fkZf5r4ku3Mez2Nlc+Rmv9+7Amb+xpUx1U0hRr6XYGReSloUvvwHMZTV5xJA/OEH9KvWS7se0I3MDxDoIP74F+S0Xkow8k9WyCD16QOoaf1o1yd0I4+nEKgg/tyDiGlt2/UR3cjjOQhEEH/pCbS0tiUY+XIJAg2E+p5ESqtp1wd0I1/7IJBA6NoBKGk1JRi5mhUKCMUchJBWU4KRRQwEAgjFHmg9raYEI0+xENZBaMjBltNqSjAyKCvLIDT0BItpTbo7QXgji6EQVkH8mJOspTXprlbv0Y0sxkBYBKnHnmgprdFZWTMyOitrIHXKyVbSClnt2vUO3chTCoQlEJ+6gYW0Qlav7bpHN/ItFcIKCHFsop0WS1YWjLBkZQGEuDbSTCtk9bNdM3QjSy4IbRDi3EwrLdasNI2sOCE0QSruDTXSYs9Kywh7VlogJLFp7rREstIw8iwBoQFCUhvnTOu2e8kOb2QlBZEbhCQ3z5WWaFY5jYhmlRPES/+BHGlN3d+3Q+GNLKUhcoHUOdqVTmvaXa3eohtZ5oDIAZIlK+m0smUlbWSVC0IaxLuMI5XWtLsTvEM38pwTQhKEXOaRSCtk9av7Dm1knRtCCqRyCsOdlkpWEkZUspIAIac0nGmpZcVtZKMFwQ2ilhVnWqpZcRqpNCG4QRx6WupZcRlRz4oLhJyBSU3rrrsThDeysQDBAeKdkUlJK7zV81qCkbUViFQQM1mlpGUqqxQjprJKAamdsRmTVvg32q4EI+ayGgvincEZmtasu1rdohtZW4QYA2Iyq6Fpmc1qqJGNVYihIOQMT2xas+5OcIJupLIMMQTEdFaxaZnPKtaI+axiQcxnFZMWRFYxRggBIhbEoacFk9U1Ix4F4hoITFZ9aUFl1WcEKqs+EKisLqV1390JwhshNIhLIN4Bzmla4UNWdiUYqRAhzoHUDnSO04LN6tQIbFanILBZHacVPmmsKcEIdFbHIN6BT0grfNzmtgQj8FkdQMgVMCGt3yUY+SPAACXN6JoDYMcxAAAAAElFTkSuQmCC'); } header.homebanner > div { min-height:150px; padding:50px 0 30px; } header.homebanner h3 { padding-bottom:0.5em; } header.homebanner h6 { padding-top:0.5em; } header.homebanner p { width:36em; } header .indent a { text-decoration:none; color:#404749; } /* white arrow bottom right * / header.homebanner::after /*nav li a:hover* / { background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAACWCAYAAACcsttJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAzJJREFUeNrsnP+HG0EYh+cajnCUcJRSSjlKOEoJRwnhCGF5GfbP7k9HCUs4Sv+Dku7ohjSSzezO+877fkZf5r4ku3Mez2Nlc+Rmv9+7Amb+xpUx1U0hRr6XYGReSloUvvwHMZTV5xJA/OEH9KvWS7se0I3MDxDoIP74F+S0Xkow8k9WyCD16QOoaf1o1yd0I4+nEKgg/tyDiGlt2/UR3cjjOQhEEH/pCbS0tiUY+XIJAg2E+p5ESqtp1wd0I1/7IJBA6NoBKGk1JRi5mhUKCMUchJBWU4KRRQwEAgjFHmg9raYEI0+xENZBaMjBltNqSjAyKCvLIDT0BItpTbo7QXgji6EQVkH8mJOspTXprlbv0Y0sxkBYBKnHnmgprdFZWTMyOitrIHXKyVbSClnt2vUO3chTCoQlEJ+6gYW0Qlav7bpHN/ItFcIKCHFsop0WS1YWjLBkZQGEuDbSTCtk9bNdM3QjSy4IbRDi3EwrLdasNI2sOCE0QSruDTXSYs9Kywh7VlogJLFp7rREstIw8iwBoQFCUhvnTOu2e8kOb2QlBZEbhCQ3z5WWaFY5jYhmlRPES/+BHGlN3d+3Q+GNLKUhcoHUOdqVTmvaXa3eohtZ5oDIAZIlK+m0smUlbWSVC0IaxLuMI5XWtLsTvEM38pwTQhKEXOaRSCtk9av7Dm1knRtCCqRyCsOdlkpWEkZUspIAIac0nGmpZcVtZKMFwQ2ilhVnWqpZcRqpNCG4QRx6WupZcRlRz4oLhJyBSU3rrrsThDeysQDBAeKdkUlJK7zV81qCkbUViFQQM1mlpGUqqxQjprJKAamdsRmTVvg32q4EI+ayGgvincEZmtasu1rdohtZW4QYA2Iyq6Fpmc1qqJGNVYihIOQMT2xas+5OcIJupLIMMQTEdFaxaZnPKtaI+axiQcxnFZMWRFYxRggBIhbEoacFk9U1Ix4F4hoITFZ9aUFl1WcEKqs+EKisLqV1390JwhshNIhLIN4Bzmla4UNWdiUYqRAhzoHUDnSO04LN6tQIbFanILBZHacVPmmsKcEIdFbHIN6BT0grfNzmtgQj8FkdQMgVMCGt3yUY+SPAACXN6JoDYMcxAAAAAElFTkSuQmCC'); } */ /* navigation */ nav { position:absolute; right:0; top:-45px; } nav li { float:left; } nav li a { padding:0.1em 0.5em; text-decoration:none; } nav li a:hover { /*background-position:right 18px; background-repeat:no-repeat;*/ background:none; text-shadow:0 0 1px #bddbe3; color:#bddbe3; } /* CONTENT --------------- */ section { position:relative; } article { padding:0 0 40px 74px; border-bottom:1px dotted #bcbfbf; margin-bottom:60px; box-shadow:0 -10px 0 0 #f5f5f5 inset; -moz-box-shadow:0 -10px 0 0 #f5f5f5 inset; -webkit-box-shadow:0 -10px 0 0 #f5f5f5 inset; -khtml-box-shadow:0 -10px 0 0 #f5f5f5 inset; } article img { float:right; padding-bottom:0.9em; width:674px; } article img.no-resize { width:auto; padding:0; } article h6 { margin-bottom:4px; color:#999; } article h1 + h6 + h2 { padding-top:0; } a.more-link, a.more-link:hover { background:url('images/bg_more-link.png') right bottom no-repeat; padding:5px 30px 4px 15px; color:#fff; text-shadow:0 1px 0 #000; font-family:"proxima-nova-condensed", "arial narrow"; font-weight:700; text-transform:uppercase; font-size:13px; text-decoration:none; } a.more-link:hover { text-decoration:underline; } .content.tools pre { position:relative; top:-18px; } .navigation { text-align:center; clear:both; } .navigation a { } /* SIDEBAR --------------- */ #sidebar { padding:0 0 24px 24px; font-size:0.9em; position:relative; top:-24px; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACFJREFUeNpi+o8Ezp8/z4DMAZIMyBwoH84B8ZE5QAAQYAA9XUfocadZGAAAAABJRU5ErkJggg==') repeat-y; /* [TODO] fix; this is dupl. from header */} /*#sidebar h3 { font-size:20px; font-family:'proxima-nova-condensed', 'arial narrow'; font-weight:700; text-transform:uppercase; margin-top:24px; }*/ #sidebar h6 { margin-top:24px; } #sidebar li { padding:6px 0; line-height:1.25em; } #sidebar li:last-child { border-bottom:0; } #sidebar a { text-decoration:none; background:#e8e8e8; /*padding:0 4px;*/ } #sidebar a:hover { background-color:#bddbe3; } #sidebar a.hire { background:orange; color:#000; padding:0 8px 0 4px; } #sidebar a.hire:hover { color:white; background:#fb0; } /* #sidebar section::after { content:''; position:absolute; right:0; bottom:0; width:0; height:0; border-width:20px 9px 0 0; border-color:transparent #fff; border-style:solid; } #sidebar .featurebox { padding:5px; position:relative; margin-bottom:2em; } #sidebar .featurebox > div { background:url('images/bg_about_us.png') right bottom no-repeat; padding:15px; border-width:1px 0 0 1px; border-color:#fff; border-style:solid; } #sidebar h2 { padding:0 0 10px 0; } #sidebar .featurebox p { font-size:0.8em; margin:0; } #sidebar .featurebox p a { color:#404749; font-style:italic; padding-right:12px; background:url('images/arrow.png') 100% 50% no-repeat; } #sidebar .tabbox { position:relative; padding:5px; background:#eceded; } #sidebar .tabtitle { background:#fff url('images/bg_lines.png'); margin-bottom:1px; padding:12px 0 5px 20px; } #sidebar .tabbox .tabcontent { background:url('images/bg_tabbox.png') right bottom no-repeat; padding:15px 15px 10px; border-width:1px 0 0 1px; border-color:#d9d9d9; border-style:solid; } #sidebar .tabbox div.tabcontent li { padding:10px 0; border-bottom:1px dotted #aaa; } #sidebar .tabbox div.tabcontent li:last-child { border-bottom:0; } */ /* FOOTER --------------- */ footer { padding-bottom:80px; } footer h6, footer p { padding-left:74px; } footer p { margin:0; } footer h6 span { padding:0 2px; } footer h6 a { color:#000; text-decoration:none; padding:3px 8px 1px 4px; background:#e8e8e8; } footer h6 a:hover { background:#bddbe3; color:#404749; } #footnote { width:600px; padding-left:74px; border-top:1px solid #e8e8e8; color:#999; position:relative; font-size:13px; line-height:18px; margin-top: 64px; padding-top: 24px; } #footnote a.back { position:absolute; left:6px; top:28px; padding-left:16px; height:20px; line-height:24px; background:url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAaABADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEGBAf/xAAlEAAABgEDBAMBAAAAAAAAAAABAgMEBRESABMxBgcUIRVBYVH/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A7PKSDaKjnMg9Pg3bJGVUN+AF+v3TjH7eUj2z9mfcbuUyqpm/pRCw1Bd62k3KdNLMopMpGKKJ3j9wofEBImAmBMA5EREL4r0Fj70+yjWbjOmEWUqmU7JVEjtg4TPkG2oAGFMQ5AQEb4+xofWgt52O+Xg5GM3dnzGqrfcxywzKJbqwur4vRBR3xEHHRm7veG1Sb7mOOeBQLdWNXXF63aNB/9k=') no-repeat; } /* -------------------------------------------------------------- PAGE STYLES -------------------------------------------------------------*/ /* IDEAS (BLOG) ---------------- */ /* wes' experiments */ .filter { padding:32px 0; background:#eee; } .filter form { margin:0 15px; } #articles { padding:32px 0; } #articles .featured { width:680px; float:left; } #articles .newest { font-size:12px; } #articles h3 span { text-transform:uppercase; } #articles article { padding:10px 0; padding-right:30px; width:auto } #articles article h3 { padding-bottom:2px; } #articles article img { float:right; padding:0 0 8px 8px; } #articles article h6 { padding-bottom:8px; } #articles .newest article { border-bottom:1px dotted #c5c5c5; } #articles article.brief { padding-left:24px; padding-right:24px; background:#F8F8F8; margin-bottom:16px; } /* --------------------------------------------------------- MEDIA & PRINT --------------------------------------------------------- */ @media only screen and (min-width: 480px) { /* Style adjustments for viewports 480px and over go here */ } @media only screen and (min-width: 768px) { /* Style adjustments for viewports 768px and over go here */ } @media print { * { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; } a, a:visited { color:#444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border:1px solid #999; page-break-inside:avoid; } thead { display:table-header-group; } tr, img { page-break-inside:avoid; } img { max-width:100% !important; } @page { margin:0.5cm; } p, h2, h3 { orphans:3; widows:3; } }