* CSS Document */ @viewport { width: device-width; min-zoom: 1; max-zoom: 2; } @viewport { width: 550px; zoom: 1; } /* ---------------------------- UNIVERSAL STYLES ------------------------ */ /* container */ #wowslidershell { position: relative; width: 952px; height:332px; margin: 0 auto; padding: 0px 0px 0px 0px; background-color: #FFF;} /* bullets */ #wowslider-container1 .ws_bullets { top: 5px; right: 10px; } #wowslider-container1 .ws_bullets .ws_bulframe { top: 20px;} #wowslider-container1 .ws_bullets .ws_bulframe { top: 20px; } #wowslider-container1 .ws_bullets { font-size: 0px; padding: 0px; float: left; position:absolute; z-index:70; } #wowslider-container1 .ws_bullets div{ position:relative; float:left; } #wowslider-container1 .ws_bullets a { margin-left: 0; width:20px; height:20px; background: url(./bullet.png) right top; float: left; text-indent: -4000px; position:relative; color:transparent; } * html #wowslider-container1 .ws_bullets a { background-image: url(./bullet.gif); } #wowslider-container1 .ws_bullets a.ws_selbull{ background-position: left top; } #wowslider-container1 .ws_bullets a:hover{ background-position: left top; } #wowslider-container1 { overflow: hidden; zoom: 1; position: relative; left: 0px; width:950px; height:330px; margin: 0px; z-index:1; background-image: none; border: 1px solid #666; box-shadow: 5px 10px 10px 5px rgba(116, 116, 116, 0.75); -moz-box-shadow: 5px 10px 10px 5px rgba(116, 116, 116, 0.75); -webkit-box-shadow: 5px 10px 10px 5px rgba(116, 116, 116, 0.75); } #wowslider-container1 ul { list-style:none; margin:0; padding:0; } #wowslider-container1 ul { position:relative; width: 500%; left:0%; animation: wsBasic 1290s infinite; -moz-animation: wsBasic 1290s infinite; -webkit-animation: wsBasic 1290s infinite; } #wowslider-container1 ul li { float:left; width:950px; } /* imgshell and imgs */ #wowslider-container1 .ws_images { position: absolute; left:0px; top:0px; width:635px; height:330px; overflow:hidden; } #wowslider-container1 .ws_images a{ color:transparent; } #wowslider-container1 .ws_images img{ width: 635px; max-width: 635px; height: auto; top:0; left:0; border:none 0; } #wowslider-container1 a{ text-decoration: none; outline: none; border: none; } #wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position:absolute; display:none; top:50%; margin-top:-37px; opacity:0.7; z-index:60; height: 75px; width: 60px; background-image: url(./arrows.png); } * html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev{ background-image: url(./arrows.gif); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } #wowslider-container1 a.ws_next{ background-position: 100% 0; right:0px; } #wowslider-container1 a.ws_prev { left:0px; background-position: 0 0; } * html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block} #wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block} #wowslider-container1 a.wsl{ display:none; } /* --------- caption box ---------- */ #wowslider-container1 .ws-title { position: absolute; top: 40px; left: 675px; width: auto; max-width: 250px; z-index: 50; text-align: left; } #wowslider-container1 .ws-title h2.wow_caption_title { display:block; font-family: "Helvetica Neue", "Lucida Grande",Tahoma,Arial,Helvetica, sans-serif; color:#be1d23; margin: 0px; border-bottom: none; font-size: 2.1em; font-weight: 300; max-width: 250px; } @keyframes wsBasic{0%{left:-0%} 0.62%{left:-0%} 0.81%{left:-100%} 1.43%{left:-100%} 1.63%{left:-200%} 2.25%{left:-200%} 2.44%{left:-300%} 3.06%{left:-300%} 3.26%{left:-400%} 3.88%{left:-400%} } @-moz-keyframes wsBasic{0%{left:-0%} 0.62%{left:-0%} 0.81%{left:-100%} 1.43%{left:-100%} 1.63%{left:-200%} 2.25%{left:-200%} 2.44%{left:-300%} 3.06%{left:-300%} 3.26%{left:-400%} 3.88%{left:-400%} } @-webkit-keyframes wsBasic{0%{left:-0%} 0.62%{left:-0%} 0.81%{left:-100%} 1.43%{left:-100%} 1.63%{left:-200%} 2.25%{left:-200%} 2.44%{left:-300%} 3.06%{left:-300%} 3.26%{left:-400%} 3.88%{left:-400%} } /* --------- thumbnails ---------- */ #wowslider-container1 .ws_bullets a img{ text-indent:0; display:block; top:20px; left:-120px; visibility:hidden; position:absolute; border: 3px solid #d6d6d6; max-width:none; -moz-box-shadow: 0 0 5px #d6d6d6; box-shadow: 0 0 5px #d6d6d6; } #wowslider-container1 .ws_bullets a:hover img{ visibility:visible; } #wowslider-container1 .ws_bulframe div div{ height:90px; overflow:visible; position:relative; } #wowslider-container1 .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; background-color:#d6d6d6; } #wowslider-container1 .ws_bullets .ws_bulframe{ display:none; overflow:visible; position:absolute; cursor:pointer; border: 3px solid #d6d6d6; -moz-box-shadow: 0 0 5px #d6d6d6; box-shadow: 0 0 5px #d6d6d6; } #wowslider-container1 .ws_bulframe span{ display:block; position:absolute; top:-7px; margin-left:-1px; left:120px; background:url(./triangle.png); width:15px; height:6px; } /* ---------------------------- DESKTOP ONLY STYLES ------------------------ */ @media only screen and (min-width: 769px) { //DESKTOP styles go here // end DESKTOP styles } /* ---------------------------- TABLET ONLY STYLES ------------------------ */ @media only screen and (min-width: 551px) and (max-width: 768px) { //TABLET styles go here // end TABLET styles } /* ---------------------------- MOBILE ONLY STYLES ------------------------ */ @media screen and (max-width: 550px) { /*MOBILE styles go here*/ /* container */ #wowslidershell { position: relative; width: 100%; height: 500px; margin: 0px; padding: 0px; background-color: #FFF;} /* bullets */ #wowslider-container1 .ws_bullets { top: 5px; right: 10px; } #wowslider-container1 .ws_bullets .ws_bulframe { top: 20px;} #wowslider-container1 .ws_bullets .ws_bulframe { top: 20px; } #wowslider-container1 .ws_bullets { font-size: 0px; padding: 0px; float: left; position:absolute; z-index:70; } #wowslider-container1 .ws_bullets div{ position:relative; float:left; } #wowslider-container1 .ws_bullets a { margin-left: 0; width:20px; height:20px; background: url(./bullet.png) right top; float: left; text-indent: -4000px; position:relative; color:transparent; } * html #wowslider-container1 .ws_bullets a { background-image: url(./bullet.gif); } #wowslider-container1 .ws_bullets a.ws_selbull{ background-position: left top; } #wowslider-container1 .ws_bullets a:hover{ background-position: left top; } #wowslider-container1 { overflow: hidden; zoom: 1; position: relative; left: 0px; width:100%; height: 500px; margin: 0px; z-index:1; background-image: none; border: nonw; box-shadow: 5px 10px 10px 5px rgba(116, 116, 116, 0.75); -moz-box-shadow: 5px 10px 10px 5px rgba(116, 116, 116, 0.75); -webkit-box-shadow: 5px 10px 10px 5px rgba(116, 116, 116, 0.75); } #wowslider-container1 ul li { float: none; width:100%; } /* imgshell and imgs */ #wowslider-container1 .ws_images { position: relative; left:0px; top:0px; width:100%; height: 300px; overflow:hidden; } #wowslider-container1 .ws_images img{ width: 100%; max-width: 550px; height: auto; top:0; left:0; border:none 0; } #wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position:relative; display:none; top:50%; margin-top:-37px; opacity:0.7; z-index:60; height: 75px; width: 60px; background-image: url(./arrows.png); } * html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev{ background-image: url(./arrows.gif); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } #wowslider-container1 a.ws_next{ background-position: 100% 0; right:0px; } #wowslider-container1 a.ws_prev { left:0px; background-position: 0 0; } /* --------- caption box ---------- */ #wowslider-container1 .ws-title { position: relative; top: 20px; left: 20px; width: 100%; max-width: 500px; z-index: 50; text-align: left; } #wowslider-container1 .ws-title h2.wow_caption_title { display:block; max-width: 500px; } /* --------- thumbnails ---------- */ #wowslider-container1 .ws_bullets a img{ text-indent:0; display:block; top:20px; left:-120px; visibility:hidden; position:absolute; border: 3px solid #d6d6d6; max-width:none; -moz-box-shadow: 0 0 5px #d6d6d6; box-shadow: 0 0 5px #d6d6d6; } #wowslider-container1 .ws_bullets a:hover img{ visibility:visible; } #wowslider-container1 .ws_bulframe div div{ height:90px; overflow:visible; position:relative; } #wowslider-container1 .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; background-color:#d6d6d6; } #wowslider-container1 .ws_bullets .ws_bulframe{ display:none; overflow:visible; position:absolute; cursor:pointer; border: 3px solid #d6d6d6; -moz-box-shadow: 0 0 5px #d6d6d6; box-shadow: 0 0 5px #d6d6d6; } #wowslider-container1 .ws_bulframe span{ display:block; position:absolute; top:-7px; margin-left:-1px; left:120px; background:url(./triangle.png); width:15px; height:6px; } //end MOBILE styles }