@import url(../StyleSheet.css);

body {
    background: #cce7fc url(Images/Main-Body-Sync.jpg) 0 -40px repeat-x;
    text-align: center;
}   
.center { text-align: center; }
.printButtons { text-align: right; }

/*==== Canvas ================================================================*/
#canvas, #container {
    background-repeat: no-repeat;
    background-position: top center;
}
#container {
    height: 720px;
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#canvas, #container, #canvas.theme-fall, #canvas.theme-fall #container { background-image: url(Images/Canvas-Bg-Fall.jpg); }
#canvas.theme-spring, #canvas.theme-spring #container { background-image: url(Images/Canvas-Bg-Spring.jpg); }
#canvas.theme-summer, #canvas.theme-summer #container { background-image: url(Images/Canvas-Bg-Summer.jpg); }
#canvas.theme-winter, #canvas.theme-winter #container { background-image: url(Images/Canvas-Bg-Winter.jpg); }

/*==== Header ================================================================*/
#header { position: relative; height: 139px; }
#headerLogo { margin: 0; padding: 0; }
#headerLogo a {
    position: absolute;
    top: 0px;
    left: -70px;
    display: block; 
    width: 360px;
    height: 120px;
    overflow: hidden;
    text-indent: -9999px;
}

/*==== Page Body =============================================================*/
#wrapper { position: relative; width: 960px; height: 510px; }
#body-background {
    background: url(Images/Body-Bg.png) 0 0 no-repeat;
    width: 928px;
    height: 346px;
    position: absolute;
    top: 0;
    left: 35px;
    z-index: 5;
}
#body {
    overflow: hidden;
    position: relative;
    z-index: 6;
    position: absolute;
    top: 0px;
    left: 128px;
    width: 815px;
    height: 320px;
    padding: 15px 20px 0 0;
}
#body.loading { background: url(Images/loadingAnimation.gif) center center no-repeat; }
#sponsor {
    position: absolute;
    top: 14px;
    left: -60px;
    z-index: 7;
}
#visitTravel {
    position: absolute;
    top: 324px;
    left: -32px;
    z-index: 7;
}
#winContest {
    position: absolute;
    top: -25px;
    right: 30px;
    z-index: 8;
}
#winContest a {
    display: block;
    color: #fff;
}
.splashPage #body-background, .splashPage #winContest { display:none; }

/*==== Breadcrumb Bar ========================================================*/
#breadcrumbBar {
    position: absolute;
    top: 1px;
    left: 307px;
    background: url(Images/Breadcrumb-Bg.gif) top left no-repeat;
    width: 652px;
    height: 17px;
    padding: 5px 10px;
}
#breadcrumbBar .currentTrip {
    float: left;
    width: 500px;
    font-family: "Arial Narrow", Arial;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    text-transform: uppercase;
    padding-top: 1px;
}
#breadcrumbBar a.selectTrip {
    background: url(Images/Select-Trip-Button.gif) top left no-repeat;
    width: 145px;
    height: 17px;
    display: block;
    float: right;
    overflow: hidden;
    text-indent: -9999px;
}

/*==== Footer ================================================================*/
#footer { text-align: right; }
#footer, #footer a { color: #00346e; font-size: 11px; }
#footer ul, #footer li { margin: 0; padding: 0; list-style-type: none; display: inline; }
#footer p.copyright { display: inline; }
#footer ul.links li { margin-left: 15px; }
#footer p.kttLogo { float: left; position: relative; top: -15px; }

/*==== Main Navigation =======================================================*/
#mainNav {
    position: absolute;
    top: 30px;
    left: 310px;
    background: url(Images/Nav-Bg.gif) top left no-repeat;
    width: 653px;
    height: 58px;
    padding: 10px 8px;
    z-index: 10;
}
#mainNav ul, #mainNav ul li { margin: 0; padding: 0; list-style-type:none; }
#mainNav ul li { float: left; height: 61px; background-repeat: no-repeat; background-position: 0 -122px; }
#mainNav ul li.active a { font-weight: bold; }
#mainNav ul li a { 
    display: block;
    height: 61px;
    overflow: hidden;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: top left;
}
#mainNav ul li a:hover, #mainNav ul li a.active { background-position: 0 -61px; }
#mainNav ul li.page-itenerary a, #mainNav ul li.page-itenerary { width: 94px; background-image: url(Images/MainNav/Itenerary.jpg); }
#mainNav ul li.page-coupons a, #mainNav ul li.page-coupons     { width: 93px; background-image: url(Images/MainNav/Coupons.jpg); }
#mainNav ul li.page-pack a, #mainNav ul li.page-pack           { width: 98px; background-image: url(Images/MainNav/WhatToPack.jpg); }
#mainNav ul li.page-navigate a, #mainNav ul li.page-navigate   { width: 95px; background-image: url(Images/MainNav/Navigate.jpg); }
#mainNav ul li.page-share a, #mainNav ul li.page-share         { width: 91px; background-image: url(Images/MainNav/Share.jpg); }
#mainNav ul li.page-invite a, #mainNav ul li.page-invite       { width: 91px; background-image: url(Images/MainNav/Invite.jpg); }
#mainNav ul li.page-aaa a, #mainNav ul li.page-aaa             { width: 89px; background-image: url(Images/MainNav/AAA.jpg); }
#mainNav a.clickKey {
    display: block;
    background: url(Images/Key.gif) top left no-repeat;
    width: 138px;
    height: 242px;
    position: absolute;
    top: -25px;
    right: 30px;
    overflow: hidden;
    text-indent: -9999px;
}
#mainNav p.welcomeText { padding: 18px 0 0 15px; }

/*==== Start Page ============================================================*/
.startPage {
    text-align: center;
    padding: 50px 40px 0;
    font-size: 15px;
    line-height: 18px;
}
.startPage h1 { 
    font-size: 35px; color: #427eb0; line-height: 38px; 
    font-family: "Arial Narrow", Arial;
    margin: 0 0 15px;
}

/*==== Round Bordered Content ================================================*/
.contentWithBorder, .contentWithBorder .bottomBorder {
    background: url(Images/Rounded-Corners-345.gif) top left no-repeat;    
}
.contentWithBorder { padding: 15px 15px 5px; margin-bottom: 20px; width: 315px; position: relative;  }
.contentWithBorder h3 { margin: 0 0 4px; }
.contentWithBorder .bottomBorder {
    background-position: bottom left;
    height: 15px;
    width: 345px;
    position: absolute;
    bottom: -15px;
    left: 0;
}
.contentWithBorder h3 { text-align: center; }

/*==== Itinerary Columns =====================================================*/
.itineraryColumns .col { width: 350px; float: left; margin-right: 30px; }
.itineraryColumns .mapCol { width: 415px; margin: 0; }

/*==== Itinerary List ========================================================*/
table.itineraryList { width: 100%; margin: 0; border-collapse: collapse; }
table.itineraryList td { 
    width: 50%; vertical-align: top; padding: 5px 5px 5px 0; 
    font-family: "Arial Narrow", Arial;
    font-size: 14px;
    text-align: center;
}
table.itineraryList td .description { display: none; }

/*==== Standard button =======================================================*/
a.button {
    display: -mox-inline-box;
    display: inline-block;
    width: 145px;
    height: 17px;
    padding: 3px 0 0;
    background: url(Images/Button-Bg.gif) top left no-repeat;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    font-family: "Arial Narrow", Arial;
    text-align: center;
    margin: 0 0 5px;
}

/*==== Share Links =============================================================*/
table.shareLinks {
    border-top: 3px solid #257cc4;
    border-bottom: 3px solid #257cc4;
    border-collapse: collapse;
    width: 100%;
}
table.shareLinks td {
    padding: 10px 0;
    width: 20%;
    text-align: center;
    font-family: "Arial Narrow", Arial;
    font-size: 13px;
    vertical-align: top;
}

/*==== Navigation ==================================================*/
.navigateColumns .contentCol {
    width: 350px;
    float: left;
    margin-right: 20px;
    position: relative;
}
.navigateColumns .contentCol .printButtons { position: absolute; bottom: 0; right: 0; }
.navigateColumns .mapCol { width: 400px; float: right; }
#navigateMap { height: 250px; border: 3px solid #257cc4; }

/*==== AAA ===========================================================*/
.aaaColumns .contentCol {
    width: 390px;
    float: left;
    margin-right: 20px;
    position: relative;
}
.aaaColumns .contentCol .printButtons { float: right; margin: 10px; }
.aaaColumns .mapCol { width: 400px; float: right; }
#aaaMap { height: 220px; border: 3px solid #257cc4; margin-bottom: 10px; }

/*==== What to Pack ===========================================================*/
#whatToPackBg {
    background: url(Images/What-To-Pack-Bg.gif) top left no-repeat;
    width: 248px;
    height: 218px;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 7;
}
.whatToPack {
    position: relative;
    z-index: 8;
}
.whatToPack .content { width: 600px; }
.whatToPackButtons { position: absolute; bottom: 0; right: 15px; }
table.whatToPackTable { width: 85%; border-collapse: collapse; }
table.whatToPackTable td, table.whatToPackTable th { border-right: 3px solid #257cc4; padding: 2px 10px; }
table.whatToPackTable td { width: 25%; font-weight: bold;}
table.whatToPackTable th { color: #257cc4; text-align: left; }
table.whatToPackTable td.first, table.whatToPackTable th.first { padding-left: 0; }
table.whatToPackTable td.last, table.whatToPackTable th.last { border-right: 0; }

.PackItem {
	border-right: 3px solid #257cc4;
	float: left;
	min-width: 100px;
	height: 160px;
	padding: 2px 10px;
}
.PackItem:last-child, .PackItem.last {
	border-right: 0;
}

/*==== Itinerary Detail Page =================================================*/
.itineraryDetailPage {
	position: relative;
}

.itineraryDetailPage .itineraryNav {
    border-right: 3px solid #257cc4;
    height: 320px;
    width: 240px;
    padding: 0 0 5px 0;
    float: left;
    margin-right: 20px;
}
.itineraryDetailPage .itineraryNav h2 { color: #000; font-size: 23px; line-height: 25px; margin: 0 0 5px; }
.itineraryDetailPage .itineraryNav ul { height: 190px; overflow: auto; }
.itineraryDetailPage .itineraryNav ul, .itineraryDetailPage .itineraryNav li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.itineraryDetailPage .itineraryNav ul li { margin: 0 0 3px; position: relative; }
.itineraryDetailPage .itineraryNav ul li a { color: #000; text-decoration: none; }
.itineraryDetailPage .itineraryNav ul li a:hover { text-decoration: underline; }
.itineraryDetailPage .itineraryNav ul li.selected a {
    font-weight: bold;
    color: #257cc4;
}
.itineraryDetailPage .itineraryNav ul li.selected {
    padding-left: 10px;
    background: url(Images/Selected-Arrow.gif) -2px 1px no-repeat;
    zoom: 1;
}
.itineraryDetailPage .itineraryNav ul li.selected .arrow {
    display: block;
    position: absolute;
    top: -15px;
    right: 0;
    width: 20px;
    height: 39px;
    background: url(Images/Selected-Arrow.gif) top left no-repeat;
}
.itineraryDetailPage .itineraryContent {
    float: left;
    width: 540px;
}
.itineraryDetailPage .itineraryFooter {
	border-top: 3px solid #257cc4;
	bottom: -60px;
	position: absolute;
	height: 60px;
	width: 100%;
    clear: both;
}
table.itineraryPlaces { width: 85%; border-collapse: collapse; }
table.itineraryPlaces th { text-align: left; }

/*==== Coupons ===============================================================*/
div.coupons {
	border-right: 3px solid #257cc4;
	float: left;
	height: 75px;
	overflow: hidden;
	padding: 0 10px 5px;
	width: 30%;
}
div.couponsLast { border-right: 0; }
div.coupons img {
	float: left;
	padding-right: 10px;
}

/*==== Music Player ==========================================================*/
#musicPlayerContainer {
    width: 509px;
    height: 127px;
    position: absolute;
    bottom: 13px;
    right: -12px;
}
#musicPlayer {
    background: url(Images/TestPlayer.gif) top left no-repeat;
    width: 385px;
    height: 113px;
}
#musicPlayerSwf {
    height: 100px;
    padding: 14px 0 0 172px;
    width: 210px;
}
#playlistButton { position: absolute; top: 6px; right: 4px; }
#playlistButton a {
    display: block;
    width: 121px;
    height: 100px;
    background: url(Images/Playlist-Button.gif) top left no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}
#playlistButton a:hover { background-position: 0 -100px; }
/*==== Forms =================================================================*/
fieldset {
    border-top: 3px solid #257cc4;
    border-bottom: 3px solid #257cc4;
    padding: 10px 0 0;
}
fieldset label { font-weight: bold; }
fieldset table.formTable { margin-bottom: 4px; }
fieldset table.formTable td { padding-right: 25px; }
fieldset table.formTable td.field { padding: 0 25px 10px 0; }
fieldset .button { margin: 0; }
fieldset .nextStepTitle { font-family: "Arial Narrow", Arial; font-size: 24px; font-weight: bold; }

table.formTable .field { position: relative; }
table.formTable label.inField { position: absolute; top: 2px; left: 2px; cursor: text; }
.contestPage table.formTable { width: 380px; float: left; }
#contestDetails { width: 400px; height: 150px; border: 2px solid #2b80d6; padding: 10px; float: right; background: #fff; }
.contestPage .contestList { clear: both; border-top: 3px solid #2b80d6; }
.contestPage .contestList h3 { margin: 0; }
.contestPage .contestList table { width: 100%; }
.contestPage .contestList table td { width: 25%; }
.contestPage .details { display: none; }

.error {color: #FF0000;}
.errorPane {color: #FF0000;}

/*==== jQuery Scroller =====================================================================*/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #E0E8EF;
}
.jScrollPaneDrag {
	position: absolute;
	cursor: pointer;
	overflow: hidden;
    background: #67A0CF;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(Images/Scroll-Up.gif) top left no-repeat;
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(Images/Scroll-Down.gif) top left no-repeat;
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}