/* --------------------------------------------------------------------------------------
+
+   Simplified CSS (kinda) framework - v1.2
+   http://www.simplifiedstudio.com
+
+   Thanks:
+      - Eric Meyer (http://meyerweb.com/eric/tools/css/reset)
+      - Wilson Miner (http://www.alistapart.com/articles/settingtypeontheweb)
+
-------------------------------------------------------------------------------------- */


/*
+  GLOBAL RESETS - DO NOT MODIFY THESE
---------------------------------------------------------------------------- */
html, body, div, span, applet, object, 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, 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; border: 0; outline: 0;}
:focus{outline: 0;}
html{ overflow-y:scroll;}
body{ line-height: 1; color: #000; background: #fff;}
ol, ul{ list-style: none;} 
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: "" "";}
textarea{overflow:auto !important;}


/*
+  BASIC TYPOGRAPY
---------------------------------------------------------------------------- */
body{ font: normal 12px/18px Arial, Helvetica, sans-serif;}
strong{font-weight: bold;}
em{font-style: italic;}
small{font-size: 11px;}
ul, ol{ list-style-position: inside;}
table{margin-bottom:0px;}
blockquote{ margin: 18px 0; padding: 17px 18px 0 17px; font-style: italic;}
pre,code,tt { font: 0.95em/1.5em Courier, Monaco, "lucida console", monospace;}
abbr, acronym{ border-bottom: 1px dotted #d0d0d0; cursor: help;}
hr{ background: #ccc; border: none; clear:both; color: #ccc; float:none; height:1px; margin: 18px 0; width:100%;}
::-moz-selection, ::selection{ background: inherit; color: inherit;}
a img{ border: none;}


/*
+  BASIC STYLES
---------------------------------------------------------------------------- */
.left{float: left;}
.right{float: right;}
.hide{display: none;}
.empty{visibility: hidden;}

div.hr{ clear: both; margin: 35px 0 20px 0; background: url('../images/title-bg-big.gif') top left no-repeat; border: none; height: 1px !important; display:block; overflow: hidden;}
	hr{	visibility: hidden;	font-size: 0; line-height: 0; height: 0; border: none;}
.accent, strong.accent, span.accent, em.accent{ background: #ffffbf !important; color: inherit; padding: .25em; font-weight: bold;}
div.accent, p.accent{padding: 1.5em;}
.amp{ font: italic 1.1em/10% "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", serif;}

.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix{ display: inline-block;}
/* Hides from IE-mac \*/ * html .clearfix{ height: 1%;}
.clearfix{ display: block;}

/*
+  SITE LAYOUT
---------------------------------------------------------------------------- */
body{ background:url('../images/background.png');}
#warper{ width:1084px; margin:0 auto; position:relative; overflow: hidden;}
#header{ height: 200px; position: relative; display:block; background:url('../images/header-bg.png') no-repeat;}
#main{ width: 912px; background:url('../images/content-background.png') repeat-y; padding: 0 84px 38px 84px;}
	.col{ width: 443px; display: block;}
#footer{ background: url('../images/footer.png') 0px 0px no-repeat; width:916px; height: 178px; display:block; padding: 22px 84px 0 84px; position:relative;}	
	
	
	/* Header elements
	-----------------------------------------------------*/
	ul#navigation{ background:url('../images/navigation.png') 0px -360px no-repeat; width: 914px; height: 180px; position: relative; top: -3px; left: 43px; padding: 0px 42px; overflow: hidden;}
		ul#navigation li{ display:block; float: left; padding: 0; margin: 0;}
		ul#navigation li a{ display: block; width: 162px; height: 74px; float: left; margin: 57px 1px 0 0; text-indent: -9999px; background:url('../images/navigation.png') no-repeat; overflow: hidden;}
				ul#navigation li a.fist{ margin-left: 0 !important;}
				ul#navigation li a.last{ margin-right: 0 !important;}
			ul#navigation li a.home{ background-position: -42px -417px;}
				ul#navigation li.current a.home{ background-position: -42px -237px;}
				ul#navigation li a.home:hover{ background-position: -42px -57px;}				
			ul#navigation li a.about{ background-position: -205px -417px;}
				ul#navigation li.current a.about{ background-position: -205px -237px;}
				ul#navigation li a.about:hover{ background-position: -205px -57px;}				
			ul#navigation li a.se{ width: 159px !important; height: 110px !important; margin: 35px 52px 0 52px !important; background-position: -1000px -1000px;}
			ul#navigation li a.work{ background-position: -631px -417px;}
				ul#navigation li.current a.work{ background-position: -631px -237px;}
				ul#navigation li a.work:hover{ background-position: -631px -57px;}							
			ul#navigation li a.contact{ background-position: -794px -417px;}
				ul#navigation li.current a.contact{ background-position: -794px -237px;}
				ul#navigation li a.contact:hover{ background-position: -794px -57px;}				
			

	/* Content elements
	-----------------------------------------------------*/	

		/* Typography */
		#main h2, #footer h2{ background: url('../images/title-bg-big.gif') 0px 7px no-repeat; height: 15px; font-size: 15px; line-height: 15px; display: block; text-align: center; text-transform: uppercase; margin: 32px 0 14px 0; display: block;}
			#main .col h2{ background: url('../images/title-bg-small.gif') 0px 7px no-repeat !important;}
			#main h2 strong, #footer h2 strong{ background: #fff; color: #6e6e6e; padding: 0 8px;}
			#main h2.first{ margin: 0 0 -27px 0; position: relative; top: -34px;}
			#main h2.after{ margin-top: 70px;}
			
		#main h3{ color: #282828; font-size: 24px; line-height:24px;font-style:italic; padding-left: 30px; margin-bottom:9px;}
			#main h3 a{ color: #933bbd; text-decoration:none; border-bottom: 1px solid #933bbd;}
				#main h3 a:hover{ text-decoration:none; border-bottom: none;}
			#main h3		 { background:url('../images/crown.gif') 0px 2px no-repeat;   }
			#main h3.fb		 { background:url('../images/fb.gif') 0px 2px no-repeat;      }
			#main h3.twitter { background:url('../images/twitter.gif') 0px 2px no-repeat; }
			#main h3.prep{ margin-bottom: 4px;}
			#main h3.first{ margin-top: 5px; position: relative;}
			
			h3.moto{ color: #282828; font-size: 30px !important; background: transparent !important; line-height:36px !important; font-style:italic; text-align: center; padding: 0 !important;}
				h3.moto strong{ color: #933bbd;}
			h3.goals{ color: #282828; font-size: 20px !important; line-height:27px !important; background: transparent !important; font-style:italic; text-align: center; margin: -5px 0 -6px 0 !important; padding: 0 !important; }
				h3.goals a{ color: #933bbd;}

		#main h4{ font-size:20px; font-style:italic; color: #282828; margin: 20px 0 2px 0; line-height: 30px;}
			#main h4.first{ margin-top: -6px;}
		
		#main p{ color: #535353; font-size:13px; line-height:23px;}
			#main p a{ color: #7624c3;}
				#main p a:hover{text-decoration:none;}

		/* Slider */
		#slider-holder{ height:444px; width: 912px; overflow: hidden; position: relative; margin-bottom: 5px;}
		#slider{ height:444px; display: block; width: 912px; background: transparent url('../images/slider-background.png') top left no-repeat; }
		.slide{ position: absolute; height: 444px; width: 912px; background:transparent !important; z-index: 1;}
			.slide h2{ background: transparent !important; position: absolute; bottom: 21px; text-transform: none; left: 50px; margin: 0 !important; padding: 0 !important; z-index: 99;}
				.slide h2 a{ color: #fff6a7; font-size: 25px; font-style:italic; text-decoration: none; text-transform: none !important;}
		div#pager{ position: absolute; bottom: 16px; right: 10px; z-index: 99; display: block;}
			#pager a{ float: left; display: block; width: 20px; height: 18px; margin-right: 11px; background: url('../images/slider-pos.png') top left no-repeat; text-indent:-9999px; }
				#pager a.activeSlide{ background-position: bottom left;}
				
		/* Columns */
		ul.client-list{}
			ul.client-list li{ float: left; padding: 0; margin: 0; display: block; margin: 2px 1px 1px 0px; width: 147px; height: 91px; overflow: hidden;}
			ul.client-list li.last{ margin-right: 0;}
		#main div.cite{ top:2px; padding-bottom: 4px; background:url('../images/cite.png') no-repeat; width: 443px; height: 194px; position: relative; overflow: hidden; margin-bottom: -10px;}
			#main .cite cite{ color: #fff; line-height: 24px; font-size:13px; padding: 16px 20px; display:block;}
			#main .cite h4{ font-style:italic; color:#808080; font-size:20px; padding-left: 58px; margin-top:11px;}
				#main .cite h4 strong{ color: #603f70;}

		/* Work */
		.project-info{ height: 267px; background:url('../images/work-bottom-navigator.png') bottom left no-repeat; margin-bottom: 28px; position:relative; margin-top: 1px;}
			.project-info.last{ margin-bottom: 0 !important;}
			.project-info ul{ position: absolute; left: 15px; top: 237px;}
				.project-info ul li{ float: left; display: block; background:url('../images/work-link-bullet.png') 0px 4px no-repeat; padding-left: 14px; margin-right: 20px;}
				.project-info ul li a{ color: #fff6a7; text-decoration:none; float: left; display:block; font-size:12px;}
					.project-info ul li a:hover{ text-decoration:underline;}
			.project-info span{ color: #9788a1; font-style:italic; font-size:12px; position: absolute; right: 15px; top: 237px;} 
		#main ul.brief{ font-size:13px; line-height:20px; margin-top:4px; color:#535353; padding-left: 0; margin-left: 0;}
			#main ul.brief li strong{ font-weight: bold; padding-right: 8px;}
			#main ul.brief li span{ color: #603f70;}
		a.launch{ font-size:20px; text-decoration:none; border-bottom: 1px solid #7017a1; color:#7017a1; font-style:italic; top:8px;}
			a.launch:hover{ border-bottom: none;}
		div.spacer-work{ height: 14px; display: block; width: 100%; clear: both;}
		img.thumb{ margin-top: 6px;}
				
		/* About */
		ul.services{ width: 210px; font-size:20px; line-height:28px; color: #603f70; font-style: italic; margin: 8px 0 -7px 0;}
			ul.services li{ padding-left: 12px; background:url('../images/services-bullet.png') center left no-repeat; width: 100%;}
		ul.services.right{ width: 225px !important;}	
			ul.services.right li{ width: 213px !important;}	
		#main blockquote{ padding: 0; margin: 5px 0 -7px 0; color: #282828; font-size:20px; line-height:28px;}
			#main blockquote strong{ color: #603f70;}
		div.spacer-about{ height: 7px; display: block; width: 100%; clear: both;}
			
		/* Contact */
		p.mail, p.phone, p.skype{ padding-left: 22px;}
			p.mail{ background:url('../images/contact-mail.png') center left no-repeat;}
			p.phone{ background:url('../images/contact-phone.png') center left no-repeat;}
			p.skype{ background:url('../images/contact-skype.png') center left no-repeat;}
				p.mail span, p.phone span, p.skype span{ color: #7017a1;}
				
		form#contact{ background:url('../images/form-bg.png') no-repeat; width: 403px; height: 513px; padding: 20px; margin-bottom: -6px;}
			form#contact label{ display: block; font-size:20px; font-style:italic; color: #282828; margin-bottom: 4px;}
			form#contact div.field{ background:url('../images/form-input.png') top right no-repeat; width: 401px; height: 26px; margin-bottom:20px; display: block;}
				form#contact input{ background: transparent; width: 381px; height: 18px; border: none; padding: 6px 10px 0 10px;}
			form#contact div.text{ background:url('../images/form-textarea.png') top right no-repeat; width: 401px; height: 189px; display: block;}
				form#contact textarea{ background: transparent; width: 381px; height: 167px; line-height:18px !important; border: none; padding: 10px;}
			form#contact button{ display: block; background:url('../images/form-button.png') top right no-repeat; width: 401px; height: 48px; border: none; margin-top: 20px; cursor: pointer;}
				form#contact button span{ display: none;}
				
					form#contact textarea, form#contact input{ color: #515151; font: normal 12px Arial, sans-serif;}
					form#contact div.text.focus, form#contact div.field.focus, form#contact div.text:hover, form#contact div.field:hover{ background-position: bottom left;}
					form#contact button:hover{ background-position: bottom left !important;}

		
	/* Footer elements
	-----------------------------------------------------*/
 	#footer h2{ top: -1px; margin-top: 0; position: relative;}
	
	ul#links-social, ul#links-nav{ position: absolute; top: 76px; height: 49px; display: block; line-height:49px;}
	ul#links-nav{ left: 110px;}
	ul#links-social{ right:110px; background:url('../images/footer-separator.png') left center no-repeat;}
		ul#links-nav li, ul#links-social li{ float: left; display: block;}
		ul#links-nav li a, ul#links-social li a{ color:#fff6a7; text-decoration:none; float:left; display:block;}
			ul#links-nav li a:hover, ul#links-social li a:hover{ text-decoration:underline;}
			
		ul#links-nav li{ padding-left: 16px; background:url('../images/footer-nav-bullet.png') 0px 23px no-repeat; margin-right: 25px;}
		ul#links-social li{ margin-left:25px;}

	li.linkedin, li.facebook, li.twitter{ padding-left: 22px;}
		li.linkedin{ background:url('../images/icon-linked.png') center left no-repeat;}
		li.facebook{ background:url('../images/icon-fb.png') center left no-repeat;}
		li.twitter{ background:url('../images/icon-twitter.png') center left no-repeat;}