/* ---------------------------------------------------------------------

   OKANAGANLUXURYESCAPE.COM
   kittyc@telus.net
   (c) 2006, All Rights Reserved.

   Stylesheet & Web Design by Leif Miltenberger
   leifm.com / mail@leifm.com

  --------------------------------------------------------------------- */
  

* /*Sets border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}

body, html {
color: #FFFFFF;
font-family: Helvetica, sans serif;
background: url(../Images/Functional/SplashBG.gif);
padding:15px 0 0 0;
text-align: center; /*** Centers the design in old IE versions ***/
}

body {
font-size: 72.5%;
}

p {padding: 7px 0 7px 0;}

a:link { color: #000; text-decoration: underline; }
a:visited { color: #000; text-decoration: underline; }
a:hover { color: #666666; text-decoration: underline; }
a:active { color: #000; text-decoration: underline; }

#main_title
{ 
font-family: Helvetica, sans-serif; 
color: #000;
font-size: 3.1em; 
padding: 28px 0 2px 34px;
margin-top:-10px;
letter-spacing:-0.08em;
}

.clear { clear: both; }

#main_box_splash
{
margin-top: 20px;
margin-right:auto;
margin-left:auto;
width: 642px;
background-color: #FFF;
color: #000;
border:#02A0C6 solid 4px;
}

#mainContainer {
width: 642px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #fff;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
background: #fff;
}

#slogan
{
font-family:Helvetica, sans-serif;
color:#000;
font-size:1.2em;
padding:46px 36px 0 36px;
}

#secondary_nav_splash
{
position:relative;
top:31px;
left:460px;
margin-right:460px;
text-align:center;
font-family:Helvetica, sans-serif;
font-size:1.1em;
padding:5px;
background-color:#fff;
border-left:#6FD0E1 solid 2px;
border-bottom:#6FD0E1 solid 2px;
color:#000;
}

/*------------------ Navigation Menu styles -------------------- */
 
#navigation 
{
/*padding: 36px 0 0 0;*/
position: relative;
padding:0 36px 0 36px;
width: 570px;
z-index: 4000;
}

#navigation li 
{
display: inline;
position: relative;
}

#navigation a 
{
position: absolute;
display: block;
text-decoration: none;
text-indent: -2100px;
width: 95px;
height: 41px;
/*margin: 0 0 0 0;*/
background-position: left top;
}

/* begin IE Mac hide \*/
#navigation a:focus { outline: none; }
/* end IE Mac hide */

#nav_description
{
background: url(../Images/Functional/NavRolloverDescription.gif) no-repeat left top;
left: 0;
}

#nav_photo
{
background: transparent url(../Images/Functional/NavRolloverPhoto.gif) no-repeat left top;
left: 95px;
}

#nav_location
{
background: transparent url(../Images/Functional/NavRolloverLocation.gif) no-repeat left top;
left: 190px;
}

#nav_coach_house
{
background: transparent url(../Images/Functional/NavRolloverCoachHouse.gif) no-repeat left top;
left: 285px;
}

#nav_rates
{
background: transparent url(../Images/Functional/NavRolloverRates.gif) no-repeat left top;
left: 380px;
}

#nav_testimonials
{
background: transparent url(../Images/Functional/NavRolloverTestimonials.gif) no-repeat left top;
left: 475px;
}

#navigation a:hover 
{
background-position: 0 -47px;
}


#secondary_nav a
{
color:#000;
text-decoration:none;
}

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


/**************************
CONTENT AND COLUMNS
**************************/
.outer {
margin-top: 0px; /*** We need to add some space for our top menu ***/
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
/*** No need to do anything with a one column solution ***/
}
* html .inner {
/***  And therefor no need for hacking IE either ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;

}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: left;
width: 642px;
background: #fff;
margin:-30px 0 10px 0;
}
* html #content {
position: relative;  /*** IE needs this  ***/
}

#call_out
{
position:relative;
top:77px;
font-family:Helvetica, sans-serif;
font-size:2em;
letter-spacing:-0.05em;
padding:9px 90px 7px 10px;
background-color:#02A0C6;
width:90px;
color:#fff;
}

#slideshow
{
border:none;
padding:0 36px 20px 36px;
}

#splash_big
{ 
font-family: Helvetica, sans-serif; 
color: #000; 
padding:0 36px 16px 36px;
margin-top:-6px;
font-size: 5em; 
letter-spacing:-0.08em;
line-height:50px;
}


/**************************
LEFT COLUMN - this is our top menu
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: right;
width: 750px;
background: #fcc; 
height: 40px;
padding: 5px;
margin: -50px 0 0 -642px; /*** Move the left column so it takes the positon as a top menu ***/
}
* html #left {
position: relative;  /*** IE needs this  ***/

}
#left ul {
list-style: none;
}
#left li {
display: inline;
padding-right: 15px;
}
/*************************
RIGHT COLUMN - This is our footer menu
**************************/
#right {
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative;  /*** IE needs this  ***/
}
#right ul {
list-style: none;
}
#right li {
display: inline;
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 642px;
margin: 0 auto;
font-family: Helvetica, sans-serif; 
color: #000; 
font-size: 1em;
text-align:center;
padding: 10px 0 10px 0;
}