/* html5doctor.com/html-5-reset-stylesheet/ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }
/*web fonts*/
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 11, 2012 11:25:54 AM America/New_York */
@font-face {
    font-family: 'SortsMillGoudyRegular';
    src: url('fonts/GoudyStM-webfont.eot');
    src: url('fonts/GoudyStM-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/GoudyStM-webfont.woff') format('woff'),
         url('fonts/GoudyStM-webfont.ttf') format('truetype'),
         url('fonts/GoudyStM-webfont.svg#SortsMillGoudyRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SortsMillGoudyItalic';
    src: url('fonts/GoudyStM-Italic-webfont.eot');
    src: url('fonts/GoudyStM-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/GoudyStM-Italic-webfont.woff') format('woff'),
         url('fonts/GoudyStM-Italic-webfont.ttf') format('truetype'),
         url('fonts/GoudyStM-Italic-webfont.svg#SortsMillGoudyItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Web Fonts from fontspring.com
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 * (c) 2010-2012 Fontspring
 * The fonts included are copyrighted by the vendor listed below.
 * Vendor:      exljbris
 * License URL: http://www.fontspring.com/fflicense/exljbris*/
@font-face {
    font-family: 'MuseoSans500Regular';
    src: url('fonts/MuseoSans_500-webfont.eot');
    src: url('fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/MuseoSans_500-webfont.woff') format('woff'),
         url('fonts/MuseoSans_500-webfont.ttf') format('truetype'),
         url('fonts/MuseoSans_500-webfont.svg#MuseoSans500Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*scrollbar*/
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.5);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
	background: rgba(57,41,16,0.75);
    border-radius: 10px;
     
}
/*page styles*/
html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

a {
	color: #fff;
	text-decoration: none;	
}

body {
	color: #fff;
	background: url(../images/brown-bg.jpg);	
}

.wrapper {
	min-height: 100%;
	height: auto;
	height: 100%;
	margin: 0 auto -60px;
}
#footer, #push {
	height: 60px;
}

#header {
	
	background: rgba(57,41,16,0.75);
	width: 252px;
	margin: 10px 0 0 100px;
	padding: 10px;
	text-align: center;
}

h1.mtm {
	font-family: 'SortsMillGoudyRegular';
	font-size: 6em;
	margin-bottom: -0.15em;
}

h2.stucco{
	font-family: 'LeagueGothicRegular';
	font-size: 3.3em;
	margin-bottom: 0.1em;
	
}

h3.detail {
	font-family: 'SortsMillGoudyItalic';
	font-size: 1.05em;
	margin-bottom: 0.5em;

}

h3.email {
	font-family: 'LeagueGothicRegular';
	font-size: 1.7em;
	margin-bottom: 0.5em;
}

h3.phone {
	font-family: 'LeagueGothicRegular';
	font-size: 2.75em;
	letter-spacing: 0.1em;	
}

#nav {
	margin: 10px 5px 10px 100px;
}

#nav li {
	display: inline;	
}

#nav a {
	background: rgba(57,41,16,0.75);
	padding: 2px 32px;
	font-family: 'LeagueGothicRegular';
	font-size: 1.6em;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition:	all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#nav a:hover {
	background-color: rgba(173,73,27,0.75);	
}

#nav li a.active {
	background-color: rgba(122,82,53,0.75);	
}

div.content {
    clear: left;
    padding: 1em 1em 1em 0;
	max-width: 275px;
}

div.content.inactive {
	display: none;
}

#wrap {
	min-height: 100%;
	width: 100%;

	}

#main {
	width: 100%;
	}

#content {
	line-height: 1.2em;	
	font-family: 'MuseoSans500Regular';	
}

#content span {
	background: rgba(57,41,16,0.75);	
}

#content a {
	background-color: rgba(122,82,53,0.75);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition:	all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}

#content p {
	text-indent: 0.4em;	
}

#content a:hover {
	background: rgba(173,73,27,0.75);
}

#work, #clients {
	max-width: 275px;
	margin-left: 100px;	
}

#work li, #clients li, #content p {
	line-height: 1.2em;
	padding: 0.5em 0;	
}

#work li, #clients li {
	margin-left: 0.4em;	
}

#footer {
	background: rgba(57,41,16,0.75);
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	padding: 10px 0 0 10px;
	margin-left: 100px;
	height: 60px;
	width: 252px;
	}

#footer p {
	font-family: 'SortsMillGoudyItalic';
	font-size: 0.9em;	
	line-height: 1.5em;
	padding: 2px;
}


/*media queries*/
@media only screen and (max-width: 959px) {
	#header, #nav, #work, #clients, #footer {
		margin-left: 0;	
	}
}

@media screen and (max-width: 760px) {
	#header {
		margin-top: 0;	
	}
}

@media screen and (max-width: 320px) {
	body{
		font-size: 0.6em;	
	}
	
	#header {
		width: auto;
		height: 100px;
		padding: 4px;	
	}
	
	h1.mtm {
		float: left;
		text-align: left;	
	}
	
	h2.stucco, h3.detail {
		clear: left;
		float: left;
		text-align: left;	
	}
	
	h3.email, h3.phone {
		text-align: right;
		padding-top: 10px;	
	}
	
	h3.email {
		font-size: 1.2em;
		font-family: 'MuseoSans500Regular';	
	}
	
	
	#nav {
		margin: 15px auto;
		clear: both;
		text-align: center;	
	}
	
	#nav a:link {
		padding: 10px 48px;
		font-size: 2em;	
	}
	
	#content {
		font-size: 1.6em;	
	}
	
	#footer {
		width: auto;	
	}
	
	#footer p {
		font-size: 1.5em;	
	}
}

@media screen and (max-width: 305px) {
	body {
		font-size: 0.5em;	
	}
	
	#header {
		height: 80px;	
	}
	
	#nav a:link {
		padding: 10px 30px;	
	}
}