@charset "utf-8";
/* CSS Document */

/**********************************************************
***************** BODY AND LINK STYLES ********************
***********************************************************/
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-style:normal;
	font-weight:normal;
	text-decoration:none;
/*	background-color:#ffbc62;
	background-image:url(images/gradients/gradient-sand-V800.png);*/
	background-color:#ff6600;
	background-image:url(images/gradients/gradient-yellow-orange-V654.png);
	background-repeat:repeat-x;
	padding:0px;
	margin:0px;
	color:#993300;
}
A:link, A:visited, A:active {
	font-family:Arial, Helvetica, sans-serif;
	color:#3B1E04;
	text-decoration: none;
}

A:hover {
	font-family:Arial, Helvetica, sans-serif;
	color:#FF6600;
	text-decoration:underline;
	cursor:pointer; 
cursor:hand;
}
.nav-bottom A:hover {
	color:#FFC;
	cursor:pointer; 
cursor:hand;
}

a.cursor-link {
    cursor:pointer; 
cursor:hand;	
}

/**********************************************************
*************** FLOATING AND CLEARING *********************
***********************************************************/
.floatLeft {
	float:left;
}
.floatRight {
	float:right;
}
.clearFloat {
	clear:both;
	margin:0px;
	padding:0px;
}
.clearLeftFloat {
	clear:left;
	margin:0px;
	padding:0px;
}
.clearRightFloat {
	clear:right;
	margin:0px;
	padding:0px;
}


/**********************************************************
******************** ELEMENTS STYLES **********************
***********************************************************/
#header, #mainContentArea, #subContentArea, #footer, #banner1, #subscribeFooter {
	width:750px;
	margin:auto;
}
#banner1 {
	background-color:#FFFFCC;
	height:100px;
	padding:0px;
	margin:0px;
}
#nav1, #nav2 {
	padding:0px;
	margin:0px;
	text-align:center;
}
#nav1 a, #nav2 a {
	font-size:14px;
	font-family:"Trebuchet MS", Helvetica, sans-serif, Arial;
}
#nav1 {
	background-image:url(images/gradients/gradient-yellow-orange-V30.png);
	background-repeat:repeat-x;
	height:30px;
}
#nav2 {
	background-image:url(images/gradients/gradient-orange-dark-V30.png);
	background-repeat:repeat-x;
	height:30px;
}
ul.nav {
	padding:5px 0px 0px 0px;
	margin:0px;
}
ul.nav-test {
	padding:0px 0px 0px 0px;
	margin:0px;
}
p {
	margin:10px;
}

#nav1 li, #nav2 li {
	display:inline;
	list-style-type:none;
	margin:0px;
	padding:0px 20px 0px 0px;
}
#nav1 img, #nav2 img {
	border:0px;
}
#banner2, #mainContentArea {
	background-color:#F7F0DE;
}
#banner2 {
	background-image:url(images/banner-bg-palms.png);
	background-position:top;
	background-repeat:no-repeat;
	min-height:80px;
}
.columnBlock { 
	padding:0px;
	margin-bottom:20px;
}
.columnBlock p {
	line-height:17px;
	margin:0px 0px 15px 0px;
	padding:0px;
	text-indent:10pt;
}
.columnBlock p.featuredExp {
	font-size:11px;
	line-height:15px;
	padding:0px;
}
.columnBlockWide {
	padding:20px;
}
.columnBlockWide-1 {
	background-color:#F7F0DE;
}
.columnBlockWide-2 {
	background-color:#FFDA50;
}
.columnBlockWide p {
	margin:0px 0px 10px 0px;
	padding:0px;
}

.columnBlockWide img {
	margin:0px 0px 0px 10px;
}
.columnBlock h1, .columnBlock h2 {
	color:#3B1E04;
	margin:0px;
	padding:0px;
}
h1 {
	font-size:26px;
}
h2 {
	font-size:20px;
}
h3 {
	font-size:16px;
}

/* ===== H1 and H1 imitation pair ===== */
h1.imitation, span.imitation {
	color:#3B1E04;
	font-family:Arial, Helvetica, sans-serif;
	font-size:26px;
	font-weight:bold;
	margin:0px;
	display:inline;
}
/* ===== /H1 and H1 imitation pair ===== */

.mainContentArea h1, .mainContentArea h2 {
	margin-left:0px;
	padding-left:0px;
	color:#3B1E04;
}
/* often called a shelf */




/**********************************************************
********** MAIN CONTENT AREA STYLES & TEMPLATES ***********
***********************************************************/
#mainContentArea {
	min-height:650px;
	height:100%;
	position:relative;
}

/* DEFAULT MCA COLUMN BLOCK - Used when MCA has 0px side padding but you need indiv. elements to have padding. Example, if we have an image stretching the entire width of the MCA, then MCA can't have padding, duh. But we still need other elements to have padding.*/
#mainContentArea.default .columnBlock {
	padding:0px 30px;
}

/* BLANK MAIN CONTENT AREA LAYOUT */
.template-blank #mainContentArea {
	width:690px;
	padding:0px 30px 0px 30px;
	/*690 + 30 + 30 = 750 */
}

/* 40-60 TWO-COLUMN LAYOUT */
.template-4060 #mainContentArea {
	padding:0px 20px 0px 20px;
	width:710px;
}

.template-4060 #column40 {
	width:300px;
	float:left;
}
.template-4060 .spacer {
	width:20px;
	padding:0px;
	margin:0px;
	float:left;
}
.template-4060 #column60 {
	width:380px;
	float:left;
}
/* LEFT COLUMN LAYOUT */
#leftColumn-Column {
	background-color:#FFA62D;
	margin-top:26px;
	min-height:277px;
	width:210px;
}
#leftColumn-Content {
	width:520px;
	padding:0px 10px 0px 10px;
}

#map-area {
	background-color:#F7F0DE;
	margin:auto;
	padding:30px;
	text-align:center;
}

/* EMPTY LAYOUT */
body.template-empty .columnBlockWide {
	margin:0px 30px 0px 30px;
}



/**********************************************************
**************** UPCOMING EVENTS SIDEBAR ******************
********************* AND DRINKS SIDEBAR ******************
***********************************************************/
#events, #drinks {
	background-color:#FFA62D;
	margin:0px 0px 0px 0px;
	padding:10px 0px 0px 5px;
	height:100%;
	text-align:center;
}
#drinks {
	background-color:#FFA62D;
	margin:0px 0px 0px 0px;
	padding:10px 0px 0px 5px;
	height:100%;
	text-align:center;
}
.eventName a:link, .eventName a:visited, .eventName a:active,
.drinkName a:link, .drinkName a:visited, .drinkName a:active {color:#990000; font-weight:bold;}
.eventName a:hover, .drinkName a:hover {color:#FF6600; font-weight:bold;}
.event, .drink {
	min-height:35px;
	margin:0px 5px 1px 5px;
	padding:5px 0px 15px 0px;
	color:#503500;
	font-family:Tahoma, Geneva, sans-serif;
}
.eventName, .drinkName {
	font-size:15px;
}
.eventDate, .drinkBlurp {
	font-size:14px;
	font-weight:bold;
}





/**********************************************************
******************* FLASHBLOCK STYLES **********************
***********************************************************/
.flashBlock {
	background-color:#E6BA5C;
	color:#000000;
	float:left;
	font-family:Tahoma, Geneva, sans-serif;
	height:126px;
	width:171px;
	margin-right:1px;
	margin-top:1px;
}
.flashBlock-1 {border-bottom:6px solid #ce9413;}
.flashBlock-2 {border-bottom:6px solid #d87114;}
.flashBlock-3 {border-bottom:6px solid #ff6701;}
.flashBlock-4 {border-bottom:6px solid #995000;}
.flashBlock-last {
	margin-right:0px;
}
.flashBlock-inner {
	font-family:Tahoma, Geneva, sans-serif;
	height:109px;
	width:140px;
	margin:10px 15px 7px 16px;
	text-align:center;
	vertical-align:top;
}
.flashBlock-inner img {
	border:none;
	height:50px;
	width:140px;
	margin-bottom:4px;
	padding:0px;
}
.flashBlock-inner h4 {
	font-size:13px;
	margin:0px;
	padding:0px;
}
.flashBlock-inner span.blurp {
	font-size:11px;
	line-height:13px;
}
.flashBlock a:link, .flashBlock a:visited, .flashBlock a:active, .flashBlock a:hover {
	font-family:Tahoma, Geneva, sans-serif;
	font-size:13px;
	color:#3B1E04;
}
/********** virtualTour MODIFICATIONS **********/
.tourBlock {
	margin-left:33px;
}
.virtualTour {
	height:151px;
	width:208px;
}
.virtualTour .flashBlock-inner {
	width:175px;
	height:134px;
}
.virtualTour img {
	border:1px solid #000000;
	height:75px;
	width:175px;
}
/********** virtualTourTWO MODIFICATIONS **********/
.virtualTour2 {
	float:left;
	height:60px;
	width:120px;
	margin:0px 18px 20px 0px;
	padding:0px;
}
.virtualTour2 .flashBlock-inner {
	height:60px;
	width:120px;
	padding:0px;
}
.virtualTour2 img {
	border:0px solid #000000;
	height:60px;
	width:120px;
	margin:0px;
}




/**********************************************************
******************* GRIDBLOCK STYLES **********************
***********************************************************/
/* Old gridBlock width:145px; */
.gridBlock {
	width:165px;
	min-height:120px;
}
.gridBlockFirst {
	margin:5px 9px 10px 2px;
}
.gridBlockMiddle {
	margin:5px 9px 10px 0px;
}
.gridBlockLast {
	margin:5px 0px 10px 0px;
}
.gridBlock a:link, .gridBlock a:visited, .gridBlock a:active, .gridBlock a:hover {
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}
.gridBlock h3 {
	color:#3B1E04;
	margin:0px 0px 0px 0px;
}
.gridBlock p {
	margin:2px 0px 2px 0px;
	text-indent:0px;
}
.gridBlock img {
	border:none;
}






/**********************************************************
******************* VISITOR GUIDE BLOCK *******************
***********************************************************/
.visitorGuideBlock {
	min-height:150px;
	margin:6px auto 25px auto;
	border:6px solid #ce9413;
}
.visitorGuideBlock .header {
	background-color:#ce9413;
	color:#FFF;
	height:20px;
	font-size:18px;
	font-weight:bold;
	padding:3px 3px 6px 0px;
}
.visitorGuideBlock.vgb2 {border:6px solid #d87114;}
.visitorGuideBlock.vgb2 .header {background-color:#d87114;}
.visitorGuideBlock.vgb3 {border:6px solid #ff6701;}
.visitorGuideBlock.vgb3 .header {background-color:#ff6701;}
.visitorGuideBlock.vgb4 {border:6px solid #995000;}
.visitorGuideBlock.vgb4 .header {background-color:#995000;}

.visitorGuideBlock .image {
	width:180px;
	height:141px;
	padding:0px;
	margin:0px;
	float:left;
	background-image:url(http://www.cssnz.org/flower.jpg);
}
.visitorGuideBlock #vgb_things-to-see {background-image:url(images/visitor-guide/things-to-see.jpg);}
.visitorGuideBlock #vgb_things-to-do {background-image:url(images/visitor-guide/things-to-do.jpg);}
.visitorGuideBlock #vgb_restaurants-and-bars {background-image:url(images/visitor-guide/restaurants-and-bars.jpg);}
.visitorGuideBlock #vgb_palm-canyon-drive {background-image:url(images/visitor-guide/palm-canyon-drive.jpg);}
.visitorGuideBlock #vgb_itinerary {background-image:url(images/visitor-guide/itinerary.jpg);}
.visitorGuideBlock #vgb_events {background-image:url(images/visitor-guide/events.jpg);}

.visitorGuideBlock .textArea {
	padding:10px;
	float:left;
	max-height:121px;
	font-size:13px;
}
.visitorGuideBlock .textArea li {
	margin-left:20px;
	display:list-item;
}
.visitorGuideBlock.textAreaSideBar {
	min-height:0px;
	margin:0px 0px 1px 0px;
	padding:0px;
}
.visitorGuideBlock .textAreaSideBar {
	margin:10px;
	font-size:13px;
	width:210px;
}
.visitorGuideBlock .textAreaSideBar li {
	margin-left:9px;
}
/*
#ce9413
#d87114
#ff6701
#995000
*/

/**********************************************************
******************* CONTACT US TABLE **********************
***********************************************************/
#contactTable {
}
#contactTable td {
	text-align:left;
	vertical-align:top;
}
#contactTable .left {
}
#contactTable .right {
}






/**********************************************************
******************* FEEDBACK TABLE **********************
***********************************************************/
#feedback-table {
	width:334px;
}
#feedback-table .header {
	text-align:right;
	font-weight:bold;
}
p.header {
	font-weight:bold;
}




/**********************************************************
******************** FOOTER STYLES ************************
***********************************************************/
#footerSpacer {
	height:30px;
	width:750px;
	margin:auto;
/*	background-image:url(images/bg-twoTone.gif);*/
	background-position:0px 0px;
	background-repeat:repeat-y;
	background-color:#F7F0DE;
}
#footer {
	background-image:url(images/gradients/gradient-cream-trans-V60.png);
	background-repeat:repeat-x;
	height:60px;
	margin-bottom:20px;
}
body.template-leftColumn {
	margin-bottom:20px;
}
#innerFooter {
	font-size:10px;
	text-align:center;
	height:60px;
	padding:0px;
	margin:0px;"
}
.template-leftColumn #innerFooter {
/*	background-image:url(images/gradients/gradient-events-bottom.png);*/
	background-position:left;
	background-repeat:no-repeat;
}
.template-blank #innerFooter {
	background-image:url();
}




p.featuredExp {
	font-size:11px !important;
	line-height:15px;
	text-indent:0pt;
	padding:0px 0px 3px 0px;
	margin:0px;
}
p.noindent {
	text-indent:0pt;
}
div.noindent p {
	text-indent:0pt;
}
.backToTop {
	font-style:italic;
	text-align:right;
	margin:6px 0px 6px 0px;
}
ul.directions li {
	border-bottom:1px solid #999;
	padding:5px 0px;
	display:block;
}
ul.directions li img {
	margin-right:10px;
}
img.mapbullet {
	border:0px;
	width:10px;
	height:10px;
	margin-right:7px;
}
div.directions {
	padding:10px;
}


/**********************************************************
******************** QUICK BOX STYLES *********************
***********************************************************/
.quickLinkBox {
	background-color:#FBE798;
	border:1px dashed #FF6600;
	margin:10px;
}
.quickLinkBox ul {
	list-style:none;
	list-style-type:none;
}
.quickLinkBox li {
	padding:1px 1px 1px 5px;
	margin:2px;
	border-left:1px dotted #FF6600;
}
a.listLevel2:link, a.listLevel2:visited, a.listLevel2:active {color:#990000;}
a.listLevel2:hover {color:#FF6600;}




/*It's wasteful, confusing, and inefficient to make specific styles for each instance of an element in a website because it needs to be just a little bit different from the one right next to it. Those kinds of problems can be solved by 1)Proper planning ahead of time, and 2)Using modular CSS styles*/

/**********************************************************
*************** LOCATION & POSITIONING ********************
***********************************************************/
.moveRight5 {margin-left:5px;}
.moveLeft5 {margin-right:5px;}
.moveDown5 {margin-top:5px;}
.moveUp5 {margin-bottom:5px;}

.moveRight10 {margin-left:10px;}
.moveLeft10 {margin-right:10px;}
.moveDown10 {margin-top:10px;}
.moveUp10 {margin-bottom:10px;}

.padding5 {padding:5px;}
.padding10 {padding:10px;}
.paddingSide5 {padding:0px 5px 0px 5px;}
.paddingSide10 {padding:0px 10px 0px 10px;}

.pushdown5 {padding-bottom:5px;}
.pushdown10 {padding-bottom:10px;}
.pushdown20 {padding-bottom:20px;}
.pushRight5 {margin-right:5px;}

.alignLeft {text-align:left;}
.alignRight {text-align:right;}






/**********************************************************
************* FONT SIZING AND STYLING *********************
***********************************************************/
/* ==== FONT SIZING ==== */
.tinyFont {font-size:9px;}
.smallFont {font-size:10px;}
.normalFont {font-size:12px;}
h3, .bigFont {font-size:16px;}
h2, .biggerFont {font-size:20px;}
h1, .hugeFont {font-size:26px;}
h1, h2, h3, h4, h5, h6 {
	padding:0px;
	margin:0px 10px 10px 0px;
	color:#3B1E04;
/* Do NOT add top margins to the H's, or it will mess up the spacing between #header and #mainContentArea */
}

/* FONT STYLING */
.strong, .author{
	font-weight:bold;
}
.italic, .quote, p.italic, p.quote, span.italic, span.quote {
	font-style:italic;
}
q:before, q:after {
    content: "";
	font-style:italic;
}


/* FONT COLORING */
.black, p.black, p .black, span.black, span .black {color:#000;}
.gray {color:#999;}
.grayDark {color:#333;}
.grayLight {color:#CCC;}
.white {color:#FFF;}
.red {color:#F00;}
.redBlood {color:#900;}
.orange {color:#F60;}
.cirtus {color:#F90;}
.blueStorm {color:#369;}
.blueNavy {color:#009;}





/* DIVIDER */
/* .divider goes on any element needing a divider, the .divider[Direction] depends on where you want the divider to appear. Makes it easy to add an ad-hoc divider to a single element than creating an entirely new class */
.divider {border:solid #CCC;}
.dividerTop {border-top:1px; padding-top:5px;}
.dividerRight {border-right:1px; padding-right:5px;}
.dividerBottom {border-bottom:1px; padding-bottom:5px;}
.dividerLeft {border-left:1px; padding-left:5px;}



.cursor-link {
	cursor: hand;
}


.tollFreeNumber {
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#993300;
	font-weight:bold;
	font-style:italic;
}

textarea#betterstaynexttime {
	border:1px solid #cccccc;
	padding:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	background-image: url(images/text-appear-betterstay.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}
textarea#comments {
	border:1px solid #cccccc;
	padding:5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	background-image: url(images/text-appear-generalcomments.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}