@charset "utf-8";
html, body { /* Setting a height of 100% forces the browser to calculate the height of the browser window. This is done to push the footer to the bottom of screen when the content of the page is not long enough to fill the screen. This a totally stylistic application and does not otherwise affect the loading or display of the page. If this styling fails the only repurcussion will be that the footer will not display at the bottom of the screen on shorter pages. */
	height: 100%; 
}
body {
	line-height: 1.4;
	font-size: 100%;
	font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background-color: #aaa;
	margin: 0px;
	padding: 0;
	color: #000;
	font-style: normal;
	font-weight: 400;
	width: 100%;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p , blockquote{
	margin-top: 0px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
	padding-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 0.5em;
	padding-left: 15px;
	padding-right: 15px;
}
#top-menu {
	display: none;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #143D9D;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification. Change the color to match your company color standards. */
}
a:visited {
	color: #566884;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
	color: rgba(67,144,255,1.00);
}
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
	background-color: #FFFFFF;
	margin-top: 0;
	margin-bottom: 0;
	/* The following settings are designed to push the footer to the bottom of the screen if the content does not fill the column. For longer content, the footer will scroll as expected. */ 
	height: auto !important; /* the auto value is a hack for IE7 which doesn't understand min-height.*/
	min-height: 100%;
	height: 100%; 
	margin: 0 auto -3em; /* the auto value on the sides, coupled with the width, centers the layout */
	overflow:auto;
	width:100%;
}
header p {
	text-align: center;
	font-size: 120%;
	text-transform: uppercase;
	text-shadow: 0px 1px 7px rgba(0,0,0,0.90);
	letter-spacing: 0.5em;
	line-height: 0.5em;
	margin-top: 2em;
}
header h3 {
	text-align: center;
	font-size: 100%;
	text-transform: uppercase;
	text-shadow: 0px 1px 7px rgba(0,0,0,0.90);
	letter-spacing: 0.5em;
	line-height: 0.5em;
	margin-top: 2em;
}

header h2 { /* The header features an h1 element. The company name could also be added to the background image itself, but then it would not be accessible to search engines. */
	font-size: 380%;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	color: #fffa00;
	line-height: 1.2em;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	vertical-align: baseline;
	padding-top: 0.75em;
	text-shadow: 0px 0px 30px rgba(0,0,0,0.75);
}
header { /* ~~ The header is not given a width. It will extend the full width of your layout. The height is a different matter. The header features an h1 element and several background effects. Background images do not affect the height of an element automatically. The height must be set to support the dimensions of any background content. ~~ */
	position:relative;
	background-color: #000;
	height: 300px;
	color: #fff;
	background-color: #000;
	background-image: url(../images/fern.png) , url(../images/aspen-branch2.jpg);
	background-image: url(../images/mainphoto.jpg) , url(../images/aspen-branch2.jpg) ;
	background-repeat: no-repeat, repeat-x;
	background-size: auto 90%, auto auto, 100% auto;
	background-position: 47% center, left top, left top;
}
.top {
	border-top: 5px solid #FD5;
	border-bottom-style: none;
	border-bottom-width: medium;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.60);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.30);
	box-shadow: 0px 3px 3px rgba(0,0,0,0.30);
	margin-bottom: 25px;
	text-align: center;
	overflow: auto;
	width: 100%;
	background-color: #006699;
	background-image: -webkit-linear-gradient(270deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
}
.top ul {/* The navigation menu is centered in the nav element. To center the menu the left and right margins of the ul are set to auto and the width is set to a fixed measurement. Furthermore, the width of the ul must be at least equal to or greater than the sum of the widths of all its children, plus borders, margins and padding. If you insert additional menu items don't forget to increase the width accordingly.*/
	list-style: none;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	padding: 0;
	position: relative;
	text-align: center;
	width: 57em;
}
.top ul li {/* There is no width, margin or padding applied to the li element. When an element is floated its width and height will collapse to the extents of its contents. These specifications will be applied to the a element itself, to allow the entire button to be clickable.  */
	margin: 0px;
	list-style: none;
	border-top: solid 1px #0AE;
	border-right: solid 1px #024;
	border-bottom: solid 1px #024;
	border-left: solid 1px #0AE;
	float: left;
	display: block;
	overflow: auto;
}
.top ul li a:link  , .top ul li a:visited {/* Normally, hyperlinks are inline elements and are only as wide and as tall as the content of the link. To make the entire button an active link the width of each link is set in ems on the "a" tag itself. Since the li element is floated it will automatically collapse to the width and height of its contents. By using ems the width will scale automatically with the font size preventing the button from breaking. By placing the width and padding on the a element the hyperlink behavior is automatically inherited by the entire visible button. This effect is also assisted by applying a block specification. */
	padding-right: 0.5em;
	padding-left: 0.5em;
	color: #FFC;
	text-decoration: none;
	height: auto;
	display: block;
	width: 7em;
	line-height: 3em;
}
.top ul li a:hover {
	color: #fff;
	background-image: -moz-linear-gradient( 270deg, rgb(2,129,166) 0%, rgb(0,97,153) 100%);
	background-image: -webkit-linear-gradient(270deg,rgba(159,159,159,1.00) 0%,rgba(141,141,141,1.00) 100%);
	background-image: -ms-linear-gradient( 270deg, rgb(2,129,166) 0%, rgb(0,97,153) 100%);
	background-image: -webkit-linear-gradient(90deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(0,102,153,1.00) 0%,rgba(0,136,170,1.00) 100%);
}
.main  {
	width: 1024px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	clear: both;
	overflow: auto;
}
.main aside {
	padding-top: 1em;
	padding-bottom: 1em;
	border-top: 5px solid #069;
	border-bottom: 3px solid #069;
	font-size: 95%;
}
.main aside blockquote {
	margin: 0px 0px 20px 0px;
	padding: 0px;
}
aside blockquote p {
	margin: 0px 0px 5px 0px;
	padding: 0px .5em;
	text-indent: -0.4em;
}
aside blockquote cite {
	display: block;
	font-size: 90%;
	text-align: right;
	font-style: italic;
}
/* ~~ These are the columns for the layout. ~~ 


1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design.

2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin.

3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.

4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source.

*/
.sidebar1 {
	float: left;
	width: 200px;
	border-radius: 0;
	position: relative;
	overflow: auto;
}
.content {
	width: 37em;
	position: relative;
	padding-right: 10px;
	padding-left: 10px;
	float: left;
	overflow: auto;
	margin-bottom: 20px;
}
.container h1 {
	margin-top: 0px;
	margin-bottom: 15px; 
	font-family: patua-one;
	font-size: 250%;
	line-height: 1.4em;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
/* ~~ These are the columns for the layout. ~~ 

1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design.

2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin.

3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.

*/
.sidebar2 {
	width: 200px;
	background-color: #c5e3ec;
	float: left;
	overflow: auto;
}
.sidebar2 section h2 {
	margin-bottom: 5px;
	font-weight: 700;
	font-size: 130%;
	line-height: 1.4em;
}

/* ~~ The footer ~~ */
footer {
	padding-top: 10px;
	padding-right: 10%;
	padding-bottom: 10px;
	padding-left: 10%;
	background-color: #fffa00;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	color: #FFC;
	font-size: 95%;
	margin-top: 20px;
	background-image: -webkit-linear-gradient(90deg,rgba(237,243,9,1.00) 0%,rgba(242,244,186,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(237,243,9,1.00) 0%,rgba(242,244,186,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(237,243,9,1.00) 0%,rgba(242,244,186,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(237,243,9,1.00) 0%,rgba(242,244,186,1.00) 100%);
}
footer, .push {	/* This rule helps to position the footer at the bottom of the browser window when the page content does not fill the entire height. */
	min-height:1em; 
}
	
header, section, footer, aside, article, figure { /*This rule is an accommodation for older browser that may not understand HTML5 semantic elements. This rule should remain at the bottom of the style sheeet. */
	display: block;
}
.logo-white {
	color: #fff;
}
.copyright { 
    color: #000;
}
.blue_more_links {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #294478;
}
a.blue_more_links:link { color: #486F9B; text-decoration: none }
a.blue_more_links:visited { color: #486F9B; text-decoration: underline }
a.blue_more_links:active { color: #6DAB44; text-decoration: underline }
a.blue_more_links:hover { color: #6DAB44; text-decoration: underline }

.blue_medium_links {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #294478;
}
a.blue_medium_links:link {
	color: #486F9B;
	text-decoration: none;
	font-weight: bold;
}
a.blue_medium_links:visited {
	color: #486F9B;
	text-decoration: underline;
	font-weight: bold;
}
a.blue_medium_links:active {
	color: #6DAB44;
	text-decoration: underline;
	font-weight: bold;
}
a.blue_medium_links:hover {
	color: #6DAB44;
	text-decoration: underline;
	font-weight: bold;
}

.blue_large_links {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #0D4DC9;
}
a.blue_large_links:link {
	color: #099bf8;
	text-decoration: none;
	font-weight: 600;
}
a.blue_large_links:visited {
	color: #099bf8;
	text-decoration: none
}
a.blue_large_links:active { color: #6DAB44 ; text-decoration: none
}
a.blue_large_links:hover {
	color: #6DAB44;
	text-decoration: none
}
.red_large_links {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #f73a43;
}
a.red_large_links:link {
	color: #f73a43;
	text-decoration: none;
	font-weight: 600;
}
a.red_large_links:visited {
	color: #f73a43;
	text-decoration: none
}
a.red_large_links:active { color: #f73a43; text-decoration: none
}
a.red_large_links:hover {
	color: #c9420d;
	text-decoration: none
}
.flt-lft-resp  {
	margin-left: 0.7em;
	float: left;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	margin-right: 0.2em;
}
.flt-lft-listing  {
	margin-left: 0.7em;
	float: left;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	margin-right: 0.7em;
}
.flt-apart  {
	margin-left: 0.4em;	
	margin-bottom: 0.1em;
	margin-right: 0.4em;	
	
	}
.sidebar2p {
	font-weight: 500;
	line-height: 1.8em;
	font-style: normal;

}
.main .sidebar2 section {
}
.flt-lft-resp-side2 {
	width: 90%;
	float: left;
}


@media screen and (max-width:1023px) {
.container {
	width: 100%;
}
header { 
	position:relative;
	background-color: #090;
	height: 200px;
}
header h2 {
	font-size: 280%;
	padding-top: 0.5em;
	line-height: normal;
}
header p {
	text-align: center;
	font-size: 100%;
	text-transform: uppercase;
	text-shadow: 0px 1px 10px rgba(0,0,0,0.93);
	letter-spacing: 0.5em;
	line-height: 1em;
	margin-top: 0em;
	padding-top: 1em;
}
header h3 {
	display: none;
}
.top ul {
	width: 48em;
}
.top ul li a:link  , .top ul li a:visited{
	padding: 0px .2em;
	width: 7em;
	font-size: 90%;
}
.main  {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.content {
	width: 75%;
	float: none;
	margin-left: 20%;
}
.sidebar1 {
	width: 20%;
}
.sidebar2 {
	float: none;
	margin-left: 23%;
	width: 75%;
	margin-top: 20px;
	margin-bottom: 20px;
}
.ski {
}

}
@media screen and (max-width:767px) {
.container {
	width: 100%;
}
header { 
	position:relative;
	background-color: #000;
	height: 175px;
}
header h2 {
	font-size: 260%;
	padding-top: 0.5em;
	line-height: normal;
}
header p {
	text-align: center;
	font-size: 95%;
	text-transform: uppercase;
	text-shadow: 0px 1px 10px rgba(0,0,0,0.93);
	letter-spacing: 0.5em;
	line-height: 1em;
	margin-top: 0em;
	padding-top: 1em;
}
header h3 {
	display: none;
}
.top ul {
	width: 48em;
}
.top ul li a:link  , .top ul li a:visited{
	padding: 0px .2em;
	width: 7em;
	font-size: 90%;
}
.main  {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.content {
	width: 70%;
	float: none;
	margin-left: 20%;
}
.sidebar1 {
	width: 25%;
}
.sidebar2 {
	float: none;
	margin-left: 23%;
	width: 70%;
	margin-top: 20px;
	margin-bottom: 20px;
}
}
@media screen and (max-width:665px){
.container {
	width: 100%;
}
header { 
	position:relative;
	height: 150px;
}
header h2 {
	font-size: 220%;
	font-family: "Impact";
	line-height: .8em;
	text-align: center;
	vertical-align: middle;
	text-outline: 1px #0F6B00;
	padding-top: .8em;
}
header p {
	text-align: center;
	font-size: 70%;
	text-transform: uppercase;
	text-shadow: 0px 1px 7px rgba(0,0,0,0.93);
	letter-spacing: 0.3em;
	line-height: .8em;
}
header h3 {
	display: none;
}
.main  {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 18px;
}
.content {
	width: 100%;
	margin: 0px;
	padding: 0px;
	float: none;
}
.sidebar1 {
	display: none;
}
.sidebar2 {
	float: none;
	clear: both;
	margin: 10px 0px;
	width: 100%;
}
.top {
	height: 40px;
	background-repeat: no-repeat;
	background-position: right center;
	overflow: hidden;
}
.top ul {
	display: block;
	width: 100%;
	margin: 0px;
	text-align: left;
}
.top li {
	display: block;
	float: none;
	margin-left: 0px;
	width: 100%;
}

.top ul li a:link  , .top ul li a:visited{
	padding: 0px 2em;
	width: auto;
	font-size: 100%;
	margin: 0px;
	background-color: #006699;
	height: 40px;
	line-height: 2.5em;
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.30);
	box-shadow: 0px 3px 3px rgba(0,0,0,0.30);
}
.top.open {
	overflow: visible;
	z-index: 100;
}
.top.open .navbar{
	/* [disabled]top: 40px; */
	z-index: 100;
	font-size: medium;
	max-height: 240px;
}
#top-menu {
	display: block;
	float: right;
	background: #3AF;
	border: 1px solid #ee1135;
	padding: 7px 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	height: 20px;
	z-index: 1000;
}
}
@media screen and (max-width:480px){
.main {
	margin: 0px;
	width: 100%;
}

header p {
	letter-spacing: 0.2em;	
}
header h3 {
	display: none;
}
.content h1 {
	font-size: 200%;
	text-align: center;
}
.content section h2 {
	padding: 0px;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 5px;
	line-height: 1.4em;
}
.main .sidebar2 {
	width: 100%;
	margin: 20px 0px;
	overflow: hidden;
}
.main .sidebar2 section {
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.sidebar2 figure {
	clear: none;
}
.sidebar2 figure img  {
	max-width: 95%;
	float: none;
	clear: both;
	margin: 5px auto;
}
.sidebar2 figure p {
	width: 90%;
	float: none;
	clear: both;
	margin: 5px auto;
}

footer {
	padding-top: 5px;
	padding-right: 5%;
	padding-left: 5%;
	padding-bottom: 5px;
}
}
.center-div {
	text-align: center;
	margin-left: 4px;
	margin-top: 5px;
}
.flt-rt-resp {
	margin-left: 5px;
	float: right;
}

.flt-rt-resp-ski {
	margin-left: 5px;
	float: right;
	width: 70%;
}
.flt-apart  {
	margin-left: 0.4em;	
	margin-bottom: 0.1em;
	margin-right: 0.4em;
	width: 15%;	
	height: 15%;
}

.listing {
	background-color: #f9fcc1;
	float: left;
	width: 97%;
	margin-top: 5px;
	margin-left: 5px;
	overflow: auto;
	position: relative;
	margin-bottom: 5px;
}
.hotel {
	background-color: #e8f4f8;
	float: left;
	width: 97%;
	margin-top: 5px;
	margin-left: 5px;
	overflow: auto;
	position: relative;
	margin-bottom: 5px;
}