/* artinafrica.css */

/*normalizez margin, padding*/
body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*normalizes font-size for headers*/
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

/*Removes list-style from lists*/
ol, ul {
	list-style: none;
}

/*Normalizes font-style and font-weight to normal*/
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/*Removes border from fieldset and img*/
fieldset, img {
	border: 0;
}

/****************************************************************** GENERAL LAYOUT ********************************************************/
body {
 	background: url(../assets/bodycol.png) repeat-x;
}
 
#container {
 	position: relative;
	margin: 30px auto 0;
	width: 1006px;
	height: 706px;
}
 
/*--------------- HEADER ----------------------------*/
/*place 'header.png' image as background*/
#container #header {
  	background: url(../assets/header.png) 0 0 no-repeat;
	width: 1006px;
	height: 83px;
}

/*replacing h1 with imageText*/
h1 {
	position: absolute;
	top: 23px;
	left: 344px;
	text-indent: -999px;
	background: url(../assets/h1.png) 0 0 no-repeat;
	width: 318px;
	height: 37px;
}

/*--------------- NAV -------------*/
#container #nav {
  	background: #fff url(../assets/navbg.png) 0 0 no-repeat;
	width: 1006px;
	height: 30px;
}


#container #nav ul li {
  	float: left;
	font-family: Lucida sans, Arial, Helvetica, sans-serif;
	font-size: 90%;
}

/*positioning flag image on white nav bg*/
#container #nav ul li#flag {
	margin: 2px 0 0 40px;
}

/*positioning nav links on white nav bg*/
#container #nav ul li.links {
	margin: 5px 0 0 20px;
}

/*colour link and signal as current page*/
#container #nav ul li.links a#current:link, #container #nav ul li.links a#current:visited {
  	color: #000;/*black*/
	font-weight: bold;
	text-decoration: underline;
}

/*colour link*/
#container #nav ul li.links a#red:link, #container #nav ul li.links a#red:visited {
  	color: #bb0000;/*red*/
	font-weight: bold;
	text-decoration: none;
}

/*colour link*/
#container #nav ul li.links a#green:link, #container #nav ul li.links a#green:visited {
  	color: #006600;/*green*/
	font-weight: bold;
	text-decoration: none;
}

/*colour hover*/
#container #nav ul li.links a#red:hover, #container #nav ul li.links a#green:hover {
  	color: #ffd56b;/*golden*/
	font-weight: bold;
	text-decoration: none;
}
  
/*--------------------- CONTENT ---------------*/
                   /*--- IMAGES-----*/
#container #content {
	background: url(../assets/contentbg.jpg) 0 0 no-repeat;
	width: 1006px;
	height: 564px;
}

/*float div with images to the left*/
#container #content #images {
	float: left;
	width: 442px;
	height: 519px;
}

/*replacing h2 with imageText of Kenyan map*/
#container #content #images h2 {
	position: absolute;
	top: 130px;
	left: 120px;
	text-indent: -999px;
	background: url(../assets/artheart.png) 0 0 no-repeat;
	width: 202px;
	height: 141px;
} 

                /*------ MAIN ------*/
/*transparent bg placed in div which is floated 'left'*/
#container #content #main {
	float: left;
	width: 528px;
	height: 526px;
	margin-top: 30px;
	margin-left: 20px;
	background: url(../assets/transblock.png) 0 0 no-repeat;
	
}

/*style and position h2*/
#container #content #main h2 {
	font: 150% Lucida Calligraphy;
	text-align: center;
	font-weight: bold;
	margin: 15px 0;
}

/*setting up main text style*/
#container #content #main ul {
	font: 95%/120% Lucida Calligraphy;
	font-weight: bold;
	margin: 0 10px;
}

/*distance between li's*/
#container #content #main ul li {
	margin-bottom: 10px;
}

/*placing single word text in the middle of line*/
#container #content #main ul li.centre {
	text-align: center;
}
/*------------------- FOOTER ---------------------*/
 #container #footer {
	background: url(../assets/footerbg.png) 0 0 no-repeat;
	width: 1006px;
	height: 29px;
}  

#container #footer p a {
	font: 10px Lucida sans, Arial, Helvetica, sans-serif;
	color: #fff;
	margin: 10px 0 0 80px;
	text-decoration: none;
} 

/******************************************************************* Index.html *******************************************************/
/*--------------------- CONTENT ---------------*/
                   /*--- IMAGES-----*/

/*positioning Flash animation*/
#container #content #images #anim {
	position: relative;
	top: 165px;
	left: 70px;
}

/*Positioning "pics" picture*/
#container #content #images ul li#pics img {
	position: absolute;
	left: 20px;
	bottom: 40px;
	width: 85px;
	height: 63px;
	border: 2px solid #fff;
}

/*Enlarging "pics" picture when hovered over*/
#container #content #images ul li#pics a:hover img {
	position: absolute;
	left: 20px;
	bottom: 40px;
	width: 187px;
	height: 140px;
	border: 4px solid #fff;
	z-index: 10;
}

/*Positioning "jewell" picture*/
#container #content #images ul li#jewell img {
	position: absolute;
	left: 135px;
	bottom: 40px;
	width: 85px;
	height: 64px;
	border: 2px solid #fff;
}

/*Enlarging "jewell" picture when hovered over*/
#container #content #images ul li#jewell a:hover img {
	position: absolute;
	left: 135px;
	bottom: 40px;
	width: 187px;
	height: 140px;
	border: 4px solid #fff;
	z-index: 20;
}

/*Positioning "eleph" picture*/
#container #content #images ul li#eleph img {
	position: absolute;
	left: 250px;
	bottom: 40px;
	width: 85px;
	height: 63px;
	border: 2px solid #fff;
}

/*Enlarging "eleph" picture when hovered over*/
#container #content #images ul li#eleph a:hover img {
	position: absolute;
	left: 250px;
	bottom: 40px;
	width: 187px;
	height: 140px;
	border: 4px solid #fff;
	z-index: 30;
}

/*Positioning "shell" picture*/
#container #content #images ul li#shell img {
	position: absolute;
	left: 365px;
	bottom: 40px;
	width: 85px;
	height: 63px;
	border: 2px solid #fff;
}

/*Enlarging "shell" picture when hovered over*/
#container #content #images ul li#shell a:hover img {
	position: absolute;
	left: 365px;
	bottom: 40px;
	width: 187px;
	height: 140px;
	border: 4px solid #fff;
	z-index: 40;
}

          /*--- MAIN-----*/


/******************************************************* activities.html ***************************************************************/
  /*--- MAIN-----*/
  
#container #content #main p {
	font: 85% Lucida Calligraphy;
	margin: 10px;
}