body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
	background-color: #ffffff;
	}
p {
	font-size: 12px;
	line-height: 22px;
	margin-top: 20px;
	margin-bottom: 10px; 
	}

h1 {
	font-size: 24px;
	line-height: 44px;
	font-weight: bold;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	}
h2 {
	font-size: 18px;
	line-height: 40px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h3 {
	font-size: 16px;
	line-height: 22px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h4 {
	font-size: 14px;
	line-height: 26px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h5 {
	font-size: 12px;
	line-height: 22px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h6 {
	font-size: 10px;
	line-height: 18px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
img {
	border: 0;
	}
	

/* misc */
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.right {float: right;}	

.contentBox3a {
	float: left;
	width: 31.33333%; 
	padding: 0; 
	display: inline-block;
    height: 185px;
    margin: 0 1% 5px 1%;     
}
.contentBox3b {
	float: left;
	width: 31.33333%; 
	padding: 0; 
	display: inline-block;
    height: 185px;
    margin: 0 1% 5px 1%;      
}
.contentBox3c {
	float: left;
	width: 31.33333%; 
	padding: 0; 
	display: inline-block;
    height: 185px;
    margin: margin: 0 0 5px 0;  
}

.before-box {
    border: 0px solid red; 
}
.floating-box {
    display: inline-block;
    width: 250px;
    height: 250px;
    margin: 10px;
    border: 3px solid #ee4000;  
}


.floating-box-big {
    display: inline-block;
    width: 1000px;
    height: 350px;
    margin: 10px;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    border: 3px solid #ffa500;  
}

.after-box {
    border: 3px solid red; 
}
/* ================================ MEDIA QUERIES =============================== */
/* ========================================================== */
/* ====================== SMALL DEVICE 01 ==================== */
/* ========================================================== */
@media screen and (max-width: 320px) {
.container {width: 90%; margin: 0 auto;}
#nameplate {float: none; width: 96%;	margin: 0 auto;}
.brand, 
.brand a, 
.brand a:hover  {font: 28px 'Lora', Verdana, Helvetica, sans-serif;}
.slogan {font-size: 14px; padding: 0 0 20px 0;}
/* === topsection block ==== */
#topsection {width: 90%; margin: 0 auto;}
#mainimage1block img, #mainimage2block img, #mainimage3block img {transform: rotate(0deg); }
#mainimage1block, #mainimage2block,#mainimage3block {max-width: 300px; margin: 0 auto;  margin-bottom: 50px;padding: 1%; float: none;}
/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft, .contentMiddle {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b {width: 96%; margin: 1%; padding: 1%;}
.headerBox3a, .headerBox3b, .headerBox3c,.contentBox3a, .contentBox3b, .contentBox3c {width: 96%; margin: 1%; padding: 1%;}
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 94%; margin: 1%; padding: 2%;}
.fBox4a, .fBox4b, .fBox4c, .fBox4d {float: none; width: 96%; padding: 0; margin: 0 2% 0 0;}
.contentBox75left {float: none; width: 90%; margin: 0 auto;}
.contentBox75right {float: none; width: 90%; margin: 0 auto;}
/* === miscellaneous coding ==== */
.pagename {font-size: 26px;}
h1 {font-size: 1.9em; margin-top: 0;}
h2 {font-size: 1.5em;}
.bigletters {font: 2.2em 'Raleway', Arial, Verdana, Helvetica, sans-serif;}
}
/* ========================================================== */
/* ===================== SMALL DEVICE 02 ==================== */
/* ========================================================== */
@media screen and (min-width: 321px) and (max-width: 480px) {
.container {width: 95%;	margin: 0 auto;}
#nameplate {float: none; width: 96%; margin: 0 auto;} 
.brand, 
.brand a, 
.brand a:hover  {font: 28px 'Lora', Verdana, Helvetica, sans-serif;}
.slogan {font-size: 14px;}
.pagename {font-size: 36px;}
/* === topsection block ==== */
#topsection {max-width: 450px; margin: 0 auto;}
#mainimage1block, #mainimage2block,#mainimage3block {width: 80%; margin: 0 auto;  margin-bottom: 50px;padding: 1%; float: none;}
#mainimage1block img, #mainimage2block img, #mainimage3block img {transform: rotate(0deg);}
/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b {width: 96%; margin: 1%; padding: 1%;}
.headerBox3a, .headerBox3b, .headerBox3c,.contentBox3a, .contentBox3b, .contentBox3c {width: 96%; margin: 1%; padding: 1%;}
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 92%; margin: 1%; padding: 3%; float: none;}
.fBox4a, .fBox4b, .fBox4c, .fBox4d {float: none; width: 96%; padding: 0; margin: 0 2% 0 0;}
.contentBox75left {float: none; width: 90%; margin: 0 auto;}
.contentBox75right {float: none; width: 90%; margin: 0 auto;}
/* === miscellaneous coding ==== */
.bigletters {font: 2.2em 'Raleway', Arial, Verdana, Helvetica, sans-serif;}
}
/* ========================================================== */
/* ================== SMALL DEVICE 03 ================= */
/* ========================================================== */
@media screen and (min-width: 481px) and (max-width: 623px) {
.container {width: 97%;	margin: 0 auto;}
#nameplate {float: none; width: 96%; margin: 0 auto;}
.menu-collapser {width: 80%; margin: 0 10%;}ul.slimmenu.collapsed {width: 80%; margin: 0 10%;}
/* === topsection block ==== */
#topsection {max-width: 450px; margin: 0 auto;}
#mainimage1block, #mainimage2block,#mainimage3block {width: 80%; margin: 0 auto;  margin-bottom: 50px;padding: 1%; float: none;}
#mainimage1block img, #mainimage2block img, #mainimage3block img {transform: rotate(0deg);}
/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b {width: 98%; margin: 1%; padding: 0;}
.headerBox3a, .headerBox3b, .headerBox3c,.contentBox3a, .contentBox3b, .contentBox3c {width: 96%; margin: 1%; padding: 1%;}
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 44%;	padding: 0 1%; margin: 1%;}
.fBox4a, .fBox4b, .fBox4c, .fBox4d {width: 44%; padding: 0; margin: 0 2% 0 0;}
.contentBox75left {width: 48%;}
.contentBox75right {width: 48%;}
/* === miscellaneous coding ==== */
.bigletters {font: 2.4em 'Raleway', Arial, Verdana, Helvetica, sans-serif;}
}

	
	
	
#content {
	float: left;
	padding: 10px 2% 10px 2%;
	margin: 20px 1% 20px 2%;
	background: #cdd8c6;
	border: 3px solid #ccc;
	width: 20%; 
	font-size: 16px;
	line-height: 22px;
	font-family: verdana, arial, helvetica, sans-serif;	
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 20%;
	}
html>body #content {
	width: 20%; 
	}
#content a {
	display: block;
	color: #646e93;
	text-align: left;
	}

#content a:hover {
	color: #6e789c;
	text-decoration: none;
	}


#content2 {
	float: right;
	padding: 10px 2% 10px 2%;
	margin: 20px 2% 20px 1%;
	background: #ffffcc;
	border: 5px solid #ccc;
	width: 64%; 
	font-size: 14px;
	text-align: justify;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 60%;
	}
html>body #content2 {
	width: 60%; 
	}

#content2 li {
	line-height: 22px;
	}

#content2 a:hover {
	color: #339933;
	text-decoration: none;
	}

#content2 a:visited {
	color: #9999ff;
	text-decoration: none;
	}


pre {
	font-size: 12px;
	line-height: 22px;
	margin-top: 20px;
	margin-bottom: 10px; 
	}	

div#header
	{
	clear: both;
	margin: 20px 1% 20px 2.5%;
	background: #ffffe0;
	border: 1px solid #ccc;
	width: 95%;
	font-size: 10px}


div#footer
	{
	clear: both;
	padding: .5em 1em;
	border-top: 1px solid #999;
	text-align: right;
	font-size: 10px}

.mini
	{
	font-size: 75%;
	}

.title {
display: none;
}