/* ------------------------ hello, i am css code -------------------- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, html, label, table, tr, td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset, img, a img, :link img, :visited img {border:0px none;}
address, caption, cite, code, dfn, th, var {font-style:normal;font-weight:normal;}
ol, ul {list-style:none;}
caption, th {text-align:left;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
q:before, q:after {}

/* ------------------------ universal ----------------------------- */

/* ------------------------ type selectors ------------------------ */
body { 
	background: url('/images/bg-body.jpg') top left;
	text-align:center; 
	color:#FFF; font-style:normal; font-variant:normal; font-weight:normal; line-height:16px; 
	font-size:62.5%; font-family: Arial, Verdana, Helvetica, sans-serif;
	}

blockquote { margin-left:10px; margin-right:10px; }

h1	{ font-size:1.5em; color:#f48d60; }
h2	{ font-size:1.4em; color:#FFDE00; font-weight: bold; }
h3	{ font-size:1.4em; color:#f48d60; font-weight: bold; }
h4	{ font-size:1.3em; color:#f48d60; font-weight: bold; }

h1 span, h2 span, h3 span	{ display:none; }

a:link, a:visited	{ color:#f48d60; text-decoration:underline; outline:none; }
a:hover, a:active	{ color:#FFDE00; text-decoration:underline; outline:none; }

img, div { behavior: url('http://www.sugarbranchdesigns.com/clients/dosvagos/iepngfix.htc') }

/* ------------------------ classes ------------------------ */
.clear	{ 
	clear:both;
	}

div.clear	{ 
	height:.01em; 
	overflow:hidden; 
	}

p.back-to-top {
	text-align:right;
	display:block;
	padding-right:15px;
	}

img.img-left { 
	float:left; 
	margin:2px 10px 10px 0px;
	}

img.img-right { 
	float:right; 
	margin:5px 0px 10px 10px; 
	}
	
hr { width: 500px; }	

/* ------------------------ form elements ------------------------ */
form {
	width:150px;
	margin:10px 0 15px 0; /* set margin left and right below */
	}

form label	{ font-size:.95em; } 

form br { line-height:0; height:0; } /* defaults vertical spacing between fields */

input, textarea, select { 
	background-color:#C4AA98 !important; /* to prevent highlighting by Google Toolbar */
	border:1px solid #372C21;
	color:#000;
	width:145px; /* 5 pixles smaller than form width !important */
	height:20px;
	line-height:18px;
	vertical-align: middle;
	margin-bottom:4px; /* sets vertical spacing between fields */
	padding-top:1px; /* vertically position text in input/textarea field */
	padding-left:4px; /* horizontally position text in input/textarea field */
	font-family: Arial, Verdana, Helvetica, sans-serif; 
	font-size:1.3em;
	}

select { width:150px; padding:0; } /* same width as form - !important */

textarea { height:90px; overflow:auto; }

/* ------------------------ main contact form ------------------------ */
#contact-main { margin:20px 0 10px 0; }

#contact-main label { 
	width:220px; 
	position:relative; 
	display:block; 
	text-align:right; 
	margin-bottom:10px;
	font-size:1.3em;
	}

#contact-main label input, #contact-main label textarea, #contact-main label select { 
	width:240px;
	position:absolute; 
	left:110%; 
	top:-2px;
	}
	

#contact-main label select { width:245px; } /* fixes display issue - 5px larger than input field */

#contact-main label textarea { height:100px; overflow:auto; }

/* ------------------------ submit button form elements ------------------------ */

#submit { 
	width: 200px;
	margin: 85px 50px 5px 250px;
	font-size:1.3em;
	}

/* ------------------------ main framework ------------------------ */
#wrap {
	background:url('/images/aztec-bg-burnt.jpg');
	width:1071px;
	margin:0 auto;
	text-align:left;
	}
	
#inside-wrap {
	background:url('/images/bg-inside-wrap.gif')  repeat-y;
	width: 928px;
	margin:0 auto;
	text-align:left;
	}			

/* ------------------------ masthead framework ------------------------ */
#masthead {
	position:relative;
	background:url('/images/masthead.jpg');
	height:90px
	}
	/* index page link within #masthead */		
	#masthead a {	
		position:absolute;
		left:0px;
		width:0px;
		top:0px;
		height:0px; 
		}
	#masthead a span {
		display:none;
		}
		
/* ------------------------ flickr ------------------------ */		

#flickr {
	width: 220px;
	}
		
/*
Images are wrapped in divs classed "flickr_badge_image" with ids "flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/
#flickr_badge_uber_wrapper {text-align:center; width:150px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#010000;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}	

/* ------------------------ column-left framework ------------------------ */
#column-left {
	width:697px;
	float:left;
	overflow: hidden;
	}

	#column-left p, #column-left h1, #column-left h2, #column-left h3, #column-left ul, #column-left dl {
		margin:0px 0px 10px 24px;
		}
		
		#column-left p, li, dt, dd {	
			font-size: 1.4em;
			line-height: 18px;
			}	

	#column-left form { margin-left:0px; } /* set form margin here */

	/* single column list */
	#column-left ul { padding-left:7px; }
		#column-left ul li { 
			background:url('/images/bullet.jpg') no-repeat -2px 5px; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:10px
			}
			
	#tour-photo {
		width: 358px;
		float: right;
		}
		
		#tour-photo-text {
			width: 300px;
			text-align: center;
			padding-left: 35px;
			}
		
		#tour-photo p {
			font-size: 1.1em;
			line-height: 12px;
			color:#f48d60;
			}
			
	#tour-photo2 {
		width: 358px;
		float: right;
		}
		
		#tour-photo-text2 {
			width: 300px;
			text-align: center;
			padding-left: 35px;
			}
		
		#tour-photo2 p {
			font-size: 1.1em;
			line-height: 12px;
			color:#f48d60;
			}			
		
		.tour-photo-text {
			color:#f48d60;
			}			
			
			.tour {
			margin-left: 30px;
			}

		dl.tour-date, dl.tour-date-alt {
		margin: 2.0em 0;
		padding: 0;
		}
		
		.tour-date dt {
		position: relative;
		left: 15px;
		top: 2.3em;
		width: 120px;
		font-weight: bold;
		color: #FFF;
		background: #261002;
		padding: 10px;
		}
		
		.tour-date-alt dt {
		position: relative;
		left: 15px;
		top: 2.3em;
		width: 120px;
		font-weight: bold;
		color: #FFF;
		background: #17414d;
		padding: 10px;
		}		
		
		.tour-date dd, .tour-date-alt dd{
		border-left: 1px solid #FFDE00;
		margin: -25px 30px 0 160px;
		padding: .5em 0 .75em 1em;
		}

/* ------------------------ column-right framework ------------------------ */
#column-right {
	width:231px;
	float:left;
	}

	#column-right p, #column-right h1, #column-right h2, #column-right h3, #column-right ul, #column-right dl {
		margin:5px 0px 10px 10px;
		}
		
		#column-right p {	
			font-size: 1.2em;
			}			

	#column-right form { margin-left:0px; }

	/* single column list */
	#column-right ul { padding-left:5px; }
		#column-right ul li { 
			background:url('/images/bullet.jpg') no-repeat 0px 6px; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:10px
			}

	#oaxaca-map {
		background:url('/images/map.jpg') no-repeat;
		height: 247px;
		position:relative;
		}		
		
		#oaxaca-map a {
	position:absolute;
	left:6px;
	width:217px;
	top:7px;
	height:236px;
			}
		#oaxaca-map  a span {
			display:none;
			}		


/* ------------------------ header framework ------------------------ */

#header-graphic-main { height:305px; } 

#header-graphic { height:305px; } /* sets height headers */

	body#index #header-graphic { background:none; }
	body#learn #header-graphic { background:url('/images/header-church.jpg'); }
	body#itinerary #header-graphic { background:url('/images/header-buildings.jpg'); }
	body#about #header-graphic { background:url('/images/header-monte-alban.jpg'); }
	body#news #header-graphic { background: url('/images/header-santo-domingo.jpg'); }
	body#contact #header-graphic { background:url('/images/header-girls-pineapples.jpg'); }
	body#thankyou #header-graphic { background:url('/images/header-girls-pineapples.jpg'); }
	body#sitemap #header-graphic { background:url('/images/header-buildings.jpg'); }
	body#error #header-graphic { background:url('/images/header-buildings.jpg'); }


/* ------------------------ subheads ------------------------ */
	
#subhead { height:63px; } /* sets height for all subheads */
	body#index #subhead { background:url('/images/subhead-welcome.gif') no-repeat; }
	body#about #subhead { background:url('/images/subhead-about.gif') no-repeat; }
	body#itinerary #subhead { background:url('/images/subhead-itinerary.gif') no-repeat; }
	body#learn #subhead { background:url('/images/subhead-learn.gif') no-repeat; }
	body#news #subhead { background:url('/images/subhead-blog.gif') no-repeat; }
	body#contact #subhead { background:url('/images/subhead-contact.gif') no-repeat; }
	body#thankyou #subhead { background:url('/images/subhead-thankyou.gif') no-repeat; }
	body#sitemap #subhead { background:url('/images/subhead-sitemap.gif') no-repeat; }	
	body#error #subhead { background:url('/images/subhead-error.gif') no-repeat; }

/* ------------------------ titles ------------------------- */
#title-upcoming-tours {
	height:69px;
	background:url('/images/title-upcoming-tours.gif') no-repeat;
	}

#title-when {
	height:23px;
	background:url('/images/title-when.gif') no-repeat;
	}

#title-where {
	height:23px;
	background:url('/images/title-where.jpg') no-repeat;
	}
	
#title-highlights {
	height:23px;
	background:url('/images/title-highlights.jpg') no-repeat;
	}	

h2#title-get-started {
	height: 41px;
	background:url('/images/title-get-started.jpg') no-repeat;
	}
	
	#title-get-started span { display: none; }
	
/* ------------------------ bottom-wrap framework ------------------------ */
#bottom-wrap {
	
	width:100%; /* fix for Safar */
	height:1px;
	clear:both
	}

/* ------------------------footer framework ------------------------ */

#footer-top {
	background: url('/images/footer-top.png') top repeat-x;
	height: 15px;
	width: 100%;
	margin-top: -5px;
	behavior: url('http://www.sugarbranchdesigns.com/clients/dosvagos/iepngfix.htc'); 
}

#footer {
	background:#000000;
	width: 100%;
	height: 240px;
	margin:0 auto;
	text-align:center;
	font-size: 1.1em;
	}
	
#footer-image {
	width: 1071px;
	background:#000000 url('/images/footer-bg.jpg') top center no-repeat;
	height: 240px;
	margin:0 auto;
	}

#footer p {
	color:#FFF;
	margin: 0 0 10px 70px;
	text-align: left;
	}

#footer a:link, #footer a:visited { color:#FFF; }
#footer a:hover, #footer a:active { color:#FFDE00; }

#footer ul { margin: 0px 10px 10px 65px; text-align: left;}
	#footer li { /* if your li's float, you can adjust border height w/ line-height */
		padding:0 5px 0 7px; /* adjusts the spacing between each li display and border-left */
		display: inline;
		border-left: 1px solid #FFF;
		font-size: 1.0em;
		}
	#footer li.first { border: none; }

/* ------------------------ MAIN NAVIGATION FRAMEWORK ------------------------ */


/* ------------------------ horizontal sprite nav ------------------------ */
#nav { 
	background:url("/images/nav.gif") no-repeat; 
	width:926px; 
	height:41px; 
	margin:0;
	padding:0; 
	position:relative;
	z-index: 1;
	}

#nav span { display: none; }

#nav li, #nav a { height:41px; display:block; } /* change height here also */

#nav li { float:left; list-style:none; _display:inline; position:relative; }

#nav-01 { width: 82px;}
#nav-02 { width: 176px; margin-left: 162px;}
#nav-03 { width: 87px;}
#nav-04 { width: 159px;}
#nav-05 { width: 117px;}
#nav-06 { width: 143px;}


/*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */
#nav-01 a:hover { background:url("/images/nav.gif")   -0px -41px no-repeat; }
#nav-02 a:hover { background:url("/images/nav.gif") -244px -41px no-repeat; }
#nav-03 a:hover { background:url("/images/nav.gif") -420px -41px no-repeat; }
#nav-04 a:hover { background:url("/images/nav.gif") -507px -41px no-repeat; }
#nav-05 a:hover { background:url("/images/nav.gif") -666px -41px no-repeat; }
#nav-06 a:hover { background:url("/images/nav.gif") -783px -41px no-repeat; }


/*-------------- OPTIONAL - Keeps the hover state on each page based on body id ------------- */
body#index #nav-01 { background:url("/images/nav.gif")  		  -0px -41px no-repeat; }
body#learn #nav-02 { background:url("/images/nav.gif") 		-244px -41px no-repeat; }
body#itinerary #nav-03 { background:url("/images/nav.gif") 	-420px -41px no-repeat; }
body#about #nav-04 { background:url("/images/nav.gif") 		-507px -41px no-repeat; }
body#news #nav-05 { background:url("/images/nav.gif") 		-666px -41px no-repeat; }
body#contact #nav-06 { background:url("/images/nav.gif")		-783px -41px no-repeat; }