/* CSS Document */
/* GRAND HARBOR RESORT */
html
{
	overflow-x: auto; /* fixes MSIE scrollbar bug DO NOT REMOVE, has no effect in Mozilla, or Opera */
	height: 100%;
}

body
{
	background: url(../images/bg.jpg) no-repeat scroll 50% 0pt;
	background-color: #2f1146;
	text-align: center;
	line-height: 1.6em;
	margin: 0;
	padding: 0;
}



/* GLOBAL DEFAULTS
========================================================================*/
/*body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,tr,th,td,embed,object{margin:0;padding:0;}*/ 

fieldset,img {border:0; }
q:before,q:after{content:'';}

a:link, a:active, a:visited  {color: #427e05; text-decoration:underline;font-weight:normal;}
a:hover {color: #4d9a01; text-decoration:underline;}

a:focus { outline: none;}


* { behavior: url(css/iepngfix.htc); }


p, td, div
{	
	font-size: 11px;
	line-height: 16px;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	color: #555;	
}


ul
{
	margin: 5px 0 15px 5px;
	padding: 0px 0 0 10px;
	list-style-type: none;
	display: block;
}

.left {float:left; margin-right:10px;} 


/* UNORDERED LISTS
========================================*/

#content ul li  /* basic lists in content area */
{ 
	background: url(../images/bullet.gif) no-repeat 0 4px;
	padding-left: 1em;
	position:relative
}



ul.double { float: left; width: 390px; margin: 10px 0 20px 15px; padding: 0; list-style: none;display:block;}
ul.double li { float: left; width: 180px; margin: 0; padding: 0 0 0 12px; }

ul.doublewide { float: left; width: 680px; margin: 10px 0 20px 15px; padding: 0; list-style: none;}
ul.doublewide li { float: left; width: 305px; margin: 0; padding: 0 15px 0px 15px; }




#content ul.specialbox /* used to display menus on dining page */
{
	border-top: 1px solid #dddddd;
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: left;
}

#content ul.specialbox li
{
	border-bottom: 1px solid #dddddd;
	background: url(../images/btn_download1.gif) no-repeat 0 8px;
	margin: 0;
	padding: 8px 18px 5px 25px;
}


	  
/* STRUCTURAL MARKUP
========================================================================*/

#container
{
	margin: 0 auto 0 auto;
	width: 960px;
	position: relative;
	z-index: 100;
}

#header
{
	width: 960px;
	height: 109px;
	background: url(../images/bg_header4.jpg) no-repeat;
}


/* MISC. HEADER OBJECT STYLES
========================================*/
.logo { margin: 20px 0 0 10px; float: left;}
.reservecall { margin: 45px 15px 0 0px; float: right;}
.bookbtn { margin: 0px 0 0 -110px; position: relative; z-index: 200; text-align: right; }



#mainbody /*this is holding everything below the header div */
{
	width: 960px;
	float: left;
	margin: -65px 0 0 0; /*scooches under navs*/
	padding: 0;
	background: #ffffff url(../images/bg_bluebar.jpg) no-repeat 0 0px;
	text-align: left;
	position: relative;
	z-index: 100;
}


#leftcol /*holds the side navigation */
{
	float: left;
	width: 215px;
	margin: 140px 0 0 0;
	clear:both;
	
}

#leftcol p { margin:20px 30px 20px 10px;float: left; }


#content
{
	float: left;
	width: 680px;
	margin: 90px 0px 50px 12px;
	padding: 0;
	text-align: left;
	position:relative;
	z-index: 130;
}


/*.leftpic { margin: 5px 0 0 -230px; float: left; }*/


/* MISC. CONTENT OBJECT STYLES
========================================*/

.singlepic /*these are the supporting photos on the pages with the captions below them*/
{
	background: #0d5fab url(../images/bg_shortbot.jpg) repeat-x left bottom;
	width: 300px;
}

.singlepic p
{
	color: #78befe;
	font-weight: bold;
	padding: 10px 15px 12px 15px;
	margin: 0px;
	font-size: 11px;
	line-height: 13px;
}

.otherprops /*located on the corporate traveler page*/
{
	float:left;
	margin: 10px 0px 0px 30px;
	padding: 10px;
	width: 110px;
	text-align: center;
	font-size: 11px;
	line-height: 14px;
	background: #eae7f2 url(../images/bg_purple.jpg) repeat-x;
}

.pkgdetail { width:450px;}


/* COLUMNS IN CONTENT
========================================*/

.concolone 		{width: 440px; float:left; margin:0px 20px 0 0;  position:relative;} /*content wide left column*/
.concoltwo 		{width: 190px; float:left; margin:0px;} /*content skinny right column*/

.concolthree 	{width: 410px; float:left; margin:0 20 0 0; position:relative;}
.concolfour	    {width: 300px; float:right; margin: -77px -53px 0 0px; position:relative; z-index: 140; } /*holds right big photos z-index makes it go outside content area in IE*/

.concolfive 	{width: 300px; float:left; margin: 0px 20px 0 0px; position:relative; }
.concolsix		{width: 360px; float:left; margin: 0px 0px 0 0px;  position:relative; }




.mainpics {margin: 5px 0 0 -34px;  width:316px; height:230px;position:absolute;}
.mainhd {margin: 40px 0 0 290px; position:relative; height:44px;}


.small {font-size:10px; line-height:12px;}


/* FOOTER STYLES
========================================*/

body.home #footer {display: none;}	
body.home #hmfooter {display: block;}


#footer
{
	width: 960px;
	height: 85px;
	font-size: 10px;
	line-height: 12px;
	color: #94879e;
	display: block;
	background: #2f1146 url(../images/bg_footer.jpg) no-repeat;
	clear: both;
	text-align: center;
	padding: 1px 0 10px 0;
}

#hmfooter
{
	display: none;
	width: 960px;
	height: 45px;
	background: #2f1146 url(../images/bg_footerhm.jpg) no-repeat;
	clear: both;
	Text-align: center;
}

.copyright
{
	font-size: 10px;
	line-height: 12px;
	color: #94879e;
	display: block;
	clear: both;
	text-align: center;
}




/* NAVIGATION
========================================================================*/   

#mainnav 
{
        width: 970px;
        margin: 0px 0px 0px -5px;
        padding: 0px;
        position:relative; 
        z-index:300;
  
}


#mainnav ul
{
       
        margin: 0px;
        padding: 0px;
        list-style-type: none;
}

#mainnav li
{
        display: inline;
		float:left;
        margin: 0px;
        padding: 0px;
        background:none;
}


/* MAIN NAVIGATION HIGHLIGHTS 
========================================*/
body.rooms ul li.roombtn a,
body.waterpark ul li.waterparkbtn a,
body.activity ul li.activitybtn a,
body.corp ul li.corporatebtn a,
body.dine ul li.dinebtn a

{ border-bottom:2px solid #c2d82e; margin-bottom:-6px; }



/* SIDE NAVIGATION
========================================*/

#secnavs
{
	margin: 0 0 20px 0;
	width: 185px;
}

#secnavs ul
{
	margin: 0;
	padding: 0;	
	
}


#secnavs ul li
{	border-bottom: 3px solid #d8ec60;
	margin: 0 0 0 0;
	font-size: 11px;
	line-height: 10px;
	list-style: none;
	text-transform: uppercase;
	/*background: none;*/
	text-align: right;
	font-weight: bold;
	
}

#secnavs .first { border-top: 3px solid #d8ec60; }

#secnavs ul li a:link,
#secnavs ul li a:active,
#secnavs ul li a:visited
{
	display: block;
	margin: 5px 0 0px 0;
	color: #669900;
	text-decoration: none;
	padding: 4px 10px 4px 0px;
	font-weight: bold;
}

#secnavs ul li a:hover { color: #336600; }




/* SIDE NAVIGATION HIGHLIGHTS 
========================================*/

body.suites ul li.secroom,
body.corp ul li.seccorp,
body.specs ul li.secspecs,
body.hot ul li.sechot,
body.watersq ul li.secwatersq,
body.bdays ul li.secbdays,
body.arcade ul li.secarcade,
body.events ul li.secevents,
body.area ul li.secarea

{  background: #fff url(../images/nav_highlite.gif) repeat-x 0px 3px;}

	
	
/*submenu is set to display:none on all pages in stylesheet. Each page has a body class 
which is connected to the submenu classes below. For example, if I am on a "Business" page, 
the submenu class .subbusiness is set to display:block*/

.submenu { display: none;}

body.rooms .submenu.subrooms  { display: block;}
body.waterpark .submenu.subwaterpark { display: block;} 
body.activity .submenu.subactivities  { display: block;}
body.conventions .submenu.subconventions { display: block;}
body.dine .submenu.subdining { display: block;}	
	



/* BOTTOM NAVIGATION 
========================================*/

#bottomnavs
{
	margin: 5px 0 10px 0;
	color: #a577a8;
}

#bottomnavs a:link,
#bottomnavs a:active,
#bottomnavs a:visited
{
	color: #b585b8;
	text-decoration: underline;
	padding: 0px;
	
}

#bottomnavs a:hover { color: #ffffff; }



/* FLOAT CLEAR FIX
========================================================================*/   

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/* FORMS
========================================================================*/   

body.whitebg /* used on the pop-up forms */
{
	background: none;
	background-color: #ffffff;
	text-align: center;
	line-height: 1.6em;
	margin: 0;
	padding: 0;
}

.form /*contact forms - essentially those in content areas */
{
	float: left;
	display: inline;
	width: 315px;
	background: #eae7f2 url(../images/bg_purple.jpg) repeat-x;
	margin: 5px 0px 10px 0px;
	padding: 0 10px;
}

.form2 /*pop-up forms - those using thickbox for display */
{
	width: 500px;
	background: #eae7f2 url(../images/bg_purple.jpg) repeat-x;
	margin: 5px 0px 0px 0px;
	padding: 0 10px;
}

fieldset
{
	margin: 0;
	padding: 15px 4px 5px 0px;
	border-bottom: 1px solid #fff;
}

label { margin-bottom: .5em; }

label, label span
{
	display: block;
	font-weight: bold;
	color: #4f3c6d;
}

input, textarea
{
	background: #fff;
	border: 1px solid #af9ecb;
	font-size: 11px;
	padding: 2px;
	width: 300px;
}

.radio
{
	background: #fff;
	border: 1px solid #af9ecb;
	font-size: 11px;
	padding: 2px;
	width: auto;
}

input:focus, textarea:focus { background-color: #f3ecf9; }


input.submit
{
	border: 0;
	width: 100px;
	height: 30px;
}



	
	
/* LARGE BOXES WITH GRADIENT BACKGROUND
=====================================================================*/

.specials
{
	background: #eae7f2 url(../images/bg_purple.jpg) repeat-x; /*purple bg*/
}

.specials2
{
	background: #f8f0e0 url(../images/bg_yellow2.jpg) repeat-x; /*yellow bg*/
}

.specials td,
.specials2 td
{
	/*border-bottom: 1px solid #ffffff;*/
	padding: 3px 8px 3px 5px;
}

.specials td.spectitle,
.specials2 td.spectitle /*bolder titles in gradient areas such as dining specials and rooms */
{
	font-weight: bold;
	color: #4f3c6d;
	text-transform: uppercase;
	font-size: 10px;
}

	
	
/* Room Rates
=====================================================================*/

#content #roomrates  {
	background: #eae7f2 url(../images/bg_purple.jpg) repeat-x 0 0px; color:#7c5722;
	color:#7c5722;
	margin:0;
	padding:4px 0 0 0; /*needs this so top orange bar doesn't get covered by hover*/
	width: 440px;
}

#content #roomrates ul
{
	list-style-type: none;
	background: none;
	font-size: 10px;
	margin: 0px 0 0 -20px;
}

#content #roomrates li
{
	display: inline;
	background: none;
	border-bottom: 1px solid #ffffff;
	width: 440px;
	float: left;
	margin: 0px 0 0px 0; /*this must be zero so whole row highlights w/o margins*/
}

#content #roomrates li a  /*styles here will apply to both sides*/
{ 
	display: block; /*needs this to highlight whole row*/
	text-decoration: none;
	color: #4f3c6d;
	margin: 0px;
	padding: 5px 5px 5px 5px
	
}

#content #roomrates li a:hover { background-color:#f3ecf9; }


#content #roomrates li a b
{
	display: inline;
	float: left;
	font-size: 11px;
	padding: 0 5px 0 5px;
}

#content #roomrates li a em
{
	display: block;
	width: 100px;
	margin: -15px 0 0px 330px;
	font-style: normal;
}

.roomdesc { width: 350px; }

.desctable td
{
	border-bottom: 1px solid #dddddd;
	padding: 5px;
}



/* ----------------------------
	   ATTRACTIONS SLIDESHOW
--------------------------- */
.mt {padding-top:1px;}
.slideshowpics { height: 300px; width: 320px; padding:0px; margin:0px; overflow: hidden; }
.slideshowpics img { height: 300px; width: 320px; padding: 2px;} /*actual picture */

#content #slideshow { width:330px;  margin:130px 10px 10px !important; margin:10px;}/*holds the actual picture*/
#content #slidenav { width: 330px; margin:0 0 0 10px; padding:0; float:left;} /*holds the thumbnails*/
#content #slidenav li { width: 45px; float: left; margin: 8px 9px 0px 9px !important; margin: 10px 6px 1px 6px; padding:0px; background:none; list-style-type: none;}
#content #slidenav a { width: 45px; padding: 3px; display: block; margin:0px;} /*sets size, puts the nice border around thumbnails*/
#content #slidenav a.activeSlide { background: #3399ff; } /*the border on the active thumb*/
#content #slidenav a:focus { outline: none; }
#content #slidenav img { border: none; }

.output {padding:10px;height:130px; width:310px; /*background:#eae7f2 url(../images/bg_purple.jpg) repeat-x;*/ border-bottom:1px solid #ddd;}
b.callout {color:#277ecb; padding:3px 0px;display:block; font-size:14px;}






/* WATERPARK CALENDAR 
========================================*/

#calendar {padding:0px 0 0 0; margin:0; list-style-type:none; border:0px solid #fff;}

#calendar table {border-collapse:collapse; width:220px;}
#calendar table thead th {text-align:center; background:#aaaaaa; height: 20px; color:#fff;}

#calendar table td { text-align:center; line-height:20px; /*background: #3d7802;*/ color:#fff; font-weight:bold; border:1px solid #fff;}
#calendar table td.ratesbasic {background: #3d7802;} /*green*/
#calendar table td.ratesgold {background: #ffcc00;} /*yellow*/
#calendar table td.ratespremium {background: #cc0000;} /*red*/
#calendar table td.ratesclosed {background: #000000;} /*black*/



/* HOME PAGE STYLES
========================================*/

.homepic {position:relative; float:left; }

.homewords {position:relative; float:left; z-index:360; margin:-30px 0 0 20px;}
#homespecials {position:relative; text-align:left;float:right; width:307px; height:250px; background: #0B5FAA url(../images/bg_homespecials.jpg) repeat-x;}
#homerowone {position:relative; float:left; width:960px; margin:-65px 0 0 0; z-index:100; background:#fff; }
#homerowtwo {position:relative; z-index: 280; float:left; width:900px; font-size:12px; height:95px;background: #ffffff url(../images/bg_grayshadow.jpg) repeat-x; z-index:100;  color: #777777; padding:10px 60px 0 0 !important; padding:30px 60px 0 0; border:0px solid #ff0000;}
#homerowtwo p:first-line {font-size:16px;line-height:19px; }

#homerowtwonew {position:relative; z-index: 280; float:left; width:960px; font-size:12px; height:95px;background: #ffffff url(../images/bg_grayshadow.jpg) repeat-x; z-index:100;  color: #777777; padding:10px 0px 0 0; border:0px solid #ff0000;}
#homerowtwonew p:first-line {font-size:16px;line-height:19px; }
.hotdates {z-index:130; margin: 5px 18px 0px 0px; padding-left:10px; position:relative; float:right; width:125px; }
.homemainpicsnew {z-index:130; margin: -200px 0 10px -30px; position:relative; text-align:left;float:left; width:320px; }


#homerowthree {position:relative; z-index: 300;  float:left; width:960px; background: #0B5FAA url(../images/bg_homebluebot.jpg) repeat-x;} 

.homefeature {float: left; width:170px; margin:25px 10px 10px 5px; text-align:left; color: #fff; font-size:11px; line-height:15px;}
.homefeature img {margin:0px 0px 10px 0px; }

.homefeathd {float: left; width:170px; text-align:left;}
.homemainpics {z-index:130; margin: -200px 0 0px -30px; position:relative; text-align:left;float:left; width:320px; }
.gchome {margin:30px 40px 0 10px; float: left; width:101px;}
.firstfeat {margin-left:55px !important;margin-left:30px;}
.gobtn { margin:0px 5px -5px 0;}


/* HOME SPECIALS 
========================================*/

#hmspecs { width: 280px; height: 105px; position:relative; z-index:500;margin:-5px 0 0 15px; }
#hmspecs div { width: 280px; height: 105px; padding: 0px; color: #fff; text-align: left; overflow: hidden;line-height:13px;}
#hmspecs p { color: #fff;}
#hmspecs div b { font-size:16px color: #fff; display:block;}
.hmspechd {padding:0 0 5px 15px;}

.hmspecnav { margin: 36px 0 0 0;position:relative; z-index:530;}
.hmspecnavbtn { margin: 7px 0;}
#output { text-align: left; }



/* HOME EVENTS 
========================================*/

#hmevents { width: 280px; height: 35px; position:relative; z-index:500;margin:-5px 0 0 15px;line-height:13px; overflow:hidden;}
#hmevents div { width: 280px; height: 35px; padding: 0px; color: #fff; text-align: left; overflow: hidden;}
#hmevents div b { font-size:16px color: #fff; display:block;}

.hmeventnav { margin: 10px 0 0 0;position:relative; z-index:530;}
.hmeventhd {margin:0px; padding:0 0 5px 15px;}