@charset "utf-8";

/* CSS Document */


/*
Design: http://specialdesignstudio.co.uk
Build: http://portman2.com
Author: Kate Portman
Site: http://specialdesignstudio.co.uk
Last updated: 10th July 2009 
*/


/* RESETS */
body {margin: 0; text-align: left; background: #000000; padding-top: 55px; }
h1, h2, h3, p, ol, ul {margin: 0; clear: both; text-align: left;}
img {border: none; }
a {text-decoration: none}


/* COMMON ELEMENTS */
p, li {font: 10px Arial, Helvetica, sans-serif; color: #B2B2B2;}
p a:link, p a:visited {color: #ffffff; text-decoration:none}
h2 {font: 13px Arial, Helvetica, sans-serif; color: #ff0033; font-weight: bold;}
li a:link, li a:visited {color: #ffffff;}
li a:hover {color: #ff0033; }
p span.red {color: #ff0033; }
a.active {color: #ff0033;}


/* COMMON CLASSES */
.hide {position: absolute; left: -9999px;}
.noshow {display: none;}
.clearboth {clear: both;}


/* ALL PAGES (AS WELL AS DIV ID=HOMEPAGE THEY NOW HAVE CLASS=PAGE) */
.page {width: 100%; margin: 5px 0 0 0; position: relative;}
#home_page, #services_page {height: 720px;}


/* CONTACT DETAILS PLACED AT THE TOP */
#contact_details {position: absolute; left: 0px; top: 30px; height: 33px; background: url(images/border.png) 30px 32px no-repeat; width: 100%; }
#contact_details ul {list-style-type: none; padding: 0; margin: 0 0 0 30px;}
#contact_details li {float: left; display: inline; }
#contact_details li a {display: block; height: 31px; text-indent: -9999px;}
#contact_details li.phone {width: 233px; height: 31px; background: url(images/contact_tel.png) no-repeat; text-indent: -9999px;}
#contact_details li.email a:link, #contact_details li.email a:visited { height: 21px; width: 202px; background: url(images/contact_email.png) no-repeat;}
#contact_details li.email a:hover {background: url(images/contact_email.png) 0 -21px no-repeat;}
#contact_details li.mailing a:link, #contact_details li.mailing a:visited {height: 21px; width: 142px; background: url(images/contact_mailinglist.png) no-repeat;}
#contact_details li.mailing a:hover {background: url(images/contact_mailinglist.png) 0 -21px no-repeat;}
#contact_details li.contact a {width: 85px; background: url(images/contact.gif) no-repeat;}



/* HEADER */
#header {position: relative; height: 110px;}
#header h1 {position: absolute; left: 30px; top: 15px; background: url(images/special_logo.gif) no-repeat; text-indent: -9999px; }
#header h1 a {display: block; width: 120px; height: 55px; }


/* MAIN NAVIGATION */
#main_nav {position: absolute; left: 0; top: 110px; width: 100%;}
#main_nav ul {height: 27px; list-style-type: none; padding: 0; margin: 0 0 0 30px;}
#main_nav li {float: left; height: 21px; display: inline; width: 138px; margin-right: 10px;  padding: 0 0px 5px 0; border-bottom: 1px solid #474747; }
li#testimonialsli {width: 258px;}
#main_nav li a {display: block; height: 16px; text-indent: -9999px;}
a#services:link, a#services:visited {width: 59px; background: url(images/services.png) no-repeat;}
a#services.active, a#services:hover {background: url(images/services.png) 0 -16px no-repeat;}
a#about:link, a#about:visited {width: 51px; background: url(images/about.png) no-repeat;}
a#about.active, a#about:hover {background: url(images/about.png) 0 -16px no-repeat;}
a#portfolio:link, a#portfolio:visited {height: 21px; width: 66px; background: url(images/portfolio.png) no-repeat;}
a#portfolio.active, a#portfolio:hover {background: url(images/portfolio.png) 0 -21px no-repeat;}
a#blog:link, a#blog:visited {height: 21px; width: 79px; background: url(images/blognews.png) no-repeat;}
a#blog.active, a#blog:hover {background: url(images/blognews.png) 0 -21px no-repeat;}
a#testimonials:link, a#testimonials:visited {width: 245px; background: url(images/testimonials.png) no-repeat;}
a#testimonials.active, a#testimonials:hover {background: url(images/testimonials.png) 0 -16px no-repeat;}



/* LAST UPDATED TEXT ABOVE THE BLOG NEWS LINK */
#bloglastupdated {overflow: hidden; position: absolute; top: 43px; left: 474px; width: 120px; height: 50px;}

/*Above, note the overflow is hidden to prevent longer titles from spilling over the grey line below... */
#portfolio_page #bloglastupdated p, #bloglastupdated p {font-size: 10px; line-height: 12px; margin: 0 0 50px;}

/* Above, needs the #portfolio_page bit to override the margin-bottom given to all portfolio Ps... */
#portfolio_page #bloglastupdated p.blue, #bloglastupdated p.blue, #portfolio_page #bloglastupdated p.blue a, #bloglastupdated p.blue a {font-size: 10px; color: #00CFCF; margin: 0;}


/* The below lines deal with grey lines associated with the navigation-ish... */
#servicesnav_line {position: relative; left: 30px; top: 27px; width: 100px; height: 18px; border-left: 1px solid #666666;}
#aboutline {position: absolute; top: 142px; left: 195px; width: 100px; height: 225px; border-left: 1px solid #666666;}
#testimonialsline {position: absolute; top: 142px; left: 640px; width: 100px; height: 45px; border-left: 1px solid #666666;}
#blognewsline {position: absolute; top: 95px; left: 474px; width: 120px; height: 40px; border-right: 1px solid #666666; border-top: 1px solid #666666;}


/* SERVICES NAV */
#services_nav {position: relative; left: 30px; top: 33px; width: 200px;}
#services_nav ul {list-style-type: none; padding: 0; margin: 0;}
#services_nav li {font: 10px Arial, Helvetica, sans-serif; color: #ffffff;}
#services_nav a.active {color: #ff0033;}


/* HOME */
#intro_text {position: relative; margin: 120px 575px 0 85px;}
#intro_text p {margin: 0 0 5px 0; color: #00ffff; width: 240px; font: 11px Arial, Helvetica, sans-serif; }
#recent_project {position: absolute; left: 325px; top: 150px;}
#recent_project h2 {width: 137px; height: 29px; background: url(images/h2.png) no-repeat; text-indent: -9999px; }
#recent_project h3 {font: 11px Arial, Helvetica, sans-serif; margin: 5px 0 0 5px; color: #ccff00;} 
#recent_project p {color: #00ffff; margin: 0 0 0 5px;}
#recent_project a:link, #recent_project a:visited {color: #00ffff;}
#recent_project a:hover {color: #00ffff; text-decoration: underline;}
#content_area img {position: absolute; top: 190px; left: 480px; clear: right;}


/* SERVICES */
#services_text p {position: relative; margin: 110px 490px 0 190px; width: 220px;}
#services_text p.end {position: relative; margin: 10px 490px 0 190px;}
#large_text {position: relative; margin: 10px 0 10px 185px; width: 369px; height: 149px; background:url(images/large_text.gif) no-repeat; text-indent: -9999px;}
#large_text ul {list-style-type: none; padding: 0; margin: 0;}
#quote {position: absolute; left: 620px; top: 190px; width: 200px;}
#quote p {margin-bottom: 10px;}
#quote p span.white {color: #ffffff;}
#quote a:link, a:visited {color: #00ffff;}
#services_description {position: absolute; top: 170px; left: 178px; width: 240px;}
#services_description p {margin: 0 0 10px 0; color: #B2B2B2;}
#services_description p span.blue {color: #00ffff;}
#services_description p span.red {color: #ff0033;}
#services_description p.link a {color: #ff0033; font-weight: bold;}
#stripe_background p.top_link a {color: #00ffff; position: absolute; top: 7px; left: 15px; z-index: 10; }
#services_description a:link, #services_description a:visited {color: #00ffff;}
#stripe_background {position: absolute; top: 178px; left: 440px; z-index: 0;}
#services_image {width: 600px; height: 560px; position: absolute; top: 173px; left: 440px; }
#services_image img {border: none; padding: 0; margin: 0 12px 12px 0;}


/*
#services_image_top {width: 600px; height: 532px; position: absolute; top: 230px; left: 482px; z-index: 5;}
#services_image span.margin_right {margin-right: 12px;}
#services_image span.margin_top {margin-top: 12px;}
*/

/* PORTFOLIO */
#portfolio_page p {margin-bottom: 10px;}
#portfolio_page p.back a:link, p.back a:visited {color: #ff0033; font-weight: bold; }
#portfolio_page p.back a:link, p.back a:visited {color: #ff0033; font-weight: bold; }
#portfolio_nav {position: relative; margin: 45px 0 10px 0; padding: 0 0 10px 0; height: 85px; width: 100%; border-bottom: 1px solid #666666;}
#portfolio_nav ul {list-style-type: none; padding: 0; margin: 0 15px 10px 0; display: block; }
#pnav1 {position: absolute; left: 0; top: 0;}
#pnav2 {position: absolute; left: 148px; top: 0;}
#pnav3 {position: absolute; left: 297px; top: 0;}
#portfolio_nav li a {font-weight: bold;}
#portfolio_nav li a:hover {color: #00ffff;}
div.pfrapper {padding-top: 10px;}
.portfolio_item {width: 100%; position: relative; padding: 10px 0 0 0; height: 560px; border-top: 1px solid #666666;}
.latestportfolio_item {width: 100%; position: relative; padding: 0; height: 560px;}
#portfolio_stripe_background {position: absolute; top: 0px; left: 250px; z-index: 0;}
#portfolio_stripe_background p.top_link a {color: #00ffff; position: absolute; top: 17px; left: 15px; z-index: 10; }
.portfolio_item a, .latestportfolio_item a {color: #00ffff;}
.portfolio_item p, .latestportfolio_item p {margin: 0 0 10px 0; width: 220px; line-height: 12px;}
#content span.blue a {color: #00ffff;}

#hemsby h3 {margin: 60px 0 10px 0; font: 13px Arial, Helvetica, sans-serif; color: #00ffff; font-weight: bold;}
#hemsby1 {position: absolute; left: 450px; top: 10px; clear: both;}
#hemsby_video {width: 300px; height: 197px; margin: 25px 0 10px 0;}

#knock_down_ginger p, #haymarket p, #john_harragan p, #special_sound_unit p, #city_silenced_records p {width: 220px;}

#cred p {width: 225px;}
#cred1 {padding: 8px 0 20px 0;}
#cred2 {position: absolute; left: 45px; top: 90px; z-index: 5;}

#whitedm1 {padding: 40px 0 20px 0;}
#whitedm2 {position: absolute; left: 360px; top: 5px;}

#knock_down_ginger {position: relative; margin: 10px 0 10px; padding: 0 0 0px; height: 850px; border-bottom: 1px solid #999999;}
#kdg1 {padding: 270px 0 20px 0;}
#kdg2 {position: absolute; left: 45px; top: 40px; z-index: 5;}
#kdg3 {position: absolute; left: 250px; top: 540px;}

#haymarket1 {padding: 100px 0 20px 0;}
#haymarket2 {position: absolute; left: 350px; top: 5px;}

#shaker1 {padding: 145px 0 20px 0;}
#shaker2 {position: absolute; left: 250px; top: 5px;}

#mbmc {position: relative; margin: 10px 0 10px; padding: 0 0 0px; height: 1120px; border-bottom: 1px solid #999999;}
#mbmc1 {padding: 30px 0 20px 0;}
#mbmc2 {position: absolute; left: 45px; top: 125px; z-index: 5;}
#mbmc3 {position: absolute; left: 350px; top: 565px;}

#brand_strategy_guru {position: relative; margin: 10px 0 10px; padding: 0 0 0px; height: 840px; border-bottom: 1px solid #999999;}
#bsg1 {padding: 90px 0 0 0;}
#bsg2 {position: absolute; left: 270px; top: 5px;}
#bsg3 {padding: 15px 0 20px 0;}
#bsg4 {position: absolute; left: 220px; top: 552px;}
#bsg5 {position: absolute; left: 645px; top: 552px;}

#john_harragan1 {padding: 65px 0 0 0;}
#john_harragan2 {position: absolute; left: 45px; top: 90px; z-index: 5;}

#norfolk1 {position: absolute; left: 430px; top: 65px;}

#special1 {padding: 225px 0 0 0;}
#special2 {position: absolute; left: 285px; top: 5px;}

#cotman_housing {position: relative; margin: 10px 0 10px; padding: 0 0 0px; height: 880px; border-bottom: 1px solid #999999;}
#cotman1 {padding: 90px 0 0 0;}
#cotman2 {position: absolute; left: 45px; top: 38px; z-index: 5;}
#cotman3 {padding: 16px 0 20px 0;}
#cotman4 {position: absolute; left: 213px; top: 560px;}
#cotman5 {position: absolute; left: 427px; top: 560px;}
#cotman6 {position: absolute; left: 641px; top: 560px;}

#mynorfolk1 {padding: 110px 0 20px 0;}
#mynorfolk2 {position: absolute; left: 250px; top: 5px;}

#lizhollis1 {position: absolute; left: 250px; top: 5px;}

#centaur_media {position: relative; margin: 10px 0 10px; padding: 0 0 0px; height: 1120px; border-bottom: 1px solid #999999;}
#centaur1 {padding: 20px 0 20px 0;}
#centaur2 {position: absolute; left: 250px; top: 5px;}
#centaur3 {position: absolute; left: 250px; top: 560px;}

#city_silenced_records {position: relative; margin: 10px 0 10px; padding: 0 0 0px; height: 920px; border: none;}
#csr1 {padding: 20px 0 20px 0;}
#csr2 {position: absolute; left: 250px; top: 5px;}
#csr3 {position: absolute; left: 250px; top: 470px;}



/* BLOG PAGE */
#blog_page h1 {background: url(images/blog_h1.gif) no-repeat;}
#blog_page h1 a {width: 100px; height: 65px; }
#blog_page #content {margin-left: 30px; padding-top: 28px;}

#left {width: 185px; float: left; margin-top: 30px; padding-bottom: 40px;}
#right {float: left; padding-bottom: 40px;}

/* SIDEBAR */
#left h3 {width: 175px; height: 58px; text-indent: -9999px; background: url(images/Sub.jpg) no-repeat;}
#left h3 a {display: block; width: 175px; height: 58px; padding: 0; margin: 0;}
#left h5 {font: 12px Arial, Helvetica, sans-serif; font-weight: bold; color: #B2B2B2; width: 140px; padding: 0 0 10px 0; border-bottom: 1px solid #b2b2b2; margin-bottom: 10px;}
#left ul {list-style-type: none; margin: 0; padding: 0;}
#left ul li, #left ul li a {color: #E6E6E6; margin: 0; padding: 0; font: 10px Arial, Helvetica, sans-serif; font-weight: bold;}


/* MAIN BLOG CONTENT */
.post {position: relative; margin-left: 112px; width: 335px; padding: 15px 0 10px;}
.post h2 {font: 26px "Times New Roman", Times, serif; color: #ff0033; margin-top: 20px; padding: 0 0 10px 0;}
.post h2 a:link, .post h2 a:visited {color: #ff0033;}
.post h2 a:hover {text-decoration: underline;}
.post img {border: 5px solid #E6e6e6; margin: 0; padding: 0;}
.post h4 {font: 12px Arial, Helvetica, sans-serif; font-weight: bold; color: #E6E6E6;}
.post p {font: 12px Arial, Helvetica, sans-serif; color: #E6E6E6; padding: 0 0 10px 0;}
.blogline {margin-top: 10px; width: 100%; height: 1px; background: url(images/border.png) no-repeat;}

.post textarea {width: 325px; height: 100px; border: none; background: #E6e6e6; padding: 5px;
	font: 12px Arial, Helvetica, sans-serif;}
	
#right p.labels {font: 10px Arial, Helvetica, sans-serif; padding: 0 0 20px 0; }
#right p.author {font: 12px "Times New Roman", Times, serif; font-style: italic; padding: 0;}
#right a.comments-link {font: 12px Arial, Helvetica, sans-serif; font-weight: bold; color: #00ffff; }


/* COMMENTS */
.avatar {display: none;}
ol.commentlist {list-style-type: none; margin: 0; padding: 0; border-top: 1px solid #b2b2b2;}
ol.commentlist li.comment {padding-top: 20px; font: 12px Arial, Helvetica, sans-serif; color: #E6E6E6;}
div.comment-meta, ol.commentlist p {margin-top: 5px;}
ol.commentlist p {margin-top: 10px; padding-left: 15px;}
/* COMMENTS FORM */
#commentform { border-top: 1px solid #b2b2b2; padding-top: 20px;}
textarea#comment, input#author, input#email, input#url {background-color: #b2b2b2; border: none; padding: 2px; }
#commentform label {font-size: 10px;}



/* ABOUT PAGE */
#about_page h2 {font: 11px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold; padding-bottom: 10px;}
#text_left {position: relative; margin: 60px 490px 0 0; width: 220px;}
#text_left h2 {padding: 0 0 20px 0;}
#text_left p {margin: 0 0 20px 0;}
#text_left ul {list-style-type: none; padding: 0; margin: 20px 0;} 
#text_left ul li span.red {color: #ff0033; padding-right: 3px;}
#text_right {position: absolute; left: 260px; top: 0; width: 220px; }
#text_right h3 {font: 11px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold; padding: 0;}
#text_right h3.blue {color: #00ffff;}
#text_right p {margin: 0 0 10px 0;}
#text_right a {color: #00ffff;}
#about_image {position: absolute; left: 510px; top: 0;}
#special p {width: 842px; height: 27px; background: url(images/specialtext.png) no-repeat; margin: 20px 0; text-indent:-9999px;}


/* TESTIMONIALS PAGE */
#testimonials_page p.quotes {margin-bottom: 5px;}
#testimonials_page p.author {color: #ffffff; margin-bottom: 15px;}
#col1 {position: relative; margin: 60px 490px 0 0; width: 220px;}
#col2 {position: absolute; left: 265px; top: 0; width: 220px;}
#col1 a, #col2 a {color: #00ffff; margin: 0 0 10px 0; }


/* CONTACT */
#contact {width: 215px; height: 300px; position: relative; margin: 60px 490px 250px 0;}
#contact h3 {font: 11px Arial, Helvetica, sans-serif; font-weight: bold; color: #ffffff; margin-bottom: 15px;}
#contact p {color: #B2B2B2; margin: 0 0 15px 0;}
#contact p.white {color: #ffffff;}
#contact p span.red {color: #ff0033; font-weight: bold;}
#map {position: absolute; left: 270px; top: 0;}


/* ENVIRONMENTAL POLICY PAGE */
#environmental_page {height: 550px;}
#environmental_page a.active {color: #ff0033;}
#environmental_page h2 {position: relative; margin: 60px 0 0px 0; font: 11px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold;} 
#environmental_page h2 a {color: #00ffff;}
#environmental_page h3 {font: 11px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold;}
#environmental_page p {margin-bottom: 15px}
#environmental_page ul {list-style-type: none; margin: 0; padding: 0;}
#environmental_page ul li {margin-bottom: 15px;}
#environmental_page ul li span.red {color: #ff0033; padding-right: 2px;}
#env_left {position: absolute; left: 0px; top: 30px; width: 220px;}
#env_right {position: absolute; left: 250px; top: 30px; width: 220px;}
#env_right a {color: #00ffff;}


/* TERMS & CONDITIONS PAGE */
#terms_page {height: 1200px;}
#terms_page h2 {position: relative; margin: 60px 0 0; font: 11px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold;} 
#terms_page h2 a {color: #00ffff;}
#terms_page h3 {font: 11px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold;}
#terms_page ul {list-style-type: none; margin: 0; padding: 0 0 15px 0;}
#terms_page ul li span.red {color: #ff0033; padding-right: 2px;}
#terms_left {position: absolute; left: 0px; top: 30px; width: 220px;}
#terms_centre {position: absolute; left: 250px; top: 30px; width: 220px;}
#terms_right {position: absolute; left: 500px; top: 30px; width: 220px;}


/*FOOTER */
#footer {width: 100%; margin: 0 0 40px 0; padding: 0 0 20px 0;}
#ssu {position: relative; left: 30px; top: 0; padding: 0px; }
#ssu p {margin: 0; background: url(images/ssu.gif) no-repeat; text-indent: -9999px;}
#ssu a {display: block; width: 173px; height: 15px;}
#address { height: 22px; margin: 0 0 10px 0; padding: 0 0 8px 0; background: url(images/border.png) 30px 22px no-repeat;}
#address p {margin-left: 30px; font: 12px Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold;}
#credits {position: relative; left: 0px; top: -30px;}
#credits ul {list-style-type: none; padding: 10px 0 0 0; margin: 0 0 0 30px;}
#credits ul li {float: left; display: inline; margin: 8px 10px 0px 0; line-height: 10px; color: #999999;}
#credits a:link, #credits a:visited {color: #999999;}
#credits a:hover {text-decoration: underline;}
#credits a.active {color: #ff0033}