@font-face{ font-family: "Eagle Lake"; src: url('EagleLake-Regular.ttf') format('truetype'); }

.lazy-loaded{ box-shadow:none; }

/* --------------------- Page intro info -- start */
.groupIntroOuter {
  width: 100%;
  border: 1px solid rgba(206, 80, 80, 0.3); 
  padding-left: 4px;
  padding-right: 0;
}

.groupIntroLeft {
  display: inline-block;
}

.groupIntroLabel {
  background-color: rgba(206, 80, 80, 0.6); 
  color: white;
  font-size: 12px;
  margin-top: 2px;
}

.groupIntroLeft img {
  border: 3px solid rgba(206, 80, 80, 0.6); 
}
.groupPara {
  display: inline-block;
  vertical-align:top;
  height: 106%;

  text-align:left;

  padding: 2px 10px;
  font-size: 12px; font-weight: normal;

  border: 3px solid rgba(206, 80, 80, 0.5);
  background: rgba(206, 160, 206, 0.5); color: black;
}
/* .groupIntroTable td{ border: 1px solid blue; } */
/* --------------------- Page intro info --  end  */



/* ------------------------------ h.php - start ----------------- */

.imgCurve {                          /* .imgCurve img */
    /*border: 1px dotted #c0c0c0;; */
    -moz-border-radius-bottomright: 10px 10px;
    -moz-border-radius-bottomleft:  10px 10px;
    -moz-border-radius-topleft:     10px 10px;
    -moz-border-radius-topright:    10px 10px;
    border-top-right-radius:        10px 10px;
    border-top-left-radius:         10px 10px;
    border-bottom-right-radius:     10px 10px;
    border-bottom-left-radius:      10px 10px;

    text-decoration: none;
}


.imgGroupDiv { margin: 2px; }




   /*-----------------------------------   Text---------------------------------------------------------*/
   div.gFavorite    { background: rgba(206, 206, 206, 0.5); color: #FF4444;
                      padding: 0 2px;
                      font-weight: bold;  display: inline-block;
    -moz-border-radius-bottomright: 10px 10px;
    -moz-border-radius-bottomleft:  10px 10px;
    -moz-border-radius-topleft:     10px 10px;
    -moz-border-radius-topright:    10px 10px;
    border-top-right-radius:        10px 10px;
    border-top-left-radius:         10px 10px;
    border-bottom-right-radius:     10px 10px;
    border-bottom-left-radius:      10px 10px;

  }



   font.favorite    { font-weight: bold; color: red }
   font.myState     { font-weight: bold; font-style: italic; color: red }
   font.myRange     { font-weight: bold; font-style: italic; color: green }

   font.textIndian        { font-style: italic; color: #2222FF }

   .textKeyword       { font-weight: bold; color: #884444; font-family: verdana,sans-serif,arial,helvetica; font-size: 14px; display: inline-block; }

   .keyword4,
   .keyword3,
   .keyword2,
   .keyword1,
   .keyword0 { display: inline; white-space: pre; margin: 2px 1px; padding: 0 2px;
               font-style: italic; font-size: 12px; color: black;   }
   .keyword0 { background-color: #662222; color: white; font-weight: bold;  }
   .keyword1 { background-color: #DDDDFF; }
   .keyword2 { background-color: #DDFFDD; }
   .keyword3 { background-color: #AAFFAA; }
   .keyword4 { background-color: #2222AA; color: white; }


   .havasupai         { background: #3399FF; font-family: verdana,sans-serif,arial,helvetica; font-size: 11px; font-weight: bold; color: white; display: inline-block; }

   a.textKeyword          { font-weight: bold; color: red; font-family: verdana,sans-serif,arial,helvetica; font-size: 11px }
   a.textKeyword:hover    { background: red; color: white }

   font.hike        { background: #FFFF99; font-family: verdana,sans-serif,arial,helvetica; font-size: 10px; font-weight: bold; color: black }
   font.hike2       { background: #99FF99; font-family: verdana,sans-serif,arial,helvetica; font-size: 10px; font-weight: bold; color: black }
   font.havasupai   { background: #3399FF; font-family: verdana,sans-serif,arial,helvetica; font-size: 11px; font-weight: bold; color: white }
   font.separator   { font-family: verdana,sans-serif,arial,helvetica; font-size: 10px; font-weight: bold; color: black }

   /*--------------------------------------------------------------------------------------------*/

.origin,
.hiking  { font-family: verdana,sans-serif,arial,helvetica; font-size: 11px;
           background-color: rgba(255,255,106,0.8); /* background-color: #FFFF99;  */
           color: black; font-weight: bold;
           overflow: hidden; padding: 0px 2px;
          }

.origin   { background-color: rgba(255,192,203,0.6); /* pink:255,192,203-#FFC0CB, http://html-color-codes.info/color-names/ */
            margin-bottom: 2px;}




   /*------------------------------------------------------ Notes ------------------------------------------------------*/

   a.topBottom              {color: green; font-weight: normal; }
   a.topBottom:hover        {color: white; background: red; text-decoration: overline underline;  }

   div.photoWeekDiv { border:1px dotted white;  margin: 0px 10px 10px 10px;
                      padding: 2px 5px 0px 5px; }
   div.photoWeekDiv table td table { background-color: #CCCCFF; padding: 0px 4px 0px 4px }

   /* ...box around photos  ...total within box....... (padding-right margin) x 0px, 5 -5px */
   div.myWhatsnewDiv { border: 1px dotted white;  margin: 0px 10px 10px 10px;
                      padding: 2px 5px 0px 5px; }


   div.myBoxDivMinis { border: 1px solid #FFFF99;  margin:-3px 10px 10px 10px;
                      padding: 2px 5px 0px 5px; }

   div.myBoxDiv      { border: 1px dotted #FFFF99;  margin:-1px 10px 10px 10px;
                      padding: 2px 5px 0px 5px; }
   /* div.floatCount    {z-index: 1; position: relative; background: #FFCCFF; margin: -12px -5px 0px 0px; float: right; font-family: verdana,sans-serif,arial,helvetica; font-size: 10px }    */
   /* 2009/10/05 div#floatCount       {z-index: 1; position: relative; background: #FFCCFF; margin: -12px -5px 0px 0px; float: right; font-family: verdana,sans-serif,arial,helvetica; font-size: 10px; } */

  /*------------------------------------------------------------------------------------------------------------------*/

/* ------------------------------ h.php -  end ----------------- */

 
.groupsSpacer     { width:100%; height:1px; background: #3355aa;  }
.fav_groupsSpacer { width:100%; height:1px; background: black;    }




.searchDiv { 
  display: inline-block; 
  position: relative;

  padding-top: 4px;
  margin-bottom: 4px;

  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
}

/* ----------- Search Input ----------- */
.searchDiv input#matchWhat{           /*  float: left; */
  width: 94%;
  margin: 0 4px 4px 8px;

  padding-left: 8px; 
  padding-right: 20px;

  color: red;
  border: 2px solid #3355aa;             /* color from groupsSpacer */
}

.searchDiv input#search::-webkit-input-placeholder { color: #65737e;  }
.searchDiv input#search:-moz-placeholder           { color: #65737e;  } /* Firefox 18- */
.searchDiv input#search::-moz-placeholder          { color: #65737e;  } /* Firefox 19+ */
.searchDiv input#search:-ms-input-placeholder      { color: #65737e;  }


/* ----------- Search Button ----------- */
.searchDiv button.icon {
  position: absolute;
  right: 0; top: 3px;
  margin-right: 6px;

  -webkit-border-top-right-radius: 12px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 5px;

  -moz-border-radius-topright: 12px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 5px;

  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border: 1px solid #3355aa;
 
  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}


/*
input[type=search] { 	
	color: red;
	display: block; 
        margin-bottom: 8px;
        margin-top: 8px;
        width: 97%;
}
*/
/*width: 100%;   letter-spacing: 4px;  text-align: right; word-spacing: 4px;  cursor: pointer; text-shadow: 0 0 2px black; */






.oneSlideHorizonal { height: 100%; width: 100%; top: 0; left: 0; object-fit: cover; } /* Horizontal: stretch to fit all, cropping some */
.oneSlideVertical  { height: 100%;              top: 0; left: 0; } /* Vertical: 100% height */
.oneSlidePano      {               width: 100%; top: 0; left: 0; } /* Pano: 100% width --- needs vertical centering still*/

.leftTitle {
 display: inline-block; 
 font-size: 20px;
 margin-left: 8px;
}

.rightPart {
 float: right;
 font-size: 20px;
 margin-right: 8px;

}

.layoutHome { 
  display: inline-block;
  border: 2px solid white; border-radius: 50%;

  width: 28px; height: 28px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  color: white; 
}
.layoutHome a { color: white; }
.layoutHome:hover { background-color: red; color: white; }

.layoutPageTitle {
 width: 100%;
 background: rgba(80, 80, 206, 0.6);
 font-size: 20px;
 text-align: left;
}


.left { text-align: left; }
   div.specialTitle        { font-size: 20px; margin: 0 auto;  padding-left: 10px;
                             /*  background: rgba(80, 80, 206, 0.3);*/
                              color: white;
    -moz-border-radius-bottomright: 10px 10px;
    -moz-border-radius-bottomleft:  10px 10px;
    -moz-border-radius-topleft:     10px 10px;
    -moz-border-radius-topright:    10px 10px;
    border-top-right-radius:        10px 10px;
    border-top-left-radius:         10px 10px;
    border-bottom-right-radius:     10px 10px;
    border-bottom-left-radius:      10px 10px;
  }















/* ...................................... special groups ...................................... */
.g0  { background-color: rgba( 255,  0,100, 0.1); }   /* 10% transparency background - Wrapper */
.g1  { background-color: rgba( 100,255,100, 0.1); }
.g2  { background-color: rgba( 100,100,255, 0.1); }
.g3  { background-color: rgba( 255, 50, 50, 0.1); }
.g4  { background-color: rgba(  50,255, 50, 0.1); }
.g5  { background-color: rgba(  50, 50,255, 0.1); }
.g6  { background-color: rgba( 255,150,150, 0.1); }
.g7  { background-color: rgba( 150,255,150, 0.1); }
.g8  { background-color: rgba( 150,150,255, 0.1); }
.g9  { background-color: rgba(  50,255,180, 0.1); }

.gk0  { background-color: rgba( 255,  0,100, 0.6); }   /* 60% transparency background - Wrapper */
.gk1  { background-color: rgba( 100,255,100, 0.6); }
.gk2  { background-color: rgba( 100,100,255, 0.6); }
.gk3  { background-color: rgba( 255, 50, 50, 0.6); }
.gk4  { background-color: rgba(  50,255, 50, 0.6); }
.gk5  { background-color: rgba(  50, 50,255, 0.6); }
.gk6  { background-color: rgba( 255,150,150, 0.6); }
.gk7  { background-color: rgba( 150,255,150, 0.6); }
.gk8  { background-color: rgba( 150,150,255, 0.6); }
.gk9  { background-color: rgba(  50,255,180, 0.6); }


.groupLabel { position: absolute; top: 4px; left: 4px;
              background: rgba(40, 40, 40, 0.8);
             padding: 1px 4px;
  font-size: 14px;
}











#bigImage {
   z-index:99;

   border:0;
   box-shadow:none;

   width: 200%;
   height: 200%;
   object-fit: cover;
   background-color: blue;

   position:fixed;
}







/*#oneSlide img      {  width: 100%; height: 100%; }
#oneSlide img.wide {  width: 100%; height: auto; }
#oneSlide img.tall { height: 100%;  width: auto; }
*/




.menuPanel {
  position: fixed; left: 10px; top: 10px;   z-index: 200;

  background-color: #202020;
  padding: 8px 8px 8px;
  border: 1px dotted #404040;
}




#slideStatusbar {
  z-index: 200;
  position: absolute;
  bottom: 20px;
  left: 20px;
  text-align: center;
  color: cyan;
}

#msgBar { position: fixed; left:  20%; bottom: 10px;  z-index: 200; }
#msgLog { position: fixed; left: 20px; bottom: 10px;  z-index: 200; }

#loadTimer {
  z-index: 200;
  position: absolute;
  bottom: 55%;
  left: 40%;
  text-align: center;
  color: cyan;
}

.iconInline { display: inline; padding-left: 2px; }

.mainGroupInline { 
  list-style: none; padding-left: 12px; display: inline-block;  

}

#progressBar {
  z-index: 200;
  position: absolute;
  bottom: 50%;
  left: 40%;
  text-align: center;
  color: cyan;
}

#slide_headers { display: inline-block;
width: 100%;
text-align: center;
}

#value_step,
#value_delay,
#value_count {
margin: 0; padding: 0;
display: inline-block;
position: relative;
text-align: right;
}


#slider_delay,
#slider_step,
#slider_count { width: 70px; }

#slider_count { background-color: green; }
#slider_delay { background: green; }
#slider_step  { background-color: red; }

#slider_count2 { background: #ff4444; padding: 0 2px 0 2px; color: black; }
#slider_delay2 { background: #44ff44; padding: 0 2px 0 2px; color: black; }
#slider_step2  { background: #4444ff; padding: 0 2px 0 2px; color: black; }

#value_count { color: #ff4444; }
#value_delay { color: #44ff44; }
#value_step  { color: #4444ff; }

.slider_text {
display: inline;
bottom-padding: 4px;
}


/* --------------------------------------------------------------- */

.divGroups {
display: inline-block; background-color: black; padding: 4px}





#nav_right { }
#nav_left { }


.block_right { right: 0; }
.block_left  { left: 0; }
.block_right,
.block_left  {
  z-index: 101;       /* z-index:   slideshowWindow: 100...... nav_right: 101 */

        border: 0; /* 4px solid blue; */
        position: absolute;
        font-size: 0;
        cursor: pointer; cursor: hand;
        top: 100px; height: 80%; width: 50%;
}





.jqImage {
  z-index: 10;
}


.vignette {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 300px 500px 400px rgba(0,0,0,0.9) inset;

  object-fit: cover;

}




.slideshowChecked {
  background-color: #404040;
  padding: 4px;
}



#thumbnailsTable {
   z-index: 300;
   background-color: blue;
   position: absolute;
   top: 100px;
   left: 500px;
}


#photoElement {
  z-index: 400;
}


#thumbnails {
   z-index: 300;
   height: 600px;
   width: 600px;
   color: white;
   position: absolute;
   top: 20px;
   left: 300px;

}

#fullscreen {
  z-index: 200;
  position: absolute;
  bottom: 20px;
  right: 20px;
  text-align: center;
  color: cyan;
  background-color: black

}



/* @file mymodule.css */

.fullestscreen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  ndexz-index: 200;
  margin: 0;
  padding: 0;
  background: inherit;
}


.ui-slider {
        position: relative;
        text-align: left;
}
.ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 1.2em;
        height: 1.2em;
        cursor: default;
        -ms-touch-action: none;
        touch-action: none;
}
.ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: 0;
        background-position: 0 0;
}


/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
        filter: inherit;
}

.ui-slider-horizontal {
        height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
        top: -.3em;
        margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
        left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
        right: 0;
}

.ui-slider-vertical {
        width: .8em;
        height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
        left: -.3em;
        margin-left: 0;
        margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
        left: 0;
        width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
        bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
        top: 0;
}