/* CSS generated by SiteManager at 05:00pm 25/03/2011 - do not edit this file directly */ /* CSS FOR Silktide Studios - Screen Stylesheet AUTHOR: Alison Springall (alisonspringall@silktide.com) / Silktide Studios - All Rights Reserved CREATED: 07/09/2009 */ /* GLOBAL STYLES ----------------------------------------------------------------------------------------------------------------------------- */ body { background-color: #222222; font: normal 80% georgia, 'times new roman', time, serif; text-align: center; padding: 0; margin: 0 auto; } hr { height: 1px; background: transparent; color: #e8e8e8; border: 0; margin: 5px 0; } form, table { background: transparent; font-size: 1.0em; color: #535353; } legend { font-size: 1.4em; color: #b40202!important; } fieldset { border: 1px solid #e8e8e8 !important; margin: 20px 10px 0; } .tablestyle { border-collapse: collapse; } .tablestyle td, .tablestyle th { vertical-align: top; padding: 5px 5px 5px 0; } .tableborder td, .tableborder th { vertical-align: top; padding: 5px; border: 1px solid #e8e8e8; } .clear { height: 0; clear: both; font-size: 0.1em; line-height: 0.1em; padding: 0; margin: 0; } .right { float: right; } .left { float: left; } .widthwrapper { width: 100%; } .padding { padding: 20px; } #accessibility { display: none; } /* HEADINGS ----------------------------------------------------------------------------------------------------------------------------- */ h1 { font: normal 3.1em georgia, 'times new roman', time, serif; text-transform: lowercase; color: #222; padding: 0; margin: 0 0 30px 20px; } h2 { font: normal 2.8em georgia, 'times new roman', time, serif; color: #222; padding: 0; margin: 15px 0 15px 20px; } h3 { font: normal 1.4em georgia, 'times new roman', time, serif; color: #333; padding: 0; margin: 15px 0; } h1 + h2 { margin-top: 0; } #home h1 { position: relative; z-index: 10; font-size: 4.2em; line-height: 1.2em; text-transform: none; margin-top: 0; } h1 span, h2 span { color: #b30100; } .fullwrapper h2 { font-size: 1.4em; margin-left: 0; } .inner h2 { font-size: 1.4em; margin-left: 0; } .col h2 { font-size: 1.4em; margin-top: 10px; margin-left: 0; } /* TEXT ----------------------------------------------------------------------------------------------------------------------------- */ p { font-size: 1.0em; line-height: 1.5em; color: #333; margin: 0 0 20px; } li { font-size: 1.0em; line-height: 1.5em; color: #333; margin: 0 0 10px; } .largetext { font-size: 1.4em; } .smalltext { font-size: 0.85em; } .intro { font-size: 1.4em; line-height: 1.3em; } ul { padding: 0 0 0 20px; margin: 20px 10px; } ol { margin: 1.5em 0; } /* LINKS ----------------------------------------------------------------------------------------------------------------------------- */ a:link { color: #b40202; text-decoration: underline; } a:visited { color: #b40202; text-decoration: underline; } a:hover { color: #b40202; text-decoration: none; } a:active { color: #b40202; text-decoration: none; } /* IMAGES ----------------------------------------------------------------------------------------------------------------------------- */ img { border: 0; } /* LAYOUT ----------------------------------------------------------------------------------------------------------------------------- */ .wrapper { width: 946px; min-height: 80px; text-align: left; margin: 0 auto; } /* TOPBAR LINKS - Consistent across all Silktide Sites ----------------------------------------------------------------------------------------------------------------------------- */ #silktidelogo { float: right; margin-top: 12px; margin-right: 0; } #toplinks { height: 40px; overflow: hidden; background-color: #222222; font: normal 12px georgia, 'times new roman', times, serif; text-align: center; padding: 0; border-bottom: 1px solid #fff; margin: 0 auto; } #toplinks .wrapper { width: 904px; min-height: 40px; background: none !important; padding: 0 21px; } #toplinks p { display: none; font: normal 12px/12px helvetica, verdana, arial, sans-serif; text-transform: lowercase; color: #656565; padding-top: 13px; margin: 0; } #toplinks p a:link, #toplinks p a:visited { text-decoration: none; color: #c4c4c4; padding: 0 5px; } #toplinks p a:hover, #toplinks p a:active { color: #fff; } #toplinks p a.selected:link, #toplinks p a.selected:visited { font-weight: bold; color: #fff; } #toplinks p a.selected:hover, #toplinks p a.selected:active { color: #c4c4c4; } /* HEADER ----------------------------------------------------------------------------------------------------------------------------- */ #header { height: 100px; position: relative; background: #e3e3e3 url(/templatefiles/header_bg.jpg) repeat center top; margin: 0 auto; } #header .wrapper { width: 914px; background: transparent url(/templatefiles/shadow.png) no-repeat top center; padding: 0 11px 0 21px; margin: 0 auto; } #header #sitelogo { position: absolute; top: 39px; } /* NAVIGATION ----------------------------------------------------------------------------------------------------------------------------- */ ul.mainnav { float: right; padding: 0; margin: 0; } ul.mainnav li { float: left; font: bold 1.0em helvetica, verdana, arial, sans-serif; list-style-type: none; text-transform: lowercase; color: #373737; padding: 0; margin: 0 0 0 10px; } ul.mainnav li a:link, ul.mainnav li a:visited { float: left; text-decoration: none; color: #373737; padding: 45px 10px 10px; border: 0; margin: 0; } ul.mainnav li a:hover, ul.mainnav li a:active, ul.mainnav li.selectedoption a:link, ul.mainnav li.selectedoption a:visited { background-color: #b40101; color: #fff; } /* CONTENT ----------------------------------------------------------------------------------------------------------------------------- */ #contentwrapper { min-height: 400px; background-color: #ffffff; margin: 0 auto; } .content { width: 946px; float: left; position: relative; background: transparent url(/templatefiles/shadow2.png) no-repeat top center; padding: 30px 0; border-top: 1px solid #fff; } .noshadow { background-image: none; } .fullwrapper { width: 924px; clear: both; padding: 11px 1px 0 21px; border: 1px solid #e8e8e8; border-width: 0 1px; margin: 0 auto 30px; } #home .fullwrapper { position: relative; z-index: 0; overflow: auto; } .colwrapper { width: 946px; clear: both; background: #fff url(/templatefiles/colwrapper_bg.jpg) repeat-y center top; padding: 0; margin: 0 auto; } .col { width: 254px; min-height: 178px; float: left; padding: 11px; margin: 0 19px 0 20px; } .col:hover { background-color: #f3f3f3; cursor: pointer; } .nohover:hover { background-color: transparent; cursor: auto; } .col p { color: #777777; } .divider { height: 15px; clear: both; padding: 0; /*border-bottom: 1px solid #e8e8e8;*/ margin: 0 20px 0; } .inner { float: left; background-color: #f6f6f6; padding: 20px 0 10px 0; margin-left: 20px; } .half { width: 432px; float: left; margin-right: 43px; } .first { width: 397px; padding-left: 35px; } .last { margin-right: 0 !important; } .inner .last { width: 397px; padding-right: 35px; } .first h2 { margin-top: 0; } .video { margin: 24px 0; } /* HOME ----------------------------------------------------------------------------------------------------------------------------- */ .screen { width: 604px; height: 487px; position: relative; float: right; background: transparent url(/templatefiles/macbook.jpg) no-repeat right top; margin-bottom: 0; margin-right: -1px; } .screenimg { display: block; position: absolute; right: 0; top: 40px; } .quote { width: 360px; position: absolute; left: 0; top: 20px; } .quote h2 { font-size: 2.0em; line-height: 1.35em; position: relative; z-index: 10; margin: 0 0 30px 20px; } .quote h2 .quoteopen { position: absolute; left: -24px; top: -2px; } .quote h2 .quoteclose { position: relative; top: 9px; } .cite { position: absolute; left: 0; bottom: 0; } .cite p { font-size: 1.2em; color: #353535; margin-left: 20px; } .cite p strong { color: #888; } .blog { width: 276px; padding: 11px 0; } .blog .title { display: none; } .blog .name { font: normal 1.35em georgia, 'times new roman', time, serif; color: #333; padding: 0; margin: 15px 0 5px; } .blog p { margin: 0; } .blog p#moreblog { margin-top: 15px; } /* WORK ----------------------------------------------------------------------------------------------------------------------------- */ #work .half { width: 385px; margin-right: 45px; } #work .last { width: 490px; text-align: right; margin-right: 0 !important; } .gallery { display: none; /*margin: 20px 0 20px -2px;*/ } img.col2-nudge { margin-top: -77px; } img.col3-nudge { margin-top: -38px; } img.col6-nudge { margin-top: -77px; } /* APPROACH ----------------------------------------------------------------------------------------------------------------------------- */ #approach .content { position: relative; z-index: 0; } #approach .half { position: relative; z-index: 1; margin-left: 30px; margin-right: 0; } #approach #people { margin-left: 50px; } #approach h2 { background: transparent url(/templatefiles/border_bg.jpg) no-repeat left bottom; font-size: 6.0em; font-style: italic; margin: 0 0 20px; } #approach #people h2 { position: relative; z-index: 2; padding: 30px 0 10px 130px; } #approach #process h2 { position: relative; z-index: 2; background-position: 25px bottom; line-height: 0.9em; padding-bottom: 5px; margin-left: -25px; } #approach #peoplepic { position: absolute; left: -110px; top: -20px; z-index: 2; } #approach #processpic { position: absolute; right: -25px; top: 40px; z-index: 3; } #approach #ampersand { position: absolute; left: -145px; top: 15px; z-index: 10; } #approach .inner { width: 330px; float: none; padding: 0 15px 20px 40px; margin-top: 100px; } #approach .textwidth { width: 290px; position: relative; z-index: 3; } /* ABOUT ----------------------------------------------------------------------------------------------------------------------------- */ .video { width: 430px; cursor: pointer;} .video img { display: block; padding: 2px; border: 1px solid #e8e8e8;} #facebox .content { width: 430px!important; } .staffblock { width: 130px; height: 190px; float: left; font-size: 0.85em; margin: 0 20px 10px 0; } .last { margin-right: 0 !important; } /* FOOTER ----------------------------------------------------------------------------------------------------------------------------- */ #footer { background-color: #222222; font: 0.95em helvetica, verdana, arial, sans-serif; color: #DDD; padding: 10px 0; margin: 0 auto; } #footer ul { width: 140px; float: right; padding: 0; margin: 0; } #footer ul li { font-size: 0.9em; line-height: 1.7em; text-align: right; list-style-type: none; padding: 0 0 0 20px; margin: 0; } #footer #nibbler { float: right; margin-top: 56px; } #footer p { font-size: 0.9em; color: #888; margin: 30px 0 0 30px; } #footer #sslogo { margin: 12px 0 0 30px; } #footer a:link, #footer a:visited { color: #fff; text-decoration: none; } #footer a:hover, #footer a:active { color: #fff; text-decoration: underline; } #footer .btn-twitter { vertical-align:middle; margin-left:5px; } #footer .btn-facebook { vertical-align:middle; margin-left:5px; } /* BF4 ----------------------------------------------------------------------------------------------------------------------------- */ .bf4 .quote { width: 400px !important; } .bf4 .quote p { width: 310px; font-size: 1.4em; line-height: 1.6em; padding: 0 0 0 25px; }