/*
itinerary.css
author: Debbie Thompson

This CSS file is used for all pages.

Need embedded CSS for most pages (change for each page) to control page background, ex:
#curve	{background-image:url(img/curve_africa_sub.gif);}
body {background-color:#8e835f;}

*/

body {
	font-family:arial,helvetica,sans-serif;
	color:#ffffff;
	margin:0;
	font-size:12px;
	}

a {
	color:#e9e07f; 
	text-decoration:none;
	}
a:hover {
	color:#e9d60e; 
	text-decoration:underline;
	}
/* imglink is used to prevent underlining an img inside an anchor, espeically in galleries.html  */
.imglink a {
	text-decoration:none;
	}



h2 {
	text-align:center;
	padding:5px;
	border-bottom:3px solid #ffffff;
	font-size:1.8em;
	}



/* ----- remove below when html is updated ----- */
.text	{font-size:12px;} 

/* ----- remove above when html is updated ----- */



/* curve is left over from the old days, but still used */
#curve	{ 
	background-repeat:repeat-y; 
	left:0px; 
	top:0px; 
	visibility:visible; 
	z-index:-20;
	}

.center {text-align:center;}

.clear {clear:both;}

/* Use on the info request form to stop spam. If data appears in this hidden field, then it is spam. */
.trick {display:none;}


/* images */
.image_ctr {
	text-align:center;
	border-style:none;
	margin:0;
	font-style:italic; /* for caption */
	}

.image_rt {
	float:right;
	padding:5px 0 5px 5px;
	border-style:none;
	margin:0;
	text-align:center;
	font-style:italic; /* for caption */
	}

.image_lt {
	float:left;
	padding:5px 5px 5px 0px;
	border-style:none;
	margin:0;
	text-align:center;
	font-style:italic; /* for caption */
	}

.sub_title {
	color: #ffffff;
	font-weight:bold;
	font-size: 1.2em;
	}

.title {
	text-align:center;
	font-size:1.4em;
	border-bottom:1px; 
	border-bottom-style:solid; 
	border-bottom-color:#ffffff;
	padding-top:5px;
	margin-top:30px;
	}

/* to emphasize text where needed */
.highlight {
	color:#222222;
	font-style:italic;
	font-weight:bold;
	}

/*for the NEW label in the current trip table */
.new {
	background-color:#213653;
	color:#ffffff;
	font-style:italic;
	padding: 0 2px;
	font-size:0.85em;
	}

.strikeout {
	font-style:italic;
	text-decoration:line-through;
	margin-right:5px;
	}


/* color code the companion safaris in the current trip lists */
.companion1 { 
	border-left:solid 3px #b75e37;
	}
.companion2 {
	border-left:solid 3px #ae2f3c;
	}
.companion3 {
	border-left:solid 3px #74aea9;
	}
.companion4 {
	border-left:solid 3px #7ba264;
	}



/* for the tab box, also uses tabs.js 
-moz- for Firefox; -webkit- for Chrome/Safari; and -khtml- for older Konquerer browsers */
.tab-box { 
  	padding-bottom:5px;
  	width:550px;
	margin:auto;
	}
.tab-box a {
  	color:#555555;
	
  	-moz-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
  	
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	border-top-left-radius: 8px;
	
	padding: 5px 5px;
  	text-decoration:none;
  	background-color: #bbbbbb;
	}
.tab-box a:hover {
  	color:#880000;
	}
.tab-box a.activeLink { 
	background-color: #ffffff; 
	color:#000000;
	padding: 7px 5px;
	}
.tabcontent a {
	color:#cdc03a;
	}
.tabcontent { 
	background-color: #ffffff;
	color:#000000;
	height:290px; /*this could be overridden on pages */
	width:550px;
	margin:auto;
	}
.tabcontent p { 
	margin:0 5px 5px 5px;
	padding-top:7px;
	}
.hide { display: none;}



/* for staff bios */
.bio {clear:left;	
	}
.bio p {
	margin-top:0;
	padding-bottom:5px;
	}


/* navigation line at the top for within the page */
.pagenav {
	text-align:center;
	}
.pagenav a {
	padding:0 2px;
	}


/* general info table */
.info_table table {
	border:1px solid #999999;
	margin:auto; /* center table */
	width:430px;
	}
.info_table td {
	padding:0.3em;
	border:1px solid #999999;
	vertical-align:top;
	}
.info_table th {
	padding:0.3em;
	border:1px solid #999999;
	vertical-align:top;
	}

/* info_table with no border */
.info_table_nb table {
	border:none;
	margin:auto;
	width:430px;
	}
.info_table_nb td {
	border:none;
	padding:0.3em;
	vertical-align:top;
	}
.info_table_nb th {
	border:none;
	padding:0.3em;
	vertical-align:top;
	}


/* for form tables, needs full width */
.contact_form table {
	border:none;
	margin:auto; /* center table */
	}
.contact_form td {
	padding:0.2em;
	border:1px solid #999999;
	vertical-align:top;
	}


/* for the current trips tables */
.expedition_table table {
	width:100%;
	border-spacing:0px; /* this doesn't work in dreamweaver, but is ok in browsers */
	margin-bottom:10px;
	}
.expedition_table td, .expedition_table th {
	padding: 5px 3px 5px 3px;
	}
.expedition_table table .center {
	text-align:center;
	}
.expedition_table table .heading{
	background-color:#475d7d;
	}
.expedition_table table .highlight_lt{
	background-color:#566b88;
	}
.expedition_table table .highlight_md{
	background-color:#4e6483;
	}
.expedition_table table .region_title{
	font-weight:bold;
	font-size:1.2em;
	text-align:center;
	}
	

/* for the quote boxes on many pages - this should probably be a class */
#quote {
	float: right; 
	width: 140px; 
	border-width: 1px 3px 3px 1px;
    border-color: black; 
	border-style: solid; 
	margin: 0px 0px 5px 5px;
	padding: 3px;
    background-color: #ffffff;
	color: #666666;
	font-size: 0.95em;
	font-family: Geneva, Verdana, sans-serif;
	text-align:center;
	}
#quote .author {font-style:italic;}
#quote a {color:#660000;}
#quote a:hover {color:#993333;}


/* for the boxed paragraphs such as info boxes */
.boxed_info { 
	width: 430px; 
	border-width: 1px 3px 3px 1px;
    border-color: #000000; 
	border-style: solid; 
	margin:0 auto;
	padding: 0 8px;
    background-color: #ffffff;
	color: #666666;
	font-size: 0.95em;
	font-family: Geneva, Verdana, sans-serif;
	}
.boxed_info span {
	font-variant:small-caps;
	font-weight:bold;
	color:#bbbbbb;
	font-size:1.2em;
	}


/* main top nav bar at the very top of every page - uses inc/header.html */
#header{
	background-color:#ffffff;
	width:750px;
	}
#header ul {
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
	}
#header li {
	display:inline; 
	}
#header li form {
	color:#555555;
	text-align:right;
	background-color:#ffffff;
	padding:4px 2px 4px 2px;
	margin:0;
	}
#header li a {
	text-decoration:none; 
	color:#555555;
	float:left;
	background-color:#ffffff;
	font-size:12px; 
	padding:8px 8px 4px 2px;  /* make hot area bigger */
	margin:0;
	display: block;  /* this makes the entire space hot */
	}
#header a:hover {color:#880000;}


/* right nav for the icons on itinerary pages */
.rightnav {
	text-align:center;
	width:110px;
	vertical-align:top;
	}
.rightnav img {
	margin-bottom:10px;
	margin-left:14px;
	border:none;
	}



/* this is for image group table on main photo gallery page, etc */
.image_table table {
	margin:auto;
	}
.image_table p {
	text-align:center;
	font-style:italic;
	margin:0;
	}
.image_table td {
	padding:0 3px 10px 3px;}
.image_table img {
	border:none;}




/* ----- below is from original styles.css, pasted here, to lessen page load time. For left navigation menu. ----- */

/* this is the position of the top of the left menu??? */
#nav {
	position:absolute; 
	left:0px; 
	top:240px; 
	visibility:visible; 
	z-index:30;}

/* this is the position of the fly-out menu. these are 24px each - add 24 to the previous top 
This should match the table cell height of the main menu in nav.shtml
These used to be left:20px; but made them 0 so the fly-out menu would be closer to the hot zone.*/
#subnav_antarctica		{position:absolute; left:0px; top:240px; visibility:hidden; z-index:20;} 
/* #subnav_arctic			{position:absolute; left:0px; top:264px; visibility:hidden; z-index:20;} */
#subnav_africa			{position:absolute; left:0px; top:264px; visibility:hidden; z-index:20;}
#subnav_namerica		{position:absolute; left:0px; top:288px; visibility:hidden; z-index:20;}
#subnav_camerica		{position:absolute; left:0px; top:312px; visibility:hidden; z-index:20;}
#subnav_samerica		{position:absolute; left:0px; top:336px; visibility:hidden; z-index:20;}
#subnav_caribbean		{position:absolute; left:0px; top:360px; visibility:hidden; z-index:20;}
#subnav_oceania			{position:absolute; left:0px; top:384px; visibility:hidden; z-index:20;}
#subnav_asia			{position:absolute; left:0px; top:408px; visibility:hidden; z-index:20;}
/* skip three * 24 = 72 */
#subnav_resources		{position:absolute; left:0px; top:480px; visibility:hidden; z-index:20;}

#nav tr td {
	text-align:left;
	padding-left:10px;
	font-size:15px;		/* careful - if this gets too big it pushes the cell height bigger than 24 and the fly-outs don't line up */
	color:#555555;
	}

/* left fly-out menu, this should be the color same as quotes */
#nav a {
	text-decoration:none;
	color:#555555;
	display: block;  /* this makes the entire space hot */
	}

#nav a:hover {color:#880000;}


/*
opacity: .85; and filter: alpha(opacity=90); not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation. In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.
*/

.subnav	{
	background-color:#FFFFFF; 
	border-top:1px solid #666666; 
	border-left:1px solid #666666; 
	border-right:1px solid #666666; 
	color:#555555; 
	text-align:left; 
	opacity: .90; 
	filter: alpha(opacity=90);
	}

.subnav_btm	{
	background-color:#FFFFFF; 
	border:1px solid #666666; 
	color:#555555;  
	text-align:left; 
	opacity: .85; 
	filter: alpha(opacity=90);
	}


.subnav	a, .subnav_btm a { 
	text-decoration:none; 
	color:#555555; 
	font-size:12px;
	padding:7px 4px 7px 4px; /* this makes hot space big and the next makes the entire space hot */
	display: block;
	}

.subnav a:hover, .subnav_btm a:hover {
	color:#880000;
	}


/* ----- above is from original styles.css, pasted here ----- */