/*********************************************************************** * * Liquid Slider * Kevin Batdorf * * http://liquidslider.com * * GPL license * ************************************************************************/ /** No JavaScript **/ .no-js .liquid-slider { height:350px; overflow:scroll; } .liquid-slider-wrapper .liquid-slider-preloader { background: url(../images/loading.gif) #f2f2f2 no-repeat center 75px; opacity:.90; /* Do not edit below this line */ width:100%; height:200%; position:absolute; top:0; left:0; } .liquid-slider-wrapper { margin:0 auto; /* Do not edit below this line */ clear: both; overflow: auto; position: relative; } .liquid-slider-wrapper .liquid-slider { width: 1200px; /* Do not edit below this line */ float: left; overflow: hidden; position: relative; } .liquid-slider-wrapper .panel-container { /* Do not edit below this line */ position: relative; } .liquid-slider-wrapper h2.title.hidden { display:none; } .liquid-slider-wrapper .liquid-slider .panel-container .fadeClass { /* Do not edit below this line */ position: absolute; top: 0; left: 0; display: none; } .liquid-slider-wrapper .liquid-slider .panel { width: 1200px; /* Do not edit below this line */ display: block; float: left; } .liquid-slider-wrapper .liquid-slider .panel img{ max-width:100%; height:auto; } .liquid-slider-wrapper .liquid-slider .panel video { /* width:100%; height:auto; */ } .liquid-slider-wrapper .liquid-slider .panel-wrapper { /* padding: 20px; */ /* Do not edit below this line */ position:relative; } .liquid-slider-wrapper .liquid-nav a {width:12px; height:11px; padding:0; margin:0 4px 0 0; text-indent:-999em; background: url(../images/interface.png) no-repeat 50% 0;} .liquid-slider-wrapper .liquid-nav a:hover, .liquid-slider-wrapper .liquid-nav .current {background-position: 50% -11px;} .currentCrossLink {font-weight: bold;} .liquid-slider-wrapper .liquid-nav ul { padding:0; /* Do not edit below this line */ clear: both; display: block; margin: 0 auto 20px; overflow: hidden; } .liquid-slider-wrapper .liquid-nav ul li { /* Do not edit below this line */ display: inline; } .liquid-slider-wrapper .liquid-nav ul li a { /* Do not edit below this line */ display: block; float: left; text-decoration: none; } .liquid-slider-wrapper .liquid-nav { overflow:hidden; clear:both; } .liquid-slider-wrapper .liquid-slider-select-box { width: 100%; height: 35px; overflow: hidden; background: url(../images/menu.png) no-repeat right #ddd; } .liquid-slider-wrapper .liquid-slider-select-box select { /* If you want the standard select box, use width:100% And delete the rest of the styling here */ width: 150%; -webkit-appearance: none; -moz-appearance: none; appearance:none; background: transparent; padding: 5px; font-size: 110%; border: 1px solid #bbb; height: 35px; cursor:pointer; } .liquid-slider-wrapper .liquid-nav-left, .liquid-slider-wrapper .liquid-nav-right { /* Do not edit below this line */ float: left; } .liquid-slider-wrapper .liquid-nav-left a, .liquid-slider-wrapper .liquid-nav-right a { /* non-graphical arrows */ background: #000; color: #fff; padding: 5px; width: 100px; /* Do not edit below this line */ display: block; text-align: center; text-decoration: none; } .liquid-slider-wrapper .liquid-nav-left-arrow, .liquid-slider-wrapper .liquid-nav-right-arrow { cursor: pointer; /* Do not edit below this line */ float: left; } .liquid-slider-wrapper .liquid-nav-left-arrow a, .liquid-slider-wrapper .liquid-nav-right-arrow a { /* Do not edit below this line */ display: block; } .liquid-slider-wrapper .liquid-nav-left, .liquid-slider-wrapper .liquid-nav-left-arrow { /* Do not edit below this line */ clear: both; } .liquid-slider-wrapper .liquid-nav-right-arrow { width: 25px; height: 25px; background: url(../images/arrow-ls.png) no-repeat top right; margin-top: 50px; margin-right: 5px; /* Do not edit below this line */ position:relative; } .liquid-slider-wrapper .liquid-nav-left-arrow { width: 25px; height: 25px; background: url(../images/arrow-ls.png) no-repeat top left; margin-top: 50px; margin-left: 5px; /* Do not edit below this line */ position:relative; } .liquid-slider-wrapper .liquid-nav-left-arrow:hover { /* Left graphical arrows hover */ background: url(../images/arrow-ls.png) no-repeat bottom left; } .liquid-slider-wrapper .liquid-nav-left-arrow:active { /* Left graphical arrows click */ } .liquid-slider-wrapper .liquid-nav-right-arrow:hover { /* Right graphical arrows hover */ background: url(../images/arrow-ls.png) no-repeat bottom right; } .liquid-slider-wrapper .liquid-nav-right-arrow:active { /* Right graphical arrows click */ } .arrows .liquid-slider { /* Margin between slider and arrows */ margin: 0 10px; } .liquid-responsive .liquid-slider { /* Do not edit below this line */ width: 100%; margin: 0; } .liquid-responsive .liquid-slider .panel .panel-wrapper { margin-right:-20px; } .liquid-responsive .liquid-slider .panel .panel-wrapper > div {float:left;} .liquid-responsive .liquid-slider .panel .panel-wrapper > div .margin { margin:0 20px 20px 0; position: relative; overflow: hidden; } .liquid-responsive .liquid-nav-left { position: absolute; left: 0; z-index: 1; } .liquid-responsive .liquid-nav-left a { /* Left non-graphical arrows */ background: #9A9A9A; width: 80px; } .liquid-responsive .liquid-nav-left a:hover { /* Left non-graphical hover */ background: #747474; } .liquid-responsive .liquid-nav-right { /* Right non-graphical arrows */ /* Do not edit below this line */ position: absolute; right: 0; z-index: 1; } .liquid-responsive .liquid-nav-right a { /* Right non-graphical arrows */ background: #9A9A9A; width: 80px; } .liquid-responsive .liquid-nav-right a:hover { /* Right non-graphical arrows hover */ background: #747474; } .liquid-responsive .liquid-nav-left-arrow { /* Do not edit below this line */ position: absolute; left: 0; z-index: 1; } .liquid-responsive .liquid-nav-right-arrow { /* Do not edit below this line */ position: absolute; right: 0; z-index: 1; } .tp-carousel-posts.portf-cols a { display:block; } .tp-carousel-posts.portf-cols .hover a { line-height:0; } .tp-carousel-posts.portf-cols a span.title { height:100%; position:absolute; text-align:center; text-decoration:none; width:100%; z-index:100; top:0; right:0; line-height:normal; display:none; background: #333; background: rgba(0,0,0,.9); color:#FFF; /* padding:35% 8% 0; */ } .tp-carousel-posts.three-cols a span.title { padding:0 8%; } .tp-carousel-posts.portf-cols a span.title span{ position:relative; top:50%; margin-top:-14px; display:block; } .tp-carousel-posts.portf-cols a:hover span.title {} /****************************************************************** * Larger Mobile Devices * This is for devices like the Galaxy Note or something that's * larger than an iPhone but smaller than a tablet. ******************************************************************/ @media only screen and (min-width: 481px) { .liquid-slider-wrapper .liquid-slider .panel img{ /* Example */ /* width:24%; margin:2px; */ } } /****************************************************************** * Tablet & Smaller Laptops * This will include tablets and some netbooks. ******************************************************************/ @media only screen and (min-width: 768px) { .liquid-slider-wrapper .liquid-slider .panel img{ /* Example */ /* width:24%; */ } .liquid-responsive .liquid-slider .panel .panel-wrapper { /* padding: 20px 35px; */ } } /****************************************************************** * DESKTOP * This is the average viewing window. So Desktops, Laptops, and * in general anyone not viewing on a mobile device. Here's where * you can add resource intensive styles. ******************************************************************/ @media only screen and (min-width: 1030px) { } /****************************************************************** * LARGE VIEWING SIZE * This is for the larger monitors and possibly full screen viewers. ******************************************************************/ @media only screen and (min-width: 1240px) { } /****************************************************************** * RETINA (2x RESOLUTION DEVICES) * This applies to the retina iPhone (4s) and iPad (2,3) along with * other displays with a 2x resolution. You can also create a media * query for retina AND a certain size if you want. Go Nuts. ******************************************************************/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { }