body {
	margin:0;
	font-family:Arial, sans-serif;
	background-color:#fff;
	}

a:link, a:active { 
	text-decoration: none; color:#00f; 
	}
	
a:visited {
	text-decoration: none; 
	color:#00f; 
	}
	
a:hover {
	text-decoration: underline; 
	color:#900; 
	}

#container {
	width:800px;
	margin-left:auto;
	margin-right:auto;
	font-size:10pt;
	text-align:justify;
	}	

#container h1 {
	font-size:20pt;
	font-style:bold; 
	text-align:center;
	}	

#container h2 {
	font-size:14pt;
	text-align:center;
	}	

#container h3 {
	font-size:12pt;
	text-align:justify;
	}	

#container h4 {
	font-size:12pt;
	text-align:left;
	}	

#container td {
	font-size:10pt;
	text-align:left;
	}	
		
#banner {
	background:url(graphics/banner_africa.jpg) no-repeat #ccc;
	background-color:#fff;
	width:800px;
	height:220px;
	margin-left:auto;
	margin-right:auto;
	}	
	
#nav {
	width:420px;
	text-align:right;
	background-color:#fff;
	position:absolute;
	margin-top:165px;
	margin-left:200px;
	font-size:8pt;
	}
	
#path {
	background-color:#fff;
	position:absolute;
	margin-top:180px;
	margin-left:300px;
	font-size:8pt;
	font-style:italic; 
	}
			
#leftnav {
	width:130px;
	float:left;
	}			
	
#leftnav_main {
	border-style: solid;
	border-color:#00f;
	border-right-width:2px;
	border-bottom-width:2px;
	border-left-width:0px;
	border-top-width:2px;
	background-color:#eaeaea;
	}		
	
#leftnav_emphasis {
	font-weight:bold; 
	}	
	
#leftnav_badges {
	background-color:#fff;
	text-align:center;
	}	
		
#leftnav p {
	text-align:left;
	font-size:8pt;
	}
	
#prices td { 
	font-size: 14px;
	text-align: left;
	font-weight:bold; 
	}
	
#itinerary td { 
	font-size: 12px; 
	background-color: #eaeaea;
	}
	
#footer { 
	font-size: 10px; 
	color: #0000FF;
	}
	
#tour { 
	width:820px;
	}
		
#tour td { 
	padding-right:20px;
	}
	
#address { 
	font-size: 10px; 
	font-weight: bold;
	text-align: center;
	}
				
#orderform { 
	background-color:#eaeaea;
	border-style: solid;
	border-color:#000;
	border-width:2px;
	margin-top:100px;
	}			
				
#ordernav { 
	width:100%;
	background-color:#fff;
	}			
	
#past { 
	font-size: 14px; 
	background: #eeeeee url('../graphics/tick.jpg') no-repeat right;
	color:#000;
	font-weight: bold;
	border-style:solid;
	border-color:#eee;
	border-width:5px;
	}	
	
#current { 
	font-size: 14px; 
	background-color:#fff;
	color:#f00;
	font-weight: bold;
	border-style:solid;
	border-color:#fff;
	border-width:10px;
	}	
	
#future { 
	font-size: 14px; 
	background-color:#aaa;
	color:#000;
	border-style:solid;
	border-color:#aaa;
	border-width:10px;
	}			
	
#pastbar { 
	background-color:#0c0;
	}	
	
#currentbar { 
	background-color:#0f0;
	}	
	
#futurebar { 
	background-color:#f00;
	}			
	
#whatyousay { 
	font-size: 12px; 
	font-style: italic;
	background-color:#999;
	color:#fff;
	padding-right:20px;
	padding-left:20px;
	padding-bottom:20px;
	padding-top:10px;
	}	
	
#whatyousay h4 { 
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 20px; 
	color:#00f;
	}			
	
#centrebox { 
	font-size: 14px; 
	background-color:#ccc;
	color:#090;
	padding-right:10px;
	padding-left:10px;
	padding-bottom:10px;
	padding-top:-10px;
	border-style: solid;
	border-color:#090;
	}	
	
#centrebox h4 { 
	font-style: italic;
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 20px; 
	color:#090;
	}			
	
	
#newbox { 
	font-size: 12px; 
	font-style: italic;
	background-color:#999;
	color:#fff;
	padding-right:10px;
	padding-left:10px;
	padding-bottom:10px;
	padding-top:-10px;
	border-style: solid;
	border-color:#00f;
	}	
	
#newbox h4 { 
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 20px; 
	color:#00f;
	}			
	
#newbox ol { 
	padding-top: 0px;
	padding-left: 10px;
	padding-bottom: 0px;
	}			
	
#secondbox { 
	font-size: 12px; 
	font-style: italic;
	background-color:#999;
	color:#fff;
	padding-right:10px;
	padding-left:10px;
	padding-bottom:10px;
	padding-top:-10px;
	border-style: solid;
	border-color:#f00;
	}			
	
#intro td { 
	padding: 10px;
	font-size: 10pt; 
	}			
		
#tour_bottom td { 
	vertical-align: top;
	}
		
.rightalign {
	font-size:12pt;
	text-align:right;
	}	

#title-bar {
    list-style: none;
    margin: auto;
    padding: 0;
    width: 606px;
	}

#title-bar li {
    float: left;/* IE needs the <li> to float instead of the <a> */
    position: relative;/* you need relative position before you can change z-index, and before giving child elements position:absolute  */
    z-index: 101;/* stop sub menus going under some elements, like flash or javascript slideshows */
    }

#title-bar li ul{
    width: 140px;
    }

#title-bar a:link, a:active { 
	text-decoration: none; color:#00f; 
	font-style: italic;
	}
	
#title-bar a:visited {
	text-decoration: none; 
	color:#00f; 
	font-style: italic;
	}
	
#title-bar a:hover {
	text-decoration: underline; 
	color:#900; 
	font-style: italic;
	}

#title-bar a {
    display: block;/* allow the <a> to be given width/height and make the whole of the area clickable */
    width: 120px;
    height: 30px;
    color: #000;
    text-decoration: none;
    font-size: 12px;
    line-height: 17px;/* most consistent way of getting the menu text vertically centred */
    padding: 0 10px 3px 10px;
    background: #eee;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    }

.title-bar-end a {
	border-right: 1px solid #000;
	}

.title-bar-deep ul {
    height: 30px;
    display: on;
	}

/* main navigation's sub nav */
#title-bar ul {
    position: absolute;/* relative to the containing #title-bar li */
    left: 0px;/* in line with the left edge of the containing <li> */
    top: 34px;/* shifted down by the height of the containing <1i> so that it appears below */
    display: none;/* hidden to start with */
    list-style: none;
    margin: 0;
    padding: 0;
    background: #eee;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
     }

#title-bar ul a {
    width: 80px;/* sub menus can be wider than the top level menu items */
    font-size: 12px;
    height: 13px;
    border: none;
    }

#title-bar li:hover ul {display: block}/* show all sub ul on any li hover */
#title-bar li:hover ul ul {display: none}/* hide all sub sub ul on any li hover */
#title-bar ul li:hover ul {display: block}/* show a sub sub ul on sub li hover */

#nav-main ul li {float: none}/* ################ NOT SURE THE REASON FOR THIS... MUST CHECK IF IT'S IE ################# */

/* sort out hovering and background colours */
#title-bar ul a, #title-bar li:hover li a, #title-bar li li:hover li a {background: #eee}/* background of the sub and sub sub menus */
#title-bar li li:hover a {}/* currently hovered sub menu item */
#title-bar li li li a:hover {background: #eee}/* currently hovered sub sub menu item */

#title-bar-deep {
    list-style: none;
    margin: auto;
    padding: 0;
    width: 606px;
	}

#title-bar-deep li {
    float: left;/* IE needs the <li> to float instead of the <a> */
    position: relative;/* you need relative position before you can change z-index, and before giving child elements position:absolute  */
    z-index: 101;/* stop sub menus going under some elements, like flash or javascript slideshows */
    }

#title-bar-deep li ul{
    width: 140px;
    }

#title-bar-deep a:link, a:active { 
	text-decoration: none; color:#00f; 
	font-style: italic;
	}
	
#title-bar-deep a:visited {
	text-decoration: none; 
	color:#00f; 
	font-style: italic;
	}
	
#title-bar-deep a:hover {
	text-decoration: underline; 
	color:#900; 
	font-style: italic;
	}

#title-bar-deep a {
    display: block;/* allow the <a> to be given width/height and make the whole of the area clickable */
    width: 120px;
    height: 50px;
    color: #000;
    text-decoration: none;
    font-size: 12px;
    line-height: 17px;/* most consistent way of getting the menu text vertically centred */
    padding: 0 10px 3px 10px;
    background: #eee;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    }

.title-bar-end a {
	border-right: 1px solid #000;
	}

/* main navigation's sub nav */
#title-bar-deep ul {
    position: absolute;/* relative to the containing #title-bar-deep li */
    left: 0px;/* in line with the left edge of the containing <li> */
    top: 34px;/* shifted down by the height of the containing <1i> so that it appears below */
    display: none;/* hidden to start with */
    list-style: none;
    margin: 0;
    padding: 0;
    background: #eee;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
     }

#title-bar-deep ul a {
    width: 80px;/* sub menus can be wider than the top level menu items */
    font-size: 12px;
    height: 13px;
    border: none;
    }

#title-bar-deep li:hover ul {display: block}/* show all sub ul on any li hover */
#title-bar-deep li:hover ul ul {display: none}/* hide all sub sub ul on any li hover */
#title-bar-deep ul li:hover ul {display: block}/* show a sub sub ul on sub li hover */

#nav-main ul li {float: none}/* ################ NOT SURE THE REASON FOR THIS... MUST CHECK IF IT'S IE ################# */

/* sort out hovering and background colours */
#title-bar-deep ul a, #title-bar-deep li:hover li a, #title-bar-deep li li:hover li a {background: #eee}/* background of the sub and sub sub menus */
#title-bar-deep li li:hover a {}/* currently hovered sub menu item */
#title-bar-deep li li li a:hover {background: #eee}/* currently hovered sub sub menu item */