/* GLOBAL SELECTORS */

.clear_left{clear:left;}
.clear_right{clear:right;}
.right{float: right !important; clear: right;}
.left{float: left !important}
.notice{font-weight: bold; padding-bottom: 5px;}
.italic{font-style: italic; padding-top: 10px; clear:left;top:10px;}
#content
.inline_link{float: none;}



/* BASE FOR FONTS */

body {
	color: #555;
	font-family: Myriad Pro, Helvetica, Trebuchet MS, Tahoma, Arial, sans-serif;
	font-size:100%;
	line-height: 95%;
	margin:0;
}

h1, h2, h3 {
	font-weight:normal;	
}

h1 {
	font-size: 1.375em; /* 16x1.375=22px */
	line-height: 1.636em;/* 16x1.636=36px */
	margin: 0;
}

h2 {
	font-size: 0.75em;
	font-weight: bold;
	color: #444;
	/*margin:1em 0;  18x1=18px */
}

h3 {
	font-size: 0.8125em; /* 16x0.8125em=13px */
}

h4,
h5 {
	font-size: 1em; 
}

p,
li,
label,
input {
	font-size: 0.6875em; /* 16x0.6875=11px */
	/* margin: 1.286em 0; 14x1.286=18px */
}

	
	/* for IE */
	* html body {font-size:16px;}






/* SITE ------------------------------ */


html{
	background-color: transparent; 
}

body {
	width: auto;
	height: auto;
	text-align: center;
	margin: 0 auto;
	background-image: url(img/body_bg.png);
	background-repeat: repeat-x;
	background-color: #f8f7f7;
}

.container{
	width: 827px;
	height: auto;
	text-align: left;
	margin: 0 auto;
}

.main{
	width: 827px;
	height: auto;
	float: left;
	padding-left: 21px;
	background-image: url(img/content_bg.png);
	background-repeat: repeat-y;}

/* float everything to get correct flow. 
 * Position:relative everything to easily 
 * control the elements with left, right, top, bottom. works crossbrowser really good */
#header *{float: left; position: relative;}
#menu *{float: left; position: relative;}
#content *{float: left; position: relative;}
#footer *{float: left; position: relative;}

#content tbody,
#content tr,
#content td,
#content th{
	float: none;
	text-align: right;
	position: static;
}


/* for IE */
* + html .weather_orlando{left:150px;}
* + html #menu li { display:inline; }
* + html .brochure_block{ float:left !important;clear:left; }	
* + html .picturegallery #content li.selected img { border: 2px solid #555; }
* + html .weather_stats { bottom:-15px; }
* + html .villa h5 { padding-top: 15px; }
* + html .frontpage	.reservation{top:225px;}
	
	
/* header ---------------------*/

#header{
	width: 787px;
	height: 111px;
	float: left;
	background: url(img/header.png) no-repeat;
	overflow: hidden;
}


h1 a{
	background:transparent url(img/header_text.png) no-repeat scroll 0 0;
	font-size:0;
	height:45px;
	left:55px;
	top:50px;
	width:253px;
}


#logo{
	border:0 none;
	display:block;
	left:60px;
	position:relative;
	top:30px;
}

.languages{
	float: right !important;
	right: 10px;
	top: 10px;
}

.languages a{
	width: 55px;
	height: 25px;
	float: right !important;
	color: #222;
	font-size: 60%;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

.languages a:hover{
	color: #996600;
}

	.languages a.chosen_language{
		background: url(img/language_selection_bg.gif) no-repeat;
		background-position: bottom left;
		height: 25px;
	}
	
	.languages span{
		height: 25px;
		line-height: 27px;
		padding-right: 20px;
		background-position: right center;
		text-indent: 13px;
	}	
	.languages span.english{background: url(img/eng.gif) no-repeat right center;}
	.languages span.finnish{background: url(img/fin.gif) no-repeat right center;}




/* menu ------------------*/

#menu{
	width: 786px;
	height: 59px;
	float: left;
	clear: left;
	background: url(img/subnav_bg.png) repeat-x;
	text-align: center;
}

	#menu ul{
		margin: 0px;
		padding: 0px;
		list-style: none;
		float: none;
	}
	
	#menu li{
		background: url(img/subnav_list_separator.png) no-repeat;
		background-position: right center;
		display:inline-block;
		float: none;
		position:relative;
	}

	#menu li:last-child{
		background: none;
	}

	.menuitem
	a{
		height: 59px;
		line-height: 65px;
		font-size: 110%;
		font-weight: bold;
		text-decoration: none;
		text-transform: uppercase;
		color: #996600;
		padding: 0px 12px;
	}

	.menuitem a:hover{color: #fff;}

	#menu li.menuitem.active{
		background: url(img/subnav_active.png) repeat-x;
		border-left: 4px solid #cc9933;	
		border-right: 4px solid #cc9933;
		position:relative;
		right:5px;		
	}

	#menu li.menuitem.active a{
		color: #fff;
	}




/* content ------------------*/

#content{
	width: 746px;
	height: auto;
	float: left;
	padding: 20px 20px 40px 20px; 
	background-color: #fefbf6;
}
	
.frontpage_left{
	left: 50px;
	padding:10px 10px 0 0;
	width:90%;
}

.frontpage_center{
}

h3{
	font-size: 120%;
	font-weight: bold;
	color: #555;
	padding-bottom: 10px;
}

p{
	font-size: 80%;
	padding-bottom: 5px;
}

.content_text{
	width: 100%;
	float: left;
	clear: left;
}

a{
	color: #d99e28;
	text-decoration: underline;
}

	a:hover{color:#996600;}

.brochure_link{
	font-size: 80%;
	padding-right: 15px;
	left: 15px;
	background: url(img/download_icon.gif) no-repeat;
	background-position: center right;
}	

.villa
.brochure_link{
	left: 0px;
}

.villa
#content
.inline_info{
	left: 0px;
}

#content
.inline_info{
	font-size: 60%;
	margin-left: 3px;
	left: 15px;
}
	
.weather_stats{
	bottom:10px;
	right:20px;
	width:517px;
}

	
	p.weather_info{
		font-size: 80%;
		color: #aaa;
		padding: 0;
		clear: left;
	}
	
	.weather_info_monthly{}

	#content
	.weather_stats
	label{
		width:85px;
		clear:left;
		color:#AAAAAA;
		float:left;
		font-size:70%;
		line-height:90%;
		letter-spacing:-0.5px;
		padding-bottom:6px;
		text-align:right;
		left:-5px;
		top:17px;
	}

	.weather_stats h4{
		font-weight: bold;
		color: #555;
		float: left !important;
	}
	
		.weather_stats h4,
		.weather_stats p{
			width: 100%;
			left: 86px;
		}
		
	
table.weather_table{
	background: url(img/weathertable_bg.png) no-repeat;
	color:#888888;
	font-size:70%;
	height:79px;
	line-height:100%;
	width:431px;
	float: right !important;
}


.frontpage #content td,
.frontpage #content th{
	text-align: center;
}

.weather_table th{
	color: #555;
	font-weight: bold;
	line-height: 120%;
}

.weather_orlando{
	font-size:90%;
	left:50px;
	text-align:center;
	top:8px;
	width:100%;
}


.content_right{
	width: 245px;
	padding: 20px 0 20px 30px;
	left: 20px;
	bottom: 20px;
	background: url(img/right_panel.png) repeat-y;
	background-position: center right;
}

.content_right_bottom{
	width: 275px;
	height: 10px;
	left: 20px;
	bottom: 20px;
	background: url(img/right_panel_bottom.png) repeat-y;
	background-position: center right;
}

.content_right
a{
	clear: left;
	font-size: 80%;
	line-height: 20px;
}


#area_map{
	border: 2px solid #996600;
}

.google_weathermap{
	border:2px solid #555555;
	bottom:15px;
	float:right !important;
	height:180px;
	right:-15px;
	width:190px;
}

.frontpage_bottom{
	width: 765px;
}	

.image_block{
	display: block;
}

.frontpage
.image_block{
	width: 255px;
}




/* huvila ---------------------*/

ul.room_area_list{
	width: 100%;
	text-align: center;
	padding-bottom: 5px;
}

ul.room_area_list
li{
	display:inline;
	float:none !important;
	font-size: 90%;
	margin-right:10px;
}

ul.room_area_list
li
a{
	float:none !important;	
}
	
#content
img{
	display: block;	
	border: 2px solid #555555;
	border-top: 25px solid #555555;
	clear:left;
	margin-right: 15px;
	z-index: 5;
}	

.villa
#content
.image_block
a.image_header,
#content
.image_block
label{
	color:#FFFFFF;
	font-size:75%;
	left:10px;
	text-decoration:none;
	text-transform:uppercase;
	top:23px;
	z-index:10;
}	
	
.villa
h5{
	float:right !important;
	font-weight:bold;
	top:5px;
	width:497px;
}	
	
	
	
p.image_info{
	clear:left;
	width:214px;
	padding-top: 5px;
}

.frontpage
p.image_info{
	font-size:75%;
	line-height:100%;
	color:#FFFFFF;
	background-color:#555555;
	padding:5px 10px;
	height:50px;
	}

.villa
p.image_info{
	width: 410px;
	clear: none;
}
		
	
.frontpage_bottom
p.image_info a{
	clear:right;
	float:right !important;
	font-size:90%;
	text-align:right;
	width:100%;
}

h3.wide{
	width: 700px;
}

.location
h3{
	padding: 10px 0 0 0;
	top: 10px;
	left: 255px;
}

#content
img.inner_picture{
	border-width: 2px;
	display: inline;
	margin: 20px 5px 10px;
}

p.info_text_wide{
	width:460px;
	padding-right:30px;
}


/* alue ---------------------*/

.location
#content
li{
	clear: left;
	font-size: 80%;
	list-style-type: disc;
	left: 35px;
	width: 300px;
}

h4{
	width: 490px;
	float: right !important;
	padding-top: 20px;
	font-weight: bold;
}




/* hinnasto ---------------------*/

table.pricing{
	float: left;
	clear: left; 
	font-size: 90%;
	top: 20px;
	left: 50px;
	margin-right: 20px;
}
table.pricing.times{
	clear: none; 
}

table.pricing td,
table.pricing th{
	border: 2px solid #FEFDF2;
}

table.pricing th.empty_cell{border: 0px;}


	.pricing
	th h6{
		display:block;
		font-size:110%;
		font-weight:bold;
		letter-spacing:1px;
		line-height:100%;
		padding:10px 5px 5px 50px;
		text-align:right;
	}
	.pricing
	th span{
		font-size: 80%;
		line-height: 100%;
		color: #666;
		text-align: center;
		float: none !important;
		bottom: 3px;
		display: block;
		clear: left;
	}

.pricing
td{
	padding: 8px 10px 3px;
	font-size: 90%;
	font-weight: bold;
	color: #666;
}

	.pricing
	td.td_label{
		width: 115px;
		background-color:#FFCC66;
		color:#444444;
		font-size:80%;
		font-weight:bold;
		text-align:right !important;
	}
	

.low{
	background-color: #eee;
}

.high{
	background-color: #ddd;
}

.peak{
	background-color: #ccc;
}

.pricelist
li.price_info{
	bottom:150px;
	clear:left;
	font-size:85%;
	left:75px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:disc;
	padding-bottom:3px;
	width:300px;
}



/* kuvagalleria ---------------------*/

#thumbs{
	width: 200px;
	top: 20px;
}

.thumbs{
	width: 200px;
	float: left;
	clear: left;
}

.thumbs
li{
	margin: 0 2px 6px 0px;
}

.pagination{
	width: 170px;
	text-align: center;
	padding: 5px;
}

.pagination.top{padding: 0px;}
	
	.pagination
	a{
		width: 15px;
		display: inline-block;
		margin: 0 5px 5px;
		padding: 2px;
		float: none !important;
		text-decoration: none;
		border: 1px solid #D99E28;
	}
	
	.pagination
	span{
		margin: 0 5px 5px;
		float: none !important;
		display: inline-block;
	}

#controls,
#caption{
	width: 504px;
	left: 18px;
}

#controls{
	height: 20px;
}

#controls
a{
	text-transform: uppercase;
	font-size: 70%;
}

#content
.nav-controls{
	float: right;
}

#content
.nav-controls
a{
	margin-left: 10px;
}

#controls,
.thumbs,
#slideshow,
.image-wrapper,
.advance-link,
.advance-link img{
	float: none  !important;
	text-align: center;
}

.picturegallery
#content
img{
	border: 1px solid #fff;
	display: inherit;
	margin: 2px;
}

li.selected
a.thumb{
	border: 1px solid #222;	
}

.picturegallery
#content
li.selected
img{
	border: 3px solid #555;	
	margin: 0;
}


a.thumb{
	border: 1px solid #ccc;
}

.picturegallery
#slideshow
img{
	border:5px solid #555555;
	width: 500px;
}

#content .caption,
#content .image-title,
#content .image-desc{
	float: right;
	clear: right;
	text-align: center;
	width: 100%;
}

#content .image-title{
	font-weight: bold;
	padding: 5px 0 3px;
}

#content .image-desc{
	font-size: 80%;	
}

#gallery{
	width: 540px;
	top: 20px;
}



/* varauskalenteri ---------------------*/

#reservationcalendar_iframe{
	width: 100%;
	height: 1150px;
	display: block;
	border: none;
}

.info_text_wide.right.small,
.activities{
	float: right !important;
	clear: right;
	right: 205px;
}

.brochure_block{
	clear:right;
	float:right !important;
	width:495px;
}



.activities{
	right: 145px;
}



/* yhteydenotto ---------------------*/

div.contact_infotext{
	width: 250px;
	height: 200px;
	left: 20px;
}

.contact
h3,
.contact
p{
	top: 10px;
}

#content
form{
	left: 50px;
}

#content
form
label{
	clear: left;
	color: #222;
}

input,
textarea{
	margin-bottom: 10px;
	clear: left;
}

input.submit_button{
	clear: left;
	top: 10px;
}


form
label,
form
input{
	font-size: 100%;
	width: 250px;
}

form
li{
	clear: left;
}

.formFieldQuestion{
	font-size:125%;
	font-weight:bold;
	padding:30px;
}

.comment_field{
	width: 250px;
	height: 200px;
}




/* footer ---------------------*/

#footer{
	width: 766px;
	float: left;
	padding: 10px;
	background-color: #ffcc66;
	position: relative;
	margin-bottom: -32px;
}

#footer
p{
	text-transform: uppercase;
	color: #996600;
	font-size: 65%;
	line-height: 75%;
	top: 5px;
}

#footer
.footer_left
p{
	float: left;
	clear: left;
}

.reservation{
	width: 246px;
	height: 52px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	line-height: 54px;
	text-decoration: none;
	left: 250px;
	top: 20px;
	clear: left;
	margin: 20px 0;
	background:url(img/reservation_button_turq.png) no-repeat;
}
	.reservation:hover{
		color: #333;
	}
	
	.reservations
	.reservation{
	top: 0px;
	}
	
	.frontpage
	.reservation{
		float:right !important;
		left:-15px;
		margin:0;
		top:-65px;
	}


	.picturegallery
	.reservation{
		left: 342px;
	}



#footer
.footer_right
p{
	float: right;
	clear: right;
}


#footer
.footer_right{
	float: right;
	text-align: right;
}


#bottom_bg{
	background:url(img/footer_bg.png) no-repeat;
	float:left;
	height:21px;
	position:relative;
	right:21px;
	top:31px;
	width:827px;
	padding: 5px;
}