/*20:20 Starter Kit - it's the Bees Knees*/

/* -- Generic Initiation items not covered in "undothml.css" -- */
@import: "ie6win.css";
@import: "ie7win.css";
html
{
    font-size:100%;
}

body
{
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 62.5%;
	background: #fff url(../../Images/defaultBG.jpg) center 0 no-repeat;
	color: #747474;
	text-align: center;
}

body#welcome,
body.compass {
    background: none;  
}

body.stamp
{
    background:url(../../Images/bodyStampBG.jpg) 42px bottom no-repeat;
}

h1 { font-size: 3.2em; font-family: Georgia, Times New Roman, Serif; margin-bottom: 0.625em; line-height: 1; }
h2 { font-size: 1.6em; font-family: Georgia, Times New Roman, Serif; }
h3 { font-size: 1.4em; font-family: Georgia, Times New Roman, Serif; margin-bottom: 0.714em; }

abbr,acronym 
{
	border-bottom: 1px dotted #000;
	cursor: help;
}
 
em 
{
	/*bringing italics back to the em element*/
	font-style:italic;
}

blockquote, ul, ol, dl 
{
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}

ol, ul, dl 
{
	/*bringing lists on to the page with breathing room */
	margin-left: 2em;
}

ol li 
{
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}

ul li 
{
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

dl dd 
{
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}

table
{
    border-right: 1px solid #D2D2D2;
    border-top: 1px solid #D2D2D2;
}

th,td 
{
	/*borders and padding to make the table readable*/
	border-bottom: 1px solid #D2D2D2;
    border-left: 1px solid #D2D2D2;
    padding: 1em;
    width: 100%;
}

th 
{
	/*distinguishing table headers from data cells*/
	font-weight: bold;
	text-align: center;
}

caption 
{
	/*coordinated marking to match cell's padding*/
	margin-bottom: .5em;
	/*centered so it doesn't blend in to other content*/
	text-align: center;
}

p, fieldset, table, ul  
{
	/*so things don't run into each other*/
	margin-bottom: 1.6em;
}

.invisible { display: none; }

u
{
	text-decoration: none;
}

.hide
{
	display: none;
}
.floatLeft
{
	float: left;
}
.floatRight, .right
{
	float: right;
}
img.floatRight, img.right
{
	margin-left: 10px;
}
.clearBoth
{
	clear: both;
}
/*	Clearfix method for floated elements	*/
.clear:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/*	IE7 hack */
.clear
{
	display: inline-block;
}
.clear
{
	display: block;
}

/*Generic Levin image replacement -  http://levin.grundeis.net/files/20030809/alternatefir.html */
.replace
{
	position: relative;
	/* margin: 0px;*/
	padding: 0px; /* hide overflow:hidden from IE5/Mac */ /* \*/
	overflow: hidden; /* */
}
.replace span
{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1; /*for Opera 5 and 6*/
}
/*Example HTML - all elements that require replacement use the .replace class then
set the rule for the specific image and dimensions and associate with the elements ID.

<h1 id="myh1" class="replace" >Headline<span></span></h1> 

the add the CSS:
#myh1, #myh1 span
{ 
	width:300px;
	height:100px; 
	background-image: url(head.png); 
} 
*/


/* begin normal CCS*/

a { outline: none; color: #4d4d4d; }

p, li, dd, dt { line-height: 1.6; }

#box li { line-height: 1.4; margin: 0; }

#col1 h1 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000; 
}

#doc {
    width: 960px;
    margin: 0 auto;
    /*min-width: 960px;*/
    text-align: left;
}

#skip { 
    top: -500px; 
    position: absolute;
    left: 20px; 
    color: #000;
    font-size: 1.1em;
} 

#skip ul { 
    margin: 0;
} 

#skip a, #skip a:hover, #skip a:visited { 
    width: 1px; 
    height: 1px; 
    overflow: hidden;
} 

#skip a:active, #skip a:focus { 
    width: 75px; 
    height: auto;
    top: 520px; 
    position: absolute; 
    padding: 10px 20px;
    display: block;
}

.col {
    float: left;    
}

.teaser { font-weight: bold; }

.structural {
    position:absolute;
    left:-9999px;
}

#article .figure, #people .figure { 
    margin-bottom: 1em; 
    border: solid 1px #AEB0B3; 
}

#people a:hover .figure
{
    border: 1px solid #ea692d;
}

#article #box .figure { 
    border: 0; 
    width: 604px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#article #box .caption { 
    position: absolute;
    top: 422px;
    left: 0;
}

.fullWidth { width: 575px; }

.nav li,
.externalSite {
    float: left;
    list-style: none;   
}

.nav li a,
.externalSite a {
    display: block; 
    line-height: 1.2;
    text-decoration: none;
}

#box a:hover, #box a:focus,
#rss a:active, #rss a:focus,
#skip a:active, #skip a:focus,
.nav li a:hover, .nav li a:focus,
#breadcrumb li a:hover, #breadcrumb li a:focus { 
    text-decoration: none;
    color: #fff;
    background: #000;
}

 #header {
    height: 151px;
    padding: 0 0 0 0;
    background-image: url(../../Images/header.jpg);
    background-repeat: no-repeat; 
    margin-bottom: 14px;
}

 #header a
 {
     cursor: pointer;
 }

 #header h2
 {
     position:relative;
     top: 26px;
 }

body.inkwell #header {
    background-position: 0 0;  
}

body.compass #header {
    background-position:  0 -156px; 
}

body.funnel #header {
    background-position: 0 -312px;   
}

body.syringe #header {
    background-position: 0 -468px;   
}

body.stamp #header {
    background-position: 0 -624px;  
}
body.tweezers #header {
    background-position: 0 -780px;  
}

#footer { 
    padding-top: 8px;
    border-top: 1px solid #000; 
}

#footer .nav {
    margin: 0;  
    float: left; 
} 

#footer .nav li {
    margin-right: 12px;
    padding-right: 12px; 
    border-right: solid 1px #000;    
}

#footer .nav li:last-child, #footer .nav li.last {
    border-right: none;    
}

#article { padding: 10px 0 27px 0; }

#col1 { width: 149px; }
#col1 .gutter { margin-right: 33px; }
#col2 { width: 610px; }
#col2 .gutter { margin-right: 36px; }
#col3 { width: 201px; }

.gallery #col2 { width: 811px; position: relative; }

h1#pt1, h1#pt1 span {
    background: url(../../Images/pt1.jpg) top left no-repeat;  
    width: 116px;
    height: 52px;
}

h1#pt2, h1#pt2 span {
    background: url(../../Images/pt2.jpg) top left no-repeat;  
    width: 274px;
    height: 26px;
}

h3#pt3, h3#pt3 span {
    background: url(../../Images/pt3.jpg) top left no-repeat;  
    width: 121px;
    height: 17px;
}

h2#pt4, h2#pt4 span {
    background: url(../../Images/pt4.jpg) top left no-repeat;  
    width: 112px;
    height: 106px;
}

#header a:hover h2#pt4 span
{
    background-position:bottom left;
}

h3#pt5, h3#pt5 span {
    background: url(../../Images/pt5.jpg) top left no-repeat;  
    width: 200px;
    height: 15px;
}

h2#pt4, h3#pt6 { float: right; }

h3#pt6, h3#pt6 span {
    background: url(../../Images/pt6.jpg) top left no-repeat;  
    width: 106px;
    height: 16px;
}

#col2 .nav { margin: 0; }

.gallery #box {
    position: absolute; 
	z-index: 100; 
	display: block;
	width: 1;
	height: 1;
	border: solid 1px #AEB0B3;
	background: #fff;
	display: none;
}

.gallery .box {
    border: solid 1px #aeb0b3; 
}

.gallery li,
.externalSite {
    margin: 0 9px 9px 0;
}


#clientlogos .box 
{
     width: auto;
     height: auto;
     padding: 20px 52px 20px 52px;
     border: none;
}

#clientlogos .client    { text-align: center; }
#clientlogos li         { margin: 0; }

#people a {
    width: 196px;
    height: 220px;
    line-height: 0;
}

#people .box {
    border: 0; 
    width: inherit;
    height: inherit;
    margin: 0;
}

.gallery li a:hover .box, 
.gallery li a:focus .box, 
.externalSite a:hover .box, 
.externalSite a:focus .box {
    border: solid 1px #ea692d; 
    outline: 0;
    background: #fff;
    color: #ea692d;
}

.gallery li a:hover .box img, 
.gallery li a:focus .box img,
.externalSite a:hover .box img, 
.externalSite a:focus .box img {
    opacity: 0.85;
    filter: alpha(opacity=85);	
}

.gallery li a:hover, 
.gallery li a:focus,
.externalSite a:hover, 
.externalSite a:focus {
    background: #fff;
}

.gallery .person_3, .gallery .casestudy_3  {
    margin-right: 0;
}

.gallery .person_3 .box,
.gallery .casestudy_3 .box {
    margin-right: 0;
    /*background: #fff;*/
}

.gallery .box span,
.externalSite .box span {
    display: block;
    line-height: 2.4;
    padding: 0 5px;
    text-transform: uppercase;
}

#people .box span {
    line-height: inherit;
    display: block; 
    line-height: 1.6;
}

#col1 h3 { 
    margin-bottom: 5px;  
}

#col1 ul { 
    margin: 0 5px;  
}

#col1 li { 
    float: none; 
    border-bottom: 1px solid #000;
    margin-bottom: 5px; 
    padding-bottom: 5px;
}

#col1 .accordianPanel a {
    font-size: 1.1em; 
    line-height: 1.6; 
    text-align: center;  
}

#col1 .nav .accordianPanel a, #col1 .nav .accordianPanel a span {
    width: auto;
    height: auto;
    background: none;
}

#col1 .nav a:hover, #col1 .nav a:focus, #col1 .nav .accordianPanel .active a {
    color: #ea692d; 
}

#col1 .nav a span {
    display: block; 
    font-weight: bold;  
}

#primary a, #primary a span {
    width: 115px;
    height: 21px;
    display: block;
    cursor:pointer;
}

#primary a, #primary a span,
#secondary a, #secondary a span,
#secondary h3, #secondary h3 span  {
    background-repeat: no-repeat;    
    background-image: url(../../Images/navigation.jpg);
}

#secondary h3 { top: -9px; position: relative; left: 22px; }

#secondary #at7, #secondary #at7 span {
    width: 66px;
    height: 18px;
}

#secondary #at10, #secondary #at10 span {
    height: 68px;
}

#ourwork, #ourwork span { background-position: 0 0;}
#whoweare, #whoweare span { background-position: 0 -100px;}
#whatwedo, #whatwedo span { background-position: 0 -200px;}
#ourclients, #ourclients span { background-position: 0 -300px;}
#contactus, #contactus span { background-position: 0 -400px;}
#ourpeople, #ourpeople span { background-position: 0 -500px;}
#ourawards, #ourawards span { background-position: 0 -550px;}
#latestnews, #latestnews span { background-position: 0 -341px;}
#at7, #at7 span { background-position: -25px -600px;}
#at8, #at8 span { background-position: -6px -700px;}
#at9, #at9 span { background-position: -6px -800px;}
#at10, #at10 span { background-position: -6px -900px;}
#at11, #at11 span { background-position: -6px -1000px;}
#at12, #at12 span { background-position: -6px -637px;}

.active #ourwork, .active #ourwork span, #ourwork:hover, #ourwork:focus, #ourwork:hover span, #ourwork:focus span 
{ background-position: -115px 0; }
.active #whoweare, .active #whoweare span, #whoweare:hover, #whoweare:focus, #whoweare:hover span, #whoweare:focus span 
{ background-position: -115px -100px; }
.active #whatwedo, .active #whatwedo span, #whatwedo:hover, #whatwedo:focus, #whatwedo:hover span, #whatwedo:focus span 
{ background-position: -115px -200px; }
.active #ourclients, .active #ourclients span, #ourclients:hover, #ourclients:focus, #ourclients:hover span, #ourclients:focus span 
{ background-position: -115px -300px; }
.active #contactus, .active #contactus span, #contactus:hover, #contactus:focus, #contactus:hover span, #contactus:focus span 
{ background-position: -115px -400px; }
.active #ourpeople, .active #ourpeople span, #ourpeople:hover, #ourpeople:focus, #ourpeople:hover span, #ourpeople:focus span 
{ background-position: -115px -500px; }
.active #ourawards, .active #ourawards span, #ourawards:hover, #ourawards:focus, #ourawards:hover span, #ourawards:focus span 
{ background-position: -115px -550px; }
.active #latestnews, .active #latestnews span, #latestnews:hover, #latestnews:focus, #latestnews:hover span, #latestnews:focus span 
{ background-position: -114px -341px; }

.active #at9, .active #at9 span, #at9:hover, #at9:focus, #at9:hover span, #at9:focus span { background-position: -122px -800px; }
.active #at10, .active #at10 span, #at10:hover, #at10:focus, #at10:hover span, #at10:focus span { background-position: -125px -900px; }
.active #at11, .active #at11 span, #at11:hover, #at11:focus, #at11:hover span, #at11:focus span { background-position: -125px -1000px; }
.active #at12, .active #at12 span, #at12:hover, #at12:focus, #at12:hover span, #at12:focus span { background-position: -126px -637px; }


#box .ldr { padding: 5px 10px; display: block; }

#box .header { 
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

#box .header a { 
    float: right;
    display: block;
    padding: 0 10px;
    line-height: 20px; 
    color: #fff;
    background: #AEB0B3;
}

#box .caption { padding-top: 10px; }

#box img {
    float: left;
    display: block;  
    margin-left: 35px; 
}

#box .figure img {
    float: none; 
    margin-left: 0; 
}

#box p, #box ul {
    width: 448px;
    margin: 0 10px 0.7em 0;
    float: right;
    line-height: 1.4;
}

#box ul li
{
    list-style-type: disc;
    list-style-position:inside;
}

#secondary {
    border: solid 1px #aeb0b3;
    margin-top: 30px;
    background: #fff;
}

#secondary li {
    border: 0;
}

#secondary li a, #secondary li a span {
    width: 104px;
    height: 48px;
}

.linkBlock { display: block; float: right; margin: 0 -20px 1em 10px; }

#rss { margin-top: 25px; }

#rss .feed { margin: 0  0 0.5em 0; }

#rss li {
    list-style: none;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: solid 1px #000;
}

.block { padding-bottom: 1em; }

.block fieldset { border: none; }

#signUp { margin-top: 44px; }

#signUp .populate { width: 60%; }
#signUp .button { margin-bottom: -3px; }
#signUp p { width: 100%; }


#breadcrumb { margin: 0 0 2em 0; }

#breadcrumb li { 
    display: inline;
    list-style: none;
    padding-right: 6px;  
    margin-right: 5px; 
    border-right: solid 1px #AEB0B3; 
}

#breadcrumb li.last { 
    border-right: 0; 
}

#breadcrumb li a { 
    color: #000;
}

p.profile span,
p.profile span, #people p span { display: block; }

#people { margin: 0; }

#box p.msg, #ldr { padding: 10px; display: block; }

body.error #col2 { margin-left: 149px; }

#col2 .grid3 .col { 
    width: 191px;  
}

#col2 .grid2 .col { 
    width: 287px;  
}

#col2 .grid3 .col .gutter { 
    margin-right: 10px; 
}

#col2 .grid2 #col2-2 .gutter,
#col2 .grid3 #col3-3 .gutter { 
    margin-right: 0; 
}

#col2 .grid2, #col2 .grid3 { margin-bottom: 1em; }

#ourawards li      { width: 270px; text-align: center; margin-bottom: 1em; }
#ourawards li a    { text-align: center; }

/*news listing page*/
.newsListing #col2
{
 
}

.newsListing #col2 .gutter
{
    
}

.newsListing .listingItem
{
    margin-bottom: 1em;
    background: url(../../Images/newsListingBG.jpg) 0 0 repeat-x;
    padding: 1.8em 1em 0.2em 1em;
}

.newsListing .listingItem h2
{
    font-size: 2em;
    line-height: 2.4;
}

.newsListing .listingItem .date
{
    margin: 0;
    font-weight: bold;
    font-style:italic;
}
/*social*/
#social
{
    margin: 0;
    padding: 0;
    float: right;
    margin-bottom: 1em;
}

#social li
{
    display: inline;
    margin-left: 0.2em;
}