/* RESET STYLES
-----------------------*/
html, body, div, span, applet, object, iframe,
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, strike, 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;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
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: "" "";
}

/* CLEARFIX */
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}


/* BODY STYLES
-----------------------*/
@font-face {
    font-family: 'DistrictThin';
    src: url('distth__-webfont.eot');
    src: url('distth__-webfont.eot?#iefix') format('embedded-opentype'),
         url('distth__-webfont.woff') format('woff'),
         url('distth__-webfont.ttf') format('truetype'),
         url('distth__-webfont.svg#DistrictThin') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
	background: #fff;
    font-family: Helvetica, Arial;
    font-size: 100%;
	width:100%;
}

p {
	line-height: 17px; 
}

h1 {
	font-family: 'DistrictThin';
	font-size: 3em; /* 48px / 16px */
}
	h1 a {
		color:#86260f;
		text-decoration: none;
	}

h2 {
	font-family: 'DistrictThin';
	font-size: 1.375em; /* 22px / 16px */
	line-height: 1.5em; /* 24px / 16px */
}
	#header h2 {
		font-style:italic;
	}

h3 {
	margin:8px 0 4px;
	font-size: 1.125em; /* 18px / 16px */
}

a:link {color:#86260f;}
a:visited {color:#86260f;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

#wrapper {
	margin: 0 auto;
	width: 90%; /* 980px target */
	border-right:1px #d1d1d1 solid;
	border-left:1px #d1d1d1 solid;
	-moz-box-shadow:0 0 10px #999;
	-webkit-box-shadow:0 0 10px #999;
	-box-shadow:0 0 10px #999;
}

strong {font-weight:bold;}
em {font-style:italic;}

/* HEADER STYLES
-----------------------*/

#header {
	position:relative;
	background: #cccccc;
	background: -moz-linear-gradient(top, #cccccc 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #cccccc 0%,#ffffff 100%);
	background: -o-linear-gradient(top, #cccccc 0%,#ffffff 100%);
	background: -ms-linear-gradient(top, #cccccc 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 );
	background: linear-gradient(top, #cccccc 0%,#ffffff 100%);
	border-bottom: 3px solid #cccccc;
	padding:12px;
	text-align: left;
}

#header img {position:absolute;top:0;right:0;bottom:0;width:auto;height:100%;}

/* NAV STYLES
-----------------------*/
#nav {margin-bottom:12px;text-align:left;clear:both;}
#nav a {float:left;padding:12px;}
#nav a:link {text-decoration:none;}
#nav a:visited {text-decoration:none;}
#nav a:hover,
#nav a.current {background:#cccccc;
-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;-o-border-radius:0 0 10px 10px;}
#nav a:active {text-decoration:none;}
#nav a:focus {background:#cccccc;}



/* FOOTER STYLES
-----------------------*/
.footer {clear:both;border-top:3px #666 solid;margin:0 0 24px 0;padding:24px 0;}
.copyright {padding:24px 12px;font-size:0.75%;text-align:right; /* 12px / 16px */}
.footer li {
margin:0 2.6666667% 2.6666667% 0; /* 16px / 600px */
font-size:.875em; /* 14px/16px*/
line-height:1.5em;

}


/* PAGE STYLES
-----------------------*/
.main {	
	background:transparent url(../images/nyc-skyline.png) no-repeat left bottom;
	background-size:100%;
	padding-bottom:20%;
}
.main-content {
	float:left;
	width:61.224489795% /*600px/980px*/
}
.supplemental {
	float:left;
	width:38.775510204% /*380px/980px*/
}

.main-content h2,
.main-content h3,
.main-content p,
.main-content ul {padding:0 12px;}

p {
margin:0 3% 3% 0;/* 18px / 600px */
font-size:.875em; /* 14px/16px*/
line-height:1.5em;
}

.main li {
margin:0 3% 3% 0;/* 18px / 600px */
font-size:.875em; /* 14px/16px*/
line-height:1.5em;
}

/* CONTACT FORM
-----------------------*/
#contact h2,
#contact p,
#contact ul {padding:0 12px;}

form {padding:0 12px;}
fieldset {color:#444;}
label {display:block;margin:16px 0 4px;font-style:italic;}
input[type="text"],input[type="email"],input[type="tel"], textarea {width:30.612245%;padding:6px;font-size:.875em;} /* 300px / 980px */
.button {
   border: 1px solid #491508;
   background: #86260f;
   margin:10px 0;
   padding: 5px 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: 2px 2px 5px #999;
   -moz-box-shadow: 2px 2px 5px #999;
   box-shadow: 2px 2px 5px #999;
   color: white;
   font-size: 18px;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   background: #491508;
   }
.button:active {
   background: #491508;
   -webkit-box-shadow:none;
   -moz-box-shadow:none;
   box-shadow:none;
   
   }
   
.error {-moz-box-shadow:0 0 3px red;-webkit-box-shadow:0 0 3px red;box-shadow:0 0 3px red;}


/* HOMEPAGE STYLES
-----------------------*/
.references {
margin:0 3% 3% 0;
font-size:.8125em; /* 13px/16px*/
line-height:1.5em;
}

.references li {margin:12px 0;}
.reference-credit {display:block;text-align: right;font-style:italic;}

/* SUBPAGES STYLES
-----------------------*/
.supplies {} /* 18px/16px*/
.supplies li {float:left;display:block;width:45%;font-size:.875em;}


/* MOBILE
-----------------------*/
@media all and (max-width:500px) {
h1 {
	font-size: 2em; /* 32px / 16px */
}

h2 {
	font-size: 1em; /* 16px / 16px */
	line-height: 1.125em; /* 18px / 16px */
}

h3 {
	margin:8px 0 4px;
	font-size: 1.125em; /* 18px / 16px */
}
#header {border-bottom:none;}
	#nav {border-bottom:1px #ccc solid;}
	#nav a {display:block;border-bottom:none;float:left;padding:12px 0;width:40%;margin:0 5%;font-weight:bold;text-align:center;}
	#nav li:nth-child(5) a {width:100%;}
	#nav a.current {-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
	#nav a:hover {-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
	.main-content {float:none;width:100%;}
	.supplemental {display:none;}
	input[type="text"],input[type="email"],input[type="tel"], textarea {width:90%}
	.supplies li {float:none;width:auto;font-size:1em;}

}