@charset "UTF-8";
/* CSS Document */

body { background:#1f1e1e url('../images/bg.gif') repeat-x left 700px; height: auto; min-height: 100%; }
    body.sub { background-position: left 190px; }

header { position: fixed; width: 100%; background: rgba(0,0,0,0.85); border-bottom: 1px solid #ffffff; height:50px; z-index: 999; }
    nav { margin-top: 13px; }
        nav li { float:left; margin-right:2px; position: relative; z-index: 999; }
            nav a { padding:0.75em 0.9em 0.6em; display: block; border-radius: 0.3em; }
                nav li a:hover, nav li:hover a, nav li:focus a, nav li.hover a { background:#ffffff; }
            nav li ul { display: block;  position: relative; background: #ffffff; border-radius: 0 0.3em 0.3em; padding: 10px; position: absolute; width: 150px; opacity: 0; visibility: hidden; margin-top: -0.3em; z-index: 999; pointer-events: none; }
                nav li ul.mega { width: 630px; }
                    nav ul.mega li { float:left; width: 150px; }
                        nav ul.mega li:nth-child(5) { clear: both; }
                nav li:hover ul, nav li:active ul, nav li:focus ul, .dropdown.hover ul { display: block; opacity: 1; z-index: 99; visibility: visible; pointer-events:auto; }
            nav li li { float: none;  }
                nav .hide-on-desktop li ul { margin-top: -0.75em; }
        nav .partner ul { width: 320px; }
            nav .partner li a { padding: 0.5em 0; }
            nav .partner img { width:150px; float: left; margin-right: 10px;  }
            nav .partner p { display: block; float: left; width: 150px; color: #000; }
    #cart { display: block; float: right; height: 11px; padding-left: 21px; padding-top:5px; margin:4px 0 0 0; background: url('../images/cart.png') no-repeat left center;  }
    #search { float:right; height:50px; margin: -5px 5px 0; }
        #search input { padding:6px 15px 6px 30px; margin:3px; background: url('../images/search.png') no-repeat 8px 6px; border-radius:15px; -webkit-border-radius:15px; width:70px; }
        #search input[type=text] { border:1px solid #666; color:#ccc; }
    #country { float:right; padding: 0; margin:-1px 0 0; }
        #country li { float:left; list-style: none; padding: 0; margin: 0; display: block; width: 24px; height: 24px; margin-left:5px; }
        #country a { opacity: 0.5; }
            #country:hover a.active { opacity: 0.5; } 
            #country a.active, #country a:hover, #country a.active:hover { opacity: 1; }
    #nav.icon { font-size: 2em; padding: 0.25em; font-size: 2em; margin-top: -0.25em; }
    
#login_form { padding:35px; background: #333; color: #fff; }
    #errormsg, p.error { background:#cc0000; padding:1em; border-radius:0.5em; font-weight: bold; font-size: 0.9em;}

#banner { position: relative; height:700px; border-bottom: 1px solid #ffffff; }
    body.sub #banner { height: 190px; background-size:cover; background-position:top center; }
    #bannerContent { position: relative; top:80px; z-index: 10; } 
    #logo, #logo_black { position: absolute; z-index: 99; margin-top: -23px; }
        #logo.hidden, #logo_black.hidden { visibility: hidden; opacity: 0; }
    #lPromo, #rPromo { position: fixed; left:0; top:150px; z-index: 99; }
        #rPromo li, #lPromo li { display: block; margin: 0 0 -40px 0; padding: 0; z-index: 2; position: relative; width:35px; height: 150px; }
        .tab { display: block; background: url('../images/tab.png') no-repeat; width:150px; height:30px; padding-top:15px; position: absolute; } 
            #lPromo .tab { left: -60px; top: 55px;  }
                #lPromo:hover { left: 340px; }
            #lPromo .flyout { display: block; width: 300px; padding:20px; margin-left: -340px; position: relative; border-radius: 0 15px 15px 0; }
         #rPromo { left:auto; right:0; }
            #rPromo li:first-child { z-index: 3; }
            #rPromo li:last-child { z-index: 1; }
            #rPromo .tab { left: -55px; top: 55px; }
                #rPromo .tab:hover { left:-60px; }
    .cycle-slideshow, .cycle-slideshow .slide { width:100%; height: 700px; }
        .cycle-slideshow { overflow: hidden; background-color: #333; position: absolute; z-index: 0; }
        .cycle-slideshow .slide { background-size:cover; background-position:top center; }
    .cycle-pager { position: absolute; bottom:120px; left:0; width: 100%; text-align: center; z-index: 999; font-size: 24px; }
        .cycle-pager span { display:inline-block; text-decoration: none; color: #fff; margin: 0 2px; }
            .cycle-pager .cycle-pager-active { color: #ffb618; }
            .cycle-pager span:hover, .cycle-pager span.active:hover { color: #999; cursor: pointer; }
        .slide .grid-container { margin-top: 400px; }
    #slideCaption { position: absolute; top:300px; }

#main { background: rgba(0,0,0,0.7); position:relative; top:-100px; padding-top:30px; padding-bottom: 40px; z-index: 10; margin-bottom: 120px; }
    body.sub #main { top:0; }
    #main h1 { float:left; margin-bottom: 0.25em; }

#content { margin-bottom: 30px; }
    .promo img, #carousel img { display: block; border: 1px solid #333; margin-bottom: 20px; }
    .promo:hover img, #carousel img:hover { border: 1px solid #fff; }
    #largePic { position: relative; margin-bottom: 10px; }
        #largePic .icon { display: block; position:absolute; bottom:20px; right:15px; z-index: 999; }
    #picNav, #media { margin-bottom: 30px; width:100%; position: relative; }
        #picNav a, #media a, .squareThumb { width: 32%; margin-right:2%; display: block; float: left; margin-bottom: 5px; position: relative; }
            #media a { width:23.5%; }
            #picNav a:nth-child(3n), #media a:nth-child(5n) { margin-right: 0; }
        #picNav img, #media img, .squareThumb { border: 1px solid #333;}
            .squareThumb { margin-bottom: 5px; }
            #picNav img:hover, #picNav .active img, #media img:hover, .squareThumb:hover { border: 1px solid #fff; }
            .noBorder, .noBorder:hover { border: none; }
        #media .video { height: 100%; }
    #related { border-top:2px solid #ffffff; padding-top:30px; position: relative; }
        #carousel { overflow: hidden; position: relative; width:93%; margin:0 auto; display: block; }
            #carousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; }
            #carousel li { float:left; margin:0 5px; }
        #related .prev, #related .next { position: absolute; bottom:50%; margin-bottom:-40px; }
            #related .prev { left:0; }
            #related .next { right: 0; }
                 #related .prev:hover, #related .next:hover { opacity: 0.5; }
                 #related .prev:active, #related .next:active { opacity: 1; }
    table { border-top:2px solid #fff; border-bottom:2px solid #fff; margin-bottom: 20px; }
        td, th { padding:10px; text-align: left; }
            td.right, th.right { text-align: right; }
        tr { border-bottom:1px solid #333; }
            tr:nth-child(2n) { background: #333; }
        #related .products { width:100%; border: none; border-top:1px solid #666666; border-bottom: 2px solid #ffffff; }
           #related .products tr { border-bottom: 1px solid #666666; background: #333; padding: 15px 10px; }
            #related .products tr:nth-child(2n) { background: none; }
            #related td { height: 50px; vertical-align: middle; }
            #related .products h3, #related .products p { margin:0 !important; display: inline; } 
    #total { float:right; }
    #form-cart { margin-bottom: 10px; }
        #checkout { float:right; clear:both; margin-top:20px; }
        #continue { margin-top: 20px; }
    .tnc { text-align: right; font-size: 0.9em; color:#666; margin-bottom: 20px; }

    .button { font-size: 1.2em !important; padding: 1em 1.5em !important;  }
        .button.left { float: left; }
        .button.right { float: right; }
        .button.back { background: #666 !important; }
            .button.back:hover { background: #fff !important; }
    /*#content .options { list-style: none; padding: 0; margin: 0; }
        #content .options li { padding: 0; margin: 0; }
        #content .options a { padding:10px; border: 1px solid #000; display: block; }
            #content .options a:hover { background: #333; border: 1px solid #333; }
            #content .options a:active, #content .options a.active { background: #000; border: 1px solid #fff; }
        #content .options img { width: 100%; margin-bottom: 0.3em; }*/

.dd-container, .dd-select, .dd-options { width:100% !important; box-sizing: border-box; }
    .dd-select { background: #000 !important; border: 2px solid #ccc !important; border-radius: 7px !important; }
        .error .dd-select { border: 2px solid red !important; }
    .dd-pointer-down { border-top: solid 5px #fff !important; }
    .dd-pointer.dd-pointer-up { border-bottom: solid 5px #fff !important; }
    .dd-options { background: #333 !important; box-shadow: none !important; -webkit-box-shadow: none !important; border: 2px solid #ccc !important; border-radius: 0 0 7px 7px !important; margin-top: -4px !important; }
        .dd-options li { margin: 0 !important; padding: 0; }
    .dd-option-selected { background: #666666 !important; }
    .dd-option, .dd-selected { padding: 15px !important; }
        .dd-option:hover {background: #232323 !important; }
    .dd-option-image, .dd-selected-image { margin-right: 15px !important; }

#errormessage { display: block; border-radius: 7px; background:#cc0000; border:2px solid red; padding: 15px; margin-top:20px; }
    
    .news { margin-top:20px; }
        .news li { display: block; margin:20px 0 0; padding: 20px 0 0; border-top: 1px solid #666; }
            .news li:first-child { border-top:none; margin: 0; padding: 0;  }
                 
    #category { }
        #category .item, #gallery .item { display: inline-block; vertical-align: top; margin-bottom: 30px; word-wrap: break-word; }
            #category img, #gallery img { border: 1px solid #333; margin-bottom: 10px;  }
            #category a:hover img, #gallery a:hover img { border: 1px solid #fff; }
            #category ul { list-style: none; }
            #category .clear.mobile { display: none; }
    
    #crumbs { float:right; margin-bottom: 20px; }
        #crumbs li { float:left; display: block; margin: 0 !important;  }
        
    hr { border-top: 1px solid #666; margin:30px 0; width: 100%; clear:both; }
        .form hr { margin:10px 0 15px; }
        .sidebar hr { margin:20px 0; }

    .pad {margin-bottom: 30px; }
    
    #dealers, .sidebar { border: 1px solid #666; padding:0 10px; border-radius:5px; -webkit-border-radius:5px; background: #333; position: relative; }
        #dealers .btn { position: absolute; bottom: 10px; right: 10px; }
        #dealers ul { }
        #content #dealers li { list-style: none; float:left; margin:0 10px 0 0; padding:10px 10px 10px 0; margin-left:0; border-right: 1px solid #666; }
            #content #dealers li:last-child {  margin-left:0; padding-right:0; border:none; }
        #dealers label { display: block; }
    #dealerlist .locationset { margin-top: 1.5em; padding-bottom: 1em; border-bottom: 1px solid #333; }
        #dealerlist .locationset p { margin-bottom: 0}
        #dealerlist div:last-child { border-bottom: none; }
        
    .thumb { position: relative; width:100px; height: 100px; }
        .thumb .overlay { position: absolute; bottom:-5px; right:-12px; width: 38px; z-index: 999; }
        .thumb img { width: 100%; }
    
    .sidebar { padding:30px 20px; float:right; }
        .sidebar ul { list-style:none; padding: 0; margin: 0; }
            #content.sidebar li { margin:0 0 0.5em 0; }
            .tags { clear: both; }
            #content .tags li { float:left; margin: 0 0.5em 0.5em 0; display: block;  }
            .tags a { background: #666; padding: 0.5em 0.75em 0.45em; border-radius:5px; -webkit-border-radius:5px; text-decoration: none; display: block; }
            .tags a:hover { background: #999; }
         
    .post { margin:20px 0 30px; padding-top:20px; border-top: 2px solid #fff; }
    
    #gallery a img { width: 100%; }
        #gallery a, .thumblist li { margin-bottom: 10px; margin-top:5px; }
     
    .form { }       
        .form input, .form select { margin-bottom: 0.75em; }
        .form label { display: inline-block; padding-top: 0.75em; }
        .form .btn { margin-top: 1.5em; }

    
    .steps {}
        .steps li { list-style: none; background: #333; display: block; padding: 1.25em 1em; margin-bottom: 1em !important; position: relative; }
            .steps li:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(51, 51, 51, 0); border-top-color: #333333; border-width: 6px; margin-left: -6px; }
            .steps li:last-child:after { border: none; }
            .steps li.active { background: #666; }
                 .steps li.active:after { border-top-color: #666; }

.eway-button { margin-bottom: 1em; }
	.eway-button span { text-transform: uppercase; font-size: 1.5em !important; padding: 1em 1.5em !important; }

    #contactform { margin-top: 20px; background: none repeat scroll 0 0 #333333; border: 1px solid #666666; padding: 5%; border-radius:5px; -webkit-border-radius:5px; }
        #contactform input, #contactform select, #contactform textarea {  padding:0.5em; display: block; width:60%; float: left; clear: right; margin-bottom: 1em; }
        #contactform label { width:25%; float: left; clear: left; margin-right: 5%; margin-top: 0.5em; }
        #contactform input.btn { float: left; margin-left:30%; width:63%; margin-top: 1em;  }
        #contactform hr { margin: 1em 0 2em 30%; width:63%; }
        #category img#CAPTCHA { width:33% !important; margin-left:30%;  }
        
    #map { width: 100%; height: 500px; color: #000; }


footer { position: relative; height: auto; padding-top: 40px; border-top:1px solid #ffffff; }
    #partners { margin-bottom: 40px; }
        #partners a { margin-right: 20px; opacity: 0.5; }
            #partners a:hover { opacity: 1; }
            #partners img { width:180px; }
    #tweet { display: block; width: 90%; padding:5% 5% 4% 5%; background:#383838; }
        #tweet li { display: block; margin: 0; padding: 0; }
    #handle { float: right; padding-right: 60px; padding-top:8px; background: url('../images/arrow.gif') top right no-repeat; height:20px; margin: 0; }
    #social { float:left; clear: both; height: 40px; width: 150px; }
        #social li { float:left; display: block; padding:0; margin:0 0 0 10px; }
            #social li:first-child { margin-left:0; }
            #social a:hover { opacity:0.5; }
    #credit { margin:0; position: absolute; bottom:0; }

.promo img, #zoomPic img, #picNav img, #media img, #aside img, #category img { width:100% !important; }
.zoomContainer { z-index: 998; }
img.noscale { width: auto !important; }

.fancybox-nav { height: 70% !important; top:15% !important; }

.squareContainer { position: relative; width: 100%; padding-bottom: 100%; }
    .squareThumb { position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; }

#secure { position: absolute; display: block; left: 50%; margin-left: -90px; margin-top: 60px; }
    #secure img { margin: 0 5px; }
    #secure .rapidSSL { width: 85px }
    #secure .eway { width: 80px; }


li.grid-25:nth-child(4n + 1) { clear: left; }

.mobile-nav { position: absolute; font-size: 32px; width: 32px; height: 32px; margin: -7px 5px 0; padding: 5px; display: block; border-radius: 5px; -webkit-border-radius: 5px; }

/* RESPONSIVE */

@media screen and (max-width: 940px) {
    nav a { padding-left: 0.55em; padding-right: 0.55em; }
    #search input { width: 50px; }
}

@media screen and (max-width: 767px) {
    #logo, #logo_black { width: 280px; }
    #lPromo { top:150px; }
    #rPromo { top:50px; }
        #rPromo li, #lPromo li { margin-bottom: -50px; }
    footer .right { position: relative; }
        footer .right .clear { clear: none; }
    footer .left { margin-bottom: 50px; }
    #social { float: none; margin: 0 auto; }
    #credit { float: none; display: block; text-align: center; width: 100%; clear: both; }
    #main h1 { float:none; }
    #contactform { margin-bottom: 30px; }
    #social { padding-bottom: 40px; }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    #main.grid-container { padding:20px 0; }
    body.sub #banner h3 { display: none; }
    
    #related td img { width: 50px !important; }
    #related td, #related th { padding:5px; width:auto !important;}
    
    .mobile-grid-50:nth-child(odd) { clear: left; }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  nav li ul { visibility: visible; }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  nav li ul { visibility: visible; }
}

/* mobile */
@media screen and (max-width: 599px) {
    body, html { overflow-x: hidden; }
    nav > ul { display: block; width: 280px; visibility: hidden; opacity: 0; margin: -5px 0 0 5px; position: absolute; top: 48px;
        border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px;
        -webkit-transition: all 250ms ease;
        transition: all 250ms ease;
    }
    nav li { display: block; width: 100%; background: #fff; }
    nav ul.hover { visibility: visible; opacity: 1; }
    nav li ul { }
    nav li.hover ul { position: relative !important; }
    nav li a, nav li a:visited { color: #000; width: 100%; font-size: 1.1em; padding: 1; box-sizing: border-box; }
    nav li ul.mega, nav ul.mega li, nav li ul { width: 100%; box-sizing: border-box; }
    nav h2 { font-size: 0.8em !important; }
    nav p { display: none; }
    .mega img { float: left; width: 60px; margin-right: 10px; }
    .mobile-nav.active { color: #000; background: #fff;}
}

.message {
	padding: 2em;
	background: #00a700;
	border-radius: 0.5em;
	margin-bottom: 2em;
}

.message p {
	margin-bottom: 0;
}

/* CSS3 */

#lPromo .tab {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

#rPromo .tab {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

.flyout {
    background: #bebebe; /* Old browsers */ /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bebebe), color-stop(53%,#ededed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #bebebe 0%,#ededed 53%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
    background: linear-gradient(to bottom,  #bebebe 0%,#ededed 53%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

}


/* TRANSITIONS */

#country a, #social a,  #related .prev, #related .next, #partners a {
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

nav a, #content a, .promo img, #picNav img, #crumbs a, #media img, #carousel img, #content input[type="submit"], .btn, #logo, #logo_black, #category img, #category a, #gallery a, #search input, #search,.squareThumb, .options li {
    -webkit-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

nav ul ul {
    -webkit-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;

}

.cycle-pager span, #cart {
    -webkit-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}

.tab, #lPromo {
    -webkit-transition: left 150ms ease-in-out;
    transition: left 150ms ease-in-out;
}