/* Load external fonts */
@import url(http://fonts.googleapis.com/css?family=Ubuntu|Oswald:700);

/* global styles */
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box;
}
html { height: 100%; }
body { background: #481B63 url('../images/bg.gif'); color: #fff; font-family: 'Ubuntu', sans-serif; font-size: 14px; margin: 0; height: 100%; min-height: 100%; }
h1, h2, h3, h4, h5, h6 { color: #ccc; font-family: 'Oswald', sans-serif; }
h1.logo { background: transparent url('../images/logo.png') no-repeat left top; height: 64px; margin: 0 0 0 40px; overflow: hidden; text-indent: -9999px; width: 342px;}
h2 { background: url('../images/bullet.png'); background-repeat: no-repeat; }
h2 { background-position: 1px center; color: #7b2faa; cursor: pointer; font-size: 28px; margin: 0; padding: 0  0 0 40px; -webkit-transition: color 500ms ease-out; }
h2:hover { color: #569AC7; }
.chromeframe {font-size: 24px; padding:50px;}
a {color:#f05a23; text-decoration: none;}
a:hover {color:#569ac7; text-decoration:underline;}
.wrapper,
.container,
section { background: url('../images/line.png'); background-repeat: no-repeat; }
.wrapper { background-position: 12px bottom; margin-top: 20px; position: relative; }
.container { background-position: 12px 1px; height: 100%; margin-top: -5px; padding: 30px 10px 0; position: relative; }
header { background-position: left 20px; padding: 0 0 140px 0;}
article { margin-top: 10px; }
article.active h2,
article.active h2:hover { color: #f05a23; }
section { background-position: 2px bottom; background-repeat:  repeat-y; }
article .article-content { height: auto; margin: 10px 0 20px 50px; overflow: hidden; -webkit-transition: height 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; transition: all 500ms ease-out; }
article.active .article-content { height: auto;}
.random-taglines {text-align: center; margin: -65px 0 40px 375px; width: 400px; text-align: left; clear:both; font-size: 90%;}
.client-notes {padding-top: 25px;}
.twitter-timeline {height: 300px;}

.content {margin-top: 20px;}

.clients {margin-bottom: 0px;}
.clients .client { display: inline-block; margin-right: 10px; }
.clients img { -webkit-filter: grayscale(1); margin: 0;}
.clients img:hover { -webkit-filter: grayscale(0); }
.client div { display: none; }
p { margin: 0 0 14px; }
article div.stage {min-height: 300px;}
article div.stage img {float:left; vertical-align: top; margin-right: 10px;}
.date { margin-bottom: 10px; }
h2 span { border-radius: 4px; box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset; display: block; padding: 5px 8px 8px; }
.date span { display: inline-block; vertical-align: text-top; }
.date span:first-child { color: #bbb; font-family: 'Oswald', sans-serif; padding-right: 10px; text-align: right; width: 80px; }
.date span + span { padding-top: 2px; width: 217px; }
#overlay { background: rgba(0, 0, 0, .75); }
#dialog { background: rgba(255,255,255,0.25); border: none; color: #444; max-width: 100%; width: 100%; }
#dialog h1 { color: #444; }
#dialog .content { background-color: #fff; margin: 0 auto; position: relative; width: 350px; }
.contact-info { background-color: #222; border-bottom-left-radius: 4px; color: #ccc; font-size: 12px; padding: 8px 12px 5px 12px; position: absolute; right: 0; top: 0; z-index: 100; }
.contact-info a { color: #ccc; margin-left: 15px; text-decoration: none; }
[class^="icon"]:before { color: #F15A24; margin-right: 5px; }
footer { background: #333; border-top: 1px solid #222; bottom: 0; box-shadow: 0 1px 6px rgba(0,0,0,0.5) inset; color: #888; height: 55px; padding: 15px 20px 20px; position: relative; text-align: right; width: 100%; z-index: 10;}
footer p {margin-right: 40px;}

.case-study-body {font-style: italic; text-align: right;}

address {font-style:normal; margin-bottom: 2em;}

/* mobile only styles */
/*@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {*/
@media only screen and (max-width: 767px) {
		.wrapper { margin-top: 60px; min-height: 100%; }
		.container { padding-top: 10px; }
		header { padding: 0; margin-bottom: 120px; }
		.random-taglines { margin: 0 0 -30px 118px; }
		.contact-info { text-align: right; width: 100%; }
		article .article-content { height: 0; overflow: hidden; margin: 10px 10px 0 50px; }
		article.active-ajoining .article-content { height: 10px; }
		section.content { padding-bottom: 20px; }
		h2 span { background: #401858; border: 1px solid #4F1E6C; margin-right: 5px; }
		footer { text-align: left; }
}

/* desktop only styles */

@media only screen and (min-width: 768px) {
	body { width: 100%; }
	h1.logo { height: 80px; margin: 0 auto 40px; }
	header { background: url('../images/bg.gif'); margin: 0 0 0; padding: 40px 0 0; }
	header:after { background: url('../images/line.png') no-repeat center top; content: ''; display: block; height: 15px; margin: 0 auto; width: 16px; }
	.wrapper { background: url('../images/line-repeat.png') repeat-y top center; margin: 0 auto 0; min-height: 100%; width: 960px; z-index: 0; }
	.container { padding-top: 0; width: 100%; }
	section:before, section:after { content: ""; display: table; }
	section:after { clear: both; }
	section { *zoom: 1; margin-bottom: 55px; }

	section, .container { background: none; }
	article { float: left; margin-top: 0; padding-bottom: 20px; width: 483px; }
	.article-content ul li a:active, a:visited, a:link {color:#f05a23;}
	.article-content ul li {margin-bottom: 10px;}
	article.even { background: none; float: right; width: 447px; }
	article.even h2 { padding: 0; }
	article.even .article-content { margin-right: 10px; }
	article h2 { background-position: right center; font-size: 24px; padding: 0 40px 0 0; }
	article .article-content { height: 0; overflow: hidden; margin: 10px 40px 0 10px; }
	article.active-ajoining .article-content { opacity: 0; }
	article.transitioning .article-content { opacity: 0; }
	h2 span { background: #401858; }
	footer { margin-top: -50px; }
}