body { text-align: center; background-color: #33ccff; 
		width: 100%; height: 100%; font-size: 14px; margin: 0 auto; }
	.libpage { background-color: #cccccc; }
	
.respond img { width: 100%; max-width: 100%; height: auto; }
	
#header	{ width: 100%; max-width: 900px; text-align: center; background-color: lightgreen; border:0;}

#navbar	{ width: 100%; max-width: 900px; background-color: gray; border: 0px; }

#wrapper { margin: 0 auto; text-align: left; max-width: 900px; 
	background-color: white; 
	border:1px solid black;
	box-shadow:0 3px 30px 0 #000000; 
	-moz-box-shadow:0 3px 30px 0 #000000;
	-webkit-box-shadow:0 3px 30px 0 #000000;}
	
button { height: 25px; width: auto; }

/* all of this below here is for making a button */ 
.buttonz {
  background-color: beige; 
  color: black; 
  padding: 5px 5px;
  border: 2px solid #000000;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  margin: 2px 2px;
  border-radius: 5px;
  transition-duration: 0.1s;
	cursor: pointer; 
}
.buttonz:hover {
  background-color: #eadbc8; /* lighter tan */
  color: black;
  border: 2px solid #f44336;
}
/* end of making a button */ 

select { height: 30px; width: 180px; }
	
td { border: 0; margin:15; }
.center { text-align: center; }
.width { width: 80%; text-align: center }

table { margin:0 auto; width:100%; }
     .linkbar { background-color: beige; border:solid thin black; width:100%; Text-align: right; }
.QL-linkbar { background-color: beige; border:solid thin black; width:100%;  }
     
.try14 { font-family:Times New Roman; font-size: 110%; margin-left:10px; }
@media screen and (min-width: 100px) and (max-width: 500px) {.try14 { font-size: 0px; } }
@media screen and (min-width: 501px) and (max-width: 850px) {.try14 { font-size: 14px; } }
@media screen and (min-width: 851px) and (max-width: 1900px) {.try14 { font-size: 20px; } }

h1 { padding-left: 20px; }

h2 { padding-left: 30px; }

h3	{ padding-left: 30px; font-size: 20pt}

p.pull { float:center; text-align: center; font:15pt times; color:blue;
			border-top:thin blue solid; border-bottom:thin blue solid } 
			
ul {font-size: 15pt; padding-right: 20px; }

ol {font-size: 15pt}

li 	{font-size: 15pt; padding-right: 25px; }


/* this area is about Paragraph Font Resizing, which includes <p id="all"> info as well */

@media screen and (min-width: 200px) and (max-width: 500px) {p { font-size: 15px; } }
@media screen and (min-width: 501px) and (max-width: 850px) {p { font-size: 18px; } }
@media screen and (min-width: 851px) and (max-width: 1900px) {p { font-size: 20px; } }


/* the <p id="all"> text info is here */
#all { padding-right: 10px; padding-left: 10px; font-family:Comic Sans MS; font-size: 100%; Text-align: justify; }
@media screen and (min-width: 100px) and (max-width: 349px) {#all { font-size: .9em; } }
@media screen and (min-width: 350px) and (max-width: 485px) {#all { font-size: 1em; } }
@media screen and (min-width: 486px) and (max-width: 585px) {#all { font-size: 1.1em; } }
@media screen and (min-width: 586px) and (max-width: 685px) {#all { font-size: 1.2em; } }
@media screen and (min-width: 686px) and (max-width: 785px) {#all { font-size: 1.2em; } }
@media screen and (min-width: 786px) and (max-width: 885px) {#all { font-size: 1.3em; } }
@media screen and (min-width: 886px) and (max-width: 985px) {#all { font-size: 1.4em; } }
@media screen and (min-width: 986px) and (max-width: 1900px) {#all { font-size: 1.5em; } }
/* end of the ALL text info */



#textstyle1 { font-family:Times New Roman; font-size:17px; margin-left:10px; }
@media screen and (min-width: 100px) and (max-width: 349px) {#textstyle1 { font-size: 12px; } }
@media screen and (min-width: 350px) and (max-width: 485px) {#textstyle1 { font-size: 17px; } }
@media screen and (min-width: 486px) and (max-width: 585px) {#textstyle1 { font-size: 19px; } }
@media screen and (min-width: 586px) and (max-width: 685px) {#textstyle1 { font-size: 20px; } }
@media screen and (min-width: 686px) and (max-width: 785px) {#textstyle1 { font-size: 23px; } }
@media screen and (min-width: 786px) and (max-width: 885px) {#textstyle1 { font-size: 25px; } }
@media screen and (min-width: 886px) and (max-width: 985px) {#textstyle1 { font-size: 30px; } }
@media screen and (min-width: 986px) and (max-width: 1900px) {#textstyle1 { font-size: 35px; } }

#textstyle2 { font-family:Comic Sans MS; font-size:17px; margin-left:10px; }
@media screen and (min-width: 100px) and (max-width: 349px) {#textstyle2 { font-size: 15px; } }
@media screen and (min-width: 350px) and (max-width: 485px) {#textstyle2 { font-size: 20px; } }
@media screen and (min-width: 486px) and (max-width: 585px) {#textstyle2 { font-size: 25px; } }
@media screen and (min-width: 586px) and (max-width: 685px) {#textstyle2 { font-size: 28px; } }
@media screen and (min-width: 686px) and (max-width: 785px) {#textstyle2 { font-size: 30px; } }
@media screen and (min-width: 786px) and (max-width: 885px) {#textstyle2 { font-size: 35px; } }
@media screen and (min-width: 886px) and (max-width: 985px) {#textstyle2 { font-size: 40px; } }
@media screen and (min-width: 986px) and (max-width: 1900px) {#textstyle2 { font-size: 43px; } }


.textstyle4 { font-family:Comic Sans MS; font-size:10px; color: red; text-align:center; }
@media screen and (min-width: 200px) and (max-width: 400px) {.textstyle4 { font-size: 12px; } }
@media screen and (min-width: 401px) and (max-width: 550px) {.textstyle4 { font-size: 15px; } }
@media screen and (min-width: 551px) and (max-width: 850px) {.textstyle4 { font-size: 20px; } }
@media screen and (min-width: 851px) and (max-width: 1900px) {.textstyle4 { font-size: 25px; } }
/* END of paragraph resizing info */