html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
/*...................... Media Surgery ............................
COLOURS:
Dark Grey : #737B7E
Dark Orange : #EC9030
Light Orange : #F09232
*/
body { font-size: 62.5%; background: url(../images/bg.png) 50% 0; font-family: Helvetica, Tahoma, Arial, sans-serif; }
#wrapper { width:960px; margin:0 auto; }
#topper { height:300px; position:relative; }
#topper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
img#logo { margin:22px 0 0 40px; }
a#logo { margin:22px 0 0 40px; display: block; background: url(/images/logo.png); width: 151px; height: 151px; text-indent: -9999px; }
a:link, a:visited { color:#EC9030 }
a img { border:none; }
/*....................... Nav ......................................... */
#nav { position: fixed; top:190px;}
#nav ul {}
#nav li { padding: 17px 0 17px 20px; width:220px;}
#nav a { text-decoration:none; color: #9aa2a8; font-size: 14px; }
#nav .current { background: #00aaea;}
#nav .current a { color: #fff; font-weight: bold;}
#n-process.current { background: #ed1651 ;}
#n-portfolio.current { background: #FBA919 ;}
#n-what-we-can-do.current { background: #49b84d ;}
#n-journal.current { background: #006AB6 ;}
#n-contact.current { background: #B04861 ;}
#column-1 { float: left; width: 240px;}
#main { float: left; width: 720px; background-color: #fff; padding: 0 0 0 0;}
#main h1 { float: right; font-weight: normal; font-size: 1.5em; color: #aaa; padding-top: 60px;}
.section { padding:100px 0 40px 80px;}
.section h3 { font-size: 1.65em; color: #888; font-weight: normal; padding:5px 0 10px 80px; letter-spacing: 0.5px; }
.section p { color: #888; padding:0 0 25px 80px; line-height: 1.8em; font-size: 1.3em;}
.section a { color: #777; border-bottom: 1px solid #777; text-decoration: none; }
.section-intro { padding-top: 148px;}
.section-intro h3 { padding-bottom: 30px;}
/*........................... Journal ......................*/
.section-journal div { float: left; background-color: #eee; width: 60px; left: -40px; top: -25px; position: relative; padding: 10px; text-align: center; color: #aaa; line-height: 2em; font-size: 0.95em;}
.section-journal a { display: block; margin:0 0 10px 80px; padding-top: 20px; font-size: 1.2em; border: none; text-decoration: underline; }
.section-journal a.view-all { float: right; width: 210px; font-size: 1em; background-color: #006AB6; margin-top: 30px; color: #fff; padding: 15px; text-align: center;}
/*........................... What we do ......................*/
.section-what ul { margin-left: 80px; padding-bottom: 160px;}
.section-what li { float: left; width: 280px; border-bottom: 1px solid #ddd; padding: 10px 0; font-size: 1.2em; color: #666; }
.section-what li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/*........................... Contact Page ......................*/
.screen-reader {
display: block !important;
left: -9999px !important;
position: absolute !important;
top: -9999px !important;
}
.section-contact { padding-bottom: 250px; float: left; }
#c-address { padding-bottom: 30px; border-bottom: 1px solid #ddd;}
.section-contact form { padding-left: 80px;}
.section-contact form div { float: left; width: 240px;}
.section-contact #div-email { padding-left: 78px;}
.section-contact #l-message { clear: both; }
.section-contact label { color: #aaa; padding: 30px 0 10px; display: block; }
.section-contact input { display: block; border: 1px solid #ccc; padding: 5px 0; width: 240px;}
.section-contact textarea { border: 1px solid #ccc; padding: 5px; width: 548px; height: 200px;}
.section-contact #submit { float: right; background-color: #B04861; padding: 15px 0; margin-top: 30px; color: #fff;}
.section h2 { background: #00aaea; padding: 11px 0 13px 80px; color: #fff; font-size: 17px; margin-bottom: 40px;}
.section-process h2 { background: #ed1651; }
.section-what h2 { background: #49b84d; }
.section-portfolio h2 { background: #FBA919; }
.section-journal h2 { background: #006AB6; }
.section-contact h2 { background: #B04861; }
/*....................... Content ......................................*/
#content { width:500px; margin:30px 0 25px 0; float:left; }
#content a { padding:2px; }
#content p { color:#006600; line-height:1.5em; }
#content h1 { color:#666; font-size:1.4em; padding:6px 0; }
#content h2 { padding:5px 0; }
/*....................... Journal Content ......................................*/
#journal-sidebar { float: left; width: 300px; padding-top: 40px;}
#journal-sidebar h2 { font-size: 1.6em; }
#journal-sidebar ul { margin-top: 20px;}
#journal-sidebar li { padding: 10px 0; border-bottom: 1px solid #ddd; }
#journal-sidebar li a { color: #666; }
#journal-content { float: left; width: 640px; background-color: #fff; padding-top: 213px; padding-left: 80px; min-height: 700px;}
#journal-content h1 { font-size: 2em; margin-bottom: 20px;}
#journal-content h2 { margin-top: 15px; }
#journal-content p { color: #666; line-height: 1.6em; font-size: 1.3em; padding-bottom: 30px; }
#journal-content li { color: #666; line-height: 1.6em; font-size: 1.3em; padding: 10px 0 10px 40px; list-style: disc; margin-left: 40px; }
#journal-content code { color: #666; line-height: 1.6em; background-color: #eaeaea; padding: 30px; display: block; font-size: 1.3em; margin-bottom: 20px; }
#journal-content #h1-comments { margin-top: 40px; }
#journal-content #h1-comments-form { margin-top: 40px;}
#journal-content h2 { margin-bottom: 10px; font-size: 1.4em; color: #666;}
#journal-content h3 { font-size: 1.3em; margin-bottom: 5px; }
#journal-content #back { margin-top: 40px; color: #666; display: block; }
#journal-content .big-link { font-size: 1.7em; float:left; color: #888; margin-top: 20px; padding-right: 10px }
#journal-content .summary { margin-top: 40px; }
#screen-reader { display: none;}
#comment_form label { float: left; width: 100px; clear: both; margin-bottom: 10px; padding-top: 7px; font-size: 1.2em;}
#comment_form input { float: left; width: 210px; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px;}
#comment_form textarea { float: left; width: 500px; border: 1px solid #ccc; margin-top: 5px; height: 170px; }
#comment_form .submit-button { margin: 20px 0 60px 100px;}
/*........................... Footer .....................................*/
#footer { clear:both; min-height:200px; margin-top: 200px; background-color: #f0f0f0; border-top: 1px solid #e1e1e1; }
#footer div { width:560px; margin:0 auto; position:relative; padding:80px 0 0 400px; }
#footer p { color: #aaa; padding-bottom: 20px; font-size: 1.3em;}
#footer a { color: #444;}
#footer ul { padding:0; margin:0; max-width:500px;}
#footer li { padding:3px 0; color:#FFF;}
#footer li span { color:#CCC; }