/* 
	Different Website
	John McGettrick
	
	COLOUR INDEX KEY
	------------------------------
	White = #FFFFFF	
	Black = #000000	
	Dark Grey = #7E7E80
	Light Grey = #BFBFBF
	Even Lighter Grey = #DEDEDE
*/

/* General Styles */

body {
	margin: 0px 0px 0px 0px;
	text-align :center;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	background:#000000;/* #7E7E80; */
	padding-bottom:16px;
}

div {
	margin: 0px;
	padding: 0px;
	background-color: transparent;
}

p {
	margin: 0px;
	padding: 0px 0px 8px 0px;
	background-color: transparent;
	color:#444444;
	line-height:16px;
}

a {
	cursor:pointer;
}

.spacer {
	clear: both;
}

.bold {
	font-weight:bold;
}

.italic {
	font-style:italic;
}

.right {
	text-align:right;
}

.smalltext {
	font-size:10px;
}

.note {
	font-style:italic;
}

img {
	/*behavior: url("../includes/pngbehaviour.htc");*/
	border:0;
}

.accessTitle {
	display:none;
}

/* Form */

form {
	margin-top:6px;
}

.formrow {
	clear: left;
	margin-bottom:8px;	
	padding-bottom:3px;
}

.formrow .inputMargin {
	margin-left:100px;
}

fieldset {
	border:0px;
	text-align:left;
	padding:0px;
	margin:0px;
}

fieldset label {
	float: left;
	width: 100px;
	color: #333333;
}

/* Containers */

#siteContainer {
	width:804px;
	margin:0px auto;
	padding:0px;
}

#container {
	width: 804px;
	margin: 0px;
	text-align:left;
	background:url('../images/bg_left.gif') left repeat-y;
}

/* Header */

.header {
	height: 124px;
}

.headerLeft {
	height:124px; 
	width: 456px; 
	float:left; 
	background: url('../images/header_different.gif') 217px 43px no-repeat #000000;
}

.headerRight {
	float:left; 
	height:124px;
	width:348px;
}

/* Menu */

#menu {
	background:#000000;
	width:217px;
	float:left;
	color:#FFFFFF;
	text-align:right; 
	height:637px;
}

#menu ul#navMenu {
	list-style:none; 
	text-align:right; 
	margin:2px 23px 0px 0px; 
	padding:0px;
}

#menu ul#navMenu li {
	margin:0px 0px 11px 0px; 
	padding:0px;
	float:right;
	clear:both;
}

/* This is needed to close gap by a pixel between menu items where e.g they have an S meaning the gif is 1px higher or in case of Contact the rollover has a comma below line so gif is 3 pixels higher */
ul#navMenu li.lessPixel { margin:0px 0px 10px 0px; }
ul#navMenu li.less3Pixel { margin:0px 0px 7px 0px; }

ul#navMenu li a {
	display: block;
	background-position:0 0;
	height: 21px;
}

ul#navMenu li#menuNews, ul#navMenu li#menuClients, ul#navMenu li#menuShowreel, ul#navMenu li#menuAwards {
	margin:0px 0px 10px 0px;
}

ul#navMenu li#menuAboutUs, ul#navMenu li#menuContact {
	 margin:0px 0px 7px 0px;
}

ul#navMenu li#menuHome a { background: url(../images/menu_home.gif); width: 143px; }
ul#navMenu li#menuNews a { background: url(../images/menu_news.gif); width: 63px; }
ul#navMenu li#menuWork a { background: url(../images/menu_work.gif); width: 188px; }
ul#navMenu li#menuBlog a { background: url(../images/menu_blog.gif); width: 73px; }
ul#navMenu li#menuClients a { background: url(../images/menu_clients.gif); width: 180px; }
ul#navMenu li#menuShowreel a { background: url(../images/menu_showreel.gif); width: 182px; }
ul#navMenu li#menuAboutUs a { background: url(../images/menu_aboutus.gif); width: 188px; height: 24px; }
ul#navMenu li#menuAwards a { background: url(../images/menu_awards.gif); width: 122px; }
ul#navMenu li#menuContact a { background: url(../images/menu_contact.gif); width: 105px; height: 24px; }
ul#navMenu li#menuExtranet a { background: url(../images/menu_clientarea.gif); width: 137px; }

ul#navMenu li#menuHome a:hover { background: url(../images/menu_home.gif) -143px 0; }
ul#navMenu li#menuNews a:hover { background: url(../images/menu_news.gif) -63px 0; }
ul#navMenu li#menuWork a:hover { background: url(../images/menu_work.gif) -188px 0; }
ul#navMenu li#menuBlog a:hover { background: url(../images/menu_blog.gif) -73px 0; }
ul#navMenu li#menuClients a:hover { background: url(../images/menu_clients.gif) -180px 0; }
ul#navMenu li#menuShowreel a:hover { background: url(../images/menu_showreel.gif) -182px 0; }
ul#navMenu li#menuAboutUs a:hover { background: url(../images/menu_aboutus.gif) -188px 0; }
ul#navMenu li#menuAwards a:hover { background: url(../images/menu_awards.gif) -122px 0; }
ul#navMenu li#menuContact a:hover { background: url(../images/menu_contact.gif) -105px 0; }
ul#navMenu li#menuExtranet a:hover { background: url(../images/menu_clientarea.gif) -137px 0; }