@-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.6vw; 
	  background-color:#33cc99;	/* usiual pixyland base color */
	  transition: background-color 1000ms ease;
	 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
	 box-sizing: border-box; 

	 -webkit-text-size-adjust: 100%;  /* **see below */
	 -moz-text-size-adjust: none;
	 -ms-text-size-adjust: 100%;
	 } 
	  
hr { border: 1px solid green; } /* most cases what I'll want */


.hrImg{
  display:block;
  border:0px;
  height:20px;
  background-size: contain;
  background-image:url("/peterpan/Imagez/hr_swirl1.png");
  overflow:hidden;
 } 

.hrb {border: 1px solid black; height:0px}
	  /* **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! */  
/* 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.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); */
	/* better blend with page color */
	background: rgba(128,128,128,.5); 
	}


/* 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 */
}

	  
/* good for use with smaller text photo captions */
.small, .DivToScroll {font-size: 75%; font-weight: bold; text-align: center; } 
.normal {font-weight: normal;}
/*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, .center{text-align:center;}
.center {margin-left:auto; margin-right:auto; }
.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,.big2 {
    font-size: 300%; /* fallback*/ font-size: 5.5vw;
	text-align: center;
	font-weight : bold;
	font-style : italic;
	font-family : "Times New Roman", Times, serif;
	}
	
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,.big2 {line-height: 1.2;}
 
	
h4, .h4  {
    font-size: 120%;
	margin: .5em 0;
	margin: .5rem 0;
    }

	
.tight { line-height: 65%; } /* helps with lower text spacing */ 
	
b,em, strong { font-weight: bold; }

em { font-style : italic; }
		
em,strong, .strong {
 	/* color: #ff6699;	this is the link color, which may be better */
	color: #990033; /*original color; */
	}
	

/*
 p {
    margin-left: 4%;
	margin-right: 4%;
	margin-bottom:0;
	margin-top:1em;
    }
	*/
  p { margin: 0.5em 4%; 
       margin: 0.5rem 4%;
	}

 /* confine certain text centered format tags 
 to limit closeness to edge on small screen .
  offset was added as a stand alone class here */
 .offset  { 
 text-align: center;
 margin-left: 12%; 
 margin-right: 12%; 
 }
 
 .wrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}
	
	
/* 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/backFillGreen2Yellow.jpg");  /*fallback*/
	background-image: linear-gradient(#26fe9b,#97fe26,#26fe9b); /* #e2fe26 middle? */
    width: 95%;
	margin: auto;
	}
.main {
	font-family: "Comic Sans MS","Comic Neue","Chalkboard SE", "comic","cursive","sans-serif";
	font-size: 120%;
	text-align: center;
	line-height: 1.4;
	opacity:1;
	transition:opacity 1000ms;
	margin-left:auto; 
	margin-right:auto;
	} 

	
	/*font-family : "Comic Sans MS","Chalkboard SE","Comic Neue","comic", cursive,sans-serif;*/

.main2 /* good general font family for sans-serif text */
    {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: 600;
	text-align: left;
	line-height: 1.2;
	margin-left:auto; 
	margin-right:auto;
	}


.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: 0.3px 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;}
.webFont { font-family : "webFont";}

.stroke {-webkit-text-stroke: 1px black;} /* bad with for dynqamic sizing! */

.blur {
     filter: glow(color=black,strength=4);  /*only works with IE */
	 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;  
    	 }
/* 9/2020 these simulate a black stroke plus a 'glow', with box-shaddow */
.blur-stroke {filter: glow(color=black,strength=4);  /*only works with IE */
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,  
	-1px -1px .2em #000, 1px -1px .3em #000, -1px 1px .4em #000;}
	
.blurW-stroke {filter: glow(color=black,strength=4);  
	text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,  
	-1px -1px .2em #ffffff, 1px -1px .3em #ffffff, -1px 1px .4em #ffffff; }
	
	/* 1/2020 these simulate a white stroke plus a black 'glow', with box-shaddow */
.blur-strokeW {filter: glow(color=white,strength=4);  /*only works with IE */
	text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff,  
	-1px -1px .2em #000, 1px -1px .3em #000, -1px 1px .4em #000;}
	


.blurEzy { /* old eng font on wedding pgs */
    filter: glow(color=black,strength=2);  
	 text-shadow: -1px -1px .1em #555,   
     1px -1px .1em #000,   
     -1px 1px .1em #000;  
	  	 }
		 
.grEmoji {width: 2.4%;  vertical-align:middle; }
.grEmoji2 {width: 4%;  vertical-align:middle; }
.grEmoji3 {width:1.2em; vertical-align:middle;}
	
.wedNav {width: 80%;}

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


.imLeft48, .imRight48 { width: 48%; min-width: 140px; height: auto; }
.imLeft50, .imRight50 { width: 50%; min-width: 150px; height: auto; } 
.imLeft35, .imRight35 {width: 35%; min-width: 110px; height: auto; }
.imLeft25, .imRight25  { width: 25%; min-width: 90px; height: auto; } 
.imLeft15, .imRight15 {width: 15%; min-width: 85px; height: auto; }
.imLeft10, .imRight10 {width: 10%; min-width: 50px; height: auto; }

/*.imLeft, .imRight {width: 35%; min-width: 120px; height: auto; } */

.imLeft, .imLeft10, .imLeft15, .imLeft25, .imLeft35,.imLeft50 {float: left; margin-right: 10px; }
.imRight,.imRight10, .imRight15, .imRight25, .imRight35,.imRight50 {float: right; margin-left: 10px;}

.ht5m {height:5em;} .ht10m {height:10em;} .ht15m {height:15em;} 
.ht20m {height:20em;} .ht25m {height:25em;} .ht30m {height:30em;}

.imMid {width: 100%; height: auto;}
.fleft {float: left; }
.fright {float: right;}
.noMin { min-width: 1px; } /* cancel minimum width */
.vtop {vertical-align:top; }
.vmid {vertical-align:middle; }

.margAdj {margin: 0.5rem 4%;} /* helpful when block elem breaks margins */
.txtSpc {margin: 0.5rem 0;} /* helpful to add space for capsians */


/* 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; }
.trow {display:table-row;}

.tcell {display:table-cell; padding:0px 1px } /* t-b, r-l */
.tcell2 { /* first used in music page table */
	background-color:#33cc99;
	display:table-cell; 
	border:1px solid green;
	border-radius: 15px;
	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;
	}
	

.limv {
	 /*music page*/
	 max-height: 10em;
	 max-height: 20vh;
	 overflow: auto;
	 margin: 0;
	 padding: .5em .5em; 
	 padding: .5rem .5rem;
	 }	

/* banners classes */ 

.banner {position:relative; overflow: hidden;}
.bnrBackground {
	position:absolute;
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	margin: auto;
	}



/* for table-cell like buttons, wedding page use, music buttons */
	
.tcellSpc1, .stopButton {	
      background-color: #2d9967; /* greenish */
	  font-weight:bold;
	  display:table-cell; 
	  border:3px double gray; 
	  border-radius: 15px; 
	  padding:5px;
	  vertical-align: middle;
	  max-height: 10px; 
	  }
	  
.stopButton {
	position: fixed;
	transition:opacity 1000ms;
	display:table;
	font-family: "Comic Sans MS","Comic Neue","Chalkboard SE", "comic","cursive","sans-serif";
	font-weight:bold;
	text-align:center;
	line-height: 2;
	cursor: pointer;
	background-color: #ffcccc;	/* default kind of pinkish */
	color: white;/* default */
	z-index: 4;
	}


/* load display / progresswheel() */
#loaddisplay {
	display:table; 
	width:100%;
	height:100%;  
	position:fixed;
	bottom:0px; /* on iphone, top 0 leaves gap at botom */
	/*border:1px solid black; */
	z-index: 8; 
	
	color: green;
	font-size: 450%;
  	font-weight : bold;
	font-style : italic;
	font-family : "Times New Roman", Times, serif;
	background:inherit; /*#33cc99; */
	transition:opacity 1000ms ease;
	}
	
#ldChild { /* ld image */
	position:absolute;
	width: 90%;
	max-width: 650px;
	/*z-index: -1;*/
	right: 0;	
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	}
#ldCell {
	display:table-cell;
	text-align: center;
	vertical-align: middle;
	}
/* end load display classes */


#photoCaption {	/* used with simple zoom for captions */
 	display:block;
	/*width:90%;*/
	margin:auto; 
	font-weight: bold;
	font-style : italic;
	position: absolute;
	/*top: 0;
	left: 0;
	right: 0;
	*/
	vertical-align: middle;
	color:#990033;
	transition:opacity 1000ms ease;
	opacity=.7;
	z-index: 12;
	padding: 0 10px;
	filter: glow(color=white,strength=4);  
	 text-shadow: -1px -1px .2em #ffffff,   
     1px -1px .3em #ffffff,   
     -1px 1px .4em #ffffff;
	}
	
  

.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;} /* navigation background */
.bg_myCyan { background-color:#33cc99;} /* common bg of legacy site */
.magenta { color: #e600e6; } /* magenta */
.darkRed {color:  #990033; } /* dark red */ 
.linkRed {color: #ff6699; }  /* redish pink used in non-hovered link */
.green {color:green;}
.white {color:white;}
.ltGreen {color:#55ff00; /* light green */ }
.dkGreen  {color:#003333; /* dark green */ }

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




a:link { color: #ff6699; } /* unvisited link */
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  { /* 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; 
	}
 
 .link {cursor: pointer; } /* useful with onclick event on divs */
 .nobrd { border:0;} /* prevent link highlighting of images in 'a' tags */
 
 .nomobile { display:none; } /* use script to add display:block 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, .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: 3px;
	z-index: 10;
	font-family: "Lucida Console", Monaco, monospace,"Courier New", Courier;
	font-size: 0.8em; 
	}
 
 /*.form-button-size { width: 150px; height: 60px;  }*/
 
    /* for small screens, either orientation */
  
@media screen  and (min-device-width: 320px) and (max-width: 600px) {
	#loaddisplay {font-size: 220%;}
	.DivToScroll {font-size: .6rem;} 
	}
  
   /* mostly for desktop browsers when width is decreased */
 @media screen and (min-width: 600px) and (max-width: 810px)  {
 	.main {font-weight: 600;}
	.main2 {font-weight: 600;}
	}  
   
 @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: 100%;
		font-weight: normal;
		width: 100%; 
  		margin: auto;
		line-height: 1.1;
		}
	.main2 {  
  		font-weight: 500;
		}
	 
	
	 h1,.big {
	    font-size: 220%;
	    line-height: 120%;
	    }
	 .big2 {  
	 	font-size: 200%;
	    line-height: 100%;
		}
	 h2,.medium	{ font-size: 120%; }
	 	
	h4  {font-size: 105%;}
	
	a  {font-weight: normal;}  
	 
	 .medium {
	 	font-size: 120%;
		line-height: 140%; 
		}
	 
	 .center {text-align: center; margin-left:auto; margin-right:auto; }
	 .wedNav {width: 95%;}
	 .lower_nav { font-size: 120%; }
	 .small {font-size: 70%; line-height: .9rem;}
	 .bigBannerTxt { font-size: 230%;  line-height: 120%; }
	 .smallBannerTxt { font-size: 150%; }
	 .smallBanner {width: 50%;}
	 .spcNavTxt  {font-size: 120%; }
	 
	 .grEmoji {width: 4%; }
	 .grEmoji2 {width: 8%;}
	 
	  /*.form-button-size { width: 120px; height: 40px;}*/
	  input {font-size: 16px;} /* prevent page expansion on forms*/
	 /* no News link on portrait phone display */
	 #optLink2, .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: 100%;
		width: 100%; 
  		margin: auto;
		line-height: 1.1;
		font-weight: normal;
		}
	  .main2 {  
  		font-weight: 500;
		}
		
	  h1,.big,.big2 {
	    font-size: 250%;
	    line-height: 100%;
	    }
		
	 h2 { font-size: 180%; }
	 h4  {font-size: 120%;}
	 
	 .medium {
	 	font-size: 180%;
		line-height: 140%; 
		}
	 
	.center {text-align: center; margin-left:auto; margin-right:auto; }
	.wedNav {width: 95%;}
	.lower_nav { font-size: 120%; }
	.small {font-size: 80%; line-height: .9rem;}
	.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%;}
	
	 input {font-size: 16px;} /* prevent page expansion on forms*/
	
	 /*.form-button-size { width: 120px; height: 40px;}*/

	/* restore news linke when display is wider */
	#optLink2, .optLink2 {display:table-cell;}
	#vtLocation {width: 80%; height:auto; }
	/* don't need #loaddisplay */
   }