/* ------------------------------------------------------------------------ This you can edit. ------------------------------------------------------------------------- */ div.light_rounded .pp_top .pp_left { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.light_rounded .pp_top .pp_middle { background: #fff; } /* Top pattern/color */ div.light_rounded .pp_top .pp_right { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.light_rounded .pp_content { background-color: #fff; } /* Content background */ div.light_rounded .pp_next:hover { background: url(../resources/images/pretty_photo/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_rounded .pp_previous:hover { background: url(../resources/images/pretty_photo/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_rounded .pp_expand { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_rounded .pp_expand:hover { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_rounded .pp_contract { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_rounded .pp_contract:hover { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.light_rounded .pp_close { width: 75px; height: 22px; background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.light_rounded .pp_arrow_previous { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.light_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_rounded .pp_arrow_next { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.light_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_rounded .pp_bottom .pp_left { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.light_rounded .pp_bottom .pp_middle { background: #fff; } /* Bottom pattern/color */ div.light_rounded .pp_bottom .pp_right { background: url(../resources/images/pretty_photo/light_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.light_rounded .pp_loaderIcon { background: url(../resources/images/pretty_photo/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Dark Rounded Theme ----------------------------------- */ div.dark_rounded .pp_top .pp_left { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.dark_rounded .pp_top .pp_middle { background: url(../resources/images/pretty_photo/dark_rounded/contentPattern.png) top left repeat; } /* Top pattern/color */ div.dark_rounded .pp_top .pp_right { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.dark_rounded .pp_content { background: url(../resources/images/pretty_photo/dark_rounded/contentPattern.png) top left repeat; } /* Content background */ div.dark_rounded .pp_next:hover { background: url(../resources/images/pretty_photo/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_rounded .pp_previous:hover { background: url(../resources/images/pretty_photo/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.dark_rounded .pp_expand { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_rounded .pp_expand:hover { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_rounded .pp_contract { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_rounded .pp_contract:hover { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.dark_rounded .pp_close { width: 75px; height: 22px; background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.dark_rounded .currentTextHolder { color: #c4c4c4; } div.dark_rounded .pp_description { color: #fff; } div.dark_rounded .pp_arrow_previous { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.dark_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.dark_rounded .pp_arrow_next { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.dark_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.dark_rounded .pp_bottom .pp_left { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.dark_rounded .pp_bottom .pp_middle { background: url(../resources/images/pretty_photo/dark_rounded/contentPattern.png) top left repeat; } /* Bottom pattern/color */ div.dark_rounded .pp_bottom .pp_right { background: url(../resources/images/pretty_photo/dark_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.dark_rounded .pp_loaderIcon { background: url(../resources/images/pretty_photo/dark_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Dark Square Theme ----------------------------------- */ div.dark_square .pp_left , div.dark_square .pp_middle, div.dark_square .pp_right, div.dark_square .pp_content { background: url(../resources/images/pretty_photo/dark_square/contentPattern.png) top left repeat; } div.dark_square .currentTextHolder { color: #c4c4c4; } div.dark_square .pp_description { color: #fff; } div.dark_square .pp_loaderIcon { background: url(../resources/images/pretty_photo/dark_rounded/loader.gif) center center no-repeat; } /* Loader icon */ div.dark_square .pp_expand { background: url(../resources/images/pretty_photo/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_square .pp_expand:hover { background: url(../resources/images/pretty_photo/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_square .pp_contract { background: url(../resources/images/pretty_photo/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_square .pp_contract:hover { background: url(../resources/images/pretty_photo/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.dark_square .pp_close { width: 75px; height: 22px; background: url(../resources/images/pretty_photo/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.dark_square .pp_arrow_previous { background: url(../resources/images/pretty_photo/dark_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.dark_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.dark_square .pp_arrow_next { background: url(../resources/images/pretty_photo/dark_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.dark_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.dark_square .pp_next:hover { background: url(../resources/images/pretty_photo/dark_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_square .pp_previous:hover { background: url(../resources/images/pretty_photo/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ /* ---------------------------------- Light Square Theme ----------------------------------- */ div.light_square .pp_left , div.light_square .pp_middle, div.light_square .pp_right, div.light_square .pp_content { background: #fff; } div.light_square .pp_expand { background: url(../resources/images/pretty_photo/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_square .pp_expand:hover { background: url(../resources/images/pretty_photo/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_square .pp_contract { background: url(../resources/images/pretty_photo/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_square .pp_contract:hover { background: url(../resources/images/pretty_photo/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.light_square .pp_close { width: 75px; height: 22px; background: url(../resources/images/pretty_photo/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.light_square .pp_arrow_previous { background: url(../resources/images/pretty_photo/light_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.light_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_square .pp_arrow_next { background: url(../resources/images/pretty_photo/light_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.light_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_square .pp_next:hover { background: url(../resources/images/pretty_photo/light_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_square .pp_previous:hover { background: url(../resources/images/pretty_photo/light_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ /* ------------------------------------------------------------------------ DO NOT CHANGE ------------------------------------------------------------------------- */ div.pp_pic_holder a:focus { outline:none; } div.pp_overlay { background: #000; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500; } div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; } .pp_top { height: 20px; position: relative; } * html .pp_top { padding: 0 20px; } .pp_top .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_top .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_top .pp_middle { left: 0; position: static; } .pp_top .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_content { height: 40px; position: relative; text-align: left; width: 100%; } .pp_content .pp_details { display: none; margin: 10px 15px 2px 20px; } .pp_description { display: none; float: left; margin: 0; } .pp_nav { clear: left; float: left; margin: 3px 0 0 0; } .pp_nav p { float: left; margin: 2px 4px; } .pp_nav a.pp_arrow_previous, .pp_nav a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; overflow: hidden; text-indent: -10000px; width: 14px; } .pp_hoverContainer { left: 0; position: absolute; top: 0; width: 100%; z-index: 2000; } a.pp_next { background: url(../resources/images/pretty_photo/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: right; height: 100%; text-indent: -10000px; width: 49%; } a.pp_previous { background: url(../resources/images/pretty_photo/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: left; height: 100%; text-indent: -10000px; width: 49%; } a.pp_expand, a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000; } a.pp_close { display: block; float: right; text-indent: -10000px; } .pp_bottom { height: 20px; position: relative; } * html .pp_bottom { padding: 0 20px; } .pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_bottom .pp_middle { left: 0; position: static; } .pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_loaderIcon { display: none; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px; } #pp_full_res { display: none; line-height: 1 !important; margin: 0 auto; text-align: center; width: 100%; } div.ppt { /*color: #fff; -- CUSTOM: Disabled here so we can control from custom style at bottom of page. font-size: 17px;*/ display: none; left: 0; position: absolute; top: 0; z-index: 9999; } /* ------------------------------------------------------------------------ Miscellaneous ------------------------------------------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ------------------------------------------------------------------------ CUSTOM/OVERRIDEN STYLES ------------------------------------------------------------------------- */ .ppt { /* "div" Title text which appears above the image as white text. Note: The "showTitle" javascript property is set to false. */ color: #fff; font-size: 1em; } .pp_content .pp_details { /* "div" Contains description and navigation text regions. */ /* Adjustments need to be made here due to a bug in the authors code that doesn't readjust the margin of this region when the "padding" javascript (jquery.prettyPhoto.js) is changed from its default setting of "40". The default margin setting is "margin: 10px 15px 2px 20px;". */ /* Adjustment if the property is set to "20". */ margin: 10px 25px 2px 10px; } .pp_description { /* "p" Description text. */ color: #555; font-size: .7em; font-family: Verdana, Geneva, sans-serif; } .pp_nav { /* "div" Contains the "currentTextHolder" region as well as the navigation arrows. */ } .pp_nav p { /* "p" Represents the "currentTextHolder" region. */ margin-top: 0px; /* Remove space above text because it's shifted below nav arrows. */ margin-left: 2px; /* Remove adjust space to left of text by -2px for better alignment. */ } .currentTextHolder { /* "p" Navigation text "1/4". */ color: #555; font-size: .8em; font-family: Verdana, Geneva, sans-serif; } .pp_bottom, .pp_bottom .pp_left, .pp_bottom .pp_middle, .pp_bottom .pp_right { /* "div" Represents the bottom regions that contain the lower "pp_left", "pp_middle", and "pp_right" regions. The "pp_left" and "pp_right" regions contain the curved themes when they are set. When they are not set this entire region appears too large. */ height: 10px; /* If a curved theme is not set, use this style to adjust the height of these regions for a better visual look and feel. */ } .pp_arrow_previous { /* "a" Previous arrow in gallery mode. */ /* Set custom background image here for previous arrow. */ } .pp_array_next { /* "a" Next arrow in gallery mode. */ /* Set custom background image here for next arrow. */ }