@import "visual_consistencies.css";
@import "clearfix.css";
@import "thickbox.css";

body {
	min-width:875px;
	margin:0;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:center;
	color:#555555;
	background-color:#282828;
	line-height:150%;
	
}
h1 { }
h2 {color:#FF0000; text-transform:uppercase; font-size:130%; }
h3 {
	text-transform:uppercase;
	font-size:110%;
	margin-bottom:-7px;
	padding-bottom:0px;
	margin-top:0px;
	font-weight:bold;
}
h4 {}
h5 {}
p { }
blockquote {}
ul {}
li {}

#mainBody img {border:0 !important; padding:0 !important; margin:0 !important; }
a img { text-decoration:none; border:0 !important; padding:0 !important; margin:0 !important;}

a { text-decoration:none; color:#f61821;}
a:visited {}
a:hover,
a:active {text-decoration:none; color:#555555;}

a.thickbox { /* This style is here just so 'thickbox' appears as a 'style' in Dreamweaver */}

#bodyDiv {
	width:875px;
	padding:0;
	margin:0 auto;
	text-align:left;
	font-weight: normal;
}

.red {color:#f61821;}
.caps {text-transform:uppercase !important;}


table {border:0 !important; padding:0 !important; margin:0 !important;}
td {border:0 !important; padding:0 !important; margin:0 !important;}
tr {border:0 !important; padding:0 !important; margin:0 !important;}

/* ------------------ */
/* HEADER STYLES */
/* ------------------ */


#headerDiv {
	position:relative;
	width:875px;
	height:125px;
	padding:0;
	margin:0px 0 0 auto;
	text-align:left;
	background-color:#000;
	border-bottom:solid 5px #fff;
}
#headerDiv .logo { position:absolute; bottom:17px; right:35px;}

#navigationDiv {
	position:absolute;
	top:12px;
	left:29px;
	width:488px;
	height:135px;
	margin:0;
	text-align:left;
	float:left;
	font-size:9px;
	text-transform:uppercase;
	color:#f00;
}
#navigationDiv div {  float:left; display:inline;}
#navigationDiv div#capabilitiesNav {
	width:140px;
}
#navigationDiv div#whoweareNav {
	width:160px;
}
#navigationDiv div#youNav { width:100px;}
#navigationDiv ul { margin:0; padding:0; list-style:none;}
#navigationDiv ul li { margin:0; padding:0;}
* html #navigationDiv ul li { display:inline;}
#navigationDiv ul li a { display:block; color:#888; margin:0; padding:0px 8px 1px 8px;}
#navigationDiv ul li a:hover { color:#f61821;}
#navigationDiv h3 { color:#fff; padding:6px 8px 1px 8px; font-size:9px; font-weight:100; margin:0;}
body.visualidentity #visualidentityNav,
body.strategy #brandstrategyNav,
body.interactive #interactiveNav,
body.marketing #marketingNav,
body.retail #retailNav,
body.whatiszap #whatiszapNav,
body.howwezap #howwezapNav,
body.whowezap #whowezapNav,
body.contact #contactNav,
body.joinus #joinusNav,
body.marketer #marketerNav,
body.corporate #corporateNav,
body.agency #agencyNav { color:#f61821; }

/* ------------------ */
/* MAIN COLUMN STYLES */
/* ------------------ */

#mainBody { width:875px; background-color:#fff;}
#middleContent {
	height:325px;
	background-color:#f61821;
	margin:0px;
	padding:0px;
	position:relative;
}
body.casestudies #middleContent {
	height:325px;
	background-color:#fff !important;
	margin:0px;
	padding:0px;
}

#middleContent a.thickbox span { display:none;}

/* ---THUMBS--- */

div.thumbs { width:316px; margin:0 0 0 33px; float:left; display:inline; background:#000; padding:1px 0 0 1px; border-left:solid 5px #fff; border-right:solid 5px #fff;}
div.thumbs a { float:left; margin-left:0px; display:block; width:78px; height:64px; background-position:-78px 0px; background-repeat: no-repeat; margin:0 1px 1px 0;}
div.thumbs a:hover { background-position:0px 0px;}
div.thumbs a span { display:none;}
div.thumbs a#thumbBtnOne {background-image:url(../images/thumbs/thumbs_01.jpg);}
div.thumbs a#thumbBtnTwo {background-image:url(../images/thumbs/thumbs_02.jpg);}
div.thumbs a#thumbBtnThree {background-image:url(../images/thumbs/thumbs_03.jpg);}
div.thumbs a#thumbBtnFour {background-image:url(../images/thumbs/thumbs_04.jpg);}
div.thumbs a#thumbBtnFive {background-image:url(../images/thumbs/thumbs_05.jpg);}
div.thumbs a#thumbBtnSix {background-image:url(../images/thumbs/thumbs_06.jpg);}
div.thumbs a#thumbBtnSeven {background-image:url(../images/thumbs/thumbs_07.jpg); }
div.thumbs a#thumbBtnEight {background-image:url(../images/thumbs/thumbs_08.jpg);}
div.thumbs a#thumbBtnNine {background-image:url(../images/thumbs/thumbs_09.jpg);}
div.thumbs a#thumbBtnTen {background-image:url(../images/thumbs/thumbs_10.jpg);}
div.thumbs a#thumbBtnEleven {background-image:url(../images/thumbs/thumbs_11.jpg);}
div.thumbs a#thumbBtnTwelve {background-image:url(../images/thumbs/thumbs_12.jpg);}
div.thumbs a#thumbBtnThirteen {height:63px; background-image:url(../images/thumbs/thumbs_13.jpg);}
div.thumbs a#thumbBtnFourteen {height:63px; background-image:url(../images/thumbs/thumbs_14.jpg);}
div.thumbs a#thumbBtnFifteen {height:63px; background-image:url(../images/thumbs/thumbs_15.jpg);}
div.thumbs a#thumbBtnSixteen {height:63px; background-image:url(../images/thumbs/thumbs_16.jpg);}
div.thumbs a#thumbBtnSeventeen {background-image:url(../images/thumbs/thumbs_17.jpg);}
div.thumbs a#thumbBtnEighteen {background-image:url(../images/thumbs/thumbs_18.jpg);}
div.thumbs a#thumbBtnNineteen {background-image:url(../images/thumbs/thumbs_19.jpg);}
div.thumbs a#thumbBtnTwenty {background-image:url(../images/thumbs/thumbs_20.jpg);}

/* ---GRAPHIC--- */

div.graphic { border:none; float:right; display:inline; margin:0px; padding:0 5px 0 0; width:510px; height:325px; overflow:hidden;}
div.graphic img { border:none; margin:0px; padding:0px;}
div.graphic p.headline {color:#fff; margin-left:11px; margin-top:86px; margin-right:20px; font-size:17px; line-height:190%; font-weight:normal !important;}


/* ---VIDEO AND AUDIO HTML--- */


body.av {min-width:370px; padding-top:55px; background-color:#FFFFFF; }
body.av.radio {padding-top:35px;}
body.av .nav{margin-left:150px;}
body.av a{color:#666; }
body.av a:hover{color:#000; }
body.av img{margin-bottom:15px;}
body.av p{ font-size:10px;}

/* ------------- */
/* FOOTER STYLES */
/* ------------- */

#footerDiv {
	width:875px;
	padding:0px 0 20px 0;
	margin:0;
	text-align:left;
	background-color:#FFFFFF;
	height:auto;
}
#footerDiv div.leftColumn {
	width:319px;
	float:left;
	clear:both;
	display:inline-block;
	padding:15px 0 25px 36px;
	background-color:#FFFFFF;
	position:relative;
	font-weight: normal;
}
#footerDiv div.leftColumn a{ margin-top:15px !important; }
#footerDiv div.rightColumn {width:465px; float:left;  padding:15px 0px 10px 15px !important; display:inline-block; background-color:#FFFFFF;}
#footerDiv div.rightColumn #columns {}
#footerDiv div.rightColumn #columns .columnOne {
	width:225px;
	float:left;
}
#footerDiv div.rightColumn #columns .columnTwo {
	width:240px;
	float:left;
}
#footerDiv div.rightColumn #columns .columnThree {width:152px; float:left;}
#footerDiv div.copyright {width:830px; margin:0px 0 0px 36px; text-align:left; background-color:#fff; display:inline-block; clear:inherit;}
#footerDiv div.copyright p {font-size:9px; color:#908f8d; text-transform:uppercase; text-align:left; margin-left:0 !important;}

#rolloverText { position:absolute; top:28px; left:40px; width:250px; color:#FF0000; text-transform:uppercase; font-size:100%; }

#rolloverTitle {position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:0 3px 0 3px; opacity:0.85; font-size:9px; font-weight:normal; color:#555555; border-color:#555555;}

#caseInstructions {
	float:right;
	font-size:100%;
	margin:2px 0 0 0;
	padding:0px;
	line-height:100%;
	color:#f61821;
	text-transform:uppercase;
}
.caseimages {}

body.casestudies #footerDiv {border-top:5px solid #CCC; margin-top:5px;}

/* -- JQUERY ROLLOVER TITLE TOOLTIPS -- */




#tooltip { position: absolute; z-index: 3000; border: 1px solid #111; background-color: #eee; padding:0 3px 0 3px; opacity: 0.85; font-size:9px; font-weight:normal; color:#555555; border-color:#555555;}
#tooltip h3, #tooltip div { margin: 0;}
.boldheaders {
	font-weight: bold;
	text-transform: uppercase;
}
.lists {
	width: 875
	px;
}