/* CSS Document */

/* ==============================================
 start GENERIC
 =============================================== */
html, body {
background: #e2ddc6 url(../images/body-bg.gif) repeat-x top left; 
font-family:  Helvetica, Arial, Verdana, sans-serif;
font-size: 87%; line-height: 1.5em;  
color: #666; margin: 0; padding: 0; } 

.clear { clear: both; font-size: 0px; line-height: 0; height: 0; padding: 0; margin: 0;}
.hide {display: none; font-size: 0; line-height: 0; height: 0; padding: 0; margin: 0;}

img {border: 0; margin: 0; padding: 0;}

a img {border: 0;}

a:link {color: #8a0032; text-decoration: underline; }
a:visited {color: #ac7415;}
a:hover {color:#333; text-decoration: underline;}

p {margin: 0; padding: 0 0 1em 0;}


h1 {font-size: 140%; margin: 0; padding: 10px 0;}
h2 {margin: 0; padding: 0 0 10px 0; font-size: 130%; font-weight: bold; color: #8a0032;}
h3 {margin: 0; padding: 0 0 10px 0; font-size: 100%; font-weight: bold; color: #8a0032;}

/* ==============================================
 start LAYOUT of FRAMEWORK
 =============================================== */

#mainnav,
#corp-nav,
#subnav {display:none; }
#breadcrumbs { margin: 0; padding: 10px 0;}
#print-this-page {display: none;}
#mainbody {width: 720px; padding: 0 0 15px 0; margin: 0; clear: both;}
#footer { padding: 15px 23px 0 0; background: url(../images/bot-curves.gif) no-repeat top left; text-align: right;}


/* ==============================================
 start HEADER
 =============================================== */

#header {padding: 0 0 10px 0;}
#header .corp-id .logo {font-size: 170%; padding: 0 0 10px 0; font-weight: bold;}
#header p {margin: 0; padding: 0;}
#header .contact {padding: 5px 0;}
#header .contact .tel-number { display: inline; float: left; margin-right: 5px;}
#header .corp-id p span {margin-right: 10px;}



/* ==============================================
 start MAINBODY
 =============================================== */


/* ---------------- homepage ------------------ */
body#homepage #flash-main,
body#homepage #breadcrumbs,
body#homepage #print-this-page,
body#homepage #subnav {display: none;}

body#homepage #mainbody .intro {padding: 20px 0; margin: 0; width: 90%;}
body#homepage #mainbody .area1, 
body#homepage #mainbody .area2,
body#homepage #mainbody .area3 {float: left;}
body#homepage #mainbody .area1 {width: 190px; padding: 0 40px 0 0;} 
body#homepage #mainbody .area2 {width: 195px; padding: 0 40px 0 0;} 
body#homepage #mainbody .area3 {width: 202px; padding: 0;} 



/* ---------------- temp-a e.g. country overview page ------------------ */


body#temp-a #flash-main,
body#temp-a #subnav,
body#temp-a .area1, 
body#temp-a .area3 {display: none;}

body#temp-a .intro {padding: 10px 0; margin: 0;} 
body#temp-a .box1, body#temp-a .box2 {padding: 0; margin: 0 0 15px 0; width: 100%;}
.box1 .top, 
.box1 .bot,
.box2 .top, 
.box2 .bot  {display: none; }


body#temp-a .box1 .mid, 
body#temp-a .box2 .mid {padding: 0; margin: 0;}


h2.tour-name {float: left;}
.tour-price {float: right; padding-right: 10px; }
.tour-info {float: left; width: 450px;}
body#temp-a .box1-new .tour-info,
body#temp-a .box2-new .tour-info {width: 450px;}
.tour-info p {padding-bottom: 5px;}
.tour-map {float: right; width: 180px;}
.tour-info ul {list-style: none; margin: 0; padding: 0; height: 20px;}
.tour-info ul li { float: left; padding-right: 5px;}
.tour-info ul li a {padding-right: 3px;}

body#temp-a p.quote {display: none;}
body#temp-a .features .summary {padding-bottom: 10px;}
body#temp-a .features .summary img {float: right; padding: 0 0 10px 0; margin-top: -1em;}
body#temp-a .features p {width: 500px;}

/* ---------------- temp-b e.g. dates and availability ------------------ */


body#temp-b .area1 {display: none;}
body#temp-b .area2 {float: left; width: 420px; padding: 20px 0 0 0;}
body#temp-b .area3 {width: 294px; float: left; padding: 0 0 0 0; }

body#temp-b .area2 .dates { padding: 0 0 10px 0; margin: 0;}
body#temp-b .area2 .legend {padding: 0; margin: 0;}

body#temp-b .dates ul {list-style: none; padding: 0; margin: 0 0 20px 0; }
body#temp-b .dates ul li { padding: 2px 0 0 0; margin: 0; height: 20px;  }
body#temp-b .dates ul li.on {background-color: #f4f4f2;}

body#temp-b .dates ul li a {width: 300px; float: left;}
body#temp-b .dates ul li span.date-a,
body#temp-b .dates ul li span.date-l,
body#temp-b .dates ul li span.date-f,
body#temp-b .legend ul li span {display: block; float: left; width: 15px; height: 15px; }

body#temp-b .legend ul {list-style: none; padding: 0; margin: 0;}
body#temp-b .legend ul li { padding: 2px 0 0 0; margin: 0; height: 22px;}
body#temp-b .legend ul li span {padding-right: 10px;}

body#temp-b .area1 .dates a:link {color: #666; text-decoration: underline;}
body#temp-b .area1 .dates a:hover {color: #9a1133; text-decoration: none;}
body#temp-b .area1 .dates a:visited {color: #ac7415; text-decoration: underline;}


body#temp-b .box1, 
body#temp-b .box2 {width: 294px; padding: 0; margin: 0 0 15px 0; }

body#temp-b .box1 .mid, 
body#temp-b .box2 .mid {padding: 0 13px 0; margin: 0;}


body#temp-b .box1 h2 {float: left; line-height: 1.2em; padding-bottom: 5px; }
body#temp-b .box1 p {float: right; padding: 0; margin: 0; line-height: 1.2em; }
body#temp-b .box1 h2.itinerary {width: 145px;}
body#temp-b .box1 ul.itinerary {clear: both; list-style: none; margin: 0; padding: 0; }

body#temp-b .box1 h2.dep-dates {width: 210px;}
body#temp-b .box1 ul.col1,
body#temp-b .box1 ul.col2 { float: left; width: 130px; list-style: none; margin: 0; padding: 0;}
body#temp-b .box1 ul.col1 {margin-right: 5px;}

body#temp-b ul.extras {margin: 0 -13px; list-style: none; padding: 0; line-height: 1.2em;}
body#temp-b ul.extras li {margin: 0; padding: 0; border: 1px solid #e1e0dd;}
body#temp-b ul.extras li a {display: block; padding: 3px 13px; margin: 0; }
body#temp-b ul.extras li a {color: #666; text-decoration: none; border-top: 1px solid #e1ded4; border-bottom: 1px solid #e1ded4;}
body#temp-b ul.extras li a:hover {color: #8a0032; background-color: #fff; border-top: 1px solid #666; border-bottom: 1px solid #666;}

body#temp-b .summary .image {float: left; width: 75px; padding-top: 5px;}
body#temp-b .summary .content {float: left; width: 320px;}
body#temp-b h2 {clear: left}
body#temp-b p.callout { padding: 10px 0; margin: 0; width: 350px;}


/* ---------------- temp-c e.g. about us ------------------ */

body#temp-c #flash-main,
body#temp-c .area1,
body#temp-c .area3 {display: none;}

body#temp-c .intro {clear: both; padding: 10px 0;}


body#temp-c .content-block  {padding: 10px 0 20px 0;}
body#temp-c .summary {float: left; padding: 0 20px 0 0;}
body#temp-c .summary .image {float: left; width: 75px; padding-top: 5px;}
body#temp-c .summary .content {float: left; width: 250px;}

/* ---------------- temp-b e.g. booking pages ------------------ */


#book-now {border: 1px solid #cecece;  margin: 0 10px 0 0;}
#book-now .steps {padding: 0 0 10px 0; margin: 0; height: 40px;}
#book-now .steps ul {list-style: none; margin: 0; padding: 0; }
#book-now .steps ul li { float:left; margin: 0;  padding:0 0 0 8px; position: relative;}

#book-now .steps ul li span {display: block;}

#book-now .content {   padding: 10px; background: #f4f4f2;}
#book-now .row {padding: 0 0 7px 0; margin: 0;}
#book-now .button {float: right; text-align: right;}
#book-now .results {padding-top: 15px;}

#book-now .steps h2 {padding-top: 10px;}




/* ==============================================
 start FORMS
 =============================================== */
form {margin: 0; padding: 0;}

/* subscribe on homepage */

form.subscribe input#email {width: 174px; height: 20px; margin: 0; padding: 0; border: 1px solid #b5ab80; background-color: #e9e8e3;}
.subscribe-btn {width: 176px; padding-top: 11px; margin: -1px 0 0 0; background: url(../images/subscribe-btn-lines.gif) no-repeat left top;}
.subscribe-btn a {display: block; width: 82px; height: 24px; padding: 1px 0 0 7px; background: url(../images/subscribe-btn.gif) no-repeat left top;color: #fff; font-size: 90%; font-weight: bold; text-decoration: none;}
.subscribe-btn a:hover {background: url(../images/subscribe-btn-hover.gif) no-repeat left top;}


/* booking form */

#book-now .row span.fieldname {display: block; float: left; width: 130px; text-align: right; margin-right: 15px;}
#book-now select#tourdate {width: 175px;}
#book-now input#nrrooms, 
#book-now input#nrtravellers {width: 40px;}


.step1-btn,
.step4-btn,
.step5-btn {width: 190px; padding: 0; margin: 0 -2px 0 0; }
.step1-btn a,
.step4-btn a,
.step5-btn a {display: block; height: 24px; padding: 1px 15px 0 0; background: url(../images/step2-btn.gif) no-repeat left top; color: #fff; font-size: 90%; font-weight: bold; text-decoration: none;}
.step1-btn a:hover,
.step4-btn a:hover,
.step5-btn a:hover {background: url(../images/step2-btn-hover.gif) no-repeat left top;}

.step2-btn,
.step3-btn {width: 220px; padding: 0; margin: 0 -2px 0 0; }
.step2-btn a,
.step3-btn a {display: block; height: 24px; padding: 1px 15px 0 0; background: url(../images/step3-btn.gif) no-repeat left top; color: #fff; font-size: 90%; font-weight: bold; text-decoration: none;}
.step2-btn a:hover,
.step3-btn a:hover {background: url(../images/step3-btn-hover.gif) no-repeat left top;}


/* ==============================================
 start TYPOGRAPHY
 =============================================== */

.box1, .box2 {color: #333;}

body#temp-b .box1, 
body#temp-b .box1 h2 {color: #666;}

body#homepage h2,
body#temp-a .summary h2,
body#temp-b h2,
body#temp-d h2 { font-size: 100%; font-weight: bold;}


#print-this-page,
#footer,
#header .contact p,
.tour-info ul,
body#temp-b .box1,
#book-now input,
#book-now select,
#book-now .steps { font-size: 90%;}
#book-now .steps span {font-size: 110%; font-weight: bold; color: #8a0032;}


#book-now span.fieldname {font-size: 90%; font-weight: bold;}



#header .corp-id p {font-weight: bold; font-style: italic; color: #262626;}

#breadcrumbs,
form.subscribe label,
.box1-new .new,
.box2-new .new {font-weight: bold; font-size: 90%; font-family: Verdana, Arial, Helvetica, sans-serif;}

#breadcrumbs a {color: #666; text-decoration: none; font-weight: normal;}

#print-this-page a,
body#temp-b .box1 a {color: #666; text-decoration: underline; font-weight: normal;}

#mainnav a,
#subnav a {color:#fff; font-weight: bold; }

#mainnav a:hover, 
#mainnav a.selected,
#subnav a:hover, 
#subnav a.selected,
ul#mainnav-list li:hover a, 
ul#mainnav-list li.dropmenu a,
#print-this-page a:hover,
body#temp-b .box1 a:hover,
.tour-price {color: #8a0032;}

.tour-price,
body#temp-b p.callout {font-size: 130%; font-weight: normal; }

.tour-price span,
body#temp-b ul.extras {font-weight: bold;}

ul#mainnav-list ul a:link, 
ul#mainnav-list ul a:visited {color: #333; font-weight: normal; font-size: 90%;}
ul#mainnav-list ul a:hover {color: #8a0032; font-weight: bold;}

#corp-nav a {color: #666; font-weight: bold; text-decoration: none;}

#footer a {color: #666; text-decoration: none;}

#footer .sitback a {color: #999;}

#footer .sitback a:hover,
h2.tour-name a:link,
.tour-price a:link,
body#temp-a .features .summary h2 a:link, 
body#temp-a .features .summary h2 a:visited,
h2.tour-name a:visited,
.tour-price a:visited {text-decoration: none;}

#corp-nav a:hover, 
#footer a:hover,
#breadcrumbs a:hover,
h2.tour-name a:hover,
.tour-price a:hover,
body#temp-a .features .summary h2 a:hover { text-decoration: underline;}


/* ==============================================
 start QUOTES
 =============================================== */
blockquote.testimonial { background: url(../images/openquote.gif) left top no-repeat; margin: 20px 0; padding: 0;}
body#temp-a .features blockquote.testimonial { width: 550px;}
body#temp-b blockquote.testimonial { width: 480px;}
blockquote.testimonial .quote { padding: 0 25px; background: url(../images/closedquote.gif) right bottom no-repeat; font-size: 130%;}
blockquote.testimonial .name {font-weight: bold; font-size: 85%; color: #8a0032; font-family: Helvetica; padding-left: 25px; }