@charset "UTF-8";
/* CSS Document */

/*
            <div class="media-screen media-screen-width-100 align-centered">
              <img class="image-width-auto image-display-style" 
                   src="../../../../../../../../../../../../Media/Images/bridgerScapeCloudfallWeb.jpg"
                   alt="Cloud Fall Over the Bridgers">
            </div>
            <figcaption class="media-caption align-centered"> 
              Bridger Mountain Cloudfall (© Rocky Ross)<br>
              (image size should remain true, so horizontal scrolling will be necessary for smaller screens.)
            </figcaption>
        </figure>  
*/
  .media-figure { /* This overrides the default (user agent) styling for the figure element. 
	  Important, and used for all visual media. */
	  -webkit-margin-before:0;
	  -webkit-margin-after:0;
	  -webkit-margin-start:0;
	  -webkit-margin-end:0;
	  margin:0;
	  margin-left:auto;
	  margin-right:auto;
	  padding:0;
	  opacity:1;
	  /* Because media generally looks awful with background bleeding through */
	  width: 90%;
	  max-width: 100%; /* set so that auto overflow works for <img> widths wider than the 
						 figure and media-screen divs */
  }

.media-border-thin-gray {
	border-style: solid;
	border-width: thin;
	border-color:darkgray;
	border-radius:1em;
}
  
  .media-figure-auto{
	  width:auto
  }
  
  .media-figure-bottom-padding {/*use with figure tag to leave 3-rem space after figure. Helpful
	  if the figure is the last item in the page, otherwise placing the figure caption flush
	  with the bottom of the page and not aesthetically pleasing.*/
	  padding-bottom: 3rem;
  }
  
  /**************************************************************************
	  This subsection provides the styles for screen in the media figure that
	  holds the actual media. Needed for separating the media from the figure
	  caption and for placing a border around the media if desired.
	***************************************************************************/			  
  .media-screen {
	  margin:0;
	  padding:0;
	  /*border:thin solid red;*/					
  }
  .media-screen-width-auto {
	  width: auto;
  }
  .media-screen-width-inherit{
	  width:inherit;
	  
  } 
 
  .media-screen-width-100 {
	  width: 100%;
	  overflow:auto;
  }  
  .media-screen-width-75 {
	  width: 75%;
  }
  .media-screen-width-50{
	  width: 50%;
  }
  .media-screen-width-25 {
	  width: 25%;
  }
  .media-screen-width-fixed-10rem{
	  width:10rem;
  }

 /************************************************************************** 
		   This subsection provides styles for video media contained in the media
		   screen, which is contained in the media figure.
		**************************************************************************/	 
			
  .video-width-inherit {
	  /* It doesn't make sense to have a video that needs to be scrolled for viewing.
			   Thus the video-width should not exceed the media screen width. */
	  width: inherit;	
  }
  /********************************************************************************************* 
		   This subsection of the media figure provides styles for image media contained in the media
		   screen, which is contained in the media figure.
		*********************************************************************************************/
		   
  .image-width-inherit { /* Inherits "width:100%". See the parent .media-screen class for details above. 
							  Apparently these two cannot be combined, otherwise the inherited width for 
							  the image will default to the actual image size and not the size of the 
							  container in which the <img> element is placed. Similarly, width:100% must 
							  also be used as above, not width:inherit. */
	  width: inherit;
  }
  .image-width-auto{
	  width:auto;
  }
  
  .image-width-25{
	  width:25%;
  }  
  .imgage-display-style {
	  display: block; /*Needed because <img> defaults to "inline-block" which leaves room at the bottom 
							 of the block for letter descenders. This is mostly unnoticeable except when a
							 border is placed around the image: the bottom border extends below the image, 
							 leaving a blank area between it and the image. THe attribute "display:block" 
							 does not account for letter descenders, which solves the bottom border problem.*/
  }
  /************************************************************************************
		  This subsection of the media figure construct contains styling that can be used
		  for the various elements in the media figure construct.
		************************************************************************************/		
  .align-centered { /* Need to use with the media-screen and figcaption divs to align them both properly */
	  margin-left: auto;
	  margin-right: auto;
  }
  .align-left-no-float { /* Need to use with the media-screen and figcaption divs to align them both properly */
	  margin-left: 0;
	  margin-right: auto;
  }
  .align-right-no-float { /* Need to use with the media-screen and figcaption divs to align them both properly */
	  margin-right: 0;
	  margin-left: auto;
  }
  .align-left-float { /* Need to use with the media-screen and figcaption divs to align them both properly */
	  float: left;
	  margin:0;
	  padding-top:1rem;
	  padding-right:1rem;
	  padding-bottom:1rem;
	  padding-left:0rem;
  }
  .align-right-float { /* Need to use with the media-screen and figcaption divs to align them both properly */
	  float: right;
	  margin:0;
	  padding-top:1rem;
	  padding-right:0;
	  padding-bottom:1rem;
	  padding-left:1rem;
  }
  .bordered { /* use for placing a rectangular border around the media. Use in the media-screen div. */
	  border-style: solid;
	  border-color: #315ca5;
	  border-width: medium;
  }
  .round-borders { /* Uaw in conjunction with the bordered tag in div media-screen. Makes the border have rounded edges. */
	  border-radius: 1.6rem;
  }
  .media-caption { /*class for the <figcaption> element */
	  width: inherit;
	  max-width: inherit;
	  font-weight: 400;
	  font-size: 0.75rem;
	  text-align: center;
  }
  .permissions { /*currently unused but can br used for citing permissions to use media or listing copyright */
	  height: 0.63rem;
	  visibility: visible;
	  margin-left: 0.63rem;
	  margin-right: 0.63rem;
	  margin-bottom: 0.63rem;
	  line-height: 1;
	  font-size: 0.56rem;
	  overflow: hidden;
  }