/*
Goldilocks Approach to Responsive Web Design Boilerplate

Author: Design by Front - @designbyfront
Version: 0.1
URL: http://www.goldilocksapproach.com
----------------------------------------------------------------------------------------

CONTENTS - GLOBAL.CSS
-----------------------------------------
1. RESET
2. ROOT
3. CORE TYPOGRAPHY
4. LINKS
5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
7. BROWSER AND NON-SEMANTIC STYLING

CONTENTS - LAYOUT.CSS
-----------------------------------------
8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)

*/


/* 1. 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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, img {
	margin: 0;
	padding: 0;
	border: 0;
	font-size:100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}


/* 2. ROOT
----------------------------------------------------------------------------------------*/
html {
	overflow-y: scroll;
	background: #fff;
	height: 100%;
}

/* /ht Ethan Marcotte - http://front.ie/l8rJaA */
img embed, object, video { max-width: 100%; }
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }


/* 3. CORE TYPOGRAPHY
----------------------------------------------------------------------------------------*/
body {
	font-family: 'Open Sans', Arial, 'Times New Roman';
	font-size: 1em;
	color:#000;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.859em;
	line-height: 1em;
}

p, ul, ol, dl, blockquote {
    font-size: 1em;
    line-height: 1.618em;
    margin-bottom: 1.618em;
    //max-width: 30em; /* Optimal width for long-form text */
}

ul { list-style-type: disc; margin-left: 1.618em; }
ol { list-style-type: decimal; margin-left: 1.618em; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0;}

b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 85%; }


/* 4. LINKS
----------------------------------------------------------------------------------------*/
a			{ color:#333; text-decoration:underline; }
a:hover		{ color:orange; }

footer a			{ color:#fff; text-decoration:underline; }
footer a:hover		{ color:orange; }


/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
----------------------------------------------------------------------------------------*/

body { background:url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; text-align:center; }
footer { margin-top:10em; color:#fff; padding:1em; border-top:1px solid #fff; font-size:.9em; text-shadow:1px 1px #000; }
table { border-collapse:collapse; }
header { background:#fff; padding-bottom:1em; margin-bottom:4em; border-bottom:8px solid #f1b700; }

#logo { padding-top:1em; }

.feature-box { margin:0 auto; }
.feature-box  > div { display:inline-block; margin:.5em 0; border:5px solid #ccc; padding:1em; background:#fff; color:#000; }
.feature-box > div > div:nth-of-type(1) { }
.feature-box > div > div:nth-of-type(2) { width:15em; vertical-align:top; font-size:.9em; }

.news-box { margin:0 auto; }
.news-box > div { text-align:left; display:inline-block; width:100%; margin:1em 0; border:1px solid #ccc; background:rgba(255, 255, 255, 0.90);  color:#000; }
.news-box > div > div:nth-of-type(1) {  }
.news-box > div > div:nth-of-type(1) > a > img { width:100%; }
.news-box > div > div:nth-of-type(2) { padding:.5em; vertical-align:top; font-size:.9em; }

.cta { background:lightyellow; border:3px solid #f6b205; padding:1em; color:#000; display:inline-block; font-weight:bold; }
.cta div:nth-of-type(1) { font-size:.8em;  }
.cta div:nth-of-type(2) { font-size:1.6em; color:darkred; }

.trans  { background:rgba(255, 255, 255, 0.85); padding:2em;  }

.contact input[type='text'], .contact textarea , .contact option { width:90%; border:1px solid #777; padding:.5em; font-size:1.1em; }

.submit { padding:1em 2em; cursor:pointer; background:orange; color:#fff; font-weight:bold; font-size:.9em; border:0px solid #fff; border-bottom:5px solid darkorange; }


.tabular td,
.tabular th		{ border:1px solid #f7f7f7; vertical-align:top; padding:9px;}
.tabular th		{ background:#000099; color:#fff; font-weight:bold; text-align:left; }

.text_button	{ padding:5px; border:1px solid #000099; background:#fff; }

/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
----------------------------------------------------------------------------------------*/



h1	{ letter-spacing:-1px; margin:0; font-size:1.6em; font-weight:bold; }
h2	{ letter-spacing:-1px; margin:0; font-size:1.5em;  }
h3	{ letter-spacing:-1px; margin:0; font-size:1.4em;  }

hr	{ border:0; border-top:1px dotted #000; }



/* 7. BROWSER AND NON-SEMANTIC STYLING
----------------------------------------------------------------------------------------*/
.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }
.ie6 .cf { zoom: 1 }
* {box-sizing:border-box; }

/* ******************************************************************** */
/* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
/* ******************************************************************** */
.clearfix:after { content:".";  display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix{ height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */