/* Saforian.com styles zoom:1 used for hasLayout and self-clear floats in IE5-7 * html hack targets IE5-6 only */ /* --- Formatting --- */ body { color:#666; font:normal .75em/1.5em verdana,arial,helvetica,sans-serif } p, address, ul, ol, li, dt, dd, td, th { line-height:1.5 } th, b, strong { font-weight:bold } i, cite { font-style:italic } sup, sub { font-size:75% } table, tr, td, th /* IE5 font fix */ { font-size:100% } /* Links */ a { text-decoration:none } a:link { color:#07d } a:visited { color:#09f } a:hover, a:active { text-decoration:underline } a.bullet /* Plus bullet */ { padding:0 0 0 17px; background:url("../images/bullet_plus.gif") no-repeat 0 .3em } a.showmore /* More link */ { margin-left:.7em; padding:1px } /* Paragraphs */ p { margin:0 0 1.4em } address { font-style:normal; margin:0 0 1.4em } blockquote { margin:0 10px 1.2em; padding:0 } .small, small { font-size:92% } .big, big { font-size:130% } .aligncenter { text-align:center } .alignright { text-align:right } .highlight { color:#000 } em /* Highlight */ { padding:2px 3px; background-color:#ffc; font-style:normal } .error { color:#ba1d00; font-weight:bold } .intro { margin-bottom:1em; color:#666; font:normal 21px/1.3 Georgia,"Times New Roman",serif } .intro em { color:#000; padding:0; background-color:#fff } /* Images */ a img { border-style:none } .floatleft /* Floating images */ { float:left; margin:0 8px 8px 0 } .floatright { float:right; margin:0 0 8px 8px } img.icon /* Document icons */ { display:inline; margin-right:3px; padding-left:6px; vertical-align:middle } /* Separators */ hr { color:#fff; background-color:#fff; height:1px; margin:1.2em 0; padding:0; border-width:0; border-top:1px dotted #d0d0d1; overflow:hidden } * html hr /* IE6 fix */ { margin:0 0 1em } *:first-child+html hr /* IE7 fix */ { margin:0 0 1em } hr.highlight { border-top-color:#aa0e07 } /* Headings */ h1, h2, h3, h4, h5, h6 { color:#000; margin:0 0 .9em; padding:0; font:normal 140%/1.2 Georgia,"Times New Roman",serif } h1 { font-size:208%; margin-bottom:.7em } /* 25px */ h2 { font-size:150% } /* 18px */ h3 { font-size:134% } /* 16px */ h4 { font-size:117% } /* 14px */ h5 { font-size:109% } /* 13px */ h6 { font-size:109%; margin-bottom:.2em } h1.highlight, h2.highlight, h3.highlight, h4.highlight, h5.highlight, h6.highlight { color:#b81c14 } /* Lists */ ul { margin:0 0 1.4em; padding:0; list-style-type:none } ul li, ol li ul li { margin:0 0 .7em; padding:0 0 0 17px; background:url("../images/bullet_plus.gif") no-repeat 0 .3em } ul ul { margin:5px 0 2px 2px } ol { margin:0 0 1.4em 33px; padding-left:0 } ol li, ul li ol li { margin-bottom:.6em } dl { margin:0 0 1.4em } dt { display:block; margin:1em 0 0; padding:0; font-weight:bold } dd { margin:1px 0 0; padding:0 } /* Forms */ form { margin:0; padding:0 } input, select, textarea { font-family:verdana,arial,helvetica,sans-serif; color:#444; font-size:100%; vertical-align:middle } textarea { width:99% } label { vertical-align:middle } /* Layout tables */ table { margin:0 0 1.1em; padding:0; border-width:0; border-collapse:collapse; border-spacing:0; empty-cells:show; table-layout:auto } td { padding:0 6px 6px 0; vertical-align:top } /* Data tables */ table.data { width:100%; margin-bottom:1.6em } table.data caption { padding:0 0 5px; text-align:left; font-weight:bold; font-size:100% } table.data th { padding:5px 7px; border:1px solid #fff; vertical-align:top; background-color:#999; color:#fff; text-align:left } table.data td { padding:6px 7px; border:1px solid #fff; vertical-align:top } /* Row gap */ table.data tr.break td { border-top:2em solid #fff } /* Alternating row colors */ .even, .even td { background-color:#e5e5e5 } /* --- Layout --- */ .hide, .hide * { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden } .clear { clear:both } /* Body wrappers */ body { margin:0; padding:0; background:#a31200 url("../images/back_body.jpg") repeat-x 50% 0 } #wrappertop { width:988px; margin:60px auto; padding-top:15px; background:url("../images/back_wrapper_top.png") no-repeat 50% 0 } #wrapperbottom { padding-bottom:25px; background:url("../images/back_wrapper_bottom.png") no-repeat 50% 100% } #wrapper { zoom:1; position:relative; padding:13px; background-color:#f5f5f5 } #wrapper:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } * html #wrappertop, * html #wrapperbottom /* IE6 PNG fix */ { background-image:none } /* Inner frame backgrounds (to eventually be replaced with CSS3 border-image) */ #frame { background:url("../images/back_frame_middle.png") repeat-y; border:1px solid #fff } #frametop { zoom:1; background:url("../images/back_frame_top.png") no-repeat } #framebottom { background:url("../images/back_frame_bottom.png") no-repeat 0 100% } #portfolio #framebottom { background:url("../images/back_frame_tallbottom.png") no-repeat 0 100% } /* - Header - */ #header { zoom:1; position:relative; z-index:80; border-bottom:1px solid #a80905 } #header:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } #logo { position:absolute; z-index:90; left:45px; top:-14px } #logo img { display:block } /* Navigation */ #navigation { zoom:1; float:right; margin:0 8px 0 0; padding:0; list-style-type:none } #navigation:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } #navigation li { float:left; margin:0 0 0 -1px; padding:0; background:url("../images/nav_sep.gif") no-repeat 100% 54% } #navigation li#nav-contact { background-image:none } #navigation li a /* Using sprites */ { display:block; height:57px; margin:0 1px; background-repeat:no-repeat; background-position:50% 0; padding:0 22px; text-indent:-9999px; overflow:hidden; text-decoration:none; cursor:pointer } #navigation li.active, #navigation li#nav-contact.active, #navigation li:hover, #navigation li#nav-contact:hover, #navigation li.hover, #navigation li#nav-contact.hover { background:url("../images/nav_back.gif") repeat-x } #navigation li.active a, #navigation li a:hover, #navigation li.hover a { margin:0; border:1px solid #ececec; border-width:0 1px; background-position:50% -57px } #navigation li#nav-who a { width:85px; background-image:url("../images/nav_who.gif") } #navigation li#nav-what a { width:86px; background-image:url("../images/nav_what.gif") } #navigation li#nav-how a { width:97px; background-image:url("../images/nav_how.gif") } #navigation li#nav-portfolio a { width:57px; background-image:url("../images/nav_portfolio.gif") } #navigation li#nav-news a { width:37px; background-image:url("../images/nav_news.gif") } #navigation li#nav-contact a { width:75px; background-image:url("../images/nav_contact.gif") } /* Subnavigation */ #subnav { zoom:1; position:relative; margin:-21px -27px 1em -21px; border-bottom:1px solid #e5e5e5; padding:0 27px .7em; text-align:right } #subnav a { padding:3px; white-space:nowrap } /* - Content area - */ #contentwrapper { zoom:1; position:relative; z-index:1; min-height:588px; padding:30px 0 34px 0; border-top:1px solid #fff; background:url("../images/back_content_top.png") no-repeat } #contentwrapper:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } #content { zoom:1; position:relative; z-index:90; margin:0 16px 1em 390px } #content:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } .who #content { margin-left:400px; } #home #content { margin-left:350px; } /* Boxes */ .confirmation { border:1px solid #eee; background-color:#f8f8f8; padding:10px 10px 1px } .box { zoom:1; border:1px solid #ededed; background-color:#fff; padding:6px } .box:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } .box.links .floatleft { display:block; margin-right:16px; margin-bottom:0 } .box.links .floatright { margin-bottom:0 } /* Columns */ .columns { zoom:1; margin:0 0 1.2em } .columns:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } .columns .col { float:left; width:47%; margin-right:3% } .columns .first-child { margin-right:0; border-right:1px dotted #d0d0d1; padding-right:2.9% } .columns .last-child { float:right; width:47%; margin-right:0 } .three .col /* Three columns */ { float:left; width:30.3%; margin-right:3% } .three .first-child { margin-right:1.3%; border-right:none; padding-right:0 } .three .middle-child { margin-right:1.4%; padding:0 2% 0 2.4%; border-left:1px dotted #d0d0d1; border-right:1px dotted #d0d0d1 } .three .last-child { margin-right:0; padding-left:1.4% } .four .col, .four .first-child /* Four columns */ { float:left; width:23.4%; margin:0 1% 0 0; padding-right:1%; border-right:1px dotted #d0d0d1 } .four .first-child { margin-left:0 } .four .last-child { margin-right:0; padding-right:0; border-right:none } * html .four .col /* IE6 double-margin fix */ { display:inline } /* - Graphical sidebar - */ #art img.top /* Anchor to top */ { position:absolute; z-index:40; top:0; left:0 } #art img.lowertop /* Underneath gradient */ { position:absolute; z-index:40; top:15px; left:0 } #art img.bottom /* Anchor to bottom */ { position:absolute; z-index:40; bottom:0; left:0 } #art img.overlap /* Push higher */ { z-index:80 } #art img.offset /* Offset away from gradient */ { position:absolute; z-index:40; top:14px; left:13px } /* - Footer - */ #footer { clear:both; padding:1.5em 20px; font-size:92%; color:#fff } #footer p { margin:0; text-align:right } #footer p#copyright { float:left; text-align:left; margin-right:1em } #footer a.button { margin-left:8px; padding:9px 11px; background:url("../images/footer_button.png") no-repeat 50% 50%; white-space:nowrap; color:#fff } #footer a.button:hover { color:#ff8; text-decoration:none } * html #footer a.button /* IE6 PNG replacement */ { zoom:1; width:82px; height:22px; padding:7px 0 0; text-align:center; cursor:pointer; vertical-align:middle; background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/footer_button.png'); } #footer a { color:#fff; } /* --- Homepage --- */ /* News list */ #newslist h2, #project h2 { border-bottom:1px dotted #4C6C04; padding-bottom:10px; } #home h2 { font-size:175%; margin-bottom:.7em; color:#4c6c04 } #home h2 span { display:inline-block; padding:20px 168px 0 0; background:url("../images/back_homenews_heading.png") no-repeat top right } #home .columns { margin-bottom:0 } #home .columns .col { background-color:#fff; padding:4px } #home .columns #newslist { border-right:none; } /*{ border-top:1px dotted #aa0e07; padding-top:1.1em; border-right:none; font-size:92% }*/ .descrip { margin:0 6px; } #home #morelinks div { border-width:0; background:url(../images/bg-homemore.gif) no-repeat 0 100%; padding-bottom:31px; } #home #morelinks p { margin-bottom:0; padding:4px 8px; background-color:#f1f1f1; font-size:92% } #home #morelinks p.readmore { background:#f1f1f1 url(../images/bg-homereadmore.gif) no-repeat 100% -2px; } /* --- Contact Form --- */ #signupemail { width:212px; margin-right:4px; vertical-align:middle } /* --- News Twitter --- */ #contentwrapper.news /* Tall artwork */ { min-height:644px } dl.news dt { clear:both; float:left; width:2.6em; margin:0 .8em .9em 0; padding:5px 3px 6px; background-color:#bc2305; color:#fff; text-align:center; line-height:1.2; font-weight:normal } dl.news dt span.month { display:block; text-align:center; font-size:100% } dl.news dt span.day { display:block; text-align:center; font-size:132% } dl.news dd { margin:0 0 .2em 4em; font-size:110%; color:#555; line-height:1.2 } dl.news dd:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } dl.news dd.first { margin:0 0 .2em; font-size:170%; color:#b91b00; line-height:1.3 } /* --- Portfolio --- */ #portfolio #content { margin-left:21px; margin-right:27px } /* Description */ #portfolio #description { float:left; width:362px; margin-bottom:2em } * html #portfolio #description /* IE6 margin fix */ { margin-bottom:0 } /* Links list */ #portfolio #links { margin-bottom:1.4em; border:2px solid #ededed; padding:2px 6px; font-size:11px; line-height:1.4 } #portfolio #links a { zoom:1; position:relative; margin-right:1px; padding:2px 1px 2px 16px; background:url("../images/bullet_plus.gif") no-repeat 1px 50%; white-space:nowrap } #portfolio #links a.pdf { padding-left:18px; background-image:url("../images/bullet_pdf.gif") } #portfolio #links a.enlarge { padding-left:25px; background-image:url("../images/bullet_enlarge.gif") } /* Services list */ #portfolio #services { font-size:92% } #portfolio #services h2 { display:none } #portfolio #services li { zoom:1; display:inline; margin-right:9px; padding:2px 0 2px 17px; background:url("../images/bullet_check.gif") no-repeat 0 .2em; line-height:1.1; white-space:nowrap; color:#b81c14 } /* lATEST pORTFOLIO */ #featuredprojects .portline { clear:both; border-style:none; width:914px; height:26px; background:url(../images/hr-portfolio.gif) no-repeat; margin:0; padding:0; } #featuredprojects .project { width:192px; float:left; margin:12px 18px; } #featuredprojects .project img { margin:10px auto; display:block; } #featuredprojects .project p { text-align:right; margin:0; padding:0; } #featuredprojects .project p a { padding-left:17px; background:transparent url(../images/bullet_plus.gif) no-repeat scroll 0 0.3em; } .projectwrap { display:block; width:192px; background:url(../images/bg_portlearnmore.gif) no-repeat; } .projectwrapbtm { display:block; width:174px; padding:5px 18px 5px 0; background:url(../images/bg_portlearnmorebtm.gif) no-repeat bottom; } /* - Image gallery - */ #portfolio #gallery /* Non-JS */ { float:right; width:517px; height:392px; overflow:hidden; margin:8px 0 2em; border:4px solid #ccc } #portfolio #gallery-wrapper { position:relative; float:right; width:525px; margin:8px 0 2em; padding-bottom:59px; background:url("../images/back_gallery_shadow.jpg") no-repeat 50% 100% } #portfolio #gallery-innerwrapper /* Scrolling area mask */ { position:relative; z-index:10; height:392px; border:4px solid #ccc; overflow:hidden } #portfolio #gallery-wrapper ul#gallery /* This is the scrolling area; Overwrite non-JS values */ { position:absolute; top:0; left:0; width:9999px; overflow:visible; margin:0; padding:0; list-style-type:none; float:none; height:auto; border-width:0 } #portfolio #gallery li { float:left; margin:0; padding:0; background-image:none } #portfolio #gallery li img { display:block; width:517px; height:392px } #gallery-caption { display:none; position:absolute; z-index:20; bottom:73px; left:14px; width:467px; margin:0; padding:10px; background:url("../images/back_caption.png") repeat; color:#fff; line-height:1.2; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } #portfolio #gallery-next { position:absolute; z-index:15; top:185px; right:-20px; padding:0 6px 6px 0; background:url("../images/arrow_shadow.png") no-repeat } #portfolio #gallery-previous { position:absolute; z-index:15; top:185px; left:-14px; padding:0 6px 6px 0; background:url("../images/arrow_shadow.png") no-repeat } #portfolio #gallery-next img, #portfolio #gallery-previous img { display:block; padding:3px 0 1px 2px; background-color:#b81c14; width:32px; height:30px } #portfolio #gallery-next img { padding:3px 1px 1px } #portfolio #gallery-next:hover img, #portfolio #gallery-previous:hover img { background-color:#09f } #gallery.enlarge img /* Enlarge */ { /* cursor:-moz-zoom-in */ } /* - Other projects - */ #otherprojects { clear:both; background:url("../images/line_portfolio.gif") no-repeat 100% .1em } #otherprojects h2 { margin-bottom:.5em } #otherprojects dt { font-weight:normal; line-height:1.3; padding:4px 8px 0 20px; background:url("../images/bullet_gray.gif") no-repeat 8px .75em } #otherprojects dd { margin-top:0; font-size:92%; line-height:1.3; padding:0 8px 8px 20px } #otherprojects dt.active, #otherprojects dd.active { background-color:#eee } /* - Client list - */ #clientlist { position:relative; clear:both; background:url("../images/line_portfolio.gif") no-repeat 100% .1em } #clientlist h2 { margin-bottom:.5em } #clientlist h3 { margin:.3em 0 .8em; color:#333; font-size:112% } #clientlist ul { margin-bottom:.8em } #clientlist ul+h3 { margin-top:1.4em } #clientlist li { margin-bottom:.4em; padding-left:12px; background:url("../images/bullet_gray.gif") no-repeat 0 .4em; font-size:92%; line-height:1.4 } /* Filter */ #clientlist #additional { position:absolute; top:4px; right:10px } #clientlist #additional li { float:left; margin:0 4px 0 0; padding:0; background:none } #clientlist #additional a { display:block; padding:3px 5px; background:url("../images/back_caption.png"); color:#fff } #clientlist #filter { margin:1.5em 0; padding:8px; background-color:#f2f2f2 } #clientlist #filter:after /* Clear after floats */ { content:"."; display:block; height:0; clear:both; visibility:hidden } #clientlist #filter .col { border-right-width:0 } #clientlist #filter ul { float:left; width:16.1%; margin:0 .5% 0 0; padding:0 } #clientlist #filter li { background:none; margin:0 0 .3em; padding:0 } #clientlist #filter a { padding-left:17px; background:url("../images/bullet_nocheck.gif") no-repeat 0 .2em; color:#a80905 } #clientlist #filter a.on { background-image:url("../images/bullet_check.gif");