/** * @Name Theme Joomla Kupo Images Module * @URL http://kupo.themejoomla.com * @version $Id: extension.css 1 lumo $ * @package Joomla (1.5.x) * @subpackage Kupo Slides Template CSS * @copyright Copyright (C) 2008-2020 Theme Joomla, Site Source Solution. All rights reserved. E & OE * *** CSS Style Index *** 01 - Kupo Slides Default Styles & Resets *** 02 - Gallery Set View Styles *** 03 - Slide Show View Styles /*** 01 - Kupo Slides Default Styles & Resets ***/ #kupoGallery { clear: both; margin-bottom: 10px; display: block } .kupo { overflow: hidden; position: relative } #kupoGallery img.thumbnail { display: none } .kupo img { border: 0; margin: 0 } .kupo a { font-size: 100%; text-decoration: none; color: inherit } /* Default Backings for the Slide Containers */ .kupo .slideElement { position: absolute; z-index: 1; width: 100%; height: 100%; background: url('../img/preloader.gif') no-repeat center center } .kupo .loadingElement { position: absolute; z-index: 0; width: 100%; height: 100%; background: url('../img/preloader.gif') no-repeat center center } /* Hides the SEO Generated Content */ .kuposlides-hide { display: none; position: absolute; left: -5000px; top: -5000px } /*** 02 - Gallery Set View Styles ***/ /* Entire Gallery Selector Display Window */ .kupo .gallerySelector .gallerySelectorInner { overflow: hidden } .kupo .gallerySelector .gallerySelectorWrapper { overflow: hidden } .kupo .gallerySelector { position: absolute; top: 0; left: 0; z-index: 20; width: 100%; height: 100% } /* Gallery View Group Heading and Description */ h1.groupHeading, h2.groupHeading, h3.groupHeading, h4.groupHeading { margin: 0px; display: block; clear: both; padding: 10px 10px 5px 10px } p.groupDescription { margin: 0px; display:block; padding: 0px 10px 10px 10px; font-size: 12px } /* Gallery View Group Page Title */ .kupo .gallerySelector h1, .kupo .gallerySelector h2, .kupo .gallerySelector h3 { margin-left: 10px; padding: 0px } /* Gallery View Button */ .kupo .gallerySelector .gallerySelectorInner div.galleryButton { padding: 10px; padding-bottom: 0px; text-align: left; float: left; background: #FFF url('../img/galleryback.png') repeat-x; cursor: pointer; overflow: hidden; position: relative } .kupo .gallerySelector .gallerySelectorInner div.galleryButton:hover { background: #FFF url('../img/gallerybackhover.png') repeat-x; cursor: pointer } /* Gallery View Button Thumbnail Container */ .kupo .gallerySelector .gallerySelectorInner div.galleryButton div.preview { background: #FFF; background-position: center center; float: left; border: none; width: 40px; height: 40px; margin-right: 5px } /* Gallery View Button Category Title Heading */ .kupo .gallerySelector .gallerySelectorInner div.galleryButton h1, .kupo .gallerySelector .gallerySelectorInner div.galleryButton h2, .kupo .gallerySelector .gallerySelectorInner div.galleryButton h3, .kupo .gallerySelector .gallerySelectorInner div.galleryButton h4 { margin: 0; padding: 0; padding-bottom: 13px; float: left; width: 100%; letter-spacing: normal; font-size: 12px; font-weight: normal; font-family: Helvetica; text-transform: uppercase } .kupo .gallerySelector .gallerySelectorInner div.galleryButton h1:hover, .kupo .gallerySelector .gallerySelectorInner div.galleryButton h2:hover, .kupo .gallerySelector .gallerySelectorInner div.galleryButton h3:hover, .kupo .gallerySelector .gallerySelectorInner div.galleryButton h4:hover { text-decoration: underline } /* Gallery View Button Description */ .infoBlock p { font-size: 12px } /* Gallery View Button Image Count */ p.count { background-color: #F7F7F7; color: #999; font-style: italic; text-transform: uppercase; position: absolute; bottom: 10px; right: 10px; padding: 3px 7px; font-size: 9px; letter-spacing: 1px } /*** 03 - Slide Show View Styles ***/ /* Slide Image Information Container */ .kupo .slideInfoZone { position: absolute; overflow: hidden; z-index: 15; margin: 0px; color: #fff; text-indent: 0; background-image: url('../img/transparent.png') } /* Slide Image Title */ .kupo .slideInfoZone h2 { padding: 0; margin: 10px; font-size: 26px; font-weight: bold; font-family: Helvetica } /* Slide Image Description Text Container */ .kupo .slideInfoZone div { padding: 0; font-size: 12px; margin: 5px 13px } /* Back to Gallery List Link Button */ .kupo a.gallerySelectorBtn { position: absolute; z-index: 15; text-align: center; padding: 5px 10px; font-size: 10px; text-transform: uppercase; cursor: pointer; background-image: url('../img/transparent.png') } /* Gallery Control Buttons (play/pause/next/prev/first/last) */ .kuposlides-buttons { display: none; cursor: pointer; position: absolute; z-index: 13 } /* Read More and Image Date Link Styling */ .kupo span.author, .kupo div.dateread { color: #ccc; padding: 5px 10px; background-color: #333; position: absolute; bottom: 10px; right: 10px; font-size: 10px; text-transform: uppercase } /* Slide View Thumbnail Description Text */ .kupo .kupo_label, .kupo_ext_carousel .kupo_label { position: absolute; z-index: 15; font-size: 10px; color: #FFF; padding: 5px 10px; margin: 0; text-transform: uppercase; font-style: italic; display: none; background-image: url('../img/transparent.png') } /* Slide View Thumbnail Description Text Count*/ .kupo .kupo_label .number, .kupo_ext_carousel .kupo_label .number { color: #CCC } /* KML Thumbnails container wrapper for scrolling etc */ .kupo div.carouselContainer { position: absolute; left: 0;top: 0; z-index: 14; width: 100%; margin: 0px } .kupo .carouselWrapper, .kupo_ext_carousel .carouselWrapper { position: absolute; top: 0; left: 0; overflow: hidden } /* KML Thumbnail Holder and Positioning */ #kupo_images_thumbnails { text-align: left; float: left; margin: 0 auto; overflow:hidden; border: none; position: absolute; z-index: 15 } /* KML Gallery Thumbnails Styling */ .thumbnail { cursor: pointer; margin: 5px; background:#666 url('../img/fleche2.png') no-repeat center center } /* Left and Right Navigation Buttons (Over Image Selection) */ .kupo a.right, .kupo a.left { position: absolute; z-index: 13; height: 99%; width: 15%; cursor: pointer } .kupo a.left { left: 0; top: 0; background: url('../img/fleche1.png') no-repeat center left } .kupo a.right { right: 250px; top: 0; background: url('../img/fleche2.png') no-repeat center right } .kupo a.left:hover { background: url('../img/fleche1hover.png') no-repeat center left } .kupo a.right:hover { background: url('../img/fleche2hover.png') no-repeat center right } /* Kupo Modal Lightbox Base Settings */ div#nyroModalFull { font-size: 12px; color: #777 } /* KML Loading Box */ div#nyroModalLoading { border: 10px solid #111; text-indent: -9999em; width: 150px; height: 150px; background: #222 url(../img/ajaxLoader.gif) no-repeat; background-position: center } div#nyroModalLoading.error { border: 10px solid #f66; line-height: 20px; padding: 20px; width: 300px; height: 100px; text-indent: 0; background: #FFF } /* KML Image Wrapper around Displayed Image */ div#nyroModalWrapper { background: #000; border: 10px solid #111 } /* KML Close Button */ a#closeBut { position: absolute; display: block; top: -11px; right: -11px; width: 30px; height: 30px; text-indent: -9999em; background: url(../img/closebox.png) no-repeat; outline: 0; z-index: 1000 } /* KML Image Titles */ #nyroModalTitle { text-align: center; width: 100%; margin: 0; padding: 0; position: absolute; top: 0px; left: 0px; z-index: 30; height: 50px; line-height: 50px; font-size: 22px; color: #9FD4FF; background: url(../img/transparent.png) no-repeat top left } /* KML navigation buttons positioning and styling */ a.nyroModalPrev, a.nyroModalNext { z-index: 105; outline: none; position: absolute; top: 0; display: block; height: 100%; width: 40%; cursor: pointer; text-indent: -9999em } .ie a.nyroModalPrev, .ie a.nyroModalNext {background: url(../img/blankspacer.png) repeat top left} a.nyroModalPrev { left: 0 } a.nyroModalPrev:hover { background: url(../img/fleche1hover.png) left 20% no-repeat } a.nyroModalNext { right: 20px } a.nyroModalNext:hover { background: url(../img/fleche2hover.png) right 20% no-repeat } /* KML Modal Light Box Link Over Image */ .kupo a.nyroModal { left: 0; top: 0; width: 100%; height: 100% } .withArrows a.nyroModal { position: absolute; top: 0; left: 15%; z-index: 12; height: 99%; width: 65%; cursor: pointer } /* KML Open Image Link on Slide */ .withArrows a.nyroModal:hover { background: url('../img/open.png') no-repeat center center }