html {height: 101%;}
body{
	background: #ffffff;
	font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
	font-size: 100%;
	color: #000000;
	margin: 10px 0px 5px 0px;
	padding: 0;
	height: 100%;}

.clear{clear:both;}
/*/*/ .clear{display:block;} /* */
a {
	color: #968150;
	font-weight: normal;
	text-decoration: underline;
	outline: none;
}
a:hover {
	color: #ff66cc;
	text-decoration: underline;
	font-weight: normal;
	outline: none;
}
h1{color:#ddd;margin:0;padding:10px 0 0 0;font-size:80%;} 
h2{background:transparent;font: 150% "Times New Roman", Times, serif;color:#FFF;margin:0;padding:0;}
h3{background:transparent;color:#ddd;font-size:90%;padding:0 0 0 9px; margin-top:0;}
h5 {background:transparent;font:90% "Times New Roman", Times, serif;color:#FFF;margin:-20px 0 0 0px; padding-top:10px;font-style:italic}


header{background:#96A274;margin:0;padding: 0;text-align:center;font:120% Georgia, "Times New Roman", Times, serif;color:#FFF;padding:0 0 15px 0px;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.tiny {font-size: 65%; text-align: center; padding-bottom: 10px;}
.small {font-size: 85%;}
.medium {font-size: 90%;}


.wrapper {border: 1px solid #666;
	width: 1200px;
	margin: 0 auto;
	padding: 10px;
	text-align: left;}

.contentRight {float: right; width: 100%; padding: 0; margin: 0 0 0 2%;}

.date {margin-bottom:0px; margin-top: 40px;font: 95% Georgia,'Times New Roman',Times,serif; color:#4F4A4A; font-weight: bold;}

.date a {font: 95% Georgia,'Times New Roman',Times,serif; color:#4F4A4A; font-weight: bold;}

header em
{background:transparent;font:90% "Times New Roman", Times, serif;color:#FFF;margin:-20px 0 0 10px; padding:0px;font-style:italic}


.leftImg {position:relative;float:left;margin:0; padding-top: 20px}
.rightImg {position:relative;float:right;margin:0; padding-top:10px;padding-right: 10px}
img {border: none; max-width: 100%; box-sizing: border-box;}
.img-border {margin: 5px 10px 0 0; float: left; border: 1px #777 solid;}
.img-catalog {border: 1px #d0d0d0 solid; padding: 3px; margin: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);}


p.source {text-align:left;font-size:75%;color:#003366;margin-bottom:30px;padding:0;}
p.source a:link, p.source a:visited, p.source a:hover{text-decoration:none;}
p.source a:hover {text-decoration:underline}


.clickline {color:#003366;text-align:center;margin: 0 auto; padding: 10px 0;font-size:75%}


footer {clear:both;color:#fff;background:#96A274;border:none;font:90% Georgia, "Times New Roman", Times, serif;margin:0 auto;padding:10px 0;text-align:center;}
footer a:link, div#footer a:visited, div#footer a:hover {color:#FFF;margin:0;padding: 0;padding-left: 3px; padding-right: 6px; text-decoration: underline}
footer a:hover {color:#000;margin:0;padding: 0;padding-left: 3px; padding-right: 6px; text-decoration:none}

blockquote {width: 70%;color: #804000;font-size: 90%;}
blockquote ul {color: #804000;font-size: 95%; margin: 0 20%;}

.both {clear: both;}

p.quote {color: #804000;font-size: 100%; width: 60%;}

h6
{background:transparent;font: 150% "Times New Roman"}
h6
{text-align: left}
h6
{margin-top:10px; margin-bottom: 10px}

#intro p{margin: 0 25%;}

p {width: 90%;font:100% Georgia,'Times New Roman';}

p.credits
{text-align: center; font: 86%/1.3 'Times New Roman',Times,serif; margin-top: 0}

p.intro
{font-family: 'Open Sans', Verdana, Helvetica, sans-serif;}

/*em {font: 90%/1.3 'Times New Roman',Times,serif;margin: 0px; font-style: italic} */


.latbin
{font: 90%/1.3 'Times New Roman',Times,serif;margin: 0px; font-style: italic}
.quote 
{font: 95%/1.3 'Times New Roman',Times,serif;margin: 0px; color: #804000;}

.open
{font-family: 'Open Sans', Verdana, Helvetica, sans-serif; width: 90%;margin: 10px 0 0 0;font-size: 90%}

#intro img {display: block; margin: 0px auto;} 

#dedication {color: #000; background: #f6f6f6; width: 170px; margin: 50px 0 0 10px;}
#dedication p {margin: 0; padding: 7px;}
#dedication a {padding-top: 10px;}



#mm
h2 {background:transparent;font: 100% "Times New Roman", Times, serif;color:black; font-weight:bold}



/* ================================ MEDIA QUERIES =============================== */
/* ========================================================== */
/* ====================== SMALL DEVICE 01 ==================== */
/* ========================================================== */
@media screen and (max-width: 320px) {
	.wrapper {width: 90%; margin: 0 auto;}
	
		/* === content box coding ==== */
	.contentBox2a, .contentBox2b, 
   .contentBox3a, .contentBox3b, .contentBox3c, 
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}
   .sidebarLeft, .sidebarRight {width: 98%; margin: 1%; padding: 0;}
   .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}

	/* === miscellaneous coding ==== */
	h1 {font-size: 1.9em; margin-top: 0;}
	h2 {font-size: 1.5em;}
}
/* ========================================================== */
/* ===================== SMALL DEVICE 02 ==================== */
/* ========================================================== */
@media screen and (min-width: 321px) and (max-width: 480px) {
	.wrapper{width: 95%; margin: 0 auto;}
	 blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
   .contentBox2a, .contentBox2b, 
   .contentBox3a, .contentBox3b, .contentBox3c, 
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}
   .sidebarLeft, .sidebarRight {width: 98%; margin: 1%; padding: 0;}
   .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}

	/* === miscellaneous coding ==== */
.img-catalog { width: 96%;}
}

/* ========================================================== */
/* ================== SMALL DEVICE 03 ================= */
/* ========================================================== */
@media screen and (min-width: 481px) and (max-width: 623px) {
	.wrapper {width: 96%; margin: 0 auto;}
	/* === content box coding ==== */
	blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.contentBox2a, .contentBox2b, 
   .contentBox3a, .contentBox3b, .contentBox3c, 
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}
   .sidebarLeft, .sidebarRight {width: 98%; margin: 1%; padding: 0;}
   .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
		/* === miscellaneous coding ==== */
	img {max-width: 98%;}
}

/* ========================================================== */
/* ================== MID DEVICE 01 ================= */
/* ========================================================== */
@media screen and (min-width: 624px) and (max-width: 669px) {
	.wrapper{width: 97%; margin: 0 auto;}
		/* === content box coding ==== */
	blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	 .contentBox2a, .contentBox2b, 
   .contentBox3a, .contentBox3b, .contentBox3c {width: 98%; margin: 1%; padding: 0;}
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
   .sidebarLeft, .sidebarRight {width: 98%; margin: 1%; padding: 0;}
   .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
		/* === miscellaneous coding ==== */

	img {max-width: 98%;}
}

/* ========================================================== */
/* ================== MID DEVICE 02 ================ */
/* ========================================================== */
@media screen and (min-width: 670px) and (max-width: 768px) {
	.wrapper {width: 97%; margin: 0 auto;}
	/* === content box coding ==== */
   blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
  .contentBox3a, .contentBox3b, .contentBox3c {width: 98%; margin: 1%; padding: 0;}
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
   .sidebarLeft, .sidebarRight {width: 98%; margin: 1%; padding: 0;}
   .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
	/* === miscellaneous coding ==== */

}

/* ========================================================== */
/* ================== MID DEVICE 03 ================= */
/* ========================================================== */
@media screen and (min-width: 769px) and (max-width: 800px) {
	.wrapper {width: 97%; margin: 0 auto;}
	/* === content box coding ==== */
	blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.contentBox3a, .contentBox3b, .contentBox3c {width: 98%; margin: 1%; padding: 0;}
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
   .sidebarLeft, .sidebarRight {width: 98%; margin: 1%; padding: 0;}
   .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}

}

/* ========================================================== */
/* ================== LG DEVICE 01 ================= */
/* ========================================================== */
@media screen and (min-width: 801px) and (max-width: 1024px) {
  .wrapper {width: 98%;	margin: 0 auto;}
}
/* ========================================================== */
/* ================== LG DEVICE 02 ================= */
/* ========================================================== */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
	.wrapper {width: 98%; margin: 0 auto;}
	
}