/* 
Modal Style add ons. 

This just ensures modal is centered,  remains at a fixed opsition, and inner text-align is set. Other styles directly applied in elemt tag, and from within JS modal manager */

.modal-container {
  display:none;
  text-align: center;
  position: fixed;
  top:0;	 
  bottom:0;
  left:0;
  right:0;
  margin: auto;
  z-index:3;
 }

/* set basic responsive text styles */
.modelInnerHtml {
  text-align: center;
  /*font-size: 120%;  set in container... won't work here*/
  font-weight: bold;
  line-height: 1.1;
}

.modalformButton {width: 40%;}


/* set some button styles. Multiple
classes besides this one can be passed
in a single string, to JS management calls */
.cltxt {color: lightgreen; 
		font-weight: bold;
		font-size: 100%;
		}
.cltxt:hover, .cltxt:focus {
  color: yellow;
  text-decoration: none;
  transition: all 500ms ease;
  cursor: pointer;
}


/* we have our own scrollbar now, so turn off others. 
/* NOTE: this is now in a stand alone class called "avoidScroll" I can apply anywhere
#mfill::-webkit-scrollbar {  display: none;} /* chrome WebKit */
/*
#mfill {-ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-none;} IE+10, FFox */
.avoidScroll { 
	-ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-none;} /*IE+10, FFox */
.avoidScroll::-webkit-scrollbar {display: none; } /* Safari and Chrome */


 @media screen and (min-device-width: 320px) and (max-width: 600px) and  (orientation: portrait)  {
	
	.modal-container {font-size: 80%;}
	.modelInnerHtml {   line-height: 1.0;}
	.modalformButton {width: 60%;}
	
}

@media screen  and (min-device-width: 320px) and (max-width: 600px) and  (orientation: landscape)  {
	
	.modal-container {font-size: 80%;}
	.modelInnerHtml { line-height: 1.0; }
	.modalformButton {width: 60%;}
	
}

/*******************************
* 9/2020 New Vertical SLIDER BAR info... for scrolling modal content.
* NOTE: for Pixyland, notice  use of background: url('/Images/starsVertRect.gif'); 
*/

.vert_sliderContainer_MODAL {
    position: fixed;
	width: 50px; /*20%; will be positioned and modified*/
	/*max-width:50px; */
	height: 50%;
	top: 20%;
	/*right: 5%;*/
	/*border: 1px solid black;  for testing */
	z-index:3;
	transition: opacity 1000ms;
	opacity:0;
	visibility: hidden;
	background: url('/Images/starsVertRect.gif');
  	background-repeat: repeat;
  	background-size: 100%;
	}
	
.vert_sliderContainer_MODAL:hover, .vert_sliderContainer_MODAL:focus {
  /*
  background: url('/Images/starsVertRect.gif');
  background-repeat: repeat;
  background-size: 100%;
  */
  /*background-position: center;*/
  cursor: pointer;
	}


.vert_modal_slider_bar {  /* control slide track*/
	width:50%; 
	max-width:30px;
	height:100%;
	position: absolute;
	cursor:pointer;  /* ??? need here? */
	top: 0%; 
	/*background-color:white;*/
	left:25%; /* change top of slider buffer to be in middle */
}


.vert_modal_slider_buffer  { /* limits of track */
	width:50%; 
	height:100%;
	/*background-color:#C0C0C0; */
	bottom:0%;
	left:25%;
	position:absolute;	
	}

.vert_modal_slider_control { /* stripe*/
	width:20%; /* change width of vertical slider control for streamlined look */
	height:50%; /* Start vertical slider control at middle position */
	background-color:yellow;
	/*background: url('/Images/blkOvlGrnCent_vert.gif') no-repeat;*/
	background-size: 100% 50%;
	bottom:0%;
	left:40%; /* change left of slider control to be in middle */
	position:absolute;	
	
}

.vert_modal_slider_knob {
	width: 75%;
	height:auto; /* change height of slider knob for streamlined look */
	top: 45%; /* Start vertical knob at middle position */
	left:14%; /* change left of slider knob to be in middle */
	position:absolute;
	}


/* end of file */