/* ### Oi Oi! Having a look around are you? ### */ body { font-size: 76%; font-family:Arial, Helvetica, sans-serif; color:#535666; } /* ---- Lees Clearer ---- */ .clearer {clear:both; line-height:1px; height:1px; font-size:1px;} /* ---- Generic Link Styles ---- */ a, a:visited {color:#009ae2; text-decoration:none; border-bottom:1px #009ae2 dotted;} a:hover, a:focus {color:#000; text-decoration:none; border-bottom:1px #000 dotted;} /* ---- Generic Heading Styles ---- */ h1 {font-size:3.2em; margin-bottom:13px; color:#009AE2; font-weight:normal;} h1 span {color:#333; font-size:0.5em;} h1.headermainheading {margin:10px 0 15px; font-size:3.5em;} h2 {font-size:1.3em; margin-bottom:13px; color:#009AE2; font-weight:normal;} h2.pink, h2.green, h2.blue {font-weight:bold; font-size:1.5em; border-bottom:1px #bcbcbc solid; padding:0 0 9px 0; margin:0 0 11px 0; font-weight:normal;} h2.pink {color:#e50067;} h2.green {color:#b1ca00;} h2 span {display:block; color:#000000; font-size:0.8em; font-weight:normal;} h3 {font-size:1.3em; margin-bottom:8px; color:#000; font-weight:normal;} h3.blocked {display:block; padding:0 0 5px 0; color:#009AE2; font-weight:normal; margin:0 0 8px 0; border-bottom:1px dotted #A8A392;} h4 {font-size:1.2em; margin-bottom:8px; color:#000; font-weight:normal;} h5 {font-size:1.2em; margin-bottom:8px; color:#009AE2; font-weight:normal;} strong {color:#3D3F4B;} /* ---- Paragraph Styles ---- */ p {margin:15px 0; line-height:1.8em;} p.readmore {padding:0 0 0 20px; background-image:url(/img/icons/readmore.png); background-position:left center; background-repeat:no-repeat;} /* ---- General classes ---- */ .orange{color:#DC5A15;} .grey {color:#CCCCCC;} .left {float:left; width:49%;} .right {float:right; width:49%; text-align:right;} .imgright {float:right; margin:0 0 5px 15px;} .imgleft {float:left; margin:0 15px 5px 0;} /* ---- Generic Form Styles ---- */ .inlineform {} .inlineform li {display:inline;} .normalform {width:100%; padding:0 !Important;} .normalform li {width:100%; clear:both; float:left; padding:10px 0px; list-style:none !Important;} .normalform label {display: inline-block; line-height: 1.5em; vertical-align: top; float:left; width: 18em; padding:0px 5px 0px 0px;} .normalform label span {display: block; font-size:0.9em;} .normalform em {font-weight: bold; font-style: normal; color: #f00;} .forminput {width:220px} .formselect {width:220px} .forminputdate {width:190px;} input[type=text], input[type=password] {padding:3px; font-size:1.8em;} textarea {padding:3px;} input[type=button], input[type=submit] {padding:3px 10px; font-size:1.3em; cursor:pointer;} /*--- Awesome buttons ---*/ .awesome, .awesome:visited {background: #222 url(/img/alert-overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none;-moz-border-radius: 5px; -webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: relative;cursor: pointer;} .awesome:hover { background-color: #111; color: #fff; border-bottom-style:solid !Important;} .awesome:active { top: 1px; } .small.awesome, .small.awesome:visited { font-size: 11px; padding:0;} .awesome, .awesome:visited, .medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; } .green.awesome, .green.awesome:visited {background-color: #A4BB00;} .green.awesome:hover {background-color: #819300;} .blue.awesome, .blue.awesome:visited {background-color: #0082D9;} .blue.awesome:hover { background-color: #007d9a; border-bottom-color:#007d9a !Important;} .red.awesome, .red.awesome:visited { background-color: #e33100;} .red.awesome:hover { background-color: #872300;} .magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; } .magenta.awesome:hover { background-color: #630030;} .orange.awesome, .orange.awesome:visited { background-color: #ff5c00;} .orange.awesome:hover { background-color: #d45500;} .yellow.awesome, .yellow.awesome:visited { background-color: #ffb515;} .yellow.awesome:hover { background-color: #fc9200;} .pink.awesome, .pink.awesome:visited {background-color: #D70061;} .pink.awesome:hover {background-color: #C10057;} /* ---- Main Frame ---- */ #frame {} .sidelurker {position:absolute; right:0; bottom:10px; display:fixed; width:54px; height:75px; background-image:url(/img/dudes/sidelurker.png); background-position:left center; background-repeat:no-repeat; overflow:hidden;} /*--- Header Section ---*/ #headsection {} #headtop {background-color:#c9eaf9; border-top:4px #009AE2 solid;} #headtopinner {height:65px; width:960px; margin:0 auto; position:relative;} a.logo {position:absolute; left:0; top:15px; text-decoration:none; border:0;} #headerimages {margin:0 0 10px 0; clear:both;} #headerimagesinner {height:261px; width:960px; margin:0 auto; padding:0;} #headerimagesinner img {} #noheaderwrapper {} /* --- main menu --- */ #mainnav {position:absolute; right:0; top:0; width:600px;} #mainnav ul{} #mainnav ul li{ padding:0; margin:0 3px 0 0; list-style:none; display:inline; float:left; } #mainnav ul li a, #mainnav ul li a:visited {display: inline-block; background-image:url(/img/nav/active-bg-bottom.jpg); background-position:bottom; background-repeat:no-repeat; background-color:#a2d8f7; width:89px; white-space:nowrap; text-align:left; text-decoration:none; color:#fff; border:0; padding:36px 4px 4px 4px !Important; font-weight:bold; font-size:1.2em;} #mainnav ul li a:hover {padding:36px 4px 4px 4px !Important; background-image:url(/img/nav/hover-bg-bottom.jpg); background-position:bottom; background-repeat:no-repeat; background-color:#009ae2;} #mainnav ul li a span { display:inline-block; display:block; height:0; overflow:hidden; } /*#mainnav ul li a strong { font-size:14px; text-transform:uppercase; padding-top:5px; display:block;}*/ #mainnav ul li a.active {background-image:url(/img/nav/hover-bg-bottom.jpg); background-position:bottom; background-repeat:no-repeat; background-color:#009ae2;} #topcontact {background-color:#009ae2; overflow:hidden; height:0;} #topcontactinnner {width:960px; margin:0 auto; clear:both; padding:12px 0 0 0;} #topcontact .topsection {float:left; width:280px; color:#FFFFFF;} #topcontact .topsection a, #topcontact .topsection a:visited {color:#FFFFFF; font-weight:bold; border-bottom:1px #FFFFFF dotted;} #topcontact .topsection a:hover {text-decoration:none;} #topcontact .topsection p {margin:0 0 3px 0;} #topcontact .topclose {display:block; width:30px; font-size:1.6em; float:right; color:#FFFFFF; border:0; font-weight:bold;} #topcontact .heading {font-size:1.6em; color:#000000;} #topcontact .bigphone {color:#FFFFFF; font-size:2.2em;} /*---- maincontent ----*/ #maincontent {width:960px; margin:0 auto; clear:both; padding:20px 0; min-height:350px; height:auto !important; height:350px;} #maincontent ul {padding:10px 0 10px 25px;} #maincontent li {list-style:circle; line-height:1.9em;} #outermaincontent {background-image:url("/img/bg/header-bg.png"); background-position:top; background-repeat:repeat-x;} /*---- Footer ----*/ #footer {clear:both; padding:0; margin:6px 0 0 0; background-color:#eeeeee; background-image:url(/img/footer/footer-bg.jpg); background-position:top; background-repeat:repeat-x;} #footer #footersectionholder {width:960px; margin:0 auto; clear:both; padding:20px 0;} #footer #footersectionholder h5 {padding:0 0 9px 0;} #footer .footersections {float:left; width:279px; min-height:180px; height:auto !important; height:180px; padding:0 25px; overflow:hidden;} #footer .footersections ul {margin:0; padding:0;} #footer #latesttweets {padding-left:0 !Important;} #footer #latesttweet {clear:both; width:270px;} #footer #tweettop {height:15px; background-image:url(/img/footer/tweet-top.png); background-repeat:no-repeat;} #footer #tweetmid {background-image:url(/img/footer/tweet-middle.png); background-repeat:repeat-y;} #footer #tweetbottom {height:62px; background-image:url(/img/footer/tweet-bottom.png); background-repeat:no-repeat;} #footer #tweetbottom p {margin:0; padding:30px 0 0 60px;} #footer ul.tweets li {padding:10px 15px; line-height:1.6em; overflow:hidden;} #footer #latestblogs {margin:0 0 0 0;} #footer #latestblogs li {padding:10px 0;} #footer #getintouch {margin:0 0 0 0; padding-right:0;} #footer #getintouch p {margin:0 0 4px 0;} #subfooter {clear:both; padding:5px 0 0; font-size:0.8em; border-top:1px #cccccc solid; margin:12px 0 0 0;} #subfooter p {margin:0 0 4px 0;} #footerlist ul {} #footerlist li {display:inline; float:right; padding:0 0 0 8px;} /*---- Home Page ----*/ #hometop {} #hometext {padding:0 0 12px 0;} #hometext p {font-size:1.2em; line-height:1.4em;} #homemiddle {} #homeblog {float:left; width:289px;} #homedo {float:left; width:289px; padding:0 0 0 43px;} .homedo {padding:0 0 17px 0;} #homedo ul, .homedo ul {margin:0 0 0 2px; padding:0;} #homedo li, .homedo li {font-size:0.9em; list-style:none !Important; padding:5px 0 5px 25px; background-image:url(/img/icons/green-tick.png); background-position:left center; background-repeat:no-repeat;} #homedo li a, #homedo li a:visited, .homedo li a, .homedo li a:visited {color:#000000; border-bottom:0;} #homedo li a:hover, .homedo li a:hover { border-bottom:1px #000000 dotted;} #homeprojects {float:right; width:289px;} #homeprojects ul {margin:0; padding:0;} #homeprojects li {list-style:none; margin:0; padding:0 0 11px 0; float:left; width:50%; text-align:center;} #homeprojects li img {border:2px #009AE2 solid;} #homeprojects li a, #homeprojects li a:visited {border-bottom:0;} #homebottom {border-top:1px #d0d0d0 solid; border-bottom:1px #d0d0d0 solid; padding:8px 0; line-height:42px; clear:both; margin:24px 0;} #clientleft {float:left; width:215px;} #clientleft h4 {color:#009ae2; font-size:1.65em; margin:0;} #clientright {float:right;} #homeblog #homebloglist {margin:0; padding:0;} #homemiddle a, #homemiddle a:visited {} #homeblog li.homeblogpost {list-style:none !Important; padding:0 0 11px 0; margin:0;} #homeblog li.homeblogpost p {padding:0; margin:0;} #homeblog p.blogheader a, #homeblog p.blogheader a:visited {color:#000000; font-weight:bold; font-size:1.3em; border:0;} #homeblog p.blogheader a:hover {border-bottom:1px #000000 dotted;} #homeblog li.homeblogpost p.date {color:#e50067; font-size:1.3em;} #readmorehome {clear:both; width:960px; border-top:1px #FFFFFF solid; border-bottom:1px #FFFFFF solid; display:inline-block;} #readmorehome p {margin:0 0 15px 0;} /*---- Text Pages ----*/ #textpagesidesection {clear:both; padding:28px 0 0 0;} #servicenavigation {float:left; width:215px;} #servicenavigation .servicelist {} #servicenavigation .servicelist ul {padding:0;} #servicenavigation .servicelist li {padding:0 0 9px 0; list-style:none;} #servicenavigation .servicelist li a, #servicenavigation .servicelist li a:visited {display:block; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#000; padding:0 0 0 9px; line-height:31px; border:0;} #servicenavigation .servicelist li a:hover, #servicenavigation .servicelist li a.active {background-color:#009ae2; color:#FFFFFF; background-image:url(/img/navarrow.jpg); background-position:right center; background-repeat:no-repeat;} #textpageleft, #textleft {float:left; width:438px; margin:0 0 0 24px;} #textpageright, #textright {float:right; width:259px; padding:0;} #textleft {width:677px; margin:0;} #textpageleft ul, #textpageleft ol, #textleft ul, #textleft ol {padding:10px 0 10px 25px;} #textpageleft ul li, #textleft ul li {list-style:inside; padding:2px 0;} #textleft ol li, #textleft ol li {padding:2px 0; list-style:decimal;} /*---- Side Sections ----*/ #sidequote {padding:0 0 20px 0;} #sidequote a, #sidequote a:visited {border:0;} #sidequote p {font-size:0.9em;} #sidecreds {padding:0 0 20px 0;} #sidecreds span {padding:0 12px 0 0;} #sidequotes {padding:0 0 20px 0;} .quotetext {} .quotedperson {} .quotedperson span {} #sidebrochure {padding:7px 0 0 0;} #sidebrochure img {float:left; margin:0 10px 0 0;} /*--- Heavy Text Pages ----*/ #incontentslider {border:6px #a5d9fe solid; background-color:#c4e6ff;} #incontentsliderinner {min-height:100px; height:auto !important; height:100px; padding:15px;} /*--- More content navigation ---*/ .morepageheader {margin:0; font-size:1em; font-weight:normal; display:block; clear:both; padding:17px 0 3px 5px; color:#b3cc01;} #morepages {background-color:#b3cc01; color:#FFFFFF; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 10px;} #morepagesinner a, #morepagesinner a:visited {color:#FFFFFF; border:0; text-decoration:underline;} #morepagesinner a:hover { text-decoration:none;} #morepagesinner p {margin:4px 0;} /* --- Projects Section --- */ /*Boxes*/ .boxgrid{ width: 305px; height: 216px; float:left; background:#2C2C2C; border: solid 2px #e2e2e2; overflow: hidden; position: relative; margin-bottom:16px;} .boxgrid img{ position: absolute; top: 0; left: 0; border: 0; } .boxgrid h3{padding:0px; margin:0px; font-size:20px; font-weight:normal; color:#44b4ff;} .boxgrid p{color:white; padding:0px; margin:0px; margin-top:10px; color:#afafaf;} .boxgrid a{color:#44b4ff; border-bottom:1px #44b4ff solid;} .boxgrid a:hover{color:#44b4ff; text-decoration:none;} .boxcaption{ float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";} .middle-box {margin-left:16px; margin-right:16px;} .captionfull .boxcaption {top: 260;left: 0;} .caption .boxcaption {top: 220; left: 0;} #projects-holder{width:960px; position:relative;} #projects-holder ul {} #projects-holder ul li {list-style:none;} .boxgrid-inner {padding:20px;} .boxgrid-inner p {font-size:150%;} .boxgrid-inner h3 {color:#CCC;} .panelContainer h3 {padding:30px 0 20px; font-size:1.6em;} /*--- Text Pages ---*/ #textsplitimage {padding:7px 0; clear:both;} #textsplitimage img {width:438px;} /*Side boxes for text pages*/ .sidebox { background-image:url(/img/sidesections/boxtop.jpg); background-position:top; background-repeat:no-repeat; background-color:#fdfdfd; margin:0 0 18px 0;} .sideboxinner { background-image:url(/img/sidesections/boxbottom.jpg); background-position:bottom; background-repeat:no-repeat; padding:17px; font-size:1.1em; min-height:105px; height:auto !important; height:105px; color:#000000;} .sideboxinner a, .sideboxinner a:visited {border:none !Important;} .sidebox h5 {padding:0; margin:0; font-size:1.4em;} .sidebox .headerimg {clear:both; margin:0 0 10px 0;} .sidebox .accredimg {float:right; margin:0 0 0 10px;} .sidebox p { margin:0;} /*--- BLOG ---*/ .blog #wrapper {padding:16px 0 12px 0;} .blog #container {float:left; width:615px;} .blog .sidebar {float:right; width:250px;} .blog .sidebar .sideblogholder {padding:0 0 20px 0;} .blog .sidebar .sideblogholder h3 {color:#009AE2; margin:0 0 0 0; padding:0 0 15px 0;} .blog .sidebar .sideblogholder ul {margin:0 0 0 0; padding:0 0 0 0;} .blog .sidebar .sideblogholder ul li {margin:0 0 0 0; padding:0 0 0 0; list-style:disc !Important;} .blog .sidebar .sideblogholder ul li a, .blog .sidebar .sideblogholder ul li a:visited {color:#000000;} .blog .sidebar .sidecategories {} .blog .sidebar .sidearchive {} .blog .post {padding:0 0 25px 0; margin:0 0 25px 0; border-bottom:1px #b4b4b4 dotted; clear:both;} .blog .post .tweetbutton {width:50px; height:61px; float:right; margin:0 0 0 8px;} .blog .post h2 {padding:0 0 0 0; font-size:1.9em;} .blog .blogsnippetimage {padding:10px 0 0 0;} .blog .blogsnippetimage img {width:615px;} .blog .entry-date {color:#000000; font-size:0.9em;} #projectholder {clear:both; padding:12px 0 20px 0;} #projecttop {clear:both; padding:0 0 8px 0; margin:0 0 20px 0; border-bottom:1px #BCBCBC solid;} #projecttop h1 {margin:0; font-size:2.5em;} #projectdetails {float:left; width:250px;} .projectpager {width:340px; float:right; padding:0;} .projectpager li {list-style:none !Important; padding:0; margin:0;} #projectscreenshots {} #projectscreenshots h4 {color:#009AE2; margin:0 0 7px 0; padding:0 0 7px 0; border-bottom:1px dotted #A8A392; font-weight:normal;} #projectscreenshots a, #projectscreenshots a:visited {border:0;} #projectscreenshots img {margin:0 8px 8px 0; border:3px #cae7fc solid;} #projectmedia {float:right; width:610px; min-height:500px; height:auto !important; height:500px;} #projectmainmedia {text-align:center; padding:0 0 15px 0;} #projectmainmedia img {margin:0 0 15px 0; border:1px #ccc solid;} #projectrelated {padding:6px 0;} #projectrelated ul {margin:0; padding:0;} #projectrelated li {display:inline; float:left; list-style:none; padding:0 11px 0 0; margin:0;} #projectrelated ul li a, #projectrelated ul li a:visited {border:0;} #projectrelated li img {border:1px #BCBCBC solid;} #projectrelated h5 {font-size:1.3em; margin:0 0 15px 0; padding:0 0 7px 0; border-bottom:1px dotted #A8A392; font-weight:normal; clear:both;} /*-Main Project Page Slider-.nivoSlider {position:relative;} .nivoSlider img {position:absolute;top:0px;left:0px;} .nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;} .nivo-slice {display:block;position:absolute;z-index:50;height:100%;} .nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;width:100%;z-index:89;} .nivo-caption p {padding:5px;margin:0;} .nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;} .nivo-prevNav {left:0px; color:#000; font-size:1.5em; background-color:#FFFFFF; padding:7px; border:0;} .nivo-nextNav {right:0px; color:#000; font-size:1.5em; background-color:#FFFFFF; padding:7px; border:0;} .nivo-controlNav a {position:relative;z-index:99;cursor:pointer;} .nivo-controlNav a.active {font-weight:bold;} #slider {position:relative;} #slider img {position:absolute;top:0px;left:0px;}*/ /*--- Contact Us Page ---*/ #contactpage {clear:both; padding:15px 0;} #contactinfoside {float:left; width:25%;} #contactmapside {float:right; width:72%;} #contactmap {height:400px; width:684px; border:3px #009AE2 solid; position:relative;} /*--- Home Page Coda Slider ---*/ .coda-slider-wrapper {} .coda-slider {} /* Use this to keep the slider content contained in a box even when JavaScript is disabled */ .coda-slider-no-js .coda-slider { height: 261px; overflow: auto !important; padding-right: 20px; } /* Change the width of the entire slider (without dynamic arrows) */ .coda-slider, .coda-slider .panel { width: 960px; height:261px;} /* Change margin and width of the slider (with dynamic arrows) */ .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 960px; } .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px; } /* Arrow styling */ .coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px; } /* Tab nav */ .coda-nav ul li a.current { background: #09F; } /* Panel padding */ .coda-slider .panel-wrapper {} /* Preloader */ .coda-slider p.loading { padding: 20px; text-align: center; } /* Tabbed nav */ .coda-nav {position:absolute; bottom:0; left:0;} .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden;} .coda-nav ul li { display: inline; } .coda-nav ul li a {border:0; background: #333; display: block; height:12px; width:12px; float: left; margin-right: 5px; text-decoration: none; text-indent:-9999px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} /* Miscellaneous */ .coda-slider-wrapper { clear: both; overflow: auto; position: relative; } .coda-slider { float: left; overflow: hidden; position: relative; } .coda-slider .panel { display: block; float: left; } .coda-slider .panel-container { position: relative; } .coda-nav-left, .coda-nav-right { float: left; } .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none; } /* Inner panels */ .panel-inner-left {float:left; width:420px; padding:25px 0 0 0;} .panel-inner-left h2.title {font-size:3.2em;} .panel-inner-left p {line-height:24px; font-size:1.2em;} .panel-inner-left p a, .panel-inner-left p a:visited {font-weight:bold;} .panel-inner-left p a:hover {} .panel-inner-right {float:right; width:506px;} /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */