/* global styles */
 
  @-ms-viewport{
  width: device-width;
}

img {-ms-interpolation-mode: bicubic;}

img {
	margin:0;
	padding:0;
	/*prevent dragging of images. 1st used on music player*/
  	-webkit-user-drag: none;
  	-khtml-user-drag: none;
  	-moz-user-drag: none;
  	-o-user-drag: none;
 	 user-drag: none;
	}

body { /* https://css-tricks.com/snippets/css/fluid-typography/ */
      font-size: 1em; 
	  font-size: 1rem; 
	 font-size: 1.8vw; 
	 /*color: #1a1a1a; for most fonts */;
	  background-color:#33cc99;	/* usiual pixyland base color */
	 -webkit-text-size-adjust: 100%;  /* **see below */
	 -moz-text-size-adjust: none;
	 -ms-text-size-adjust: 100%;
	 font-smooth: always;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	  } 

/* try to make scroll bars less obtrusive */

::-webkit-scrollbar { 
min-width:4px;
max-width:15px;

}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	background: rgba(0,128,128,1); 
}
 
/*
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,1); 
}
*/


/* attempts to stop text from being selected BLUE 
// must be applied to individual elements*/

.nosel {
  -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 */
	/* also, add unselectable="on"  to html element */
}




	  
hr { border: 1px solid green; } /* most cases what I'll want */

	  /* **http://www.saintsatplay.com/blog/2015-04-25-preventing-text-scaling-on-iphone-landscape-orientation-change */ 
	  /* these help many browsers maintain text size during orientation changes! */  

	  
/* good for use with smaller text photo captions */
.small {font-size: 75%; font-weight: bold; text-align: center; } 
/*for individual table cells with images and captions */
.ct {vertical-align:top;} /* side by side div w/img and bottom text */
.cb {vertical-align:bottom;} /* side by side div w/img and top text */
.cm {vertical-align: middle;} /* middle text */
.cb,.ct,.cm {text-align:center;}
.lf {text-align: left;}


/* these addons help preserve font size during orientation changes */
.bigBannerTxt { font-size: 300%; /* fallback*/ font-size: 5.5vw; }
.smallBannerTxt  {font-size: 200%; /* fallback*/ font-size: 4vw; }
.smallBanner {width: 35%; text-align: center; margin: auto;}
 
 
h1,.big {
    font-size: 260%; /* fallback*/ font-size: 5.5vw;
	text-align: center;
	font-weight : bold;
	font-style : italic;
	font-family : "Times New Roman", Times, serif;
	color: white;
	}
	
h2,.medium	{  font-size: 180%; /* fallback */ font-size: 3.8vw; } 

.medium {
		font-weight : bold;
		/*font-style : italic;*/
		font-family : "Times New Roman", Times, serif;
		line-height: 1.60;  
		}
.big {line-height: 1.2;}
 
	
h4  {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: "Comic Sans MS","Comic Neue","Chalkboard SE", "comic","cursive","sans-serif";
	font-size: 120%;
	text-align: center;
	margin: .5em 0;
	margin: .5rem auto;
	}
h5  {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: "Comic Sans MS","Comic Neue","Chalkboard SE", "comic","cursive","sans-serif";
	margin: .1em 0;
	
	text-align: center;
	}
	
.strongcenter /* altered carryover from old site. */
 {
 font-family : "Times New Roman", Times, serif;
 color: #990033;	/* same as strong and em */
 filter: glow(color=white,strength=2);  /* weaker than usual blur */
 text-shadow: -1px -1px .2em #ffffff,   
     1px -1px .3em #ffffff,   
     -1px 1px .4em #ffffff;  
 font-weight: bold;
/* font-size: 75%; */
 font-style: italic;
 margin: .5em 0;
 margin: .5rem auto;
 }
  
  /* confine certain text centered format tags 
  to limit closeness to edge on small screen .
  offset was added as a stand alone class here */
 h4, .strongcenter, .offset  { 
 text-align: center;
 margin-left: 12%; 
 margin-right: 12%; 
 }
  
	
b,em { font-weight: bold; }

em {
	font-style : italic;
	}
	
 strong, em {  
    font-weight : bold; 
	color: #990033;

     filter: glow(color=white,strength=4);  
	 text-shadow: -1px -1px .2em #ffffff,   
     1px -1px .3em #ffffff,   
     -1px 1px .4em #ffffff;  

	} 
	
/*
 p {
    margin-left: 4%;
	margin-right: 4%;
	margin-bottom:0;
	margin-top:1em;
    }
	*/
  p { margin: 1em 4%; 
      margin: 1rem 4%;
	}
	
li { margin-left: 3%; width:90%;}

/* these two are good for embedding youtube videos */	
.ytcontainer {
 	position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
	}
.ytvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
 
 .main, .main2 /* good general font family for silly text */
	{
	background-image: url("/images/backFillBlue2Green.jpg");  /*fallback*/
	background-image: linear-gradient(#26fe9b,#00a3cc,#26fe9b);
    width: 95%;
	margin: auto;
	font-size: 120%;
	text-align: center;
	line-height: 1.4;
  	} 
	
.main {
 	font-family: "Comic Sans MS","Comic Neue","Chalkboard SE", "comic","cursive","sans-serif";
}

.main2 /* good general font family for sans-sefif text */
    {
    background-color: #33ffcc;
	font-family : "Times New Roman", Times, serif;
	font-weight: 500;
	text-align: left;
	line-height: 1.2;
	}
	
.lower_nav { /* for lower nav bar 'a' tags */
	font-size: 150%;
	text-decoration: none;
	text-align: center;
	color: #ff6699; /*  White; ??? color may have vary with page */
	font-weight : bold;
	font-style : italic;
	font-family : "Times New Roman", Times, serif;
	}
/* lower nav bar table cell div tags */
.lntd { text-align:center; vertical-align: middle; width:25%; background-color:#09774d; } 

/* some text effects */
.engFont {  
    font-family: 'old_english', "Trebuchet MS", Arial, Helvetica, sans-serif;
	-webkit-text-stroke: 1px black;	/* outline stroke, many browsers */
}

.comic {font-family : "Comic Sans MS","Comic Neue","Chalkboard SE","comic", "cursive","sans-serif";} /* for browsers like android without it */
.sans { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
.times {font-family : "Times New Roman", Times, serif;}

.stroke {-webkit-text-stroke: 1px black;}
.blur {
    filter: glow(color=black,strength=4);  
	 text-shadow: -1px -1px .2em #000,   
     1px -1px .3em #000,   
     -1px 1px .4em #000;  
    	 }
.blurW { /* white blur */
     filter: glow(color=white,strength=4);  
	 text-shadow: -1px -1px .2em #ffffff,   
     1px -1px .3em #ffffff,   
     -1px 1px .4em #ffffff;  
    	 }

		 
.grEmoji {width: 2.4%;  vertical-align:middle; }
.grEmoji2 {width: 4%;  vertical-align:middle; }
	
.wedNav {width: 80%;}

/* help better control small laft/right justified images */


.imLeft50, .imRight50 { width: 50%; min-width: 150px; height: auto; } 
.imLeft25, .imRight25  { width: 25%; min-width: 90px; height: auto; } 
.imLeft35, .imRight35 {width: 35%; min-width: 110px; height: auto; } 
.imLeft, .imRight {width: 35%; min-width: 120px; height: auto; } /* same as above */

.imLeft, .imLeft25 , .imLeft35,.imLeft50 {float: left; margin-right: 10px; }
.imRight, .imRight25, .imRight35,.imRight50 {float: right; margin-left: 10px;}
.imMid {width: 100%; height: auto;}


/* several widths, helpful in approximating photo page layouts */
/* all 1% increment widths, centered from 20-80, plus a few others */
.minWid {width: 1%; } 
.w5 {width:5%} .w10 {width:10%} .w15 {width:15%} 
.w20  {width: 20%;} .w21  {width: 21%;} .w22  {width: 22%;}
.w23  {width: 23%;} .w24  {width: 24%;} .w25  {width: 25%;}
.w26  {width: 26%;} .w27  {width: 27%;} .w28  {width: 28%;}
.w29  {width: 29%;} .w30  {width: 30%;} .w31  {width: 31%;} 
.w32  {width: 32%;} .w33  {width: 33.3%;}
.w34  {width: 34%;} .w35  {width: 35%;} .w36  {width: 36%;}
.w37  {width: 37%;} .w38  {width: 38%;} .w39  {width: 39%;}
.w40  {width: 40%;} .w41  {width: 41%;} .w42  {width: 42%;}
.w43  {width: 43%;} .w44  {width: 44%;} .w45  {width: 45%;}
.w46  {width: 46%;} .w47  {width: 47%;} .w48  {width: 48%;}
.w50  {width: 50%;} .w51  {width: 51%;} .w52  {width: 52%;}
.w53  {width: 53%;} .w54  {width: 54%;} .w55  {width: 55%;}
.w56  {width: 56%;} .w57  {width: 57%;} .w58  {width: 58%;}
.w59  {width: 59%;} .w60  {width: 60%;} .w61  {width: 61%;}
.w62  {width: 62%;} .w63  {width: 63%;} .w64  {width: 64%;}
.w65  {width: 65%;} .w66 {width: 66.6%;} .w67  {width: 67%;}
.w68  {width: 68%;} .w69  {width: 69%;} .w70  {width: 70%;}
.w71  {width: 71%;} .w72  {width: 72%;} .w73  {width: 73%;}
.w74  {width: 74%;} .w75  {width: 75%;} .w76  {width: 76%;} 
.w77  {width: 77%;} .w78  {width: 78%;} .w79  {width: 79%;} 
.w80 {width: 80%;} .w85 {width: 85%;} .w90 {width: 90%;} .w95 {width: 95%;} .w100 {width: 100%; }
.noLRmarg, .minWid, .w5, .w10, .w15, .w20, .w21, .w22, .w23, .w24, .w25, .w26, .w27, .w28, .w29, .w30, .w31, .w32, .w33, .w34, .w35, .w36, .w37, .w38, .w39, .w40,w41, .w42, .w43, .w44, .w45, .w46, .w47, .w48, .w50, .w51, .w52, .w53, .w54, .w55, .w56, .w57, .w58, .w60, .w61, .w62, .w63, .w64, .w65, .w66, .w67, .w68, .w69, .w70, .w71, .w72, .w73, .w74, .w75, .w76, .w77, .w78, .w79, .w80, .w85, .w90 , .w95, .w100 {margin-left:auto; margin-right:auto;}


.table {display:table;}
.brdSpc5 { border-spacing: 5px; }
.bdrCol {border:3px double gray; border-collapse:collapse; }
.bdrColG {border:3px double green; }
.bdrBlk {	border: 2px solid black;}

.trow {display:table-row;}

.tcell {display:table-cell; padding:0px 1px } /* t-b, r-l */
.tcell2 { /* first used in music page table */
	display:table-cell; 
	border:1px solid green;
	vertical-align: middle;
	padding: .1em .5em; 
	padding: .1rem .5rem; 
	}
.tcell3 {	/* first used in music page jazz section */
	display:table-cell; 
	border:1px solid green;
	border-radius: 15px;
	vertical-align: middle;
	padding: .1em .5em; 
	padding: .1rem .5rem;
	}
.tcell4 { /* first used on TTC main page. use with .tbspace  */
	display:table-cell; 
	background-color: #09774d;
	border: 2px solid black;
	border-radius: 15px;
	text-align: center;
	vertical-align: middle;
	padding: .2em .5em; 
	padding: .2rem .5rem;
	}

.tcellVpad  {
	display:table-cell; 
	padding-top: 5px;  
	padding-bottom: 5px;
	}
	
.tbspace { /* Note just discovered this!!! apply to display-table div*/
	border-spacing: .5em .5em; 
	border-spacing: .5em .5rem; 
	}



/* for table-cell like buttons, wedding page use, music buttons */
	
.tcellSpc1 {	
      background-color: #ffcccc;
	  display:table-cell; 
	  border:3px double gray; 
	  border-radius: 15px; 
	  padding:5px;
	  vertical-align: middle;
	  max-height: 10px; 
	  }

.pad5 {padding:5px;}
.pad5p {padding: .5em 2em;}
.rounded {border-radius: 15px;}

.bg_pinkWht { background-color: #ffcccc; } /*  off White pink  */
.bg_hotPink { background-color: #ff33cc; } /* pink tu-tu color */
.bg_greenNav {
	background-color: #09774d;
	height: auto;
	width: 90%;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	border: 2px solid black;
	margin-left:auto; margin-right:auto;
	} /* #09774d;#80ff80;*/
.bg_VisitorBox {background-color: #09774d;} /* #09774d;#80ff80;*/
	
.bg_myCyan { background-color:#33cc99;} /* common bg of legacy site */
.magenta { color: #e600e6; /* magenta */}
.darkRed {color:  #990033; /* dark red */ }
.green {color:green;}
.white {color:white;}
.ltGreen {color:#55ff00; /* light green */ }

.spcNavTxt  {font-size: 180%; /* fallback*/ font-size: 3vw; }

.center { text-align: center; margin-left: auto; 	margin-right:auto; }

a:link { color: #ff6699;} /* unvisited link was #, ff6699; */
a:visited { color:#ff6699; } /* visited link */
a:hover { color: yellow; } /* mouse over link */
a:active { color: yellow; } /* selected link */
a  { text-decoration: none; font-weight: bold; transition: all 500ms ease;}  

a:link { color: white;} /* unvisited link was #, ff6699; */
a:visited { color: white; } /* visited link */
a:hover { color: yellow; } /* mouse over link */
a:active { color: yellow; } /* selected link */


a  { /* shaddow helps makes similar color links stand out */
     filter: glow(color=black,strength=10);  
	/* text-shadow: -1px -1px .2em #000,   
     1px -1px .3em #000,   
     -1px 1px .4em #000; */
		 text-shadow: -1px -1px .1em #000,   
     1px -1px .1em #000,   
     -1px 1px .1em #000; 
	
	}
 
 .link {cursor: pointer; } /* useful with onclick event on divs */
 .nobrd { border:0;} /* prevent link highlighting of images in 'a' tags */
 
 .nomobile { }/* use script to add display:none in mobil cases */ 

  
 #vtLocation 	/* for video div continer location */
	{
	width: 90%;
	border: 0; 
	padding: 0;
	margin: auto;
	background-color:#333333;
	}


 video,#videoID
   {
    width: 100%;
    height: auto;
   }
   
 #optLink2 {display:table-cell;} /* override with media rules */
 
 /* useful style for debug scrolling window */
.DivToScroll{   
	display:none;
	width:50%;
	margin:auto; /* scroll as needed */
	height:10em;
	overflow-y: auto;
    background-color: #D0D0D0;
    border: 1px solid black;
    border-radius: 4px;
	font-family: "Courier New", Courier, monospace;
    padding: 5px 7px 5px;
	position: fixed;
	bottom: 3px;	/* tweak these */
	right: 10%;
	}
 
 
 	
/* temp, till I replace tables with all CSS
I may not though, as the few carried over tables style well.
 */

.newtable { 
		background-color: #09774d;
		
		border: 2px solid black;
		border-radius: 15px;
		}

.limv {
	 background-color: #33cc99;
	 
	 padding: 4%;
	 border: 1px solid black;
	 overflow: initial;
	 }
	 
	/* I should only need to worry about scrolling descriptions on small screens . Also, IE 8 won't recognize media rules */
 
@media screen  and (min-device-width: 320px) and (max-width: 600px) {
.limv {
	 overflow-y: scroll;
	  max-height: 15rem;
	}
}
 
 
 
 
   /* mostly for desktop browsers when width is decreased */
 @media screen and (min-width: 600px) and (max-width: 810px)  {
 	.main, .main2 {font-weight: 600;}
	}  
   
   /* mostly for phones and devices whose orientation can be turned */
   
 @media screen and (min-device-width: 320px) and (max-width: 600px) and  (orientation: portrait)  {

 body {width: 100%; margin: auto; font-size: 100%; }
	  .main,.main2 {  
  		font-size: 120%;
		font-weight: normal;
		width: 100%; 
  		margin: auto;
		line-height: 1.1;
		}
	 h1,.big {
	    font-size: 150%;
	    line-height: 120%;
	    }
	 h2,.medium	{ font-size: 120%;  }
	 	
	h4  {font-size: 105%;}
	
	a  {font-weight: normal;}  
	a:link { color: yellow;} /* unvisited link was #, ff6699; */
	a:visited { color: white; } /* visited link */
	a:hover { color: white; } /* mouse over link */
	a:active { color: white; } /* selected link */
	 
	 .medium {
	 	font-size: 120%;
		line-height: 140%; 
		}
	 
	 .center { text-align: center; margin-left: 4%;	margin-right: 4%; }
	 .wedNav {width: 95%;}
	 .lower_nav { font-size: 120%; }
	 .small {font-size: 85%; line-height: 1rem;}
	 .bigBannerTxt { font-size: 230%;  line-height: 120%; }
	 .smallBannerTxt { font-size: 150%; }
	 .smallBanner {width: 50%;}
	 .spcNavTxt  {font-size: 120%; }
	 
	 .grEmoji {width: 4%; }
	 .grEmoji2 {width: 8%;}

	 /* no News link on portrait phone display */
	 #optLink2 {display:none;} 
	 
	}


@media screen  and (min-device-width: 320px) and (max-width: 600px) and  (orientation: landscape)  {
     
	 body {width: 100%; margin: 0; font-size: 100%; }
	 .main,.main2 {  
  		font-size: 120%;
		width: 100%; 
  		margin: auto;
		line-height: 1.1;
		font-weight: normal;
		}
	  h1,.big {
	    font-size: 200%;
	    line-height: 100%;
	    }
		
	 h2 { font-size: 180%; }
	 h4  {font-size: 120%;}
	 
	 a:link { color: yellow;} /* unvisited link was #, ff6699; */
	a:visited { color: white; } /* visited link */
	a:hover { color: yellow; } /* mouse over link */
	a:active { color: white; } /* selected link */
	 
	 .medium {
	 	font-size: 180%;
		line-height: 140%; 
		}
	 
	.center { text-align: center; margin-left: 4%; margin-right: 4%; }
	.wedNav {width: 95%;}
	.lower_nav { font-size: 120%; }
	.small {font-size: 85%; line-height: 1rem;}
	.bigBannerTxt { font-size: 250%;  line-height: 120%; }
	.smallBannerTxt { font-size: 180%; }
	.spcNavTxt  {font-size: 120%; }
	.smallBanner {width: 35%;}

	.grEmoji {width: 3.5%;}
	.grEmoji2 {width: 7%;}

	/* restore news linke when display is wider */
	#optLink2 {display:table-cell;}
	#vtLocation {width: 80%; height:auto; }
	   
   }