@charset "UTF-8";
/* CSS Document */


/* ---- GLOBAL --------------------------------/
--------------------------------------------- */
* {margin: 0px; padding: 0px; outline: none;} 
.clear_left {clear: left;} .clear {clear: both;}

/* get rid of those system borders being generated for A tags */
:focus {-moz-outline-style:none;}


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

#homeSplash {width: 790px; margin: 0 auto;}
#homeSplash .splashText strong {font-size: 42px; color: #4e4e4e; font-weight: bold;}
#homeSplash .splashText {font-size: 26px; color: #4e4e4e;}
#homeSplash .splashText em {color: #b4b4b4; font-style: normal;}
#homeSplash .splashText2 {color: #4e4e4e; font-size: 22px; line-height: 31px; display: block; margin: 24px 0px 0px 0px;}

.homepage_leftColumn {float: left; width: 240px;} .homepage_rightColumn {float: right; width: 500px;}
.homepage_leftColumn, .homepage_rightColumn {margin: 44px 0px 12px 0px;}
#homeSplash dl {font-family: Arial, Helvetica, sans-serif;} 
#homeSplash dl dt {font-size: 16px; color: #4e4e4e; font-weight: bold; margin: 0px 0px 12px 0px; padding: 0px 0px 8px 0px; border-bottom: 1px dotted #999999;}
#homeSplash dl dd {font-size: 12px; line-height: 22px; color: #4e4e4e;} 
#homeSplash .homepage_rightColumn a {color: #0066FF;}


#header {height: 79px; background: url(header_bg.jpg) left top repeat-x; padding: 0px 50px;}
#content {margin: 50px; background: #f4f4f4;} 
.wrapper {width: 960px; margin: 0 auto;} 
.logo {float: left; background: url(images/logo.jpg) left 0px no-repeat; width: 110px; height: 79px;}
.logo a {display: block; text-indent: -9999px; width: 110px; height: 79px;}


/* ---- GLOBAL - TEXT - P's and HEADING LEVELS --------/
---------------------------------------------------- */
h2 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 4px 0px; color: #606060;} 
p {font-size: 12px; color: #656565; font-family: Arial, Helvetica, sans-serif;}


/* ---- FOOTER - Social Information - Facebook and Twitter ---- START
------------------------------------------------------------------ */
ul.social li {float: left; display: block; list-style: none; font-size: 11px; color: #666666; font-family: Arial, Helvetica, sans-serif;}

ul li.fb {background: url(fbLogo.gif) left top no-repeat; padding: 3px 24px 0px 24px; height: 19px;}
ul li.fb a {color: #0066FF; text-decoration: none;}

ul li.twitter {background: url(twitter.gif) left top no-repeat; padding: 3px 24px 0px 24px; height: 19px;}
ul li.twitter a {color: #0066FF; text-decoration: none;}

ul li.copyright {padding: 3px 24px 0px 0px; height: 19px;}
ul li.copyright a {color: #0066FF; text-decoration: none;}
/* ---- footer - social information - facebook and twitter ----- END
----------------------------------------------------------------- */


/* ---- ANCHOR ----------------------------------------------------- /
------------------------------------------------------------------ */
#goUp a {color: #d237ac; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none;}
#goUp {background: url(arrow_up.jpg) left center no-repeat; padding: 0px 0px 0px 12px; margin: 0px 0px 24px 0px;}


.thumbnail {width: 192px; height: 116px; border: 2px solid #CCCCCC; background: #999999;}
.thumbnail:hover {border: 2px solid #be1f97;}
/* #aboutHolder {background: #3f3f3f; padding: 24px; background:#98bf21; width: 500px; position:relative; visibility:}*/


.breadcrumbs {color: #666666; font-size: 11px; font-family: Arial, Helvetica, sans-serif; margin: 0px 0px 24px 0px;}
.breadcrumbs a {text-decoration: underline; color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;} 
.breadcrumbs .current_project_looked_at {font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-weight: bold;}


/* --------------- BLOG ----------------------------------------------------
---------------------------------------------------------------------------*/	

#blogPosts {
	width: 350px;
	float: left;
	display: block;
	margin: 0px 0px 18px 0px; 
	padding: 0px 0px 18px 0px;
}

#blogPostDetail {
	width: 600px;
	float: left;
}

#content #blogPostDetail p {
	font-size: 12px; 
	color: #656565; 
	font-family: Arial, Helvetica, sans-serif;
	margin: 4px 0px 24px 0px; line-height: 24px;
}

/* ---- post/details page styling ---- */
#blogPostDetail .title_blog {font-size: 18px; margin: 14px 0px 0px 0px; color: #333; font-family: Arial, Helvetica, sans-serif;}

#content .blog_post {width: 300px; float: left; margin: 0px 24px 24px 0px;}
#content .blog_post .title_blog {font-size: 18px; margin: 14px 0px 0px 0px; color: #333; font-family: Arial, Helvetica, sans-serif;}
#content .blog_post .description_blog {color: #999999;}
#content .blog_post .blog_picture {height: 150px; background: #CCCCCC; margin: 0px 0px 12px 0px;}

#blogPosts {
	
}

.recent_post {
	/*float: left; 
	display: block;
	width: 350px;*/
     
    border-bottom: 1px dotted #CCCCCC;
}

.recent_post a {
	color: #656565;
	font-weight: bold;
}

.date_published {width: 270px; float: left; font-size: 11px; color: #999; margin: 12px 0px; font-style: italic; font-family: Arial, Helvetica, sans-serif;}
.comments_right {float: right; width: 82px;} 
.comments_right a {font-size: 11px; color: #999999; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}


/* ---- title sections in right column ---- */
#archived_column {font-family: Arial, Helvetica, sans-serif; float: right; width: 180px;}
#archived_column h4 {font-size: 14px; color: #333333; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
/* ---- class to group right column content together (twitter feed, blog archives, etc) ---- */
#archived_column .right_column_group {margin: 6px 0px 60px 0px; padding: 12px 0px 0px 0px; border-top: 1px dotted #999999;}

#archived_column ul li {font-family: Arial, Helvetica, sans-serif; color: #999999; font-size: 12px; margin: 0px 0px 16px 0px; list-style: none;}
#archived_column ul li a {font-family: Arial, Helvetica, sans-serif; color: #999999; font-size: 12px; margin: 0px 0px 16px 0px; /*list-style: none;*/ text-decoration: none;}
#archived_column ul li a:hover {font-family: Arial, Helvetica, sans-serif;color: #747474; font-weight: bold; font-size: 12px; margin: 0px 0px 12px 0px; list-style: none;}






/* --------------- ABOUT ----------------------------------------------------
---------------------------------------------------------------------------*/	
#aboutHolder h2 {
	font-size: 1.3em;
	margin: 0px 0px 8px 0px;
	font-style: italic;
	color: #CCCCCC;
}

#aboutHolder p {
	margin: 0px 0px 12px 0px; 
	line-height: 21px;
	font-size: 0.8em;
}

#close {
	font-size: 12px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
}

#aboutHolder {
	position: absolute;
	left: -700px;
	z-index: 3;
	padding: 24px;
	width: 372px;
	width: 500px;
	background-color: #2C2C2C;
	color: #e9e9e9;
	border: 1px solid #484848;
}

#aboutHolder em {
	color: #fff;
}

#aboutHolder strong {
	color: #d237ac;
}





/* --------------- HALF CONTENT & FULL CONTENT DIVISION STYLES ------------ /
---------------------------------------------------------------------------*/

/* full content */
#fullContent h1 {font-size: 14px; color: #666666; font-family: Arial, Helvetica, sans-serif;}
#fullContent p {margin: 4px 0px 24px 0px; line-height: 24px;}
#fullContent {padding: 0px 0px 34px 0px;}

/* half content */
#halfContent h1 {font-size: 14px; color: #333333; margin: 0px 0px 12px 0px; font-family: Arial, Helvetica, sans-serif;}
#halfContent p {margin: 4px 0px 24px 0px; line-height: 24px;}
#halfContent {padding: 4px 0px 34px 0px; width: 60%;}
#halfContent em {color: #666666; font-weight: bold;}

#halfContent dl {margin: 0px 0px 34px 0px; font-family: Arial, Helvetica, sans-serif; float: left; width: 300px;}
#halfContent dl dt {font-size: 14px; color: #333; font-weight: bold; margin: 0px 0px 8px 0px;} 
#halfContent dl dd {color: #666; font-size: 12px; margin: 0px 0px 4px 0px;}

#halfContent dl label, input {display: block;} 
#halfContent #reachUs {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #666666;}


/* ------------ TOOLTIP ------------------------- */
/* ---------------------------------------------- */
.tooltip {
	display:none;
	background:transparent url(images/black_arrow.png) no-repeat;
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
	font-family: Arial, Helvetica, sans-serif;
}

/* style the trigger elements */
#content img {
	border:0;
	cursor:pointer;
}

/* --------------- PROJECT DETAILS -----------------------------------------
---------------------------------------------------------------------------*/
#content .project_details {
	padding: 0px 0px 0px 4px;
	float: left;
}

#content .project_images {
	float: left; 
	width: 700px;
}

.project_details {width: 220px; float: left; margin: 0px 54px 24px 0px;} 
.project_images img {margin: 0px 0px 34px 0px; border: 3px solid #CCCCCC;}

#content .project_details a {
	color: #0066CC;
}

#content .project_details h3 {
	font-size: 14px;
	color: #be1f97;
	font-family: Arial, Helvetica, sans-serif;
}

#content .project_details p {
	margin: 2px 0px 24px 0px;
	line-height: 21px;
}

#content .project_details .title {/* -- this is an h4 with this ID applied to it -- */
	margin: 2px 0px 24px 0px;
	font-size: 16px; 
	font-weight: bold;
	color: #202020;
	font-family: Arial, Helvetica, sans-serif;
}

#content .project_details p a {
	color: #0099CC;
}

#content .project_images p img {/* -- styles the borders around each image from each project -- */
	border: 4px solid #CCCCCC;
}
	
	
#halfContent .numbers {float: left; width: 76px; height: 50px; background: url(images/circle_numbers_off.jpg) no-repeat; font-size: 26px; color: #fff; text-align: center; font-size: 20px; font-family:Arial, Helvetica, sans-serif; padding: 26px 6px 0px 2px;}
#halfContent .approach_content {float: left; width: 588px; margin: 0px 0px 34px 12px;} 
#halfContent .approach_content h3 {font-size: 24px;}
	
	


/* ------- NAVIGATION ---------------------------------------------- */
/*------------------------------------------------------------------ */
#header ul {font-family: Arial, Helvetica, sans-serif; color: #4d4d4d;}
#header ul li {float: left; display: block; list-style: none; margin: 12px 18px 8px 24px;}
#header ul li a {display: block; font-size: 12px; font-weight: bold; color: #4d4d4d; padding: 4px; text-decoration: none;}
#header ul li a:hover {background-color: #333333; color: #fff;}

#header ul li.brands {width: 65px; background: url(images/dropdown_arrow.gif) right center no-repeat;}
#header ul li.designers {width: 85px; background: url(images/dropdown_arrow.gif) right center no-repeat;}

#header ul li.contactMe {font-size: 12px; color: #d237ac; padding: 4px; margin: 12px 0px 8px 124px; font-weight: bold;}

/* ---- current page style ---- */
#philosophyPage .philosophyPage, #legalPage .legalPage, #contactPage .contactPage, #newsPage .newsPage, #approachPage .approachPage {background-color: #333333; color: #fff;}


/* NAVIGATION DROP-DOWNS */
#header ul li ul { 
	display: none;
	position: absolute;
	background-color: #333333;
	padding: 12px; 
	z-index: 100;
}

#header ul li li { 
	clear: both;
	margin: 0px; 
	padding: 0px;
	background-color: #333333; 
	color: #fff;
}

#header ul li li a {
	display: block; 
	color: #ababab; 
	padding: 3px 4px;
}

#header ul li li a:hover {
	background-image: none; 
	background-color: none; 
	color: #CCCCCC;
}