/*
 * Billabong
 * 2010/07/05
 */
html { height: 100%; padding-bottom: 1px; font-size: 100%; }
body { min-width: 990px; padding: 224px 0 160px; background: #222222; color: #060606; font: .75em/1.5 "Helvetica", "Arial", sans-serif; }
* { margin: 0; padding: 0; }
p, ul, ol, dl { padding-bottom: 1em; }
ul, ol { margin-left: 0; padding-left: 2em; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
textarea, input, select, option, optgroup, button { font: 1em "Helvetica", "Arial", sans-serif; }
img { border: none; vertical-align: bottom; }
a { color: #060606; text-decoration: none; outline: none; cursor: pointer; }
a:hover { text-decoration: underline; }
button, input.button, input.radio, input.checkbox, label, select { cursor: pointer; }


/*
 * some globally used classes
 */
.left { float: left !important; }
.right { float: right !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.no-margin { padding-bottom: 0 !important; }
.margin { padding-bottom: 1em !important; }

input.button,
a.button { overflow: hidden; float: left; height: 42px; padding: 0; border: none; background: #000 url("../images/buttons.png") no-repeat 0 0; text-indent: -99em; }
a.button-prev { width: 142px; background-position: -174px 0; }
a.button-prev:hover { background-position: -174px -42px; }
a.button-next { width: 140px; background-position: -317px 0; }
a.button-next:hover { background-position: -317px -42px; }
a.button-view-entries { width: 288px; background-position: -458px 0; }
a.button-view-entries:hover { background-position: -458px -42px; }
input.button-submit,
a.button-submit { width: 173px; background-position: 0 0; }
input.button-submit:hover,
a.button-submit:hover { background-position: 0 -42px; }

a.button-win { width: 394px; height: 65px; background: transparent url("../images/buttons_other.png") no-repeat 0 0; }
a.button-win:hover { background-position: 0 -65px; }

a.button-small { overflow: hidden; float: left; height: 23px; background: #000 url("../images/buttons_small.png") no-repeat 0 0; text-indent: -99em; }
a.button-small-copy { width: 81px; background-position: 0 0; }
a.button-small-copy.hover,
a.button-small-copy:hover { background-position: 0 -23px; }

a.button-medium { overflow: hidden; float: left; height: 33px; background: #000 url("../images/buttons_medium.png") no-repeat 0 0; text-indent: -99em; }
a.button-medium-more { width: 175px; background-position: 0 0; }
a.button-medium-more:hover { background-position: 0 -33px; }
a.button-medium-prizes { width: 256px; background-position: -176px 0; }
a.button-medium-prizes:hover { background-position: -176px -33px; }
a.button-medium-back { width: 208px; background-position: -433px 0; }
a.button-medium-back:hover { background-position: -433px -33px; }

a.button-soon { overflow: hidden; float: left; height: 33px; background: #000 url("../images/coming_soon.png") no-repeat 0 0; text-indent: -99em; }
a.button-soon-more { width: 154px; background-position: 0 0; }
a.button-soon-more:hover { background-position: 0 0; cursor: default }

/*
 * Page background (scaled to window size)
 */
img.background { position: fixed; left: 0; top: 0; z-index: -1; min-width: 100%; min-height: 100%; display: none }
.js img.background { min-width: 0; min-height: 0; }


/*
 * Page header with logo and main menu
 */
#header { position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 50px; padding: 0; background: transparent url("../images/header_background.png") repeat-x 0 0; }
#header h1 { overflow: hidden; float: left; width: 37px; height: 25px; padding: 10px 0 0 20px; background: transparent url("../images/logo.png") no-repeat 20px 100%; text-indent: 99em; }
#header h1 a { float: left; width: 100%; height: 100%; background: transparent url("../images/logo.png") no-repeat 0 0; }

#header ul.social { float: right; list-style: none; padding: 8px 18px 0 12px; }
#header ul.social li { float: left; padding-left: 7px; }
#header ul.social a { overflow: hidden; float: left; width: 30px; height: 29px; background: transparent url("../images/menu_social_icons.png") no-repeat 0 0; text-indent: -99em; }
#header ul.social a.facebook { background-position: 0 0; }
#header ul.social a.facebook:hover { background-position: 0 -29px; }
#header ul.social a.twitter { background-position: -30px 0; }
#header ul.social a.twitter:hover { background-position: -30px -29px; }

#header ul.menu { float: right; list-style: none; padding: 0; }
#header ul.menu li { float: left; }
#header ul.menu a { overflow: hidden; float: left; height: 46px; background: transparent url("../images/menu.png") no-repeat 0 0; text-indent: -99em; }
#header ul.menu a.stories { width: 155px; background-position: -208px 0; }
#header ul.menu a.video { width: 124px; background-position: -363px 0; }
#header ul.menu a.surf { width: 208px; background-position: 0 0; }
#header ul.menu a.win { width: 90px; background-position: -487px 0; }
#header ul.menu a.products { width: 136px; background-position: -577px 0; }
#header ul.menu a.blog{ width: 136px; background-position: -713px 0; }

#header ul.menu li>a.stories.active,
#header ul.menu a.stories:hover { background-position: -208px -46px; }
#header ul.menu li>a.video.active,
#header ul.menu a.video:hover { background-position: -363px -46px; }
#header ul.menu li>a.surf.active,
#header ul.menu a.surf:hover { background-position: 0 -46px; }
#header ul.menu li>a.win.active,
#header ul.menu a.win:hover { background-position: -487px -46px; }
#header ul.menu li>a.products.active,
#header ul.menu a.products:hover { background-position: -577px -46px; }
#header ul.menu li>a.blog.active,
#header ul.menu a.blog:hover { background-position: -713px -46px; }

/*
 * Page content
 */
#content-scaling { position: relative; margin: 0 4.3% 0; padding: 12px 50px 0; background: #fff; }
#content { position: relative; width: 845px; margin: 0 auto 0; padding: 12px 50px 0; background: #fff; }

.two-columns { overflow: hidden; padding: 50px 0 100px 10px; }
.two-columns h2 { padding-bottom: 1ex; font-size: 2.5em; line-height: 1; }
.two-columns .column-primary { float: left; width: 290px; }
.two-columns .column-secondary { float: right; width: 520px; }

.title { position: absolute; left: -19px; top: -56px; overflow: hidden; float: left; height: 42px; background: transparent url("../images/titles.png") no-repeat 0 0; text-indent: -99em; }
.title-gallery { width: 190px; background-position: 0 0; }
.title-step-5 { width: 152px; background-position: -192px 0; }
.title-stories { width: 190px; background-position: 0 -43px; }

.title-big { position: absolute; left: -9px; top: -68px; overflow: hidden; float: left; height: 57px; background: transparent url("../images/titles_big.png") no-repeat 0 0; text-indent: -99em; }
.title-big-win { width: 126px; background-position: 0 0; }

.subtitle { position: absolute; left: 46px; top: -18px; overflow: hidden; float: left; height: 30px; background: transparent url("../images/subtitles.png") no-repeat 0 0; text-indent: -99em; }
.subtitle-entries { width: 305px; background-position: 0 0; }
.subtitle-submit { width: 194px; background-position: -306px 0; }
.subtitle-prizes { left: 26px; width: 261px; background-position: -501px 0; }
.subtitle-jbay { left: 26px; width: 217px; background-position: -763px 0; }
.subtitle-experience { left: 26px; width: 270px; background-position: -981px 0; }
.subtitle-stories { left: 26px; width: 438px; background-position: 0 -31px; }

.message { overflow: hidden; height: 55px; padding: 35px 0 25px; background: transparent url("../images/messages.png") no-repeat 0 35px; text-indent: -99em; }
.message-great-work { width: 634px; background-position: 0 35px; }
.message-congratulations { width: 420px; background-position: -635px 35px; }


/*
 * Gallery
 */
div.gallery { position: relative; padding: 20px 0 15px; }
div.gallery ul { overflow: hidden; list-style: none; margin-left: -5px; padding: 10px 0 10px; line-height: 15px; }
div.gallery li { float: left; padding: 30px 0 0 15px; }
div.gallery li a { height: 30px;position: relative; z-index: 1; float: left; width: 167px; padding: 120px 10px 7px; background: #000; color: #fff; font-weight: 700; font-style: italic; }
div.gallery li a.download { display: none; }
div.gallery li a:hover { z-index: 2; margin: -10px; border: 10px solid #edce00; text-decoration: none; }
div.gallery li a img { position: absolute; left: 0; top: 0; }
div.gallery li a b { display: block; color: #edce00; }
div.gallery li a img.week,
div.gallery li a img.month { position: absolute; top: 10px; right: 10px; left: auto; }
div.gallery ul.legend { margin: 0; padding: 30px 0 0 110px; font-weight: 700; font-style: italic; line-height: 26px; }
div.gallery ul.legend li { padding: 0 25px 0 0; }
div.gallery ul.legend img { padding-right: 2px; }
div.gallery p.prev { position: absolute; left: -70px; bottom: -10px; padding: 0; }
div.gallery p.next { position: absolute; right: -70px; bottom: -10px; padding: 0; }


/*
 * Submit your entry form
 */
div.submit { overflow: hidden; width: 305px; margin-right: -50px; padding: 0 50px 50px 540px; min-height: 333px }
div.submit p.image { float: left; margin-left: -540px; padding: 0; }
div.submit p.action { position: absolute; right: -20px; bottom: -10px; padding: 0; }
div.submit .intro { font-size: 1.333em; font-weight: 700; font-style: italic; line-height: 1.2; letter-spacing: -1px; }
div.submit div.share { overflow: hidden; padding: 5px 0 40px; }
div.submit div.share h3 { font-size: 1.667em; text-transform: lowercase; }
div.submit div.share p { overflow: hidden; padding: 0; }
div.submit div.share p a { float: left; margin-right: 20px; }
div.submit div.copy-url p { overflow: hidden; padding-bottom: .75ex; }
div.submit div.copy-url input.text { width: 298px; border-color: #808080; font-weight: 400; font-style: normal; }
div.submit div.copy-url a.button-small-copy { float: right; }
div.submit form.connect-button { float: left; clear: left; margin-left: -540px; padding-top: 20px; }
div.submit form { margin-bottom: -50px; }
div.submit form .intro { font-size: 1.167em; font-style: normal; }
div.submit form p { position: relative; overflow: hidden; padding-bottom: 9px; }
div.submit form p.error { margin-right: -28px; padding-right: 28px; background: transparent url("../images/form_error.png") no-repeat 100% 2px; }
div.submit form p.terms { overflow: visible; height: 20px; padding-top: 25px; padding-bottom: 0; background-position: 100% 20px; line-height: 18px; text-align: right; }
div.submit form p.terms a { position: relative; top: -3px; font-size: 11px; font-weight: 700; text-decoration: underline; }
div.submit form p.terms a:hover { color: #048594; }
div.submit form input.text { width: 192px; }
div.submit form label { float: left; width: 101px; padding-right: 5px; padding-top: 3px; font-weight: 700; font-style: italic; }
div.submit form label.checkbox { position: relative; top: -3px; float: none; display: inline; width: auto; margin: 0; padding: 0; font-size: 11px; font-style: normal; }
div.submit form input.checkbox { float: right; }
div.submit form label a { text-decoration: underline; }
div.submit form label a:hover { color: #048594; }
div.submit form span.select { float: left; }

div.submit form input#submit-area-code { float: left; width: 65px; }
div.submit form input#submit-phone { float: right; width: 115px; }
div.submit form select#submit-gender { width: 104px; }
div.submit form select#submit-country { width: 199px; }

.js div.submit form p.terms span.checkbox { position: relative; top: -6px; right: -7px; float: right; }


/*
 * Modal window
 */
#overlay { position: fixed; left: 0; top: 0; z-index: 8; width: 100%; height: 100%; padding-bottom: 1px; background: #000; }
#overlay.loading { background: #000 url("../images/loading.gif") no-repeat 50% 50%; }

#loading { position: fixed; left: 0; top: 0; z-index: 11; width: 100%; height: 100%; padding-bottom: 1px; background: #000; }
#loading.loading { background: #000 url("../images/loading.gif") no-repeat 50% 50%; }

#modal { position: absolute; left: 50%; top: 125px; z-index: 9; width: 820px; margin: 0 0 0 -470px; padding: 60px 60px 55px; background: #fff; }
#modal p.close { position: absolute; top: -11px; right: -11px; padding: 0; }
#modal p.close a { overflow: hidden; float: left; width: 37px; height: 37px; background: transparent url("../images/modal_close.png") no-repeat 0 0; text-indent: -99em; }
#modal p.image { padding-bottom: 15px; }
#modal div.description { overflow: hidden; }
#modal div.description p.info { position: relative; float: left; min-height: 29px; padding: 3px 45px 3px 0; font-style: italic; line-height: 14px; white-space: nowrap; }
#modal div.description p.info b { display: block; }
#modal div.description p.info img { position: absolute; top: 0; right: 0; }
#modal div.description p.download, #clips { float: right; padding: 15px 0 0; font-weight: 700; font-style: italic; line-height: 1.1; }
#modal div.description p.download b { color: #edce00; }
#modal div.description p.download a, #clips a.video { margin-left: .5ex; padding-right: 14px; padding-left: .5ex; border-left: 1px solid #b2b2b2; background: transparent url("../images/bullet_a.png") no-repeat 100% 50%; }
#clips a.selected {text-decoration: underline}

/*
 * Types of experiences to win
 */
p.prizes { position: absolute; top: -140px; right: -93px; z-index: 0; width: 393px; height: 441px; padding: 0; background: transparent url("../images/prizes_background.png") no-repeat 0 0; }
p.prizes a { position: relative; top: 124px; left: 52px; }

p.win { position: absolute; bottom: -39px; right: -21px; padding: 0; }

p.back { position: absolute; bottom: -10px; left: -20px; padding: 0; }

.experience-text { font-size: 1.25em; font-weight: 700; line-height: 1.2; }
.experience-text h2 { font-size: 2em; }

ul.experiences { overflow: hidden; list-style: none; margin-right: -20px; padding: 50px 0 80px; }
ul.experiences li { position: relative; overflow: hidden; float: left; width: 218px; height: 354px; padding: 0 28px 0 38px; background: transparent none no-repeat 20px 0; line-height: 1; }
ul.experiences li.jbay { background-image: url("../images/experience_jbay.jpg"); color: #071715; }
ul.experiences li.life { background-image: url("../images/experience_life.jpg"); color: #4f3f2a; }
ul.experiences li.spectator { background-image: url("../images/experience_spectator.jpg"); color: #0f324d; }
ul.experiences li span { position: absolute; left: 20px; top: 0; overflow: hidden; height: 25px; background: transparent url("../images/experience_labels.png") no-repeat 0 0; text-indent: -99em; }
ul.experiences li.jbay span { width: 168px; background-position: 0 0; }
ul.experiences li.life span { width: 156px; background-position: -169px 0; }
ul.experiences li.spectator span { width: 196px; background-position: -326px 0; }
ul.experiences li b { display: block; padding-top: 55px; font-size: 2.5em; }
ul.experiences li a.button-medium { position: absolute; right: 0; bottom: 0; }
ul.experiences li a.button-soon { position: absolute; right: 0; bottom: 0; }

/*
 * Custom form elements
 */
input.text { height: 18px; padding: 2px 0 0 5px; border: 1px solid #000; background: #fff; font-weight: 700; font-style: italic; line-height: 1; }
.js input.checkbox { position: absolute; right: 0; opacity: 0; }
.js span.checkbox { display: inline-block; width: 18px; height: 17px; background: transparent url("../images/form_checkbox.png") no-repeat 0 0; cursor: pointer; }
.js span.checkbox-checked { background-position: 0 -17px; }

.js select { position: absolute; left: -999em; }
.js span.select { display: block; padding: 0 22px 0 5px; border: 1px solid #000; background: transparent url("../images/form_select.png") no-repeat 100% 50%; font-weight: 700; font-style: italic; line-height: 20px; cursor: pointer; }
.js span.select span { overflow: hidden; display: block; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; }
.js div.select { position: absolute; border: 1px solid #000; background: #fff; font-weight: 700; line-height: 21px; }
.js div.select-scroll { overflow: auto; height: 87px; }
.js div.select ul { overflow: hidden; list-style: none; padding: 0; }
.js div.select li { margin-top: -1px; }
.js div.select ul a { display: block; padding: 0 5px 1px; border-top: 1px solid #000; background: #fff; }
.js div.select ul a:hover { background: #edce00; text-decoration: none; }


/*
 * The End
 */