/*
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
----------------------------------------------------------------------------------------*/
/*table, tbody, tfoot, thead, tr, th, td,*/
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,caption,
article, aside, aside2, aside15, aside20, canvas, details, embed, 
figure, figcaption, footer, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size:100%;
  font: inherit;
  vertical-align: baseline;
  }

article, aside, aside2, aside15, aside20, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
  }
  
  
/* 2. ROOT
----------------------------------------------------------------------------------------*/
html { 
  overflow-y: scroll;
  background: rgb(244, 244, 244);
  }

/* /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: Cambria,Didot,Cochin,"Times New Roman", serif;
  font-size: 1em;
  line-height: 1.618em;
  color: #592720;
  }

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.809em;
  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: 80%; }


/* 4. LINKS
----------------------------------------------------------------------------------------*/
A:visited { text-decoration: none; color: #71839e;  }
A:link, A:active { text-decoration: none; color: #6f1986;  }
A:hover { color: #8612ee } 


/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
----------------------------------------------------------------------------------------*/
h1 {
  text-align: center;
  font-size: 2.618em;
  line-height: 1.2em;
  }
  
h3 { text-transform:uppercase; letter-spacing:0.12em; }
h3, h4, h5, h6 { font-weight: bold; }

p.intro { font-size: 1.309em; margin-bottom: 1em; }

.prom { font-size: 1.4em; line-height:1.618em; margin-bottom:0.1em; font-weight:600; }
  
header { text-align:center; }

footer {
  margin:1.618em 0 0;
  padding: 1.618em 0 0;
  border-top: 1px solid rgb(102,102,102);
  border-bottom: 1px solid rgb(102,102,102);
  }
  
footer p { float: left; margin-right:1em; }

img.cen {
align: center
}


/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
----------------------------------------------------------------------------------------*/
  
header img#header-logo { margin-bottom:-0.809em; }


header p {font-size: 2.6em
  line-height:1.6em;
  margin-bottom: 1em;
  font-family: Trajan Pro,Cambria,Imprint MT Shadow, Academy Engraved LET, 'Jaques Francois Shadow', serif;
  font-weight: 400;
  text-align:center;
}



/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
----------------------------------------------------------------------------------------*/
#container {
    padding: 0.809em;
    max-width: 30em;
    margin: auto;
    border: none;
  }

aside { width: 100%; }

aside2 { width: 100%; }

aside15 { width: 100%; }

aside20 { width: 100%; }


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