/**
 * Project: Lodges at Canmore
 * Author: Matt 
 * Company: Applied Communications
 * Department: New Media
 * Last Modified: November 9, 2006
 *
 */
 
/* ------------------------------------
   LAYOUT
--------------------------------------- */

/* html and body */

html{ 
	margin: 0px;
	padding: 0px;
}

body {	
	padding: 0px;
	margin: 0px;
	background: #FFF;	
	font: normal 12px/1.4em 'Lucida Grande', Geneva, 'Trebuchet MS', Verdana, Arial, sans-serif;
	color: #333;
	background: #E8DDA8 url(../../img/layout/bkgd_header.gif) repeat-x top left;
}

table, td {
	font: 11px 'Lucida Grande', Geneva, 'Trebuchet MS', Verdana, Arial, sans-serif; 
	color: #333;
}

/* layout divs */

#holder {
	width: 750px;
}

#header{
	background: #000;
	text-align: left;
	height: 30px;
	width: 750px;
}

#container{
	float: right;
	margin: 15px 0 0;
	padding: 0;
	width: 486px;
}

#sidebar{
	margin: 0;
	padding: 0;
	height: auto !important; /* For Modern Browsers */
	height: 100%; /* For IE */
}

#sidebar .footnote{
	padding: 6px 16px 0 11px;
}

/* component divs */

#logo{
	padding: 40px 0px 0px 55px;
	height: 167px;
}

#menu_container{
	background: #F1EBCB url(../../img/layout/bkgd_menu.gif) no-repeat 118px bottom; 
	height: 167px;
	padding: 14px 0;
}

#menu {	
}
	
#promo{
	margin:0;
	padding: 49px 16px 0 11px;
	background: #484424 url(../../img/layout/bkgd_promo.gif) no-repeat;
	height: 126px;
	width: 234px;
}

#new-suites{
	margin:0;
	padding: 30px 16px 0 11px;
	background: #872225 url(../../img/layout/bkgd_new-suites.gif) no-repeat;
	height: 126px;
	width: 234px;
}

#banner {
	margin: 0;
}

#content{	
	background: #F6F0D5 url(../../img/layout/bkgd_content.gif) repeat-y;
	margin: 0;
	padding: 0;
	min-height: 570px;
}

#bodytext{
	margin: 38px 59px 17px;
	padding: 0px;
	width: auto;
	/* min-height: 157px; */
}

#captop {	
	background: url(../../img/layout/cap_top.gif) no-repeat top;
	height: 5px;
	padding:0;
	margin:0;
}

#capbottom {	
	background: url(../../img/layout/cap_bttm.gif) no-repeat bottom;
	height: 7px;
	padding:0;
	margin:0;
}

#footer{
	padding: 6px 0px;
	height: 42px;
	clear:both;
	text-align:left;
}
#ownership{
	margin:26px 0 0 16px;
	text-align:left;
}
#ownership a,
#ownership a:hover{margin:0;padding:0;border:0;background:none;}
/* fixed width and center 

#logo,
#menu,
#content,
#footer {
	width: 780px;
	margin: 0px auto;
	text-align:left;
}*/

/* sitemap
#sitemap li{
	font-weight:bold;

}
#sitemap li li{
	font-weight:normal;
}
 */

/* ------------------------------------
   TEXT
--------------------------------------- */

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	letter-spacing: 0;
}

/* sIFR decoy */

/**
 * These "decoy" styles are used to hide the browser text before it is replaced... 
 * the negative-letter spacing in this case is used to make the browser text metrics
 * match up with the sIFR text metrics since the sIFR text in this example is so
 * much narrower... your own settings may vary... any weird sizing issues you may
 * run into are usually fixed by tweaking these decoy styles 
 */

.sIFR-hasFlash h1 {
	visibility: hidden;
	letter-spacing: -5px;
	width: 300px;	
}

/* .sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -4px;
	width: 300px;	
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -3px;
	width: 220px;	
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -2px;
} */

/* default */

h1,
h2,
h3,
h4,
p,
ul,
ol {
	margin: 0;
	padding: 0;
	color: #413A36;
}

td {	
	color: #333;
	font: normal 12px/1.4em;
}

h1,
h2,
h3,
h4,
h5 { color: #605624; }

h1 {
	font: normal 22px/1em 'Lucida Grande', Trebuchet, Verdana, Arial, sans-serif;
	text-transform: uppercase;
	margin-bottom: 8px;
}

h2 { font: normal 20px/1em 'Lucida Grande', Trebuchet, Verdana, Arial, sans-serif; } 

h3 { font: bold 13px/1em 'Lucida Grande', Trebuchet, Verdana, Arial, sans-serif; }

h4 { font: bold 12px/1em 'Lucida Grande', Trebuchet, Verdana, Arial, sans-serif; }

p {	margin: 0px 0px 10px; }

.footnote {
	color: #9E9257;
	font: normal 9px/1.4em Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 6px;
}
/* header text */

#header p {
	color: #FFF;
	padding: 8px 0 0 15px;
	margin: 0;
}
#header a {
	color: #FFF;
	font: bold 12px/0.6em 'Lucida Grande', Trebuchet, Verdana, Arial, sans-serif;
	padding-left: 4px;
}
#header a:hover {
	text-decoration: none;
	background: none;
}

/* lists */

ul {
	padding: 8px 0 12px;
}

li {
	padding: 0 0 4px;
}

#bodytext li {
	list-style-image: url(../../img/asset/bullet.gif);
}
/* links */

a {
	color:#346494;
}

a:hover {
	background: #E5F1FD;
}

a img { border: 0px; background: transparent; }

a:hover.imglink { background: transparent; }

#logo a{ background: transparent; }

/* body */


/* sidebar */

.arrow-link {
	margin: -1px 0px 0px 5px;
}


/* promo text */
#new-suites #back, #new-suites #front{ position: relative;}
#new-suites #front {margin-top: 19px;}
#promo img, #new-suites img {float: left; margin: 0 9px 0 0; }
#promo p {padding-top: 8px; color: #FFF; font-size: 10px;}
#new-suites p {padding-top: 6px; color: #FFF; font-size: 10px;}
#new-suites h3 {color: #FFF;}
/*#new-suites .flipside {margin: 9px 10px 10px 5px; *margin: 0px 5px 10px 5px; color: #FFF; font-size: 14px; line-height: 25px;}*/
#new-suites .flipside {margin: 9px 10px 10px 5px; *margin: 0px 5px 10px 5px; color: #FFF; font-size: 13px; line-height: 20px;}
#promo h3 a{color: #E3DEB5; border-bottom: 1px solid #E3DEB5; text-decoration: none; margin-bottom: 3px; }
#new-suites h3 a {color: #E3DEB5; border-bottom: none; text-decoration: none; margin-bottom: 3px; line-height: 24px; top: -5px;}
#promo h3 a:hover,  #new-suites h3 a:hover {color: #D7D1A3; border-bottom: 1px dotted #D7D1A3; text-decoration: none; background: none;}
#promo p a, #new-suites p a {color: #E3DEB5; font-weight: bold;}
#promo p a:hover, #new-suites p a:hover {color: #D7D1A3; text-decoration: underline; background: none;}
.arrow{position: absolute; top: 75px; *top: 70px; right: 0px;}

/* footer */

#footer,
#footer p,
#footer td {
	color: #605624;
	font: normal 9px/2em Verdana, Arial, Helvetica, sans-serif;
}

#footer p {
	padding-left: 16px;
}

/* horizontal rule */

hr {
	border: 0px;
	height: 1px;
	color: #C4B881;
	background: #C4B881;
	margin: 0;
	padding: 0px;
}

/* disclaimer */

.disclaimer  {
	font: 9px/1em Arial, Helvetica, sans-serif;
	color: #777777;
}

/* pdf links

a.pdflink {
	background: url(../../img/elements/pdficon.gif) no-repeat;
	padding-left: 19px;
	display: block;
	height: 16px;
	width: 200px;
}

a.pdflink:hover {
	background: #FAF1D2 url(../../img/elements/pdficon.gif) no-repeat;
} */


/* ------------------------------------
   VERTICAL FREESTYLE MENU
--------------------------------------- */

/* main menu

#menu img { border: 0px;}

#menu ul {
	padding: 0px;
	border: 0px;
	margin: 0px 12px;
	list-style: none;
}

#menu ul li {
	margin: 0px;
	padding: 0px;
	display: block;
	height: 25px;
	width: 132px;
}
 */	/*
#menu ul li a {
	letter-spacing: 0;
	margin: 0px;
	border-bottom: 1px solid #E8DDA8;
	text-decoration: none;
	padding: 0 0 0 27px; 
	display: block;
	color: #352E2C;
	font:11px/2em 'Lucida Grande', Trebuchet, Verdana, Arial, sans-serif;
	background: #F1EBCB;
	/* IE 5 Hack \*/
	/*overflow: hidden;
	*//*end hack */
/*} 
#menu ul li a:hover {
	background: #EDE5BD;
}
*/
/* All <ul> tags in the menu including the first level */
.listMenu, 
.listMenu ul {
 margin: 0;
 padding: 0;
 width: 132px;
 list-style: none;
}

/*
 Submenus (<ul> tags) are hidden and absolutely positioned across from their parent.
 They don't *have* to touch their parent menus, but is' a good idea as CSS-only fallback
 mode requires menus to touch/overlap (when JS is disabled in the browser).
*/
.listMenu ul {
 display: none;
 position: absolute;
 top: -1px;
 left: 132px;
}	

/*
 All menu items (<li> tags) are relatively positioned to correctly offset their submenus.
 They have borders that are slightly overlaid on one another to avoid doubling up.
*/
.listMenu li {
 position: relative;
 border-top: 1px solid #E8DDA8;
 border-bottom: 1px solid #E8DDA8;
 background: #F1EBCB;
 margin-bottom: -1px;
 padding: 0;
}
.listMenu ul>li:last-child {
 margin-bottom: 1px; /* Mozilla fix */
}

/* Links inside the menu */
.listMenu a {
 display: block;
 padding: 3px 3px 4px 20px;
 color: #352E2C;
 text-decoration: none;
 font-size: 10px;
}

/*
 Lit items: 'hover' is mouseover, 'highlighted' are parent items to visible menus.
*/
.listMenu a:hover, 
.listMenu a.highlighted:hover, 
.listMenu a:focus {
 color: #352E2C;
 background-color: #EDE5BD;
}
.listMenu a.highlighted {
 color: #352E2C;
 background-color: #C86;
}
.listMenu .current a {
	background: #F8F5E5 ;
}


/* submenu links - adding arros */
#m-3.current a, #m-4.current a{ background:#F8F5E5 url(../../img/layout/nav_arrow.gif) 125px 9px no-repeat;}
#m-3.current ul a, #m-4.current ul a{ background-image:none;}

#m-3 a:hover, #m-4 a:hover,
#m-3 a.highlighted:hover, #m-4 a.highlighted:hover, 
#m-4 a:focus, #m-4 a:focus{
	color: #352E2C;
	background:#EDE5BD url(../../img/layout/nav_arrow.gif) 125px 9px no-repeat;;
}

/* inactive submenu color */
.listMenu .current ul{display:block;}
.listMenu .current ul li{
	border-left:1px solid #E8DDA8;
	background: #ede5bd;
	background-image:none;
}
 /* Active submenu color */
#m-3.current ul li a:hover, #m-4.current ul li a:hover, 
#m-3.current ul li a.highlighted:hover, #m-4.current ul li a.highlighted:hover, 
#m-3.current ul li a:focus, #m-4.current ul li a:focus,
#m-3.current .current a, #m-4.current .current a {
	color: #352E2C;
	background-color: #f1ebcb;
	background-image:none;
}


/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .listMenu a#xyz {
      background-image: url(out.gif);
    }
    .listMenu a#xyz:hover, .listMenu a.highlighted#xyz, .listMenu a:focus {
     background-image: url(over.gif);
    }
*/


/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
.listMenu a .subind {
 float: right;
 padding-top: 6px;
}

/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .listMenu li {
 float: left;
 width: 100%;
}

* html .listMenu li {
 float: left;
 height: 1%;
}
* html .listMenu a {
 height: 1%;
}
/* End Hacks */

/* ------------------------------------
   FORMS
--------------------------------------- */

form {
	padding: 0px;
	margin: 0px;
}

#register-table {
	text-align: left;
	margin: 0 0 30px 20px;
}

#register-table td{
	padding-top: 13px;
}
	
	
/* form controls */


label {
	color: #333;
	font: bold 11px/1.4em Arial, Helvetica, sans-serif;
	width: 142px;
}

input,
textarea,
select {	
	font: 11px/1em Arial, Helvetica, sans-serif;
	padding: 2px 1px 1px;
	color: #555555;
}

.field,
.wide_field {
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #555;
	border-top: 1px solid #555;
	background: #FFF;
	width: 328px;
}	
.field{
	width: 142px;
}
.wide_field{
}
select {
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #555;
	border-top: 1px solid #555;
	background: #FFF;
	line-height: 1em;
	padding: 0px;
}

.multiselect{
	background:#FFFFFF;
	border:1px solid #828177;
	overflow:auto;
	width:200px;
	height:100px;
	padding:3px;
	}
.multiselect label{
	clear:left; 
	display:block; 
	color: #333;
	font: normal 11px/1em Arial, Verdana, Tahoma, sans-serif;
}
.checkboxes label{ font-weight:normal; color: #333; }
.required{ color:#FBAF2E;
	font: normal 16px/1em Arial, Verdana, Tahoma, sans-serif;
 }

/* form helpers */

#unit_preference {
	width: 170px;
}
.select_arrow {
	padding-left: 16px;
}
.select_pref {
	padding-left: 24px;
}

.instructions {	
	padding-top: 10px;
	font: normal 10px/1em Arial, Helvetica, sans-serif;
	color: #59759E;
}

.error { color: #CC0000; }

.nowrap{
	white-space: nowrap;
}