/* ####################################### */ /* ########### STANDARD SETUP ############ */ /* ####################################### */ .slider-image { width: 600px; height: 500px; } .slider-button { position: absolute; background: #ffffff; color: #000000; top : 0; min-width: 100px; } .slider-button-bold { font-weight: bold; color: red; } #widget_slider { width: 600px; height: 500px; overflow:hidden; position:relative; margin: 0 auto; } .protoshow, .protoshow .show { position: relative; margin: 0; padding: 0; list-style: none; width: 900px; height: 300px; } .slide { position: absolute; top: 0; left: 0; z-index: 90; height: 100%; } .active-slide { z-index: 100; } .protoshow .slide-caption { position: absolute; left: 0; bottom: 0; right: 0; z-index: 100; padding: 1em 10px; background-color: #000; background-color: rgba(0,0,0,.4); color:#fff; } .proto-progress-timer { position: absolute; top: 7px; right: 7px; z-index: 9999; } /* TRANSITION SLIDE ------------------------------------------------*/ .transition-slide .show-window { overflow: hidden; position: relative; } .transition-slide .show { position: absolute; top: 0; left: 0; width: 999999px; } .transition-slide .slide { position: static; /*overide*/ float: left; display: block; } /* PROTO CONTROLS ------------------------------------------------*/ .proto-controls, .proto-navigation { margin: 0; padding: 0; list-style: none; } .proto-controls a:link, .proto-controls a:visited, .proto-navigation a:link, .proto-navigation a:visited { display: block; text-indent: -9999px; overflow: hidden; } .proto-controls li { position: absolute; top: 50%; margin-top: -36px; left: 10px; width: 10%; height: 100%; z-index: 110; } .proto-controls .forward { right: 10px; left: auto; } .proto-controls a { width: 100%; height: 61px; background: url(https://www.solerpalau.com/) no-repeat 0 0; opacity: 0.2; -moz-opacity: 0.2; filter:alpha(opacity=20); } .proto-controls a:hover, .proto-controls a:focus { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=100); } .proto-controls .forward a { background-position: 100% -90px; } /* PROTO NAVIGATION ------------------------------------------------*/ .proto-navigation { position: absolute; bottom: 0; right: 50%; float: right; z-index: 120; } .proto-navigation li { float: left; left: 50%; padding: 12px 6px; position: relative; } .proto-navigation a { background-color: #fff; background-color: rgba(0,0,0,.2); height: 8px; text-decoration: none; width: 8px; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; -moz-box-shadow: inset 0 1px 0 1px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 1px 0 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 1px rgba(0,0,0,.1); } .proto-navigation a:hover, .proto-navigation a:focus { background-color: #999; } .proto-navigation .current-slide a { background-color: #363F4E; } /* .proto-navigation { margin: 0; padding: 0; list-style: none; position: absolute; right: 5px; bottom: -25px; z-index: 200; } .proto-navigation li { float: left; margin-right: 10px; } .proto-navigation li a:link, .proto-navigation li a:visited { display: block; width: 8px; height: 8px; text-decoration: none; background-color: rgba(255,255,255,0.5); border: 1px solid #090809; color: #666; text-indent: -9999px; overflow: hidden; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } .proto-navigation li a:hover, .proto-navigation li a:focus { background-color: #fff; border-color: #000; } .proto-navigation li.current-slide a:link, .proto-navigation li.current-slide a:visited { background-color: rgba(30,30,30,0.9); } .proto-controls { margin: 0; padding: 0; list-style: none; } .proto-controls .forward, .proto-controls .backward, .proto-controls .start-stop { z-index: 200; float: left; margin: 10px 10px 0 0; } .proto-controls .start-stop { margin-top: 10px; } .proto-controls a:link, .proto-controls a:visited { display: inline-block; background-color: #090809; background-image: -moz-linear-gradient( center top, rgb(123,125,130) 2%, rgb(75,80,88) 3%, rgb(42,45,50) 100% ); color: #fff; padding: 5px 10px; border: 1px solid #090809; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-decoration: none; text-align: center; width: 60px; } .proto-controls a:hover, .proto-controls a:focus { background-image: -moz-linear-gradient( center bottom, rgb(42,45,50) 100%, rgb(75,80,88) 90%, rgb(123,125,130) 20% ); color: #e1e1e1; } .slide-caption { position: absolute; bottom: 0px; left: 0px; width: 880px; background-color: rgba(0,0,0,.5); color: #fff; z-index: 200; padding: 10px; } .proto-timer { position: absolute; top: 10px; right: 10px; z-index: 9999; }*/ .s-center-text { text-align: center; } .highlight { font-weight: bold; } /* ************************************* */ /* OVERLAY SEARCH */ /* ************************************* */ .overlay { height: 100%; width: 0; position: fixed; z-index: 9999; left: 0; top: 0; background-color: rgb(255,255,255); overflow-x: hidden; transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); } .overlay-header { padding: 2%; position: relative; width: 100%; background: #dbdbdb; border-top: 20px black solid; } .overlay-header div { display: inline-block; vertical-align: middle; } .overlay-header .searchbox { border: 0; outline: 0; font-size: 26px; width: 100%; line-height: 50px; min-height: 50px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .overlay-header .closebtn { line-height: 50px; width: 50px; height: 50px; } .overlay-header .closebtn svg { fill: #000; } .overlay-content { padding: 2%; } .overlay-content h3 { padding: 25px 0; margin: 0; font-weight: normal; font-size: 20px; color: #3399cc; } /* ************************************* */ /* END - OVERLAY SEARCH */ /* ************************************* */ /* ************************************* */ /* LEFT BLOCK - PRODUCTS */ /* ************************************* */ .overlay-content .searcher-left .searched-prod { min-height: 110px; margin-bottom: 20px; } .overlay-content .searcher-left .searched-prod-info { display: none !important; } .overlay-content .searcher-left .searched-prod div.product-image { float: left; margin-right: 10px; border: 0; width: 75px; } .product-image { border: 0 !Important; } .overlay-content .searcher-left .searched-prod .product-name a { /*color: #414141;*/ } .overlay-content .searcher-left .searched-prod .product-price { margin-left: 85px; } .overlay-content .searcher-left .searched-prod .product-price .price-box { margin-bottom: 0; line-height: 15px; } .overlay-content .searcher-left .searched-prod .product-price .price-label { font-size: 11px; font-weight: normal; } .overlay-content .searcher-left .searched-prod .product-price span.price { color: #414141; font-weight: bold; } .overlay-content .searcher-left .searched-prod .product-price .minimal-price-link { text-decoration: none; font-size: 11px; } .overlay-content .searcher-left .searched-prod .product-price .minimal-price-link span.price { font-size: 11px; } .overlay-content .searcher-left .searched-prod .tax-details { display: none; } /* ************************************* */ /* END - LEFT BLOCK */ /* ************************************* */ /* ************************************* */ /* RIGHT BLOCK */ /* ************************************* */ .overlay-content .searcher-right { } .overlay-content .searcher-right ul li { padding: 3px 0; } .overlay-content .searcher-right ul li:last-child { padding: 3px 0 0; } .overlay-content .searcher-right ul li a { font-size: 15px; text-transform: uppercase; display: inline-block; vertical-align: middle; } /* ************************************* */ /* END - RIGHT BLOCK */ /* ************************************* */ /* Simple Grid Project Page - http://thisisdallas.github.com/Simple-Grid/ Author - Dallas Bass Site - http://dallasbass.com */ [class*='s-grid'], [class*='s-col-'], [class*='s-mobile-'], .s-grid:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class*='s-col-'] { float: left; min-height: 1px; padding-right: 20px; /* column-space */ } .s-grid { width: 100%; /*max-width: 1140px;*/ min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */ margin: 0 auto; overflow: hidden; } .s-grid:after { content: ""; display: table; clear: both; } .s-grid-pad { padding-top: 20px; padding-left: 20px; /* grid-space to left */ padding-right: 0; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */ } .push-right { float: right; } /* Content Columns */ .s-col-1-1 { width: 100%; } .s-col-2-3, .s-col-8-12 { width: 66.66%; } .s-col-1-2, .s-col-6-12 { width: 50%; } .s-col-1-3, .s-col-4-12 { width: 33.33%; } .s-col-1-4, .s-col-3-12 { width: 25%; } .s-col-1-5 { width: 20%; } .s-col-1-6, .s-col-2-12 { width: 16.667%; } .s-col-1-7 { width: 14.28%; } .s-col-1-8 { width: 12.5%; } .s-col-1-9 { width: 11.1%; } .s-col-1-10 { width: 10%; } .s-col-1-11 { width: 9.09%; } .s-col-1-12 { width: 8.33% } /* Layout Columns */ .s-col-11-12 { width: 91.66% } .s-col-10-12 { width: 83.333%; } .s-col-9-12 { width: 75%; } .s-col-5-12 { width: 41.66%; } .s-col-7-12 { width: 58.33% } /* Pushing blocks */ .push-2-3, .push-8-12 { margin-left: 66.66%; } .push-1-2, .push-6-12 { margin-left: 50%; } .push-1-3, .push-4-12 { margin-left: 33.33%; } .push-1-4, .push-3-12 { margin-left: 25%; } .push-1-5 { margin-left: 20%; } .push-1-6, .push-2-12 { margin-left: 16.667%; } .push-1-7 { margin-left: 14.28%; } .push-1-8 { margin-left: 12.5%; } .push-1-9 { margin-left: 11.1%; } .push-1-10 { margin-left: 10%; } .push-1-11 { margin-left: 9.09%; } .push-1-12 { margin-left: 8.33% } @media handheld, only screen and (max-width: 767px) { .s-grid { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 20px; /* grid-space to left */ padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */ } [class*='s-col-'] { width: auto; float: none; margin: 10px 0; padding-left: 0; padding-right: 10px; /* column-space */ } [class*='s-col-'] [class*='s-col-'] { padding-right: 0; } /* Mobile Layout */ [class*='s-mobile-s-col-'] { float: left; margin: 0 0 10px; padding-left: 0; padding-right: 10px; /* column-space */ padding-bottom: 0; } .s-mobile-s-col-1-1 { width: 100%; } .s-mobile-s-col-2-3, .s-mobile-s-col-8-12 { width: 66.66%; } .s-mobile-s-col-1-2, .s-mobile-s-col-6-12 { width: 50%; } .s-mobile-s-col-1-3, .s-mobile-s-col-4-12 { width: 33.33%; } .s-mobile-s-col-1-4, .s-mobile-s-col-3-12 { width: 25%; } .s-mobile-s-col-1-5 { width: 20%; } .s-mobile-s-col-1-6, .s-mobile-s-col-2-12 { width: 16.667%; } .s-mobile-s-col-1-7 { width: 14.28%; } .s-mobile-s-col-1-8 { width: 12.5%; } .s-mobile-s-col-1-9 { width: 11.1%; } .s-mobile-s-col-1-10 { width: 10%; } .s-mobile-s-col-1-11 { width: 9.09%; } .s-mobile-s-col-1-12 { width: 8.33% } /* Layout Columns */ .s-mobile-s-col-11-12 { width: 91.66% } .s-mobile-s-col-10-12 { width: 83.333%; } .s-mobile-s-col-9-12 { width: 75%; } .s-mobile-s-col-5-12 { width: 41.66%; } .s-mobile-s-col-7-12 { width: 58.33% } .hide-on-s-mobile { display: none !important; width: 0; height: 0; } } /* For tooltip target element that has set class="tooltip" */ .tooltip {text-decoration: none; border-bottom:1px dotted #004B6B;color: #004B6B; outline: none; } .tooltip-hide { display: none; } .tooltip-wrapper { padding: 0 10px; } .locate-info { float: right; } .locate-info-cat { display: inline-block; } /* For tooltip box */ #mcTooltip { line-height:16px; border-width: 1px; color:#333; border-color:#BBB; padding:20px; font-size: 12px; font-family: Verdana, Arial; border-radius:6px; background-color:#F6F6F6; } #mcTooltip.no-padding { padding:0; box-shadow: 0 4px 8px rgba(0,0,0,0.5); } #mcTooltip, #mcttCo b { box-shadow: 0 1px 8px rgba(0,0,0,0.5); } /* For hyperlink within tooltip */ #mcTooltip a { color:#069; } /* Close button. Available when sticky or overlay has been set to true, or is on touch-enabled devices. */ #mcttCloseButton { border-radius:4px; width:18px; height:18px; margin-right:2px; margin-top:2px; background:black; } /* Close button X symbol */ #mcttCloseButton:after { font:normal 38px/18px arial, sans-serif; color:white; top:0;left:-2px; } /* Give the close button a bigger size on smaller devices */ @media only screen and (max-width: 736px) { #mcttCloseButton { width:28px; height:28px; } #mcttCloseButton:after { font-size:48px; line-height:28px; } } /* Useful when overlay has been set to true or 1 in JS */ #mcOverlay { background-color: rgba(0,0,0,0.5); display:none;top:0;left:0;width:100%;height: 100%;overflow:visible;z-index:4; } #mcTooltip img {border:0;vertical-align:middle;} /* The settings below should remain unchanged */ #mcTooltipWrapper { position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:-2000px;} #mcTooltip { float:left;border-style:solid;position:relative;overflow:hidden;} .mcTooltipInner { float:left;position:relative;width:auto;height:auto;} #mcttCo, #mcttCo b{ position:absolute;overflow:hidden;} /* compatible with bootstrap */ #mcTooltip, #mcTooltip div {box-sizing:content-box;}