/* CSS Document */

/* TODO: 
	When printing, left margin is increased for each page, so text moves farther and farther to the right.
	Big sections of some pages do not print (see seaKayaking.htm and whiteWaterRafting.htm).
	Perhaps include a link for printable version that uses same content but alternate CSS?
	Mozilla:
		Float bug causing image to overlap text when there are multiple images floated on same side.
	IE:
		If floated images are too close to each other then there is white space in text.
		Image borders have special exemption - would prefer if they were the same
		IE5 vs IE6 behaviour with * html hack (specifically regarding spacing of images in masthead
*/
body {
	margin: 10px 0px;
	FONT-WEIGHT: normal;
	BACKGROUND-ATTACHMENT: fixed;
	BACKGROUND-IMAGE: url(/IMAGES/MenuImages/serenpage.gif);
	background-color: #006600;
	COLOR:#000066;
	BACKGROUND-REPEAT: repeat-x;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	font-size: small;
	text-align: center;
}

/*************************** PAGE STRUCTURE *********************************/
/* This makes the page centered */
#everythingAndFooter {
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	float: none;
	background: url(/IMAGES/MenuImages/RoundedCornersTop.gif) no-repeat top left;
	padding-top: 12px; /* Height of rounded corners image */
}

/* The whole page, excluding curve at top and bottom of page */
#page {
	width: 100%;
	background-color: #FFFFFF;
	clear: right;
	text-align: left;
	float: left;
	background: #FFFFFF url(/IMAGES/MenuImages/backgroundLogo.gif) top left no-repeat;
	/*background-image: url(IMAGES/MenuImages/marginBackground.gif);
	background-repeat: repeat-y;*/
}


/* Serendipity name and navigation */
#masthead {
	width: 702px;
	text-align: left;
	/* background-color: #893746;*/
	padding-left: 148px; /* Allows logo in background to show without overlapping */
	float: none;
	clear: right;
	margin: 0px;
	font-size: 0.8em;
	z-index: 1;
}

/* Special image requirements for the company name in the page header */
#masthead img#companyName {
	float: right;
	clear: left;
	border: none;
	padding: 0px;
	margin: 0px;
	vertical-align: top;
	display: inline;
}

/* Remove bullets from nav bar lists */
#masthead ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

/* Define the nav bar buttons */
#masthead li {
	float: left;
	clear: right;
	position: relative;
	font-size: 10px;
	padding: 2px 0 3px 0; /* This is so the background image shows fully and depends on the font size */
	margin: 0px;
	border-left: 2px #000066 solid; /* Hmm, IE puts border inside, whereas Firefox puts it outside the box */
	vertical-align: middle;
	width: 115px; /* You can override this on the individual lis */
	text-align: center;
	z-index: 100;
	background: #F5F5F5 url(/IMAGES/MenuImages/menuBackground.gif) bottom left repeat-x;
}

#masthead li a {
	display: block;
	width: 100%;
}

/* Set the display properties of the dropdown lists */
#masthead li ul {
	display: none;
	position: absolute; 
	clear: left;
	/* The following two position the dropdown relative to the left of the button area, rather than the text */
	top: 29px;
	left: -2px;
	border-top: none;
	border-left: none;
	border-bottom: none;
	border-right: 2px solid #000066;
	/* border: solid 1px #CCCCCC;*/
	background: #F5F5F5 url(/IMAGES/MenuImages/DropdownBorder.gif) no-repeat bottom left;
	padding-bottom: 40px; /* Height of waves at bottom of background image */
	padding-top: 10px;
	z-index: 100;
}

/* Define the appearance of the items in the dropdown lists */
#masthead li ul li {
	/*background-image: none;
	/* background: #F5F5F5;*/
	background: #F5F5F5 url(/IMAGES/MenuImages/DropdownBorder.gif) top left;
	float: none;
	display: block;
	padding: 5px 4px;
	border-left: none;
	width: 109px; /* You can override this on the individual lis but it is not recommended */
	height: auto; /* Override height used for menubar */
}

/* Define behaviour for hover and over properties to show the list 
   (over class is necessary for IE, which only recognizes hover on 
   "A" elements */
#masthead li:hover ul, #masthead li.over ul { 
	display: block; 
}

#masthead strong {
	color: #FF0000;
	font-weight: bold;
}

/* Set the appearance of the links in the nav bar and dropdowns */
#masthead a {
	color: #330066;
	font-weight: bold;
	text-decoration: none;
}

#masthead a:hover {
	color: #009900;
}

.printLink {
	text-align: right;
	width: 500px;
	float: right;
	margin: 1em 1em;
	font-size: 1.2em;
}

/* unique page content */
#content {
	float: left;
	/* background-color: #00FF99; */
	width: 495px;
	padding: 0px 5px 0px 5px; /* Content area may be 10px narrower in IE than Firefox */
	margin-left: 154px; /* If you adjust this, you must also adjust width of content and left and margin of .imgLeft */
	display: inline; /* This keeps margin from getting doubled in IE.  
						See http://www.positioniseverything.net/explorer/doubled-margin.html */
}

/* Classes for client comments.
   The clientComment is right of content div.  It's length varies each time page is loaded. */
#clientComment {
	width: 165px;
	float: right;
	margin: 0px 6px 0px 10px;
	background: #FFFFFF url(/IMAGES/MenuImages/commentsTop.gif) top left no-repeat;
	display: inline; /* This keeps the right margin from getting doubled in IE */
	font-size: 0.95em; /*12px; */
	font-style: italic;
}

/* This is the footer that appears after the end of the white section of the page.
   It contains the link to the site map, the copyright, and another link to contact Serendipity */
#footer {
	text-align: center;
	width: 850px;
	float: left;
	clear: left;
	padding-top: 12px;
	background: url(/IMAGES/MenuImages/RoundedCornersBottom.gif) no-repeat top left;
	font-size: 0.8em; /*10px;*/
}

#footerContent {
	font-size: 0.8em; /*10px;*/
}

/******************************** END PAGE STRUCTURE *****************************/

/********************************** CONTENT FORMATTING ***************************/
#content p {
	float: none;
}

#content blockquote {
	float: none;
}

#content a:link {
	color: #0066CC;
}

#content a:active {
}

#content a:visited {
	color: #330066;
}

#content a:hover {
	color: #CC0000;
}

#content dl {
}

#content dt {
	font-weight: bold;
	display: block;
}

#content dd {
	margin-bottom: 10px;
	margin-left: 50px;
}
	
#content form textarea {
	width: 100%;
	height: 5em;
}

#content form li input[type="checkbox"], #content form li input[type="radio"] {
	width: auto;
}

hr {}

/* This should be the page header */
h1 {
	vertical-align: baseline;
	font-size: 1.4em; /*18px;*/
	margin-top: 0px;
	color: #000066;
	text-align: left;
}

/* This should be used for sub headers within the page */
h2 {
	vertical-align: baseline;
	font-size: 1.1em; /* 14px; */
	margin-top: 0px;
	color: #CC0000;
	text-align: left;
}

/* The smaller headers probably won't be used much */
h3 {
	color: #000066;
	font-size: 1.1em; /* 14px;*/
	font-variant: small-caps;
}
.clearLeft {
	clear: left;
}
.clearRight {
	clear: right;
}

h4 {}
h5 {}
h6 {}

li {
	margin-left: 2em;
	margin-bottom: 0.5em;
}

table {
	border-collapse: collapse;
}
thead {}
tbody {}
tfoot {}
tr {}
td {}
th {}
caption {}

/* Abbreviations and acronyms, either can be used to provide definition to short phrase, useful for search engines and accessibility */
abbr {
	border-bottom-style: dotted;
	cursor: help;
}

acronym {
	border-bottom-style: dotted;
	cursor: help;
}

dfn { /* Definition - use where term is defined.  This tag will 
         cause the term to be highlighted as specified here
		 or italicized if nothing defined here  */
}

#content form {
	padding: 0px;
	margin: 0px;
}

#content form ul li {
	list-style: none;
	padding: 0px;
	margin: 0px;
	margin-left: 1em;
}
#content form ul {
	margin: 0px;
	padding: 0px;
}

#content form dl dd {
	padding-left: 0px;
	margin-left: 0px;
}

#content form dl dd input {
	width: 100%;
	padding: 2px;
}
/* Best to leave the following tags alone:
b
i
em
strong
br
s
strike
ins
del
sub
sup
*/

/* NOTE: no form elements have been defined under the assumption that they will not be used */
cite {} /* This is not anticipated to be used */
code {} /* This is not anticipated to be used */
samp {} /* This is not anticipated to be used */
script {} /* This is not anticipated to be used */
var {} /* This is not anticipated to be used */

.alert { color: #CC0000; }
dd.alert input { border: 1px solid #CC0000; padding: 2px;}
/* Classes for images in page content */
.imgRight {
	float: right;
	margin: 0px 5px 5px 12px;
	display: inline;
}

.rightMarginImage {
	float: right;
	display: block;
	width: 131px;
	margin: 0px 5px 5px 12px;
	padding:2px;
	background-color: #EEEEEE;
	text-align: center;
}

.rightMarginImage p {
	border-width: 2px;
	border-style: solid;
	border-color: white;
}
.rightMarginImage img {
	border: none;
	padding-bottom: 2px;
}
.imgCenter, .imgLeft, .imgRight {
	background-color: #F5F5F5;
	border: ridge #CCCCCC 3px; /* TODO: Set border width in ems? */
	padding: 2px;
}
/* Looks like imageLeft and imageRight, but sits in flow of text */
.imgCenter {
}
/* Images on the left sit to the left of the text margin */
.imgLeft {
	float: left;
	clear: left;
	position: relative;
	margin: 0px -144px 5px 12px; /* Negative margin keeps text 10px away.  This must be adjusted in synch with the content left margin */
	left: -154px; /* Position the image left of the content area */
	display: inline; /* Keeps IE from doubling left margin */
}

.leftMarginImage {
	float: left;
	clear: left;
	position: relative;
	margin: 0px -144px 5px 12px; /* Negative margin keeps text 10px away.  This must be adjusted in synch with the content left margin */
	left: -154px; /* Position the image left of the content area */
	border: none; /* TODO: Set border width in ems? */
	/* padding: 2px; */
	background-color: white;
	display: inline; /* Keeps IE from doubling left margin */
	text-align: center;
}

.leftMarginImage p {
	padding: 0px;
	margin: 0px;
}

.leftMarginImage a, .rightMarginImage a {
	text-decoration: none;
}

.rightMarginImage:hover p, .rightMarginImage.over p{
	border-color: #CC0000;
}

.leftMarginImage img, .rightMarginImage img {
	border: none;
	margin-top: 6px;
}

.leftMarginImage p, .rightMarginImage p {
	margin: 0px;
	font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Give IE it's own border width, because otherwise it looks too big \*/ 
* html .imgRight, * html .imgLeft, * html .imgCenter {
	border-width: 2px; /* TODO: Set border width in ems? */
}
/* End hide from Mozilla */

/* Captions */
.imgLeft p, .imgRight p, .caption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em; /* 10px; */
	color: #006600;
	margin: 0px;
	width: 200px;
}

/* On all sample itinerary pages, a blurb is shown identifying it as an example */
.sampleItineraryBlurb {
	float: left;
	clear: left;
	background-color: #EEEEEE;
	color: #006600;
	display: inline; /* Keeps IE from doubling left margin */
	border-top: 8px solid #006600;
	border-bottom: 2px solid #006600;
	border-right: none;
	border-left: none;
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 0px;
}

.sampleItineraryBlurb p {
	margin: 2px 16px;
	padding: 0px;
	font-size: small;
}
.sampleItineraryBlurb .moreItins {
	float:left;
	background-repeat: no-repeat;
	background-position: center center;
	margin-top: 2px;
	margin-right: 10px;
	margin-bottom: 2px;
	margin-left: 21px;
	height: 46px;
	width: 123px;
	background-color:#006600;
	font-size: small;
	color: #FFFFFF;
	text-decoration: underline;
}/* Formatting of links around images for activity layouts. */

div.moreItins a   {
	color:#FFFFFF;
	background-color: #006600;
	text-align: center;
	display: block;
	padding: 7px;
	font-style: italic;
	font-weight: bold;
}
div.moreItins a:active, div.moreItins a:hover {
	background-color:#009900; /* This is white so it is not visible */
	color: #FFFF00;
}

.communicationMessage {
	color: #009900;
	border: medium solid #000099;
	font-weight: bold;
	padding: 0.1em 0.5em;
	margin-bottom: 1em;
	clear: left;
}
.clearBoth {
	clear:both;
}
.bigLetters {
	font-size: 18px;
	font-weight: bold;
}
/* Formatting of table of activities with image over link.  Do not use this 
format when there is supporting text for each link (use specialties list described below instead). */
div.activity, div.magazine {
	float: left;
	padding: 0px;
	font-weight: bold;
	page-break-inside: avoid;
}
div.activity{
	margin: 0em 0.25em 0.5em 0.25em;
	width: 150px;
}

div.magazine {
	margin: 0px;
}

/* Formatting of links around images for activity layouts. */
div.activity a:link img, div.activity a:visited img, div.magazine a:link img, div.magazine a:visited img {
	border-width: 2px;   /* Must be the same size as :hover and :active border */
	border-style: solid;
	border-color: white; /* This is white so it is not visible */
	display: block;
}
div.activity a:active img, div.activity a:hover img, div.magazine a:active img, div.magazine a:hover img {
	border-width: 2px;
	border-style: solid;
	border-color: #CC0000;
	display: block;
}

/* Formatting of image/text combo for package tours, specialties, and other pages that 
use an image as a link with associated text as part of a list containing (h2, img, p*).
Do not use this format when there is no associated text (use activity div described above instead). 
NOTE: specialties and specialties_horizontal are IDs.  There can be a maximum of one per page. */
ul.specialties {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
ul.specialties li {
	float: left;
	padding: 0px;
	background-color: #EEEEEE;
	border: 2px white solid;

	width: 460px;
	margin: 0px;
	display: inline;
}

ul.horizontal li {
	position: relative;
	width: 156px;
	margin: 0em 0px 1em 0em;
}

ul.specialties li img {
	float: left;
	border: none;

	margin: 0.25em 0.75em 0.5em 0.25em;
}
ul.horizontal li img {
	margin: 0em 0em 1em 0.25em;
}
ul.specialties li h2, ul.specialties li h3 {
	margin: 0.5em 0.25em;
}
ul.horizontal li h2, ul.horizontal li h3 {
	text-align: center;
}
ul.specialties li p {
	margin-top: 0px;
	float: left;
	padding: 0em 0.25em;
}
ul.horizontal li p {
	margin: 1em 0.25em 0.5em 0.25em;
	padding-bottom: 0em;
	float: left;
}
ul.specialties h2 a, ul.specialties h3 a {
	text-decoration: none;
}
ul.specialties a:hover {
	text-decoration: underline;
}
ul.specialties li h2 a {
	color: #CC0000;
}
ul.specialties li h3 a {
	color: #000066;
}
ul.specialties li p a {
	color: #000066;
}
ul.specialties li:hover, ul.specialties li.over {
	color: #CC0000;
	border-color: #CC0000;
}

/* Footnote */
.note {
	font-size: 0.8em;
	font-style: italic;
}


/* The client's comment */
#clientCommentContent .quote {
	font-size: 1em; /*12px; */
	font-style: italic;
}

/* The client's name and address */
#clientCommentContent .CommentNames {
	font-size: 0.95em; /*11px;*/
	font-style: normal;
}

/* The actual content of the comment sits within this inner div so 
   that an image of a quote sign can appear with the comments and 
   line up properly */
#clientCommentContent {
	margin: 15px 0px; /* left and right margins are handled on individual paragraphs to get background images to line up */
	background: #FFFFFF url(/IMAGES/MenuImages/commentsBackground.gif) repeat-y;
}

#clientCommentContent p, #clientCommentContent img {
	margin: 0px 15px;
	position: relative;
}

#clientCommentContent .testimonialLink a {
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	font-size: 0.95em;
	text-decoration: none;
	color: #0066CC;
}

#clientCommentContent .testimonialLink {
	margin: 0.25em 0px auto 0px;
	padding: 0px 15px;
	text-align: right;
	background: url(/IMAGES/MenuImages/commentsBottom.gif) bottom left no-repeat;
	padding-bottom: 15px;
}

.activityNavigation p {
	text-align: center;
	/*margin-right: 170px;*/
}

table.itineraryPrices {
	border: solid black thin;
	text-align: left;
	float: none;
}

table.itineraryPrices thead.years {
	text-align: center;
	background-color: #006600; 
	color: #FFFFFF;
}

table.itineraryPrices thead.headers {
	background-color: #99CC00; 
	color: #FFFFFF; 
	text-align: left;
}

table.itineraryPrices td {
	padding: 0px 5px;
}

table.itineraryPrices thead, table.itineraryPrices tfoot {
	font-weight: bold;
}

td.PriceInfo{
	text-align: right;
}

div.QA h3 {
	font-variant: normal;
	font-style: italic;
	color: #CC0000;
}
	
div.QA > p {
	margin-left: 25px;
}

/************************************ END CONTENT FORMAT ********************/

.noPrint {
}

.foreign {
	font-style: italic;
}

.printedBorder {
	border: none;
}
.landing {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 22px;
}
table.twoColumnTable {
	
	left: -154px;
	margin: 0px 5px 5px 12px;
	cellspacing="3" 
	cellpadding="3"
	
	padding: 2px;
	border: ridge #CCCCCC 3px;
	background-color: white;
	display: inline;
}