/* CSS Document for Kiboko Adventures */

/* -- General Layout <------------------------------------- */
*{
	color:#000000;
	font-family:arial;
	font-size:12px;}
	
html, body{
	background-color: #fff6d2;
	height:100%; }

#outline{
	border: 1px solid #000000;
	width:750px;
	margin:0 auto 10px auto;}
	
a img{
	border:0;}
	
/* -- Header <-------------------------------- */

#header{
	background-color: #f19812;
	width:750px;
	height:85px;
	background-color:#f19812;
	background-image:url(../_images/logo-camper.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;}
	
#header h1{
	font-size:26px;
	position:absolute;
	margin:30px 0 0 160px;
	font-style:italic;}
	
#header img{
	float:left;
	border:0;
	border-right:1px solid #000000;}
	
#alt-nav{
	float:right;
	color:#fff6d2;}

#alt-nav a{	
	color:#fff6d2;
	text-decoration:none;
	margin:0 3px 0 4px;}
	
#alt-nav a:hover{
	color:#000000;}
	
#alt-nav img{
	float:none;
	border:0;
	margin-right:3px;}
	
/* -- Header >>> Slideshow <--------------------------------- */	
#fader, #headerimg{
	position:absolute;
	z-index:1;}	


/* -- Navigation <------------------------------------ */
#navi{
	height:14px;
	width:750px;
	border-top: 1px solid #000000;
	border-bottom: 3px solid #000000;}
	
#navi ul{
	margin-left:-40px;
	margin-top:0;
	position:absolute;
	z-index:10;}

#navi li{
	list-style-type:none;
	float:left;
	display:block;
	border-left: 1px solid #000000;
	height:14px;
	width:124px;
	text-align:center;
	overflow:hidden;}
	
#navi .firstbutton{
	border:0;
	width:125px;}
	
#navi li a{
	text-decoration:none;
	display:block;
	height:14px;
	width:125px;}
	
#sel a{
	background-color:#000000;
	color:#fff6d2;}
	
#slide{
	width: 750px;
	height: 140px;
	background-color: #f19812;
	border-bottom:1px solid #000000;}

/* -- Sub-Navigation <------------------------- */	
#navi #subnav-general, #navi  #subnav-countries, #navi  #subnav-private, #navi  #subnav-camping, #navi  #subnav-accommodated, #navi  #subnav-prepost{
	position:absolute;
	margin-top:-15px;
	display:none;
	padding-top:17px;
	overflow:hidden;
	width:86px;
	border-bottom:1px solid #fff6d2;
	margin-left:0;
	border-top:1px solid #000000;}
	
#subnav-general li, #subnav-countries li, #subnav-private li, #subnav-camping li, #subnav-accommodated li, #subnav-prepost li{
	float:none;
	background-color:#000000;
	border:1px solid #fff6d2;
	border-bottom:0;
	margin-left:-40px;}

#subnav-general li a, #subnav-countries li a, #subnav-private li a, #subnav-camping li a, #subnav-accommodated li a, #subnav-prepost li a{
	color:#fff6d2;}
	
#subnav-general li a:hover, #subnav-countries li a:hover, #subnav-private li a:hover, #subnav-camping li a:hover, #subnav-accommodated li a:hover, #subnav-prepost li a:hover{
	color:#f19812;}	

/* -- Fix individual -- Sub-Navigation <-------------------------------- */
#navi  #subnav-prepost{
	margin-left:-2px;}
	
#navi  #subnav-camping, #navi  #subnav-accommodated{
	width:120px;
	margin-left:-17px}
	
#navi  #subnav-camping li, #navi  #subnav-camping li a, #navi  #subnav-accommodated li, #navi  #subnav-accommodated li a{
	width:158px;}

	
/* -- Content <----------------------------- */
#content{
	margin:0;
	padding:0;}

#content .col{
	width:250px;
	
	margin-top:0;
	float:left;}
	
#content .span{
	width:500px;
	padding-bottom:15px;}
	
#content .space{
	padding-bottom:15px;}
	
#content:after{
	content:".";
	display:block;
	visibility:hidden;
	height:0;
	clear:both;}
	
#content .first-img{
	border-top: 3px solid #000000;}
	
#tourmap{ 
	position:absolute;
	margin: 140px 0 0 -90px;}
	
#special{
	float:right;
	margin-top:20px;
	margin-left:307px;
	color: #990000;
	font-size:14px;
	/*colour was#f19812*/
	display:block;
	position:absolute;}
	
/* -- Content >>> Fonts <---------------------------- */
#content h2, #content h3{
	margin-top:20px;
	margin-bottom:10px;}
	
#content h2{
	font-size:16px;}
	
#content h4{
	margin-top:-5px;
	margin-bottom:10px;}
	
#content h5{
	margin-top:20px;
	margin-bottom:5px;
	color:#f19812;}
	
#content p{
	margin:0;
	margin-top:10px;
	line-height:1.2em;}

#content a:hover{
	text-decoration:none;
	color: #f19812;}
	
#content i, #content i a{
	font-style:normal;}
	
#content i{
	display:block;}

#content ul{
	margin-left:-15px;
	margin-top:0;}
	
#content li{
	list-style-image:url(../_images/arrows/arrow.gif);}
	
#content h2, #content h3, #content h4, #content p, #content h5, #content h6{
	padding-left:10px;
	padding-right:10px;}

/* -- Content >>> Orange Box, used for specials, ... <------------- */	
#content .col .orange-box{
	background-color:#f19812;
	padding:0 0 10px 0;
	overflow:hidden;
	border-top:3px solid #000000;}
	
#content .col .orange-box h3{
	margin-top:17px;}
	
#content .col .orange-box li{
	list-style-image:url(../_images/arrows/arrow-b.gif);
	margin-right:10px;}
	
#content .col .orange-box a:hover{
	color:#000000;}
	
#content .col .orange-box .icon{
	float: right;
	margin:20px 10px 0;}

/* -- Content >>> Homepage <---------------------------- */

#content .arrow-v{list-style-image: url(../_images/arrows/arrow-v.gif);}
#content .arrow-y{list-style-image: url(../_images/arrows/arrow-y.gif);}
#content .arrow-r{list-style-image: url(../_images/arrows/arrow-r.gif);}
#content .arrow-bl{list-style-image: url(../_images/arrows/arrow-bl.gif);}
#content .arrow-br{list-style-image: url(../_images/arrows/arrow-br.gif);}
#content .arrow-g{list-style-image: url(../_images/arrows/arrow-g.gif);}
#content .arrow-bd{list-style-image: url(../_images/arrows/arrow-bd.gif);}
#content .arrow-b{list-style-image: url(../_images/arrows/arrow-b.gif);}

/* -- Content >>> Statuspage <--------------------- */
#content .col .status{
	margin-top:20px;}

.status li{
	margin-bottom:0px;
	width:460px;
	height:20px;}

.status .full, .status .booked, .status .free{
	background-color: #FF0000;
	width:70px;
	height:10px;
	font-size:10px;
	font-weight:normal;
	display:block;
	text-align:center;
	padding:1px;
	color: #fff6d2;}
	
.status .booked{
	background-color: #f19812;}
	
.status .free{
	background-color: #009900;}	
	
.status span{
	float:left;
	display:block;
	margin-right:10px;
	width:82px;}

.statussm span{
	float:left;
	display:block;
	margin-right:10px;
	width:82px;}
	
#content .larger span{
	width:140px;}
	
#content .status .tourcode{
	font-weight:bold;
	width:62px;}
	
#content .col .status .headlines{
	list-style-image:none;
	list-style-type:none;
	margin-left:-15px;}
	
.col .status .headlines .tourcode{
	margin-right:25px;}

.col .status .headlines span{
	font-weight:bold;}
	
.col .status .headlines .starting{
	width:90px;}
	
#loginform{
	float:right;
	margin:20px 10px 0;}

#loginform_default{
	float:left;
	margin:20px 10px 0;}

#password{
	width:40px;
	height:12px;
	font-size:10px;
	background-color:#fff6d2;
	border:1px solid #f19812;
	color: #f19812;
	padding-left:3px;}

#login{
	width:40px;
	height:16px;
	font-size:10px;
	border:1px solid #f19812;
	background-color:#fff6d2;
	color:#f19812;}
	
/* -- Content >>> Actions <---------------------------- */
#content .action{
	border:1px solid #f19812;
	padding: 0 2px 0 2px;
	float:right;
	text-decoration:none;
	text-align:center;
	margin-left:1px;}
	
/* -- Content >>> Map <--------------------------- */
#map .checkbox{
	position:absolute;
	margin-left:-33px;
	margin-top:2px;}
	
#ttourmap{
	/*margin:0px 0 0 -68px;*/
	margin:0px 0 0 -71px;
	position:absolute;
	clear:both;
	background-color:#f19812;
	padding:1px 3px 0 3px;
	border:1px solid #000000;
	border-top:0;
	text-decoration:none;
	left: 1000px;
	top: 750px;
}
	
#content #ttourmap:hover{
	color:#000000;}

	
/* - Input Fields >>> normal >>> selected >>> valid >>> invalid <------------ */

#Input_Form{
	width: 500px;}
	
#Input_Form p{
	margin:1px 0 5px 0;
	float:left;}

#Input_Form p label{
	width:70px;
	display:block;
	float:left;
	color:#000000;}

.inp_normal{
	width:150px;
	margin-bottom: 2px;
	margin-top:0;
	float:left;
	color:#000000;}

.inp_selected{
	border:2px solid #f19812;}

.inp_valid, .inp_invalid{
	background-image:url(../_images/inp-valid.gif);
	background-position:right top;
	background-repeat:no-repeat;
	margin-bottom:4px;
	border:1px solid #CCCCCC;
	padding:1px;
	width:150px;}

.inp_invalid{
	background-image:url(../_images/inp-invalid.gif);}
	
#tours{
	width: 150px;}
	
#txtComment{
	width:394px;
	height:70px;}	
	
#submit{
	float:right;
	color:#000000;
	margin-top:10px;}

#thanks{
	text-align:center;}

#thanks p{
	color:#000000;
	margin-bottom:15px;}
	
/* -- Content >>> Hidden Images, fadein via JS --------------- */	
#content .hiddenimg{
	position:absolute;
	z-index:10;
	border:1px solid #000000;
	display:none;
	background-color:#fff6d2;}
	
.hiddenimg a{
	width:15px;
	height:16px;
	background-color:#f19812;
	font-size:16px;
	font-weight:bold;
	
	position:absolute;
	z-index:11;
	margin-left:-21px;
	text-decoration:none;
	padding-left:5px;
	border-left:1px solid #000000;
	border-bottom:1px solid #000000;}
	
#content .hiddenimg a:hover{
	color:#000000;}
	
.statustbl{
	padding-left:5px; 
	padding-top:2px; 
	vertical-align:top;
	font-size:12px;
	border-left: 1px #333333 solid;
	border-bottom: 1px #333333 solid;
}
.statustblr{
	padding-left:5px; 
	padding-top:2px; 
	vertical-align:top;
	font-size:12px;
	border-left: 1px #333333 solid;
	border-right: 1px #333333 solid;
	border-bottom: 1px #333333 solid;
}
.statustbltop{
	padding:3px; 
	vertical-align:top;
	font-size:13px;
	font-weight:bold;
	background-color:#F3962F;
	border-left: 1px #333333 solid;
	border-top: 1px #333333 solid;
	border-bottom: 1px #333333 solid;
	
	}
.statustbltopr{
	padding:3px; 
	vertical-align:top;
	font-size:13px;
	font-weight:bold;
	background-color:#F3962F;
	border-left: 1px #333333 solid;
	border-top: 1px #333333 solid;
	border-right: 1px #333333 solid;
	border-bottom: 1px #333333 solid;
	}
	
.TourInfoImages{
	border-color: #DCD7CB #999 #999 #DCD7CB;
/*	border-color:#DCD7CB #333333 #333333 #DCD7CB;*/
	border-style:solid; 
	border-width:1px;
	padding:2px;
	}