/* ==================== PrettyPhoto Contents ============================================= 1 Theme 2 Required 3 Media Queries 4 Mark Up Examples ================================================================================== */ /* ==== 1 Theme ===================================================================== */ div.pp_default .pp_top, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_right, div.pp_default .pp_bottom, div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right {height: 13px;} div.pp_default .pp_top .pp_left {background: url(../images/prettyPhoto/sprite.png) -78px -93px no-repeat;} /* Top left corner */ div.pp_default .pp_top .pp_middle {background: url(../images/prettyPhoto/sprite_x.png) top left repeat-x;} /* Top pattern/color */ div.pp_default .pp_top .pp_right {background: url(../images/prettyPhoto/sprite.png) -112px -93px no-repeat;} /* Top right corner */ div.pp_default .pp_content .ppt {color: #F8F8F8;} div.pp_default .pp_content_container .pp_left {background: url(../images/prettyPhoto/sprite_y.png) -7px 0 repeat-y;padding-left: 13px;} div.pp_default .pp_content_container .pp_right {background: url(../images/prettyPhoto/sprite_y.png) top right repeat-y;padding-right: 13px;} div.pp_default .pp_content {background-color: #FFFFFF;} /* Content background */ div.pp_default .pp_next:hover {background: url(../images/prettyPhoto/sprite_next.png) center right no-repeat;cursor: pointer;} /* Next button */ div.pp_default .pp_previous:hover {background: url(../images/prettyPhoto/sprite_prev.png) center left no-repeat;cursor: pointer;} /* Previous button */ div.pp_default .pp_expand {background: url(../images/prettyPhoto/sprite.png) 0 -29px no-repeat;cursor: pointer;width: 28px;height: 28px;} /* Expand button */ div.pp_default .pp_expand:hover {background: url(../images/prettyPhoto/sprite.png) 0 -56px no-repeat;cursor: pointer;} /* Expand button hover */ div.pp_default .pp_contract {background: url(../images/prettyPhoto/sprite.png) 0 -84px no-repeat;cursor: pointer;width: 28px;height: 28px;} /* Contract button */ div.pp_default .pp_contract:hover {background: url(../images/prettyPhoto/sprite.png) 0 -113px no-repeat;cursor: pointer;} /* Contract button hover */ div.pp_default .pp_close {width: 30px;height: 30px;background: url(../images/prettyPhoto/sprite.png) 2px 1px no-repeat;cursor: pointer;} /* Close button */ div.pp_default #pp_full_res .pp_inline {color: #000000;} div.pp_default .pp_gallery ul li a {background: url(../images/prettyPhoto/default_thumb.png) center center #F8F8F8;border: 1px solid #000;} div.pp_default .pp_gallery ul li a:hover, div.pp_default .pp_gallery ul li.selected a {border-color: #FFF;} div.pp_default .pp_social {margin-top: 7px;} div.pp_default .pp_gallery a.pp_arrow_previous, div.pp_default .pp_gallery a.pp_arrow_next {position: static;left: auto;} div.pp_default .pp_nav .pp_play, div.pp_default .pp_nav .pp_pause {background: url(../images/prettyPhoto/sprite.png) -51px 1px no-repeat;height: 30px;width: 30px;} div.pp_default .pp_nav .pp_pause {background-position: -51px -29px;} div.pp_default .pp_details {position: relative;} div.pp_default a.pp_arrow_previous, div.pp_default a.pp_arrow_next {background: url(../images/prettyPhoto/sprite.png) -31px -3px no-repeat;height: 20px;margin: 4px 0 0 0;width: 20px;} div.pp_default a.pp_arrow_next {left: 52px;background-position: -82px -3px;} /* The next arrow in the bottom nav */ div.pp_default .pp_content_container .pp_details {margin-top: 5px;} div.pp_default .pp_nav {clear: none;height: 30px;width: 110px;position: relative;} div.pp_default .pp_nav .currentTextHolder {font-family: Arial, Helvetica, sans-serif;font-style: italic;color: #999;font-size: 11px;left: 75px;line-height: 25px;margin: 0;padding: 0 0 0 10px;position: absolute;top: 2px;} div.pp_default .pp_close:hover, div.pp_default .pp_nav .pp_play:hover, div.pp_default .pp_nav .pp_pause:hover, div.pp_default .pp_arrow_next:hover, div.pp_default .pp_arrow_previous:hover {opacity: 0.7;} /* ==== Anchor Description ==== */ div.pp_default .pp_description {font-size: 11px;font-weight: bold;line-height: 1.25em;margin: 5px 50px 5px 120px;text-align: left;} div.pp_default .pp_bottom .pp_left {background: url(../images/prettyPhoto/sprite.png) -78px -127px no-repeat;} /* Bottom left corner */ div.pp_default .pp_bottom .pp_middle {background: url(../images/prettyPhoto/sprite_x.png) bottom left repeat-x;} /* Bottom pattern/color */ div.pp_default .pp_bottom .pp_right {background: url(../images/prettyPhoto/sprite.png) -112px -127px no-repeat;} /* Bottom right corner */ div.pp_default .pp_loaderIcon {background: url(../images/prettyPhoto/loader.gif) center center no-repeat;} /* Loader icon */ /* ==== 2 Required (DO NOT CHANGE) ==================================================== */ div.pp_pic_holder a:focus {outline: none;} div.pp_overlay {background: #000000;display: none;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;min-width: 40px;} * html .pp_content {width: 40px;} .pp_fade {display: none;} .pp_content_container {position: relative;text-align: left;width: 100%;} .pp_content_container .pp_left {padding-left: 20px;} .pp_content_container .pp_right {padding-right: 20px;} .pp_content_container .pp_details {float: left;margin: 10px 0 2px 0;} .pp_description {display: none;margin: 0;} .pp_social {float: left;margin: 0;} .pp_social .facebook {float: left;margin-left: 5px;width: 55px;overflow: hidden;} .pp_social .twitter {float: left;} .pp_nav {clear: right;float: left;margin: 3px 10px 0 0;} .pp_nav p {float: left;margin: 2px 4px;white-space: nowrap;} .pp_nav .pp_play, .pp_nav .pp_pause {float: left;margin-right: 4px;text-indent: -10000px;} a.pp_arrow_previous, a.pp_arrow_next {display: block;float: left;height: 15px;margin-top: 3px;overflow: hidden;text-indent: -10000px;width: 14px;} .pp_hoverContainer {position: absolute;top: 0;width: 100%;z-index: 2000;} .pp_gallery {display: none;left: 50%;margin-top: -50px;position: absolute;z-index: 10000;} .pp_gallery div {float: left;overflow: hidden;position: relative;} .pp_gallery ul {float: left;height: 35px;margin: 0 0 0 5px;padding: 0;position: relative;white-space: nowrap;} .pp_gallery ul a {border: 1px #000 solid;border: 1px rgba(0,0,0,0.5) solid;display: block;float: left;height: 33px;overflow: hidden;} .pp_gallery ul a:hover, .pp_gallery li.selected a {border-color: #FFFFFF;} .pp_gallery ul a img {border: 0;} .pp_gallery li {display: block;float: left;margin: 0 5px 0 0;padding: 0;} .pp_gallery li.default a {background: url(../images/default_thumbnail.gif) 0 0 no-repeat;display: block;height: 33px;width: 50px;} .pp_gallery li.default a img {display: none;} .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next {margin-top: 7px !important;} a.pp_next {background: url(../images/btnNext.png) 10000px 10000px no-repeat;display: block;float: right;height: 100%;text-indent: -10000px;width: 49%;} a.pp_previous {background: url(../images/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 {position: absolute;right: 0;top: 0;display: block;line-height: 22px;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: block;height: 24px;left: 50%;margin: -12px 0 0 -12px;position: absolute;top: 50%;width: 24px;} #pp_full_res {line-height: 1 !important;} #pp_full_res .pp_inline {text-align: left;} #pp_full_res .pp_inline p {margin: 0 0 15px 0;} div.ppt {padding: 0em;color: #FFFFFF;display: none;font-size: 1em;margin: 0em auto 0.75em auto;z-index: 9999;text-align: center;width: 100%;} /* ==== 3 Media Queries (devices and browsers) =============================================== */ /* ========== Tablet + Portrait (768px) ========== */ @media only screen and (min-width: 768px) and (max-width: 959px) { /* prettyPhoto styling for small screens */ .pp_pic_holder {overflow: hidden;width: 95%!important;height: auto!important;left: 2%!important;text-align: center;} .pp_content {width: 99%!important;height: auto!important;background-color: #FFFFFF;padding-right: 1%;} .pp_hoverContainer {width: 80%!important;height: auto!important;} #pp_full_res img {width: 100%!important;height: auto!important;} .pp_details {padding: 5px;width: 100%!important;margin-top: 5px!important;} a.pp_close {right: 10px!important;top: 10px!important;} .pp_content_container .pp_left, .pp_content_container .pp_right {padding-left: 0px;} a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery {display: none!important;} /* ++++ MQ END ++++ */}/* ++++ MQ END ++++ */ /* ========== Mobile + Screens ========== */ @media only screen and (max-width: 767px) { .pp_pic_holder.pp_default {width: 95%!important;left: 2% !important;overflow: hidden;} div.pp_default .pp_content_container .pp_left {padding-left: 0!important;} div.pp_default .pp_content_container .pp_right {padding-right: 0!important;} .pp_content {width: 100%!important;height: auto!important;} .pp_fade {width: 100%!important;height: 100%!important;} a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom {display: none!important;} #pp_full_res img {width: 100%!important;height: auto!important;} .pp_details {width: 94%!important;padding-left: 3%;padding-right: 4%;padding-top: 2px;padding-bottom: 4px;background-color: #FFF;margin-top: -2px!important;} a.pp_close {right: 10px!important;top: 5px!important;} /* ++++ MQ END ++++ */}/* ++++ MQ END ++++ */ /* ==== 4 Mark Up Examples ============================================================= */ /* ==== Single Image car ==== with captions Title Here ==== */ /* ==== Array Images car ==== with captions Title Here ==== */ /* ==== Flash Content (?width=100&height=100) Title ==== */ /* ==== YouTube Content Title ==== */ /* ==== Vimeo Content Title ==== */ /* ==== Quick Time (?width=100&height=100) rel="prettyPhoto[movies]" title="Despicable Me">Title ==== */ /* ==== iFrame External Site Google.com ==== */ /* ==== Inline Content Title
This is inline content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

==== */ /* ==== END ====================================================================== */