/* * Copyright 2008/2010, Oceans Aware, www.oceans-aware.org * * This file may not be used or (re)distributed for any other * purposes than a commercial deployment by Oceans. * No modifications may be made to this file by anyone, * except for individuals working for Oceans. * * File description: Oceans Aware web site styles * File Author: David Edwards */ /*standard padding definition*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 101%; vertical-align: baseline; background: transparent;} /*global styles*/ body {line-height: 1; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 100.1%; padding: 0; margin: 0; background: url(body.jpg) top center repeat-x #dfeefd;} a {text-decoration: none; background-position: top center;} a:hover {text-decoration: underline; background-position: center center; color: #000;} a:active {text-decoration: none; background-position: bottom center;} ol, ul {list-style: none;} :focus {outline: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse; border-spacing: 0;} .clr {float: none; clear: both; padding: 0; margin: 0; line-height: 0; font-size: 0;} .lf {float: left;} .rf {float: right;} .sep {background-color: #dfeefd; padding: 0; margin: 20px 0 0 0; height: 10px; width: 100%; border-top: 1px solid #8f2f7c;} a.a01 {background-image: url(a01.jpg); margin: 0; padding: 0; float: left; height: 350px; width: 232px; color: #333;} a.a01:hover {background-position: bottom center;} a.a01 span {display: none;} a.a02 {display: block; background-image: url(a03.jpg); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 20px; color: #333;} a.a02:hover {-moz-box-shadow: none; background-image: url(a03hover.jpg); background-repeat: no-repeat; background-position: center left; color: #bd7bb6; } a.a03 {display: block; background-image: url(a03.jpg); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 20px; color: #333;} a.a03:hover {-moz-box-shadow: none; background-image: url(a03hover.jpg); background-repeat: no-repeat; background-position: center left; } a.a04, a.a04:active {-moz-box-shadow: 0 0 5px #5e104a; display: block; color: #333; alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;} a.a04:hover {-moz-box-shadow: none; alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6;} a.aAd {display: block; width: 922px; height: 100px; padding: 0; margin: 0; -moz-box-shadow: 0 0 5px #5e104a; display: block; color: #333;} a.aAd:hover {-moz-box-shadow: 0 0 5px #fff; text-decoration: none;} ul.ul01 {width: 600px; padding: 0; margin: 0; color: #000; list-style: outside disc;} ul.ul01 li {float: none; width: 100%;} #mainContentWrap ul#ul02 {width: 600px; padding: 0 0 0 20px; color: black; float: none; margin: 0; color: #000; list-style: disc outside;} ul#ul02 li {float: none; width: 100%;} /*content styles*/ #bodyWrap {width: 100%; background: url(bodyWrap.jpg) no-repeat top center; padding: 0; margin: 0; height: auto;} #bodyWrap02 {width: 100%; background: url(bodyWrap02.jpg) repeat-x bottom center; padding: 0; margin: 0; height: auto;} #globalWrap {width: 956px; margin: 0 auto; padding: 0; background: #fff;} #accessMenu {background: #8f2f7c; padding: 10px 0; margin: 0 auto;} #accessMenu h4 {float: left; color: #fff; font-weight: normal; padding: 0 16px; margin: 0; font-size: 0.65em;} #accessMenu ul {float: right; list-style: none outside; color: #eee; padding: 0 16px; font-size: 0.65em;} #accessMenu li {display: inline; padding: 0 0 0 16px; margin: 0;} #accessMenu a {font-weight: bold; color: #fff;} #headerWrap {width: 898px; margin: 0 auto; padding: 0;} #headerWrap h3 {padding: 30px 0; margin: 0; float: left;} #headerWrap h3 span {display: none;} #headerWrap h3 a {background-image: url(headerH3A.jpg); height: 90px; width: 351px; float: left;} #headerRight {float: right; width: 500px; padding: 12px 0; margin: 0;} #headerWrap h4 {font-size: 0.75em; text-align: right; color: #8c3c78; padding: 20px 0 6px 0; margin: 0;} #headerWrap li {text-align: right; font-size: 0.7em; padding: 3px 0; margin: 0; color: #a77ca5;} #headerWrap li a {color: #a77ca5; font-weight: bold;} #headerWrap li a:hover {color: #000;} #menuWrap {width: 922px; background: url(menuWrap.jpg) repeat-x bottom center; border-bottom: 2px #bd7bb6 solid; padding: 0; margin: 0 auto;} #menuWrap ul {margin: 0; padding: 0; list-style: none; position: relative;} #menuWrap ul li { margin: 0; padding: 0; list-style: none; float: left; position: relative; } #menuWrap ul li:hover ul { display: block; } #menuWrap ul a {position: relative; display: block; font-size: 0.7em; padding: 10px 0; margin: 0; color: #555; text-decoration: none; width: 102px; text-align: center;} #menuWrap ul a.active {background: #eb9ae2 url(menuWrapUlAHover.jpg) repeat-x bottom center; color: #fff;} #menuWrap ul a:hover {background: #eb9ae2 url(menuWrapUlAHover.jpg) repeat-x bottom center; color: #fff;} #menuWrap ul ul { margin: 0; padding: 0; display: block; position: absolute; z-index: 99999; top: 100%; width: 250px; display: none; left: 0;} #menuWrap ul ul li {margin: 0; padding: 0 0 0 10px; float: none; position: relative; width: 250px; list-style: outside circle; display: block; background: #91598b; border-bottom: 1px solid #bd7bb6;} #menuWrap ul ul li a {display: block; text-align: left; width: 180px; color: #fff;} #menuWrap ul ul li a:hover {background: none; text-decoration: underline;} #menuWrap ul ul li:hover {background: #bf7cb7;} #menuWrap ul a:active {color: #000; background: #fff;} #breadWrap {width: 922px; margin: 0 auto;} #breadWrap p {font-size: 0.7em; padding: 12px 0; margin: 0; font-weight: normal; color: #555;} #breadWrap a {color: #8f2f7c;} #mainContentWrap {min-height: 430px; margin: 0; padding: 0;} #gallery {padding: 0 0 0 5px; margin: 0;} #gallery p {float: left; padding: 6px 9px; margin: 0;} .contact01 {} .contact01 input {border: 2px solid #ced3e2; padding: 5px; margin: 0;} .contact01 input:hover {background: #ced3e2; border: 2px solid #d97cd9;} .contact01 textarea {border: 2px solid #ced3e2; padding: 5px; margin: 0;} .contact01 textarea:hover {background: #ced3e2; border: 2px solid #d97cd9;} .row01 {width: 922px; margin: 0 auto; padding: 0;} .row01 h1 {font-weight: normal; padding: 16px 0; margin: 0; color: #444;} .row01b h2 {font-style: italic; font-weight: normal; padding: 16px 0 10px 0; margin: 0; color: #444;} .row01 h3 {font-weight: bold; padding: 4px 0; margin: 0; color: #444; font-size: 1em;} .row01 p {font-size: 0.75em; line-height: 1.6em; padding: 6px 0; margin: 0; color: #333;} .row01b {width: 922px; margin: 0 auto; padding: 0;} .row01b h1 {font-weight: normal; padding: 0 0 16px 0; margin: 0; color: #444;} .row01b h3 {font-weight: bold; padding: 4px 0; margin: 0; color: #444; font-size: 1em;} .row01b p {font-size: 0.75em; line-height: 1.6em; padding: 6px 0; margin: 0; color: #333;} .row02 {width: 956px; padding: 0 0 0 18px; margin: 0;} .row02 h1 {font-weight: normal; padding: 0 0 16px 0; margin: 0; color: #444;} .row02 h2 {font-weight: normal; padding: 16px 0 10px 0; margin: 0; color: #444;} .row02 h3 {font-weight: bold; padding: 14px 0; margin: 0; color: #444; font-size: 1em; font-style: italic;} .row02 h4 {font-weight: normal; padding: 4px 0; margin: 0; color: #444; font-size: 0.8em;} .row02 p {font-size: 0.75em; line-height: 1.6em; padding: 6px 0; margin: 0; color: #333;} .row03 {width: 956px; padding: 0 0 0 18px; margin: 0;} .row03 h1 {font-weight: normal; padding: 10px 10px 20px 0; margin: 0; color: #444;} .row03 h2 {font-weight: normal; padding: 0 10px 0 0; margin: 0; color: #444;} .row03 h3 {font-weight: bold; padding: 14px 0; margin: 0; color: #444; font-size: 1em; font-style: italic;} .row03 h4 {font-weight: normal; padding: 4px 0; margin: 0; color: #444; font-size: 0.8em;} .row03 p {font-size: 0.75em; line-height: 1.6em; padding: 6px 0; margin: 0; color: #333;} .col01 {width: 670px; float: left; padding: 0; margin: 0;} .col01 ul {list-style: circle outside; padding: 0 0 0 14px;} .col01 li {float: left; width: 305px; font-size: 0.7em; margin: 0; line-height: 1.7em; padding: 10px 10px 10px 0;} .col01 h3 {font-size: 0.7em; font-style: italic; padding: 12px 0 0 0; margin: 0;} #noul {width: 670px; float: left; padding: 0; margin: 0;} .col01 ul {list-style: circle outside; padding: 0 0 0 14px;} .col01 li {float: left; width: 325px; font-size: 0.7em; margin: 0; line-height: 1.7em; list-style: none outside; padding: 10px 10px 10px 0;} .col02 {width: 232px; float: right; padding: 0; margin: 0;} .col03 {width: 297px; float: left; padding: 0 14px 0 0; margin: 0;} .col03 ul {list-style: none outside; font-size: 0.7em; line-height: 1.7em; padding: 0 0 0 14px; margin: 0;} .col03 ul ul {list-style: none outside; font-size: 1em; line-height: 1em; padding: 0 0 0 14px; margin: 0;} .col03 li {padding: 8px 0;} .col03 li a {display: block; background-image: url(a03.jpg); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 20px; color: #333;} .col03 a:hover {-moz-box-shadow: none; background-image: url(a03hover.jpg); background-repeat: no-repeat; background-position: center left; } .col04 {width: 451px; float: left; padding: 0 14px 0 0; margin: 0;} .col04 ul {list-style: outside circle; font-size: 0.7em; line-height: 1.7em; padding: 0; margin: 0;} .col04 li {padding: 8px 0;} .col04 ul.needs {padding: 0 0 0 20px;} .contact01 input, .contact01 textarea {width: 451px;} .col05 {width: 170px; float: left; padding: 0 14px 0 0; margin: 0;} .col06 {width: 451px; float: left; padding: 0 14px 0 0; margin: 0;} .col06 ul {list-style: outside circle; font-size: 0.7em; line-height: 1.7em; padding: 0 0 0 14px; margin: 0;} .col06 li {padding: 8px 0;} .bigAdWrap {margin: 0 auto; background: #dfeefd; padding: 10px 0 20px 20px;} .bigAdWrap span {display: none;} #sectionsWrap {width: 939px; margin: 0; padding: 0 0 0 17px;} #sectionsWrap .section {width: 220px; padding: 0 12px 0 0; margin: 0; float: left;} .section ul {list-style: outside circle; padding: 10px 0 0 22px; margin: 0;} .section ul li {font-size: 0.7em; padding: 6px 0; margin: 0;} .section p {font-size: 0.67em; padding: 12px 0 6px 0; margin: 0; line-height: 1.6em;} .section p a {font-weight: bold;} .section h3 {font-size: 0.9em; color: #555; border-bottom: dashed 1px #444; padding: 12px 0; margin: 0;} #keywordsWrap {padding: 20px 0; margin: 0 auto; width: 922px;} #keywordsWrap h2 {font-size: 0.85em; color: #333; text-align: center;} #keywordsWrap h2 a {text-decoration: none; color: #333;} #keywordsWrap p {font-size: 0.7em; padding: 8px 0; margin: 0; line-height: 1.2em; text-align: center; color: #555;} #copyWrap {padding: 0 12px; margin: 0 auto; width: 956px; padding: 0; background: #8f2f7c;} #copyWrap a {font-weight: bold; color: #fff;} #copyWrap p {padding: 12px; margin: 0; font-size: 0.7em; color: #fff;} #copyWrap p.credit {float: left; background: url(credit.jpg) no-repeat center left; padding: 12px 24px; margin: 0 0 0 12px;} #showReelWrap {background: no-repeat top center; width: 922px; margin: 0 auto; padding: 0;} .reelController {background: url(reelController.jpg) no-repeat bottom left; padding: 0; margin: 0; float: left; width: 230.5px;} #showReelWrap .reelController h3 {padding: 0; margin: 0;} #showReelWrap .reelController h3 a {padding: 12px; margin: 0; float: left; font-size: 0.75em; width: 206.5px; background: url(reelControllerH3A.jpg) repeat-x top center #73135c; color: #fff;} #showReelWrap .reelController h3 a:hover {background: url(reelControllerH3AHover.jpg) repeat-x top center #73135c;} #showReelWrap p {font-size: 0.7em; color: #555; padding: 12px; line-height: 1.4em;} #reelControls{} #showReel {overflow: hidden;} #showReelContent {width: 922px; padding: 0; margin: 0; position: relative; overflow: hidden; z-index: 1; height: 245px;} .reelSlide {visibility: hidden; position: absolute; width: 922px; margin: 0; padding: 0; height: 215px;} .glidecontenttoggler{} .glidecontenttoggler a{} #showReelWrap .reelController h3 a.selected{background: #fff; color: #73135c;} .glidecontenttoggler a.toc{} .glidecontenttoggler a.prev, .glidecontenttoggler a.next{} .glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{} #slide01 {background-image: url(slide01.jpg);} #slide02 {background-image: url(slide02.jpg);} #slide03 {background-image: url(slide03.jpg);} #slide04 {background-image: url(slide04.jpg);} #adMeetTheSharks {background-image: url(adMeetTheSharks.jpg);} /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#fff;} #colorbox{} #cboxContent{margin-top:32px;} #cboxLoadedContent{background:#000; padding:1px;} #cboxLoadingGraphic{background:url(loading.gif) center center no-repeat;} #cboxLoadingOverlay{background:#000;} #cboxTitle{position:absolute; top:-22px; font-size: 12px; left:0; color:#000;} #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(controls.png) 0 0 no-repeat;} #cboxPrevious{background-position:0px 0px; right:44px;} #cboxPrevious.hover{background-position:0px -25px;} #cboxNext{background-position:-25px 0px; right:22px;} #cboxNext.hover{background-position:-25px -25px;} #cboxClose{background-position:-50px 0px; right:0;} #cboxClose.hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}