.mainTPContainer {
   background: var(--pres-main-bg-light);
   padding: 20px;
}

.pagingCtr {
   font-size: 1em;
   float: right;
}

.pgDisabled, .pgActiveNum,
.pgSelect, .pgDisabledNum,
.pgEnabled {
   float: left;  
   padding: 5px;
}

.pgDisabled, .pgDisabledNum {
   color: #bbbbbb;   
}

.pgActiveNum {
   text-align: center;
   background: var(--pres-soft-black);  
   color: var(--pres-light-fg-color);
   width: 30px;
}

.pgSelect, .pgEnabled {
   text-decoration: underline;
   cursor: pointer;
}

#headingContainer
{
   width: 700px;
   height: auto;
   float: left;
   margin: 10px 0px 0px 0px;
   border: solid;
   border-width: 0px 0px 1px 0px;
   border-color: #dddddd;
}

.albumIconRight {
   position: absolute;
   z-index: 1;
   height: 45px;
   width: 65px;
   top: 65%;
   left: 70%;  
   display:none;
}

.albumRapper {
   width: 25%;
   margin: 0px 0px 0px 0px;
   float:left;
   border: solid 2px #ffffff;
}

.albumSlider {
   float:left;
   width: 100%;
}

.albumsContainer
{
   width: 100%;
   height: auto;
   float: left;
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: dotted 1px #bbbbbb;
}

.tabContainer
{
   float: left;
   clear: both;
   width: 100%;
   height: auto;  
   margin: 0px 0px 0px 0px;
}

.leftArrow
{
   width: 0px;
   height:0px;
   float: left;
   border-right: 20px solid #2d88b7;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   margin: 80px 10px 0px 10px;
}

.albumTab
{
   position: relative;
   overflow: hidden;
   width: 100%;
}

.albumTabSelected
{
   width: 100px;
   height: auto;
   margin: 0px 0px 0px 0px;
   float: left;
}

.album {
   margin: 0px 0px 0px 0px;
   overflow: hidden;
   position: relative;
   padding-top: 100%;
}

.album *
{
    vertical-align: middle;
}

.albumImgsrc
{
   max-height: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);  
}

.albumName
{
   margin: 0px 0px 0px 0px;
   font-size: .9em;
   width: 100%;
   padding: 10px 0px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   float: left;
   clear: both;
}

.rightArrow
{
   width: 0px;
   height: 0;
   border-left: 20px solid #2d88b7;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   float: left;
   margin: 53px 10px 0px 10px;
}

.trapezoid {
   float: left;
   clear: both;
   border-bottom: 13px solid #aaaaaa;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   height: 0px;
   width: 620px;     
   margin: 0px 0px 0px 35px;
}

.lineDivide2 {
   float: left;
   clear: both; 
   width: 100%;
   height: 0px;
   border-bottom: solid 1px #bbbbbb;
   margin: 10px 0px 0px 0px;  
}

.photoWrapper {
   float: left;
   height: auto;
   width: 100%;
}

.photoContainer
{
   width: 100%;
   float: left;
   clear: both; 
   height: auto;
}

.galleryRapper
{
   float: left;
   width: 100%;
   height: auto;
}

.galleryPhotos
{
   width: 100%;
   float: left;
   clear: both;
}

.photoTabContainer
{
   width: 100%;
   float: left;
   clear: both;
   height: auto;
}

.photoTab
{
   width: 20%;
   float: left;
   border: solid 2px #ffffff;
   overflow: hidden;
}

.addImage, .addVideo
{
   cursor: pointer;
   background: #eeeeee;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}

/*.addImage
{
   width: 110px;
   height: 47px;
   float: left;
   margin: 15px 13px 0px 13px;
   cursor: pointer;
   border: dashed;
   border-width: 1px;
   border-color: #aaaaaa;
   

   font-size: 8pt;
   text-align: center;
   color: #454545;
   background-color: #dddddd;
   padding-top: 35px;
   text-shadow: 0px 1px 1px #ffffff;
}*/

.image
{
   width: 100%;
   text-align: center;
   margin: 0px;
   float: left;
   padding-top: 100%;
   position: relative;
   overflow: hidden;
}

.imgsrc, .imgsrcYT, 
.taggedVideo, .addImage, .addVideo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   max-height: 100%;
}

#pAll {
   border-radius: 5px 0px 0px 5px;
   -webkit-border-radius: 5px 0px 0px 5px;
   -moz-border-radius: 5px 0px 0px 5px;
}

#pVideo {
   border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;
   -moz-border-radius: 0px 5px 5px 0px;   
}

#pPhoto {
   border-left: solid 1px #ffffff;
   border-right: solid 1px #ffffff;  
   border-radius: 0px 0px 0px 0px;
   -webkit-border-radius: 0px 0px 0px 0px;
   -moz-border-radius: 0px 0px 0px 0px;
}

#pPhoto:hover {
   border-left: solid 1px #ffffff;
   border-right: solid 1px #ffffff;       
}

.pBtn 
{
   background: var(--pres-soft-black);
   color: var(--pres-light-fg-color);
   cursor: pointer;
   float: left;
   font-size: .9em;
   margin: 5px 0px 5px 0px;
   padding: 10px;
   text-align: center;
   width: 80px;
}

.pBtn:hover {
   background-color: #888888;  
}

.loading
{
   height: 55px;
   width: 108px;
   background-image: url(/images/ajax-loader.gif);
   background-repeat:  no-repeat;
   background-position: 0px 25px;
   display: none;
   box-shadow: 0px 0px 5px #000000;
}

.photoRightArrowSrc
{
   float: right;
   width: 0px;
   height: 0px;
   margin: 150px 10px 0px 0px;
   border-left: 20px solid #aaaaaa;
   border-top: 40px solid transparent;
   border-bottom: 40px solid transparent;
}

.photoLeftArrowSrc
{
   width: 0px;
   height: 0px;
   margin: 150px 0px 0px 10px;
   border-right: 20px solid #aaaaaa;
   border-top: 40px solid transparent;
   border-bottom: 40px solid transparent;
   float: left;
}

.photoSlider {
   float: left;
   clear: both;
   height: auto;
   width: 100%;
   margin-bottom: 5px;
}

.plBackground
{
   background: var(--pres-main-bg-dark);
   display: none;
   height: 100%;
   left: 0;
   opacity: 0.7;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 10003;
}

.noGallery {
   float: left;
   height: 300px;
   width: 560px;
   background-color: #eeeeee;
   cursor: pointer;
   margin: 0px 0px 20px 0px;
}

.noVideoPic {
   float: left;
   margin: 50px 0px 0px 10px;
}

.noGalleryPic {
   float: left;
   margin: 50px 0px 0px 20px;
}

.noGalleryCopy {
   float: left;
   margin: 10px 0px 0px 20px;
   color: #aaaaaa;
   font-size: 1em;
}

.startSlideContainer {
   float: left;
   clear: both;
   height: auto;
   width: 100%;
   margin: 0px 0px 0px 0px;  

}

.sliderGraphic {
   height: 24px;
   width: 28px; 
   vertical-align: middle;
   margin: 0px 5px 0px 0px;
}

.startSlideButton {
   float: left;
   padding: 10px;
   text-align: center;
   font-size: 1em;
   cursor: pointer;
}

.videoPlayer
{
   margin: 35px;
}

.albumHeading, .currentAlbumName {
   float: left;
   clear: both;  
   padding: 0px;
   font-size: 1.5em;
   font-weight: bold; 
   color: var(--pres-main-fg-color);
   width: 100%; 
   margin: 0px 0px 10px 0px;
}

.photoBtn {
   width: 100%;
   float: left;
   clear: both;
   padding: 0px 0px 20px 0px;
}

@media all and (min-width: 320px) and (max-width: 640px) {
   .addImage, .addVideo {
      background-size: 100%;
   }   

   .pBtn 
   {
      background: var(--pres-soft-black);
      color: var(--pres-light-fg-color);
      cursor: pointer;
      float: left;
      font-size: 1em;
      height: 33px;
      width: 31%;
      margin: 5px 0px 5px 0px;
      padding: 15px 1% 0px 1%;
      text-align: center;
   }
}