/*	===============================================================
	© TDG Integrated
	http://www.tdgintegrated.com/	

	Type:				Structural Styles
	Build by:			TDG Integrated
	Document Author:	James Lester
	Author Email:		j.lester@tdgintegrated.com
	Creation Date:		3rd June 2008
	---------------------------------------------------------------
	Version number: 	2.0
	Last edited:		NA - Still in developement
	============================================================ */


/*	===============================================================
	DOCUMENT CONTENTS
	
	1.	Global settings
	2.	Positioning & Structure rules
	3.	Primary navigation
	4.	Secondary Navigation
    5.	Sidebar
	6.	Footer
    7.	Extra Elements
	------------------------------------------------------------ */
	
	
/*	---------------------------------------------------------------
	#1 GLOBAL SETTINGS
	---------------------------------------------------------------
	these are mostly font sizing and positional issues
	------------------------------------------------------------ */

body { background: #272321;
	margin: 0px; padding: 0px; }



/*	---------------------------------------------------------------
	#2 POSITIONING & STRUCTURE RULES
	---------------------------------------------------------------
	Outlines the main structure of the website
	------------------------------------------------------------ */

#header {
    display: block;
    width: 924px;
    min-height: 180px;
    height: auto !important;
    height: 180px;
    margin: 0px auto 0px auto;
    position: relative;
    background: #272321;
}

#logo { margin: 0px; padding: 0px; }
#logo a {
    position: absolute;
    display: block;
    width: 199px;
    height: 116px;
    background: Transparent url(../images/global/logo.gif) no-repeat;
    top: 25px;
    left: 0px;
	padding-top: 116px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden; 
}

#engaging-brand-performace {
    position: absolute;
    display: block;
    width: 154px;
    height: 100px;
    background: Transparent url(../images/global/ebp.gif) no-repeat;
    top: 25px;
    right: 0px;
	padding: 100px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;    
}




#strap-outer {
    display: block;
    height: 260px;
    background: Transparent url(../images/global/flashbg.gif) repeat-x;
}

#content-area {
    display: block;
    width: 924px;
    min-height: 200px;
    height: auto !important;
    height: 200px;
    margin: 0px auto 0px auto;
    position: relative;
}

#text-block {
    display: block;
    float: left;
    width: 558px;
    min-height: 200px;
    height: auto !important;
    height: 200px;  
    padding: 36px 47px 0px 24px;
}






.divider-bar {
    display: block;
    width: 10px;
    height: 260px;
    background-repeat: no-repeat;
    position: absolute;
    top: 38px;
    right: 285px;
}


#orange .divider-bar { background: Transparent url(../images/strips/orangestrip.gif); }
#green .divider-bar { background: Transparent url(../images/strips/greenstrip.gif); }
#purple .divider-bar { background: Transparent url(../images/strips/purplestrip.gif); }



.latest-news-icon {
    display: block;
    background: Transparent url(../images/global/latest-news.jpg) no-repeat;
    width: 225px;
    height: 48px;
    padding: 48px 0px 0px 0px;
	margin: 31px 0px 0px 0px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;   
}

.find-us-icon {
    display: block;
    background: Transparent url(../images/global/find-us.gif) no-repeat;
    width: 209px;
    height: 80px;
    padding: 80px 0px 0px 0px;
	margin: 11px 0px 0px 0px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;   
}

.andrew-icon {
    display: block;
    background: Transparent url(../images/global/andrewicon.jpg) no-repeat;
    width: 156px;
    height: 176px;
    padding: 176px 0px 0px 0px;
	margin: 11px 0px 0px 0px;
	height/* */:/**/0;
	height: /**/0;
	overflow: hidden;   
}



#main-splash {
    display: block;
    margin: 0px auto 0px auto;
    width: 924px;
    height: 260px;
    position: relative;
    behaviour: url(../../style/iepngfix.htc);
}

.arrow-block-left {
    display: block;
    width: 28px;
    height: 260px;
    background: #282321;
    filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
    position: absolute;
    top: 0px;
    left: 0px;
}
.arrow-block-right {
    display: block;
    width: 28px;
    height: 260px;
    background: #282321;
    filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
    position: absolute;
    top: 0px;
    right: 0px;
}


.arrows-left a {
    display: block;
    width: 28px;
    height: 260px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: Transparent url(../images/arrows/arrow-left.png) no-repeat;
}
.arrows-left a:hover { background-position: -28px 0px; }

.arrows-right a {
    display: block;
    width: 28px;
    height: 260px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: Transparent url(../images/arrows/arrow-right.png) no-repeat;
}
.arrows-right a:hover { background-position: -28px 0px; }





#sample-background {
	display: block;
	width: 924px;
	height: 260px;
	margin: 0px auto 0px auto;
	background: #272320 url(../images/global/loading.gif) no-repeat 425px 120px;
	position: relative;
}

.magnify-box { float: right; position: relative; }

.magnify-box a {
    width: 27px;
    height: 27px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    background: Transparent url(../images/global/MAG.png) no-repeat;
}
.magnify-box a:hover {
    background: Transparent url(../images/global/MAG_over.png) no-repeat;
}

	
.main-image-sample {
    position: absolute; 
    top: 0px; 
    left: 25px;
    width: 924px;
    min-height: 680px;
    height: auto !important;
    height: 680px;
    cursor: pointer;
}


/*	---------------------------------------------------------------
	#3 PRIMARY NAVIGATION
	---------------------------------------------------------------
	Outlines the primary navigational elements of the website
	------------------------------------------------------------ */

#navbar-block {
    display: block;
    margin: 128px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    min-height: 52px;
    height: auto !important;
    height: 52px;
    float: right;
    width: 697px;
}

#navbar { margin: 0px; padding: 0px; }
#navbar li { float: left; margin: 0px; padding: 0px; list-style: none; }
#navbar li a {
    float: left; 
    margin: 0px; 
    height: 13px;
    padding: 13px 0px 0px 0px;
    background: Transparent url(../images/navigation/navbar.gif) no-repeat;
    height/* */:/**/0;
	height: /**/0;
	overflow: hidden;  
}

#nav-you a { width: 42px; background-position: 0px 0px !important; }
#nav-you a:hover { width: 42px; background-position: 0px -14px !important; }
#nav-you a.on { width: 42px; background-position: 0px -28px !important; }

#nav-us a { width: 49px; background-position: -42px 0px !important; }
#nav-us a:hover { width: 49px; background-position: -42px -14px !important; }
#nav-us a.on { width: 49px; background-position: -42px -28px !important; }

#nav-brand-engagement a { width: 171px; background-position: -91px -0px !important; }
#nav-brand-engagement a:hover { width: 171px; background-position: -91px -14px !important; }
#nav-brand-engagement a.on { width: 171px; background-position: -91px -28px !important; }

#nav-main-digital a { width: 80px; background-position: -262px -0px !important; }
#nav-main-digital a:hover { width: 80px; background-position: -262px -14px !important; }
#nav-main-digital a.on { width: 80px; background-position: -262px -28px !important; }

#nav-how-do-we-do-it a { width: 142px; background-position: -342px -0px !important; }
#nav-how-do-we-do-it a:hover { width: 142px; background-position: -342px -14px !important; }
#nav-how-do-we-do-it a.on { width: 142px; background-position: -342px -28px !important; }

#nav-our-work a { width: 102px; background-position: -485px -0px !important; }
#nav-our-work a:hover { width: 102px; background-position: -485px -14px !important; }
#nav-our-work a.on { width: 102px; background-position: -485px -28px !important; }

#nav-lets-engage a { width: 102px; background-position: -585px -0px !important; }
#nav-lets-engage a:hover { width: 102px; background-position: -585px -14px !important; }
#nav-lets-engage a.on { width: 102px; background-position: -585px -28px !important; }



/*	---------------------------------------------------------------
	#4 SECONDARY NAVIGATION
	---------------------------------------------------------------
	Outlines the secondary navigational elements of the website
	------------------------------------------------------------ */

.subnav-block {
    display: block;
    margin: 10px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    min-height: 10px;
    height: auto !important;
    height: 10px;
    width: 697px;
}
.subnav-block li { display: block; margin: 0px; padding: 0px; list-style: none; float: left; }
.subnav-block li a { float: left; margin-right: 10px; }
.subnav-block li a:hover { text-decoration: underline; }
.subnav-block li a.on { color: #ffffff !important; }
.subnav-block li a.on:hover { text-decoration: none !important; }


.us .subnav-block                 { padding: 0px 0px 0px 58px; width: 639px; }
.how-do-we-do-it .subnav-block    { padding: 0px 0px 0px 153px; width: 544px; }
.our-work .subnav-block           { padding: 0px 0px 0px 393px; width: 304px; }
.tdg-digital .subnav-block           { padding: 0px 0px 0px 234px; width: 457px !important; }




#strategy-nav { margin: 0px; padding: 0px; }
#strategy-nav li { display: block; margin: 0px; padding: 0px; list-style: none; }
#strategy-nav li a {
    margin: 0px 0px 7px 0px; 
    padding: 21px 0px 0px 0px; 
    display: block;
    background: Transparent url(../images/navigation/strategy-nav.gif) no-repeat;
    width: 234px;
    height: 21px;
    height/* */:/**/0;
	height: /**/0;
	overflow: hidden; 
}


#s-nav-strategy a { background-position: 0px -3px !important; }
#s-nav-strategy a:hover { background-position: 0px -145px !important; }
#s-nav-strategy a.on { background-position: 0px -145px !important; }

#s-nav-brand a { background-position: 0px -31px !important; }
#s-nav-brand a:hover { background-position: 0px -173px !important; }
#s-nav-brand a.on { background-position: 0px -173px !important; }

#s-nav-communication a { background-position: 0px -59px !important; }
#s-nav-communication a:hover { background-position: 0px -201px !important; }
#s-nav-communication a.on { background-position: 0px -201px !important; }

#s-nav-digital a { background-position: 0px -87px !important; }
#s-nav-digital a:hover { background-position: 0px -229px !important; }
#s-nav-digital a.on { background-position: 0px -229px !important; }

#s-nav-integration a { background-position: 0px -115px !important; }
#s-nav-integration a:hover { background-position: 0px -257px !important; }
#s-nav-integration a.on { background-position: 0px -257px !important; }






#ourwork-nav { margin: 0px; padding: 0px; }
#ourwork-nav li { display: block; margin: 0px; padding: 0px; list-style: none; }
#ourwork-nav li a {
    margin: 0px 0px 9px 0px; 
    padding: 22px 0px 0px 0px; 
    display: block;
    background: Transparent url(../images/navigation/ourwork-nav.gif) no-repeat;
    width: 108px;
    height: 22px;
    height/* */:/**/0;
	height: /**/0;
	overflow: hidden; 
}

#ow-nav-brand a { background-position: 0px -4px !important; }
#ow-nav-brand a:hover { background-position: -107px -4px !important; }
#ow-nav-brand a.on { background-position: -107px -4px !important; }

#ow-nav-media a { background-position: 0px -35px !important; }
#ow-nav-media a:hover { background-position: -107px -35px !important; }
#ow-nav-media a.on { background-position: -107px -35px !important; }

#ow-nav-direct a { background-position: 0px -65px !important; }
#ow-nav-direct a:hover { background-position: -107px -65px !important; }
#ow-nav-direct a.on { background-position: -107px -65px !important; }

#ow-nav-design a { background-position: 0px -96px !important; }
#ow-nav-design a:hover { background-position: -107px -96px !important; }
#ow-nav-design a.on { background-position: -107px -96px !important; }

#ow-nav-digital a { background-position: 0px -127px !important; }
#ow-nav-digital a:hover { background-position: -107px -127px !important; }
#ow-nav-digital a.on { background-position: -107px -127px !important; }






#digital-nav { margin: 0px; padding: 0px; }
#digital-nav li { display: block; margin: 0px; padding: 0px; list-style: none; }
#digital-nav li a {
    margin: 0px 0px 7px 0px; 
    padding: 21px 0px 0px 0px; 
    display: block;
    background: Transparent url(../images/navigation/digital-nav.gif) no-repeat;
    width: 195px;
    height: 21px;
    height/* */:/**/0;
	height: /**/0;
	overflow: hidden; 
}

#dig-nav-about a { background-position: 0px 0px !important; }
#dig-nav-about a:hover { background-position: 0px -196px !important; }
#dig-nav-about a.on { background-position: 0px -196px !important; }

#dig-nav-ourwork a { background-position: 0px -28px !important; }
#dig-nav-ourwork a:hover { background-position: 0px -224px !important; }
#dig-nav-ourwork a.on { background-position: 0px -224px !important; }

#dig-nav-creative a { background-position: 0px -56px !important; }
#dig-nav-creative a:hover { background-position: 0px -252px !important; }
#dig-nav-creative a.on { background-position: 0px -252px !important; }

#dig-nav-technology a { background-position: 0px -84px !important; }
#dig-nav-technology a:hover { background-position: 0px -280px !important; }
#dig-nav-technology a.on { background-position: 0px -280px !important; }

#dig-nav-performance a { background-position: 0px -112px !important; }
#dig-nav-performance a:hover { background-position: 0px -308px !important; }
#dig-nav-performance a.on { background-position: 0px -308px !important; }

#dig-nav-results a { background-position: 0px -140px !important; }
#dig-nav-results a:hover { background-position: 0px -336px !important; }
#dig-nav-results a.on { background-position: 0px -336px !important; }

#dig-nav-multimedia a { background-position: 0px -168px !important; }
#dig-nav-multimedia a:hover { background-position: 0px -364px !important; }
#dig-nav-multimedia a.on { background-position: 0px -364px !important; }



#news-listing ul { margin: 0px; padding: 0px; }
#news-listing li {
    margin: 0px 0px 10px 0px; 
    padding: 0px 0px 0px 0px; 
	list-style: none;
}
.newsdate { margin: 0px 0px 4px 0px; padding: 0px; }
	
	

/*	---------------------------------------------------------------
	#5 SIDEBAR
	---------------------------------------------------------------
	Outlines the footer elements of the website
	------------------------------------------------------------ */

#sidebar {
    display: block;
    float: left;
    width: 233px;
    min-height: 200px;
    height: auto !important;
    height: 200px;
    padding: 39px 0px 0px 62px;
}

#pull-quote { width: 223px; min-height: 10px; height: auto !important; height: 10px; }
.quoteintro { display: block; min-height: 200px; height: auto !important; height: 200px; float: left; }

/*	---------------------------------------------------------------
	#6 FOOTER
	---------------------------------------------------------------
	Outlines the footer elements of the website
	------------------------------------------------------------ */

#footer {
    display: block;
    width: 849px;
    min-height: 100px;
    height: auto !important;
    height: 100px;
    margin: 20px auto 0px auto;
    padding: 0px 0px 0px 75px;
    position: relative;
    background: Transparent url(../images/global/footerlogo.gif) no-repeat 24px 3px;
    line-height: 150%;
}


/*	---------------------------------------------------------------
	#7 EXTRA ELEMENTS
	---------------------------------------------------------------
	Other elements of the website
	------------------------------------------------------------ */


.clearboth { clear: both; }


#contactform label {	float: left; width: 10em; }
#contactform input, textarea { float: right; font-family: Arial, Helvetica, sans-serif; background-color: #444444; border: #777777 1px solid; color: #b5b5b5; font-size: 1em; padding: 4px; }
#contactform input { width: 50%; }
#contactform textarea { width: 65%; }
#contactform p { display: block; width: 100%; float: left; margin-bottom: 0.3em; }
#contactform .button { width: 25%; background-color: #444444; color: #ffffff; font-weight: bold; margin-left: 0.5em; cursor: pointer; }



#errorlist { margin: 0px 0px 0px 12px; padding: 0px 0px 0px 0px; }
#errorlist li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; color: #cc00cc; }
#errorintro { color: #cc00cc; }




.left, .right { width: 20em; float: left }
#sitemap ul { margin: 0; padding: 0; }
#sitemap li { margin: 0; padding: 0; list-style: none; color: #777777; }
#sitemap li a { text-decoration: none; color: #b5b5b5; line-height: 160%; }
#sitemap li a:hover { text-decoration: underline; }
#sitemap .primary { text-transform: uppercase; font-weight: bold; line-height: 1.6em; }
#sitemap .secondary { padding-left: 0.6em; line-height: 1.2em; }

.orange  { color: #ff6633 !important; }
.green  { color: #c9fd2f !important; }
.purple  { color: #cc00cc !important; }







#video-section {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 463px;
    height: 180px;
    background: Transparent;
}