/*
 ____                                           _   _                _
|  _ \ _ __ _   _ _ __ ___  _ __ ___   ___ _ __| | | | ___  __ _  __| |
| | | | '__| | | | '_ ` _ \| '_ ` _ \ / _ \ '__| |_| |/ _ \/ _` |/ _` |
| |_| | |  | |_| | | | | | | | | | | |  __/ |  |  _  |  __/ (_| | (_| |
|____/|_|   \__,_|_| |_| |_|_| |_| |_|\___|_|  |_| |_|\___|\__,_|\__,_|
            Made all this stuff, done with a lotta love :D
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
html {
  font-size: 100%;
  overflow-y: scroll;
  background-color: yellow;
  padding: 2% 5%;
  background-color: #eee;
  -webkit-text-size-adjust: 100%;
}
body {
  max-width: 80em;
  margin: 0 auto;
  font-size: 1em;
  line-height: 1.6;
  font-family: sans-serif;
  color: #333;
}
a {
  color: #44c;
}
a:hover {
  color: #11f;
}
h1,
h2 {
  line-height: 1.2;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
}
h1 {
  margin: 0;
  font-size: 2em;
}
h2 {
  margin: .5em 0 0 0;
  padding: 1em 0 0 0;
  font-size: 1.5em;
}
h2:first-child {
  margin-top: 0;
}
p {
  margin: 1em 0;
}
ul,
ol {
  margin: 1em 0;
  padding: 0 0 0 1em;
}
nav ul,
nav ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

header,
#main,
aside,
footer {
  position: relative;
  margin: 0 0 2% 0;
  padding: 2% 3%;
  border: 1px solid #bbb;
  background-color: #ddd;
  -moz-box-shadow: 0 0 10px rgba(120, 120, 120, .3);
  -webkit-box-shadow: 0 0 10px rgba(120, 120, 120, .3);
  box-shadow: 0 0 10px rgba(120, 120, 120, .3);
}
header {
  overflow: auto;
}
header h1 {
  max-width: 77%;
  margin: 0 0 .7em 0;
}
nav {
}
nav ol {
  width: 50%;
  float: left;
}
nav ol li {
  width: 33.3333333%;
  float: left;
}
nav ol a {
  width: 87%;
  float: left;
  padding: 4%;
  text-align: center;
  background-color: #eee;
  text-decoration: none;
  -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05) inset, 0 -3px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05) inset, 0 -3px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05) inset, 0 -3px 10px rgba(0, 0, 0, 0.1);
}
nav ol a:hover {
  background-color: #fafafa;
  text-decoration: underline;
}
#search {
  width: 40%;
  float: right;
  text-align: right;
  margin: .5em 0 0 0;
}
[type="search"] {
  width: 15em;
}
[type="submit"] {
}
#main {
  width: 65%;
  float: left;
}
aside {
  width: 20%;
  float: right;
}
aside h2 {
  font-size: 1.2em;
}
footer {
  clear: both;
}
#role-navigation {
  top: 42%;
  right: 50.8%;
}
#role-search {
  top: 43%;
  right: 3%;
}

@media (max-width: 920px) {
  body {
    font-size: .9em;
  }
  h1 {
    font-size: 1.6em;
  }
  h2 {
    font-size: 1.4em;
  }
  #main,
  aside {
    width: auto;
    float: none;
  }
}
@media (max-width: 480px) {
  html {
    padding: 2%;
    background-color: #ddd;
  }
  body {
    font-size: .8em;
  }
  header,
  #main,
  aside,
  footer {
    background-color: #eee;
  }
  [type="search"] {
    width: 50%;
  }
  nav ol a {
    background-color: #ccc;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
@media (max-width: 320px) {
  html {
    padding: 0;
  }
  header,
  #main,
  aside,
  footer {
    margin: 7% 0;
    padding: 7% 4%;
    border: none;
  }
  nav ol {
    width: 50%;
    float: left;
  }
  #search {
    width: 40%;
    float: right;
    text-align: right;
    margin: .5em 0 0 0;
  }
  nav ol,
  #search {
    float: none;
    width: auto;
    overflow: auto;
    margin: 14% 0 0 0;
  }
  #role-navigation {
    top: 37%;
    right: 4%;
  }
  #role-search {
    top: 68%;
    right: 4%;
  }
}