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


.cssOuterPaddingInteractiveScore {
	padding-top: 0.2rem;
	padding-right: 6px;
	padding-bottom: 0;
	padding-left: 6px;
}


.classPerformanceVideo {
	margin-bottom: 10px;
	width: 100%;
	height: auto;
}


.classPerformanceAudio {
	margin-bottom: 10px;
	width: 100%;
	height: 30px;
}


.classCompositionNavigationTemp {
    margin: auto;
    width: 80%;
    text-align: center;
    padding: 5px;
}
	

.classVideoCustomControlsTemp {
    margin: auto;
    width: 80%;
    text-align: center;
    padding: 5px;
}


.cssInteractiveScorePageTitleBox {
    border: 1px solid #dadada;
    padding-top: 0.5rem;
    padding-right: 1rem;
    padding-bottom: 0rem;
    padding-left: 1rem;	
}


.cssInteractiveScorePageTitle {
	/* See also media query CSS import files. */    
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
	color: #333333;
    font-size: 0.9rem;
}


.cssInteractiveScoreCollapseAndHoverControlBoxText {
	/* See also media query CSS import files. */    
	font-family: Verdana, Geneva, sans-serif;
/*    font-weight: bold;*/
	color: #333333;
    font-size: 0.7rem;
	text-align: center;
}


.cssInteractiveScoreFooterLinks {
	width: 40%;
	margin-right: 0.75rem;
	padding-bottom: 0.5rem;
}

.cssInteractiveScoreFooterLinkBlockCard {
    background-color: #e6e6e6;
    border: thin solid #c8c8c8;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    position: relative;
}

/* Select all ExploreButtonFooterLinkBlock class elements inside FooterLinkBlockHref class elements when hovered over. */
.cssInteractiveScoreFooterLinkBlockHref:hover .ExploreButtonFooterLinkBlock {
    text-decoration: underline;
}

/* Select all cssInteractiveScoreFooterLinkBlockCard class elements inside FooterLinkBlockHref class elements when hovered over. */
.cssInteractiveScoreFooterLinkBlockHref:hover .cssInteractiveScoreFooterLinkBlockCard {
    background-color: #f0f0f0; 
}

/* Select all FooterLinkBlockImage class elements inside FooterLinkBlockHref class elements when hovered over. */
.cssInteractiveScoreFooterLinkBlockHref:hover .FooterLinkBlockImage {
    opacity: 0.75; 
}

.cssInteractiveScoreFooterLinkBlockHref:hover {
   text-decoration: none;	
}

/* If an element uses 'absolute' positioning, it's 'top' and 'left' properties
are interpreted relative to the closest ancestor element that has its 'position'
proprty set to something other than 'static' (the default). If an absolutely
positioned element has no positioned ancestor, the 'top' and 'left' properties
are measured in document coordinates - they are offsets from the top-left
corner of the document. If you wish to absolutely position an elemement relative
to a container that is part of the normal document flow, use 'position: relative'
for the container and specify a 'top' and 'left' position of '0px'. This makes
the container dynamically positioned but leaves it as its normal place in the
document flow. Any absolutely positioned children are then positioned relative
to the container position. (JSTDG,p420/421)*/

.classScoreSystem {
    position: relative;
	top: 0px;
	left: 0px;
	
	/* Turn off user select so that dblclick on bar does not also select and highlight this DIV element. */
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.classPageFollowerScorePage {
    position: relative;
	top: 0px;
	left: 0px;
	
	/* Turn off user select so that dblclick on bar does not also select and highlight this DIV element. */
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */

/*	background-color: yellow;*/
}


.classScoreBar {
	position: absolute;
	height: 100%;
	z-index: 30; /* This needs to be above the score system image so that it can receive the mouse events. */
}


.classPageFollowerScorePageSystem {
	position: absolute;
	height: 100%;
	z-index: 30; /* This needs to be above the score system image so that it can receive the mouse events. */
}


.classScoreBar:hover {
	opacity: 0.4;
	background-color: #0099FF;
	cursor: pointer;
}


.classPageFollowerScorePageSystem:hover {
	opacity: 0.4;
/*    background-color: #c40b28;*/
	background-color: #0099FF;
	cursor: pointer;
}


/* If the device does not have hover, i.e. is a touch device */
@media (hover: none) {
    
    /* Stop hover formatting appering briefly */
    .classPageFollowerScorePageSystem:hover {
	
        opacity: 0;
    }

    
    /* Stop hover formatting appering briefly */
    .classScoreBar:hover {

        opacity: 0;
    }
}


.classScoreBarCurrentTime {
	position: absolute;
	height: 100%;
    opacity: 0.25;
/*    background-color: #c40b28;	*/
	background-color: #0099FF;	
	z-index: 10; /* This needs to be below the score image so that the SVG score image is 100% opacity. */
}


.classPageFollowerScorePageSystemCurrentTime {
	position: absolute;
	height: 100%;
    opacity: 0.25;
/*    background-color: #c40b28;	*/
	background-color: #0099FF;	
	z-index: 10; /* This needs to be below the score image so that the SVG score image is 100% opacity. */		
}


.classScoreSystemImage {
	width: 100%;
	height: auto;
	position: relative; /* Required to enable the z-index to work. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).*/
	z-index: 20; /* This places the score system image over the score bar current time highlight colour. */		
}


.classPageFollowerScorePageImage {
	width: 100%;
	height: auto;
	position: relative; /* Required to enable the z-index to work. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).*/
	z-index: 20; /* This places the score system image over the score bar current time highlight colour. */
}


.cssInteractiveScoreNotationOuterPadding {
    padding-right: 0;
    padding-left: 0;
}


.cssInteractiveScoreContentDivider {
    border-top-style: solid;    
    border-top-width: thin;
    border-top-color: #e0e0e0;
}


.cssInteractiveScoreNotationPadding {
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
}


.cssErrorHandlerBlockRemove {
    display: none;
}


.cssPanelBackgroundInteractiveScore {
    background-color: #F7F7F7;
    border: 1px  solid #E0E0E0;    
}


.cssPanelBackgroundInteractiveScore_Seeking {
/*    background-color: #c40b28;*/
    background-color: #F7F7F7;
    border: 1px  solid #E0E0E0;    
}


.cssPageNavigator {
    border-style: solid;
    border-color: #707070;
    border-width: thin;
}


.cssInteractiveScoreCollapseAndHover_ControlBox {
    border-style: solid;
    border-color: #919191;
    border-width: thin;
	background-color: #eeeeee;
}


.cssInteractiveScoreCollapseAndHover_CollapseCloseBar {
	background-color: rgb(0,120,24,1);
	padding-right: 0px;
 	padding-left: 0px;
}


.cssInteractiveScorePetruschkaCollapseAndHover_CollapseCloseBar {
	background-color: #176c91;	
	padding-right: 0px;
 	padding-left: 0px;
}


.cssInteractiveScorePetruschkaCollapseAndHover_Red_CollapseCloseBar {
/*	background-color: #c40b28;	*/
	background-color: #E1320E;	
	padding-right: 0px;
 	padding-left: 0px;
}


.cssInteractiveScoreCollapseAndHover_CollapseBarIconContainer {
	position: absolute;
	top: 4px;
	left: 6px;
	width: 26px;
    height: 26px;
}


.cssBarAndPageNumberIndicatorText {
    font-family: Verdana, Geneva, sans-serif;
    color: #333333;
    font-size: 0.8rem;
    text-align: center;
}


.cssPetruschkaBarAndPageNumberIndicatorText {
    font-family: Verdana, Geneva, sans-serif;
    color: #333333;
    font-size: 0.7rem;
    text-align: center;
	background-color: #EEEEEE;
}


.cssBarNavGoButton input {
    width: 2rem;
}


/* * * * * * * * * * * * * */
/*     Navigaton buttons   */
/* * * * * * * * * * * * * */
.cssNavigationButtonContainer {
	/* See also media query CSS import files. */    
	width: 35px;
    height: 35px;    
}


.cssPlayAndPauseButtonContainer {
	/* See also media query CSS import files. */    
	width: 40px;
    height: 40px;      
}


.cssInteractiveScoreCollapseAndHover_ControlBoxButtonContainer {
	/* See also media query CSS import files. */    
	width: 30px;
    height: 30px;
}


.cssPetruschkaControlsButtonContainer {
	/* See also media query CSS import files. */    
	width: 39px;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*This contatiner and content block required to ensure that buttons height retains aspet ratio.
See https://www.w3schools.com/howto/howto_css_aspect_ratio.asp */
.cssButtonAspectRatioContainer {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    
    /* To use for testing */
/*    background-color: blue;
    border-style: solid;
    border-color: #707070;
    border-width: thin;
*/
}


.cssButtonAspectRatioContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */



.cssBarPlayAndPauseButton {
    color: #FFFFFF;
    background-color: #919191;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}    


.cssBarPlayAndPauseButton:hover {
/*    background-color: #c40b28;*/
    background-color: #0099FF;
	opacity: 0.6	;	
    cursor: pointer;
}


.cssPetruschkaBarPlayAndPauseButton {
    color: #FFFFFF;
/*    background-color: #C40B28;*/
	background-color: #E1320E;	

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}    


.cssPetruschkaBarPlayAndPauseButton:hover {
/*    background-color: #c40b28;*/
    background-color: #0099FF;
	opacity: 0.6	;	
    cursor: pointer;
}


.cssCollapseAndHoverControlBoxButton {
    color: #FFFFFF;
    background-color: #919191;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}    


.cssCollapseAndHoverControlBoxButton:hover {
    background-color: #007818;
    cursor: pointer;
}


/* Button state when selectable */
.cssInteractiveScoreButtonOn {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #919191;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Button state when selectable and mouse hovered over */
.cssInteractiveScoreButtonOn:hover {
/*    background-color: #c40b28;*/
    background-color: #0099FF;
	opacity: 0.6;	
    cursor: pointer;
}


/* Button state when selectable */
.cssInteractiveScoreMasterclassButtonOn {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #919191;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Button state when selectable and mouse hovered over */
.cssInteractiveScoreMasterclassButtonOn:hover {
/*    background-color: #c40b28;*/
	background-color: #E1320E;		
    cursor: pointer;
}


.cssInteractiveScorePetruschkaInstrumentsSelectButton_Active {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #919191;
	height: 39px;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.cssInteractiveScorePetruschkaInstrumentsSelectButton_Active:hover {
/*    background-color: #c40b28;*/
	background-color: #E1320E;		
    cursor: pointer;
}


.cssInteractiveScorePetruschkaInstrumentsSelectButton_Inactive {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #dadada;
	height: 39px;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Button state when selectable */
.cssInteractiveScoreHiddenContentToggleButton {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7rem;
/*	font-weight: bold;*/
    color: #FFFFFF;
    background-color: #919191;
	text-align: center;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Button state when selectable and mouse hovered over */
.cssInteractiveScoreHiddenContentToggleButton:hover {
/*    background-color: #c40b28;*/
	background-color: #E1320E;
    cursor: pointer;
}


/* Button state when selectable */
.cssTopBarButtonSwitch {	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #919191;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Button state when selectable and mouse hovered over */
.cssTopBarButtonSwitch:hover {
/*    background-color: #c40b28;*/
	background-color: #E1320E;		
    cursor: pointer;
}


a:hover.cssTopBarButtonSwitchLink {
	text-decoration: none;
}

/* Button state when not selectable */
.classBarNavButtonOff {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
	background-color: #dadada;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.cssTopBarButtonsEnabled {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #919191;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.cssTopBarButtonsEnabled:hover {
/*    background-color: #c40b28;*/
	background-color: #176c91;
	cursor: pointer;
}


.cssTopBarButtonsPetruschkaStructure {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #919191;
	height: 39px;	

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.cssTopBarButtonsPetruschkaStructure:hover {
/*	background-color: #c40b28;*/
	background-color: #E1320E;		
	cursor: pointer;
}


.cssTopBarButtonsDisabled {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #dadada;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.cssTopBarButtonPetruschka {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
    color: #FFFFFF;
    background-color: #919191;
	height: 39px;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.cssTopBarButtonPetruschka:hover {
/*    background-color: #c40b28;*/
	background-color: #176c91;
	cursor: pointer;

}


a:hover.cssTopBarButtonPetruschkaLinkHover {
	text-decoration: none;
}


.cssScoreZoomButtonOn {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7rem;
/*	font-weight: bold;*/
	color: #FFFFFF;
    background-color: #919191;
	height: 20px;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


.cssScoreZoomButtonOn:hover {
/*    background-color: #c40b28;*/
	background-color: #176c91;
	cursor: pointer;

}

a:hover.cssScoreZoomButtonLinkHover {
	text-decoration: none;
}



/* Button state when not selectable */
.cssScoreZoomButtonOff {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7rem;
/*	font-weight: bold;*/
    color: #FFFFFF;
	background-color: #dadada;
	height: 20px;

    /* Turn off user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Spacer between control buttons */
.cssBarNavButtonSpacer {
    width: 3%;
}


/* Spacer between control buttons */
.cssPetruschkaBarNavButtonSpacer {
    width: 5px;
}


/* Spacer between top bar buttons */
.cssInteractiveScoreButtonOnSpacer {
    width: 3%;
}


.cssTopBarButtonLineSeparator {
	width: 1px;
    border-left: thin solid #E0E0E0;
}


/* * * * * * * */
/* Video Popup */
/* * * * * * * */
.cssVideoPopupContent {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10; /* z-index set to ensure content appears over top of video player. */
	display: none;
    background-color: #e6e6e6;
    border: thin solid #c8c8c8;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

.cssInteractiveScoreVideoPopupButton {
	position: absolute; /* This element set to the nearest ancestor that has a position value other than static. */ 
	width: 4%;
	z-index: 100; /* z-index set to ensure button appears over top of score graphic. */
}

.cssInteractiveScoreVideoPopupButton:hover {
    cursor: pointer;
}

.cssInteractiveScoreVideoPopupButtonSelected {
	position: absolute; /* This element set to the nearest ancestor that has a position value other than static. */ 
	width: 4%;
	z-index: 100 ;/* z-index set to ensure button appears over top of score graphic. */
}

.cssInteractiveScoreCollapseContentButton {
	position: absolute; /* This element set to the nearest ancestor that has a position value other than static. */ 
	width: 4%;
	z-index: 100; /* z-index set to ensure button appears over top of score graphic. */
}

.cssInteractiveScoreCollapseContentButton:hover {
    cursor: pointer;
}

.cssInteractiveScoreCollapseContentButtonSelected {
	position: absolute; /* This element set to the nearest ancestor that has a position value other than static. */ 
	width: 4%;
	z-index: 100 ;/* z-index set to ensure button appears over top of score graphic. */
}

.cssVideoPopupContentCloseButton {
    position: absolute;
	right: 20px;
	top: 20px;
	margin-bottom: 2rem;
}

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

.cssVideoPopupContentCloseButtonImage {
    width: 35px;
    height: 35px;
}

.cssVideoPopupButtonDropdownItem {
	font-family: Verdana, Geneva, sans-serif;
	color: #333333;	
	font-size: 0.8rem;
	background-color: #C3C3C3;
	border-style: solid;
	border-color: #ffffff;
	border-width: thin;	
	
/*	border-bottom-style: solid;
	border-bottom-color: #ffffff;
	border-bottom-width: thin;	
	
*/	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */	
}

.cssVideoPopupButtonDropdownItem:hover {
	color: #ffffff;
	cursor: pointer;
/*	background-color: #c40b28;*/
	background-color: #E1320E;		
}

.cssVideoPopupButtonDropdownItemSelected {
	font-family: Verdana, Geneva, sans-serif;
	color: #ffffff;	
	font-size: 0.8rem;
/*	background-color: rgba(196,11,40,0.5);*/
	background-color: rgba(225,50,14,0.5);	
	border-style: solid;
	border-color: #ffffff;
	border-width: thin;	
	
	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */	
}

#idVideoPopupContentDropdown {
	display: none;	
}

.cssVideoPopupContentDropdownCloseButton {
    position: absolute;
	right: 25px;
	top: 10px;
	margin-bottom: 2rem;	
}

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

.cssVideoPopupContentDropdownCloseButtonImage {
    width: 35px;
    height: 35px;	
}

.cssInteractiveScoreVideoPopupHighlightBlock {
	position: absolute;
	z-index: 15;
	display: none;
}

.cssInteractiveScoreHoverTooltipBlockTypeLALC {
	position: absolute;
	z-index: 50;
	border-style: solid;	
	border-width: thin;
	border-color: rgb(0,120,24,1);
	background-color: rgb(0,120,24,0.25);	
}

.cssInteractiveScoreHoverTooltipBlockTypeLALC:hover {
	cursor: pointer;
	background-color: rgb(0,120,24,0.1);
}

.cssInteractiveScoreHoverTooltipBlockTypeGLOS {
	position: absolute;
	z-index: 50;
	border-style: solid;	
	border-width: thin;
	border-color: rgb(0,120,24,1);
	background-color: rgb(0,120,24,0.25);	
}

.cssInteractiveScoreHoverTooltipBlockTypeGLOS:hover {
	cursor: pointer;
	background-color: rgb(0,120,24,0.1);
}


.cssInteractiveScoreHoverTooltipBlockTypeSTR1 {
	position: absolute;
	z-index: 50;
	background-color: rgb(255,242,0,0.5);
	mix-blend-mode: multiply;
}

.cssInteractiveScoreHoverTooltipBlockTypeSTR1:hover {
	cursor: pointer;
	border-style: solid;	
	border-width: medium;
/*	border-color: rgb(196,11,40,1);	*/
	border-color: rgb(225,50,14,1);	
	background-color: rgb(255,242,0,0.8);
}


.cssInteractiveScoreHoverTooltipBlockTypeSTR2 {
	position: absolute;
	z-index: 50;
	background-color: rgb(153,153,153,0.5);
	mix-blend-mode: multiply;
}

.cssInteractiveScoreHoverTooltipBlockTypeSTR2:hover {
	cursor: pointer;
	border-style: solid;	
	border-width: medium;
/*	border-color: rgb(196,11,40,1);	*/
	border-color: rgb(225,50,14,1);	
	background-color: rgb(153,153,153,0.8);
}


.cssInteractiveScoreHoverTooltipBlockTypeSTR3 {
	position: absolute;
	z-index: 50;
	background-color: rgb(237,84,91,0.5);
	mix-blend-mode: multiply;
}

.cssInteractiveScoreHoverTooltipBlockTypeSTR3:hover {
	cursor: pointer;
	border-style: solid;	
	border-width: medium;
/*	border-color: rgb(196,11,40,1);*/
	border-color: rgb(225,50,14,1);
	background-color: rgb(237,84,91,0.8);
}


.cssInteractiveScoreHoverTooltipBlockTypeSTR4 {
	position: absolute;
	z-index: 50;
	background-color: rgb(138,134,210,0.5);
	mix-blend-mode: multiply;
}

.cssInteractiveScoreHoverTooltipBlockTypeSTR4:hover {
	cursor: pointer;
	border-style: solid;	
	border-width: medium;
/*	border-color: rgb(196,11,40,1);*/
	border-color: rgb(225,50,14,1);
	background-color: rgb(138,134,210,0.8);
}


.cssInteractiveScoreHoverTooltipBlockTypeSTR5 {
	position: absolute;
	z-index: 50;
	background-color: rgb(20,109,135,0.5);
	mix-blend-mode: multiply;
}

.cssInteractiveScoreHoverTooltipBlockTypeSTR5:hover {
	cursor: pointer;
	border-style: solid;	
	border-width: medium;
/*	border-color: rgb(196,11,40,1);*/
	border-color: rgb(225,50,14,1);
	background-color: rgb(20,109,135,0.8);
}


.cssInteractiveScoreHoverTooltipBlockTypeSTR6 {
	position: absolute;
	z-index: 50;
	background-color: rgb(254,199,124,0.5);
	mix-blend-mode: multiply;
}

.cssInteractiveScoreHoverTooltipBlockTypeSTR6:hover {
	cursor: pointer;
	border-style: solid;	
	border-width: medium;
/*	border-color: rgb(196,11,40,1);*/
	border-color: rgb(225,50,14,1);
	background-color: rgb(254,199,124,0.8);
}



.cssVideoPopupCarousel {
	display: none; /* Hide 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.90); /* Black background with opacity */
	
	z-index: 1030; /* z-index set to ensure content appears over the top of the fixed Bootstrap top title bar. */	
}

.cssTopBarButtonsPopupCarousel {
	display: none; /* Hide 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.90); /* Black background with opacity */
	
	z-index: 1030; /* z-index set to ensure content appears over the top of the fixed Bootstrap top title bar. */	
}


.cssTopBarButtonsPopupCarouselControls {
	background-color: #176c91;
}

.cssTopBarButtonsSliderNavButton {
	color: #FFFFFF;
    background-color: #176c91;
	border-style: solid;
	border-width: thin;
}

.cssTopBarButtonsSliderNavButton:hover {
    background-color: #919191;
    cursor: pointer;
}

.cssPopupWindowCloseButtonContainer {
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
    height: 45px;
}


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

.cssPopupWindowSliderItem {

}

.cssPopupWindowVideo {
/*    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-width: 1920px;  
/*    max-width: 1080px;*/ 
/*	max-width: 1920px;*/
/*	max-height: 1080px;*/
/*	width: auto;*/ /* auto (the default) = The browser calculates width */
/*    height: auto;*/ /* auto (the default) = The browser calculates height */
/*    margin: auto;*/
}

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

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

.cssVideoPopupHideTitleButton {
    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 */	
}

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

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

.cssVideoPopupShowTitleButton {
    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 */	
}

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

.cssPopupWindowControlPrevious,
.cssPopupWindowControlNext {

	/* Some of these properties are to overide carousel-control-prev class */
/*	position: static;
	width: 50px;
	
	
	opacity: 0.6;
    height: 15%;*/
/*    top: 42.5%;*/
}

.cssPopupWindowControlPrevious:hover,	
.cssPopupWindowControlPrevious:focus,
.cssPopupWindowControlNext:hover,
.cssPopupWindowControlNext:focus {
/*    opacity: 0.9;*/
}

.cssVideoPopupPreviousIcon,
.cssVideoPopupNextIcon {
    width: 40px;
    height: 40px;
}

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

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

.cssVideoPopupCarouselOverlay {
	  z-index: 3000;
}

.cssVideoPopupNavigationBarContainer {
/*    position: absolute;
    right: 0;
    top: 0;
    left: 0;
*/    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    opacity: 0.95;
	height: 100px;
/*	z-order: 5000;*/
}

.cssVideoPopupTitleContainerPanelBackground {
/*    background-color: #c40b28;*/
    background-color: #E1320E;
/*    border: 1px  solid #E0E0E0;*/	
}

.cssPopupWindowNavigationBarText {
    font-family: Verdana, Geneva, sans-serif;
    color: #ffffff;
    font-size: 0.8rem;
    text-align: center;
	padding: 0;
	margin: 0;
	
	/* Turn off user select so that dblclick on bar does not also select and highlight this DIV element. */
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */	
}

.cssCollapseContentTitleBarText {
    font-family: Verdana, Geneva, sans-serif;
    color: #ffffff;
    font-size: 0.8rem;
    text-align: center;
	padding: 0;
	margin: 0;
	
	/* Turn off user select so that dblclick on bar does not also select and highlight this DIV element. */
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */	
}

.cssPetruschkaCollapseContentTitleBarText {
    font-family: Verdana, Geneva, sans-serif;
    color: #ffffff;
    font-size: 0.8rem;
    text-align: center;
	padding: 0;
	margin: 0;
	
	/* Turn off user select so that dblclick on bar does not also select and highlight this DIV element. */
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */	
}

a.cssCollapseContentCloseButton:hover {
	text-decoration: none;
}

.cssTextItem {
	color: #333333;
/*	background-color: blue;*/
	margin: 0;
}

.cssPopupWindowCarouselItemVideo {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0;
}

.cssPopupWindowCarouselItemText {
	background-color: #ffffff;
	border-style: solid;
	border-width: thin;
	border-color: #707070;
	padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}

.cssVideoPopupCarouselControls {
/*	position: relative;*/
/*	background-color: #c40b28;*/
	background-color: #E1320E;
}

.cssVideoPopupCarouselSliderNavButtonOn {
    color: #FFFFFF;
/*    background-color: #c40b28;*/
    background-color: #E1320E;
	border-style: solid;
	border-width: thin;
}

/* Button state when selectable and mouse hovered over */
.cssVideoPopupCarouselSliderNavButtonOn:hover {
    background-color: #919191;
    cursor: pointer;
}

.cssPopupWindowNavigationButtonContainer {
    width: 30px;
    height: 30px;   	
}

.cssPopupWindowCloseButton:hover {
	cursor: pointer;
}

.cssPopupWindowIconContainer {
	position: absolute;
	top: 8px;
	left: 10px;
	width: 30px;
    height: 30px;
}


.cssPopupWindowTextMainTitle {
	/* See also media query CSS import files. */ 
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #333333;
	font-size: 1.1rem;
	font-weight: bold;
/*	line-height: 1.5rem;			*/
}	


.cssVideoPopupTextSubTitle {
	/* See also media query CSS import files. */ 	
	font-family: Verdana, Geneva, sans-serif;
	color: #333333;
	font-size: 0.8rem;
/*	line-height: 1.4rem;*/
}


.cssVideoPopupTextAdditional {
	/* See also media query CSS import files. */ 	
	font-family: Verdana, Geneva, sans-serif;
	color: #333333;
	font-size: 0.7rem;
/*	line-height: 1.3rem;	*/
}	


.cssInteractiveScoreHoverTooltipTextTitle {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
}	


.cssInteractiveScoreHoverTooltipBodyText {
	font-family: Verdana, Geneva, sans-serif;
	color: #fff;
	font-size: 0.8rem;
}


.cssInteractiveScoreHoverTooltipFooterText {
	font-family: Verdana, Geneva, sans-serif;
	color: #6a6a6a;
	font-size: 0.7rem;
}


.ccsVideoPopupDropdownMasterclassButton {
	text-align: center;
}

.cssVideoPopupDropdownBarNumber {
	text-align: center;		
}

.cssVideoDropdownDivider {
	color: white;
	text-align: center;			
}


.cssInteractiveScoreButtonOnIconContainer {
    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;
}

.cssInteractiveScoreButtonOnMasterclassIcon {
    position: absolute; /* This element set to the nearest ancestor that has a position value other than static. */ 
    top: 12.5%;
    left: 12.25%;
    width: 75%;
    height: 75%;
}

.cssInteractiveScoreButtonOnImage {
    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;
}

.cssMasterclassPopupShortTitle {
	display: block !important;
}

.cssMasterclassPopupLongTitle {
	display: none !important;
}

.cssCollapseContentScoreImage {
	width: 100%;
	background-color: white;
	border: thin solid #c8c8c8;	
}
.cssInstrumentationLink:hover {
	text-decoration: none	
}