/* START ALL STYLE WHITE BACKGROUND TO MIMIC KENYAN FLAG */
html, body { width: 100%; margin: 0 auto; padding: 0;
background-color: #f00; clear: none; font-family: Arial, Helvetica, sans-serif;}

a { text-decoration: none; color: #f00;  }
a:hover { text-decoration: underline; color: #f0f; font-weight: 900; }

.doJustify {text-align: justify; }
h1 { font-size: 1.5em; color: #00F; }
h2 { font-size: 1.3em; color: #00f; }
h3 { font-size: 1.1em; color: #00f;}
h4 { font-size: .9em; color: #00f;}

p { text-align: justify; line-height: 1.5; margin-top: 1.5em; white-space: pre-line;}
/* END ALL STYLE */



/* START HEAD STYLE BLACK BACKGROUND */
.theTop { width: 100%; margin: 0 auto; height: 90px; background-color: #000; text-align: left; }
.theLogo { width: 16%; float: left; }
.theLogos { width: 90px; height: 90px; }
.topLinks { width: 80%; float: right; margin: 2%; text-align: center; }
.topLinks ul { list-style-type: none; margin: 0; padding: 0; }
.topLinks li { display: inline-block; margin-right: 10px; text-decoration: none; font-size: 1.2em; padding: 1%; }
.topLinks a { text-decoration: none; color: #f00; }
.topLinks a:hover { text-decoration: underline; color: #fff; font-weight: 900; }
.theVisitors { float: right; color: #fff; }

/* END HEAD ALL STYLE */


/* START BODY STYLE RED BACKGROUND */
.theBody	{ width: 90%; margin: 3% auto; height: auto; clear: both; text-align: justify;  }
.theBodyLeft 	{ float: Left; width: 65%; padding: 1%; background: #fff; border-radius: 10px; text-align: center;}
.theBodyRight 	{ float: Right; width: 30%; padding: 1%; background: #fff; border-radius: 10px; text-align: center;}

.bodyDIV	{ margin: 1%; width: 46%; float: left; padding: 1%; height: 275px; background: #ccc; border-radius: 5px; }
.bodyDIV2	{ margin: 1%; width: 96%; float: left; padding: 1%; background: #ccc; border-radius: 5px; }

/* END BODY STYLE */
.theForm { clear: both; margin: 0 auto; display: block; width: 500px; padding: 3%; background-color: #ccc;
            border-radius: 15px; }
            
.formReport { clear: both; margin: 0 auto; display: block; width: 400px; padding: 3%; background-color: #ccc;
            border-radius: 15px; }
label       { display: block; margin-top: 3%; color: #000; font-weight: bold;   }
label:after { content: " : " }
.inPut      { display: block; margin: auto 0; width: 90%; padding: 1%; font-size: 1.2em; border-radius: 10px; }
.theSelect  { display: block; margin: auto 0; width: 0 auto; padding: 1%; font-size: 1.2em; border-radius: 10px; }
.textArea   { display: block; width: 100%; padding: 1%; font-size: 1.2em; height: 20%; border-radius: 10px;}
.reCaptcha    { display: block; margin: auto 0; padding: 1%; font-size: 1.2em; border: 2px solid #000; border-radius: 10px; }
.subMit     { display: block; padding: 1%; font-size: 1.2em; font-size: 1.2em; background-color: #f00; border: 0; border-radius: 5px;}

/* END FORM STYLE */

/* START FOOTER */
.theBlog    { display: block; width: 100%; margin: 0 auto; height: auto; padding: 0; background: #fff; clear: both; text-align: center; }
.blogDIV    { width: 31.7%; height: 300px; border-radius: 15px; float: left; padding: .3%; margin: 0.5%; background-color: #ccc;}

.theFooter  { display: block; width: 100%; margin: 0 auto; height: auto; padding: 0; background: #008000; clear: both; text-align: justify; }
.footerDIV  { width: 31.7%; height: 200px; border-radius: 15px; float: left; padding: .3%; margin: 0.5%; background-color: #ccc;}
.theFooter ul { list-style-type: none; margin: 0; padding: 0; }
.theFooter li { text-decoration: none; font-size: 1em; padding: 1%; }
.theFooter a { text-decoration: none; color: #f00; }
.theFooter a:hover { text-decoration: underline; color: #fff; }

.theBottom  { display: block; width: 100%; margin: 0 auto; padding: 2% 0 2% 0; height: 20px; padding: 0; background: #008000; clear: both; text-align: center; }

/* END FOOTER STYLE */