/* http://www.icdlimited.co.uk this code produced by Tim Manners */
/* Citrus Studio 2009 v1.0 */

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
    margin: 0px; 
    padding: 0px; 
    border: 0px;
    list-style:none;
}

a {color:#555; outline:none;}

a:hover {color:#333}

.clear:after {
	content: ""; display: block; clear: both;
}

.clear { zoom: 1; } 

body {
	font-family: Arial, Helvetica, sans-serif;
	background: url(corporate_bg.jpg) center top no-repeat #000;
}

img, div { behavior: url(iepngfix.htc) }


/*Start of CSS styling*/
div#container, div.nav, div#content, div#footer, span.curve {width:950px}

div#container {
	margin-right:auto;
	margin-left:auto;
	background:url(corporate_bg.jpg) 0 0 no-repeat #e3e3e3;
}

div.nav {
	height:30px;
	margin:200px 0 0 0;
	background:url(corporate_bg.jpg) 0 -220px;
	position:relative;
}

#content {
	background: url(images/sub-rule.gif) no-repeat center bottom #ccc;
}

span.curve {
	height:25px;
	background:url(corporate_bg.jpg) 0 -310px;
	display:block;
}

/*INTRO List*/

ul.bullets {
	color: #555; 
	font-size: 17px; 
	line-height: 18px; 
	text-align:left;
	padding:0;
	margin: 10px 0;
}

ul.bullets li {float:right; width:260px; height:20px; margin:0 20px 15px 0; list-style:url(images/bullet.gif) inside;}

/*Navigation*/

.nav li {
	display: inline;
}
.nav li a:link, .nav li a:visited {
	position: absolute;
	top: 0px;
	height: 30px;
	text-indent: -9000px;
	overflow: hidden;
	z-index: 10;
}
/*HOME TAB*/
.nav .home a:link, .nav .home a:visited {
	left: 53px;
	width: 86px;
}
.nav .home a:hover, .nav .home a:focus {
	background: url(corporate_bg.jpg) no-repeat -53px -250px;
}
.nav .home a:active {
	background: url(corporate_bg.jpg) no-repeat -53px -250px;
}
.current-home .home a:link, .current-home .home a:visited {
	background: url(corporate_bg.jpg) no-repeat -53px -280px;
	cursor: default;
}
.nav-home, .nav-home-click {
	position: absolute;
	top: 0;
	left: 53px;
	width: 86px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -53px -250px;
}
.nav-home-click {
	background: url(corporate_bg.jpg) no-repeat -53px -280px;
}
/*OFFER TAB*/
.nav .offer a:link, .nav .offer a:visited {
	left: 139px;
	width: 107px;
}
.nav .offer a:hover, .nav .offer a:focus {
	background: url(corporate_bg.jpg) no-repeat -139px -250px;
}
.nav .offer a:active {
	background: url(corporate_bg.jpg) no-repeat -139px -250px;
}
.current-offer .offer a:link, .current-offer .offer a:visited {
	background: url(corporate_bg.jpg) no-repeat -139px -280px;
	cursor: default;
}
.nav-offer, .nav-offer-click {
	position: absolute;
	top: 0;
	left: 139px;
	width: 107px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -139px -250px;
}
.nav-offer-click {
	background: url(corporate_bg.jpg) no-repeat -139px -280px;
}
/*ABOUT TAB*/
.nav .about a:link, .nav .about a:visited {
	left: 246px;
	width: 97px;
}
.nav .about a:hover, .nav .about a:focus {
	background: url(corporate_bg.jpg) no-repeat -246px -250px;
}
.nav .about a:active {
	background: url(corporate_bg.jpg) no-repeat -246px -250px;
}
.current-about .about a:link, .current-about .about a:visited {
	background: url(corporate_bg.jpg) no-repeat -246px -280px;
	cursor: default;
}
.nav-about, .nav-about-click {
	position: absolute;
	top: 0;
	left: 246px;
	width: 97px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -246px -250px;
}
.nav-about-click {
	background: url(corporate_bg.jpg) no-repeat -246px -280px;
}
/*PASSPORT TAB*/
.nav .passport a:link, .nav .passport a:visited {
	left: 343px;
	width: 105px;
}
.nav .passport a:hover, .nav .passport a:focus {
	background: url(corporate_bg.jpg) no-repeat -343px -250px;
}
.nav .passport a:active {
	background: url(corporate_bg.jpg) no-repeat -343px -250px;
}
.current-passport .passport a:link, .current-passport .passport a:visited {
	background: url(corporate_bg.jpg) no-repeat -343px -280px;
	cursor: default;
}
.nav-passport, .nav-passport-click {
	position: absolute;
	top: 0;
	left: 343px;
	width: 105px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -343px -250px;
}
.nav-passport-click {
	background: url(corporate_bg.jpg) no-repeat -343px -280px;
}
/*GALLERY TAB*/
.nav .gallery a:link, .nav .gallery a:visited {
	left: 448px;
	width: 105px;
}
.nav .gallery a:hover, .nav .gallery a:focus {
	background: url(corporate_bg.jpg) no-repeat -448px -250px;
}
.nav .gallery a:active {
	background: url(corporate_bg.jpg) no-repeat -448px -250px;
}
.current-gallery .gallery a:link, .current-gallery .gallery a:visited {
	background: url(corporate_bg.jpg) no-repeat -448px -280px;
	cursor: default;
}
.nav-gallery, .nav-gallery-click {
	position: absolute;
	top: 0;
	left: 448px;
	width: 105px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -448px -250px;
}
.nav-gallery-click {
	background: url(corporate_bg.jpg) no-repeat -448px -280px;
}
/*PRODUCT TAB*/
.nav .product a:link, .nav .product a:visited {
	left: 553px;
	width: 112px;
}
.nav .product a:hover, .nav .product a:focus {
	background: url(corporate_bg.jpg) no-repeat -553px -250px;
}
.nav .product a:active {
	background: url(corporate_bg.jpg) no-repeat -553px -250px;
}
.current-product .product a:link, .current-product .product a:visited {
	background: url(corporate_bg.jpg) no-repeat -553px -280px;
	cursor: default;
}
.nav-product, .nav-product-click {
	position: absolute;
	top: 0;
	left: 553px;
	width: 112px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -553px -250px;
}
.nav-product-click {
	background: url(corporate_bg.jpg) no-repeat -553px -280px;
}
/*EVENTS TAB*/
.nav .event a:link, .nav .event a:visited {
	left: 665px;
	width: 61px;
}
.nav .event a:hover, .nav .event a:focus {
	background: url(corporate_bg.jpg) no-repeat -665px -250px;
}
.nav .event a:active {
	background: url(corporate_bg.jpg) no-repeat -665px -250px;
}
.current-event .event a:link, .current-event .event a:visited {
	background: url(corporate_bg.jpg) no-repeat -665px -280px;
	cursor: default;
}
.nav-event, .nav-event-click {
	position: absolute;
	top: 0;
	left: 665px;
	width: 61px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -665px -250px;
}
.nav-event-click {
	background: url(corporate_bg.jpg) no-repeat -665px -280px;
}
/*CORPORATE TAB*/
.nav .corporate a:link, .nav .corporate a:visited {
	left: 726px;
	width: 82px;
}
.nav .corporate a:hover, .nav .corporate a:focus {
	background: url(corporate_bg.jpg) no-repeat -726px -250px;
}
.nav .corporate a:active {
	background: url(corporate_bg.jpg) no-repeat -726px -250px;
}
.current-corporate .corporate a:link, .current-corporate .corporate a:visited {
	background: url(corporate_bg.jpg) no-repeat -726px -280px;
	cursor: default;
}
.nav-corporate, .nav-corporate-click {
	position: absolute;
	top: 0;
	left: 726px;
	width: 82px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -726px -250px;
}
.nav-corporate-click {
	background: url(corporate_bg.jpg) no-repeat -726px -280px;
}
/*CONTACT TAB*/
.nav .contact a:link, .nav .contact a:visited {
	left: 808px;
	width: 89px;
}
.nav .contact a:hover, .nav .contact a:focus {
	background: url(corporate_bg.jpg) no-repeat -808px -250px;
}
.nav .contact a:active {
	background: url(corporate_bg.jpg) no-repeat -808px -250px;
}
.current-contact .contact a:link, .current-contact .contact a:visited {
	background: url(corporate_bg.jpg) no-repeat -808px -280px;
	cursor: default;
}
.nav-contact, .nav-contact-click {
	position: absolute;
	top: 0;
	left: 808px;
	width: 89px;
	height: 30px;
	background: url(corporate_bg.jpg) no-repeat -808px -250px;
}
.nav-contact-click {
	background: url(corporate_bg.jpg) no-repeat -808px -280px;
}

/*Other Classes*/

img.logo {
	position:absolute;
	top:52px;
	left:-458px;
	margin:0 0 0 50%;
}

.basket {
	position:absolute;
	top:180px;
	left:-450px;
	margin:0 0 0 50%;
}

.basket p, .basket h3 {
	text-align:left;
	color:#fff;
}

.basket p {font-size:12px;}

.basket a {color:#ffd204;}

.basket span {margin-left:10px; color:#fff;}


/* ------------------------------------------ ICD CSS BELOW ------------------------------------ */

#content p, #sub-content p {
	color: #555; 
	font-size: 13px; 
	line-height: 18px; 
	margin: 0 0 20px 0;
	text-align:left;
}

#content p sup, #sub-content p sup {font-size:9px;}
	
#content #main {
	width: 560px; 
	float: left; 
	margin: 8px 0 0 40px;
}

#content #main h2, #footer h6, #sub-content h5 {
	color: #555; 
	font-size: 25px; 
	font-weight: normal;
}
	
#content #main h2{margin: 8px 0 0 0;line-height: 30px;}

#content #main h3{color:#555; font-weight:normal; font-size:1-px}

#content #main h2.no-intro {margin:8px 0 15px 0}

#content #side div.featured-project h3, #content #side div.featured-project h4 {font-size:16px;font-weight:bold}

#content #side div.featured-project h3 {color:#fff;}

#content #side div.featured-project h4 {color:#555;}

#content #side div.featured-project div.slideshow {margin: 9px; border: 1px solid #555; background: #fff;}

#content #side div.featured-project hr { border: 0; background: url(images/sub-rule.gif) repeat-x top; margin: 0 10px 10px; height:2px}
	
#footer h6, #sub-content h5 {margin-bottom:15px;}

#content #main p.intro {margin:15px 0 10px 0;}

div.button a, div.button input {
	width: 100%; 
	height: 100%;
	display:block;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration:none;
}

div.button a {
	padding: 10px 0 0 10px;
}

div.button input {
	padding: 0 0 5px 10px;
	text-align:left;
	border:none;
	cursor:pointer;
}

div.button a.contact {background: url(images/button-icon.png) 180px 0 no-repeat;}

div.button a.contact:hover {
	background: url(images/button-icon.png) 180px -40px no-repeat;
}

div.button a.folio {background: url(images/button-icon.png) 180px -80px no-repeat;}

div.button a.folio:hover {
	background: url(images/button-icon.png) 180px -120px no-repeat;
}

div.button a.send, div.button input.send {background: url(images/button-icon.png) 180px -160px no-repeat;}

div.button a.send:hover, div.button input.send:hover {
	background: url(images/button-icon.png) 180px -200px no-repeat;
}

div.button  { 
	width: 240px; 
	height: 40px;  
	background: url(images/button.png) no-repeat #333;
	overflow:hidden;
}

#content #side div.featured-project div.button {margin: 0 10px 10px 10px;}

#content #main div.end {float: right;}

#content #side {
	width: 260px; 
	float: left; 
	margin: 0 0 0 40px; 
	background: url(images/top-corners.gif) no-repeat #e6e6e6;
}

div.featured-project {
padding-bottom:1px;
	background: url(images/bottom-corners.gif) bottom no-repeat;
}

#content #side div.featured-project h3 {padding: 20px 10px 10px 10px;}

#content #side div.featured-project h4 {padding: 0 10px 10px 10px;}

#content #side div.featured-project blockquote cite {padding: 20px 10px 0 10px; font-size: 14px; line-height: 17px;margin:-25px 0 0;}

#content #side div.featured-project blockquote{background: url(images/top-quote.gif) no-repeat left 10px}

#content #side div.featured-project blockquote p {color:#555; font-family:"Times New Roman", Times, serif; padding: 20px 10px 0 10px; font-size: 19px; line-height: 25px;background: url(images/bottom-quote.gif) no-repeat bottom right}

#content #side div.featured-project p {padding: 0 10px}

#sub-content {background: #e6e6e6; padding: 20px 0 0; margin: 0;}

#sub-content div.sub-column {width: 260px; float: left; margin: 0 0 0 40px;}

#sub-wrap {background: url(images/sub-columns.gif) center top repeat-y; padding:0; margin:0; width:940px}

/* NOTE: For single images displayed within a sub-column images must be 256px wide and if possible 155px high. */
#sub-content div.sub-column img {outline: 1px solid #555;}

/* NOTE: For two images displayed adjacent within a sub-column. Images must be 108px wide. */
#sub-content div.sub-column img.first {margin-right:22px;}

#sub-content div.sub-column a img:hover {outline: 2px solid #555;}



form label {
	color: #969696; /* If Javscript disabled, otherwise hidden by the jQuery script */
}

form input {
	width: 220px; 
	height: 30px; 
	margin: 0 0 12px 0; 
	padding: 10px 10px 0 10px; 
	border: 0;
	font-size: 16px; color: #969696;
}

form input.name {
	background: #fff url(images/input-name.png) bottom;
}
			
form input.email {
	background: #fff url(images/input-email.png) bottom;
}
			
/* If Javascript enabled, jQuery script adds these classes   */
form input.name.js-active {
	background: #fff url(images/input-name.png) top;
}
form input.email.js-active {
	background: #fff url(images/input-email.png) top;
}
form input.name.focus {
	background: #fff url(images/input-name.png) bottom;
}
form input.email.focus {
	background: #fff url(images/input-email.png) bottom;
}

/* ==== PASSPORT BLURB ==== */

.passport_guarantee {
	background: url(http://www.citrus-studio.co.uk/images/passport_guarantee.png) right bottom no-repeat;
}

/* ====== TOP STRAP ====== */

.top_strap {
	z-index:9;
	position:absolute;
	top:0;
	left:0;
	height:46px;
	width:100%;
	background:url(http://www.citrus-studio.co.uk/images/passport_id_strap.png) top center repeat-x;
}

.top_strap_link {display:block; height:46px;}

/* ====== CORNER GRAPHIC ====== */

img.strap, img.passport_graphic {
	position:absolute;
	top:0;
	right:-500px;
	margin:0 50% 0 0;
	z-index: 10;
}

/* ===== Footer ===== */

div #footer {
		margin: 0;
        border-top: 1px solid #555;
		background: #777;
        padding: 0;
        position: relative;
}

#footer h4, #footer p {
        font-size: 12px;
        color: #fff;
}

#footer h4 {
        padding: 10px 0;
        text-shadow: 0 -1px 0 #555;
}

#footer p {padding:0; margin-bottom: 10px;}

#footer a {color: #f9c205}

#footer ul {margin:0; padding:0; overflow: hidden;}

#footer ul li, .lefCol ul li {
        font-size: 12px;
        padding: 2px 0 0;
        margin: 0;
        width: 140px;
        float: left;
}

#footer ul.links li a {
        font-size: 12px;
        padding: 5px 0 6px 5px;
        margin: 2px 0 3px 0px;
        width: 125px;
        background:#6c6c6c;
        display: block;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        border-top: 1px solid #444;
        border-right: 1px solid #555;
        border-bottom: 1px solid #999;
        border-left: 1px solid #555;
        color: #ffffe4;
        text-decoration: none;
        text-shadow: 0 -1px 0 #444;
}

#footer ul.links li a:hover {
        background:#4c4c4c;
        border-top: 1px solid #222;
        border-right: 1px solid #333;
        border-bottom: 1px solid #777;
        border-left: 1px solid #333;
        color: #fff;
        text-decoration: none;
        text-shadow: 0 0 2px #ffffe4;
}

#footer ul.contact li {
        font-size: 12px;
        padding: 5px 0 6px 5px;
        margin: 2px 8px 3px 0px;
        width: 125px;
        background:#6c6c6c;
        display: block;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        border-top: 1px solid #444;
        border-right: 1px solid #555;
        border-bottom: 1px solid #999;
        border-left: 1px solid #555;
        color: #ffffe4;
        text-decoration: none;
        text-shadow: 0 -1px 0 #444;
}


#footer ul.contact .bold {margin-right: 10px; color: #ffffe4;}

#footer ul.contact li.email {width: 175px;}

#footer ul.contact li.email a {
}

#footer ul.contact li a:hover {
}

#footer a#sitemap, #footer a#facebook {
        display: block;
        width: 280px;
        height: 76px;
        text-indent: -9999px;
}

#sitemap {background: url(corp_sitemap_link.jpg)}

#facebook {background: url(corp_fb_link.jpg)}

a#backtotop {
        position: relative;
        bottom: -1px;
        font-size: 12px;
        padding: 5px 0 6px;
        margin: 0 auto;
        width: 125px;
        background:#777;
        display: block;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        border-top: 1px solid #999;
        border-right: 1px solid #555;
        border-left: 1px solid #555;
        color: #ffffe4;
        text-decoration: none;
        text-shadow: 0 -1px 0 #471;
        text-align: center;
        font-weight: bold;
        z-index: 999;
}

a#backtotop:hover {color: #fff; text-decoration: none; text-shadow: 0 0 2px #ffffe4;}

.lefCol, .midCol, .endCol {
        width: 280px;
        float: left;
        padding: 0 18px 20px;
}