/* ----------------------------------------------- Stream Spain - Base Stylesheet Author: Finn Beales Version: 2009.01 ----------------------------------------------- */ @import url("reset.css"); /* Reset */ /* Dimensions for the page/grid are as follows: Body Width @ 850px Gutter @ 5px Content Width @ 840px 4 Columns @ 152px Gutter @ 20px */ /* Typography ----------------------------------------------- */ h1 { font-size:30px; } h2 { font-size:24px; } h3 { font-size:18px; } h4 { font-size:14px; } h5 { font-size:12px; } .big { font-size:14px; line-height:20px; } .sub-head { font-size:10px; color:#666;} a { color:#33ccff; text-decoration:none;} a:hover { color:#336699;} p { letter-spacing: .5px; margin-top:9px; } /* Grid Dimensions ----------------------------------------------- */ .col-2 { width:324px; float:left; margin-right:20px; } .col-3 { width:496px; float:left; margin-right:20px; } .col-4 { width:668px; float:left; } .nomargin { margin:0; } /* Layout ----------------------------------------------- */ body { width:100%; margin:0 auto; font-family: "Geneva", "Lucida Grande", Helvetica, Arial, sans-serif; color: #ccc; font-size:12px; line-height:1.5em; background:#333 url(../img/bg-page.gif) repeat-x top; } body#homepage { background:#000 url(../img/bg-page-homepage.jpg) repeat-x top; z-index:2; } body#inside { background:#000 url(../img/bg-page-insidepage.jpg) repeat-x top; z-index:2; } div.container { width:840px; margin:0 auto; padding:0 5px; } div#header { float:left; width:840px; } h1#branding { float:left; width:110px; height:57px; background-image:url(../img/branding-stream-spain.gif); text-indent:-9999px; } h1#branding:hover { cursor:pointer; } ul#nav-main { float:right; margin-top:23px;} ul#nav-main li { float:left; margin-left:32px;} ul#nav-main li.active a { color:#66ccff;} ul#nav-main li a { font-size:14px; color:#fff; text-decoration:none; } ul#nav-main li a:hover { color:#66ccff;} div#staff { float:left; } ul.staff-list { clear:left; float:left; margin:0 0 5px 5px; } ul.staff-list li { float:left; width:90px; height:93px; margin-right:5px; background-color:#fff; border:1px solid #ccc; text-align:center;} ul.staff-list li.end { margin-right:0; } div.fullPanel { background-color:#3b5066; width:632px; border:1px solid #18222c; margin:0 0 30px 0; padding:18px; clear:left; float:left;} div.miniPanel { width:281px; float:left; } div.miniPanel img.vid { float:left; margin-right:18px; } p.tick { background:url(../img/tick.gif) left top no-repeat; padding-left:30px; color:#fff; } div#footings { clear:both; width:100%; margin:0 auto; padding:36px 0 100px 0;} div#footer { width:840px; margin:0 auto; padding:0 5px; } ul#footer-links { float:left; width:840px; margin-top:15px; } ul#footer-links li a { color:#fff; } ul#footer-links li a:hover { text-decoration:underline; } ul#footer-links li { margin-right:20px; padding-right:28px; } ul#footer-links li.copyright { float:left;} ul#footer-links li.stream-uk { float:right; padding-right:26px; margin-left:20px; background:url(../img/flag-spain.gif) right no-repeat;} ul#footer-links li.stream-spain { float:right; padding-right:26px; margin-left:20px; background:url(../img/flag-spain.gif) right no-repeat;} ul#footer-links li.stream-uk { float:right; padding-right:26px; margin-left:20px; background:url(../img/flag-uk.gif) right no-repeat;} ul#footer-links li.stream-italy { float:right; padding-right:26px; margin-left:20px; background:url(../img/flag-italy.gif) right no-repeat;} /* Homepage ----------------------------------------------- */ div#sales { clear:left; float:left; width:840px; margin-top:20px; } div#sales-copy { float:left; width:324px; margin-top:15px;} div#sales-copy h2.intro { color:#fff; margin-bottom:0; text-transform:uppercase; font-size:14px;} div#sales-copy h2 { color:#fff; margin-top:9px; margin-bottom:13px;} div#sales-copy p { color:#fff;} /* Sales action is the call to action on the homepage... it's currently just a contact button, but would be more useful as a try before you buy button */ div#sales-action { clear:left; float:left; width:135px; height:35px; margin-top:30px; background:url(../img/btn-contact-home.png) top left no-repeat; } div#sales-action:hover { background:url(../img/btn-contact-home.png) bottom right no-repeat;cursor:pointer; } div#sales-action p { color:#fff; font-size:14px; padding-left:15px; padding-bottom:10px; display:block; } /* ul#sales-action li { float:left; width:195px; text-align:center; } ul#sales-action li#phone { margin-right:20px;} */ div#sales-video { float:right; width:486px; margin-left:20px; padding: 10px 0 0 0;} div#further-sales { clear:left; float:left; width:840px; margin-top:40px; } div#further-sales h3 { margin-bottom:27px; } div.sales-block1 { width:324px; float:left; } div.sales-block2 { width:324px; clear:left; float:left; margin-top:20px; } ul#other-products { width:324px; } ul#other-products li.vms { margin-bottom:18px;} ul.client-list { float:left; width:390px; margin:0 0 15px 14px; } ul.client-list li { float:left; width:88px; height:43px; margin-right:10px; background-color:#fff; border:1px solid #ccc; text-align:center;} ul.client-list li:hover { border:1px solid #000; } ul.client-list li.end { margin-right:0; } ul.stretch-list { clear:left; float:left; width:610px; margin:0 0 10px 20px; } ul.stretch-list li { float:left; width:88px; height:43px; margin-right:10px; background-color:#fff; border:1px solid #ccc; text-align:center;} ul.stretch-list li:hover { border:1px solid #000; } ul.stretch-list li.end { margin-right:0; } div#news {float:right; width:496px; padding-bottom:30px;} ul#news-list { width:496px; margin-top:10px; } ul#news-list li { clear:left; float:left; width:496px; margin-bottom:18px;} ul#news-list li.subscribe { margin-bottom:0;} div.post-image { float:left; width:152px; margin-right:20px; } div.post-image img { border:2px solid #333; } div.post-image img:hover { border:2px solid #33ccff; } div.post-copy { float:left; width:324px; } div.post-copy h4 { line-height:22px; } .rss { padding-left:26px; margin-left:20px; background:url(../img/icon-rss.png) left no-repeat; background-position:0, 0;} ul.links-deeper { float:left; width:410px; margin-top:15px;} ul.links-deeper li { float:left; width:195px;} ul.links-deeper li#rss { width:169px; padding-left:26px; margin-left:20px; background:url(../img/icon-rss.gif) left no-repeat;} /* Inside Page: 2 columns ----------------------------------------------- */ div#titles { float:left; width:840px; padding-top:40px;} div#header h1#page-title { float:left; color:#fff; margin-top:-4px; margin-left:10px; line-height:1em;} div#header img#product-icon { clear:left; float:left; margin-top:-8px; margin-right:10px;} div#header h3#phone-number { float:right; color:#fff; text-align:right; margin-top:-12px; margin-bottom:0;} div#header h3#email-address { clear:right; float:right; color:#fff; text-align:right; margin-top:5px; } div#header h3#email-address a { color:#fff; } div#header h3#email-address a:hover { text-decoration:underline; } div#content { clear:left; float:left; width:840px; margin-top:33px; } div#content-sup { float:left; width:152px; margin-right:20px; } div#nav-sup h4 { color:#fff; padding:33px 10px 10px 10px;} ul#nav-list { width:151px; padding:10px 0; } ul#nav-list li a { display:block; padding:2px 10px; color:#ccc; /* background:url(../img/bg-arrow-off.gif) no-repeat 180px 8px; */} ul#nav-list li a:hover { text-decoration:none; background:url(../img/bg-content-sup-a-hover.png) top left no-repeat; color:#fff;} ul#nav-list li.active a { background:url(../img/bg-content-sup-a-hover.png) top left no-repeat; color:#fff;} ul#nav-list li a.pdf { font-size:14px; display:block; margin:15px 0 0 0; padding:10px 10px 2px 35px; color:#ccc; border-top:1px solid #333; background:url(../img/icon-pdf.png) no-repeat; background-position:0 13px; height:35px; } ul#nav-list li a.pdf:hover { color:#999; } ul#nav-list li a.video { font-size:14px; display:block; margin:10px 0 0 0; padding:18px 10px 2px 35px; color:#ccc; border-top:1px solid #333; background:url(../img/icon-video.png) no-repeat; background-position:0 13px; height:35px; } ul#nav-list li a.video:hover { color:#999; } ul#nav-list li a.active { color:#999; } .divine-block {width:496px; padding-right:24px;} .divine-sup {width:320px;} div#content-main { float:left; width:668px; margin-top:21px; padding-top:8px; } div#content-main h2 { width:625px; margin-bottom:20px; color:#fff; line-height:1em;} div#content-main h3 { margin-top:25px; margin-bottom:18px; color:#fff; line-height:24px;} div#content-main h4 { margin:0; color:#fff; } div.video-2col { float:right; margin-left:20px;} ul.staff-mugshots { clear:left; float:left; width:625px; margin-top:20px; margin-bottom:20px;} ul.staff-mugshots li { float:left; width:195px; margin-right:20px;} ul.staff-mugshots li img { float:left; margin-right:10px; border:1px solid #ccc;} ul.staff-mugshots li h5 { color:#ccc;line-height:15px; } ul.staff-mugshots li p.role { font-size:11px; color:#666; line-height:14px; margin-top:3px;} ul.staff-mugshots li.end { margin:0; } ul.feature-list { float:left; margin:0; padding:0;} ul.feature-list li { float:left; margin-bottom:27px; padding-bottom:18px; } .thumbnail { clear:left; float:left; width:76px; margin-right:20px; } .thumbnail-copy { float:left; width:228px; } .thumbnail-mid { clear:both; float:left; width:162px; margin-right:20px; } .thumbnail-mid-copy { float:left; width:486px; } .thumbnail-webcast { float:left; width:130px; margin-right:0; margin-bottom:30px; } .thumbnail-copy-webcast { float:left; width:486px; } ul#client-list li { margin-bottom:45px;} div.col2 ul.feature-list { width:324px; margin-right:20px; float:left; } div.col2 ul.feature-list li { width:324px; border-bottom:1px solid #fff; float:left; } div.sidePanel {margin:36px 0 18px 0; padding:0;} /* Blue side Panel */ div.sidePanel h2 {padding:0 18px 0 18px; margin-top:18px;} div.sidePanel h3 {font-weight:bold; padding:0 18px 0 18px; margin-top:18px;} div.sidePanel h4 {padding:18px 18px 0 18px;} div.sidePanel p.naked {padding:0 18px 0 18px;} ul.case-study-list { float:left; margin-top:18px; } ul.case-study-list li { float:left; margin-bottom:27px; } div#product-tour { padding:18px 0 27px 0; text-align:center; } table.contact-form td { padding:5px; vertical-align:top;} div#form-action { clear:left; float:left; width:175px; height:35px; margin-top:30px; background:url(../img/btn-send-form.png) top left no-repeat; } div#form-action:hover { background:url(../img/btn-send-form.png) bottom right no-repeat;cursor:pointer; } div#form-action p { color:#fff; font-size:14px; padding-left:15px; padding-bottom:10px; display:block; } div.captcha { background-color:#fff; } .round {width: 320px; background-color: #eaeff9; background:#eaeff9 url(../img/bg-round-mid.gif) repeat-y ; margin:36px 0;} .round h3.first-ele {background:transparent url(../img/bg-round-top.gif) no-repeat top left; font-weight:bold; padding:18px 18px 9px 18px;margin:0; } .round h3 {font-weight:bold;} .round ul {list-style:none; margin:0; padding:0;} .round li {padding:0 18px 0 18px;} /* This only applies to the sup menu on the news pages */ .round ul li ul li {margin:0; padding:0;} /* This only applies to the sup menu on the news pages */ .round p {padding:0 18px 0 18px;} .round p.last-ele {padding:0 18px 18px 18px; background: transparent url(../img/bg-round-btm.gif) no-repeat bottom left; margin:0;} /* Inside Page: 3 columns ----------------------------------------------- */ div#content-main-3col { float:left; width:410px; padding-top:8px; margin-top:21px; margin-right:20px; } div#content-main-3col h2 { margin-bottom:20px; color:#fff; line-height:30px; font-weight:normal;} div#content-main-3col h4 { margin-top:25px; margin-bottom:14px; color:#000;} div#content-main-3col img { float:right; margin-left:20px; margin-bottom:9px; border:2px solid #333;} div#content-sup-3col { float:right; width:195px; margin-top:41px; } div#recent-news { margin-top:27px; } div#monthly-archive { margin-top:27px; } div.video-3col { margin:30px 0; } /* Global Super Classes ----------------------------------------------- */ .hide { display:none; } .clear { clear:both; } .left { float: left; margin-right:20px; } .visual .izda{ width:550px; float:left; } .right { float: right; margin-left:20px; } .shunt-down { margin-top:9px; } ul.disc-list { margin:9px 0; padding:0; list-style:none;} ul.disc-list li { padding-left:15px; background:url(/img/bg-bullet.png); background-repeat:no-repeat; background-position:0 6px; }