@charset "UTF-8";
/* CSS Document */

/******************************************************************************** 
AUTHOR: JEREMY SPINGATH
	WWW.STUDIOMAE.COM
	JEREMY@STUDIOMAE.COM
	BEST READ WITH A COFFEE
********************************************************************************/
/******************************************************************************** 
COLOR PALETTE

Blue: #8dadb5
Orange: #c98344
Green: #bfce6d
Tan: #af9c7a
Creme: #efe8d3
Dark Brown: #31271c
********************************************************************************/

/**********************<<< RESET >>>***********************/
.floatright 						{ float: right; }
.floatleft 							{ float: left; }
.clear 								{ clear: both; }

/**********************<<< GLOBAL STYLES (body, p, li, etc... >>>***********************/
html 								{ overflow-x: hidden; }
html 								{ background: #83a7b1; width: 100%; height: 100%; }
@font-face 							{ font-family: 'Enamel Brush'; src: url('../fonts/enamelBrush.eot'); src: local('☺'), url('../fonts/enamelBrush.woff') format('woff'), local('Enamel brush'),  url('../fonts/enamelBrush.ttf') format('truetype'); }
body 								{  margin: 0 auto; font-family: Trebuchet MS, Helvetica, sans-serif; font-weight: normal; font-size: 1.1em; color: #31271c; letter-spacing: 80%; line-height: normal; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); overflow-x: hidden; }
ul 									{ list-style: none;  margin: 0; text-indent: none; padding: 0; }
li									{ margin: 0; padding: 0;  }
p 									{ font-size: 1.0em; line-height: 1.1em; margin: 0.7em; text-decoration: none; }
a 									{ text-decoration: none; outline: 0; color: #4d6f79; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
a:hover 							{ color: #31271c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
a img 								{ border: none; }
h1 									{ color: #31271c; font-size: 100px; font-weight: normal; font-style: normal; font-family: Enamel Brush; margin: 15px 0; line-height: 0.5em; }
h2 									{ color: #31271c; font-size: 65px; font-weight: normal; font-style: normal; font-family: Enamel Brush; margin: 15px 0; line-height: 0.5em; }
h3 									{ color: #31271c; font-size: 1.8em; font-weight: normal; font-family: Enamel Brush; line-height: 0em; }
h4 									{ font-size: 0.9em; margin: 0; font-weight: normal; }
input, textarea, button, fieldset	{ border: none; background: none; outline: 0; }
input, textarea						{ font-size: 16px; color: #31271c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
textarea							{ resize: none; overflow: hidden; }
form label							{ float: right; padding: 12px 10px 0 0; text-align: right; width: 55px; }
form button							{  }
td 									{  }
table								{  }


/*@font-face {
  font-family: 'Enamel Brush';
  src: url('fonts/enamel_brush-webfont.eot');
  src: local('☺'),
         url('fonts/enamel_brush-webfont.woff') format('woff'), url('fonts/enamel_brush-webfont.ttf') format('truetype');}*/




/**********************<<< PAGE STRUCTURE >>>***********************/
.wrapper 							{ width: 1000px; height: auto; margin: 0 auto; text-align: left; }
.contentWrapper						{ margin: 0 0 0 135px; float: right;  }
.content div						{  }
.contentIntro						{ float: left; width: 240px; }
.contentDetails						{ float: left; width: 600px; margin: 10px 0 0 0; }
.tabContent							{ padding: 15px 0 0 15px; }
.tabContent h4						{ margin: 20px 0 0 40px; }
.tabContent ul						{ font-size: 0.9em; }
.ulTabs								{ }
.ulTabs li							{ display: inline; float: left; margin: 30px 52px 0; } 

/**********************<<< NAVIGATION >>>***********************/

/* INDEX NAV */
.nav								{ background: url(../images/navBg.png) no-repeat; width: 135px; height: 420px; position: fixed; top: 100px; overflow: hidden; }
.ulNav								{ padding: 0 0 0 14px; position: relative; top: 180px;  }
.ulNav li							{ display: block; position: relative; }	
.aNav								{ color: #31271c; font-size: 20px; position: relative; top: 9px; left: 4px; text-shadow: none;  letter-spacing: -1px; }
.aNav:hover							{ color: #000000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.active								{ color: #31271c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) }

/* BUTTONS */
.button								{ display: block; font-size: 16px;  }
.button a							{ color: #ffffff; margin: 0 0 0 9px; position: relative; top: 3px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.button a:hover						{ color: #31271c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.small								{ width: 96px; height: 27px; }
.down								{ background: url(../images/buttonSmallDown.png) no-repeat; }
.forward							{ background: url(../images/buttonSmallForward.png) no-repeat; }								

/**********************<<< SECTION PORTFOLIO >>>***********************/




/**********************<<< SOCIAL MEDIA LINKS >>>***********************/
#contactSocial						{ position: relative; float: left; bottom: 27px; }
#contactSocial a					{ display: inline; }
.socialLink							{ display: block; width: 66px; height: 66px; float: left; position: relative; }
#socialLinkTwitter					{ background: url(../images/socialTwitter.png) no-repeat; }
#socialLinkFacebook					{ background: url(../images/socialFacebook.png) no-repeat; }
#socialLinkFlickr					{ background: url(../images/socialFlickr.png) no-repeat; }
#socialLinkLinkedin					{ background: url(../images/socialLinkedin.png) no-repeat; }


#contactSocial a span				{ display: none; }
#contactSocial a:hover span			{ display: block; position: absolute; top: 60px; left: 0; width: 300px; padding: 5px; margin: 10px; z-index: 100; color: #31271c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); text-align: left;  }


/**********************<<< SECTION FOOTER >>>***********************/
.footer								{ background: url(../images/headerBg.jpg) repeat #8dadb5;  }
#footerSpacerTop					{ background: url(../images/footerSpacerTop.jpg) repeat-x; height: 4px; }
.footerWrapper						{ }
.footerContentWrapper				{ margin: 25px 0; }
.footerContent						{ text-align: center; mergin: 0 15px; }
.copy								{ position: relative; left: 100px; font-size: 1.4em; font-family: 'Enamel Brush';  }
/**********************<<< HEADINGS >>>***********************/


/**********************<<< TEXT STYLES>>>***********************/

.subTitle							{ font-size: 18px; letter-spacing: 0.2em; font-family: Trebuchet MS, Helvetica, sans-serif; position: relative; left: 60px;  }
.white								{ color: #ffffff; text-shadow: 0 -1px 0 #707070; }


/**********************<<< EXTRAS >>>***********************/