/* Global CSS for one.Twenty.Seven developed and 
masterminded by Dave Gamache 2010 */


/* -------------------------------------------------- RESET */
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,
b, u, i, center,
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;
	}

/* -------------------------------------------------- PAGE DEFAULTS */

html { font-size: 100%; }

body { 
	position: relative;
	font-size: 62.5%;
	font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, Verdana, sans-serif;
	color: #333; 
	}


/* -------------------------------------------------- TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 { color: #222; font-weight: normal; }

h1 { font-size: 7em; line-height: 1.3em; }
h2 { font-size: 6em; line-height: 1.3em;}
h3 { font-size: 5em; line-height: 1.3em; }
h4 { font-size: 4em; line-height: 1.3em; }
h5 { font-size: 3em; line-height: 1.3em; }
h6 { font-size: 2em; line-height: 1.3em; }

p { font-size: 1.4em; line-height: 1.3em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

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


/* -------------------------------------------------- LINKS */

a:link, a:visited { text-decoration: none; color: inherit;}
a:hover, a:focus { } 


/* -------------------------------------------------- LAYOUT */

#wrapper 	{ width: 960px; margin: 0 auto; font-size: 1.2em; }
#header 	{ width: 960px; padding-top: 40px; position: relative; }
#main 		{ width: 600px; float: left; padding-top: 40px; }
#sidebar 	{ width: 300px; float: left; margin: 0 0 0 60px; padding-top: 40px; }
#footer 	{ width: 100%; float: left; padding: 20px 0 20px 0; } 

/* -------------------------------------------------- SLIDING CAPTIONS */

.box-wrapper { 
	width: 325px; /* must match image width */
	height: 260px; /* must match image height */
	background:#161613; 
	border: solid 2px #333; 
	overflow: hidden; 
	position: relative; 
	}
.box-wrapper img { 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
	}
.box-wrapper p { 
	padding: 0 10px; 
	color:#afafaf; 
	font-weight:bold; 
	}
	
.box-caption { 
	position: absolute; 
	top: 260px ; /* must match above .box-wrapper height */
	left: 0;
	background: #000; /* caption background color */
	height: 100px; 
	width: 100%; 
	opacity: .8; 
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 5-7 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE 8 */
	}

/* -------------------------------------------------- FORMS */

input { 
	display: block;
	position: relative;
	background: #fff url(../assets/misc/input-bg.png) repeat-x; 
	border: 1px solid #bbb;
	padding: 5px 8px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	}
	
input[type=submit] { 
	color: #fff;
	background: #1c6f96;
	border-color: #145371; 
	}
	
textarea { 
	display: block; 
	position: relative;
	width: 150px; 
	background: #fff url(../assets/misc/input-bg.png) repeat-x; 
	border: 1px solid #bbb;
	padding: 5px 8px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font: inherit;
	}
	
input:focus,
textarea:focus { 
	border: 1px solid #1c6f96;
	}

/* the below two selectors only apply if jquery validation plugin being used */
label.form-error {
	position: absolute; 
	color: #fff;
	width: 150px; 
	/* negative top margin must be -26 + bottom-margin of form field element &
	left margin must be the width of that form element and then a little more */
	margin: -32px 0 0 290px;
	background: #ff0000;
	padding: 5px; 
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	z-index: 1000; 
	}
	
h6#contactSuccess {
	display: none; 
	position: fixed;
	top: -1000px;
	margin: 0 auto; 
	background: #269ad0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; 
	padding: 5px 10px;
	color: #fff;
	}

.not-focused { color: #bbb; }
.focused { color: #333; border: 1px solid #999; }

/* -------------------------------------------------- MISC */

/* Use this class on the parent of floated elements to clear them :) */
/* ----- clearfix ----- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

/* ----- quick floats ----- */
.left 		{ float: left; }
.right 		{ float: right; }
.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.highlight  { background: #ff0; }

.first      { margin-left: 0; padding-left: 0; }
.last       { margin-right: 0; padding-right: 0; }
.top        { margin-top: 0; padding-top: 0; }
.bottom     { margin-bottom: 0; padding-bottom: 0; }