@import url("reset.css");
@import url("nav.css");
@import url("sifr.css");

body {
	color: #202020;
	font-family:Arial, Helvetica, sans-serif;
	font-size:75%;
	margin:0;
	background:url(../img/pattern.gif) #000 center top;
	}

div.back {
	width: 996px;
	margin: 0 auto;
	}


div.wrapper {
	position:relative;
	width: 996px;
	height:100%;
	}

	div.wrapper:after {
		clear:both;
		height:0;
		display:block;
		visibility:hidden;
		content:".";
	}
	
div#content {
	float:left; 
	width:756px;
	margin: 0 80px;
	display:inline;
	font-size:1.2em;
	}
	
.jobsholder {
	float:right;
	font-size:0.89em;
	margin-right:-20px;
	margin-top:5px;
	width:190px;
	}
	


div.tinyframe {
	width:131px;
	height:127px;
	margin:10px 0 0 0;
	background:url(../img/frames/frame_tiny.gif) 0 0 no-repeat;
	padding:19px 0 0 15px;
}
	
body.tandcPage div#content, body.sitemapPage div#content, body.errorPage div#content {margin-top:200px}
body.contactPage div#content {margin-top:160px}
body.errorPage div#content {margin-top:50px}
body.quotePage div#content {margin-top:10px}


body.errorPage div#content {padding-bottom:60px}
	
.relative { position:relative }

#content p {margin:0; padding: 5px 0; line-height:1.4em}

body.whatPage #content p, body.howPage #content p, body.whyPage #content p {padding:0 0 10px 0}

body.whatPage #content p.large {padding-bottom:0}


body.partnersPage #content p {padding:0 0 5px 0}

body.workshopsPage #content p {width: 650px}

body.blogPage div.contentBlock, body.newsPage div.contentBlock, body.ipartyPage div.contentBlock {
	float:left; 
	width:756px;
	background: url(../img/dots.gif) repeat-x bottom;
	}
	
body.blogDetailPage div.contentBlock, body.newsDetailPage div.contentBlock, body.ipartyDetailPage div.contentBlock {background: none} 

div.fullContent {
	float:left; 
	width:650px;
	padding-top: 10px;
	}
	
body.homePage div.fullContent {width:550px;}
body.workshopsPage div.fullContent {width:750px;}
body.ideologyPage div.fullContent {width:680px;}
	
body.whatPage div.fullContent, body.howPage div.fullContent {padding-top: 20px;}

div.leftContent {
	float:left;
	width: 360px;
	padding-top: 20px;
	}
		
div.rightContent {
	float:left;
	width: 360px;
	padding: 30px 0 0 33px;
	}

body.newsDetailPage div.leftContent, body.blogDetailPage div.leftContent, body.ipartyDetailPage div.leftContent {padding-top: 45px}
	
body.caseStudiesPage div.rightContent {padding-top: 0;}
	
body.contactPage div.rightContent {padding-top: 0}
	
* html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

a:link, a:visited, a:active  {color:#ec008c; text-decoration:none;}
a:hover {color:#ec008c; text-decoration:underline;}
a:focus {-moz-outline: none;}

img, object {display:block;}

.hidden {position:absolute; left: -1000em; width:20em;}

.error {color:#ff0000; font-weight:bold;}
	
div.flash {float:left;}
#rotator {
	height: 231px;
	left: 308px;
	overflow: hidden;
	position: absolute;
	top: 216px;
	width: 341px;
	}
	
	
.header {position: absolute; top:0; left:0; height: 100px}

ul.genList li {padding:8px 0 8px 20px; background:url(../img/bullet.gif) no-repeat 0 13px}

/* HEADER AREA */
.logo {width:169px; height:176px;}
.logo[class] {background: url(../img/main/logo.png) no-repeat center center;}
.logo span {position:absolute; left: -1000em;}

* html .logo{ //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://id.yuccadevelopment.co.uk/img/main/logo.png');}

div.home, div.home a {display:block; height: 125px; width:95px; background:url(../img/nav/home.gif)}
div.home {position:absolute; top: 20px; left:40px;}
div.home a:hover {background-position:0 100%}
div.home span {position:absolute; left: -1000em;}

/* ABOUT PAGES */
ul.whyList li {padding: 10px 0}
body.whyPage ul.whyList li p {padding:0}
ul.whyList li img {padding: 20px}
ul.whyList li span {color:#ec008c}

cite {display:block; font-size: 0.9em; font-weight:bold}

div.workshopWrapper {float:left; padding-top:0; width:750px;}
div.workshopWrapper img {float:left}

/* RESEARCH PAGE */

ul.researchList li {float:left; clear:both}
ul.researchList li h5 {margin:15px 0 5px 0}
ul.researchList li a {float:left; clear:both; height: 20px; margin-top: 3px; padding-top: 3px; padding-left: 23px; background:url(../img/pdf.gif) 0 4px no-repeat; color: #202020; text-decoration:underline}
ul.researchList li a:hover {color:#999999}


/* TEAM PAGES */
ul.teamList li {padding: 15px 0; float:left; width: 700px}
ul.teamList p {padding:0}
ul.teamList div {float:left; width: 400px; padding: 10px 0 0 20px}
ul.teamList img {float:left;}

/* CLIENT PAGES */
div.clientLinks {padding:10px 0;}
div.clientLinks p {padding:0}
div.clientLinks a {font-weight:bold}

.clientSlideshow {position:absolute; top:65px; left:35px; color:#fff; width:289px; height:252px;}
.clientVideo {position:absolute; top:65px; left:35px; background-color:#000000; width:289px; height:252px;}

p.pdf {padding: 0 0 10px 0}
p.pdf a {height: 25px; margin-top: 3px; padding-top: 3px; float:left; padding-left: 23px; background:url(../img/pdf.gif) 0 4px no-repeat}

body.caseStudiesPage q {font-style:italic; padding: 10px 0; float:left}
body.caseStudiesPage cite {padding-bottom:10px;}

/* BLOG CONTENT */
ul.contentList {float:left; margin-top:20px; background: url(../img/dots.gif) repeat-x}
ul.contentList li {float:left; width: 756px; padding: 20px 0; background: url(../img/dots.gif) repeat-x bottom}
ul.contentList li img {float:left;}
ul.contentList li div.listDetails {float:left; padding-top: 3px; width: 440px;}
ul.contentList li p.posted {font-size: 0.9em;}
div.contentDetails { float:left; width:400px; }


div.pagination {float:left; width: 262px; padding: 35px 247px 0 247px;}
div.pagination span {float:left; width: 40px; padding: 3px 0 0 10px;}
div.pagination span.page {float:left; width: 34px; padding: 3px 3px 0 10px;}
div.pagination select {float:left;}

div.blogLinks, div.blogPoster {padding:10px 0;}
div.blogLinks p, div.blogPoster p {padding:0}
div.blogLinks a, div.blogPoster a {font-weight:bold}

div#bookmark p {font-weight:bold; font-size: 0.9em; margin-top: 15px; width: 350px; background:url(../img/dots.gif) repeat-x; padding-top:20px; }
ul.bookmarkList  {width: 360px; padding-bottom:20px; float:left;}
.bookmarkList li, .bookmarkList li a {float:left; display:block; width: 120px;}
.bookmarkList li {margin-bottom: 10px; font-size:0.75em; height:14px;}
.bookmarkList li a {padding-left: 19px; color: #202020; height:14px; }
.bookmarkList li a:hover {background-position:0% 100%;}


.delicious {background:url(../img/bookmarks/delicious.gif) no-repeat;}
.delicious a {width:71px; background:url(../img/bookmarks/delicious.gif) no-repeat}

.facebook {background:url(../img/bookmarks/facebook.gif) no-repeat;}
.facebook a {width:49px; background:url(../img/bookmarks/facebook.gif) no-repeat}

.stumble {background:url(../img/bookmarks/stumble.gif) no-repeat;}
.stumble a {width:91px; background:url(../img/bookmarks/stumble.gif) no-repeat}

.myspace {background:url(../img/bookmarks/myspace.gif) no-repeat;}
.myspace a {width:75px; background:url(../img/bookmarks/myspace.gif) no-repeat}

.twitter {height:16px; background:url(../img/bookmarks/twitter.gif) no-repeat;}
.twitter a {width:45px; height:16px; background:url(../img/bookmarks/twitter.gif) no-repeat}

div.backLinkPanel {float:left; width: 756px;}

/* FORMS */
div.form {width:360px; padding:20px 0; float:left}
div.form label {float:left; margin: 5px 0; display:block; height:16px; width:80px;}
div.form input {float:left; margin: 5px 0; width:270px; border: 1px solid #c5c5c5; background-color:#d9ded7}

div.form textarea {float:left; margin: 5px 0; width: 270px; border: 1px solid #c5c5c5; background-color:#d9ded7}
div.form textarea, div.form input {font-family:Arial, Helvetica, sans-serif; color: #202020; font-size: 1.0em;}
div.form input.submit {float:right; border: none; margin: 10px; width: 82px; height: 26px; cursor: pointer;}

body.workshopsPage div.form span {display:block; padding: 7px 0}

body.quotePage div.form {width:430px;}
body.quotePage div.form label {width:150px;}

/* CONTACT PAGE */
ul.phoneList {float:left; width: 360px; padding: 10px 0; background:url(../img/dots.gif) repeat-x bottom}
ul.phoneList li {float:left; padding-bottom: 10px; width:360px;}
ul.phoneList li h5 {font-size: 1.2em; font-weight:bold; color: #eb008d; float:left; width:180px;}
span.phone {font-size: 1.2em; font-weight:bold;}
ul.phoneList li p {padding: 0 !important; float:left; width:180px;}

p.adr {float:left; padding: 25px 0; width: 360px; background:url(../img/dots.gif) repeat-x bottom}

#content p.adr {padding-bottom: 20px;}
span.fn {font-weight:bold; color:#EB008D;}
p.adr span {display:block;margin-left:33px;}
span.vat {font-size: 0.8em; padding-top:10px}

#map {float:left; width:289px; height:252px;}

/* T&CS PAGE */
body.tandcPage h3 {margin: 20px 0 5px 0}
body.tandcPage h5 {margin: 10px 0 2px 0}
body.tandcPage ul.genList li {padding: 3px 0 3px 15px; background:url(../img/bullet.gif) no-repeat 0 8px; margin-left: 40px;}
body.tandcPage td {padding: 5px;}
ul.tandcList {padding-left: 20px;}
ul.tandcList li {padding: 3px 0}

/* SITE MAP PAGE */
body.sitemapPage ul.sitemapList li {padding: 5px 0 10px 0; font-weight: bold}
body.sitemapPage ul.sitemapList li ul li {margin-left:20px; padding:3px 0 3px 15px; background:url(../img/bullet.gif) no-repeat 0 8px; font-weight: normal}
body.sitemapPage a:link, body.sitemapPage a:visited, body.sitemapPage a:active  {color:#202020; text-decoration:underline;}
body.sitemapPage a:hover {color:#ec008c; text-decoration:underline;}

/* PICTURE FRAMES */
div.frameHolderSmall1 {background:url(../img/frames/frame_small_1.gif) no-repeat}
div.frameHolderSmall2 {background:url(../img/frames/frame_small_2.gif) no-repeat}
div.frameHolderSmall3 {background:url(../img/frames/frame_small_3.gif) no-repeat}
div.frameHolder1 {background:url(../img/frames/frame_big_1.gif) no-repeat}
div.frameHolder2 {background:url(../img/frames/frame_big_2.gif) no-repeat}
div.frameHolder3 {background:url(../img/frames/frame_big_4.gif) no-repeat}

div.frameHolderSmall1, div.frameHolderSmall2, div.frameHolderSmall3 {float:left; padding: 24px 55px 35px 20px;}
div.frameHolderSmall { float:left; padding: 0px 25px 35px 20px;}
div.frameHolder1, div.frameHolder2 {position:relative;float:left; height: 330px;width:300px; padding: 65px 35px 50px 35px;}


div.frameHolder3 {float:right; height: 458px; padding: 65px 35px 50px 35px;}
body.contactPage div.frameHolder2 {height: 270px;}
body.workshopsPage div.frameHolder2, body.researchPage div.frameHolder2{margin-left: 25px; display:inline}
body.workshopsPage div.frameHolder2{width:auto;}



body.clientPage div.frameHolder1, body.clientPage div.frameHolder2,body.caseStudiesPage div.frameHolder1, body.caseStudiesPage div.frameHolder2 {padding-top:0;position:relative; float:left; height: 330px; width: 330px}
div.frameHolderVideo {float:left; padding: 0 0 0 0;}
body.whatPage  div.rightcontent,body.whatPage  div.frameHolder2 {padding-top:0;margin-top:-30px;}

/* BUTTON CLASSES */
.button span, .button1 span {position:absolute; left: -1000em;}
.button, .button a, .button1, .button1 a {display:block;float:left;}
.button a:hover, .button1 a:hover {background-position:0 100%}

div.readMore, div.readMore a {height: 26px; width:117px; background:url(../img/buttons/readMore.gif)}
div.readMore {margin-top: 10px}

div.backList, div.backList a {height: 26px; width:125px; background:url(../img/buttons/backList.gif)}
div.backList {margin-top: 20px}


div.applyNow, div.applyNow a {height: 26px; width:100%; background:url(../img/buttons/applyNow.gif) no-repeat left top;}
div.applyNow {clear:both;margin-top: 20px;margin-bottom:20px;}

div.findOutMore, div.findOutMore a {height: 26px; width:153px; background:url(../img/buttons/findOutMore.gif) no-repeat left top;}
div.findOutMore {margin-top: 20px;}


div.aboutUs, div.aboutUs a {height: 26px; width:104px; background:url(../img/buttons/aboutus.gif)}
div.aboutUs {margin-top: 10px}

div.prev, div.prev a {height: 20px; width:46px; background:url(../img/buttons/prev.gif)}
div.prev {float:left; margin-right: 10px}

div.next, div.next a {height: 20px; width:46px; background:url(../img/buttons/next.gif)}
div.next {float:left;}

div.whatButton, div.whatButton a {height: 26px; width:68px; background:url(../img/buttons/what.gif)}
div.whatButton {margin-top: 20px}

div.howButton, div.howButton a {height: 26px; width:62px; background:url(../img/buttons/how.gif)}
div.howButton {margin-top: 20px}

div.whyButton, div.whyButton a {height: 26px; width:59px; background:url(../img/buttons/why.gif)}
div.whyButton {margin-top: 20px}

div.backtotop, div.backtotop a {height: 26px; width:125px; background:url(../img/buttons/backtotop.gif)}
div.backtotop {margin-top: 20px}

div.partnerButton, div.partnerButton a {height: 26px; width:103px; background:url(../img/buttons/partners.gif); clear:both;}
div.partnerButton {margin-top: 20px}

div.researchButton, div.researchButton a {height: 26px; width:103px; background:url(../img/buttons/research.gif); clear:both;}
div.researchButton {margin-top: 20px}

div.ourstoryButton, div.ourstoryButton a {height: 26px; width:115px; background:url(../img/buttons/our-story.gif)}
div.ourstoryButton {margin-top: 20px}

div.newsButton, div.newsButton a {height: 26px; width:69px; background:url(../img/buttons/news.gif)}
div.newsButton {margin-top: 20px}

div.aboutButton, div.aboutButton a {height: 26px; width:75px; background:url(../img/buttons/about.gif)}
div.aboutButton {margin-top:20px}

div.aboutIdButton, div.aboutIdButton a {height: 26px; width:98px; background:url(../img/buttons/aboutId.gif)}
div.aboutIdButton {margin-top:20px}

div.caseStudiesButton, div.caseStudiesButton a {height: 26px; width:129px; background:url(../img/buttons/caseStudies.gif)}
div.caseStudiesButton {margin-top:20px}

div.workshopsButton, div.workshopsButton a {height: 26px; width:125px; background:url(../img/buttons/workshops.gif)}
div.workshopsButton {margin-top: 20px}

div.ipartyButton, div.ipartyButton a {height: 26px; width:74px; background:url(../img/buttons/iparty.gif)}
div.ipartyButton {margin-top: 20px; float:left; margin-right: 5px}

div.idiscoButton, div.idiscoButton a {height: 26px; width:74px; background:url(../img/buttons/idisco.gif)}
div.idiscoButton {margin-top: 20px; float:left; margin-right: 5px}

div.idparadeButton, div.idparadeButton a {height: 26px; width:110px; background:url(../img/buttons/idparade.gif)}
div.idparadeButton {margin-top: 20px; float:left; margin-right: 5px}

div.facebookButton, div.facebookButton a {height: 26px; width:110px; background:url(../img/buttons/facebookButton.gif)}
div.facebookButton {margin-top: 20px; float:left; margin-right: 5px}





div.blogButton, div.blogButton a {height: 26px; width:67px; background:url(../img/buttons/blog.gif)}
div.blogButton {margin-top: 20px; float:left; margin-right: 5px}

div.playVideo, div.playVideo a {height: 26px; width:114px; background:url(../img/buttons/playVideo.gif)}
div.playVideo {float:left;}





div.showSlides, div.showSlides a {height: 26px; width:130px; background:url(../img/buttons/showSlides.gif)}
div.showSlides {float:left;}

div.showPhotos, div.showPhotos a {height: 26px; width:142px; background:url(../img/buttons/showPhotos.gif)}
div.showPhotos {float:left;}

div.nextLarge, div.nextLarge a {height: 26px; width:63px; background:url(../img/buttons/nextLarge.gif) no-repeat left top}
div.nextLarge {float:left; clear:both; margin-top:20px;width:100%}

div.applyButton, div.applyButton a {height: 26px; width:72px; background:url(../img/buttons/apply.gif)}
div.applyButton {float:left; margin-top:20px}

div.nextSampling, 
div.nextSampling a {height: 26px; width:235px; background:url(../img/buttons/nextSampling.gif) no-repeat left top}

div.nextRoadshows, 
div.nextRoadshows a {height: 26px; width:130px; background:url(../img/buttons/nextRoadshows.gif) no-repeat left top;}

div.nextEvents, 
div.nextEvents a {height: 26px; width:200px; background:url(../img/buttons/nextEvents.gif) no-repeat left top;}

div.nextLivesampling, 
div.nextLivesampling a {height: 26px; width:320px; background:url(../img/buttons/nextLivesampling.gif) no-repeat left top;}

div.nextLivesampling,
div.nextEvents, 
div.nextRoadshows {margin-top:20px;}

div.nextExperiential, div.nextExperiential a {height: 26px; width:235px; background:url(../img/buttons/nextExperiential.gif) no-repeat left top}

div.nextExperiential,
div.nextSampling {float:left; margin-top:20px;clear:both}


/* HEADER CLASSES */

h1, p.large {color: #ec008c; font-size: 2.6em; font-weight:bold; letter-spacing: -3px}

h2, h3, h4,h1.seo {color: #000; font-weight:bold;}
h2.subHeading {font-size:2.4em;color:#4b4bb}

 



h3 {font-size: 16px;}

body.caseStudiesPage h3 {font-size:24px}
body.caseStudiesPage h4 {margin-top:20px}

body.aboutPage div.fullContent h3 {font-size: 1.0em;}
body.whatPage div.fullContent h3, body.howPage div.fullContent h3 {font-size: 1.0em; margin-top:10px}
body.idolsPage div.fullContent h3.subtitle {font-size: 1.0em; margin:0 0 10px;}
body.idolsPage div.fullContent div.frameHolderSmall3 { margin-bottom:20px;}

body.idolsPage #rotator {
	height: 266px;
	left: 573px;
	top: 194px;
	}

body.idolsPage div.fullContent h3.experiential,
body.idolsPage div.fullContent h3.premium,
body.idolsPage div.fullContent h3.retail,
body.idolsPage div.fullContent h3.event,
body.idolsPage div.fullContent h3.next { margin-top:10px; }

div.fullContent h3.experiential,
div.fullContent h3.premium,
div.fullContent h3.retail,
div.fullContent h3.event,
div.fullContent h3.next { font-size:16px !important; color:#ec008c;}

div.listDetails h3 {margin-top:10px; }
	body.whatPage div.listDetails h3 {color:#EC008C}



body.keyPeoplePage h3 {font-size:16px;}
body.partnersPage div.fullContent h3 {margin: 20px 0 5px 0}
h4 {font-size: 1.2em;}
h5 {font-weight:bold}
h3.left { float:left; margin:0 20px 20px 0; width:160px; }
div.listDetails p.pt20 { padding-top:20px !important; }
.mb20 { margin-bottom:20px; }
.number-highlight { color:#ec008c; }


.social-nav {
	background:url(/img/main/social.png) no-repeat left top;
	float:left;
	height:207px;
	left:953px;
	padding-top:8px;
	position:absolute;
	top:38px;
	width:52px;
	z-index:12000;
	}

	.social-nav li {background-color:transparent;float:left;position:relative;width:auto;}
	.social-nav li a {display:block;float:left;height:28px;margin-top:3px;margin-left:11px;text-indent:-9999px;width:28px;}
		.social-nav li a:hover {background-position:left bottom;}
	
		.social-nav .icon-youtube a {background:url(/img/nav/youtube.png) no-repeat left top;}
		.social-nav .icon-facebook a {background:url(/img/nav/facebook.png) no-repeat left top;}
		.social-nav .icon-flickr a {background:url(/img/nav/flickr.png) no-repeat left top;}
		.social-nav .icon-twitter a {background:url(/img/nav/twitter.png) no-repeat left top;}
		.social-nav .icon-linkedin a {background:url(/img/nav/linkedin.png) no-repeat left top;}

		.social-nav li .tool {
			background: url("/img/tool-bottom.png") no-repeat scroll left bottom transparent;
			display:none;
			float: left;
			left: -130px;
			padding-bottom: 11px;
			position: absolute;
			top: -10px;
			width: 140px;
			}

		.social-nav li:hover .tool {display:block;}

			.social-nav li .tool-inner {
				background: url("/img/tool-top.png") no-repeat scroll left top transparent;
				color:#353535;
				float: left;
				font-size:0.9em;
				line-height:1.4;
				padding: 12px 10px 2px 16px;
				width: 114px;
				}

				.social-nav li .tool-inner.single {padding-top:18px;padding-bottom:7px;}

/* STAFFING PAGES */
ul.staffList {padding: 0; margin: 10px 0 25px 12px !important; list-style:disc outside none; }
ul.staffList li { color:#ec008c; }
ul.staffList li span { color:#202020; }
ol.staffList {padding: 10px 0 0px 30px; margin: 0; }
ol.staffList li {padding-bottom:20px; color:#ec008c; }
ol.staffList li span { color:#202020; }