/* Mobile Styles */

@media all and (max-width: 320px) {
	.speech, .tagline, .phonenumber, #twitter, #home-right, .desktop_intro, .about_nav, .latest_casestudies, .teaminfoline img, #latest_comments, .map_holder, .contactleft { display: none !important; }
	#top { height: 90px !important; }
	#top .title { top: 32px !important; left: 10px !important; }
	#home-left { width: 300px !important; }
	#navigation { font-size: 11px; width: 300px !important;  }
	#navigation ul { margin: 15px 0 0 -3px; }
	#navigation .logo { top: 13px !important; margin-right: 20px; }
	html, body, #body_mask, .main-content { background: #fff !important; width: 320px !important; }
	#wrapper { width: 320px !important; }
	.mobile_intro { display: block !important; font-size: 0.46em; text-transform: uppercase; }
	.first { left: 10px !important; }
	.title span { padding: 11px; }
	.home { height: 120px !important; }
	#home-case-studies, #home-news  { border-bottom: 1px dashed #999; width: 300px !important; float: none !important; }
	img { max-width: 285px !important; height: auto !important; }
	#right, #left { float: none !important; display: block; width: 280px !important; }
	.mobile_nav { margin-left: 10px; display: block !important; width: 150px; text-overflow: ellipis-lastline; }
	.mobile_title { word-wrap: break-word; max-width: 285px; font-size: 14px !important; line-height: 26px; }
	.teammember { margin: 0 0 10px 32px !important; }
	.case_study * { margin: 5px 0 5px 0 !important; padding: 0 !important; }
	select { border: 2px solid #fff; }
}

/* Master Styles */

.mobile_intro, .mobile_nav{ display: none; }

@font-face {
	font-family: 'CantarellRegular';
	src: url('../plugins/fonts/Cantarell-Regular-webfont.eot');
	src: url('../plugins/fonts/Cantarell-Regular-webfont.woff') format('woff'), url('../plugins/fonts/Cantarell-Regular-webfont.ttf') format('truetype'), url('../plugins/fonts/Cantarell-Regular-webfont.svg#webfontaI1yI6ue') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body {
	background: #fff  top center no-repeat fixed;
	color: #bbb;
	/*height: 100%;
	width: 100%;*/
	font-family: 'CantarellRegular', Arial, Helvetica; 
}

p { margin: 5px 0px 25px 0px; }
a { color: #fff; text-decoration: none; }
a:hover { color: #FF7F00; text-decoration: none; }

strong { font-weight: bold; }
br.clearer { clear: both; margin: 0; }

/* Backgrounds */
div#body_mask { height: auto; padding:0px 0px 0px 0px; background: transparent url(../images/backgrounds/line.png) 0 0 repeat; }
* html div#body_mask {background-image:none;}
div#navigation_wrapper,
div#wrapper div#categories,
div#wrapper div#right,
div#wrapper div#left div#latest_comments,
div#wrapper div#left div#about_sidebar,
div#wrapper h2.home-latest ,
div.post,
div.case_study,
div.transparent_wrapper { background: transparent url(../images/backgrounds/transparent-black.png) 0 0 repeat; }
div.no-wrap { background: none !important; top: 165px !important; }
div.transparent_wrapper { padding: 14px 0; }
div#wrapper div#home-left { background-image: url(../images/backgrounds/home-work-news-bg.png); background-repeat: repeat-x; background-position: top; }
div#wrapper div#home-left h3 { font-family: Arial; text-transform: none !important; }

/*footer*/
div#copyright { float:right; height: 9px; width: 245px; background: transparent url(../images/copyright.gif) 0 0 repeat; margin: 20px 10px 10px 10px; }
div#footer {clear:both; }
a#designcouncil {float:left; margin: 10px; width:26px; height:26px; background-image: url(../images/home/design-council-logo.png);}
a#designcouncil:hover {background-image: url(../images/home/design-council-logo_roll.png);}
a#marketinginstitute {float:left; margin: 10px;width:85px; height:26px; background-image: url(../images/home/mi-logo.png);}
a#marketinginstitute:hover {background-image: url(../images/home/mi-logo_roll.png);}
a#dba {float:left; margin: 10px;width:48px; height:26px; background-image: url(../images/home/dba.png);}
a#dba:hover {background-image: url(../images/home/dba_roll.png);}

/* Navigation */
div#navigation_wrapper { height: 67px; background: url(../images/backgrounds/transparent-black-header.png) repeat; }
div#navigation_wrapper div#navigation { width: 900px; margin: 0 auto; position: relative;}
div#navigation_wrapper div#navigation a.logo { width: 102px; height: 28px; position: absolute; right: 0; top: 23px; text-decoration: none; background: transparent url(/../images/logo.png) 0 0 no-repeat; }
div#navigation_wrapper div#navigation ul { position: absolute; top: 40px; left: 0; }
div#navigation_wrapper div#navigation ul li { display: inline; margin: 0 20px 0 0; }
div#navigation_wrapper div#navigation ul li a { padding:2px 4px 2px 4px; margin:0px 4px 0px 4px; height: 16px; display: block; float: left; background-position: left 4px; background-repeat: no-repeat; }
div#navigation_wrapper div#navigation ul li .phonenumber { font-weight: bold; color: #FF7F00; padding:2px 4px 2px 4px; margin:0px 4px 0px 4px; height: 16px; display: block; float: left; background-position: left 4px; background-repeat: no-repeat; }
div#navigation_wrapper div#navigation ul li a.selected, 
div#navigation_wrapper div#navigation ul li a:hover {background-color: #FF7F00; color:black; }
div#navigation_wrapper div#navigation ul li a span { display: inline-block; }

div#wrapper { width: 900px; margin: 0px auto 20px auto; position: relative; }
div#wrapper div#top {height: 165px; position: relative; }
div#wrapper div#top div.tagline {font-family:Arial; top: -6px; right: 0; position: absolute; background: #ff7f00; padding: 4px; color: #000; font-weight: bold; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.1em; }
div#wrapper div#top h1.title {font-family:Arial; top: 85px; left: 0; position: absolute; color: #000; font-weight: bold; font-size: 1.6em; }
div#wrapper div#top h1.title span.first { background: #ff7f00; }
div#wrapper div#top h1.title span.second { background: #000; margin: 0 0 0 -6px; color: #fff }
div#wrapper div#top h1.title span.third { background: transparent; color: #000; margin: 0 0 0 6px; }
div#wrapper div#top h1.title span.third a {color:#000;}
div#wrapper div#top h1.title span.first,
div#wrapper div#top h1.title span.second { padding: 4px 6px; }

div#wrapper div#categories { height: 20px; position: absolute; right: 0; top: 145px; text-align: right; }
div#wrapper div#categories ul li { display: inline; }
div#wrapper div#categories ul li a { display: block; float: right; margin: 0 0px 0 0px; padding:0px 4px 0px 4px; height: 20px; line-height:19px; }
div#wrapper div#categories ul li a span { display: inline-block; }
div#wrapper div#categories ul li a.selected, 
div#wrapper div#categories ul li a:hover {background-color: #FF7F00; color:black; }


div#wrapper div#right,
div#wrapper div#left { }
div#wrapper div#right { float:right; padding:10px; width: 680px; }
div#wrapper div#left { float:left; width: 193px; font-size: 0.9em; color: #ccc; }
/*div#wrapper div#right p,
div#wrapper div#right img { margin: 10px; }*/
div#wrapper div#right h2 { color: #ff7f00; text-transform: uppercase; font-size: 1.4em; font-weight: bold; }

/* Home only styles */
div#wrapper div#top.home {height:450px;}
div#wrapper div#top div.title span {font-family:Arial; background: #FF7F00; padding: 10px 18px; left: 0; position: absolute; color: #fff; }
div#wrapper div#top div.title span.first { background: #000; top: 50px; font-size: 2.2em;font-weight: bold; }
div#wrapper div#top div.title span.second {  background: #000; top: 94px; font-size: 2.2em; font-weight: bold;}
.speech { width: 430px; height: auto; background-image: url(../images/home/speach-bg.png); background-repeat: no-repeat; position: absolute; top: 160px; color: #000; font-size: 1.1em; padding: 20px 70px 20px 20px; }
div#wrapper div#top div.title span.third { top: 130px; }
div#wrapper div#top div.title span.third { font-size: 1.4em; }
div#wrapper div#top div.title span strong { color: #fff; }
div#wrapper h2.home-latest { position: relative; top: 240px; font-size: 1.4em; letter-spacing:0.04em; font-weight: bold; color: #9d9d9f; padding: 4px 6px; width: 5.7em;}
div#wrapper div#home-right {  float: right; width: 193px; }
div#wrapper div#home-left { float: left; margin-top:38px; width: 704px; font-size: 0.9em; color: #ccc;}

div#wrapper h2.find-out-more { position: absolute; top: 164px; font-size: 0.9em; font-weight: bold; color: #000000; background: #FFFFFF; padding: 4px 6px; }
/*div#wrapper h2.find-out-more a, a:hover { color: #000000 }*/

div#home-find-out-more { position: relative; top: 190px; padding: 12px 12px; clear: both;}
div#fom-left { float:left; width: 400px;}
div#fom-right { float:right; width: 400px;}
div#fom-right a { color:  #ff7f00; }
div#fom-right a:hover { background-color:  #FF7F00; color: #000000;}

div#icons { background-image:url("/images/home/icons.png"); background-position: left bottom; background-repeat:no-repeat; height:190px; margin-top:20px; width:469px; }

span.orangetext { color:  #ff7f00; }

/* EO home only styles */

ul.submenu { padding: 10px;	}
ul.submenu li a { display: block; margin: 0 0 10px 0; }

ul.about_nav { padding: 10px;	}
ul.about_nav li a { display: block; margin: 0 0 10px 0; }
/*ul.about_nav li a.story {  background: transparent url(../images/sub_nav/story.gif) top left no-repeat; }
ul.about_nav li a.staff {  background: transparent url(../images/sub_nav/staff.gif) top left no-repeat; }
ul.about_nav li a.vacancies {  background: transparent url(../images/sub_nav/vacancies.gif) top left no-repeat; }
ul.about_nav li a.testimonials {  background: transparent url(../images/sub_nav/testimonials.gif) top left no-repeat; }
ul.about_nav li a.responsibility {  background: transparent url(../images/sub_nav/responsibility.gif) top left no-repeat; }
ul.about_nav li a.contact {  background: transparent url(../images/sub_nav/contact-us.gif) top left no-repeat; }
ul.about_nav li a.story,
ul.about_nav li a.staff,
ul.about_nav li a.vacancies,
ul.about_nav li a.contact,
ul.about_nav li a.testimonials { height: 17px; }
ul.about_nav li a.responsibility { height: 28px; }*/
ul.about_nav li a.selected, 
ul.about_nav li a:hover { color: #FF7F00;}
ul.about_nav li a span { display: inline-block; }


div#twitter { background: transparent url(../images/backgrounds/transparent-cyan.png) 0 0 repeat; font-size: 0.9em; padding: 4px 10px 10px 10px; color: #fff; margin: 0 0 10px 0; line-height: 1.5em; }
div#twitter p { margin: 4px 0; }
div#twitter a { color: #00253D; }
span.twitter-title { color: #000000; background: #ffffff; font-size: 1em; padding: 0.1em 0.22em 0.1em 0.22em; margin-top:15px;  }
hr#twitter-divider { height: 9px; border-bottom: 1px dashed; color:#00253D; border-top:0px; border-right:0px; border-left:0px; }
div#twitter-follow { padding: 3px 0 0 0 ; } 
div#twitter-follow a {color:#FFFFFF;}
div#twitter-follow a img{vertical-align: middle;}

div#flash { text-align: center; background: #FF0000; padding: 6px 4px; font-weight: bold; color: #fff; margin: 10px; font-size: 1.2em; }
div#flash p { margin:0; }

div.post,
div.case_study { margin: 0 0 20px 0; padding: 2px 0; }
div.post h2, div.case_study h2 {margin-left:6px; margin-top: 7px; margin-bottom: 5px;}
div.post h2 a,
div.case_study h2 a { color: #ff7f00; display:inline-block; margin-top: 7px; margin-bottom: 5px;}
div.post h2 a:hover,
div.case_study h2 a:hover { background: #FF7F00; color: #000; display:inline-block;}
div.post a,
div.case_study a { color: #ff7f00; }
div.post a:hover,
div.case_study a:hover { color: #aaa; }

div.comment { margin: 10px; }
div.comment h4 { text-transform: uppercase; font-weight: bold; line-height:0.7em; }
div.comment span.date { font-size: 0.9em; line-height:1.9em; color:#999; }

div#post_wrapper h3 { padding: 4px 6px; background: #FF7F00; display: inline; color: #000; font-weight: bold; margin: 10px; }
div#post_wrapper div.comment { margin: 20px 40px 40px;}
div#post_wrapper div.comment h4 { text-transform: uppercase; font-weight: bold; padding: 4px 6px; color: #FF7F00; }

div#comment_form { margin: 20px 10px; }
div#comment_form label { font-size: 0.8em; text-transform: uppercase;}
div#comment_form input { border: none; padding: 2px;}
div#comment_form textarea { width: 100%; height: 100px; }
div#comment_form input.submit { background: transparent url(../images/buttons/add_comment.png) top left no-repeat; height: 34px; width: 105px; }
div#comment_form input.submit:hover { background-position: bottom left; cursor: pointer; }

ul.archives li { margin: 3px 10px; font-weight: bold; }

ul.case_studies li { padding-bottom: 6px; padding-top: 6px; margin: 3px 10px; font-weight: normal; border-bottom:1px dotted #666666;}


h3.fancy { height: 10px; }
span.latest_comments { position:relative; top:-6px; color: #000000; background: #ffffff; font-size: 1em; padding: 0.1em 0.22em 0.1em 0.22em; margin-left:8px; }
h3.latest_tweets { background: transparent url(../images/headers/latest_tweets.png) 0 0 no-repeat; height: 19px; margin: 10px 0 0 0; padding:35px 0 0 10px; }
span.archive { color: #000000; background: #ffffff; font-size: 1em; padding: 0.1em 0.22em 0.1em 0.22em; margin-left:8px; }
h3.latest_comments,
h3.archive { margin: 0 0 14px 0; }

p.not_found { font-size: 1.4em; color: #FF7F00; margin: 10px; }

span.home-news-title {display:inline-block; color: #000000; background: #ffffff; font-size: 1em; padding: 0.1em 0.22em 0.1em 0.22em; margin-bottom:10px;}
a.home-news-read-more { color: #ff7f00; }

div#contact_details p { font-weight: bold; margin: 400px 0 20px 0; }
div#contact_details h3 { font-size: 2em; color: #fff; margin: 0 10px 40px 10px; }
div#contact_details h3 a { color: #fff !important; }
div#contact_details h3 a:hover { text-decoration: underline; }

div#home-case-studies { float: left; width: 340px;}
div#home-news { float: right; width: 340px;}

div#home-news-item h3 a { display: inline-block; color: #ff7f00; padding:2px 2px; font-size:1.2em; }
div#home-news-item a.titlelink:hover {color: #000000; background: #FF7F00; }
img#home-news-item-image { width: 318px; height: 140px; margin: 10px 10px 10px 0px; }


div.contactleft
{ 
	padding:20px 10px;
}
div.contactleft img
{
	vertical-align: middle; 
	margin:0 5px 0 0; 	
}

div.teammember
{
	float:left; 
	margin:0px 10px 40px 0px;
	width:220px; 	
}
div.teaminfoline
{
	clear:both; 
 	padding-top:2px; 
}	
span.teaminfotitle
{
	float:left; 
	width:55px;
}
span.teaminfo
{
	float:left; 
}
h3.teaminforole
{
	color:#FF7F00;
}

div.articlecontent
{
	padding:0 8px 0 8px;
}
div.articleinfo
{
	padding:8px 8px 30px 8px; 
	font-size:0.9em;
}

/* h2 padding fix for blog posts/case studies */

.case_study h2, .post h2 {
}

.share { margin: 0 0 20px 10px; font-style: italic; }