/* 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: #FFF;
  }

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

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


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



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

aside { width: 100%; }



/* end resets */

/* calling fonts */


body {margin: 0; font-size: 1em; line-height: 1.3em;}
body a{border-bottom:1px dotted #f60; text-decoration:none;}
body a:hover {color:#ffffff; background:#f60; font-weight:normal; text-decoration:none; border:0;}
body a:active {color:#ffff99; font-weight:normal; text-decoration:none;}
body ul{list-style-type:none;}
article, aside{text-align:justify; text-justify:distribute;}

/* navigation lists */
nav ul{list-style-type:none; text-align:center; line-height:3em; margin:2%; min-width:100%;}
nav li{display:inline; float:none; position:relative; white-space:nowrap; text-align:center; font-size:1em; font-family:BloklettersBalpenBalpen, geneva, tahoma, sans-serif;}

/* clearing */

.clear{clear:both;}

/* mobile */

/* mobile */


@media screen and (max-width:480px){
article, aside{width:100%; float:none;}
.setsumei {margin:3% 5%;}
nav{margin:3% 5%;}
aside{margin:7% 5%;}
}

@media screen and (max-width:600px) and (orientation:portrait){
body{display:block;}
article{width:100%; float:none;}
aside{width:100%; float:none;}
.setsumei {margin:3% 5%;}
nav{margin:3% 5%;}
aside{margin:7% 5%;}
}