/* Copyright (c) 2008 Fantastic Thinking | All rights reserved Design & Created by Fantastic Thinking $ Revision date: 09/01/08 */ /* Workspace styles below ------------------------------------------------------------------------ */ * { margin:0; padding:0; } body { background-color: #1c2831; color: #fff; font-family: arial, helvetica, "Lucida Grande", sans-serif; font-size:62.5%; } p, textarea { font-size:1.2em; line-height: 1.5em; color:#fff; margin-bottom: 0.85em; } a img { outline:none; border:0;} .clear { clear:both;} .nomargin { margin:0 !important; } span.amp { font-family: Palatino, "Book Antiqua", serif; font-style:italic; } a, a:active, a:link, a:visited { color: #23bcd9; text-decoration:none; } a:hover { text-decoration:underline; } #content { min-height: 395px; } #content h2 { color: #fff; margin-bottom: 0px;font-size:1.9em} #content h3 { color: #fff; margin: 20px 0 -5px;font-size:1.6em; font-weight:normal;} #content p, #content li { font-size:1.2em; } #content ul { border-bottom:1px solid #466c77; list-style:none;} #content li { padding: 3px 0 3px 12px; border-top:1px solid #466c77; background:url('/media/images/common/bullet.gif') 0 6px no-repeat;} /* Structure ****************************************************** */ #mainwrapper { width: 906px; margin:0 auto; position:relative; } #container { min-height: 450px; } #masthead { width: 800px; margin: 21px 0 10px 45px; } #masthead #logo { margin-top:-10px; } #masthead h1 { margin-top:-10px;overflow: hidden;width:185px; height:123px; background: url('/media/images/fantasticlogo.png') top left no-repeat; } #masthead h1 span { padding-top: 250px; display:block; } #masthead h2 { margin-top: 10px; font-size: 22px; line-height: 1.5em; margin-bottom: 3px; } #masthead p { color: #fff; line-height: 1.4em; } #additionalmasthead { position: absolute; top: 7px; left: 270px; width: 575px;padding-top:20px;} /* Main navigation ****************************************************** */ #nav_main { position: absolute; top: 105px; left: 270px; overflow:hidden; list-style:none; } #nav_main li { float:left; margin:0 15px 0 0; } #nav_main a { float:left; display:block; font-size:1.2em; font-weight:bold; text-decoration:none; color:#23bcd9; } #nav_main a.in { color: #ccc; } #nav_main a:hover { color:#ccc; } /* footer ****************************************************** */ #footer { position: relative; width: 793px; overflow: hidden; padding-left: 18px; margin:0px 0 25px 35px; background: url('/media/images/fantasticfooterb.png') right bottom no-repeat; } #footer .contactusdirect { padding: 0 0 30px 0px; width: 580px;} #footer h3 { margin-top: 0px; color: #fff; font-size: 14px; line-height: 21px; width: 485px; } #footer h3 strong { font-size: 18px;} #footer p { position: absolute; left:18px; bottom:0px; font-size: 10px; color: #62737c; font-style: italic;} /* share links ****************************************************** */ .share { width:112px; background: url('/media/images/sharethis.png') top left no-repeat; padding-left: 65px; margin:28px 0 25px 0px; } .share ul { width:103px; list-style:none; padding:2px 5px; overflow:hidden; } .share li { float:left; padding:0!important; border:none!important; background:none!important; } .share li + li { margin-left:5px; } .share li a { display:block; text-indent:-9999px; } .share li a:hover { opacity:0.6; } .share li a.delicious { width:16px; height:16px; background:url('/media/images/common/icon_delicious.png') no-repeat; } .share li a.digg { width:18px; height:16px; background:url('/media/images/common/icon_digg.png') no-repeat; } .share li a.reddit { width:17px; height:16px; background:url('/media/images/common/icon_reddit.png') no-repeat; } .share li a.facebook { width:16px; height:16px; background:url('/media/images/common/icon_facebook.png') no-repeat; } .share li a.stumbleupon { width:16px; height:16px; background:url('/media/images/common/icon_stumbleupon.png') no-repeat; } /* Homepage ****************************************************** */ #homepage { overflow:hidden; } #homepage h1 { margin-top:0;; } #homepage #mainwrapper { margin:0 50%; width: 1426px;} #homepage #container { width: 1426px; height: 818px; margin:0 -713px; position:relative; } #homepage #masthead { width: 340px; position:absolute; top: 0px; left: 260px; z-index: 2; } #homepage #masthead h2 { font-size: 14px; line-height: 1.5em; margin-bottom: 13px; } #homepage #masthead p { width:290px; } #homepage #nav_main { position: relative; top:20px;left:0; margin-bottom: 50px; } #homepage #footer { position: absolute; top: 460px; height: 70px; left: 260px; z-index: 3; margin-top:0; } #homepage #footer h3 { margin-top: 0px; color: #fff; font-size: 14px; line-height: 21px; width: 485px; } #homepage #footer .contactusdirect { left: 10px; top: 5px; height: 70px;} #latestwork { position:absolute; top:0; left:0; width: 1426px; z-index:0; } #latestwork div a.blocker{ position:absolute; top:0; left:600px; width: 570px; height: 470px; z-index:1000; display:block; background: transparent url('/media/dontsteal.png') top left repeat; } #latestwork div span { display:none;} /* About ****************************************************** */ #about { background: #1c2831 url('/media/images/background_about2.jpg') center 150px no-repeat; } #about #content { min-height: 425px; margin-top:70px; } #about #dialogues { position:absolute; top:445px; left:570px; width:280px; } #about #ethos { position:absolute; top:430px; left:92px; width:240px; } #about #services { position:absolute; top:151px; left:545px; width:270px; } #about #experienced { position:absolute; top:222px; left:46px; width:266px; } #about .tooltip { color: #23bcd9; text-decoration:none; } #about .tooltipbody { background-color: #23bcd9; padding: 8px;font-size:1.2em; line-height: 1.3em; color:#fff; font-weight:bold; width: 190px; } /* Work ****************************************************** */ #work #content { padding-left: 25px; } #work #additionalmasthead { top:32px;} #work ul#logos { list-style: none; background-image:none; border:0; margin-left:5px;margin: 15px 0px;} #work ul#logos li { position: relative;border:0; float: left; margin:10px 0 0 10px; background-image:none; background-color: #162027; padding:0;width: 155px; height:89px; } #work ul#logos li a { border: 1px #1d3742 solid; display:block; width: 153px; height:87px; background: url('/media/images/b_viewwork.gif') bottom right no-repeat; } #work ul#logos li a:hover { background: url('/media/images/b_viewwork_over.gif') bottom right no-repeat;border: 1px #666 solid; } /* multiple links */ #work ul#logos li.multiples { border: 1px #1d3742 solid; display:block; width: 153px; height:87px; background:#162027 url('/media/images/b_viewwork_x2.gif') bottom right no-repeat; } #work ul#logos li .option { display:none;position: absolute; top:0; left:0;background-color: #162027;border: 1px #666 solid;padding:20px 15px;width: 123px; z-index: 150;} #work ul#logos li .option h3 { font-size: 14px; font-weight:bold;margin:0 0 3px;} #work ul#logos li .option span { display:none;} #work ul#logos li .option a { height: auto; border:0; background-image:none; display:block;} /* internal work pages */ #workintro { margin-top: 35px; margin-left: 395px; width: 430px; min-height: 285px;margin-bottom: 45px; } .longerintropls { margin-bottom: 35px; } .smallerintropls { min-height: 195px !important; } #workintro h2 { margin-bottom:5px; } #worklinks { margin-top: 15px; } #worklinks a { margin-right: 15px; padding: 3px 0 3px 0;} #worklinks span { display:none;} a#worklocal { background: url('/media/images/b_arrowdown.png') 5px right no-repeat; height:9px; padding-right:22px;} a#workout { background: url('/media/images/b_arrowright.png') 2px right no-repeat; height:9px;padding-right: 15px;} a#workreturn { float:right; text-align:right; margin-top:-3px;} #worklinkstop { margin-left:30px; } #workcontent { text-align:center; padding-right: 25px;} #euronewsflash { float: left; margin: 2px 40px 0 52px;} p#euronewswork { float: left;} /* casestudy specific */ .hostelbookers { background: #1c2831 url('/media/images/work/hostelbookers/header.jpg') center 75px no-repeat; } .cream { background: #1c2831 url('/media/images/work/cream/header.jpg') center 75px no-repeat; } .amoylucky { background: #1c2831 url('/media/images/work/amoy_lucky/header.jpg') center 105px no-repeat; } .wagonwheelswwe { background: #1c2831 url('/media/images/work/wagonwheelswwe/header.jpg') center 105px no-repeat; } .euronewsaudi { background: #1c2831 url('/media/images/work/euronews_mpu/header.jpg') center 65px no-repeat; } .mccaintasty { background: #1c2831 url('/media/images/work/mccain_tasty/header.jpg') center 20px no-repeat; } .evianwimbledon { background: #1c2831 url('/media/images/work/evian_wimbledon/header.jpg') center 110px no-repeat; } .dreamgarage { background: #1c2831 url('/media/images/work/chevy_dreamgarage/header.jpg') center 110px no-repeat; } .transformers { background: #1c2831 url('/media/images/work/chevy_transformers/header.jpg') center 100px no-repeat; } .grimtales { background: #1c2831 url('/media/images/work/domestos_grimtales/header.jpg') center 110px no-repeat; } .easycarwebsite { background: #1c2831 url('/media/images/work/easycar_optimisation/header.jpg') center 30px no-repeat; } .gillettevenus { background: #1c2831 url('/media/images/work/gillette_venus/header.jpg') center 0px no-repeat; } .icewhole { background: #1c2831 url('/media/images/work/icewhole/header.jpg') center 130px no-repeat; } .simpsonsedm { background: #1c2831 url('/media/images/work/simpsonsedm/header.jpg') center 90px no-repeat; } .wolseley { background: #1c2831 url('/media/images/work/wolseley/header.jpg') center 140px no-repeat; } .comfort { background: #1c2831 url('/media/images/work/comfort/header.jpg') center 110px no-repeat; } .duracellpowerpix { background: #1c2831 url('/media/images/work/duracell_powerpix/header.jpg') center 90px no-repeat; } .gillettem3 { background: #1c2831 url('/media/images/work/gillette_m3/header.jpg') center 90px no-repeat; } .gillettem3 #workintro { margin-bottom: 0px; } /* Join ****************************************************** */ #join #additionalmasthead{ top:7px;} #join #content { margin-top: 30px;} #join #intropicture { text-align:center; margin-bottom: 20px; } #join #joinintro { width: 490px; float: left; margin-left: 52px; } #join #joinapply { width: 260px; float: right; margin-right: 55px;} #join #joinapply h3 { margin-top:6px; } #join #joinapply ul { margin: 5px 0 10px; } /* Contact ****************************************************** */ #contact #content { margin-top: 30px; padding:0 45px;} #contact #additionalmasthead { top:32px;} #contact #address { width: 490px; float: left; } #contact #contactdetails{ width: 290px; float: right; } #contact .getintouch span{ width: 75px; display:block; float: left; } /* We like ****************************************************** */ #welike #additionalmasthead { top:32px;} #welike #content { padding: 20px 0 20px; margin-top:0px; margin-left: 40px; min-height: 395px; width:493px; float: left;z-index:1;} #welike #content h2 { color: #fff; margin-bottom: 5px;font-size:16px; } #welike #content h3 { color: #fff; margin: 20px 0 4px;font-size:13px; font-weight:normal;} #welike #smallcolumn ul { border-bottom:1px solid #314c54;width: 255px; list-style:none;} #welike #smallcolumn li { padding: 3px 0 3px 12px; border-top:1px solid #314c54; background:url('/media/images/common/bullet.gif') 0 6px no-repeat;} #welike #introtext { padding: 15px 40px ; } #welike #introtext h2 { margin-bottom:0;padding-bottom:0; } /* Tumblr */ #welike .tumblr_posts { list-style:none; } #welike .tumblr_posts li{ background-image:none; border: 0; } #welike .tumblr_post { background-color: #162129; margin-bottom: 35px; position: relative; padding: 25px 45px; } #welike .tumblr_post h2 { font-family: arial, sans-serif; font-weight:bold; background-color: #44a3e2; color: #fff !important; margin: 0px 0px -5px 0px; padding:5px !important; } #welike .tumblr_post h2 a { color: #fff; } #welike .tumblr_photo_post img { width: 400px;padding:0 0px; margin-bottom: 5px;} #welike .tumblr_photo_post { position:relative; } #welike .tumblr_photo_post div.tumblr_caption h2 { position: absolute; top:35px; left:45px; } #welike .tumblr_photo_post div.tumblr_caption p { text-align:left; margin-top: 5px; margin-bottom: 10px !important; } #welike .tumblr_photo_post p { margin-bottom: -2px !important; padding-bottom:0px !important; } #welike .tumblr_title { font-size:16px; font-family: arial, sans-serif; font-weight:bold; background-color: #44a3e2; color: #fff !important; margin: 0px 0px 5px; padding:5px !important; } div.tumblr_caption, div.tumblr_caption p { font-size: 13px !important; line-height: 18px !important;} /* rhs column */ #welike #smallcolumn { margin-top: 20px; float:right; width: 245px; margin-right: 90px; } #welike #smallcolumn h3 { color: #fff; margin: 20px 0 4px;font-size:14px;} #welike .smlchunk { margin-bottom: 45px; } #welike .smlchunk p, .smlchunk form label { font-size: 12px; font-style: italic;line-height: 16px; } #welike .rssicon { float:left; width: 24px;margin: -7px 4px 0 0;} #welike #thankyou { width: 450px; padding: 0 0 0 6px;} #delicious-posts-fantasticthinking .sidebar-title {display:none;} /* newsletter form */ .smlchunk form { margin: 10px 0 -10px; } .smlchunk form div { clear:both;margin-bottom: 3px;} .smlchunk form label { display:block; margin: 0px 0 3px;padding-top: 2px; float:left; width: 50px;} .smlchunk form label.error { padding-left: 0px; width: 130px; color: #fff; font-weight: bold; margin-bottom: 3px; } .smlchunk form input { border: 0; padding: 3px; background-color: #23bcd9; width: 185px; } .smlchunk form #submit { width:117px; height:20px; background-color: transparent; padding:0; margin-top:5px; border:0;} #welike .share { margin-left: 10px; } /* other social chunks */ #welike li.delicious-post { font-size: 12px; white-Space:nowrap;font-style: italic;line-height: 16px;overflow:hidden;display:block; width: 245px; text-overflow: ellipsis;} #flickr_badge_uber_wrapper { margin-left: -10px; } #flickr_badge_wrapper { padding:10px 0 10px 0;} .flickr_badge_image { width: 75px; float: left; margin:0 0 9px 10px; } /* IE specific ****************************************************** */ .ie #homepage #masthead h2 { font-size: 14px; } .ie #masthead h2 { font-size: 23px; line-height: 1.4em; margin-bottom: 13px; } .ie #nav_main { top: 125px; } .ie #homepage #footer .contactusdirect { padding: 0; } .ie #content li { padding: 2px 0 2px 12px; } .ie #masthead #logo { margin-top:0px; } .ie #about { background: #1c2831 url('/media/images/background_about2.jpg') center 120px no-repeat; } .ie #about #dialogues { top:452px; left:580px; width:280px; } .ie #about #ethos { top:420px; left:102px; width:230px; } .ie #about #services { top:171px; left:550px; width:270px; } .ie #about #experienced { top:215px; left:46px; width:266px; } .ie .share ul { margin-top:0;padding-top:0; } .ie #about #additionalmasthead { top: 40px; } .ie #join #additionalmasthead { top: 40px; } .ie #work #additionalmasthead { top: 62px; } .ie #welike #additionalmasthead { top: 62px; } .ie #contact #additionalmasthead{ top: 62px; } .ie #workintro { margin-top: 20px; } .ie a#workreturn { margin-top:-20px;} .ie #welike .tumblr_post{ margin-bottom: 35px; padding: 20px 45px 15px; } .ie #flickr_badge_uber_wrapper { margin-left: 0px; } .ie .flickr_badge_image { margin:0 0 6px 6px; } /* IE 6 specific */ .ie6 .flickr_badge_image { margin:0 0 5px 5px; } .ie6 #welike #content { margin-left: 10px; } .ie6 #welike #smallcolumn{ width: 245px; margin-right: 60px; margin-top:40px;} .ie6 #welike .tumblr_photo_post div.tumblr_caption h2 { left:0px; } .ie6 #homepage #nav_main{ margin-bottom: 60px; margin-top: 20px; } .ie6 #latestwork div a { background: transparent url('/media/dontsteal.gif') top left repeat;} .ie6 #masthead h1 span { display:none; } .ie6 #work ul#logos { margin-left:20px; } .ie6 #work ul#logos li.multiples { height:88px;overflow: hidden; background:#162027 url('/media/images/b_viewwork_x2.gif') 69px right no-repeat; } .ie6 #work ul#logos li { height:90px; } .ie6 #work ul#logos li .option { width: 121px; overflow: hidden;} .ie6 #work ul#logos li .option a { height: auto; border:0; background-image:none !important; width: 150px; display:block;} .ie6 #masthead h1 { background-image: url('/media/images/fantasticlogo.gif'); } .ie6 #footer { background: url('/media/images/fantasticfooter.gif') right bottom no-repeat; } .ie6 .share { background-image: url('/media/images/sharethis.gif'); } .ie6 a#worklocal { background-image: url('/media/images/b_arrowdown.gif'); } .ie6 a#workout { background-image: url('/media/images/b_arrowright.gif'); } .ie6 #nav_main { margin-bottom: 60px; } .ie6 #about #content { height: 400px; } .ie6 .share li { margin-right: 5px; } .ie6 #work #content { padding-left: 0px;margin-top:20px; padding-top: 0; } .ie6 #workintro { margin-top: 0px; margin-left: 422px; height: 285px; } .ie6 #worklinkstop { margin-left:50px; } .ie6 #join #intropicture{ margin-top:0px; } .ie6 #join #joinintro { width: 460px; margin-left: 25px; } .ie6 #join #joinapply { width: 210px; margin-right: 55px;} /* Firefox specific */ .gecko a#workreturn { margin-top:-20px;}