/* MAIN CSS DOCUMENT */ /* RESET BROWSER DEFAULTS */ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td { margin:0; padding:0; vertical-align:top; text-align:left; } table { border-collapse:collapse; border-spacing:0; } fieldset,img,abbr { border:0; } address,caption,cite,code,dfn,h1,h2,h3,h4,h5,h6,th,var,i,b { font-style:normal; font-weight:normal; } a { text-decoration:none; color:#2ebffd; } a:hover { color:#999; } ul, li { list-style:none; } /* OVERALL LAYOUT */ html { height:100%; overflow-y:scroll; -webkit-text-size-adjust: none; } body { height:100%; font:100%/1.25em Helvetica,Arial,sans-serif; color:#444; margin:0; padding:0; background: url(/2008/images/bg-side.gif) repeat-y top left; } /* WRAPPER */ #wrapper {} /* SIDE */ #side { width:234px; background-color:#666; float:left; } /* LOGO */ #side #logo { height:129px; width:234px; background-color:#2ebffd; position:absolute; } #side #logo a { line-height:0; display:block; margin-left:28px; } #side #logo a.logo_cf { height:22px; } #side #logo a.logo_change { height:10px; padding-top:42px; margin-bottom:38px; } /* NAV */ #side #nav { padding: 26px 28px 14px 28px; background: #f4f4f4 url(/2008/images/bg-nav.gif) repeat-x top left; margin-top:129px; } #side #nav .mn { font-weight: bold; color: #222; font-size: 1.125em; } #side #nav .mn li a { color: #222; } #side #nav .mn .sel a, #side #nav .mn li a:hover { color: #2ebffd; } /* SUB NAV */ #side #nav .sn { margin:0 0 0.25em 18px; font-size:0.825em; } #side #nav .sn li a { color: #222 !important; } #side #nav .sn li.sel a, #side #nav .sn li a:hover { color: #2ebffd !important; } /* QUICK LINKS */ #side #quicklinks { padding: 25px 44px 14px 28px; background: url(/2008/images/bg-quicklinks.gif) repeat-x #666 top left; } #side #quicklinks h3 { font-weight: bold; color:#999; font-size:0.875em; margin-bottom:0.5em; } #side #quicklinks p { font-size: 0.875em; } #side #quicklinks .mn { font-weight: bold; font-size: 0.875em; } #side #quicklinks .mn li { background: url(/2008/images/plus.gif) no-repeat center right; } #side #quicklinks .mn li a { color: #333; } #side #quicklinks .mn .sel a { color: #2ebffd; } #side #quicklinks .mn li a:hover { color: #2ebffd; } #side #quicklinks .mn li a span { font-size:.75em; } /* CONTENT */ #container { border-left: solid #fff 1px; margin-left: 234px; } #contentFSFlash { position: absolute; bottom: 0; left: 235px; height: 100%; overflow: hidden; } #content { width: 705px; float:left; } /* BANNER */ #content #contentBanner { position:relative; height:139px; background:url(/2008/images/bg-content-div-shaddow.gif) repeat-x bottom; margin-bottom:14px; } #content #contentBanner h1 { color:#999; position:relative; top:98px; } #content #contentBanner img.shadowFade { display:block; position:absolute; bottom:0; right:0; } /* GALLERY BROWSER */ #content #gallery_h { width:705px; height:510px; margin-bottom:1.25em; background:url(/2008/images/bg-content-div-shaddow.gif) repeat-x bottom; position:relative; } #content #gallery_h img.shadowFade { display:block; position:absolute; right:0; bottom:0; } /* TYPE */ #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content ul, #content ol, #content p { font-size:0.875em; padding: 0 28px 0 28px; margin-bottom:1.25em; } #content p, #content ul { font-size:0.75em; } #content ul ul { font-size:1em; padding-left:0px;} #content p.collapse { margin-top:-1.25em; } #content h1 { color:#222; font-size:1.125em; font-weight:lighter; } #content h2 { font-size:1.125em; color:#2ebffd; margin-bottom:1em; margin-top:1em; font-weight:lighter; } #content h2 span { color:#444; } #content h3 { color:#222; font-weight:bold; } #content strong.title { font-size:1.125em; color:#222; font-weight:bold; } #content ul { display:block; font-weight: bold; } #content ul li { padding-left:30px; background: url(/2008/images/bullet.gif) 10px 7px no-repeat; } #content strong { font-weight:bold; } #content span small { font-size:.65em; } #content p small { font-size:.85em; } #content pre { padding:10px; background-color:#efefef; } /* BIG INTRO TEXT */ #content p.big { color:#2ebffd; font-size:1.8em; line-height:1em; font-weight:lighter; margin: .75em 0; } /* HR */ #content .hr { margin: 1.25em 0 1.25em 28px; clear: both; width: 631px; height: 1px; border-bottom:1px solid #ddd; } #content .c1 .hr { width:426px; } /* LINKS */ #content a.plusLink { width:162px; display:block; font-weight:bold; background:url(/2008/images/plus-blue.gif) no-repeat right center; color:#222; } #content a.plusLink:hover { color:#2ebffd; } /* SIDE COL TOP */ #content .sideColTop { padding-top:1.7em; background:url(/2008/images/shadow-top.gif) no-repeat top; } /* TESTIMONIAL */ #content p.testimonial { color:#999; } #content p.testimonial_author { color:#999; font-weight:bold; margin-top:-.75em; } #content img.biopic { padding-top:1.75em; } /* work list */ #content .shortDesc { margin-top:-1em; } /* case study */ .caseStudy p { width:482px; } .caseStudy p.big { width:677px; } /* TWO COLUMN LAYOUT */ #content .twoColRow { width:705px; padding-bottom:28px; } #content .twoColRow .c1 { width:482px; float:left; } #content .twoColRow .c1 h1 { color:#222; margin-top:1.25em; } #content .twoColRow .c1 a.work_preview { display:block; line-height:0; padding-left:28px; } #content .twoColRow .c1 a.work_preview img { border:1px solid #222; } #content .twoColRow .c2 { margin-left:498px; } #content .twoColRow .c2 h1, #content .twoColRow .c2 h2, #content .twoColRow .c2 h3, #content .twoColRow .c2 h4, #content .twoColRow .c2 h5, #content .twoColRow .c2 h6, #content .twoColRow .c2 ul, #content .twoColRow .c2 ol, #content .twoColRow .c2 p { padding-left:0; } #content .twoColRow .c2 h2 { margin:0; padding-bottom:3px; } #content .twoColRow .c2 ul { padding:0; margin:0; } #content .twoColRow .c2 .desc { padding:28px 0; } #content .twoColRow .c1 .twoColRow { width:482px; } #content .twoColRow .c1 .twoColRow .c1 { width:178px; float:left; } #content .twoColRow .c1 .twoColRow .c2 { width:178px; margin-left:248px; } /* PROJECT NAV */ #content #projectNav { position:relative; padding-bottom:0.5em; padding-top:17px; width:200px; height:53px; background:url(/2008/images/browse-bg.jpg) no-repeat; } #content #projectNav span { font-size:0.875em; font-weight:bold; color:#999; line-height:10px; padding:0 10px; margin:0; } #content #projectNav a#projectNavPrev {} #content #projectNav a#projectNavNext {text-align:right;} /* THREE COLUMN LAYOUT (CLIENTS, CONTACT) */ #content .threeColRow { width:705px; padding-bottom:28px; } #content .threeColRow .c { width:234px; float:left; } /* SOCIAL */ #socialSidebar {position:fixed; height:16px; left:28px; bottom:36px;} ul.social, #content ul.social { margin: 10px 0; height: 16px; } ul.social li, #content ul.social li {list-style: none; display:inline; float:left; padding:0; background:none;} .iconBtn {display:block; width:16px; height:16px; background: url(/2008/images/social-icons.png) -16px -16px no-repeat; margin:0 6px 0 0; text-indent:-6000px;} .iconTwitter {background-position:0 -16px;} .iconTwitter:hover {background-position:0 0;} .iconFacebook {background-position:-16px -16px;} .iconFacebook:hover {background-position:-16px 0;} .iconLinkedin {background-position:-32px -16px;} .iconLinkedin:hover {background-position:-32px 0;} .iconFlickr {background-position:-48px -16px;} .iconFlickr:hover {background-position:-48px 0;} .iconRSS {background-position:-64px -16px;} .iconRSS:hover {background-position:-64px 0;} /* FOOTER */ #footer { width: 705px; border-left: 1px solid #fff; margin:17px 0 20px 234px; font-size: 0.65em; background: url(/2008/images/bg-content-div-shaddow.gif) repeat-x; position:relative; } #footer img.shadowFade { display:block; position:absolute; right:0; } #footer ul { padding: 28px 28px 17px 28px; } #footer ul li { color: #999; float:right; margin-left:14px; } #footer a { color: #999; } #footer a:hover { color: #2ebffd; } /* BLOG */ #content .blog .c2 h3, #content .blog .c2 ul, #content .blog .c2 li { padding:0; margin:0; } #content .blog .c2 h3 { color:#999; font-weight:normal; } #content .blog .c2 ul { margin-bottom:1.25em; } #content .blog .c2 ul li { background:none; } #content .blog form#searchform input[type=text] { width:110px; } #content .blog .post { margin-bottom:28px; } #content .blog .navigation { font-size:0.875em; padding: 0 28px 0 28px; margin-bottom:1.25em; } /* MAP */ #map { width:705px; height:450px; margin:-18px 0;} /* CLEARFIX */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix {display: block; } * html .clearfix { height: 1%; }