/* =======================================================================================================================
	FLOAT CLEARING IN MOZILLA
======================================================================================================================= */

#header:after,
#topNav:after,
#servicesLinks:after,
#menuWrapper:after,
#subWrapper:after,
.clear:after,
#childWrapper:after,
.jobRequirements:after,
.jobDesc:after,
.caseStudyHomeWrapper:after,
#childWrapper .panel:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* =======================================================================================================================
	GENERAL PAGE FORMATTING
======================================================================================================================= */

/* .clear {display: inline-table;} - FIX FOR IE MAC, BUT THROWS A JS ERROR */
  
a {color: #a86666; text-decoration: none;} 

a:hover {color: #666; text-decoration: underline;} 

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 130%;
margin-top: 0px;
margin-bottom: 0px;
color:#666666;
}

h2 {
font-family: Times, "Times New Roman", serif;
font-weight: bold;
font-size: 165%;
margin-bottom: 0px;
color: #777;
display: inline;
}

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 110%;
margin-top: 0px;
color: #666;
display: inline;
}
h3.red {
color: #a86666;
margin-bottom: -12px;
}
h3.red2 {
color: #a86666;
}

body {
padding: 0px 382px;
margin: 0;
text-align: center;
background-image:url(/images/bg_new8.gif);
background-repeat: repeat-x;
background-color: #fdfdfd;
font:x-small zurich,verdana,helvetica,sans-serif;
}
/* Begin font hack for Opera */
html>body {font-size:small;}
/* End font hack for Opera */

#constraint {
margin: 0 auto;
padding: 0;
width: 50%;
max-width: 219px; 
}

#pagewrapper {
text-align: left;
background-color: #fff;
margin: 0 -382px;
padding: 0;
min-width: 769px;
position: relative;
z-index: 1; /* necessary for dropdowns in IE */
padding: 0 2px;
border-width: 0 2px;
border-style: solid;
border-color: #ccc;
font-size: 90%;
}

#wrapper { width: 100%; 
padding: 0;
margin: 0;}

#subWrapper {
font-size: 90%;
width: 100%;
height: auto;
position: relative;
z-index: 2; /* necessary for dropdowns in IE */
padding: 0;
margin: 0;
}


/* =======================================================================================================================
	HEADER
======================================================================================================================= */


#logoWrapper {
padding: 25px 0 0 29px;
float: left;
}

#logoWrapper img {
border: 0;
}

#navContact {
font-size: 90%;
background-image: url(/images/nav_top_row_bg.jpg);
margin-left:170px;   
padding: 5px 10px 0 0;
height : 37px;  
text-align: right;
/*font-size: 90%;*/
} 

#navContact ul {
margin: 0;
padding: 0;
}

#navContact li {
padding: 0 7px;
display: inline;
border-right: 1px solid #666;
}

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

#servicesLinks {
margin-left: 168px; 
height: 22px;
}

#servicesLinks ul {
margin: 0;
padding: 0;
}

#servicesLinks li {
list-style : none; 
display : inline; 
}

.serviceLink {
}

#servicesLinks a {
float: left;
height: 16px;
padding: 2px 5px 2px 5px;
border-right: 2px solid #e6e6e6;
background-position: 5px 2px;
background-repeat: no-repeat;
margin: 1px 0;
}

.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */

#servicesLinks #strategy {background-image: url(/images/top_tabs/strategy_on.gif); width: 140px; border-left: 2px solid #e6e6e6; }
#servicesLinks #creative {background-image: url(/images/top_tabs/creative_on.gif); width: 65px; }
#servicesLinks #programming {background-image: url(/images/top_tabs/programming_on.gif); width: 213px; }
#servicesLinks #marketing {background-image: url(/images/top_tabs/marketing_on.gif); width: 129px; }

#navBottomRow {
background-image: url(/images/nav_bottom_row_bg.jpg);
background-color: #0061d0;
margin-left: 170px;  
padding: 0;
height : 54px;  
}

#navBottomRowContent {
background-image: url(/images/nav_bottom_white_tab.gif);
background-position: top left;
background-repeat: no-repeat;
padding: 0;
height : 54px;  
} 
#navBottomRowContent a {
color: #fff;
} 
#navBottomRowLoginStatus {
float: right;
vertical-align: bottom;
margin : 38px 10px 0 0;   
padding: 0;  
color: #fff;
} 
#clientLoginForm {
float: right;
margin : 0; 
padding: 26px 10px 0 0; 
width : 226px; 
height : 16px;  
} 
.clientLoginField {
background-color: #ECECEC;
border: 0;
height: 17px;
width: 143px;
margin: 0;
padding: 0;
} 
#clientLoginLinks {
float: right; 
height : 10px; 
width : 326px; 
padding: 13px 10px 0 0;
} 
#clientLoginLinks a{
color: #666;
} 
#clientLoginLinks a:hover{
color: #A8332D;
} 

/* =======================================================================================================================
	TOP NAVIGATION
======================================================================================================================= */
 
#menuWrapper { 
font-size: 90%;
border-top: 2px solid #666;
border-bottom : 2px solid #fff;
margin-top: 1px;
background-color: #b4b4b4;
position: relative;
z-index: 9999;
} 


#menu {  
margin: 0;
padding: 0;
/* what follows serves as a background image preloader for the hover state of the main nav buttons */
background-image: url(/images/navbutton_bg_over.jpg);
background-position: -100px 0;
background-repeat: no-repeat;
}

#menu li {
float: left; /* needs to be floated to display bg color */
margin: 0;
background-color: #fff;
display: inline;
/* what follows serves as a background image preloader for the hover state of the client login button */
background-image: url(/images/navbutton_client_bg_over.jpg);
background-position: -100px 0;
background-repeat: no-repeat;
}  

#menu li a {
float: left;
display: block;
height: 14px; 
background-color: #b4b4b4;
background-image: url(/images/navbutton_bg_up.jpg);
background-position: right bottom;
background-repeat: no-repeat;
color : #555; 
font-weight : bold; 
letter-spacing : 0; 
text-decoration : none; 
padding: 8px 16px 0 48px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif; 
margin: 1px 2px 0 0;
} 

#menu li a:hover {
color : #fff; 
background-image: url(/images/navbutton_bg_over.jpg);
background-position: right bottom;
background-repeat: no-repeat;
background-color: #666;
cursor: pointer;
margin-top: 0px;
padding-top: 9px;
}

#menu li.off ul,
#menu li.on ul {
margin: 0;
padding: 0 0 0 22px;
display: none;
position : absolute; 
left : 0;
top: 23px;
width: 540px;
}

#menu li.on ul a,
#menu li.off ul a {
margin: 28px 0 0 0; 
padding: 0 22px 5px 8px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
background-color: transparent;
color: #fff;
background-image: none;
border-left: 1px solid #ccc;
}

#menu li.on ul,
#menu li.off:hover ul,
#menu li.over ul {
display: block;
}

#menu li ul li {
padding: 0; 
width : auto; 
background-color: transparent;
background-image: url(/images/pixel.gif);
} 

#menu li.off ul a:hover,
#menu li.over ul a:hover {
background-color: transparent;
margin: 28px 0 0 0; 
padding: 0 22px 5px 8px;
background-image: none;
text-decoration: underline;
color: #fff;
border-color: #fff;
}

#menu #clientLogin {
float: right;
}

#menu #clientLogin a {
float: left;
display: block;
height: 14px; 
font-size: 11px;
background-color: #666;
background-image: url(/images/navbutton_client_bg_up.jpg);
background-position: left bottom;
background-repeat: no-repeat;
color : #eee; 
font-weight : bold; 
letter-spacing : 0; 
text-decoration : none; 
padding: 9px 48px 0px 16px;
font-family : arial, helvetica, sans-serif; 
margin: 0 0 0 2px;
} 

#menu #clientLogin a:hover {
color : #fff; 
background-image: url(/images/navbutton_client_bg_over.jpg);
background-position: left bottom;
background-repeat: no-repeat;
background-color: #a74b41;
cursor: pointer;
}

/* =======================================================================================================================
	RIGHT COLUMN
======================================================================================================================= */

#position4 {
position: absolute; left: auto; right: 0;
width: 28%;
background-color: #ffc000;
background-image: url(/images/news_bg_bl.gif); 
background-position: bottom left; 
background-repeat: no-repeat;
}
#position4 .content {
background-image: url(/images/news_bg_tl.gif); 
background-position: top left; 
background-repeat: no-repeat;
}
#news {
height: 297px;
}
#news_top {
height: 297px;
background-image: url(/images/news_bg_tl.gif); 
background-position: top left; 
background-repeat: no-repeat;
}
#newsWrapper {
text-align: left;
height: 297px;
background-image: url(/images/news_bg.jpg);
background-repeat: no-repeat;
background-position: right; 
} 
#newsTitle {
height: 18px;
padding: 15px 0 2px 0;
border-bottom: 1px solid #fff;
margin: 0 0 0 10px; 
} 

#newsTitle a img {
border: 0;
}

.newsHeadlines {
padding: 10px; 
}
.newsHeadlines ul {
margin: 2px 0 0 20px;
padding: 0;
} 
.newsHeadlines ul li {
list-style-image : url(/images/newsbullet.gif); 
} 
.newsHeadlines ul li a {
color: #fff;
text-decoration: none;
cursor: pointer;
} 
#news #news_top #newsWrapper #newsHeadlines .newsHeadlines ul li a:hover,
#newsHeadline_1 ul li a:hover,
#newsHeadline_2 ul li a:hover,
#newsHeadline_3 ul li a:hover {
text-decoration: underline;
cursor: pointer;
} 
#scrollingNews {
color: #fff;
padding: 10px 5px;
border-top: 1px solid #C6867F;
border-bottom: 1px solid #C6867F;
margin: 0 0 0 10px; 
}

#scrollingNews a {
color: #fff;
text-decoration: underline;
}

#scrollingNews a:hover {
color: #ccc;
text-decoration: underline;
}

#subMenuWrapper {background-color: #e9e9e9;
background-image: url(/images/submenu_bg.jpg);
background-position: top;
background-repeat: repeat-x;
padding: 25px 0 15px 10px;
border-bottom: 2px solid #666;
}

#subMenuWrapper .title {border-bottom: 1px solid #d6d6d6;
}

#subMenuWrapper .title h2 {font-size: 225%;
font-weight: normal;
}

#subMenuWrapper .title h2 a {
color: #777;
text-decoration: none;
}

#subMenuWrapper .title h2 a:hover {
text-decoration: underline;
}


#subMenu {margin: 0;
padding: 0;
margin: 5px 0 0 0;
}

#subSubMenu {margin: 0;
padding: 0;
margin: 5px 0 0 10px;
}

#subMenu li,
#subSubMenu li {list-style-type: none;
margin: 0 0 5px 0;
color: #666;
}

#subMenu li a { font-weight: bold;
}

#subSubMenu li a { font-weight: normal;
}
/* =======================================================================================================================
	MAIN CONTENT
======================================================================================================================= */

#position3 {
width: 72%;
margin-right: 28%;
border-right: 3px solid #fff;
}

#splashImage {
background: #000;
padding: 0;  
} 
#imageWrapper {
height: 297px; 
background-image: url(/images/main2.jpg);
background-repeat: no-repeat;
background-position: top left;
padding: 0;
}

#tagline {text-align: right; padding-top: 22px;}

#pageTitle {background-color: #6c6962;
height: 45px;
background-image: url(/images/pagetitle_bg.gif);
background-repeat: no-repeat;
background-position: right;
border-bottom: 5px solid #434343; }

#imageWrapper #pageTitle {background-color: #6c6962;
height: 45px;
background-image: none;
border-bottom: 5px solid #434343;
margin: 0;
width: 100%;
opacity: .75; }

#sectionTitle {
background-image: url(/images/sectiontitle_bg.gif);
background-repeat: repeat-x;
margin: 0;
padding: 14px 0 0 0;
}

#sectionTitleInner {
margin: 0 3%;
border-bottom: 1px solid #d6d6d6;
padding-bottom: 2px;
}

#sectionTitle h1 {
margin:  0;
font-family: Times, "Times New Roman", serif;
font-size: 300%;
font-weight: normal;
color: #0061d0;
}

#breadcrumbs {
float: right;
margin-top: 12px;
color: #666;
}

/* =======================================================================================================================
	SPLASH PAGE CONTENT
======================================================================================================================= */

#splashContent {
clear: left;
border-top: 2px solid #fff;
border-bottom: 1px solid #d5d5d5;
background-color: #fff;
margin: 0 0 2px 0;
height: 254px;
}  
#splashAbout {
float: left;
background-color: #fff;
color: #000;
padding: 0;
border-right: 2px solid #fff;
width : 288px; 
height : 254px;
}  
#splashAboutTitle {
background-color: #ffc000;
padding: 0;
width : 288px; 
height : 62px;
border-bottom: 2px solid #530b06;
background-image: url(/images/splash_about_title_bg.gif);
background-position: bottom;
background-repeat: repeat-x;
} 
#splashAboutContent {
margin: 15px 10px 0 10px;
width : 268px;
color: #0061d0; 
text-align: left;
}  
#splashAboutContentHeadline {
width : 268px; 
padding: 0 0 7px 0;
margin: 0 0 10px 0;
border-bottom: 1px solid #b4b4b4;
font-family: Times, "Times New Roman", serif;
font-size: 18px;
line-height: 20px;
font-weight: normal;
}  
#splashAbout a{
color: #A8332D;
font-weight: bold;
}  

/* =======================================================================================================================
	CASE STUDIES
======================================================================================================================= */
#splashCaseWrapper {
font-weight: normal;
color: #666666; 
height : 254px; 
margin-left: 290px;
background-color: #B3B3B3;
background-image: url(../images/casestudies_wrapper_bg.gif);
background-repeat: repeat-x;
} 
#splashCaseTabs {
margin: 0 5px; 
height : 27px; 
}  
#featuredWorks {
display: block;
float: left;
height: 20px;
font-family: Times, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
margin: 5px 0 0 5px;
padding: 2px 20px 0 0;
background-color: transparent;
color: #333;
}  
#splashCaseTabs ul {
margin: 0 0 0 135px;
padding: 0;
background-color: #00FF00;
}

#splashCaseTabs li {
list-style : none; 
display : inline; 
}
#splashCaseTabs a {
float: left;
height: 17px;
margin: 5px 0 0 1px;
text-decoration : none; 
padding: 4px 10px 1px 24px;
cursor: pointer;
font-family: Times, "Times New Roman", serif;
font-size: 17px;
font-weight: normal;
color: #999;
}
#splashCaseTabs a:hover {
cursor: pointer;
color: #333;
}
.splashCaseTabsActive {
background-color: #ededed;
background-image: url(/images/casestudy_bg_up.jpg);
background-position: top left;
background-repeat: no-repeat;
}
#splashCaseTabs a.splashCaseTabsActive {
color: #ffc000;
}
.splashCaseTabsInactive {
color: #dddddd;
background-color: #d2d2d2;
background-image: url(/images/casestudy_bg_over.jpg);
background-position: top left;
background-repeat: no-repeat;
}
#splashCaseContent {
padding: 10px 10px 0 10px;
margin: 0 5px; 
background-color: #ededed;
background-image: url(/images/splash_case_bg.gif);
background-position: top left;
background-repeat: no-repeat; 
} 

#splashCaseInner{}
.splashCaseImage {
float: left;
width : 234px;
height: 162px;
}
.splashCaseImage img {
border: 1px solid #ccc;
}
.splashCaseText {
font-weight: normal;
padding: 10px;
margin-left: 234px;
height: 154px;
} 

.panel {
}

.splashCaseBottomWrapper {
} 
.splashCaseBottom {
padding: 7px 0;
} 

#splashCaseContact {
color: #d4d4d4;
line-height: 10px;
margin: 5px 0 0 0;
padding: 7px 0 7px 25px;
height : 10px;
background-color: #0061d0;
}

.splashCaseLink {text-align: right;
}

#splashCaseContact a {color: #d4d4d4;}
#splashCaseContact a:hover {color: #eee; text-decoration: underline;}
 

/* =======================================================================================================================
	FOOTER
======================================================================================================================= */
#position10 {
border-top: 2px solid #fff;
}

#position10 .content {
}

#pageBottom { 
} 

#splashcontentbottom {
padding : 0 10px; 
background: #eeece8; 
color : #fff; 
border-top: 1px solid #d5d5d5;
} 

#splashcontentbottom #lowLogo {
margin-top: 24px;
}

#splashcontentbottom a {
padding : 0 8px; 
margin : 0; 
color : #666; 
font-weight : normal; 
font-family : zurich, verdana, helvetica, sans-serif; 
} 
#splashcontentbottom a:hover {
color : #cc3717; 
} 

#lowlinks { 
background: #0061d0;   
text-align: right;
padding: 2px 10px;
font-size: 85%;
color: #aaa;
} 

a.copyright {
color: #eee;   
} 

/* =======================================================================================================================
	CHILD PAGE STYLES
======================================================================================================================= */

/* CSS Document */

#childWrapper {
background-image: url(/images/childwrapper_bg.gif);
background-repeat: repeat-x;
background-position: bottom;
}

#childWrapper .panel {
padding: 4px 10px;
clear: left;
margin: 8px 0;
}

#childWrapper .alternating {
background-color: #eee;
}

.childCaseImage {
float: left;
}

.childCaseImage img {
border: 1px solid #ccc;
}

.childCaseText {
font-weight: normal;
padding: 10px;
margin-left: 185px;
} 

#childWrapper #content {
min-height: 550px;
float: left;
text-align: left;
padding: 1em 5%;
color: #555;
line-height: 140%;
}

#centerQuote {
display: block;
width: 90%;
margin: 12px;
padding: 10px 10px 10px 10px;
font-family: Times, "Times New Roman", serif;
font-size: 18px;
line-height: 20px;
font-weight: normal;
color: #ffc000;
text-align: center;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}

#rightQuote {
display: block;
float: right;
width: 160px;
margin: 12px;
font-family: Times, "Times New Roman", serif;
font-size: 18px;
line-height: 20px;
font-weight: normal;
color: #ffc000;
text-align: center; 
}

#leftQuote  {
display: block;
float: left;
width: 160px;
margin: 12px;
font-family: Times, "Times New Roman", serif;
font-size: 18px;
line-height: 20px;
font-weight: normal;
color: #ffc000;
text-align: center; 
}

.jobDesc {border-top: 1px solid #d6d6d6;
margin-top: 1.5em;
padding-top: 8px;}

.jobRequirements {float: left;
width: 49%;
margin-top: .5em;}

.jobRequirements ul {
margin: .25em 0 0 .75em;
padding: 0;
}

.jobRequirements li {
list-style-type: none;
margin-bottom: 3px;
}


.newsItem {border-bottom: 1px dotted #ccc;
padding: 10px 0;
}

.caseStudyHomeWrapper {margin-bottom: .75em;
padding-bottom: .75em;
border-bottom: 1px dotted #ccc;}

.caseStudyHomeThumb {float: left;
padding: 0 .75em 2em 0;}

.caseStudyHomeThumb img {border: 1px solid #ccc;
}

#caseStudyImage {
padding: 5px;
margin: .5em 0;
/*background-color: #B3B3B3;
background-image: url(../images/casestudies_wrapper_bg.gif);
background-repeat: repeat-x;*/
}

#caseStudyImage #imageBorder {
background-color: #ededed;
padding: 8px;
}

#caseStudyImage #imageBorder img,
#caseStudyImage #caseImageThumbs img {
border: 1px solid #999;}

#caseStudyText {clear: left;
}

#caseImageThumbs {
margin-top: 8px;
padding: 0 0 4px 6px;
border-bottom: 1px solid #d6d6d6;
color: #777;
} 

#caseImageThumbs a {cursor: pointer;
}

#caseStudyImage #splashCaseTabs {
margin: 0;
}

#caseStudyImage #splashCaseTabs ul {
margin: 0;
padding: 0;
}

#caseStudyImage #splashCaseTabs a {
margin: 5px 0 0 0;
border-right: 1px solid #fff;
}

#caseStudyImage .splashCaseTabsActive {
background-image: url(/images/casestudy_page_bg_up.jpg);
}

#caseStudyImage .splashCaseTabsInactive {
background-image: url(/images/casestudy_page_bg_over.jpg);
}

/*
#caseStudyImage #splashCaseTabs li {
margin: 0;
padding: 0;
}

*/

.caseStudyLink {
text-align: right;
padding-top: 22px;
clear: both;
}

form .field,
table .field {
border-width: 1px;
border-style: solid; 
border-color: #999 #ccc #ccc #999;
vertical-align: middle;
color: #333;
}

form .button,
td .button {
font-family: verdana, arial, helvetica;
background-color: #ffc000;
color: #fff;
font-weight: bold;
font-size: 98%;
padding: 4px 8px;
border-width: 0;
background-image: url(/images/button_bg.gif);
background-repeat: no-repeat;
background-position: bottom right;}