@charset "UTF-8";

@font-face {font-family: brandonBld; src: url(fonts/brandon_bld.woff);}
@font-face {font-family: brandonLit; src: url(fonts/brandon_lit.woff);}
@font-face {font-family: brandonMed; src: url(fonts/brandon_med.woff);}
@font-face {font-family: brandonReg; src: url(fonts/brandon_reg.woff);}

html, body {margin: 0; padding: 0;}
body {background-color: #ffffff}
body > header {background-color: #445566; width:100%; height: 45px; margin: 0; padding: 0;}
body > Header > h1 > a {color:#FFFFFF; text-decoration: none;}
body > Header > h1 > a:link {color:#FFFFFF; }
body > Header > h1 > a:hover {color:#FFFFFF;}
body > Header > h1 > a:visited {color:#FFFFFF;}


dl {font-family: BrandonReg; font-size: 18px;}
dt {font-family: BrandonBld; margin-top: 18px;}
dd {font-family: BrandonLit; margin-bottom: 0px;}

nav, nav ul {margin: 0; padding: 0;}
nav {position: relative;}
nav ul {position: absolute; right: 20px; margin: 12px 0 0 0; list-style: none;}
nav > ul > li {color: #FFFFFF; font-family: brandonMed; font-size: 14px; margin:0; padding:0;}
nav > ul > li > a {color:#FFFFFF; text-decoration: none;}
nav > ul > li > a:hover {text-decoration: underline;}

article {margin:0; padding:0;}
article > header {background-color: #8bbceb; margin:0; padding: 20px; height: 550px; position: relative;}
article#epk > header {height: 300px;}
article > header > h1 {font-size: 72px; text-align: center; color:#fff; font-family: brandonMed; margin:0 auto; padding:0; position: absolute; left:0; right:0;}
article#epk > header > h1 {font-size: 200px;}
article > header > h2 {font-size: 54px; text-align: center; color:#fff; font-family: brandonReg; margin:0; padding:0; position: absolute; left:0; right:0; bottom: 220px;}
article > header > h3 {font-size: 22px; text-align: center; color:#fff; font-family: brandonLit; margin:0; padding:0; position: absolute; left:0; right:0; bottom: 160px;}
article > header > img {display:block; margin: 0 auto;}
article > section {background-color:#99ccff; margin: 20px auto 20px auto; padding: 0; width: 800px; height: 450px; position: relative;}
article#epk > section {background-color: #ffffff;}

body > header > h1 {margin:5px 0 20px 15px; padding:0; position: absolute; color: #FFFFFF; font-family: brandonMed; font-size: 28px; }

section h2 {margin:0; padding:0; position: absolute; color: #FFFFFF; font-family: brandonReg; font-size: 54px; }
section h3 {margin:0; padding:0; position: absolute; color: #FFFFFF; font-family: brandonLit; font-size: 22px; line-height: 35px;}
section blockquote {margin:0; padding: 20px 20px 20px 35px; position: absolute; color: #336699; font-family: brandonReg; font-size: 22px; line-height: 32px; background-color: #fff; background-color: rgba(255, 255, 255, 0.3); border-radius: 25px; }
section blockquote:before {content:"\201C"; margin-left: -9px;}
section blockquote:after {content: "\201D";}
section p {margin:0; padding:0; position: absolute; color: #000000; font-family: brandonLit; font-size: 18px; line-height: 32px;}
section li {color: #000000; font-family: brandonLit; font-size: 18px; line-height: 32px;}
section a {color: #6699cc;}
section a:link {text-decoration: none;}
section a:hover{text-decoration: underline;}

section#mow {background-image: url(img/beatibot-grass-cutter.JPG); background-size: contain; margin-top:-100px;}
section#mow h2 {top: 270px; left: 48px; }
section#mow h3 {top: 345px; left: 50px; }
section#mow blockquote {top: 40px; right: 50px; width:145px; color:#000000; background-color: #fff; background-color: rgba(255, 255, 255, 0.5);}

section#pick {background-image: url(img/beatibot-tomato-picking-crate.JPG); background-size: contain;}
section#pick h2 {top: 40px; right: 45px; text-align: right;}
section#pick h3 {top: 120px; right: 60px; text-align: right; width:360px;}
section#pick blockquote {top: 280px; right: 50px; width:145px;}

section#cook {background-image: url(img/beatibot-cooking.JPG); background-size: contain;}
section#cook h2 {top: 40px; left: 50px; }
section#cook h3 {top: 120px; left: 50px; }
section#cook blockquote {bottom: 100px; left: 50px; width:145px;}

section#woke {background-image: url(img/beatibot-gong.JPG); background-size: contain;}
section#woke h2 {top: 40px; right: 50px; }
section#woke h3 {top: 120px; right: 50px; text-align: right; }
section#woke blockquote {bottom: 100px; right: 50px; width:195px; text-align: right;}

section#pics {background-image: url(img/beatibot-selfie.jpg); background-size: contain;}
section#pics h2 {top: 35px; left: 48px; }
section#pics h3 {top: 120px; left: 50px;}
section#pics blockquote {bottom: 70px; left: 50px; width:145px;}

article#epk section {height:auto; margin-bottom:36px;}
article#epk section h2 {position:relative; color:#000000; font-size: 42px; margin-top:50px;}
article#epk section p  {position: relative; color:#000000;}


.imgFrame { border-style: solid; border-width: 1px; border-color: #CCCCCC; border-radius: 5px; margin: 0 20px 20px 0; padding: 5px; }