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

/* <!--picture replacement code here--><!--see respond code below, as it controls all pictures on the page--> */
		
img.imgRight { float: left; max-height: 40px; max-width: auto; }
.imgLeft { float: right; width: 100%; max-width: 100%; margin: left 10px; border:solid thin blue; opacity: 1.0; }
.respond img { width: 100%; max-width: 100%; height: auto; }
.imgsize { max-width: 150px; }

#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;}


#header	{ width: 100%; max-width: 900px; text-align: center; background-color: lightgreen; border:2px solid blue; }

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

div.main 	{ width: 100%; max-width: 900px; background-color: white; margin: 0px; }
table { margin:0 auto; width:100%; }
 .linkbar { background-color: beige; border:solid thin black; width:100%; Text-align: right; }
 
td.redbord { border:1px solid blue; padding:4px; background-color:beige; }
	.center { text-align: center; }

#textstyle1 { font-family:Comic Sans MS; font-size:190%; margin-left:10px; }
#textstyle2 { font-family:Comic Sans MS; font-size:230%; margin-left:10px; }
#textstyle3 { font-family:Comic Sans MS; font-size:130%; margin-left:10px; }

@media screen and (min-width: 150px) and (max-width: 199px) {#textstyle1 { font-size: .4em; } }
@media screen and (min-width: 150px) and (max-width: 199px) {#textstyle2 { font-size: .4em; } }

@media screen and (min-width: 200px) and (max-width: 350px) {#textstyle1 { font-size: .8em; } }
@media screen and (min-width: 200px) and (max-width: 350px) {#textstyle2 { font-size: 1em; } }

@media screen and (min-width: 351px) and (max-width: 450px) {#textstyle1 { font-size: 1.0em; } }
@media screen and (min-width: 351px) and (max-width: 450px) {#textstyle2 { font-size: 1.2em; } }

@media screen and (min-width: 451px) and (max-width: 550px) {#textstyle1 { font-size: 1.2em; } }
@media screen and (min-width: 451px) and (max-width: 550px) {#textstyle2 { font-size: 1.4em; } }

@media screen and (min-width: 551px) and (max-width: 650px) {#textstyle1 { font-size: 1.4em; } }
@media screen and (min-width: 551px) and (max-width: 650px) {#textstyle2 { font-size: 1.6em; } }

@media screen and (min-width: 651px) and (max-width: 750px) {#textstyle1 { font-size: 1.8em; } }
@media screen and (min-width: 651px) and (max-width: 750px) {#textstyle2 { font-size: 1.8em; } }

@media screen and (min-width: 751px) and (max-width: 850px) {#textstyle1 { font-size: 2em; } }
@media screen and (min-width: 751px) and (max-width: 850px) {#textstyle2 { font-size: 2em; } }

@media screen and (min-width: 851px) and (max-width: 950px) {#textstyle1 { font-size: 2.2em; } }
@media screen and (min-width: 851px) and (max-width: 950px) {#textstyle2 { font-size: 2.7em; } }

@media screen and (min-width: 951px) and (max-width: 1900px) {#textstyle1 { font-size: 2.4em; } }
@media screen and (min-width: 951px) and (max-width: 1900px) {#textstyle2 { font-size: 2.9em; } }

#standard { height: 30px; opacity: 1.0; background-color: #ffff33; font-family:Times New Roman; font-size: 18px; margin-left:10px; float: right; padding-right: 10px; padding-left: 10px; border:solid thin black; }
@media screen and (min-width: 200px) and (max-width: 550px) {#standard { font-size: 18px; } }
@media screen and (min-width: 551px) and (max-width: 700px) {#standard { font-size: 20px; } }
@media screen and (min-width: 701px) and (max-width: 1900px) {#standard { font-size: 25px; } }

#standard2 { height: 30px; opacity: 1.0; font-family:Times New Roman; font-size: 18px; margin-left:10px; opacity: 1.0; }
@media screen and (min-width: 200px) and (max-width: 550px) {#standard { font-size: 18px; } }
@media screen and (min-width: 551px) and (max-width: 700px) {#standard { font-size: 20px; } }
@media screen and (min-width: 701px) and (max-width: 1900px) {#standard { font-size: 25px; } }

.textstyle3 { margin-left:20px; font-family:Times Roman;font-weight:normal;font-style:normal;font-size:20px;text-decoration:normal;color:black;}
@media screen and (min-width: 200px) and (max-width: 550px) {.textstyle3 { font-size: 18px; } }

.textstyle4 { font-family:Comic Sans MS; font-size:12px; color: black; text-align:center; }
@media screen and (min-width: 200px) and (max-width: 400px) {.textstyle4 { font-size: 14px; } }
@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; } }

#standard:hover { background-color: white; opacity: 0.3; }
#standard2:hover { background-color: white; opacity: 0.3; }

/* <!-- this area is about Paragraph Font Resizing --> */

@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; } }

.pplus { padding-right: 10px; padding-left: 10px; font-family:Comic Sans MS; font-size: 120%; Text-align: center; 
	color: #fff; }

.pvid { font-family:Comic Sans MS; font-size: 100%; Text-align: left; padding-left: 5px; padding-right: 10px; }
@media screen and (min-width: 200px) and (max-width: 500px) {.pvid { font-size: 13px; } }
@media screen and (min-width: 501px) and (max-width: 850px) {.pvid { font-size: 14px; } }
@media screen and (min-width: 851px) and (max-width: 1900px) {.pvid { font-size: 16px; } }

/* <!-- this area is about Columns, currently NOT IN USE  --> */
.colums { width: 890px; overflow:hidden; }
.col1 { float: left; width: 60%; margin: 5%; }
.col2 { float: right; width: 35%; margin: 0; }

@media screen and (max-width: 800px;) { .col1, .col2 { float:none; width: 100%; margin: 0; } }

/* <!--- this area is about the href link tag a  ---> */


a:hover { background-color: white; opacity: 0.3; }
.imgLeft:hover  { background-color: white; opacity: 0.3; }


ul li { display : inline; }
li { list-style-type: none; }

#access { color: #fff; font-family:Times New Roman; font-size: 15px; padding-top: 15px; }
@media screen and (min-width: 200px) and (max-width: 350px) {#access { font-size: 0; } }
@media screen and (min-width: 351px) and (max-width: 450px) {#access { font-size: 15px; } }
@media screen and (min-width: 451px) and (max-width: 550px) {#access { font-size: 25px; } }
@media screen and (min-width: 551px) and (max-width: 700px) {#access { font-size:28px; } }
@media screen and (min-width: 701px) and (max-width: 850px) {#access { font-size: 33px; } }
@media screen and (min-width: 851px) and (max-width: 950px) {#access { font-size: 34px; } }
@media screen and (min-width: 951px) and (max-width: 1900px) {#access { font-size: 35px; } }

.box { float: left; margin: 5px; padding: 5px; border: 1px solid black; } 
.box2 { background-color: tan;  margin: 10px; padding: 5px; border: 1px solid black; }