/*************************************/
/* photo navigation css (above photo)*/
/*************************************/

  div.photo_navigation { max-width: 850px;
                         height: 23px; 
                         line-height: 23px; 
                         margin: 0 auto 0 auto;
                         font-size: 11px;
                         font-weight: bold; 
                         margin-bottom: 5px; 
                       }

/* photo sequence container */
  div.photo_sequence {font-size: 12px;
                      color: #000080;
                      text-align: center;"
                     }
/* common styles for all photo navigation divs */
 .photo_navigation a, .nolink { display: block;     /* ensure whole element is clickable (not just text)  */
                                text-indent: 100%;  /* use text-indent,overflow & white-space to hide text on small screens - show only the icon */
                                overflow: hidden; 
                                white-space: nowrap;
                              } 
 .photo_div_common { width: 15%; background-repeat: no-repeat; }
 .float_left  { float: left }
 .float_right { float: right }

/* set the default, hover and 'nolink' positions of the background image for each of the four links */

/* first */
 .photo_first { text-align: left;
                background-image: url('images/nav_first_sprite.png');
                background-position: top -22px left 5px;
              }
 .photo_first:hover, 
 .photo_navigation .nolink_first { background-position: top 2px left 5px; }  /* re-position background-image when hovering and 'no link' */ 

/* back */
  .photo_back { text-align: right;
                background-image: url('images/nav_prev_sprite.png');
                background-position: top -22px left 5px;
              } 
  .photo_back:hover,  
  .photo_navigation .nolink_back { background-position: top 2px left 5px; }

/* next */
  .photo_next { text-align: left;
                background-image: url('images/nav_next_sprite.png');
                background-position: top -22px right 5px;
              } 
  .photo_next:hover,
  .photo_navigation .nolink_next { background-position: top 2px right 5px; }


/* last */
  .photo_last { text-align: right;
                background-image: url('images/nav_last_sprite.png');
                background-position: top -22px right 5px;
              }
  .photo_last:hover,
  .photo_navigation .nolink_last { background-position: top 2px right 5px; }

/****************************************/
/* photo navigation css (side of photo) */
/****************************************/

/* Next & previous arrows */
.prev_arrow, .next_arrow { cursor: pointer;
               position: absolute;
               top: 50%;
               transform: translate(0, -50%);
               padding-top: 70px; /* use padding to increase size of clickable area */
               padding-bottom: 70px;
               color: #ffffff;
               font-weight: bold;
               font-size: 30px;
               text-shadow: 1px 1px 3px #004080;
               text-decoration: none;
               transition: 0.6s ease;
             }

/* Position the "next arrow" to the right, add padding to increase clickable area */
.next_arrow { right: 0;
              padding-left: 100px;
            }

/* Position the "prev arrow" to the left add padding to increase clickable area */
.prev_arrow { left: 0;
              padding-right: 100px;
            }

/* On hover, change color and remove shadow */
.prev_arrow:hover, .next_arrow:hover { color: #004080;
                                       text-shadow: none;
                                     }

 div.photo_container_outer { text-align: center; }  /* to align the containing div centrally */

 div.photo_container_inner { position: relative;      /* set a point of origin for 'navigation arrow' divs */
                             display: inline-block;   /* to ensure div is only as wide as containing photo */
                             margin: 0 auto;
                           } 

 /*==================================================*/
 /* Media Query for screens 450px and above          */
 /* re-position the icons and show the text on links */
 /*==================================================*/

 @media only screen and (min-width: 450px)
 {
  div.photo_navigation { margin-top: 10px;
                         margin-bottom: 10px; 
                       }
  .photo_div_common { width: 20%; }
  .photo_navigation a { text-indent: 0; } /* wider screen so display link text */

/* 'first' link */
  .photo_first { background-position: top -22px left 43px; }
  .photo_first a {text-indent: 3px; } 
  .photo_first:hover,
  .photo_navigation .nolink_first { background-position: top 2px left 43px; text-indent: 3px; }  /* re-position background-image when hovering and 'no link' */ 

/* 'back' link */
  .photo_back { background-position: top -22px left 3px; text-align: left;} 
  .photo_back a {text-indent: 50px; } 
  .photo_back:hover,
  .photo_navigation .nolink_back { background-position: top 2px left 3px; text-indent: 50px; }

/* 'next' link */
  .photo_next { background-position: top -22px right; text-align: right; } 
  .photo_next a {text-indent: 46px; direction: rtl;}              /* direction: rtl required to keep text locked relative to right side */ 
  .photo_next:hover,
  .photo_navigation .nolink_next  { background-position: top 2px right; text-indent: 46px; direction: rtl;} 

/* 'last' link */
  .photo_last { background-position: top -22px right 42px; text-align: right; }
  .photo_last a {text-indent: 6px; direction: rtl;}              /* direction: rtl required to keep text locked relative to right side */ 
  .photo_last:hover,
  .photo_navigation .nolink_last  { background-position: top 2px right 42px; text-indent: 6px; direction: rtl;}
 }

 /*==========================================*/
 /* Media Query for screens 500px and above  */
 /* increase font size and re-position icons */
 /*==========================================*/

 @media only screen and (min-width: 500px)
 {
   div.photo_navigation { font-size: 12px; 
                          margin-top: 25px;
                        }

  .photo_div_common { width: 19%; }
   div.photo_sequence   { font-size: 15px; }

  /* 'first' link */
  .photo_first { background-position: top -22px left 50px; }
  .photo_first:hover,
  .photo_navigation .nolink_first  { background-position: top 2px left 50px; }  /* re-position background-image when hovering and 'no link' */ 

  /* 'back' link */
  .photo_back a {text-indent: 54px; } 
  .photo_navigation .nolink_back { text-indent: 54px; }  

  /* 'next' link */
  .photo_next a {text-indent: 50px; direction: rtl;}              /* direction: rtl required to keep text locked relative to right side */ 
  .photo_navigation .nolink_next { text-indent: 50px; }  

  /* 'last' link */
  .photo_last { background-position: top -22px right 49px; text-align: right; }
  .photo_last:hover,
  .photo_navigation .nolink_last  { background-position: top 2px right 49px; }  /* re-position background-image when hovering and 'no link' */ 

   div.photo_container_inner { padding: 0 25px 0 25px;  /* create space for the navigation arrows alongside the image */
                             }

 }

 /*==========================================*/
 /* Media Query for screens 540px and above  */
 /* increase font size                       */
 /* reduce width of navigation links         */
 /*==========================================*/

 @media only screen and (min-width: 540px)
 {
  .photo_div_common { width: 18%; }
   div.photo_sequence   { font-size: 16px; }
 }

 /*==========================================*/
 /* Media Query for screens 600px and above  */
 /* reduce width of navigation links         */
 /*==========================================*/

 @media only screen and (min-width: 600px)
 {
  .photo_div_common { width: 16%; }

  .prev_arrow, .next_arrow { font-size: 40px;
                           }
   div.photo_container_inner { padding: 0 35px 0 35px;
                             }

 /*==========================================*/
 /* Media Query for screens 700px and above  */
 /* reduce width of navigation links         */
 /*==========================================*/

 @media only screen and (min-width: 700px)
 {
  .photo_div_common { width: 14%; }
 }
 /*==========================================*/
 /* Media Query for screens 800px and above  */
 /* reduce width of navigation links         */
 /*==========================================*/

 @media only screen and (min-width: 800px)
 {
  .photo_div_common { width: 13%; }
 }