/*SWATCHES*/

/* beige #9c7855 */
/* beige dark text #7f6348 */
/* dark grey #484542 */

/****** PERUSTYYLIT ********/

html {background: #020100;}

body {font-size: 70%;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 120%;
	  color: #484542;
	  background: #e1e1e1 url('../images/sand.jpg');
	  /*background: #e1e1e1 url('pics/melonta.jpg') top center;*/
	  }

a {text-decoration: underline; color: #9c7855;}
a:hover {text-decoration: underline;}
a.read-more:before {content: '\00bb \00a0'; display: inline;}
a.read-more:hover {text-decoration: underline;}

h1, h2, h3 {font-weight: normal; color: #020100;line-height: 122%;}

h1 {clear: left; font-size: 26px; border-bottom: 1px solid #9c7855; padding-bottom: 3px; margin: 8px 0 10px 0;line-height: 29px;}

h2 {font-size: 20px; margin: 10px 0; border-bottom: 1px dotted #9c7855;}
h2.block-title {font-weight: bold; border-bottom: 1px solid #9c7855;}
hr {display: block; clear: both;}

#bottom-shade {width: 1000px; height: 200px; display: block; margin: -90px auto -90px auto; background: url('../images/white-bg-bottom.png') no-repeat bottom center;}
/*******  LAYOUT JA OSIOIDEN TYYLIT ********/

#doc {width: 100%; display: block; background: url('../images/white-bg.png') repeat-y top center;}

#hd {width: 960px; padding: 0 20px; margin: 0 auto; background: url('../images/top-image-shadow.png') no-repeat;}

#bd {width: 960px; display: block; margin: 0 auto; padding-bottom: 100px;}
#ft {}

#yui-main {width: 750px; display: block; float:right;}

/* HEADER */

#headerimage {height: 300px; overflow: hidden;}

/*topnavi*/
#topmenu-row {background: url('../images/topnavi-bg.png') bottom repeat-x; height: 33px; z-index: 20;}
#topmenu {height: 33px; font-weight: bold;}
#topmenu a {text-decoration: none;vertical-align: top; color: #7f6348; font-size: 14px; padding: 10px 0 9px 0; display: inline-block; margin: 0 5px; cursor: pointer;}
#topmenu a:hover {color: #020100; text-decoration: none; cursor: pointer;}
#topmenu a.selected {color: #020100; margin: 0 0; background: url('../images/topnavi-tab.png') repeat-x;height: 33px;}
.topmenu-separator {vertical-align: top; display: inline-block; width: 29px; height: 33px;}
.topmenu-separator-left {background: url('../images/topnavi-tab-l.png') no-repeat;height: 33px;}
.topmenu-separator-right {background: url('../images/topnavi-tab-r.png') no-repeat;height: 33px;}
/* LEFT MENU */


/* LEFT MENU */

.leftmenu {width: 200px; display: block; float: left; clear:left; margin-right: 10px;}
.leftmenu a {text-decoration: none;color: #020100;}
.leftmenu a.selected {color: #7f6348;}
.leftmenu a:hover {color: #9c7855; text-decoration: none;}
.leftmenu ul, .leftmenu li {width: 100%;}
.leftmenu li.md3 a:hover, .leftmenu li.md3 a.selected {text-decoration: underline;}
.leftmenu li.md1 {border-bottom: 1px solid #9c7855; cursor: pointer;}
.leftmenu a.md1 {font-size: 14px; font-weight: bold; display: inline-block; padding: 10px 0 10px 12px; background: url('../images/menu-arrow-closed2.png') no-repeat left center;}

.leftmenu a {padding-left: 12px;}

.leftmenu li.md1:hover a.md1 {background: url('../images/menu-arrow-open.png') no-repeat left center;} 
.leftmenu li.md1:hover a.md1:hover {background: url('../images/menu-arrow-closed.png') no-repeat left center;} 

.leftmenu a.md2 {font-size: 13px; font-weight: bold; display: inline-block; padding: 4px 0 4px 12px;}

.leftmenu ul.md2 {border-top: 1px solid #9c7855; padding: 0 0;}

.leftmenu li.md2 {cursor: pointer; border-top: 1px dotted #9c7855; margin-top: -1px;}
.leftmenu li.md2 a.md2, .leftmenu li.md2:hover a.md2:hover {background: url('../images/menu-arrow-small-closed.png') no-repeat left center;}
.leftmenu li.md2:hover a.md2 {background: url('../images/menu-arrow-small-open.png') no-repeat left center;}
.leftmenu li.leaf a.md2, .leftmenu li.leaf:hover a.md2,  .leftmenu li.leaf:hover a.md2:hover, .leftmenu li.leaf:hover a.md3 {background: none;}
.leftmenu li.leaf {cursor: default;}
.leftmenu li.leaf a, .leftmenu li.leaf a:hover, .leftmenu li.leaf:hover a {background: none;}

.leftmenu ul.md3 {padding: 2px 0 12px 0;}

.leftmenu li.md3 {height: 1.6em;}
.leftmenu ul.md4 {padding: 2px 0 14px 0;}

.leftmenu li.md4 {height: 1.6em;}
.leftmenu ul.open {display: block;}


/*********  MAIN   ************/

/* Submenu */

#submenu {float: right; height: 35px; clear:right; display: block; padding: 6px 0 6px 0px; margin: 0px 0px 10px 10px; /*border-left: 1px dotted #9c7855;*/ }
#submenu a {text-decoration: none;display: block; width: auto; padding-left: 15px; text-align:center; float: left;}
#submenu a.on {display: none;}
#submenu a img {display: block;}
#submenu a:hover {color: #7f6348; text-decoration: none;}
#submenu a:hover img { opacity:0.9;}
/*  breadcrumb */

#breadcrumb {margin-top: 6px; color: #9c7855;}
#breadcrumb a {text-decoration: none;}

/** CONTENT STYLES **/

/*main content*/

#main-content {margin: 0 0 0 0; padding: 0 0 0 0; width: 100%;}
 
#content h2 {clear:both;}
#content h3 {font-size: 14px; font-weight: bold; margin: 15px 0 12px 0;}
#content #newsgroup-view h3 {font-size: 14px; font-weight: bold; margin: 15px 0 2px 0;}
#content p {font-size: 1.1em; line-height: 1.4em; margin-bottom: 6px;border:1px solid transparent;}
#content #textbody img {margin: 15px 20px 20px 0;}
#textbody TABLE img {margin: 0}

#content .introtext {margin-top:10px;width:500px;}
#content .introtext p.article-caption, #content .introtext span.article-caption, #textbody p.article-caption, #destinations-catalog p.article-caption {font-size: 18px; margin: 10px 0; line-height: 20px; color: #020100;}
.article-caption {font-size: 1em; width: auto;font-family: Arial, Helvetica, sans-serif;display:inline-block}

#content .hidden-content {display: none;}

/*SISÄLLÖN OIKEA PALSTA */

#content img.img-alignright {margin-bottom: 0px; width: 240px; display: inline-block; float:right; clear: right;}

#content div.block-right {width: 198px; padding: 10px 20px 20px 20px; margin: 0 0 10px 0; display: inline-block; clear:right; float:right; border:1px solid #9c7855; -moz-border-radius: 10px;-webkit-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;}
#content div.block-right p, #content div.block-right ul, #content div.block-right h2, #content div.block-right h3 {width: auto;}
#content div.block-right h3 {font-size: 16px; margin: 4px 0 4px 0;}
#content div.block-right p {font-size: 1em;}
#content div.block-right ul li a:before {content: '\00bb \00a0'; display: inline;}
#content img.mugshot {border: 1px solid #9c7855; clear: left; float: left; margin: 10px 20px 20px 0;}
#content .infotext {margin-top:0px;margin-bottom:8px;clear:both;border:0px solid #000000;}

/*PIKKUKUVALLISET LISTAT (hotellit, kohteet, tms.)*/

.thumb-block-list {width: 400px;}
.thumb-block-list li {width: 400px; margin-bottom: 4px; border-bottom: 1px dotted #9c7855;}
.thumb-block-list li:last-child {border-bottom: none;}
.thumb-block-list li img {float:left;display: inline-block; vertical-align: top; margin-right: 8px; margin-bottom: 8px;}
.thumb-block-list li a:hover img {opacity: 0.8; filter:alpha(opacity=80);}
#content .thumb-block-list li h4 {width: auto;}
#content .thumb-block-list li p {width: auto; font-size: 1em;}
.block-list-teaser {display: inline-block; width: 270px;float:left;}
.block-list-teaser p {margin-bottom: 4px;}
.block-list-teaser h4 {font-size: 1.1em;}
.block-list-teaser h4 a {color: #333;}
.block-list-teaser h4 a:hover {text-decoration: underline;}
/*
.tiny-thumbs img{width: 29px}
.tiny-thumbs div.block-list-teaser {width: 360px}
.tiny-thumbs div.block-list-teaser p {display: inline-block}

.small-thumbs img{width: 58px}
.small-thumbs div.block-list-teaser {width: 330px}
.small-thumbs div.block-list-teaser p {display: inline-block}
*/

.read-more {text-decoration: none;}

h3.header-hotel-class {font-size: 13px; padding-top: 4px; padding-bottom: 4px; text-transform: uppercase; border-bottom: 1px dotted #9c7855; margin: 20px 0 8px 0; letter-spacing: 1px;}

.header-tasokas {text-decoration: none;line-height: 23px; background: url('../images/icon-kukka2.png') no-repeat left center; padding-left: 25px;border:1px solid transparent;}
.header-mukava {text-decoration: none;text-decoration: none;line-height: 23px; background: url('../images/icon-kukka1.png') no-repeat left center; padding-left: 25px;border:1px solid transparent;}
.header-ylellinen {text-decoration: none;line-height: 23px; background: url('../images/icon-kukka3.png') no-repeat left center; padding-left: 25px;border:1px solid transparent;}

/*** FOOTER ***/
#footer-top {padding: 40px 30px 0 30px; height: 160px; background: url('../images/ft-bg3.png') repeat-x top left; color: #fff;}
#footer-top h3 {color: #fff; font-size: 15px; line-height: 17px; font-weight: bold; margin-bottom: 6px;}
#footer-top p {margin-bottom: 4px;}
#footer-top .footer-block {display: block; float: left; margin-right: 80px;}

#footer-top .footer-block-bordered {padding: 10px 20px 20px 20px; margin: 0 80px 10px 0; border:1px solid #ddd; -moz-border-radius: 10px;-webkit-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;}

#footer-links {background: #020100; display: block; clear:both; padding: 10px 30px 10px 30px; font-size: 0.9em; color: #532912; cursor: default;}
#footer-links a {text-decoration: none;color: #532912;}
.footer-block a.read-more {text-decoration: none;color: #ffffff;}
#footer-links-left {float: left; display: block;color: #ffffff;}
#footer-links-right {float: right; display: block;color: #ffffff;}
#footer-links-left a {text-decoration: none;color: #ffffff;}
#footer-links-right a {text-decoration: none;color: #ffffff;}