/*
#d6ea2f - Yellow
#a8d45d - Light Green
#687d44 - Dark Green
#b4b4b4 - Light Gray
#1f1f1f - Dark Gray
*/

* { margin:0; padding:0; }
html { background-color:#000000; width:100%; text-align:center; background-image: url(../images/layout/html.gif); background-repeat: repeat-x; background-position: top; }
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #b4b4b4; line-height:1.7em; background-image: url(../images/layout/body.gif); background-repeat: no-repeat; background-position: center top; }
div#header { width:700px; text-align:left; margin:0 auto; }
div#content { width:700px; text-align:left; margin:0 auto; background-image: url(../images/layout/content_mid.gif); background-repeat: repeat-y; }
div#content_top { width:600px; padding:45px 50px 38px 50px; background-image: url(../images/layout/content_top.gif); background-repeat: no-repeat; background-position: top; }
div.textbox { background-color: #000000; background-image: url(../images/layout/textbox_top.gif); background-repeat: repeat-x; background-position: top; padding:15px 20px 5px 20px; overflow:auto; }
a:link,
a:visited,
a:active { color:#d6ea2f; text-decoration:underline; }
a:hover { text-decoration:none; }
h2 { color:#d6ea2f; font-size: 200%; font-weight: bold; text-transform: uppercase; line-height:1.5em; }
h3 { color:#FFFFFF; height:160%; font-weight: bold; line-height:1.5em; }
h4 { height:130%; font-weight: bold; line-height:1.5em; }
div.textbox div.header h2 { line-height:1.3em; }
div.textbox div.reference,
div.textbox div.article { border-top-width: 5px; border-top-style: solid; border-top-color: #b4b4b4; padding-top:10px; margin:10px 0; }
div.textbox div.reference h3 span { font-weight:normal; font-style: italic; font-size: 12px; color:#a8d45d; }
div.textbox div.header { float:left; margin-right:20px; margin-bottom:auto; }
div.textbox p { text-align:justify; margin-bottom:10px; }
div.reference_submit,
div.picture_submit { background-color:#687d44; padding:10px; margin:10px 0; color:#000000; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #A7BC83; border-right-color: #414F2B; border-bottom-color: #414F2B; border-left-color: #A7BC83; }
div.reference_submit h3,
div.picture_submit h3 { text-align:center; }
label { float:left; clear:both; width:100%; margin-bottom:10px }
#contactForm { margin-top:10px; }
#contactForm label span { text-align:right; width:100px; float:left; margin-right:5px; }
#submitPicture { margin-top:10px; }
#submitPicture label span,
span#date { text-align:right; width:150px; float:left; margin-right:5px; }
#contactForm label.message span { width:100%; text-align:left; }
#submitPicture label.caption span { width:100%; text-align:left; }
#contactForm label.button { width:100%; text-align:center; }
input#caption { width:500px; }
label.picture_button { text-align:left; padding-left:155px; }
#message_body { width:500px; height:100px; }
div#writeTestimonial { margin-top:20px; }
div#footer { background-image: url(../images/layout/footer_top.gif); background-repeat: no-repeat; background-position: top; margin:0 auto; width:700px; padding-top:10px; }
ul#footer_sponsors { width:700px; height:100px; position:relative; list-style-type: none; border-top-width: 5px; border-top-style: solid; border-top-color: #d6ea2f; }
ul#footer_sponsors li a { background-image: url(../images/layout/sponsors.gif); text-indent:-9999px; overflow:hidden; width:140px; height:100px; display:block; }
a#mastercraft { background-position: left top; position: absolute; left: 140px; top: 0px; }
a#mastercraft:hover { background-position: left bottom; }
/*a#red_bull { background-position: -140px top; position: absolute; left: 140px; top: 0px; }
a#red_bull:hover { background-position: -140px bottom; }*/
/*a#orakei { background-position: -280px top; position: absolute; left: 280px; top: 0px; }
a#orakei:hover { background-position: -280px bottom; }*/
a#liquid_force { background-position: -420px top; position: absolute; left: 280px; top: 0px; }
a#liquid_force:hover { background-position: -420px bottom; }
a#twc { background-position: -560px top; position: absolute; left: 420px; top: 0px; }
a#twc:hover { background-position: -560px bottom; }
#footer p { margin:10px 0 50px 0; }
div#picture_gallery { text-align:center; margin:20px; }
div#companies { margin:20px 0; text-align:center; }
div.company { margin:5px; display:inline; }
/*
********************************************************
                      LIGHT BOX
********************************************************
*/
#lightbox { position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img { border: none; }
#outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer { padding: 10px; }
#loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav { left: 0; }
#hoverNav a { outline: none; }
#prevLink,
#nextLink { width: 49%; height: 100%; background: transparent url(../images/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover,
#prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover,
#nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% }
#imageData { padding:0 10px; color: #666; }
#imageData #imageDetails { width: 70%; float: left; text-align: left; }
#imageData #caption { font-weight: bold; }
#imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; }
#overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion { margin:20px 0 15px 0; border-left: solid 1px gray; border-right: solid 1px gray; border-bottom: solid 1px gray; overflow: hidden; }
/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel { margin: 0px; padding: 0px; }
/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab { background-color: #000000; border-top: solid 1px gray; border-bottom: solid 1px gray; margin: 0px; padding: 10px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; background-image: url(../images/layout/video_tab.gif); background-repeat: repeat-x; background-position: top; color:#999999; }
.AccordionPanelTab h3 { color:#a8d45d; margin-bottom:10px; }
.AccordionPanelTab img { float:left; margin-right:10px; }
.AccordionPanelTab p { line-height:1.2em; text-align:left; }
/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent { margin: 0px; padding: 0px; height: 0px; text-align:center; background-image: url(../images/layout/video_bg_ramp.gif); background-repeat: repeat-y; background-position: center; overflow:hidden; }
.AccordionPanelContent p { padding: 10px; color:#555555; }
.AccordionPanelContent p b { color:#000000; }
/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab { background-color: #000000; }
/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover { background-color: #222222; background-image: url(../images/layout/video_tab_hover.gif); background-repeat: repeat-x; background-position: top; }
.AccordionPanelOpen .AccordionPanelTabHover { background-color: #222222; background-image: url(../images/layout/video_tab_hover.gif); background-repeat: repeat-x; background-position: top; }