/*
Name: Steve Swinburne.com
Author: Jon Packman
Author URI: http://satellite7.com
*/
/* Global reset */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, legend, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
fieldset, img { border:0 }
ol, ul, li { list-style:none }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */
* a { position:relative; outline:none; text-decoration: none;}
html {font:  100% Arial, sans-serif; max-width: 1920px; margin: 0 auto; }
body { background: #fff url("images/gradbg.png") repeat-x 0 0; width: 100%; height: 100%}
div { position:relative }
br.clearMe{ clear:both; display:block; height:1px; margin:-1px 0 0 0 }
.alignright {float: right !important}
.alignleft {float: left !important}
.noMargin {margin: 0 !important}
.littleMargin {margin: 0 0 5px !important}

/*TYPOGRAPHY */
p {font-size: 14px;  }
h1	{font-size: 25px;  color: #476c85}
h2 	{font-size: 20px; margin: 0 0 5px; color: #476c85}
h3 	{font-size: 18px; margin: 0 0 5px; color: #476c85 }
h4 	{font-size: 16px; margin: 0 0 5px; color: #476c85}
h5	{font-size: 15px; margin: 0 0 5px; color: #476c85 }

a:hover {color: #000}

/* LAYOUT */

#wrapper{background: url("images/osbg7.jpg") no-repeat center 0; width: 100%; min-width: 1000px; max-width: 1920px; margin: 0 auto; min-height: 1200px; overflow: hidden  }
#container, #footer {width: 1000px; margin: 0 auto; }
#header{height: 200px;  z-index: 990; margin: 0 150px}
.section {color: #7fb9de; z-index: 991 }
.article {float: left; width: 420px;  z-index: 992}
.aside {float: left; width: 290px; z-index: 993}
.action {position: absolute; right: 0; top: 0; z-index: 994}
#footer{position: absolute; top: 845px; left: 295px; width: 420px; min-width: 420px }
#tab-glossary.article, #tab-websites.article {width: 900px; padding: 0 0 0 87px }
.animatethesoup span.seabase {background: url("images/article-base.png") no-repeat center bottom; position: absolute; top: 371px; left: 290px; width: 420px; height: 55px; z-index: 993}
#explore.animatethesoup  span.seabase {top: 386px;}
#videos .article {width: 522px}
#videos .aside {width: 199px; margin-left: 40px }


/*HEADER */
h1, h1 a, h1 a:hover {width: 400px; height: 104px; margin: 0 auto; color: #a7d4ed; position: relative  }
h1 a span{width: 400px; height: 104px; position: absolute; top: 0; left: 0; background: url("images/os-title.png") no-repeat 0 0; }

/* NAVIGATION */
.nav  { text-indent: -9999px; width: 644px; height: 60px; margin: 0 auto 22px auto; position: relative; z-index: 9997}
.nav li a {background: url("images/os-main-menu.png") no-repeat 0 0; position: absolute; left: 0; top: 0; height: 60px; z-index: 999}
.nav li a:hover {z-index: 9998}
.nav li.home a {background-position: 0 0; width: 116px; }
.nav li.news a {background-position: -102px 0; width: 96px; left: 102px;}
.nav li.videos a {background-position: -189px 0; width: 111px; left: 189px;}
.nav li.author a {background-position: -295px 0; width: 107px; left: 295px;}
.nav li.illustrator a {background-position: -395px 0; width: 135px; left: 395px;}
.nav li.explore a {background-position: -523px 0; width: 122px; left: 523px; }
.nav li.home a:hover {background-position: 0 -126px; }
.nav li.news a:hover {background-position: -102px -63px;}
.nav li.videos a:hover {background-position: -189px -126px; }
.nav li.author a:hover {background-position: -295px -63px; }
.nav li.illustrator a:hover {background-position: -395px -126px; }
.nav li.explore a:hover {background-position: -523px -63px; }
body#home .nav li.home a {background: url("images/on-home.png") no-repeat 0px -4px; z-index: 9999 }
body#news .nav li.news a {background: url("images/on-news.png") no-repeat -1px -4px; z-index: 9999 }
body#videos .nav li.videos a {background: url("images/on-videos.png") no-repeat -1px -3px; z-index: 9999 }
body#author .nav li.author a {background: url("images/on-author.png") no-repeat 0px -3px; z-index: 9999  }
body#illustrator .nav li.illustrator a {background: url("images/on-illustrator.png") no-repeat -2px -3px; z-index: 9999 }
body#explore .nav li.explore a {background: url("images/on-explore.png") no-repeat -1px -3px; z-index: 9999 }



/* MAIN CONTENT */
body#home .article  {text-align: center}
.inner {background: url("images/light-trans.png") repeat 0 0; border: 1px solid #d2e6f3; }
.article .inner {padding: 20px; color: #284355; text-shadow: #dbdcde 0px 1px 0px  }
body#news .article {background: url("images/light-trans.png") repeat 0 0; border: 1px solid #d2e6f3; height: 328px; overflow: auto;width: 378px; padding: 20px;  padding-bottom: 40px;   color: #284355; text-shadow: #dbdcde 0px 1px 0px }
.aside .inner {padding: 5px; border: 1px solid #d2e6f3;}
#tab-books .inner {padding: 12px 20px; margin: 0 0 4px  }
.article p {line-height: 1.5; padding: 0 0 10px}
.article p:last-child {padding: 0 }
#tab-books .article  p {padding: 0; font-size: 13px}
body#news .article {font-size: 13px}
body#news .article  p {padding: 0 0 5px; font-size: 13px}
#tab-books .article em { font-style: normal;  font-size: 16px}
p#credit { text-align: center; height: 21px; margin: 15px auto 12px auto; position: relative }
p#credit span{position: absolute; top: 0; left: 50%;  margin-left: -213px; width: 425px; height: 21px; background: url("images/by.jpg") no-repeat 0 0; }
body#news p#credit span{ margin-left: -50px; width: 100px; height: 21px; background: url("images/news.jpg") no-repeat 0 0; }
body#videos p#credit span{ margin-left: -103px; width: 207px; height: 21px; background: url("images/videos.jpg") no-repeat 0 0; }
body#author p#credit span{ margin-left: -89px; width: 187px; height: 21px; background: url("images/author-ss.jpg") no-repeat 0 0; }
body#illustrator p#credit span{ margin-left: -95px; width: 191px; height: 21px; background: url("images/illustrator-mp.jpg") no-repeat 0 0; }
object {background: url("images/dark-trans2.png") repeat 0 0; border: 1px solid #fff; display: block; }
#home object { border: 1px solid #fff; margin-left: 10px}

a#dive-in {width: 227px; height: 76px; margin: 0 auto 20px auto; display: block; position: relative; color: #82badf }
a#dive-in span {position: absolute; top: 0; left: 0; width: 225px; height: 74px;  background: url("images/dive-in.png") no-repeat 0 0;}
a#dive-in:hover span {background-position: 0 -74px;}


ul#explore-nav {margin: 0 0 15px 297px; border-top: 10px solid #82badf; width: 408px; height: 36px; position: relative; background: url("images/explore-nav.png") no-repeat 0 -72px;}
ul#explore-nav li {float: left; height: 36px;  width: auto; position: relative}
ul#explore-nav li a {position: absolute; color: #79b6de; height: 36px; top: 0; left: 0; display: block}
ul#explore-nav li a span{position: absolute; top: 0; left: 0;  display: block; height: 36px; background: url("images/explore-nav.png") no-repeat 0 0; cursor: pointer}
ul#explore-nav li.about, ul#explore-nav li.about a span{background-position: 0 0; width: 87px; }
ul#explore-nav li.glossary, ul#explore-nav li.glossary a span{background-position: -87px 0; width: 117px;}
ul#explore-nav li.books, ul#explore-nav li.books a span {background-position: -204px 0; width: 96px; }
ul#explore-nav li.websites, ul#explore-nav li.websites a span {background-position: -300px 0; width: 108px;}
ul#explore-nav li.about a:hover span{background-position: 0 -36px; }
ul#explore-nav li.glossary a:hover span{background-position: -87px -36px;}
ul#explore-nav li.books a:hover span  {background-position: -204px -36px; }
ul#explore-nav li.websites a:hover span {background-position: -300px -36px;}
ul#explore-nav li.about.active  a span{background-position: 0 -72px; }
ul#explore-nav li.glossary.active  a span{background-position: -87px -72px;}
ul#explore-nav li.books.active  a span  {background-position: -204px -72px; }
ul#explore-nav li.websites.active  a span  {background-position: -300px -72px;}


dl.list-gloss, dl.sites {float: left; width: 192px; margin-right: 20px; }
dl.list-gloss dt {font-weight: bold; color: #39739f; text-shadow: #fff 0px 1px 0px; background: url("images/light-trans.png") repeat 0 0; border: 1px solid #d2e6f3; padding: 3px 5px; font-size: 14px; position: relative; margin: 0 0 2px }
dl.list-gloss dt a{color: #ddeffa; position: absolute; right: 5%; top: 0px; cursor: pointer; display: block; z-index: 9999; font-size: 18px; font-weight: bold; text-shadow: #36759f 0px 0px 1px; width: 95%; text-align: right; }
dl.list-gloss dt:hover {color: #4d84ae}
dl.list-gloss dt a:hover {color: #4d84ae; text-shadow: #fff 0px 0px 1px; }
dl.list-gloss dt.active a{background: url("images/arrow-up.pg") no-repeat 0 0; }
dl.list-gloss dd {color: #284355; text-shadow: #aad1ea 0px 1px 0px; background: #97c6e5; padding: 5px; font-size: 12px; margin: 0 0 4px  }
a.all-trigger{font-size: 20px;position: absolute; left: 38px; width: 200px; top: -38px; font-weight: bold; color: #39739f; text-shadow: #fff 0px 0px 1px; }
a.all-trigger:hover{color: #4d84ae}
a.all-trigger span {font-size: 70px; color: #a7cfe8; text-shadow: #36759f 0px 0px 1px; top: 20px; left: -28px; position: absolute; width: 50px;}

dl.sites dt{color: #fff; background: url("images/website-titles-bg.png") no-repeat 0 0; font-size: 13px; font-weight: bold; padding: 13px 15px 15px 15px; margin: 0 auto 4px auto; max-height: 42px; text-shadow: #39739f 0px 0px 1px; }
dl.sites dt#rocky {background-position: 0 4px; width: 118px}
dl.sites dt#monterey {background-position: -148px 0px; width: 130px}
dl.sites dt#secrets {background-position: -308px 0; width: 126px}
dl.sites dt#habitats {background-position: -464px 0; width: 126px}
a:hover dl.sites dt{color: #39739f; text-shadow: #fff 0px 0px 1px; }
a:hover dl.sites dt#rocky {background-position: 0 -66px; width: 118px; }
a:hover dl.sites dt#monterey {background-position: -148px -70px; width: 130px;  }
a:hover dl.sites dt#secrets {background-position: -308px -70px; width: 126px; }
a:hover dl.sites dt#habitats {background-position: -464px -70px; width: 126px;  }
dl.sites dd { color: #284355; text-shadow: #dbdcde 0px 1px 0px;  font-size: 13px; margin: 4px 0px; line-height: 1.4}
dl.sites dd.inner {padding: 15px}



/* ASIDES */
.aside a {color: #a7d4ed; }
.aside h2{color: #7fb9de; }
body#home .aside {margin: 20px 30px 0 45px; width: 215px; height: 167px; overflow: hidden;}
body#home .aside span{position: absolute; top: 0; left: 0; width: 215px; height: 167px; background: url("images/soup-that-bites.jpg") no-repeat 0 0;}
body#author .aside, body#illustrator .aside {margin: -25px 30px 0 68px; width: 192px; height: 270px; overflow: hidden;}
body#author .aside span, body#illustrator .aside span{position: absolute; top: 0; left: 0; width: 192px; height: 69px; background: url("images/visit-ss-site.jpg") no-repeat 0 0;}
body#illustrator .aside span{ background: url("images/visit-mp-site.jpg") no-repeat 0 0;}
body#author .aside a:hover span, body#illustrator .aside a:hover span{background-position: 0 -69px;}
.aside img {float: left; margin-left: 22px; border: 1px solid #000}
body#explore .aside {margin: 38px 35px 0 60px; width: 195px; height: 171px; overflow: hidden;}
body#explore .aside span{position: absolute; top: 0; left: 0; width: 195px; height: 171px; background: url("images/rachel-quote.jpg") no-repeat 0 0;}
body#explore #tab-books .aside {height: 255px;margin: 15px 35px 0 60px; }
body#explore #tab-books .aside span{position: absolute; top: 0; left: 0; width: 196px; height: 255px; background: url("images/hairy-doris.png") no-repeat 0 0;}
body#explore .aside h3 {color: #7fb9de}
body#news .aside h2, body#videos .aside a {background: #72abd3; border: 1px solid #fff;  color: #fff; padding: 5px; font-size: 15px; margin: 0 auto 10px auto; width: 200px; z-index: 9999 }
body#news .aside h2:hover, body#videos .aside a:hover {cursor: pointer; background: #5b8fb3; }
body#news .aside h2.active {background: url("images/light-trans.png") repeat 0 0; border: 1px solid #d2e6f3; color: #476c85}
body#videos .aside h2 {font-weight: bold; color: #39739f; text-shadow: #fff 0px 0px 1px; width: 180px; font-size: 18px; margin-bottom: 10px}
body#videos .aside a {font-size: 16px; font-weight: bold }

/* ACTION STATIONS (book positioning) */
.action {width: 220px; height: 339px; top: 120px; right: 30px;}
#explore .action, #videos .action {z-index: 990}
.action a, .action a:hover {color: #a7d4ed; font-size: 12px; position:absolute; top: 0px; right: -19px; cursor: pointer}
.action a span#whole-book {position: absolute; width: 220px; height: 339px; top: 0; right: 0; background: url("images/os-cover-st3.png") no-repeat right 0;}
.animatethesoup .action  a #book-label {position: absolute; width: 136px; height: 203px; top: 5px; right: -65px; background: url("images/label.png") no-repeat 0 0; -o-transform-origin: 130px 40px;  -moz-transform-origin: 56px 10px; -webkit-transform-origin: 56px 10px;}
.action a#buy-book { -o-transform-origin: bottom left; -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left}
#news .action a#buy-book {-moz-transform-origin: top right; -webkit-transform-origin: top right; -o-transform-origin: top right}

span#book-overlay {background: url("images/bk-overlay.png") no-repeat right bottom; position: absolute; right: -32px; top: 392px; width:174px; height: 80px; z-index: 9999}

/* FOOTER */
#footer p {font-size: 14px; color: #fff; font-weight: bold}
#footer p a{color: #fff; text-decoration: underline; z-index: 9999}
#footer p span{position: absolute; right: 20px; top: 150px}

/* WILDLIFE */

#tl-weed {width: 250px; height: 65px; position: absolute; left: 0; top: 40px; background: url("images/tl-weed.png") no-repeat 0 0;}
.bubbles {position: absolute; bottom: -300px; left: 10%; height: 300px; width: 200px; background: url("images/bubbles.png") no-repeat 0 0; z-index: 99999}
.single-bubble {bottom: -300px; left: 12%; height: 121px; width: 76px; background: url("images/single-bubble.png") no-repeat 0 0;}
.double-bubble { bottom: -300px; left: 9%; height: 121px; width: 76px; background: url("images/double-bubble.png") no-repeat 0 0;}
.little-bubbles {bottom: -450px; left: 11%; height: 121px; width: 76px; background: url("images/little-bubbles.png") no-repeat 0 0;}
.single-bubble-right {bottom: -300px; left: 82%; height: 121px; width: 76px; background: url("images/single-bubble.png") no-repeat 0 0;}
.double-bubble-right  { bottom: -300px; left: 79%; height: 121px; width: 76px; background: url("images/double-bubble.png") no-repeat 0 0;}
.little-bubbles-right  {bottom: -450px; left: 81%; height: 121px; width: 76px; background: url("images/little-bubbles.png") no-repeat 0 0;}

#shrimp-wrap, #shrimp, #shrimp-clone {position: absolute; top: 270px; right: 30%; overflow: hidden; width: 60%; height: 84px; background: url("images/go-shrimp-go2.png") no-repeat 0 0; z-index: 9998; min-width: 800px}
#shrimp-wrap {background: url("images/shrimpbg2.png") no-repeat 0 0; -o-transform-origin: 130px 40px; -moz-transform-origin: 130px 40px; -webkit-transform-origin: 130px 40px; }
#shrimp {top: 0;  overflow: hidden; width: 121px; height: 84px; right: 0; left: 0; min-width: 121px}
#shrimp-clone{background-position: -121px 0; top: 0; right: 0; left: 0; width: 121px; height: 84px;  min-width: 121px }
.animatethesoup #shrimp-wrap {top: 400px; right: 50%}
#author #shrimp-wrap, #illustrator #shrimp-wrap, #explore #shrimp-wrap, #videos #shrimp-wrap, #news #shrimp-wrap {width: 121px; min-width: 121px; left: 0}

#dorris {position: absolute; top: 605px; left: 0; overflow: hidden; width: 4%; height: 132px; background: url("images/dorris.gif") no-repeat right 5%;}

#bot-left {position: absolute; bottom: 0; left: 0; width: 422px; height: 256px; background: url("images/botleft-weed2.png") no-repeat 0 0; z-index: 999999 }

#arms{position: absolute; bottom: 0; left: 0; width: 350px; height: 345px; background: url("images/arms-iso.png") no-repeat 0 0; z-index: 999998}

#shrimp-solo-wrap, #shrimp-solo, #shrimp-solo-clone {position: absolute; top: 960px; left: 26%; width: 224px; height: 110px; background: url("images/go-solo-shrimp.png") no-repeat 0 0; z-index: 9999}
#shrimp-solo-wrap {background: url("images/solo-shrimpbg.png") no-repeat 0 0; }
#shrimp-solo {top: 0; left: 0;  }
#shrimp-solo-clone {top: 0; left: 0; background-position: -224px 0; }
.animatethesoup #shrimp-solo-wrap {left: 1400px; top: 1070px}

#mussells {position: absolute; top: 670px; left: 50%; margin-left: -500px; overflow: hidden; width: 1000px; height: 180px; }
#mussells:hover {background: url("images/mussell-eyes.png") no-repeat 256px 0; }

#clams {position: absolute;  top: 935px; left: 50%; width: 550px; height: 200px;  }
#clamshut {position: absolute; top: 0; right: 29px; width: 173px; height: 64px; background: url("images/clam-shut.jpg") no-repeat 0 -100px; }
#clam1-eyes {position: absolute; top: 119px; left: 285px; width: 25px; height: 9px; background: url("images/clam1-left-eyes.jpg") no-repeat 0 0; }
#clam2-eyes  {position: absolute; top: 151px; right: 71px; width: 28px; height: 16px; background: url("images/clam2-left-eyes.jpg") no-repeat 0 0; }


#snail {position: absolute; top: 546px; left: 75%; width: 121px; height: 74px; background: url("images/snail-shell.png") no-repeat right 0; z-index: 1001}
#snail-head{position: absolute; top: 12px; right: 68px; width: 33px; height: 74px; background: url("images/snail-head.png") no-repeat 0 0; }


.animatethesoup #arms {bottom: -345px; left: -350px;  }
.animatethesoup #bot-right {position: fixed; bottom: -352px; right: -300px; z-index: 9999; width: 300px; overflow: hidden; height: 352px; background: url("images/crab2.gif") no-repeat right bottom; }