/* LAYOUT.CSS */

/*
============================================
    BASE SECTIONS
============================================
*/

html { background: #252525; }
div { position: relative; }

.header { height: 86px; margin: 0 auto; background: transparent url(/a/i/navbg.png) top left repeat; }
.wrapper { width: 960px; margin: 0 auto; }
.scaffold { width: 1px; height: 1px; position: absolute; bottom: 80px; left: 50%; }
.feature { position: absolute; width: 307px; padding: 10px; right: -420px; bottom: 0px; }
    .feature-left { right: auto; left: -420px; }
    .feature-large { width: 940px; margin: 10px auto;}
    .choose-bike-type .feature p { height: 45px; }
.content { width: 960px; margin: 30px 0 60px -480px; }

/*
============================================
    DISPLAY
============================================
*/

.block { display: block; }
.inline { display: inline; }
.hidden { display: none; }

/*
============================================
    GRID
============================================
*/

.group:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.group{*zoom:1;}
.left { float: left; }
.right { float: right; }
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
.break { clear: both; }
.clearfloat { clear: both; display: block; height: 1px; margin: -1px 0 0 0; }

/*
============================================
    SPACING
============================================
*/

/* Defaults */
h1, h2, h3, h4, h5, h6, ul, ol, dl, p,blockquote, .media { margin:10px 0; padding: 0 5px; }
h5 { padding-right: 0; }
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}

/* Extensions */ 
.pan{padding:0}
.pas{padding:5px}
.pam{padding:10px}
.pal{padding:20px}
.ptn{padding-top:0}
.pts{padding-top:5px}
.ptm{padding-top:10px}
.ptl{padding-top:20px}
.prn{padding-right:0}
.prs{padding-right:5px}
.prm{padding-right:10px}
.prl{padding-right:20px}
.pbn{padding-bottom:0}
.pbs{padding-bottom:5px}
.pbm{padding-bottom:10px}
.pbl{padding-bottom:20px}
.pln{padding-left:0}
.pls{padding-left:5px}
.plm{padding-left:10px}
.pll{padding-left:20px}
.phn{padding-left:0;padding-right:0}
.phs{padding-left:5px;padding-right:5px}
.phm{padding-left:10px;padding-right:10px}
.phl{padding-left:20px;padding-right:20px}
.pvn{padding-top:0;padding-bottom:0}
.pvs{padding-top:5px;padding-bottom:5px}
.pvm{padding-top:10px;padding-bottom:10px}
.pvl{padding-top:20px;padding-bottom:20px}
.man{margin:0}
.mas{margin:5px}
.mam{margin:10px}
.mal{margin:20px}
.mtn{margin-top:0}
.mts{margin-top:5px}
.mtm{margin-top:10px}
.mtl{margin-top:20px}
.mrn{margin-right:0}
.mrs{margin-right:5px}
.mrm{margin-right:10px}
.mrl{margin-right:20px}
.mbn{margin-bottom:0}
.mbs{margin-bottom:5px}
.mbm{margin-bottom:10px}
.mbl{margin-bottom:20px}
.mln{margin-left:0}
.mls{margin-left:5px}
.mlm{margin-left:10px}
.mll{margin-left:20px}
.mhn{margin-left:0;margin-right:0}
.mhs{margin-left:5px;margin-right:5px}
.mhm{margin-left:10px;margin-right:10px}
.mhl{margin-left:20px;margin-right:20px}
.mvn{margin-top:0;margin-bottom:0}
.mvs{margin-top:5px;margin-bottom:5px}
.mvm{margin-top:10px;margin-bottom:10px}
.mvl{margin-top:20px;margin-bottom:20px}
.mtxl { margin-top: 40px; }
.mtxxl { margin-top: 60px; }
.auto-margin { margin: 0 auto; }

/*
============================================
    BORDER
============================================
*/

.bdr-a-s { border: 1px solid #d1d1d1; }
.bdr-t-s { border-top: 1px solid #d1d1d1; }
.bdr-r-s { border-right: 1px solid #d1d1d1; }
.bdr-b-s { border-bottom: 1px solid #d1d1d1; }
.bdr-l-s { border-left: 1px solid #d1d1d1; }
.bdr-h-s { border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; }
.bdr-v-s { border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; }
.bdr-a-n { border: none; }

/*
============================================
    LIST TREATMENTS
============================================
*/


ul li { list-style: none; }
.li-left li { float: left; }
.li-left li a { padding: 5px; }
.li-pvs li { padding: 5px 0; }
.wysiwyg ul li { list-style-type: disc; list-style-position: outside; margin-left: 15px; }

/*
============================================
    TABLES
============================================
*/

table { width: 100%; }
th, td {}
td {}
tr:nth-child(2n+1),
tr.even {}
thead tr {}

/*
============================================
    FORMS
============================================
*/

label {  }
input.textfield {}
input.search {}
textarea {}
input.submit {}
input.submit:hover {}

/*
============================================
    IMAGES & TREATMENTS
============================================
*/

img{display:block;}
.img-flex,
.fleximg,
.imgflex { max-width: 100%; }
a:hover img { opacity: 0.75; }
a:hover img.nohover { opacity: 1; }

/*
============================================
    COLOR
============================================
*/

.lt-grey { color: #A9A9A9; }
.citron { color: #E0DE13; }

/*
============================================
    LOGO
============================================
*/

.logo a { display: block; width: 290px; height: 57px; padding: 6px 10px; }
 
/*
============================================
    NAVIGATION
============================================
*/
.navigation { width: 600px; padding: 14px 0 }
.navigation li { display: inline; float: left; padding: 10px 0; }
.navigation li a { color: #fff; padding: 0 6px; font-size: 12px; }
.navigation li a:hover { color: #e0de13; text-decoration: none;  }

/*
============================================
    BACKGROUNDS
============================================
*/

.bg-opaque { background: transparent url(/a/i/film.png) top left repeat; }
.bg-opaque-grey { background: transparent url(/a/i/film-grey.png) top left repeat; }

/*
============================================
    SKINS
============================================
*/

.skin-grey { background: #ECECEC url(/a/i/stonebg.jpg) top left repeat-y; color: #444; }
.skin-grey a { color: inherit; }

/*
============================================
    BUTTON
============================================
*/

.button,
a.button { padding: 5px 10px; color: #171717; background:#e6e6e6; border: solid 1px #DCDCDC; cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#919191'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#919191)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #e6e6e6,  #919191); /* for firefox 3.6+ */
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.button:hover,
a.button:hover { color: #171717; text-decoration: none; background: #E0DE13;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e43f', endColorstr='#b7b510'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#e6e43f), to(#b7b510)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #e6e43f,  #b7b510); /* for firefox 3.6+ */
}

.bg-opaque .button { border: none;  }
.morebtn { padding-right: 20px; }

/*
============================================
    SHADOW
============================================
*/
.shadow {
    -moz-box-shadow: 0px 0px 4px #000;
    -webkit-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
}

/*
============================================
    ROUNDED CORNERS
============================================
*/
.rounded {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
/*
============================================
    BUTTON BLOCKS
============================================
*/

.button-block:hover { background: #e0de13; cursor: pointer; }
.button-block a { text-decoration: none; }

/*
============================================
    STORY NAVIGATION
============================================
*/

.storynavigation-outer { position: fixed; bottom: 10px; width: 100%; }
.storynavigation { margin: 0 auto }
.storynavigation li { float: left; display:inline; }
.storynavigation li a { display: block; width: 14px; height: 11px; background: transparent url(/a/i/storynavbg.png); background-position: -24px 0; text-indent: -9999px; }
.storynavigation li a:hover,
.storynavigation li.currentstory a { background-position: -38px 0; }

.prevbtn { display: block; position: fixed; top: 50%; left: 0; margin-top: -33px;  }
.nextbtn { display: block; position: fixed; top: 50%; right: 0; margin-top: -33px; }
.prevbtn a { display: block; width: 58px; height: 67px; background: transparent url(/a/i/storyprevbtn.png); background-position: 0 -67px; text-indent: -9999px; }
.nextbtn a { display: block; width: 58px; height: 67px; background: transparent url(/a/i/storynxtbtn.png); background-position: 0 -67px; text-indent: -9999px; }
.prevbtn a:hover { opacity: 0.75; }
.nextbtn a:hover { opacity: 0.75; }

/*
============================================
    STORY SLIDES
============================================
*/

.stories .slide-2,
    .stories .slide-3,
    .stories .slide-4,
    .stories .slide-5,
    .stories .slide-6,
    .stories .slide-7,
    .stories .slide-8,
    .stories .slide-9,
    .stories .slide-10,
    .stories .slide-11,
    .stories .slide-12,
    .stories .slide-13,
    .stories .slide-14,
    .stories .slide-15 { display: none; }
    
.story-video { bottom: 300px; width: 300px; }

/*
============================================
    EVENTS CALENDAR
============================================
*/

.events-table { border-top: 1px solid #A1A1A1; }
.events-table tr { border-bottom: 1px solid #A1A1A1; }
.events-table td { border-right: 1px solid #A1A1A1; border-left: 1px solid #A1A1A1; padding: 5px; width: 14%; height: 100px; }
.events-table td a { color: #FFFFFF; }
.events-table .event-title a { font-weight: normal; }
.calendarMonthLinks { font-weight: bold; }
.events-table td.calendarDayHeading { height: 20px; font-weight: bold; text-align: center; }
.calendarBlank { color: #AAAAAA; }
.calendarToday { font-weight: bold; color: #000; background-color: #E0DE13; }
.calendarToday a { color: #000 !important; }
.calendarCell { font-weight: bold; color: #fff; }

/* tooltip styling */
.tooltip {
    display:none;
    background:url(/a/i/black_arrow_big.png);
    height:200px;
    padding:10px 30px 10px 30px;
    width:310px;
    color:#fff;
    font-weight: normal;
}


/*
============================================
    FORMS
============================================
*/
.textfield { padding: 6px 10px; color: #171717; background:#e6e6e6; border: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#919191'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#919191)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #e6e6e6,  #919191); /* for firefox 3.6+ */
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/*
============================================
    NEWS GALLERY
============================================
*/
 
.newsgallery { position: relative; width: 100%;  }
.gallery-thumbs { width: 110%; }
.gal-thumb { cursor: pointer; }
.gal-thumb:nth-child(3n+3) { margin-right: 0 !important; }

/*
============================================
    LIGHTBOX
============================================
*/

#fancybox-loading {position: fixed;top: 50%;left: 50%width: 40px;height: 40px;margin-top: -20px;margin-left: -20px;cursor: pointer;overflow: hidden;z-index: 1104;display: none;}
#fancybox-loading div {position: absolute;top: 0;left: 0;width: 40px;height: 480px;background-image: url('/a/i/fancy_loading.png');}
#fancybox-overlay {position: absolute;top: 0;left: 0;width: 100%;z-index: 1100;display: none;}
#fancybox-wrap {position: absolute;top: 0;left: 0;padding: 20px;z-index: 1101;outline: none;display: none;}
#fancybox-outer {position: relative;width: 100%;height: 100%;background: #000;}
#fancybox-content {width: 0;height: 0;padding: 0;outline: none;position: relative;overflow: hidden;z-index: 1102;border: 0px solid #fff;}
#fancybox-close {position: absolute;top: -15px;right: -15px;width: 30px;height: 30px;background: transparent url('/a/i/fancy_close.png');cursor: pointer;z-index: 1103;display: none;}
#fancybox-error {color: #444;font: normal 12px/20px Arial;padding: 14px;margin: 0;}
#fancybox-img {width: 100%;height: 100%;padding: 0;margin: 0;border: none;outline: none;line-height: 0;vertical-align: top;}
#fancybox-frame {width: 100%;height: 100%;border: none;display: block;}
#fancybox-left, #fancybox-right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; outline: none; background: transparent url('blank.gif'); z-index: 1102; display: none; }
#fancybox-left { left: 0px; }
#fancybox-right { right: 0px; }
#fancybox-left-ico, #fancybox-right-ico { position: absolute; top: 50%; left: -9999px; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; z-index: 1102; display: block; }
#fancybox-left-ico { background-image: url('/a/i/fancy_nav_left.png'); background-position: 0 0; }
#fancybox-right-ico { background-image: url('/a/i/fancy_nav_right.png'); background-position: 0 0; }
#fancybox-left:hover, #fancybox-right:hover { visibility: visible; /* IE6 */ }
#fancybox-left:hover span { left: 20px; }
#fancybox-right:hover span { left: auto; right: 20px; }

.fancybox-bg {position: absolute;padding: 0;margin: 0;border: 0;width: 20px;height: 20px;z-index: 1001;}

/*
============================================
    MEDIA QUERIES
============================================
*/

@media all and (max-width: 1040px) {
  .scaffold { bottom: auto;  top: 120px;}
  .feature { bottom: auto; top: 0; }
  .scaffold .content { bottom: 0; position: absolute; top: auto; }
}

/*
============================================
    PRINT STYLES
============================================
*/

@media print {
    * { background: transparent !important; color: #444 !important; text-shadow: none; }
    a, a:visited { color: #444 !important; text-decoration: underline; }
    a:after { content: " (" attr(href) ")"; } 
    abbr:after { content: " (" attr(title) ")"; }
    .ir a:after { content: ""; }  /* Don't show links for images */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    img { page-break-inside: avoid; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
}