/*!
 @abstract  Stringent Studios - Site CSS
 @author    Chris Stringer (cstringer42\@gmail.com)
 @version   1.0.2
 @updated   2015-11-16
 @copyright © Copyright 2015 by Stringent Studios. All rights reserved.
*/

/* Elements */

html, body {
 margin:0;
 padding:0;
}
body {
 font-family:"Avenir","Helvetica Neue",Helvetica,Arial,sans-serif;
 color:#333;
 background-color:#eef;
 background-image: linear-gradient(#f3f3f3 2px, transparent 2px),
  linear-gradient(90deg, #f3f3f3 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
 background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
 background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
 background-attachment:fixed;
}

a:link, a:visited {
 color:rgb(64,128,192);
 text-decoration:none;
}
a:active, a:hover {
 text-decoration:underline;
}

.no-css {
 display:none;
}

/* Header */

header {
 margin:0;
 padding:0.75em 0;
 background-color:rgba(160,160,160,0.25);
 background:linear-gradient(105deg, rgba(64,128,192,0.35), transparent);
 text-shadow:1px 1px 0 #fff;
}

header img {
 float:left;
 margin:0 0.5em;
 padding:0;
 height:6em;
 width:auto;
 border:none;
 transition:filter 30s ease, transform 30s ease;
}
header:hover img {
 filter:hue-rotate(60deg);
 transform:rotate(720deg);
 transition:filter 30s ease, transform 30s ease;
}

header h1,
header .subhead {
 margin:0;
 font-weight:100;
}
header h1 {
 color:#136;
 padding-top:2px;
 font-size:2em;
 line-height:1em;
 letter-spacing:0.05em;
 transition:filter 30s ease;
}
header:hover h1 {
 filter:hue-rotate(60deg);
 transition:filter 30s ease;
}
header .subhead {
 font-size:1.5em;
 letter-spacing:0.25em;
}

@media (max-width:640px) {
 header {
  padding:0.25em;
 }
 header img {
  width:3.5em;
  height:auto;
  margin-right:0.5em;
 }
 header h1 {
  margin-bottom:0;
  padding-bottom:0;
  font-size:1.6em;
 }
 header .subhead {
  margin-top:0;
  padding-top:0;
  font-size:1.2em;
 }
}
header .head-container {
 max-width:1024px;
 margin:auto;
}

/* Navigation */

nav {
 background-color:#e0e0e0;
 background:linear-gradient(90deg,#ddd,rgba(255,255,255,0.1));
 text-shadow:1px 1px 0 #fff;
}

nav ul {
 margin:0;
 padding:0;
 display:inline;
}

nav ul li {
 margin:0;
 padding:0;
 list-style-type:none;
 display:inline-block;
}
nav ul li:before {
 content:"▹ ";
 font-size:0.75em;
}
nav ul li.active {
 font-weight:bold;
}
nav ul li.active:before {
 content:"▸ ";
 font-size:0.75em;
}

nav ul li a {
 padding:0.125em 0.5em 0.125em 0;
}
@media (max-width:640px) {
 nav {
  padding-left:0.5em;
  display:none;
 }
 nav ul li a {
  font-size:20px;
 }
}

/* Sections */

section {
 max-width:1024px;
 margin:0.5em auto;
 padding:1em;
 background-color:rgba(255,255,255,0.5);
 background-image:radial-gradient(#fff,rgba(255,255,255,0.0));
 border:1px solid #ddf;
 border-radius:4px;
}

section h2 {
 margin:0;
 text-shadow:4px 4px 8px #ccc;
}
section h2 a:link {
 color:#136;
 text-decoration:none !important;
}

section h3 {
 margin:0;
 padding:0.5em 0.5em 0;
 color:#778;
 background-color:#eaeaea;
 background:linear-gradient(0deg,#ddd,#fff);
 border-bottom:1px solid #f3f3ff;
 border-radius:5px 5px 0 0;
 text-shadow:1px 1px 0 #fff;
}

section .section-group {
 cursor:default;
 display:inline-block;
 width:49%;
 margin:0.5em auto;
 vertical-align:top;
 background-color:#fff;
 border:1px solid #eaeaea;
 border-radius:5px;
 transition:all 0.25s ease;
}
#contact .section-group {
 padding:1em;
}
section .section-group:hover {
 box-shadow:1px 1px 8px rgba(128,128,128,0.45);
 transition:all 0.25s ease;
}

section .section-group:hover h3 {
 color:#768;
}

section .item {
 margin:1em 1.5em 2em;
 font-family:Optima,sans-serif;
 letter-spacing:0.02em;
}

section dt {
 margin-bottom:0.3em;
 border-bottom:1px dotted #eee;
 font-size:1.1em;
 font-weight:700;
}
section dd {
 margin:0.5em 0 0 0.5em;
}

section ul.item {
 padding-left:1em;
}
section ul.item li {
 margin-bottom:0.75em;
}

@media (max-width:640px) {
 section .section-content {
  display:none;
 }
 section h2 {
  cursor:pointer;
 }
 section h2:before {
  content:"▹ ";
 }
 section h2:hover:before {
  content:"▸ ";
 }
 section.active h2:before {
  content:"▾ ";
 }
 #contact .section-content {
  padding:0 0.5em;
  font-size:1.25em;
 }
 section .section-group {
  display:block;
  width:99%;
 }
 #contact .section-group {
  width:90%;
 }
 section .item {
  font-size:1.1em;
 }
}

/* Footer */

footer {
 margin:1em auto 0;
 color:#888;
 font-size:0.9em;
 text-align:center;
}