/* Project: CSSKarma Created on: 10/2/09 Author: Tim Wright - www.csskarma.com ------------------------------------*/ /* * Reset browser defaults -----------------------------*/ body,div,dl,dt,dd,ul,ol, li,h1,h2,h3,h4,h5,h6, pre,form,fieldset,p, blockquote,th,td { margin:0;padding:0;} body { line-height:1;color:#222;background:#fff;} h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400;} ol,ul { list-style:none;} caption,cite,code,th { font-style:normal;font-weight:400;} fieldset,img { border:0;} caption,th { text-align:left;} :focus { outline:1px dotted #eee;} table { border-collapse:collapse;border-spacing:0;} hr { border:0;border-top:1px solid #555;margin:0;height:1px;} label, button, input[type="submit"] { cursor:pointer;} /* * General Elements -----------------------------*/ html { text-align:center; } body { background:#f6f6f6 url(../img/bg_header.png) repeat-x 0 0;font:12px/1.3 Tahoma, Arial, Sans-serif; text-align:left; } h1 { font-size:30px; } h2 { font-size:22px;margin:0 0 10px; } h3 { font-size:20px; } h4 { font-size:18px; } h5 { font-size:14px; } h6 { font-size:12px; } p { margin:0 0 15px;line-height:1.8; } p, ul, ol { font-size:12px; } ul, ol { margin:0 0 15px 30px; } ul { list-style:disc; } ol { list-style:decimal; } li { line-height:1.8; } dl { } dd { margin:0 0 20px;line-height:1.8 } dt { font-size:16px; } pre { -moz-border-radius-topleft:7px;-webkit-border-radius-top-left:7px;overflow:auto;padding:10px;background:#e4e4e4;color:#222;width:575px;border:1px solid #ccc;margin:15px 0 30px; } iframe { width:590px; } pre span{color:#888;} blockquote{width:66%;margin:0 auto 25px;border-left:10px solid #ccc;padding:0 15px;} blockquote cite{display:block;padding:5px 0 0;font-style:italic;text-align:right;} /* Archors */ a { color:#036;overflow:hidden;text-decoration:none; } a:hover, a:focus { color:#00509f; } /* * Utility Classes -----------------------------*/ .right { float:right; } .left { float:left; } .clear { clear:both; } .accessibility { position:absolute;top:-9999px;left:-9999px; } .accessibility:focus { position:static; } .formError { color:red; } /* * Layout IDs -----------------------------*/ #branding, #content, #nav, #footer { width:900px;margin:0 auto;position:relative; } /* Branding */ #branding { height:150px; } #branding h1 a { display:block;height:91px;width:305px;background:url(../img/logo.png) no-repeat 0 0; text-indent:-9999px;margin:17px 0 0; } #branding p.tagline { position:absolute;top:-9999px;left:-9999px; } #branding p.slogan { margin:0;text-indent:-9999px;height:30px;width:237px;background:url(../img/slogan.png) no-repeat 0 0; float:right; } /* Navigation */ #nav { top:-65px; } #nav ul { font-size:22px;margin:0;list-style:none; } #nav li { display:inline;margin-right:90px;text-transform:capitalize; } #nav a { text-decoration:none;color:#e3e3e3; } #nav a:hover, #nav a:focus { color:#fff;border-bottom:5px solid #05487a; } /* Search */ #searchform { position:absolute;top:-65px;border:3px solid #05487a;-moz-border-radius:10px;-webkit-border-radius:10px; width:250px;background:#fff;padding:5px;right:0; } #searchform label { position:absolute;top:-9999px;left:-9999px; } #searchform input#q { border:0;display:block;float:left;padding:2px;width:200px;color:#666;font-size:14px; } #searchform button { border:0;text-indent:-9999px;height:20px;width:20px;display:block;float:right; background:url(../img/btn_search.gif); } /* Content */ #content { } #media { height:200px;overflow:hidden;background:#2a2a2a;-moz-border-radius:7px;-webkit-border-radius:7px;padding:10px;margin-top:-65px; } #media ul { margin:0;list-style:none;position:relative; } #media img { float:left; } #media .clear { height:10px; } #media .meta { width:250px;color:#fff;position:absolute;left:600px;top:0; } #media .meta a { color:#e5e5e5;text-decoration:none; } #media .meta a:hover { color:#fff; } #media .meta li { background:#333;margin:10px 0;padding:10px;line-height:1.6;-moz-border-radius-topright:7px; -moz-border-radius-bottomright:7px;-webkit-border-radius-top-right:7px; -webkit-border-radius-bottom-right:7px; } #media .meta li.client { font-size:20px;padding:8px 10px; } #media .meta li.visit { font-size:12px;padding:12px 10px; } #media .nav { position:absolute;right:5px;top:195px; } #media .nav a { display:block;width:8px;height:17px;background:url(../img/media_nav.gif);float:left;margin:0 0 0 5px; text-indent:-9999px; } #media .nav a#prev { background-position:0 0; } #media .nav a#next { background-position:right 0; } #media .nav a#prev:hover, #media .nav a#prev:focus { background-position:0 bottom; } #media .nav a#next:hover, #media .nav a#next:focus { background-position:right bottom; } #welcome { text-align:center;color:#999; } #welcome p { font-size:20px;padding:20px 0;margin:0; } #welcome p a { font-weight:400;color:#666;text-decoration:none;border-bottom:2px solid #777; } #welcome p a:hover { color:#444;border-color:#444; } #writing { width:50%;float:left; } #writing ul { margin:0;list-style:none; } #writing li { clear:both;margin:0;float:left;width:90%;padding:8px; } #writing li a.icon { border:10px solid #e4e4e4;-moz-border-radius:7px;-webkit-border-radius:7px;display:block;height:60px; width:60px;background:#fff url(../img/sprite.jpg) no-repeat 0 0;text-indent:-9999px;float:left; margin:0 10px 0 0;clear:left; } #writing li a.icon:hover { border-color:#d4d4d4; } #writing li.smashing a.icon { background-position:-20px -240px; } #writing li.noupe a.icon { background-position:-82px -241px; } #writing li.wdd a.icon { background-position:-20px -300px; } #writing li.sitepoint a.icon { background-position:-20px -421px; } #writing li.csstricks a.icon { background-position:-21px -361px; } #writing li h3 { line-height:1.2;font-size:16px; } #writing li h3 a { color:#036 } #writing li h3 a:hover, #writing li h3 a:focus { color:#00509f; } #writing li p.article-meta { margin:0 0 35px;color:#777; } #writing li p.article-meta a { color:#777; } #writing li p.article-meta a:hover { color:#444; } #projects { width:49%;float:right; } #projects ul { margin:0;list-style:none; } #projects li { } #projects h3 a { border:10px solid #e4e4e4;-moz-border-radius:7px;-webkit-border-radius:7px;width:400px;display:block; background:#fff url(../img/sprite.jpg) no-repeat 0 0;text-indent:-9999px;height:80px; } #projects h3 a:hover { border-color:#d4d4d4; } #projects li.okaytim h3 a { background-position:0 -80px; } #projects li.fatfold h3 a { } #projects li.sellmaine h3 a { background-position:0 -160px; } #projects p { color:#777;line-height:1.5;padding:0 10px 10px 10px; } /* Portfolio */ .ui-tabs .ui-tabs-hide { display:none; } #portfolio-nav { margin:0;list-style:none;margin:-30px 0 0 0; } #portfolio-nav li { display:inline; } #portfolio-nav a { border:10px solid #e4e4e4;-moz-border-radius:7px;-webkit-border-radius:7px;display:block;text-indent:-9999px; height:75px;width:75px;background:#fff;float:left;margin:5px; } #portfolio-nav a:hover { border-color:#d4d4d4; } #portfolio-nav li.cityallergy a { background:url(../img/icon_cityallergy.png) no-repeat 0 0; } #portfolio-nav li.uscreader a { background:url(../img/icon_reader.png) no-repeat 0 0; } #portfolio-nav li.nr a { background:url(../img/icon_nr.png) no-repeat 0 0; } #portfolio-nav li.delta a { background:url(../img/icon_delta.png) no-repeat 0 0; } #portfolio-nav li.uscglobal a { background:url(../img/icon_uscglobal.png) no-repeat 0 0; } #portfolio-nav li.okaytim a { background:url(../img/icon_okaytim.png) no-repeat 0 0; } #portfolio-nav li.fatfold a { background:url(../img/icon_fatfold.png) no-repeat 0 0; } #portfolio-nav li.usctwitter a { background:url(../img/icon_twitter.png) no-repeat 0 0; } #book #content-main div { clear:both;padding:20px 0 0; } #book #content-main { padding:20px; } #book #content-main div img { border:5px solid #e4e4e4;padding:1px;-moz-border-radius:7px;-webkit-border-radius:7px;margin-bottom:60px; } #book #content-main div img:hover { border-color:#d4d4d4; } #book .portfolio-meta { clear:none;width:44%;position:absolute;top:105px;left:495px; } #book .portfolio-meta h3 { padding:0 0 10px; } #book .portfolio-meta ul { margin:0;list-style:none; } #book .portfolio-meta li { padding:5px 10px;background:#e4e4e4;margin:10px 0;-moz-border-radius:7px;-webkit-border-radius:7px; } #book .portfolio-meta li:hover { background:#d4d4d4; } #book p { background:#f6f6f6; } /* Main content */ #content-main { } .lab #content-main, .errors #content-main, .search #content-main, .contact #content-main, .articles #content-main, .research #content-main { min-height:290px;float:left;background:#fff;margin:-30px 0 20px;padding:20px;width:66%;-moz-border-radius:7px; -webkit-border-radius:7px;-moz-box-shadow:0 0 5px #999;-webkit-box-shadow:0 0 5px #999; } .contact #content-main form ul { margin:0;list-style:none; } .contact #content-main form li { padding:5px 10px; } .contact #content-main form label { display:block;font-size:16px; } .contact #content-main form input, .contact #content-main form textarea{ -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #777;font-size:14px;padding:5px; } .contact #content-main form textarea{ font-family:Tahoma, Arial, Sans-serif; } .contact #content-main button { color:#444;background:#e4e4e4;border:0;font-size:16px;padding:10px;-moz-border-radius:7px;-webkit-border-radius:7px;margin-left:10px; } .contact #content-main button:hover { background:#d4d4d4;color:#252525; } /* Sub content */ #content-sub { background:#fff;width:28%;float:right;margin:-30px 0 0;-moz-border-radius:7px;-webkit-border-radius:7px; } #content-sub h3 { font-size:16px;color:#333;padding:10px 10px 0 10px; } #content-sub ul { margin:0;list-style:none;padding:10px 10px; } #content-sub li { padding:7px 5px;-moz-border-radius:7px;-webkit-border-radius:7px; } #content-sub li:hover { background:#e4e4e4; } .lab #content-sub, .errors #content-sub, .search #content-sub, .contact #content-sub, .articles #content-sub, .research #content-sub { -moz-box-shadow:0 0 5px #999;-webkit-box-shadow:0 0 5px #999;margin-bottom:20px; } /* Site info */ #site-info { clear:both;background:#05487a url(../img/bg_footer.png) repeat-x 0 0;border-top:20px solid #05487a; padding:0 0 20px;text-align:left; } #footer #profiles, #footer #blogfeed, #footer #twitter { width:30%;float:left; } #footer #blogfeed { margin:0 1%; } #site-info h3 { color:#fff;font-size:20px;line-height:50px; } #site-info #profiles ul, #site-info #blogfeed ul { margin:0;list-style:none;font-size:13px; } #site-info #profiles a, #site-info #blogfeed a { color:#fff;padding:5px 5px 5px 35px;display:block;background:#043254;margin:5px;-moz-border-radius:7px; -webkit-border-radius:7px; } #site-info #profiles li a { background-image:url(../img/sprite_social.gif);background-repeat:no-repeat; } #site-info #blogfeed a { padding-left:10px; } #site-info #blogfeed a:hover, #site-info #blogfeed a:focus, #site-info #profiles a:hover, #site-info #profiles a:focus { background-color:#04263f; } #site-info #profiles li.twitter a { background-position:7px -32px; } #site-info #profiles li.facebook a { background-position:7px 8px; } #site-info #profiles li.dopplr a { background-position:7px -73px; } #site-info #profiles li.linkedin a { background-position:7px -112px; } #site-info #profiles li.flickr a { background-position:7px -152px; } #site-info #twitter { margin:15px 0 0 5px;width:300px; } #site-info #twitter img { margin:0 10px 0 0;border:10px solid #043254;-moz-border-radius:7px;-webkit-border-radius:7px;float:left;} #latest_tweet { color:#fff;background:url(../img/bg_quotes_blue.png) no-repeat 0 0;float:right;width:115px;padding:5px 0 5px 5px;} #latest_tweet a { color:#eee;border-bottom:1px solid #eee; } #blogfeed p.error { display:none; }