/*
Inside CSS
*/

/* Reset Everything */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/* Fonts - Now we sort the font size issues */
body {font:12px/1.231 geneva,arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
/**
 * Bump up IE to get to 13px equivalent
 */
pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;}


/* Styles */
body {background-color: #d7d7d7; background-image:url('img/mp_bg_grad.png'); background-repeat: repeat-x;}

#wrapper {margin-left: auto; margin-right: auto; width: 986px; padding: 10px; background-color: #fff;}
#header {margin: 0;}

#menu {width: 760px; float: right; margin: 14px 0 20px 0;}

#menu ul {margin: 0; padding: 0;}
#menu ul li {display: inline; float: left; text-align: right;}
#menu ul li a {display: block; width: 90px; padding: 8px 55px 0 0; color: #a9a9a9; text-decoration: none; height: 30px; background-repeat: no-repeat; background-position: 95px -8px;}
#menu ul li a:hover {color: #000; text-decoration: underline;}

#menu ul li a#cm {background-image:url('img/menu_icon_cm.gif');}
#menu ul li a#dp {background-image:url('img/menu_icon_dp.gif');}
#menu ul li a#ad {background-image:url('img/menu_icon_ad.gif');}
#menu ul li a#cd {background-image:url('img/menu_icon_cd.gif');}
#menu ul li a#os {background-image:url('img/menu_icon_os.gif');}


/* General */
strong {font-weight: bold;}
p, ul, ol {line-height: 1.4em;}
em {font-style: italic;}

/* Logo */
h1#logo-heading	{
	text-indent: -999em;
	float: left;
	margin: 0; padding: 0; border: 0;
	}

h1#logo-heading a:link, h1#logo-heading a:visited {
	display: block;
	width: 208px;
	height: 59px;
	background: #fff url('img/mp_logo_off.gif') no-repeat;
	margin: 0 0 10px 0px;
	padding: 0;
	border: 0;
	}

h1#logo-heading a:hover	{
	background: #fff url('img/mp_logo_on.gif') no-repeat top left;
	}
	
		
/* New Menu */
		
#black-menu-container {
	clear: both; height: 40px; margin: 0px 0 10px 0;
	}

#black-menu{
	background-color: #000;
	color: #fff;
	list-style: none;
	list-style-type: none;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 23px;
	margin-top: 0px;
	}

#black-menu li{
	display: block;
	float: right;
	margin-top: -6px;
	text-align: left;
	text-indent: -9999px;
	width: 27px;
	height: 35px;
	}

#black-menu li a{
	display: block;
	width: 100%;
	height: 100%;
	}
	
#black-menu li#home{
	background-image: url('img/home.gif');
	}

#black-menu li#rss{
	background-image: url('img/rss.gif');
	}
	
#black-menu li#sitemap{
	background-image: url('img/sitemap.gif');
	}

#black-menu li#search-box{
	text-indent: 0px;
	width: 200px;
	padding-left: 1em;
	}
	
#search-box form,
#search-box form div{
	display: inline;
	text-indent: 0px;
	}
	
#black-menu li#search-box label{
	display: none;
	}
	
#black-menu li#search-box input{
	float: left;
	}
	
#black-menu li#search-box input#s {
	margin-top: 9px;
	background-color: #fff;
	border: 1px solid #000;
	font-family: geneva, Arial, helvetica, 'san-serif';
	width: 150px;
	font-size: 1em;
	font-weight: bold;
	height: 15px;
	background-image: url('img/bg-search.gif');
	background-position: center right;
	background-repeat: no-repeat;
	}


/* Content Layout */

/* -21px is for who? Netscape 4, I would guess - er yes */
.columns
	{
	clear 				: both;
	margin				: 0;
	margin-top			: 5px;
	padding				: 0px;
	color				: #ffffff;
	}
/* NB - OmniWeb displays the 1px space as looking somewhat thicker, but set it to 0px and there is no space */
/* IE5 gets the spacing all wrong: -18px puts it right. Then use the tantek-family hack to make everything right again */
/*/*/
.columns
	{
	margin-top			: -18px;
	font-family			: "\"}\"";
	font-family			: inherit;
	margin-top			: 1px;
	}
/* */
/* empty required to get IE5 vback on track */
#empty{}

.leftcolumn
	{
	float				: left;
	left				: 0px;
	width				: 200px;
	margin				: 0;
	margin-top			: -11px;
	padding				: 0px;
	color				: #000000;
	}
.leftcolumn
	{
/*/*/
	margin-top			: 0px;
/* */
	}
	
#subnav {padding: 0 0 10px 0; margin: 0;}
#subnav li {padding: 2px 0 2px 0; list-style-type: none;}
#subnav li a {display: block; color: #fff; text-decoration: none; padding: 4px;}
#subnav li a:hover {color: #fff; background-color: #a9a9a9;}

#subnav li ul {margin: 4px 0 5px 5px;}
#subnav li ul li {padding: 0; height: 1%; }
#subnav li ul li a {color: #8f8e8e; background-color: #fff; padding: 4px;}

/* Sub Nav colours */
ul.cm li a {background-color: #e20c63;}
ul.dp li a {background-color: #2db51e;}
ul.ac li a {background-color: #004bc7;}
ul.cd li a {background-color: #f27a00;}
ul.os li a {background-color: #8d00b2;}

/* Push Boxes */

#catalyst-pb {background-color: #000; margin: 10px 0 0 0;}
#catalyst-pb h3 {text-indent: -9999em;}
#catalyst-pb h3 a {display: block; background:url('img/pb_catalyst.gif') no-repeat; height: 26px;}

#contact-pb {background-color: #000; margin: 20px 0 0 0;}
#contact-pb h3 {text-indent: -9999em;}
#contact-pb h3 a {display: block; background:url('img/pb_contact.gif') no-repeat; height: 26px;}
#contact-pb ul {margin: 0 10px 10px 40px; padding: 0 0 10px 0;}
#contact-tel, #contact-fax, #contact-email {color: #fff;}
#contact-tel {list-style-image:url('img/home_contact_tel.gif');}
#contact-fax {list-style-image:url('img/home_contact_fax.gif');}
#contact-email {list-style-image:url('img/home_contact_email.gif');}

#about-pb {background-color: #000; margin: 20px 0 0 0;}
#about-pb h3 {text-indent: -9999em;}
#about-pb h3 a {display: block; background:url('img/pb_about.gif') no-repeat; height: 26px;}

#blog-pb {background-color: #000; margin: 0;}
#blog-pb h3 {text-indent: -9999em;}
#blog-pb h3 a {display: block; background:url('img/pb_blog.gif') no-repeat; height: 26px;}
#blog-pb ul {margin: 10px;}
#blog-pb ul li {margin: 5px 0 0 0; padding: 0 0 0 10px;}

#clients-pb {background-color: #000; margin: 20px 0 0 0;}
#clients-pb h3 {text-indent: -9999em;}
#clients-pb h3 a {display: block; background:url('img/pb_clients.gif') no-repeat; height: 26px;}
#clients-pb img {padding: 0 0 0 35px;}

#catalyst-pb p, #contact-pb p, #blog-pb p, #about-pb p, #clients-pb p {color: #a9a9a9; padding: 10px;}
#catalyst-pb a, #contact-pb a, #blog-pb a, #about-pb a, #clients-pb a {color: #fff; text-decoration: none;}
#catalyst-pb a:hover, #contact-pb a:hover, #blog-pb a:hover, #about-pb a:hover, #clients-pb a:hover {color: #fff; text-decoration: underline;}


/*
make sure that the hack widths equals the value of .centercolumn's margin-right
the initial width is for NN4 - experiment and set to what seems best
*/
.rightcolumn
	{
	position			: static;
	float				: right;
	width				: 220px;
	margin				: 0px;
	padding				: 0px;
	z-index				: 3;
	color				: #000000;
	}

/* 
For NN4, -25px is the margin-left setting to make the centercolumn column but up against the left column. (OmniWeb is much the same, but this stylesheet makes no allowances for it).
For other browsers, the equivalent margin-left setting is equal to the width of the left column.
margin-right is set to the value of the overriding values for .rightcolumn's width. 
A margin can be created between these two columns either by changing these values, or by setting the padding of the relevant #...padding divs.
margin-top is set to -1px to make NN4 line up correctly.
*/

#section-home-center-cm, #section-home-center-dp, #section-home-center-ac, #section-home-center-cd, #section-home-center-os {margin: 0; padding: 0; height: 275px; background-repeat: no-repeat;}
#section-home-center-cm {background-image:url('img/colour_section_home_banner.jpg');}
#section-home-center-dp {background-image:url('img/photo_section_home_banner.jpg');}
#section-home-center-ac {background-image:url('img/ad_section_home_banner.jpg');}
#section-home-center-cd {background-image:url('img/design_section_home_banner.jpg');}
#section-home-center-os {background-image:url('img/online_section_home_banner.jpg');}


.centercolumn
	{
	margin				: 0px;
	padding				: 0px;
	color				: #000000;
	z-index				: 4;
	}
.centercolumn
	{
	margin-right		: 0px;
	margin-top			: -1px;
	margin-bottom		: 0px;
	margin-left			: -19px;
	}
/* IE5 once again goes awry - shift it down (29px is right for this layout but no doubt the exact value will vary [sigh]) and then zap 
empty because otherwise IE5 goes rampaging on */
/*/*/
.centercolumn
	{
	margin-right		: 245px;
	margin-left			: 225px;
	margin-top			: 29px;
	font-family			: "\"}\"";
	font-family			: inherit;
	margin-top			: 0px;
	}
	
/* Content Styles */
.centercolumn, #blog-left {line-height: 1.6;}
.centercolumn p, #blog-left p {margin: 15px 0 15px 0;}
.centercolumn ul {margin: 10px 0 10px 40px;}
.centercolumn ul li {list-style: square outside;}
.centercolumn ol {margin: 10px 0 10px 50px;}
.centercolumn ol li {list-style: decimal outside;}
.centercolumn h1, #blog-left h1 {margin: 0 0 10px 0; font-size: 160%; text-transform: uppercase; font-family: helvetica, verdana, arial, sans-serif;}
.centercolumn h2, #blog-left h2 {margin: 0 0 10px 0; font-size: 130%; font-weight: bold;}
.centercolumn h3, #blog-left h3 {margin: 0 0 10px 0; font-size: 120%; font-weight: bold;}
code {padding: 5px; border: 1px dashed #cecece;}
.right {float: right;}

.cm-content a, .cm-content a, .ac-content a, .cd-content a, .os-content a {text-decoration: none;}
.cm-content a:hover, .cm-content a:hover, .ac-content a:hover, .cd-content a:hover, .os-content a:hover {text-decoration: underline;}
.cm-content a {color: #e20c63;}
.dp-content a {color: #2db51e;}
.ac-content a {color: #004bc7;}
.cd-content a {color: #f27a00;}
.os-content a {color: #8d00b2;}
	
#empty{}
/*  */

/* following bit only necessary if OmniWeb to be handled - the .fake bit is only picked up by OmniWeb, IE and, er, Amaya
see  http://www.fu2k.org/alex/css/test/OmniWebInlineHack.mhtml
But exclude it from IE5/mac */
/*\*/
.fake.centercolumn
	{
	margin-right		: 1px;
	margin-left			: 1px;
	}
/* this bit resets for IE */
* html .centercolumn
	{
	margin-right		: 220px;
	margin-left			: 210px;
	}
/* End of OmniWeb shenanigans */

.clear {clear: both; font-size: 1px; line-height: 0px;}


.centerpadding, .rightpadding
	{
	margin				: 0px;
	padding				: 10px;
	}

.centerpadding {margin-top: 0px;}

.leftpadding {}

table {}
td {border: 1px solid #fd1a78; text-align: center; padding: 20px 5px 15px 5px;}

/* BLOG STYLES */
#blog-left {margin: 0 320px 0 20px;}
#blog-left a {color: #fd1a78; text-decoration: none;}
#blog-left a:hover {color: #000; text-decoration: underline;}
#blog-right {float: right; width: 280px;}
#blog-right a {text-decoration: none;}
#blog-right a:hover {text-decoration: underline;}



.post {margin: 0 0 40px 0;}
.post blockquote {background-color: #eeeeee; padding: 30px; margin: 20px 40px 10px 40px;}
.post ul {margin: 10px 0 10px 40px;}
.post ul li {list-style: square outside;}
.post-data {margin-top: 60px; padding: 10px; font-size: 90%; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; color: #6c6d6d; background-color: #fafafa;}


/* Blog sidebar */
#blog-categories, #blog-latest-comments {background-color: #000; margin: 0 0 20px 0; color: #a9a9a9;}
#blog-categories h3, #blog-latest-comments h3 {text-indent: -9999em;}
#blog-categories h3 a {display: block; background:url('img/pb_blog_category.gif') no-repeat; height: 26px;}
#blog-categories ul {margin: 0; padding: 10px;}
#blog-categories ul li {margin: 5px 0 0 0; padding: 0 0 0 10px; color: #fd1a78;}
#blog-categories ul li a {color: #fff;}

#blog-utils, #blog-latest-comments {background-color: #000; margin: 0 0 20px 0; color: #a9a9a9;}
#blog-utils h3, #blog-latest-comments h3 {text-indent: -9999em;}
#blog-utils h3 a {display: block; background:url('img/pb_masterpiece_blog.gif') no-repeat; height: 26px;}
#blog-utils h4 {font-size: 110%; color: #fff; margin: 10px 0 0 11px;}
#blog-utils ul {margin: 0; padding: 10px;}
#blog-utils ul li {margin: 5px 0 0 0; padding: 0 0 0 10px; color: #fd1a78;}
#blog-utils ul li a {color: #fff;}

#blog-next {float: right; width: 40%; text-align: right;}
#blog-previous {}

/* BLOG COMMENTS */
label {font-weight: bold; width: 200px;}
#author, #email, #url, #comment {border: 1px solid #dedede; background-color: #fafafa; padding: 4px;}
#author:focus, #email:focus, #url:focus, #comment:focus {border: 1px solid #fd1a78; background-color: #fff;}
#email {}
#url {}
#comment {width: 550px; font-family: arial;}
ol.commentlist li.alt {background-color: #fafafa;}
ol.commentlist li {padding: 15px;}

/* Client - Not really home */
#inside-clients {clear: both; background-image:url(img/home_clients.gif); background-repeat: no-repeat; margin: 20px 0 10px 0;}
#inside-clients h3 {text-indent: -999em; border: none; margin: 0; padding: 0;}
#inside-clients h3 a {height: 80px; width: 977px; display: block;}

/* Inside Bottom PBS */
#services {margin: 10px 0 10px 0; padding: 0; min-height: 120px;}
div.services-pb {float: left; width: 182px; padding: 0; background-color: #000;}
div.services-pb h2 {text-indent: -9999em;}
div.services-pb p {color: #a9a9a9; padding: 0 10px 10px 10px;}

#services-colour-management {margin: 0 19px 10px 0;}
#services-colour-management h2 a {background:url('img/services_text_cm.gif') no-repeat 10px 10px; display: block; width: 182px; height: 50px; margin: 0;}

#services-digital-photography {margin: 0 19px 10px 0;}
#services-digital-photography h2 a {background:url('img/services_text_dp.gif') no-repeat 10px 10px; display: block; width: 182px; height: 50px; margin: 0;}

#services-ad-campaign-management {margin: 0 19px 10px 0;}
#services-ad-campaign-management h2 a {background:url('img/services_text_ad.gif') no-repeat 10px 10px; display: block; width: 182px; height: 50px; margin: 0;}

#services-creative-design {margin: 0 19px 10px 0;}
#services-creative-design h2 a {background:url('img/services_text_cd.gif') no-repeat 10px 10px; display: block; width: 182px; height: 50px; margin: 0;}

#services-online-services {margin: 0 0 10px 0;}
#services-online-services h2 a {background:url('img/services_text_os.gif') no-repeat 10px 10px; display: block; width: 182px; height: 50px; margin: 0;}

.credits, .linklove {display: none;}

		
/* Footer */
#footer {background-color: #a9a9a9; clear: both; padding: 10px 0 10px 0; font-size: 90%; margin: 10px 0;}
#footer ul {margin: 0; text-align: center;}
#footer ul li {display: inline; color: #fff; border-right: 1px solid #939393; padding: 0 10px; }
#footer ul li.none {border: none;} 
#footer ul li a {color: #fff;}