/*
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 {
  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: url('/images/gray_jean.png') rgb(244, 244, 244);
  -webkit-font-smoothing: antialiased;
  }

/* /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: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  font-size: 1em;
  line-height: 1.618em;
  color: #4d4c4e;
  border-top: 5px solid #4d4c4e;
  border-bottom: 5px solid #4d4c4e;
  }

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; 
  }
    
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, a:visited { outline: none; color: #439BBD; text-decoration: underline; }  
a:hover { outline: none; text-decoration:none; }  
a:active, a:focus { outline: none; }


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

p.intro { font-size: 1.309em; margin-bottom: 1em; }
  
header { text-align:center; padding-bottom: 1em; }

header p { margin: 0 auto 1em auto; font-style: italic; }

#slideshow ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/*
#showcase a { 
  display: block;
  border: 5px solid #4D4C4E;
  overflow: hidden;
  float: left;
  line-height: 0.8em;
  margin-right: 0.5em;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
*/

#quote {
  text-align: center;
  margin-top: 2em;
  font-style: italic;
}

footer {
  text-align: center;
  /* padding-top: 2em; */
  }

#contact {
  margin: 1em 0;
  padding-top: 1em;
  border-top: 1px solid #CCC;  
  border-bottom: 1px solid #CCC;  
}
}
  
footer p { float: left; margin-right:1em; }

footer span { font-size: 0.8em; }

footer #copyright {
  border-top: 1px solid #CCC;
  margin-top: 1em;
  padding-top: 1em;
}



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

aside { width: 100%; }

header img#header-logo { margin-bottom:-0.809em; }

header h2:before {
  content:"";
  border-bottom:1px solid #333;
  height: 1.618em;
  width: 35%;  
  display: block;
  float: left;
}

header h2:after {
  content:"";
  border-bottom:1px solid #333;
  height: 1.618em;
  width: 35%;
  display: block;
  float: right;
}

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