/**
 *
 * W Street  Associates
 * Standard layout (all parts) for W Street Associates
 * 
 * This stylesheet has been developed by Alissa Miller for the use
 * of the W Street Associates
 *
 * @project		W Street
 * @version		1.0
 * @package		xhtml-css
 * @author		Alissa Miller
 * @copyright	2010 by the author
 * @cssdoc		version 1.0-pre 
 * @license		GPL v3 
 * 
 * @colordef	#333; 		dark grey;		body text
 * @colordef	#666; 		light grey; 	body text
 * @colordef	#eb6021; 	orange; 		link color
 */ 


/** 
 * Reset 
 * 
 * @section			reset 
 * @see				http://meyerweb.com/eric/tools/css/reset/
 * @version			v1.0 | 20080212
 * @lastmodified	2009-02-06 17:15
 */ 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var, dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}


/** 
 * General Layout 
 * 
 * @section			general layout 
 * @lastmodified	2010-01-10
 */ 
body {
	
	color: #333;
	font: 12px/18px Arial, Helvetica, Verdana, sans-serif;
	padding: 0 0 62px 0;
}
body.about, body.client {color: #000;}

#wrapper {background: #fff url(../images/bg-gradient.png) 50% 0  repeat-y;}
#bottom-bg {background: #fff url(../images/bg-bottom-gradient.png) 50% 0  no-repeat; height: 40px;}
#container {
	background: #fff url(../images/blue-gradient.png) 0 0 no-repeat;
	margin: 0 auto;
	padding-bottom: 4px;
	width: 985px;
}

#main {background: transparent url(../images/bottom-border.png) left bottom no-repeat; padding-bottom: 5px; overflow: hidden;}
.home #main {
	background: transparent url(../images/trees-bg.jpg) 50% bottom no-repeat;
	min-height: 688px;
}



#left {
	float: left;
	width: 278px;
}
.home #left {width: 464px;}
.home #left a {font-size: 13px;}

#logo {
	padding-top: 51px;
}
#logo a {
	background: transparent url(../images/logo.png) 1px 0 no-repeat;
	display: block;
	height: 88px;
	text-indent: -1000px;
	width: 262px;
}



#right {
	margin: 0 5px 0 0;
	margin-left: 278px;
	/*width: 702px;*/
}
.home #right {margin-left: 464px;}


#utilities {
	font-size: 14px;
	font-weight: bold;
	margin: 0 30px 0 30px;
	overflow: hidden;
	padding-top: 28px;
}
.home #utilities {margin-left: 11px;}

#utilities #home {float: left;}
#utilities #contact {float: right;}
.home #utilities #contact {float: none;}

#utilities a {padding: 2px 2px 2px 30px;}
#home a {background: transparent url(../images/icons.png) 0 -18px no-repeat;}
#contact a {background: transparent url(../images/icons.png) 0 -43px no-repeat;}


#content {
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,.85);
	padding: 33px 47px 150px 32px;
}
.home #content {
	background-color: transparent;
	margin: 0 0 17px 0;
	padding: 0;
}
.about #content {
	background-image: url(../images/about-trees.jpg);
	background-position:right bottom;
	background-repeat: no-repeat;
	padding-bottom: 250px;
	padding-right: 60px;
}
#content #pagetitle {display:none;} /* only used for print stylesheet */


.profile {clear: right; margin-left: 11px;}
.profile img {float: right;}
.profile-text {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	margin: 0 16px 14px 0;
	padding: 8px 15px 5px 2px;
	width: 305px;
}
.profile p {margin-bottom: 10px;}
.profile p.last {margin-bottom: 0;}
.profile-name {font-size: 14px; font-weight: bold;}


#clients, #former-clients {
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255,.85);
	padding: 0 16px 0 11px;
	width: 488px;
}
#clients .inner, #former-clients .inner {
	border-top: 1px solid #999;
	padding: 8px 2px 15px 2px;
}
#former-clients .inner {border-bottom: 1px solid #999;}
#former-clients {padding-bottom: 10px;}


#clients h2 {float: left; width: 50%;}
#clients p {
	color: #eb6021;
	float: right;
	font-size: 13px;
	text-align: right;
	width: 50%;
}

.home #clients ul {
	background: transparent url(../images/clients/client-logos-h.png) 0 50% no-repeat;
	height: 64px;
	list-style: none;
	margin-top: 35px;
	padding: 0;
	width: 484px;
}
#clients li {float: left;}
#clients li a {
	float: left;
	height: 64px;
	text-indent: -5000px;
}
#clients a.jewishboston {width: 132px;}
#clients a.iyc2011 {width: 80px;}
#clients a.redtomato {width: 76px;}
#clients a.aerva {width: 93px;}
#clients a.ambient {width: 103px;}


#former-clients, #former-clients .inner {overflow: hidden;}
#former-clients h3 {
	float: left;
	width: 156px;
}
.home #former-clients ul {
	float: left;
	list-style: disc inside none;
	margin-top: 14px 0 0 0;
	padding: 0;
}
#former-clients ul.left {width: 186px;}
#former-clients ul.right {width: 142px;}


.home .headshot {height: 108px; margin-right: 19px; width: 138px;}
.about .headshot {float: left; margin: 0 15px 10px 0;}



#client-nav {
	margin: 100px 0 150px 80px;
}
#client-nav h3 {margin: 0 0 10px 23px;
}
/* #client-nav .on {display: none;} hide the client who's page we're on */
#client-nav ul {
	background: transparent url(../images/seperator.png) 50% bottom no-repeat;
	padding-bottom: 5px;
	width: 133px; 
}
#client-nav li {
	background: transparent url(../images/seperator.png) 50% top no-repeat;
	padding-top: 5px;
}
#client-nav a {
	background: transparent url(../images/clients/client-logos-h.png) 0 0 no-repeat;
	display: block; 
	height: 64px; 
	text-indent: -5000px;
	
}
#client-nav a.jewishboston {
	background-position: -1px 0;
	width: 131px;
	margin-left: 0;
}
#client-nav a.iyc2011 {
	background-position: -133px 0;
	width: 79px;
	margin-left: 28px;
}
#client-nav a.redtomato {
	background-position: -213px;
	width: 75px;
	margin-left: 28px;
}
#client-nav a.aerva {
	background-position: -289px;
	width: 92px;
	margin-left: 15px;
}
#client-nav a.ambient {
	background-position: -382px;
	width: 101px;
	margin-left: 15px;
}


#client-branding {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	margin-bottom: 20px;
	overflow: hidden; 
	width: 100%; 
}
.client #content img.client-logo {
	float: left;
	width: 222px;
	/*height: 150px;*/
}
.client #content .callout {
	border-left: 1px solid #ccc;
	float: left;
	/*height: 150px;*/
	width: 398px;
}
.client .intro {/*margin: 170px 40px 8px 0;*/ margin: 0 40px 8px 0;}


#content .contact {
	margin: 50px 0 200px 0;
}
#content .contact h2 {margin-bottom: 20px;}


#footer {
	background:transparent;
	color: #666;
	font-size: 11px;
	margin: 0 auto;
	padding: 10px 0 0 7px;
	width: 985px;
}
#footer p {margin: 0;}
	

.home .intro {
	font-size: 18px;
	line-height: 28px;
	margin: 34px 0 0 64px;
	width: 368px;
}
.about .intro {font-size: 14px; font-weight: bold; margin-top: 30px;}
body.overview .intro {margin-top: 0;} /* overide the top margin for overview page */
.client .intro {font-size: 14px; line-height: 20px; margin-bottom: 25px;}
.tag {
	display: block;
	font-size: 24px;
	margin-bottom: 4px;
}
.readmore { background: transparent url(../images/icons.png) right 3px no-repeat; padding-right: 15px;}
.headshot {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}
.tel {
	font-weight: bold;
}
/** 
 * Typography
 * 
 * @section			typography 
 * @lastmodified	2010-01-10
 * @note			H1: site title or page title
 * @note			H2: 
 * @note			H3: 
 */ 

p, ol, ul {margin-bottom: 8px;}
h1, h2, h3, h4, h5, h6 {color: #7e716e; font-weight: bold;}
h1 {font-size: 32px; line-height: 48px;} /* logo */
h2 {font-size: 18px; line-height: 18px;}
h3 {font-size: 14px; line-height: 18px;}
h4 {font-size: 14px; line-height: 18px; font-weight: normal;}
h5 {font-size: 12px; line-height: 18px;}
h6 {font-size: 12px; line-height: 18px; font-weight: normal;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

blockquote, blockquote+p {color: #444; font: italic 14px/22px Georgia, serif;}
blockquote {margin: 10px 15px;}
blockquote+p {font: normal 12px/16px Georgia, serif; margin: 10px 15px 10px 80px;}

#content ul {list-style-type: disc; padding-left: 15px;}
#content ol {list-style-type: decimal; padding-left: 15px;}
#content li {padding-bottom: 3px;}


/** 
 * Links
 * 
 * @section			links 
 * @lastmodified	2010-01-10
 */ 
a:link, a:visited {
	color: #eb6021;
	text-decoration: none;
}
a:hover, a:active {
	color: #9f3302;
	text-decoration: none;
}

#utilities a:link, #utilities a:visited {
	color: #333;
	text-decoration: none;
}
#utilities a:hover, #utilities a:active {
	color: #9f3302;
	text-decoration: none;
}



/**
 * SimpleModal Basic Modal Dialog
 * 
 * @section		modal
 * @lastmodified	2010-01-10
 * @note			styles for modal box
 */
#modalbox {display: none;}

/* Overlay */
#simplemodal-overlay {
	background-color: #000;
	cursor: normal;
}

/* Container */
#simplemodal-container {
	background-color: #fff;
	border: 3px solid #666;
	color: #000;
	font-size: 14px;
	height: 246px;
	line-height: 20px;
	padding: 4px;
	width: 422px;

	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#simplemodal-container a.modalCloseImg {
	background: url(../images/x.png) no-repeat;
	width: 25px;
	height: 29px;
	display: inline;
	z-index: 3200;
	position: absolute;
	top: -15px;
	right: -16px;
	cursor: pointer;
}
.simplemodal-wrap {background: #fff url(../images/modal-bg.jpg) 50% bottom no-repeat;}

/* Modal Content */
#simplemodal-container #modalbox {padding: 8px 12px;}
#simplemodal-container h2 {
	color: #666;
	font-size: 22px;
	margin-bottom: 30px;
}
#simplemodal-container p {margin-left: 40px;}