/* * Ultimate Post Thumbnails main styles * * An id of #upt-container is added before most styles to prevent styles * affected by CSS rules like "#id li" from theme or other plugin, */ /* ___________________________________________________________________ Import FlexSlider Styles ___________________________________________________________________ */ /* Browser Resets *********************************/ #upt-container a:active, #upt-container a:focus {outline: none;} .upt-slides, #upt-container ol.flex-control-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .upt-thumb-slider {margin: 0; padding: 0;} .upt-thumb-slider .upt-item {display: none; -webkit-backface-visibility: hidden;} /* Hide the upt-slides before the JS is loaded. Avoids image jumping */ #upt-container .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .upt-slides element */ .upt-slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .upt-slides {display: block;} * html .upt-slides {height: 1%;} /* FlexSlider Default Theme *********************************/ .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .upt-thumb-slider .upt-slides { zoom: 1; } #upt-container .carousel li { margin-right: 5px; } /* Pause/Play */ #upt-container .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } #upt-container .flex-pauseplay a:before { font-family: "FontAwesome"; font-size: 20px; display: inline-block; content: '\f004'; } #upt-container .flex-pauseplay a:hover { opacity: 1; } #upt-container .flex-pauseplay a.flex-play:before { content: '\f003'; } /* Control Nav */ #upt-container ol.flex-control-nav {width: 91%; position: absolute; bottom: -40px; text-align: center;} #upt-container ol.flex-control-nav li {float:none;margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} #upt-container ol.flex-control-paging li a {cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } #upt-container ol.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } #upt-container ol.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } #upt-container ol.flex-control-thumbs {margin: 5px 0 0 18px; position: relative; } #upt-container ol.flex-control-thumbs li { margin: 0;} #upt-container ol.flex-control-thumbs img {margin:0; height:90px; width:100px; overflow:hidden;display: block; opacity: .7; cursor: pointer;} #upt-container ol.flex-control-thumbs img:hover {opacity: 1;} #upt-container ol.flex-control-thumbs .flex-active {opacity: 1; cursor: default;} /* ___________________________________________________________________ UPT Styles ___________________________________________________________________ */ /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .upt-slides > .upt-item:first-child {display: block;} .no-js #upt-container .upt-thumb-slider > span {display:none;} .upt.alignleft {margin:0.86em 1.7em 0 0;} .upt.alignright {margin:0.86em 0 0 1.7em;} .upt.aligncenter {margin:0.86em 0 0;} .upt-link {display:block;} .upt-container {max-width:100%;position:relative;display:inline-block;z-index:0;} .upt-container.upt-no-imgclass {padding:0;margin:0 0 1.7em;display:block} #upt-container:hover .flex-direction-nav a {opacity:0.8} .upt-thumb-slider {position:relative;} #upt-container.upt-promo-imgclass .upt-item img { margin:0;padding:0px;width:100%; } #upt-container .upt-item * {margin:0;} #upt-container .upt-item img {display:block; /*max-height:478px; */ margin:auto;} /* Direction Nav */ #upt-container .upt-thumb-slider > span { display: block; font-size:20px; width: 26px; height: 26px; line-height:26px; text-align:center; margin: -13px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: #000; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } @media only screen and (max-width: 470px) { #upt-container ol.flex-control-nav {width: 50%; position: absolute; bottom: -40px; text-align: center;} #upt-container ol.flex-control-thumbs {margin: 5px 0 0 -7px; position: static; } #upt-container .upt-item img {display:block;max-width:100%; max-height:300px; margin:auto;} } #upt-container .upt-thumb-slider > span:hover { opacity:1;} #upt-container .upt-thumb-slider > span.upt-previous { left: -20px; } #upt-container .upt-thumb-slider > span.upt-next { right: -20px; } #upt-container .upt-thumb-slider:hover span.upt-previous { opacity: 0.7; left: 10px; } #upt-container .upt-thumb-slider:hover span.upt-next { opacity: 0.7; right: 10px; } #upt-container .upt-thumb-slider:hover span.upt-next:hover, #upt-container .upt-thumb-slider:hover span.upt-previous:hover { opacity: 1; } #upt-container .upt-thumb-slider span.upt-previous:before { font-family: "FontAwesome"; display: inline-block; content: '\f053'; } #upt-container .upt-thumb-slider span.upt-next:before { font-family: "FontAwesome";display: inline-block;content: '\f054'; } /* Control Nav */ #upt-container ol.flex-control-paging * {margin:0;padding:0;} #upt-container ol.flex-control-paging {position:absolute;bottom:12px;z-index:99;height:14px;margin:0;padding:0;} #upt-container ol.flex-control-paging li {width:9px!important;height:9px!important;margin:0 4px!important;padding:0!important;} #upt-container ol.flex-control-paging li a {background-color:#000;opacity:0.5;display:inline-block;vertical-align:middle;width:9px;height:9px;line-height:14px;} /* Control Nav Thumbnails */ #upt-container ol.flex-control-thumbs * {margin:0;padding:0;} #upt-container ol.flex-control-thumbs li {padding:2px;box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */} #upt-container ol.flex-control-thumbs li img {box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */} /* possible to instead with CSS calc() - http://caniuse.com/#feat=calc #upt-container.upt-count-2 ol.flex-control-thumbs li {width:50%} #upt-container.upt-count-3 ol.flex-control-thumbs li {width:33.33%} #upt-container.upt-count-4 ol.flex-control-thumbs li {width:25%} #upt-container.upt-count-5 ol.flex-control-thumbs li {width:20%} #upt-container.upt-count-6 ol.flex-control-thumbs li {width:16.67%} #upt-container.upt-count-7 ol.flex-control-thumbs li {width:14.29%} #upt-container.upt-count-8 ol.flex-control-thumbs li {width:12.5%} #upt-container.upt-count-9 ol.flex-control-thumbs li {width:11.11%} #upt-container.upt-count-10 ol.flex-control-thumbs li {width:10%}*/ /* ___________________________________________________________________ Thumbnail Slider Style - Minimal White ___________________________________________________________________ */ #upt-container.upt-white .upt-thumb-slider > span { color: rgba(255, 255, 255, 0.8); } #upt-container.upt-white .upt-thumb-slider > span:hover { color: #fff; } #upt-container.upt-white ol.flex-control-paging li a { background-color:#fff; opacity:0.5; box-shadow:none; } #upt-container.upt-white ol.flex-control-paging li a:hover, #upt-container.upt-white ol.flex-control-paging li a.flex-active { background-color:#fff; opacity:0.9; } /* ___________________________________________________________________ Thumbnail Slider Style - Circle ___________________________________________________________________ */ #upt-container.upt-circle .upt-thumb-slider span.upt-previous:before { content: '\f137'; } #upt-container.upt-circle .upt-thumb-slider span.upt-next:before { content: '\f138'; } /* ___________________________________________________________________ Thumbnail Slider Style - Dock ___________________________________________________________________ */ #upt-container.upt-dock .upt-thumb-slider > span {width:30px;height:40px;line-height:40px;opacity:0;background-color:rgba(255,255,255,0.4);color:#fff;} #upt-container.upt-dock .upt-thumb-slider > span.upt-previous { left: 0; } #upt-container.upt-dock .upt-thumb-slider > span.upt-next { right: 0; } #upt-container.upt-dock .upt-thumb-slider:hover span.upt-previous { opacity: 0.7; } #upt-container.upt-dock .upt-thumb-slider:hover span.upt-next { opacity: 0.7;} #upt-container.upt-dock .upt-thumb-slider span.upt-previous:before {content: '\f104'; } #upt-container.upt-dock .upt-thumb-slider span.upt-next:before {content: '\f105'; } #upt-container.upt-dock.upt-black .upt-thumb-slider > span { background-color:rgba(0,0,0,0.7);color:rgba(255, 255, 255, 0.8); } /* ___________________________________________________________________ Thumbnail Slider Style - Round ___________________________________________________________________ */ #upt-container.upt-round .upt-thumb-slider > span {border-radius:40px;border:3px solid #fff;opacity:0;line-height:24px;} #upt-container.upt-round .upt-thumb-slider > span.upt-previous { left: 15px; } #upt-container.upt-round .upt-thumb-slider > span.upt-next { right: 15px; } #upt-container.upt-round .upt-thumb-slider:hover span.upt-previous { opacity: 0.4; } #upt-container.upt-round .upt-thumb-slider:hover span.upt-next { opacity: 0.4;} #upt-container.upt-round .upt-thumb-slider span.upt-previous:before {content: '\f104'; } #upt-container.upt-round .upt-thumb-slider span.upt-next:before {content: '\f105'; } #upt-container.upt-round ol.flex-control-paging li a {opacity:0.7} #upt-container.upt-round ol.flex-control-paging li a.flex-active {background-color:transparent;border:2px solid #fff;width:7px;height:7px;} #upt-container.upt-round.upt-black .upt-thumb-slider > span, #upt-container.upt-round.upt-black ol.flex-control-paging li a.flex-active {border-color:#000} #upt-container .upt-thumb-slider:hover span.upt-next:hover, #upt-container .upt-thumb-slider:hover span.upt-previous:hover { opacity: 0.9; } .arrow1 { border-color : #fff; border-style : solid; height : 0; overflow : hidden; display : inline-block; margin : 20px; clear : both; } .right1 { border-bottom-width: 7px; border-left-color: #abc; border-left-width: 10px; border-top-width: 7px; float: right; margin-top: -66px;position: relative; } #s2 { border-left-width : 7px; border-right-width : 7px; border-top-width : 10px; border-top-color : #abc; } .left1 { border-bottom-width: 7px; border-right-color: #abc; border-right-width: 10px; border-top-width: 7px; display: block; float: left; margin-left: -3px; margin-top: -66px;position: relative; } #s4 { border-left-width : 7px; border-right-width : 7px; border-bottom-width : 10px; border-bottom-color : #abc; } #sup #upt-container ol.flex-control-nav { width:95%; height:109px; } #sup1 #lefting, #righting {z-index: 50;} #sup1 #righting { display:block;margin-left: 580px;} @media only screen and (max-width: 470px) { #sup #upt-container ol.flex-control-nav { width:315px;margin-top:82px;} #upt-container ol.flex-control-nav { width:315px;margin-top:10px;} } .attachment-1100x777 {width:700px;max-width:700px;}