/* support-files/kenya.css */

@import url(support-files/undohtml.css); /* This stylesheet undoes all of the default settings of all browsers. It is intended for IE, but it essentially sets all browsers to "0". Now all of the default padding, spacing, etc. can be set by you. Make sure the file "undohtml.css" is uploaded into your directory */
@charset "utf-8";

body 
{
	font: 83% Arial, Helvetica, sans-serif;
	color: rgb(51,51,51); /*Gray text color */
	margin: 0;
	padding: 0;
	background-color: rgb(209,117,37); /* Dark Gold color */
	/* background-image : url(../image-files/cheetah-fur.jpg); */
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

#container 
{  position: relative;
	width: 900px; 
	background: rgb(255,224,152); /* background color of the entire container (Light Yellow) */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	border-right: 1px dotted maroon;
	border-left: 1px dotted maroon;
} 

#header 
{ 
	height: 150px;  /* the top banner */
	width: 100%;
	text-align:center;
	padding:0;
}
	
#header img 
{
margin:0 0 0 0 ;
border-left: none;
border-right: none;
border-top: 2px solid maroon;
}
	

 img 
{
margin:10px 15px 10px 15px;
} 

.imagelft
{
float:left;
min-width: 90px;
/* margin:10px 15px 10px 0px; */
text-align:center;
font-size: x-small;
color: rgb(11,109,120); /* Turquoise Blue */
}

.imagert
{
float:right;
min-width: 90px;
/* margin:10px 15px 10px 0px; */
text-align:center;
font-size: x-small;
color: rgb(11,109,120); /* Turquoise Blue */
}
	
blockquote 
{
	margin-left: 1.2em;
	margin-right: 1.2em;
	padding: 0 1em;
	background: rgb(246,213,166); /* Sand background */
	border: 1px dotted rgb(11,109,120); /* Turquoise Blue */
}

p, blockquote, ul, ol 
{
	margin-bottom: 1.4em; 
	line-height: 1.4em;
}

p {
}
/* format for bullets in the content  */

ul 
{
	margin-left: 1em;
}

ul li.image-bullet /* Use this class where you want an image bullet instead of a circle */
{
 list-style : url(../image-files/kenya-flag-disk.jpg);
 padding: 3px;
 vertical-align : middle;
}

ul li /* This is default. Use this where you want a disc for a bullet. You don't need to add a class */
{ 
	list-style : disc;
}

ol 
{
	margin-left: 1em;
}

ol li 
{
}

/* for links in the content */
a 
{
	text-decoration: none;
	color: rgb(11,109,120); /* Turquoise Blue */
}

a:hover 
{
	text-decoration: underline;
	color: rgb(88,88,88); /* Gray */
}

/* for header formatting in the content */
 h1, h2, h3, h4 
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: rgb(11,109,120); /* Turquoise Blue */
}

h1 
{
font-size: 20px;
font-weight: bold;
text-align : center;
background: rgb(246,213,166); /* Sand background */
border-top: 1px dotted rgb(11,109,120); /* Turquoise Blue */
border-bottom: 1px dotted rgb(11,109,120); /* Turquoise Blue */
}

h3 
{
	font-size: 1.5em;
}

h2
{
   font-size: 16px;
   font-family: Helvetica, Arial, Verdana, sans-serif, "Trebuchet MS";
   font-weight: bold;
 }
   
h4 
{
font-size: 1em;
font-weight:bold;
}

#sidebar1 /* left side navigation bar */
{
	width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	position: absolute;
	top: 136px;
	border-bottom: 1px dotted maroon;
}

#sidebar1 img 
{ 
	margin:3px 10px 0px;
} 

#nonclick p 
{
	background-image:url(../image-files/bghd.gif);
	cursor:default;
	color: white; 
	font-family: Arial, Helvetica, sans-serif; /* small header on Right column */
	font-size:11px;
	font-weight: bold;
	text-align:center;
	height:20px;
}

/* left side bar menu */
#menu 
{
	margin-bottom: 0px;
} 
	
#menu ul 
{
	margin: 0;
	list-style: none;
	line-height: normal;
	width: 150px;
	padding: 0px;
}

#menu li 
{
	display: inline;
}

#menu li.clickable /* This is the clickable menu bar "HOME". This bit of code just centers the word HOME like it is in the non-clickable menu title elements */
{
	background-image:url(../image-files/bghd.gif);
	cursor:default;
	text-align: center;
	padding-top: 4px; /* Vertically centers the text. If you change fonts or font size, you may need to adjust this. Trial and error */
}

#menu li.clickable a /* This is the hovered state of the clickable menu bar "HOME". Again, it keeps the word HOME centered */
{
	cursor:default;
	text-align: center;
	padding-top: 4px; /* Vertically centers the text. If you change fonts or font size, you may need to adjust this. Trial and error */
}

#menu li.clickable a:hover /* This is the hovered state of the clickable menu bar "HOME". Again, it keeps the word HOME centered */
{
	background-image: url(../image-files/menu-hover.gif);
	cursor:default;
	text-align: center;
	padding-top: 4px; /* Vertically centers the text. If you change fonts or font size, you may need to adjust this. Trial and error */
}

#menu a
{
	display: block;
	height:20px;
	padding: 0 0 0 10px;
	color: white;
	font-weight: bold;
	font-size:11px;
	background-image:url(../image-files/bghd.gif);
	/* letter-spacing : .08em; */
}

#menu a:hover 
{
	background: rgb(238,148,20); /* Gold */
	text-decoration: none;
	font-weight: bold;
	color: white;
}

#menu .active a
{
	background: rgb(238,148,20); /* Gold */
	text-decoration: none;
	font-weight: bold;
	color: rgb(102,204,255); /* Light Turquoise */
}

/* Sidebar > Menu  The non clickable headers */
#nonclick a 
{
	background-image:url(../image-files/bghd.gif);
	cursor:default;
	text-align: center;
	padding-top: 4px; /* Vertically centers the text. If you change fonts or font size, you may need to adjust this. Trial and error */
}

#nonclick a:hover 
{
	color: white;
	cursor:default;
	background-image:url(../image-files/bghd.gif);
	text-align: center;
	padding-top: 4px; /* Vertically centers the text. If you change fonts or font size, you may need to adjust this. Trial and error */
}

/* Sidebar > Menu under header menu */
#pushed ul 
{
	margin: 0px;
	list-style: none;
	line-height: normal;
	width: 150px;
	padding: 0px;
}
#pushed li 
{
	display: inline;
}

#pushed a 
{
	display: block;
	padding: 0 0 0 10px;
	border-bottom: 1px solid #0b6d78; /* Turquoise Blue accent line */
	color: rgb(51,51,51); /* Dark Gray */
	font-weight:normal;
   font-size:12px;
	background: rgb(247,202,138); /* Light peach */
}

#pushed a:hover, #pushed .active a 
{
	background-image: url(../image-files/menu-hover.gif); /* rollover effect */
	background-color: rgb(238,148,20); /* Gold */
	text-decoration: none;
	font-weight: normal;
	color: black;
}

#sidebar2 /* right side column */
{
	position: absolute;
	width: 165px; 
	top: 136px;
	right: 0;
	left: 735px; /* This is an IE6 hack. it  forces the left side of the Sidebar2 to be at the edge of the content (900 - 165 = 735). Even though the designation above (right: 0;) should take care of this, IE6 refuses to play */
	border-bottom: 1px dotted maroon;
	background-color : rgb(246,213,166); /* Sand background */
}

 #sidebar2 #nonclick p 
{
	background-image:url(../image-files/bghd.gif);
	cursor:default;
	color: white;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* small header on right-side column */
	font-size:11px;
	font-weight: bold;
	text-align: center;
	vertical-align : middle;
	height:20px;
	padding-top: 4px; /* Vertically centers the text. If you change fonts or font size, you may need to adjust this. Trial and error */
	margin-top: 0;
	margin-left: 0;
	
}

#sidebar2 h4 /* This moves your text away from the dotted border */
{ 
 	padding-left: 5px;
}

#sidebar2 p /* This is the content on the right side */
{
	font-size: 11px;
	color: rgb(51,51,51); /* Dark Gray */
	font-family: Arial, Helvetica, Verdana, sans-serif, "Trebuchet MS";
	margin-bottom: 0.2em;
	padding-right: 5px; /* padding keeps the content of the div away from the right edge */
	padding-left: 5px; /* This, along with the right padding, centers the text within the column */
	text-align: left;
}

#sidebar2 a 
{
	color: rgb(153,51,0); /* Dark Rust */
	text-decoration: underline;  /* links on right column */
	font-size: 11px;
	text-align : left;
}

#sidebar2 img
{ 
	margin:0px 0px 0px;
}

#mainContent 
{ 		position: relative; /* Don't change this. It needs to be in place in order for the Right-hand Sidebar to align correctly */
      margin-right:165px; /* This aligns the right edge of the mainContent box tight against the left edge of Sidebar2 */
      margin-left:150px; /* This aligns the left edge of the mainContent box tight against the right edge of Sidebar1 */
	 padding: 0 10px 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	  /*background: rgb(255,224,152); /* Light Yellow background color */
	  background: white;
	  border: 1px solid maroon !important;
} 

.intro /* Intro on index page */
{ 
		background-image : url(../image-files/intro.jpg); /* Faint cheetah fur background */ 
		background-color: rgb(247, 202,138); /* Light Sand */
		position: relative;
		top: -15px; /* a negative value becuase the element is relative to #mainContent padding and margins. We need to override those, which means a negative value */
		padding-bottom: 0px;
		border-top: 1px dotted maroon;
		border-bottom: 1px dotted maroon; 
}

p.left 
{
		text-align: left;
		padding: 0 10px 0 10px;
}
							
h1.transparent /* This changes the way the h1 headers display on the intro only. Background set as transparent in order to let the cheetah fur show */
{ 
	font-size: 1.2em;
	padding-top: 2px;
	color: rgb(255,224,152);
	background-image : url(../image-files/bghd.gif);
	position: relative;
	left: -11px !important; /* Since this header is relative to the container, the value needs to be negative to set it tightly against the Sidebar1. */
	width: 585px !important;
	top: -18px; /* a negative value becuase the element is relative to #mainContent padding and margins. We need to override those, which means a negative value */
	border-bottom: 3px solid maroon !important; /* This removes the gold border that is called out for the #mainContent h1. !important overrides that formatting */
	
}

#mainContent h1
{
	margin: 0.1em 0 0.5em 0;
	/* border-bottom: 2px solid rgb(209,117,37);  /* Dark Gold line. Content header with a line for T2 pages */
}

#mainContent h2 
{
   margin: 0.2em 0 0.2em 0; /* content header without the line for T2 pages */
}

#mainContent h3
{
	margin: 0.1em 0 0.1em 0;
 	/* border-bottom: 2px solid rgb(209,117,37); /* Dark Gold - solid line below header */
}

#mainContent h4 
{
	margin: 0em 0 0.3em 0;
}


 #mainContent a 
{
	color: rgb(153,51,0); /* Dark Rust */
	text-decoration: underline; /* content links */
}

#footer 
{ 
	width: 100%;
	margin: 0 auto;
	padding: 1em 0;
} 

#footer p 
{
	margin: 0;
	font-size: x-small;
}

.clearfloat 
{ /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.fltrt 
{ /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    position:relative;
    border: none;
}

.fltlft 
{ /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    position:relative;
    border: none;
}

/* Styling code for RSS buttons*/
#addSiteTo {
width:90%;
font-size:85%;
text-align:center;
padding:8px 0;
border:1px solid rgb(209,117,37);
margin:12px auto;
background-color: $FFFF00;
}

#addSiteTo p {
padding:2px 2px 4px;
margin:0;
}

#addSiteTo img {
width:91px;
border:0;
padding:1px 0;
}