/* @override 
	http://127.0.0.1/~jkestner/supermechanical2/stylesheets/general.css
	http://127.0.0.1/stylesheets/general.css
*/

/* General styles - these will be applied to desktop, mobile and tablet browsers. */

/* CSS reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
}


body {
background: #fff;
color: #686868;
font-family: 'AsapRegular', Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 85%; /* Fonts are set in ems. 1em = about 14px */
}

/* =Layout -------------- */

.row {
clear: both;
overflow: hidden;
margin-bottom: 1.5em;
}


img { 
max-width: 100%; /* Images resize on smaller screens. Width takes image padding into account. */
min-width: 0;
}



/* =Floats */

.float-left {
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
}

.float-right {
float:right;
margin-left: 1.5em;
margin-bottom: 1.5em;
}


/* =Text  --------------- */

/* Ostrich for large headings and ASAP for body copy */

@import "fonts/ostrich-sans.css";

@font-face {
    font-family: 'OstrichSansMedium';
    src: url('fonts/ostrich-regular-webfont.eot');
    src: url('fonts/ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ostrich-regular-webfont.woff') format('woff'),
         url('fonts/ostrich-regular-webfont.ttf') format('truetype'),
         url('fonts/ostrich-regular-webfont.svg#OstrichSansMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'OstrichSansBold';
    src: url('fonts/ostrich-bold-webfont.eot');
    src: url('fonts/ostrich-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ostrich-bold-webfont.woff') format('woff'),
         url('fonts/ostrich-bold-webfont.ttf') format('truetype'),
         url('fonts/ostrich-bold-webfont.svg#OstrichSansBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OstrichSansBlack';
    src: url('fonts/ostrich-black-webfont.eot');
    src: url('fonts/ostrich-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ostrich-black-webfont.woff') format('woff'),
         url('fonts/ostrich-black-webfont.ttf') format('truetype'),
         url('fonts/ostrich-black-webfont.svg#OstrichSansBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'AsapRegular';
    src: url('fonts/Asap-Regular-webfont.eot');
    src: url('fonts/Asap-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Asap-Regular-webfont.woff') format('woff'),
         url('fonts/Asap-Regular-webfont.ttf') format('truetype'),
         url('fonts/Asap-Regular-webfont.svg#AsapRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AsapItalic';
    src: url('fonts/Asap-Italic-webfont.eot');
    src: url('fonts/Asap-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Asap-Italic-webfont.woff') format('woff'),
         url('fonts/Asap-Italic-webfont.ttf') format('truetype'),
         url('fonts/Asap-Italic-webfont.svg#AsapItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AsapBold';
    src: url('fonts/Asap-Bold-webfont.eot');
    src: url('fonts/Asap-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Asap-Bold-webfont.woff') format('woff'),
         url('fonts/Asap-Bold-webfont.ttf') format('truetype'),
         url('fonts/Asap-Bold-webfont.svg#AsapBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AsapBoldItalic';
    src: url('fonts/Asap-BoldItalic-webfont.eot');
    src: url('fonts/Asap-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Asap-BoldItalic-webfont.woff') format('woff'),
         url('fonts/Asap-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/Asap-BoldItalic-webfont.svg#AsapBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}




p {
line-height: 1.75em;
margin-bottom: 1.5em;
}

p.leadin { /* Intro parapgraphs in some sections */
font-size: 1.1em;
line-height:1.5em;
}

p + .row {
padding-top: 1.5em;
}

b, strong, label {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}


h1, h2 {
font-family: 'OstrichSansMedium', Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
color: #f86245;
}

h3, h4, h5 {
font-family: 'AsapRegular', Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
color: #45464b;
text-transform: uppercase;
}


h1 {
font-size:3em;
line-height: 1em;
margin-bottom:.25em;
}


h2 {
font-size:2.5em;
line-height: 1em;
margin-bottom:.4em;

}

p + h2, ul + h2, ol + h2, table + h2, .row + h2, blockquote + h2 { 
padding-top:.5em;
}


h3 {
font-size:1.3em;
margin-bottom:1em;
}

p + h3, ul + h3, ol + h3, table + h3, .row + h3, blockquote + h3 { 
padding-top:1em;
}


/* =Links ----------------------- */



a, a:visited {
color: #1e9e90;
text-decoration:none;
}

a:hover {
color:#0c8174;
background-color: #d2f1ee;
}


.dark a, .dark a:visited {
color: #74ced6;
text-decoration:none;
}

.dark a:hover {
color:#74ced6;
background-color: #3b3b3b;
}




/* =Lists --------------------------- */


ul {
list-style-type: none;
margin-bottom: 1.5em;
}
	
li {
margin-bottom: 1em;	
line-height: 1.5em;
}

ul.bullets li { /* If you want bullet points */
list-style-type:disc;
list-style-position:outside;
margin-left: 1.5em;
line-height: 1.75em;
}



/* =Structure */

.content { /* Container for all...you know...content */
margin: auto;
padding: 0 20px;
position:relative; /* So you can absolutely position stuff in there. */
}

.header .row {
margin-bottom:0;
padding-top:20px;
padding-bottom:10px;
}

.header ul {
margin-top:1.5em;
}

.header li a, .header li a:visited {
color: #fff;
background: #149e91;
display:block;
padding: .5em;
text-decoration: none;
font-size: 1.1em;
}

.logo a {
font-family: 'OstrichSansMedium', Arial, Helvetica, sans-serif;
color: #e0583e;
font-size: 3.25em;
text-decoration:none;
}

.logo a:hover {
background:none;
}

.logo a span { /* The \||| icon */
font-family: 'OstrichSansBlack', Arial, Helvetica, sans-serif;
font-size: .95em;
}

.footer .section p {
  	padding: 5px;
}


.intro { /* Top area on the homepage */
	min-height:380px; /* Minimum height it should be to support absolutely positioned product image */
}
.intro img.splash { /* Picture of Twine */
	position:absolute;
	right:0;
	bottom:0; /* Stick it to the bottom of the container */
	margin-bottom:0;
	max-height: 100%;
	z-index: -5;
}

.intro-text {
	width:35%;
}

.intro h1 {
	margin-top:30px;
	margin-top:0px;
	font-size: 3.7em;
}
.intro .intro-text.white h1 {
	color: white;
	text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.intro .leadin {
	font-size: 24px !important;
}
.intro .button-line {
	font-size: 20px !important;
	margin-top: -30px;
	margin-bottom: 0px;
}



#company-header { padding-top: 1em; }
#company-header .logo a { color: #666; font-size: 2.0em; }



/* =Navigation */

.menu { /* Menu toggle button. Only visible at small widths. */
display:block;
cursor:pointer;
float:right;
text-transform: uppercase;
padding-left: 20px;
padding-top: 3px;
background: url(../images/icon-menu.png) left no-repeat;
font-size: 1.1em;
margin-top:10px;
margin-bottom:0;
}

.menu:visted {
xcolor:#fff;
}

.nav { /* Main navigation. On small screens, displayed when the user hits the menu button. */
display:none;
}




.section { /* Each section of a page. Put a light, medium or dark class to modify bg color */
margin-bottom:0;
border-bottom: solid 1px #fff;

}

.section .content {
padding:2em 20px;
}

.light {
background-color: #faf9f7;
}

.medium {
background-color: #f2f1ef;
}

.dark {
background-color: #45464b;
color: #d5d4d3;
}

.dark h2, h5 {
color: #d5d4d3;
}
.dark h4 {
color: #e0583e;
}



.callout { /* White content boxes that call stuff out */
background-color:#fff;
padding: 1.5em;
margin: 10px; /* So the box shadow doesn't get cut off */
margin-bottom: 1.5em;
position:relative;
-webkit-box-shadow: 0px 0px 10px #d7d7d6;
-moz-box-shadow: 0px 0px 10px #d7d7d6;
box-shadow: 0px 0px 10px #d7d7d6;

/* Border radius and box shadow for IE 6-8 */
behavior: url(/PIE.htc);
}

.callout ul, .callout ul li:last-child {
margin-bottom:0;
}


	
.promo {
	height: 120px;
}
.promo b { font-family: OstrichSansMedium; font-weight: normal; color: #e0583e; }
.promo p {
	line-height: 1em;
	margin-bottom: 0;
}
.promo .callout {
	font-size:2.4em;
	font-family: OstrichSansMedium;
	padding: 0.4em;
	text-align: left;
	margin-bottom: .5em;
}

.promo-back {
}


/* =Buttons -----*/

/* The button class can be applied to an anchor or input. */

.button {
	position:relative;
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin-bottom: 1.5em;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: 'AsapRegular', Arial, sans-serif;
	font-size: 1.25em;
	font-weight:lighter;
	letter-spacing: 4px;
	text-transform: uppercase;
	padding: .75em .9em .5em .9em;
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow: visible; /* ie6 removes extra spacing */
	width: auto; /* ie6 removes extra spacing*/
	color: #fff;
	border:0; /* CSS3 PIE gradients and border radius for IE won't work unless border is 0. */
	
	background: #30b9ae;
	background: -webkit-gradient(linear, left top, left bottom, from(#30b9ae), to(#0a7a6c));
	background: -moz-linear-gradient(top,  #30b9ae,  #0a7a6c);
	

	/* Gradients and border radius for IE 6-8 */
	-pie-background: linear-gradient(#30b9ae, #0a7a6c); 
	behavior: url(/PIE.htc); 
	
}
.button-med { 
	font-size: 1em; 
	margin: -.4em 0 0 1em; 
	letter-spacing: 3px;
}
.button-mini { 
	float: right;
	font-size: .7em; 
	margin: -.4em 0 0 1em; 
	padding: .6em .7em .3em .8em;
	letter-spacing: 3px;
}

.button:hover  {
color:#fff;
background: #2aaca3;
background: -webkit-gradient(linear, left top, left bottom, from(#2aaca3), to(#08675b));
background: -moz-linear-gradient(top,  #2aaca3,  #08675b);
	

/* Gradients and border radius for IE 6-8 */
-pie-background: linear-gradient(#2aaca3, #08675b); 
behavior: url(/PIE.htc); 
}

.button:active {
position: relative;
top: 1px;
color: #fff;

}

a.button:visited {
color:#fff;
}




/* =Alignment  */

.align-left {
text-align:left;
}

.align-center {
text-align:center;
}

.align-right {
text-align:right;
}


/* =Modifiers -----------------------*/

big, .big { 
font-size: 1.2em;
}
	
small, .small {
font-size: .8em;
}