html{margin:10px 0px 5px 0px;padding:0;}
p.comments {margin-bottom: 20px}

body{background-color:#fff;color:#000; font: 100%/1.3 Georgia,'Times New Roman',Times,serif;padding:0 0 0 9px;}

br.both { clear:both; }

img { display: block; margin: 5px auto; text-align: center;  }

img 
{border: 1px solid #000000;}

ul{ color: #000; font-size: 95%;line-height: 1.6; list-style-type: square;margin: 0 0 0 30px; padding-top: 20px; }
/*li{ margin: 0; padding: 0; }
li a {color:#330000;  text-decoration:none}
li a:hover {color:#000;  text-decoration:underline} */

li.link{ margin-left: 40px; padding: 0; }
li.link a {color:#330000;  text-decoration:none}
li.link a:hover {color:#000;  text-decoration:underline}


li.title{ margin: 0; padding: 0; list-style-type: none; }
li.title a {color:#330000;  text-decoration:none}
li.title a:hover {color:#000;  text-decoration:underline}
li.title strong {font-size: 105%;line-height: 1.6}


h1{color:#ddd;margin:0;padding:10px 0 0 0;font-size:90%;} 
h2{background:transparent;font: 170% "Times New Roman", Times, serif;color:#FFF;margin:0;padding:0;}
h3{background:transparent;color:#ddd;font-size:100%;padding:0; margin-top:0;clear:both;}
div#wrapper{color:#000000;border: 1px solid #666;width:99%;}
div#header{color:#000000;border:none;background:#96A274;margin:0;padding: 0;text-align:center;width:100%}

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

div#gallery p {margin: 20px 50px 20px 50px;}
div#gallery a
{font: 95% verdana, Georgia,'Times New Roman',Times,serif;color:#03BD93;text-decoration:none;margin-left:10px;margin-right:10px;font-weight: bold}
div#gallery a:link {color:#274F00;}
div#gallery a:visited {color:#0386BD;}
div#gallery a:hover {text-decoration:underline;}

p.source
{font: 90%/1.3 'Times New Roman',Times,serif; text-align:left;}

p{margin:0}

div#content{margin: 0 auto 50px auto;width: 60%;}
div#content  a:link {color:#996633;text-decoration:none;font-weight:bold;font-size:100%}
div#content  a:visited {color:#996633;text-decoration:none;font-weight:bold;font-size:100%} 
div#content  a:hover {color:#996633;text-decoration:underline;font-weight:bold;font-size:100%}


div#wrapper{color:#000000; width:99%;}

div#footer {clear:both;color:#fff;background:#274F00;border:none;font:90% Georgia, "Times New Roman", Times, serif;margin:0 auto;padding:10px 0;text-align:center;width:100%;}
div#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;}
div#footer a:hover {color:#000;margin:0;padding: 0;padding-left: 3px; padding-right: 6px}
div#footer p {padding-top: 14px;}

div#lists { margin: 0 auto 50px auto; padding-bottom: 20px; width: 601px;}

div#head { border-top: 1px solid #c0c0c0;   border-bottom: 1px solid #c0c0c0; padding: 10px 0px;   text-align: center;width: 100%;}
div#head p { font: 150%/1.3 'Times New Roman',Times,serif;padding-top: 6px; }

div#contain { width: 100%;float: left;margin-right: -300px;}

div#content-a { border-right: 1px solid #c0c0c0;margin-right: 290px;}
div#content-b { width: 300px;float: right;}



/* ================================ MEDIA QUERIES =============================== */
/* ========================================================== */
/* ====================== SMALL DEVICE 01 ==================== */
/* ========================================================== */
@media screen and (max-width: 320px) {
	div#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) {
	div#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) {
	div#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) {
	div#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) {
	div#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) {
	div#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) {
  div#wrapper {width: 98%;	margin: 0 auto;}
}
/* ========================================================== */
/* ================== LG DEVICE 02 ================= */
/* ========================================================== */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
	div#wrapper {width: 98%; margin: 0 auto;}
	
}