/* Collected styles from Guitar Lesson form, most of which was done prior to site overhaul. A few changes were made to add features learned since then, but for the most part its being kept intact, since it does the job for the form, and my be useful in another form. */


/* Re- Adjust the button size. for the enclosing div of 
 specially handled div that will hold a button images for me, as well 
 as any other button images. Unfortunately I can't do this by percent.
 Another adjusted copy may need to be placed in the @media rule for small screen
*/
.file-upload, .button-size{ width: 130px; height: 50px;  }
/* max-width to override other "input" settings on page, 
table-cell ensures surrounding  table cell sees it */
.button-size { max-width:100%; display: table-cell;  }

/* some local styles, just for this form */
	 
.upStatus
   	{
   	text-align: center;
	font-size: 90%;
   	vertical-align: top;
	font-weight:bold;
  	 visibility:hidden;
   	}
	

h1,.big 
{
font-family : "Comic Sans MS","Comic Neue","Chalkboard SE","comic", "cursive","sans-serif";
  color: #55ff00; ;
  font-size: 250%;
  font-weight : bold;
  text-align: center;
  margin-top : 1px;
  margin-bottom : 1px;
  padding-top: 1px;
  padding-bottom: 1px;
}
h2, .medTitle 
{
  font-family : "Comic Sans MS", "Comic Neue","Chalkboard SE","comic", "cursive","sans-serif";
  font-size: 100%;
  font-weight : bold;
  color: black;
  text-align: center;
}

h3
{
  font-size: 120%;
  font-weight : bold;
  color: black;
  text-align: center;
}

p {
	font-size: 100%;
	color: black;
	text-align: left;
	font-weight : bold;
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom:0;
	margin-top:1em;
    }
 
 ul,li {
	font-size: 100%;
	color: black;
	text-align: left;
	font-weight : bold;
	font-family : "Times New Roman", Times, serif;
	margin-left: 2%;
	margin-right: 2%;
 }
 em 
 {
  font-weight : bold;
  text-decoration : underline; 
 }
 
.strong 
 {
  font-family : "Trebuchet MS", Arial, Helvetica, sans-serif; 
  font-weight : bold;
  font-size: 110%;
}

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

img {
	margin:0px;
	padding: 0px;
	}


.smallcenter
 {
	font-size: 80%;
	color: black;
	text-align: center;
	font-weight : normal;
	}

.fineprint
 {
	font-size: 90%;
	color: black;
	text-align: center;
	font-weight : bold;
	font-family : "Times New Roman", Times, serif;
	font-style : italic;
	}
	
#status,.error,.strong, .red { color: #770033; }
#status {padding-bottom: 10px; font-weight: bold;}

		
input, label { font-size: 90%; width:50%; font-weight : bold;}
/* this just sets some width, for old versions if IE that don't like % for width */
textarea { font-size: 100%; font-weight : bold; width: 300px; height: 50%; }
	
/* This overrides the above. Old IE versions won't understand @media queries */
@media screen and (max-width: 2000px) {  textarea {	width: 90%;} }
	
.formjust {text-align: right; }


body 
{
font-size: 100%;
margin-left: 2%;
margin-right: 2%;
background-color:#33cc99;	/* usiual pixyland base color */
-webkit-text-size-adjust: 100%;  /* see below** */
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%; 
}

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

.main
{
background-image: url("/Images/backFillGreen2Yellow.jpg");  /*fallback*/
background-image: linear-gradient(#26fe9b,#e2fe26,#26fe9b);
width:90%; 
max-width: 600px; /* hard limits for form */
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif; 
position:relative;
margin-left:auto;
margin-right:auto;
}



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

.imLeft, .imLeft25 , .imLeft35,.imLeft50 {float: left; padding-right: 10px; }
.imRight, .imRight25, .imRight35,.imRight50 {float: right; padding-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%; } 
.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%;} .w90 {width: 90%;} .w95 {width: 95%;} .w100 {width: 100%; }
.noLRmarg, .minWid, .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, .w90 , .w95 {margin-left:auto; margin-right:auto;}

.blur {
     filter: glow(color=black,strength=10);  
	 text-shadow: -1px -1px .2em #000,   
     1px -1px .3em #000,   
     -1px 1px .4em #000;  
  	 }

.table {display:table; margin-left:auto; margin-right:auto; }
.trow {display:table-row;}
.tcell {display:table-cell; padding:0px 1px; margin-left:auto; margin-right:auto; } 
.center {margin-left:auto; margin-right:auto;}

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



a:link { color:  #ee0066; } /* unvisited link */
a:visited { color: #ee0066; } /* 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;}  


textarea, input { font-size: 100%; font-size: 1rem;  }
	/* this just sets some width, for old versions if IE that don't like % for width */
textarea {width: 300px; height: 70%} /* since IE 8 doesn't like % for width  */ 	

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


/* ==============media queries ====================== */

@media screen and (max-width: 2000px) {  textarea {	width: 95%;} }

@media screen and (max-width: 640px) {
  .main {  width: 100%; }
	
  }
 
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:portrait) 
{
	 .main, li{
    /* smartphone */
    width:100%;
	font-size: 100%;
		}
	h1,.big { font-size: 150%;}
	
	 textarea {	width: 95%; height: 10rem;}
	 input { width:90%; }
	 .formjust {text-align: left; }
	.medTitle, h2 {line-height: 130%; }
 
}

@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation:landscape) 
{ 

.main, li {
    /* smartphone */
    width:100%;
	font-size: 100%;
		}
		
h1,.big { font-size: 200%;
input { width:50%; }
.formjust {text-align: right; }
.medTitle, h2 {line-height: 130%; }
}