/**********************************

Use: Core CSS styling
Author: Katalogue



***********************************/

/* Global Elements
-----------------------------------*/




/* Global Styles
-----------------------------------*/

.floatLeft { float:left; }

.floatRight { float:right; }

.clearFix {clear:none;}



/* Layout
-----------------------------------*/

body {
	background:#3a3a3a url(../images/background_gradient.gif) repeat-y center 0;
	font-size:62.5%;
	margin:0 auto;
	padding:0;
	text-align:center;
	font: "Times New Roman", Times, serif;
}

#wrapper {
	position: relative;
	margin:0 auto;
	padding:0;
	text-align:center;
	width: 850px;
	height: 100%;
}

#contentWrapper {
	position: relative;
	top: 510px;
	margin:0 auto;
	padding:0;
	text-align:center;
	width: 100%;	
	xoverflow: hidden;
	clear: both;
	background-color: #666666;
}	

#contentWide {
	margin:0;
	padding:0;
	float: left;
	width: 566px;	
}

#contentNarrow {
	margin:0;
	padding:0;
	float: right;
	width: 284px;

}

#movie{
	position: absolute;
	top: 0;
	left: 0;
	height: 40px;
	z-index: 0;	
	width: 100%;
	padding: 0;
	margin: 0;

}

/* Header
-----------------------------------*/
#overMovie {
	position: absolute;
	top: 3.8em;
	left: 0;
	z-index: 1;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 47.2em;
	xoverflow: hidden;
}

#logoBar {
	background:url(../images/logBar.png) no-repeat 0 0;
	height: 4.5em;
	width: 850px;
	margin: 0 0 6.7em 0;
}

#logoBar h2{
	float: left;
	width: 100px;
	color: #FFF;
	text-align: left;
	font: normal 1.4em "Times New Roman", Times, serif;
	padding: 4px 10px 1px 10px;
}

#logoBar h2 a{
	color: #FFF;
	text-decoration: none;
}

#logoBar h1{
	float: right;
	width: 500px;
	color: #FFF;
	text-align: right;
	font: normal 1.4em "Times New Roman", Times, serif;
	padding: 4px 10px 1px 10px;
}



/* Navigation
-----------------------------------*/

#navBar {
	background-color: #ededed;
	height: 40px;
	width: 850px;
	padding: 0;
	margin: 0;
}

#navBar ul{
	text-align: left;
	width: 100%;
}

#navBar li{
	display: inline;
	float: left;
	font: normal 1.3em "Times New Roman", Times, serif;

}

#navBar li a{
	display: block;
	outline: none;
	color: #666;
	text-decoration: none;
	padding: 10px 15px;
	border-bottom: 4px solid #ededed;
	background: url(../images/navDivide.gif) no-repeat right center;
}

#navBar li a:hover{
	display: block;
	outline: none;
	color: #666;
	
}

#navBar li a.intro:hover{border-bottom: 4px solid #ea1f59;}
#navBar li a.digital:hover{border-bottom: 4px solid #cc2e5b;}
#navBar li a.video:hover{border-bottom: 4px solid #cc2e5b;}
#navBar li a.print:hover{border-bottom: 4px solid #8e244c;}
#navBar li a.interiors:hover{border-bottom: 4px solid #752043;}
#navBar li a.client:hover{border-bottom: 4px solid #4f1630;}
#navBar li a.contact:hover{border-bottom: 4px solid #441732;}



/* Content
-----------------------------------*/



/* General elements - headings, paragraphs, misc, etc */

#desginDeviation {
	background:url(../images/contentGradient.gif) no-repeat 0 0;
	text-align: left;
	padding: 30px;
	height: 178px;
}

#desginDeviation h2 {
	font: normal 1.7em "Times New Roman", Times, serif;
	color: #333;
	margin: 0;
	border-top: 2px solid #b1b1b0;
	padding: 12px 0 20px 0;
}

.lightText {
	color: #666;
}

.definition {
	font: normal 1.3em "Times New Roman", Times, serif;
	padding: 0;
	margin: 0;
}

.definition p{
	padding: 0;
	margin: 0;
}

.number {
	float: left;
	width: 30px;
}

.meaning{
	float: left;
	width: 185px;
}

#introHeading{
	background: url (../images/widePNG_reverse.png) no-repeat 0 0;
	margin: 201px 0 0 0;
}

#pinkBar {
	width: 100%;
	height: 8px;
	background-color: #ea1f59;
	padding: 0;
	margin: 0;
}

/* Boxes */

#bottomWrapper {
	position: relative;
	margin: 0 auto;
	text-align: center;
	xtop: 51em;
	z-index: 3;
	width: 85em;
	border: 1px solid red;
	overflow: auto;
}

#colLeft {
	float: left;
	width: 56.6em;
	text-align: left;
	padding: 0; 
	margin: 0;
}

.clientLogos {
	border-top: .1em solid #abaaa9;
	height: 6.7em;
}

.clientLogos a {
	width: 14.2em;
	height: 6.7em;
	display: block;
	float: left;
	text-decoration: none;
}

.clientLogos a.disney{background: url(../images/clientButtonDisney.gif) no-repeat 0 0;} .clientLogos a.disney:hover{background: url(../images/clientButtonDisney.gif) no-repeat 0 -6.7em;}
.clientLogos a.yahoo{background: url(../images/clientButtonYahoo.gif) no-repeat 0 0;} .clientLogos a.yahoo:hover{background: url(../images/clientButtonYahoo.gif) no-repeat 0 -6.7em;}
.clientLogos a.warwick{background: url(../images/clientButtonFraser.gif) no-repeat 0 0;} .clientLogos a.warwick:hover{background: url(../images/clientButtonFraser.gif) no-repeat 0 -6.7em;}
.clientLogos a.telegraph{background: url(../images/clientButtonTelegraph.gif) no-repeat 0 0;} .clientLogos a.telegraph:hover{background: url(../images/clientButtonTelegraph.gif) no-repeat 0 -6.7em;}
.clientLogos a.freemantle{background: url(../images/clientButtonFremantle.gif) no-repeat 0 0;} .clientLogos a.freemantle:hover{background: url(../images/clientButtonFremantle.gif) no-repeat 0 -6.7em;}
.clientLogos a.playstation{background: url(../images/clientButtonAustin.gif) no-repeat 0 0;} .clientLogos a.playstation:hover{background: url(../images/clientButtonAustin.gif) no-repeat 0 -6.7em;}
.clientLogos a.bigIssue{background: url(../images/clientButtonIssue.gif) no-repeat 0 0;} .clientLogos a.bigIssue:hover{background: url(../images/clientButtonIssue.gif) no-repeat 0 -6.7em;}
.clientLogos a.hof{background: url(../images/clientButtonPlaystation.gif) no-repeat 0 0;} .clientLogos a.hof:hover{background: url(../images/clientButtonPlaystation.gif) no-repeat 0 -6.7em;}
.clientLogos a.summers{background: url(../images/clientButtonSummers.gif) no-repeat 0 0;} .clientLogos a.summers:hover{background: url(../images/clientButtonSummers.gif) no-repeat 0 -6.7em;}
.clientLogos a.carrefour{background: url(../images/clientButtonCarrefour.gif) no-repeat 0 0;} .clientLogos a.carrefour:hover{background: url(../images/clientButtonCarrefour.gif) no-repeat 0 -6.7em;}

img {
	padding: 0;
	margin: 0;
}


/* lists */

#introText {
	background:url(../images/introBack.gif) no-repeat 0 0;
	text-align: left;
	padding: 0; 
	margin: 0;		
	width: 100%;
}

#introText p {
	font: normal 1.3em "Times New Roman", Times, serif;
	padding: 18px 20px;
	color: #444;

}

#ourServicesHeader {
	background: url(../images/ourServices.gif) no-repeat 0 0;
	width: 56.6em;
	height: 6.3em;
}

#ourServices{
	margin: 0;
	background: url(../images/servicesListingBack.gif) no-repeat 0 0;
	overflow:auto;
}

#ourServices ul{
	margin: 1em 0;
	list-style:none;}

#ourServices li{
	font: normal 1.2em/1.3em "Times New Roman", Times, serif;
	color: #333;
	padding: 0 0 0 2.5em;
}

#ourServices #one {
	width: 50%;
	float: left;

}

#ourServices #two {
	width: 50%;
	float: left;
	background: url(../images/introBack.gif) no-repeat 0 100%;
}

#ourServices #one h3, #ourServices #two h3{
	background-color: #ea1f59;
	font: normal 1.2em "Times New Roman", Times, serif;
	color: #FFF;
	padding: .1em 0 .1em 2.5em;
}

#mailingList {
	background:url(../images/introBack.gif) no-repeat 0 0;
	}

/* tables */



/* Footer
-----------------------------------*/




.headingLight {
	background:url(../images/introBack.gif) no-repeat 0 0;
	font: normal 15.5px "Times New Roman", Times, serif;
	text-align: left;
	padding: 15px 0 17px 20px;
}
.headingDark {
	background: #666 url(../images/headerBackGradient.gif) repeat-x 0 0;
	font: normal 15.5px "Times New Roman", Times, serif;
	text-align: left;
	padding: 15px 0 17px 20px;
	color: #EEE;
	margin: 0;
	text-indent: 10px;
}

.listWrapper {
	overflow: hidden;
	background: #FFF url(../images/contentGradient.gif) no-repeat 0 0;
	width: 100%;
}

.listLeft, .listRight {
	float: left;
	text-align: left;
	width: 50%;
}

.listLeft h3, .listRight h3 {
	font: normal 1.2em "Times New Roman", Times, serif;
	color: #FFF;
	background-color: #ea1f59;
	padding: 3px 20px;
}

.listLeft ul, .listRight ul {
	list-style: none;
	padding: 10px 0;
}

.listLeft ul{
	border-right: 1px solid #cccbcb;
}

.listLeft li, .listRight li {
	padding: 1px 20px;
	font: normal 1.2em "Times New Roman", Times, serif;

}	

#footer {
	font: normal 1.2em "Times New Roman", Times, serif;
	color: #FFF;
	background-color: #ea1f59;
	padding: 3px 20px;
	width: 67.5em;
	clear:both;
	text-align: left;
}

#footer a{
	color: #FFF;
	text-decoration: none;
}

form {
	padding: 10px 20px;
	clear: both;
}

.inputStyle {
	width: 238px; background-color: #333; padding: 4px 0;text-indent: 5px; color: #FFF; font: normal 13px 'Times New Roman', Times, serif;
}

#submit {
	width: 90px; background-color: #333; padding: 4px 0; color: #FFF; font: bold 13px 'Times New Roman', Times, serif; cursor:pointer; float: right; margin: 10px 3px 10px 0;
}

#submit:hover{
	background-color: #444;
}