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

.cssPictureViewer {    
	display: none; /* Hide the PictureViewer when the page first loads. */

	position: fixed; /* The element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element */
    top: 0; /* As position: fixed, sets the the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor */
    left: 0;  /* As position: fixed, sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor */
    right: 0; /* As position: fixed, sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor */
    bottom: 0; /* As position: fixed, sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    background-color: rgba(0,0,0,0.9); /* Black background with opacity */
    z-index: 1030; /* z-index set to ensure content appears over the top of the fixed Bootstrap top title bar. */
}


.cssPictureViewerSliderItem {    
    position: fixed; /* The element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element */
    top: 0; /* As position: fixed, sets the the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor */
    left: 0;  /* As position: fixed, sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor */
    right: 0; /* As position: fixed, sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor */
    bottom: 0; /* As position: fixed, sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
}


.cssPictureViewerImage {    
    position: absolute; /* The element is positioned relative to its first positioned (but not the default 'static' value) ancestor element, i.e. in this case the 'PictureViewerFullPage' (Is this ancestor element true now?!) element. */ 
    top: 0; /* As position: absolute, sets the the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor */ 
    left: 0; /* As position: absolute, sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor */ 
    right: 0; /* As position: absolute, sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor */
    bottom: 0; /* As position: bottom, sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor */
    max-height: 95%;  
    max-width: 95%; 
    width: auto; /* auto (the default) = The browser calculates width */
    height: auto; /* auto (the default) = The browser calculates height */
    margin: auto;
}


.cssPictureViewerTextContainer {
    position: absolute;
    right: 0;
	bottom: 0;
    left: 0;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    opacity: 0.95;
}


.cssPictureViewerBodyText {
    font-family: Verdana, Geneva, sans-serif;
    color: #333333;
    font-size: 1rem;
    line-height: 1.5rem;
}


.cssPictureViewerControlPrevious, .cssPictureViewerControlNext {
    opacity: 0.6;
    height: 15%;
    top: 42.5%;
}


.cssPictureViewerControlPrevious:hover,
.cssPictureViewerControlPrevious:focus, .cssPictureViewerControlNext:hover,
.cssPictureViewerControlNext:focus {
    opacity: 0.9;
}


.cssPictureViewerPreviousIcon, .cssPictureViewerNextIcon {
    width: 40px;
    height: 40px;
}


.cssPictureViewerPreviousIcon {
    background-image: url("../img/icons/slider_previous.svg");
}


.cssPictureViewerNextIcon {
    background-image: url("../img/icons/slider_next.svg");
}


.cssPictureViewerCloseButtonContainer {
    position: absolute; /* Positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed) */
    width: 50px;
    height: 50px;
    right: 0;
    top: 0;
    z-index: 1;
    opacity: 1;
/*	background-color: blue;*/
}


.cssPictureViewerCloseButtonContainer:hover {
    opacity: 0.75;
    cursor: pointer;
}


.cssPictureViewerCloseButtonImage {
    width: 35px;
    height: 35px;
    margin-left: 7px;
    margin-top: 8px;
}


.cssPictureViewerShowTitleButton {
    font-size: 0.8rem;
    margin: 0.5rem;
    right: 0%;
    bottom: 0%;
    
    /* Prevent text selection of element. */
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}


.cssPictureViewerShowTitleButton:hover {
    text-decoration: underline;
    cursor: pointer;
}


.cssPictureViewerHideTitleButton {
    font-size: 0.8rem;
    margin: 0.5rem;
    right: 0%;
    bottom: 0%;
    
    /* Prevent text selection of element. */
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}


.cssPictureViewerHideTitleButton:hover {
    text-decoration: underline;
    cursor: pointer;
}


.cssPictureViewerShowTitleContainer {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    opacity: 0.9;
}


.cssPictureViewerImageContainer {
    position: relative; /* The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position. */
    top: 0;
    left: 0;
}


.cssPictureViewerImageContainer:hover {
    cursor: pointer;
}


.cssPictureViewerMainImage {
    position: relative; /* The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position. */
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
    border: thin solid #E0E0E0;
}


.cssPictureViewerMagnifyingGlass {
    position: absolute; /* This element set to the nearest ancestor that has a position value other than static. */ 
/*    
	OLD VERSION TO CENTRE MAGNIFYING GLASS
	top: 37.5%;
    left: 37.5%;
*/
	top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    opacity: 0.75;
}


.cssImageTitle {
    background-color: #E9E9E9;
    font-family: Verdana, Geneva, sans-serif;
    color: #333333;
    font-size: 0.9rem;
    line-height: 1.4rem;
	border: thin solid #c8c8c8;
}


/* Modify the default Bootstrap touch-action to add pinch-zoom so that the Picture Viewer  */
.carousel.pointer-event {
	-ms-touch-action: pan-y pinch-zoom;
	touch-action: pan-y pinch-zoom;
}