@import url("reset.css");
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,300italic,700);

html { font-size:100.01%; }

body {
  background: #eee;
  font-size: 83%;
  color: #191919;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 400;
}

#container { 
	margin: 0 auto;
	width: 1000px;
}

#body { 
  background-color: #fff;
  padding: 20px;
  width: 960px;
}

.column	{ float: left; margin-right: 20px; }
.last 		{ margin-right: 0; }


/* Header Logo
------------------------------- */
#header { margin-top: 20px; margin-bottom: 60px; width: 100%; }

#header h1 {
	background: url('img/logo.png') no-repeat;
	margin: 0 auto;
	height: 130px;
	width: 1000px;
}

#header h1 a { 
  display: block;
  height: 130px; 
  width: 1000px;
}

#header h1 span { visibility: hidden; }

html, body { 
	overflow-x: hidden; 
}
#h2-container { 
	margin: -94px auto 0 auto; 
	width: 0; 
}
#h2-container h2 { 
	background: transparent; 
	padding: 5px 0; 
	position: relative; 
}
h2:before, h2:after {
	content: "";
	position: absolute;
	bottom: 0;
	top: 0;
	height:44px;
	width: 9999px;
}
#h2-container h2:before { right: 100%; margin-right:500px; }
#h2-container h2:after 	{ left: 100%; margin-left:500px; margin-top:-37px; }
#h2-container h2:nth-of-type(1), #h2-container h2:nth-of-type(1):before, #h2-container h2:nth-of-type(1):after { background-color: #000; }
#h2-container h2:nth-of-type(2), #h2-container h2:nth-of-type(2):before, #h2-container h2:nth-of-type(2):after { background-color: #000; }
h2.left-only:after 		{ display: none; }
h2.right-only:before	{ width: 0; }



/* Typography
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { 
  color: #111;
  font-weight: 700;  
  margin-bottom: 1em;  
}

h1 { font-size: 3em; line-height: 1; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.3em; font-weight: 300; }
h6 { font-size: 0.8em; font-weight: 300; display: inline; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

p          		{ line-height: 1.3em; margin: 0 0 1.5em; }
.left    			{ float: left!important; }
p .left     	{ margin: .5em 1.5em .5em 0; padding: 0; }
.right      	{ float: right!important; }
p .right    	{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a:link,
a:visited     { color: #00adef; text-decoration: none; }
a:hover, 
a:active      { color: #0082b3; text-decoration: underline; }

.unbold			{ font-weight: 400 }
strong, .bold	{ font-weight: 700 }
em, .italic	{ font-style: italic }

.small				{ font-size: 0.9em!important; font-weight: 300; }
.smaller			{ font-size: 0.8em!important; font-weight: 300; }
.large				{ font-size: 1.1em }
p.large			{ margin-bottom: 1em }

.uppercase		{ text-transform: uppercase }
.hide 				{ text-indent: -9999px }
.center			{ text-align: center; margin: 0 auto }
.left					{ text-align: left; float: left }
.right				{ text-align: right; float: right }
.top 					{ vertical-align: top }
.middle 			{ vertical-align: middle }
.bottom 			{ vertical-align: bottom }
.inline 			{ display: inline-block }

.quiet				{ color: #666 }
.quieter			{ color: #999 }


/* HST Quote
-------------------------------------------------------------- */
#quote { 
  padding: 100px 0 0 20px; 
  width: 380px; 
}

#quote p { 
  font-size: 3em; 
  line-height: 1.3em;
  margin: 0;
  text-align: center;
}

#quote p.quote { 
  font-weight: 700;
}

#quote p.quo {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 3.5em; 
  font-weight: 400;
  margin-bottom: -30px;
}

#quote p.hst {
  font-size: 1em; 
  font-weight: 300;
  margin-top: 30px;
  text-transform: uppercase;
}

#quote p.src {
  color: #999;
  font-size: 0.8em; 
  font-style: italic;
  font-weight: 300;
  margin-top: 10px;
}


/* Lists
-------------------------------------------------------------- */
dl,ol,ul	{ margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }
dd 				{ list-style-type: disc; display: list-item; }
ol     		{ list-style-type: decimal; }
ul   			{ list-style-type: disc; }
dd,dt,li	{ line-height: 1.5em; margin-bottom: 0; }
dt   			{ font-weight: 700; margin-top: 1em; }

/* Navigation */
ul#nav {
	float: left;
	background-color: #fff;
	padding: 10px;
	text-align: center;
  width: 980px;
}

ul#nav li { 
	border-right: 1px solid #111;
	display: inline-block;
	font-size: 1em;
	font-weight: 700;
	padding: 0 25px;
	text-transform: lowercase;
}

ul#nav li a:link,
ul#nav li a:visited { color: #111; }

ul#nav li a:hover, 
ul#nav li a:active  { color: #333; }

ul#nav li.first		{ padding-left: 0; }
ul#nav li.last	    { padding-right: 0; border-right: none; }


/* Images
-------------------------------------------------------------- */
img { vertical-align: middle }

.shadow-border {
	background-color: #fff;
	box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	padding: 5px!important;
}

	
/* Horizontal Rules
-------------------------------------------------------------- */
hr {
	background: #ddd;
	border: none;
	color: #ddd;
	clear: both;
  display: block;
	float: none;
	margin: 0 0 20px;
	width: 100%;
	height: 1px;
}

hr.space,hr.space-1,hr.space-0 { 
	background: #fff; 
	color: #fff; 
	margin: 15px 0;
	visibility: hidden; 
}
hr.space-1 { 
	margin-bottom: 30px!important;
}
hr.space-0 { 
	margin-bottom: 0!important;
}

/* Vimeo
-------------------------------------------------------------- */
.vimeoBadge         	{ margin: 0; padding: 0; }
.vimeoBadge .clip   { padding:0; float:left; margin:0 25px 10px 0; line-height:0; }
.vimeoBadge .clear	{ display: block; clear: both; visibility: hidden; }
.vimeoBadge .s100  	{ width: 100px; } 

.vimeoBadge img { 
  background-color: #fff; 
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.1); 
  padding: 5px!important; 
}

.vimeoBadge p { 
  font-size: 0.9em;
  font-weight: 300;
  margin-top: 4px;
}


/* Clear
-------------------------------------------------------------- */
/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow:hidden;
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }