/* @style Main Stylesheet for HQ @site http://citrusfreshdesign.com @version Main @media screen @date 2010-01-23 @lastmodified 2010-01-23 16:40 @author Jesh [at] Citrusfresh Design ____ ____ _________ ....________/\ \\ \ _________ ____ ___/\ \.................. .../\ \\___\\ \___/\ \\ \\ \\ ____\................. ...\ \ __ \ __/_\ \\ __ \\ \\ \\ \___/_................ ....\ \ \ \__\\ \\ ___\\ \ \__\\ \\ \\ \............... .....\ \ \/ _/_\ \\ \ _/_\ \/_/\ \ \\ \\_____ \.............. ......\ \ \_\ \\ \\ \\ \\ \...\ \ \\ \ ____\ \............. .......\ \ \\ \\ \\ \...\ \ \\ \............ ........\ \________\\___\\_______\\___\...\ \________\\________\........... .........\/___ ____//_ //_______//___/___ \/_______ //__ _____/........... ............../\ \ ________/\ \\ \\ \................. ..............\ \ __\\ \\ __ \\ ____\\ \_____........... ...............\_\ \_/_\ __ \\ \_\ \\ \___/_\ \.......... .............../\ \\ \ \__\\ \\ \\ _ \......... ...............\ \___ _\\ \...\ \ _____\\_____ \\ \\ \........ ................\/___\ \/ \ \...\ \ \____// ____\ \\ \\ \....... ................../\ \\ \ \...\ \ \\ \\ \\ \...... ..................\ \______\\ \___\...\ \________\\________\\___\\___\..... ...................\_______/ \/___/....\/________//________//___//___/..... .᡼o. Web Interface Design and Front-end Development .o¼¡á. @copyright Copyright(c) 2010, CitrusFresh Design @license Creative Commons Attribution 3.0 License http://creativecommons.org/licenses/by/3.0/ You are free to share or mix it up -- just mention me. */ /* @group FONTS @note Generated by fontsquirrel.com. Based on the work of Paul Irish. ----------------------------------------------------------------------- */ /* Handled by Typekit @link http://typekit.com */ /* @group RESETS @link http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ @link http://html5doctor.com/html-5-reset-stylesheet/ ----------------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } body { line-height:1; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:'';content:none; } a { margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent; } ins { background-color:#ff9;color:#000;text-decoration:none; } mark { background-color:#ff9;color:#000;font-style:italic;font-weight:bold; } del { text-decoration:line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000;cursor:help; } table { border-collapse:collapse;border-spacing:0; } /* tables still need 'cellspacing="0"' in the markup */ hr { display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0; } input, select { vertical-align:middle; } /* @note ======================================================================= @colordef #fff; White (background) @colordef #000; Black (foreground) ======================================================================= @affected Name a browser version for a bugfix or workaround. @bugfix Use to define CSS Bugs. @tested Note which browsers a section has been tested with. @todo Create a todo list on the fly. @valid True or False, to flag the validity of CSS. @workaround Use to flag a workaround. */ /* @group GENERAL STYLES (Body, Links, Headings, Other Elements) ----------------------------------------------------------------------- */ body { color:#555;font:62.5%/2.2em Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; background:url(images/bg.png) center; } .logo { margin-top: -50px;position:absolute;z-index: 1; } h1 { font-size:6.6em;line-height:.8em;font-weight:bold; text-align:center;text-transform:lowercase;margin-bottom:7px; } h2 { color:#00a4e4;font-size:1.4em;font-weight:normal; text-transform:uppercase;text-align:center;margin-bottom:30px; } h3 { font-size:1.4em;color:#00a4e4;margin:2em 0 1em; } a { color:#00a4e4;text-decoration:none; -webkit-transition: text-decoration .2s linear; -moz-transition: text-decoration .2s linear; } a:hover { text-decoration:underline; -webkit-transition: text-decoration .2s linear; -moz-transition: text-decoration .2s linear; } li, p { position:relative;list-style-type:none;margin-bottom:15px;text-align:justify; } li { font-size:1.5em; } p { font-size:1.2em; } ol li { list-style-type:decimal;font-size:1.2em;margin:0 0 10px 35px;color:#333; } li a span { display:block;position:absolute;height:100px; left:5px;top:10px; background-color:rgba(255,255,255,.3); -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; } li a:hover span { background-color:rgba(255,255,255,0); -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; } li a img { margin:5px 0 0; border:5px solid #3f3f3f; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; } li a:hover img { border-color: #00a4e4; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; } ins, *:target { background:rgb(198,219,228);background:rgba(0,164,228,.1);text-decoration:none; } mark { background:rgb(198,219,228);background:rgba(0,164,228,.1);font-style:italic;font-weight:bold; } del { text-decoration:line-through; } ::-moz-selection { background:rgba(0,164,228,.1); } ::selection { background:rgba(0,164,228,.1); } /* @group HELPER STYLES (Forms, Warnings and Errors, Consistent Items) ----------------------------------------------------------------------- */ /* Forms */ form { text-align: left; } label { float:left;width:9em;font-weight:bold;cursor:pointer; } label.text { line-height:3em; } form div { clear:left;font-size:1.1em;margin-bottom:1em; } input, textarea { width:13em;font:inherit;padding:0 .4em;vertical-align:middle; } input { height:2.5em;line-height:2.5em } textarea { height:10em;line-height:1.5;padding:.5em } input.checkbox { width:auto;height:auto;padding:0;line-height:normal; } .checkboxes label { float:none;width:auto;font-weight:normal;line-height:normal; } .checkboxes ul { margin:-2.5em 0 3em 13em;font-size:.7em } .checkboxes .checkbox { margin:-.5em .8em 0 0 } button { margin-left:7em;padding:.5em 1em; } /* Helpers */ div.wrap { width:960px;margin:0 auto 0;padding-top:100px;position:relative; } .group:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } .hide { display: none; } .img-link img { border:5px solid #3f3f3f; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; } .img-link:hover img { border-color: #00a4e4; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; } .caption { font-size:.8em; } .signature { font-family:cursive;font-size:3em; } /* @group PAGE STRUCTURE (Headers, Footers, Navigation) ----------------------------------------------------------------------- */ #home header { display:block;width:100%;height:178px; } #home header .wrap span { display:block;width:505px;height:505px;position:absolute;left:-145px;top:-80px; background: url(images/high-lite.png) 50% no-repeat; } #centered { height:450px;width:350px; margin:100px auto 0; } aside { width:280px;float:left;padding-bottom:100px; } #home article { width:640px;float:right; } #email section { width:135px;display:block; } #email li { width:100%;text-align:left; } .col { width:300px;margin:2.7em 0 0 2em; } #email { width:290px; } .fl { float:left; } .fr { float:right; } .fl, .fr { display:inline; } /* that darn IE6 */ /* @group PAGE SPECIFIC COMPONENTS ----------------------------------------------------------------------- */ #home aside h1, #home aside h2 { text-align: left; } #web li, #email li { font-size:1.2em; } #web li a, #email li a { display:block;color:#888; } #web li span { width: 290px; } #email li span { width: 125px; } #web li a:hover, #email li a:hover { text-decoration:none; } /* @group OVERRIDES ----------------------------------------------------------------------- */ @-webkit-keyframes starburst { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } #home header .wrap span { -webkit-animation-name: starburst; -webkit-animation-duration: 40s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }