/* -------------------------------------- */
/* ----- Copyright of Branded Frog ------ */
/* ------------- August 2013 ------------ */
/* ----------- For Kari Morris ---------- */
/* -------------------------------------- */

/* deep red #A12025 */

body {font-family: Arial; margin:0; padding:0; color:#464646; font-size:15px;  width:100%; background-color: #fff;
background-image:url('bg/bg.png'); line-height:18px; overflow-x:hidden; font-family: sans-serif;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
img {margin: 0 auto; outline: 0; vertical-align: top; width: 98%}
img.tgwcs {max-width: 300px; border: 6px solid #fff; 
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;  
}
ul {padding:0; margin:0; margin-bottom: 1em;}
li {padding:0; margin:0; list-style:none; line-height: 150%;}
ul.disc li {margin-left: 30px; list-style-type:disc; font-size: 14px; }
p {margin:1em;}
p:last-of-type {margin-bottom: 2em;}
h1, h2, header p {font-family: 'Henny Penny', cursive; }
h1 {line-height: 120%; }
h2 {font-size: 1.2em; font-weight:normal;}
h3 {margin-top: 40px;  }
.text-right {text-align:right;}
.text-center {text-align:center; }
.hr-half {width: 50%; margin: 0 auto; }

/* ###### */
/* =LINKS */
a {color:#fff; text-decoration:none; margin: 0 0.3em;}
p > a {border-bottom: 1px dotted #fff;}
a:hover {text-decoration:underline; background-color:#64DEE9;}
a:focus {outline: thin dotted;}
:-moz-any-link:focus {outline: none;}
/* --- External Link Image --- */
a[href^='http'] {background:url('bg/external-link.gif') no-repeat right center; display:inline-block; padding-right: 20px;}
a:hover[href^='http'] {background-color:#64DEE9;}
#Branded_Frog a[href^='http'] {background: none; padding-right: 0;}
a[href$='.pdf'] {background:url('bg/pdf.gif') no-repeat right center; display:inline-block; padding-right: 20px; margin-left: 0;}
a.no-ic[href^='http'] {background: none; display: inline-block; padding-right: 0;}

/* ####### */
/* =LAYOUT */
#wrapper {margin: 0 auto; width:90%; padding: 1em; }
#container {position: relative; margin: 0 0 0 10%; width: 60%;  padding: 0.5em 0.5em 0; background-color: #64DEE9 /*#2CD1FF*/; background-image:url('bg/wr-bg.png'); background-repeat:repeat; z-index: 10;
-webkit-box-shadow: 0 1px 10px #4C0003; 
-moz-box-shadow: 0 1px 10px #4C0003;
box-shadow: 0 1px 10px #4C0003; 
-webkit-border-radius: 5px;
-moz-border-radius:5px;
border-radius: 5px;
}

main {position: relative; display: inline-block; width: 100%; padding:0;}

section {width: 98%; margin: 1%; padding: 1em; color: #464646; background-color: rgba(249,249,249, 0.80); font-family: 'Anonymous Pro', sans-serif;
-webkit-border-radius:10px; /* Safari */
-moz-border-radius:10px; /* Firefox 3.6 and earlier */   
border-radius:10px;}
section a:link, section a:visited, section a:hover, section a:active {color: #464646; text-decoration:none; border-bottom: 1px dotted #464646; }
section.view {background-color: #000; color:#e9e9e9;}
section.head {margin-top: 1.5em; }
section.view h2 {font-family: Times, "Times New Roman", Georgia, serif; margin-bottom: 0.5em;}
section.view h2.main, section h2.title {font-family: 'Henny Penny', cursive; font-size: 2em; margin-top: -0.4em; margin-bottom: 0.2em;}

section.view p {margin-bottom: 1.5em;}
section.view a {color: #fff; }
section.view iframe {width: 100%; }
section:nth-of-type(2n+1) {clear:left; }
.audio {margin: 2em auto; width: 60%; border: 2px solid #fff; padding: auto; }
.clear {font-size:0; clear:both; height:0;}
section #backer {float: right; width: 200px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg); }
section>article {marging: 0 0 2em;}
article#octopus {width: 100%; margin: 0 auto; padding: 0 0.5em 0 0;}
article#octopus a {width:100%; }
article#octopus iframe {
    width: 100%;
    border: 10px solid #FFF; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px; 
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 56, 0.18);
    -moz-box-shadow:    0px 5px 5px 0px rgba(0, 0, 56, 0.18);
    box-shadow:         0px 5px 5px 0px rgba(0, 0, 56, 0.18);
}

/* ####### */
/* =HEADER */
header {margin: 0 auto; width: 100%;  height: 265px;  padding: 0.5em; background-color: transparent; /*#2CD1FF*/;}
a.header {margin: 0; padding: 0; text-decoration:none;}
a.header:hover {text-decoration:none; }
header #logo {float: left; width: 170px; margin-right: 2em; border: none; 
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  transform: rotate(-3deg); 
}
header #logo img {
  -webkit-box-shadow: 0 0 10px #aaa; 
  -moz-box-shadow: 0 0 10px #aaa;
  box-shadow: 0 0 10px #aaa; 
}
header h1, header p {color: #A12025; letter-spacing: 2px; text-shadow:1px 1px 1px #5D5D5D; text-align:center;}
header h1 {font-size: 4em; margin-top: 1em;}
header p {font-size: 1.8em; font-weight:bold; font-family: 'Bad Script', cursive;}

/* ########### */
/* =NAVIGATION */
nav {float: left; position: absolute; top: 140px; left: 67%; height: auto; list-style-type: none;}
nav li{background: #A12025; float: left; clear: both; margin: 10px 0; font-family: sans-serif; font-size: 0.9em; font-family: 'Bad Script', cursive;
  -webkit-border-radius: 0 15px 15px 0;
  -moz-border-radius: 0 15px 15px 0;
  border-radius: 0 15px 15px 0; 
  -webkit-box-shadow: 0 2px 10px #4C0003; 
  -moz-box-shadow: 0 2px 10px #4C0003;
  box-shadow: 0 2px 10px #4C0003;  
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  transform: rotate(2deg);  
}
nav li a {color: #fff; text-decoration: none; font-weight: bold; }
nav li a:hover {color: #fff; text-decoration:none; background-color:transparent;}
nav li a:hover:before {content:' <';}
nav li a{display: block; padding: 8px 15px;}
nav li a.current:before {content:' < ';}



.backtop {width:25px; height:25px; display:block; position:relative; margin-left: 95%; margin-top: -1.5em; padding-left: 0.1em; color:#fff; font-size: 1.5em;}
.backtop a {text-decoration:none; color: #fff;}
.block a:hover {text-decoration:none; color: #A12025;}
.block {margin-top: 0;  }


/* ####### */
/* =FOOTER */
footer {margin: 2em auto; height: 400px; background-color: transparent; /*#2CD1FF*/; padding:0.5em; border-top: 3px dotted rgba(249,249,249, 0.80);}
footer section {position: absolute; background:transparent; height: 200px; margin-top: 0; border: 0; z-index: 10; color: #fff; font-size: 110%; text-shadow: 2px 1px 2px #333333;}
footer h2 {font-size: 1.3em;}
footer section a:link {color: #fff; border-bottom: 2px dotted #fff;}
footer #phantom {float: right; margin-right: 1em; width: 170px; height: 254px; background-image:url('bg/footer-bg.png'); background-repeat:no-repeat; 
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg); }


/* ######## */
/* =GALLERY */
.galleria{ width: 100%; height: 500px; background: #000 }



@media only screen and (min-width: 1021px) and (max-width: 1060px)
{
header h1 {font-size: 3.5em;}
}
@media only screen and (min-width: 601px) and (max-width: 1020px)
{
#wrapper {margin: 0 auto; width:100%; padding: 1em;}
container {width: 100%;  }
nav {left: 69%; }
header h1 {font-size: 3em;}
}
@media only screen and (min-width: 701px) and (max-width: 840px)
{
header h1 {font-size: 2.5em;}
#wrapper {margin: 0 auto; width:100%; padding: 1em;}
#container {margin: 0 auto; left: -5em; width: 75%;}
nav {left: 75%; }
}
@media only screen and (min-width: 581px) and (max-width: 700px)
{
nav {position: static;  top: 5px; width: 560px; height: 60px; list-style-type: none;}
nav li {clear:none; width: 135px; text-align:center; margin: 1px; 0; padding: 1px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}

nav li a:hover:before {content:none;}
nav li a.current:before {content:none;}
nav li a:hover {text-decoration: underline; }
#wrapper {margin: 0 auto; width:100%; padding: 1em;}
#container {margin: 0 auto; margin-top: 90px; width: 100%;}
header h1 {font-size: 3em;}
}
@media only screen and (min-width: 250px) and (max-width: 580px)
{
nav {position: static;  top: 5px; width: 500px; height: 100px; list-style-type: none;}
nav li {clear:none; width: 135px; text-align:center; margin: 1px; 0; padding: 1px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}

nav li a:hover:before {content:none;}
nav li a.current:before {content:none;}
nav li a:hover {text-decoration: underline; }
#wrapper {margin: 0 auto; width:100%; padding: 1em;}
#container {margin: 0 auto; margin-top: 140px; width: 100%;}
header h1 {font-size: 2.5em;}
}

/* ############## */
/* =MEDIA QUERIES */
@media only screen and (min-width: 441px) and (max-width: 580px)
{
header h1 {font-size: 2em;}
}
@media only screen and (min-width: 301px) and (max-width: 440px)
{
nav {position: static;  top: 5px; width: 300px; height: 150px; list-style-type: none;}
nav li {clear:none; width: 120px; text-align:center; margin: 1px; 0; padding: 1px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}
nav li a:hover:before {content:none;}
nav li a.current:before {content:none;}
nav li a:hover {text-decoration: underline; }
#wrapper {margin: 0 auto; width:100%; padding: 1em;}
#container {margin: 0 auto; margin-top: 170px; width: 100%;}
header {height: 370px;}
header #logo {margin-left: 2em; }
header h1 {font-size: 2.5em; margin-top: 7em; }
header p {font-size: 1.5em; }
}
@media only screen and (max-width: 300px)
{
nav {position: static;  top: 2px; width: 300px; height: 150px; list-style-type: none;}
nav li {clear:none; width: 116px; text-align:center; margin: 1px; padding: 0.8px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}

nav li a:hover:before {content:none;}
nav li a.current:before {content:none;}
nav li a:hover {text-decoration: underline; }
#wrapper {margin: 0 auto; width:100%; padding: 0.3em;}
#container {margin: 0 auto; margin-top: 170px; width: 98%;}
header {height: 370px;}
header #logo {margin-left: 1em; }
header h1 {font-size: 2em; margin-top: 9em; }
header p {font-size: 1.2em; }
}

/*@media only screen and (min-width: 901px) and (max-width: 1048px)
{
section {width: 80%; margin: 1% 8% 1% 8%;}
}
@media only screen and (min-width: 680px) and (max-width: 900px)
{
section {width: 90%; margin: 1% 3% 1% 3%;}
}
@media only screen and (min-width: 561px) and (max-width: 680px)
{
header {height: 380px; }
header h1 {clear: left; float: left; margin-top: 0.5em; }
header p {clear: left; float: left; margin-top: -0.4em; margin-left: 0;}
nav {margin-top: -20em; width: 250px;}
nav li {margin-bottom: 1em; }
section {clear: left; width: 100%; margin: 1% 0;}
}
@media only screen and (min-width: 441px) and (max-width: 560px)
{
header {height: 380px; }
header h1 {clear: left; float: left; margin-top: 0.5em; }
header p {clear: left; float: left; margin-top: -0.4em; margin-left: 0;}
nav {margin-top: -20em;  margin-right: 1.5em; width: 160px;}
nav li {margin-bottom: 1em; }
section {clear: left; width: 100%; margin: 1% 0;}
}
@media only screen and (min-width: 401px) and (max-width: 440px)
{
header {height: 380px; }
header h1 {clear: left; float: left; margin-top: 0.5em; }
header p {clear: left; float: left; margin-top: -0.4em; margin-left: 0;}
nav {margin-top: -20em;  margin-right: 0; width: 120px;}
nav li {margin-bottom: 1em; width: 80px;}
section {clear: left; width: 100%; margin: 1% 0;}
}
@media only screen and (min-width: 361px) and (max-width: 400px)
{
header {float: left; width: 100%; height: 420px; }
header h1 {clear: left; float: left; margin-top: 0.1em; width: 60%; line-height:80%;}
header p {clear: left; float: left; margin-top: -1em; margin-left: 0;}
nav {margin-top: -24em;  margin-right: 0.3em; width: 90px;}
nav li {margin-bottom: 1em; }
section {clear: left; width: 100%; margin: 1% 0;}
}
@media only screen and (min-width: 321px) and (max-width: 360px)
{
header {float: left; width: 100%; height: 520px; }
header #logo {margin-top: 6em; }
header h1 {clear: left; float: left; margin-top: 0.1em; width: 60%; line-height:80%;}
header p {clear: left; float: left; margin-top: -1em; margin-left: 0;}
nav {margin-top: -33em; margin-bottom: 2em; width: 200px;}
nav li {margin-bottom: 1em; }
section {clear: left; width: 100%; margin: 1% 0;}
}
@media only screen and (max-width: 320px)
{
header {float: left; width: 100%; height: 520px; }
header #logo {margin-top: 6em; }
header h1 {clear: left; float: left; margin-top: 0.1em; width: 60%; line-height:80%;}
header p {clear: left; float: left; margin-top: -1em; margin-left: 0;}
nav {margin-top: -33em;  margin-right: 0.1em; margin-bottom: 1em;}
nav li {margin-bottom: 1em; }
section {clear: left; width: 100%; margin: 1% 0;}
}*/

/* ############ */
/* Do not alter */
#Branded_Frog {position: relative; display: inline-block; right: 0; bottpm: 0; width: 100%; padding: 0.5em 0.5em 0; color: #242424; z-index: 10; font-size: 70%; line-height: 1.8em;}
#Branded_Frog .Branded_Frog_copy {float:right; margin-right: 2em;}
#Branded_Frog a {color:#fffefe; text-decoration:none; border-bottom: 1px dotted #fff;}
#Branded_Frog img {width: 22px; height: 17px; border:0; }
/* ### END ### */
/* ########### */