@import "/themes/fonecta/fonectaframework/framework.css";
@import "/themes/fonecta/fonectaframework/base.css";


/*
* Skeleton V1.1
* Modified by Fonecta Oy
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

html, body { overflow-x: hidden; overflow-y: auto; }

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}

img {
	max-width: 100% !important;
	height: auto !important;
}


.alpha.eight.columns.sloganWidget {
	z-index: 999;
	position: relative;
}

.responsiveSlidesWrapper {
	position: relative;
	float: left;
	width: 100%;
	margin-top: -76px;
}

/* Heading styles */

h1, h2, h3, h4, h5 ,h6 {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	color: #1a1a1a;
	padding: 7px 10px;
	margin-bottom: 10px;
	background-color: rgba(255, 255, 255, 0.75);
	background-color: rgb(255, 255, 255)\9;
}

h1 { font-size: 24px; line-height: 26px; font-weight: bold; text-transform: uppercase; }
h2 { font-size: 22px; line-height: 24px; }
h3 { font-size: 20px; line-height: 22px; }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 16px; line-height: 18px; }
h6 { font-size: 14px; line-height: 16px; }

/* Content font styles */

p, ul, form {
	clear: both;
	padding: 7px 10px;
	margin-bottom: 10px;
	line-height: 18px;
	color: #fff;

}

strong { color: #fff; }

form { padding-bottom: 20px; }
form p { background: transparent; }

ul li { list-style-type: square; margin-left: 15px; margin-bottom: 0px; }
ul li ul { 
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	background: transparent;
}
ul li ul li { margin-bottom: 0px; }

/* Link styles */

#contentWrapper a { color: #00c0ff; text-decoration: underline; }
#contentWrapper a:hover { text-decoration: none; }

/* TOP AREA */
	
#headerWrapper { margin-top: 40px; }

/* Logo */

#drawer,
#drawerCenter,
#drawerContent,
.logo,
.logoCenter,
.logoContent { overflow: visible !important; }

.logo h2 {
	font-size: 35px;
	line-height: 0px;
	font-weight: bold;
	color: #ff3d8f;
	text-decoration: none;
	padding: 0px 9px;
}
	

.logo a {
	
	font-size: 14px;
	display: flex;
	font-weight: bold;
	color: #ff3d8f;
	text-decoration: none;
	text-transform: uppercase;
}

/* Navigation */

#top,
#topCenter,
#topContent,
#nav { overflow: visible; }

#top { margin-top: 5px; }

#nav ul {
	float: right;
	margin: 0;
	padding: 0;
	overflow-y: visible;
	background: transparent;
}

#nav ul li { display: inline; margin-left: 10px; }

#nav ul li a {
	font-size: 14px;
	line-height: 25px;
	color: #8c8c8c;
	text-decoration: none;
	text-transform: uppercase;
	padding-right: 7px;
	padding-bottom: 5px;
	background: url(pics/navButton_dark.png) no-repeat right bottom;
}

#nav ul li a.open {
	color: #93cb31;
	background: url(pics/navButtonOpen_dark.png) no-repeat right bottom;
}

#nav ul li a:hover {
	color: #fff;
	background: url(pics/navButtonHover_dark.png) no-repeat right bottom;
}

/* Sub-Navigation */

.subnav {
	width: auto !important;
	float: left;
	margin-bottom: 10px;
}

.subnav UL {
	margin: 0;
	padding: 10px 10px 0px 10px;
}
.subnav UL LI {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
}
.subnav UL LI A {
	display: block;
	padding: 0 0 10px 25px;
	margin: 0;
	background: url(pics/subnavButton_dark.png) no-repeat left 0px;
	text-decoration: none !important;
}

.subnav UL LI A:hover {
	background: url(pics/subnavButtonHover_dark.png) no-repeat left 0px;
}
.subnav UL LI A.open {
	background: url(pics/subnavButtonOpen_dark.png) no-repeat left 0px;
}

/* sub
=======*/
.subnav UL LI UL {
	margin: 0px;
	padding: 0px;
}
.subnav UL LI UL LI {
	margin: 0px;
	padding: 0px;
}
.subnav UL LI UL LI A {
	margin: 0 0 0 20px;
	padding: 0px 0px 10px 25px;
	background: url(pics/subnavButton_dark.png) no-repeat left 0px;
}
.subnav UL LI UL LI A:hover {
	background: url(pics/subnavButtonHover_dark.png) no-repeat left 0px;
}
.subnav UL LI UL LI A.open {
	background: url(pics/subnavButtonOpen_dark.png) no-repeat left 0px;
}

/* subsub
==========*/
.subnav UL LI UL LI UL {
	
}
.subnav UL LI UL LI UL LI {
	
}
.subnav UL LI UL LI UL LI A {
	margin: 0 0 0 40px;
	padding: 0px 0px 10px 25px;
	background: url(pics/subnavButton_dark.png) no-repeat left 0px;
}
.subnav UL LI UL LI UL LI A:hover {
	background: url(pics/subnavButtonHover_dark.png) no-repeat left 0px;
}
.subnav UL LI UL LI UL LI A.open {
	background: url(pics/subnavButtonOpen_dark.png) no-repeat left 0px;
}

/* Banner */

#header {
	border-top: 1px solid #fff;
	margin-top: 20px;
}
#headerCenter { padding-top: 27px; }
#headerContent {
	height: 425px;
	-moz-box-shadow: 0 2px 4px #7a7a7a;
	-webkit-box-shadow: 0 2px 4px #7a7a7a;
	box-shadow: 0px 2px 4px #7a7a7a;
}

/* Slogan */

.sloganWidget {
	position: relative;
	top: 157px;
	left: 480px;
	overflow: hidden;
}

.sloganWidget h3 { font-size: 22px; line-height: 26px; text-transform: uppercase; }

/* Content Area*/

#contentWrapper {
	padding-top: 25px;
	padding-bottom: 15px;
}

/* LEFT */

/* Yhteystiedot */

#left-column .siteInfo {
	padding: 7px 10px;
	margin-bottom: 10px;
	line-height: 20px;
	color: #ffff00;
	background-color: rgba(0, 0, 0, 0.85);
	background-color: rgb(0, 0, 0)\9;
}

.dark #left-column .siteInfo {
	color: #ffff00;
}

#left-column .companyname,
#left-column .companyaddress1,
#left-column .companyaddress2,
#left-column .companyzip,
#left-column .companycity,
#left-column .companycountry,
#left-column .companyphone1,
#left-column .companyphone2,
#left-column .companyemail,
#left-column .companywww {
	width: 100% !important;
	color: #fff;
}

#left-column .contactLabel, #left-column .companyzipOutput {
	float: left;
	font-weight: normal;
}

#left-column .companyphone1Output, #left-column .companycityOutput {
	float: left;
	padding-left: 5px;
}
#left-column .companyemail, #left-column .companycountry, #left-column .companyphone1 {
	clear: both;
}

/* MAIN */

/* Yhteydenottolomake */

#main-column form p {
	padding-bottom: 0;
	margin-bottom: 0;
}

#main-column form input {
	width: auto !important;
	margin-right: 10px;
}

#main-column form p input.button {
	width: auto !important;
	margin-right: 10px;
	margin-bottom: 0;
}

#main-column form textarea {
	width: 97% !important;
}

/* Bottom Area */

#bottom {
	margin-top: 15px;
	border-bottom: 1px dashed #fff;
}

#footerWrapper {
	margin-bottom: 12px;
}

/* Footer sitemap */

#footer .sitemapWidget {
	padding-top: 10px;
}

#footer .sitemapWidget ul {
	margin-top: -5px;
	padding: 0;
	background: transparent !important;
}

#footer .sitemapWidget ul li {
	list-style-type: none;
	margin-left: 0px;
}

#footer .sitemapWidget ul li a {
	font-size: 0.85em;
	color: #fff;
	text-decoration: none;
	padding-left: 17px;
	padding-top: 1px;
	padding-bottom: 1px;
	background: url(pics/footerNavButton_dark.png) no-repeat left center;
}

#footer .sitemapWidget ul li a:hover {
}

#footer .sitemapWidget ul li a.open {
	color: #82b724;
}

/* Footer Widget Styles */

.yritysWidget,
.osoiteWidget,
.contactWidget {
	padding-top: 10px;
}

#footerWrapperContent .companyzip {
	float: left;
	margin-right: 3px;
}

#footerWrapperContent .companyname,
#footerWrapperContent .companycountry,
#footerWrapperContent .companyaddress1,
#footerWrapperContent .companyzip,
#footerWrapperContent .companycity,
#footerWrapperContent .companyphone1,
#footerWrapperContent .companyemail {
	color: #fff;
	font-size: 0.85em;
	line-height: 7px;
	padding: 0;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-bottom: 10px;
}

/* Facebook */

.facebookFanbox {
	width: 95%;
	height: auto !important;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border: 1px solid #ddd;
	background-color: #fff;
}

/* Kartta */

#MapArea {
	display: block;
	overflow: hidden;
	width: 100% !important;
}


/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Larger than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) {
	
		/* Background & Color Presets*/
	
		html {
			background: #f7f3ef;
		}
		body {
			background: #f7f3ef;
		}
		html.light {
			background: #f7f3ef;
		}
		body.light {
			background: #f7f3ef;
		}
		html.dark {
			background: #000 url(pics/bg_dark_XL.jpg) no-repeat top center fixed;
		}
		body.dark {
			background: #000 url(pics/bg_dark_XL.jpg) no-repeat top center fixed;
		}
		html.color {
			background: #efd056 url(pics/bg_color_XL.jpg) no-repeat top center fixed;
		}
		body.color {
			background: #efd056 url(pics/bg_color_XL.jpg) no-repeat top center fixed;
		}
	
		/* Banner */
	
/*		#headerContent {
			background: url(pics/banners/banner_XL.png) no-repeat center top;
		}
	
	}
	
*/
	/* Smaller than standard 960 (devices and browsers) */
		@media only screen and (max-width: 959px) {
			.video{display:none;}
		}
	
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
		/* Background & Color Presets */
	
		html {
			background: #f7f3ef;
		}
		body {
			background: #f7f3ef;
		}
		html.light {
			background: #f7f3ef;
		}
		body.light {
			background: #f7f3ef;
		}
		html.dark {
			background: #000 url(pics/bg_dark_L.jpg) no-repeat top center fixed;
		}
		body.dark {
			background: #000 url(pics/bg_dark_L.jpg) no-repeat top center fixed;
		}
		html.color {
			background: #efd056 url(pics/bg_color_L.jpg) no-repeat top center fixed;
		}
		body.color {
			background: #efd056 url(pics/bg_color_L.jpg) no-repeat top center fixed;
		}
	
		/* Navigation */
	
		#nav ul li a {
			font-size: 12px;
		}
	
		/* Banner */

		#headerContent {
			height: 338px;
			background: url(pics/banners/banner_L.png) no-repeat center top;
		}
	
		/* Slogan */
	
		.sloganWidget {
			top: 105px;
			left: 383px;
		}
		.sloganWidget h3 {
			font-size: 16px;
		}
	
		#footerWrapperContent {
			width: 767px;
			padding-bottom: 0;
		}	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		#main-column .video { display: none !important; }

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
		/* Background & Color Presets */
	
		html {
			background: #f7f3ef;
		}
		body {
			background: #f7f3ef;
		}
		html.light {
			background: #f7f3ef;
		}
		body.light {
			background: #f7f3ef;
		}
		html.dark {
			background: #000 url(pics/bg_dark_M.jpg) no-repeat top center fixed;
		}
		body.dark {
			background: #000 url(pics/bg_dark_M.jpg) no-repeat top center fixed;
		}
		html.color {
			background: #efd056 url(pics/bg_color_M.jpg) no-repeat top center fixed;
		}
		body.color {
			background: #efd056 url(pics/bg_color_M.jpg) no-repeat top center fixed;
		}
	
		/* Fonts */
	
		h1 { font-size: 1.2em; }
		h2 { font-size: 1.1em; }
		h3 { font-size: 1.0em; }
		h4 { font-size: 0.9em; }
		h5 { font-size: 0.8em; }
		h6 { font-size: 0.7em; }
		p { font-size: 0.95em; }
		ul li { font-size: 0.95em; }
		ul li ul li { font-size: 1.05em; }
		
		#headerWrapper {
			margin-top: 20px;
		}
	
		/* Logo */
	
		.logo {
			margin-bottom: 5px;
		}
	
		.logo a {
			font-size: 18px;
			line-height: 22px;
		}
	
		/* Navigation */
	
		#nav ul {
			float: left;
		}
		#nav ul li {
			margin-left: 0px;
			margin-right: 5px;
		}
		#nav ul li a,
		#nav ul li a:hover,
		#nav ul li a.open {
			font-size: 12px;
			line-height: 23px;
			-webkit-background-size: 7px 7px;
			-moz-background-size: 7px 7px;
			-o-background-size: 7px 7px;
			background-size: 7px 7px;
		}
	
		/* Subnavigation */
	
		.subnav ul li a,
		.subnav ul li a:hover,
		.subnav ul li a.open,
		.subnav ul li ul li a,
		.subnav ul li ul li a:hover,
		.subnav ul li ul li a.open {
			background-position: left 3px;
			-webkit-background-size: 12px 12px;
			-moz-background-size: 12px 12px;
			-o-background-size: 12px 12px;
			background-size: 12px 12px;
		}
	
		/* Banner */

		#headerContent {
			height: 190px;
			background: url(pics/banners/banner_M.png) no-repeat center top;
		}
	
		/* Slogan */

		.sloganWidget {
			width: 50% !important;
			top: 52px;
			left: 210px;
		}
	
		.sloganWidget h3 {
			font-size: 12px;
			line-height: 14px;
		}
	
		/* Footer */
		
		#footerWrapperContent {
			width: 420px;
		}
	
		/* Yhteystiedot */
	
		#left-column .companyname,
		#left-column .companyaddress1,
		#left-column .companyaddress2,
		#left-column .companyzip,
		#left-column .companycity,
		#left-column .companycountry,
		#left-column .companyphone1,
		#left-column .companyphone2,
		#left-column .companyemail,
		#left-column .companywww {
			font-size: 0.85em;
			line-height: 20px;
		}
		#left-column .contactLabel {
			font-size: 1.0em;
		}
	
		/* Aukioloajat */
		
		#left-column .openingHours {
			font-size: 0.85em;
		}
	
		/* Yhteydenottolomake */
	
		#main-column form input {
			width: 97.5% !important;
		}
		#main-column form textarea {
			width: 97.5% !important;
		}
		
		/* Footer Sitemap */
	
		#footer .sitemapWidget {
			float: left !important;
			width: 47.6% !important;
		}
		#footer .sitemapWidget ul li a {
			font-size: 0.95em;
		}
	
		/* Footer information */
	
		#footer .companyname,
		#footer .companycountry,
		#footer .companyaddress1,
		#footer .companyzip,
		#footer .companycity,
		#footer .companyphone1,
		#footer .companyemail {
			font-size: 0.85em;
			line-height: 6px;
		}
		.yritysWidget {
			float: right !important;
			width: 52% !important;
			border: none;
			height: auto;
		}
		.osoiteWidget {
			float: right !important;
			width: 52% !important;
			border: none;
			height: auto;
			padding: 0;
		}
		.contactWidget {
			float: right !important;
			width: 52% !important;
			border: none;
			height: auto;
			padding: 0 0 10px 0;
		}
	
		/* Kartta */
	
		#MapArea {
			height: 235px !important;
			margin-bottom: 13px;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
		/* Background & Color Presets */
	
		html {
			background: #f7f3ef;
		}
		body {
			background: #f7f3ef;
		}
		html.light {
			background: #f7f3ef;
		}
		body.light {
			background: #fff;
		}
		html.dark {
			background: #000 url(pics/bg_dark_S.jpg) no-repeat top center fixed;
		}
		body.dark {
			background: #000 url(pics/bg_dark_S.jpg) no-repeat top center fixed;
		}
		html.color {
			background: #efd056 url(pics/bg_color_S.jpg) no-repeat top center fixed;
		}
		body.color {
			background: #efd056 url(pics/bg_color_S.jpg) no-repeat top center fixed;
		}
	
		/* Fonts */
	
		h1 { font-size: 1.1em; }
		h2 { font-size: 1.0em; }
		h3 { font-size: 0.9em; }
		h4 { font-size: 0.8em; }
		h5 { font-size: 0.7em; }
		h6 { font-size: 0.7em; }
		p { font-size: 0.9em; }
		ul li { font-size: 0.9em; }
		ul li ul li { font-size: 1.05em; }
	
		#headerWrapper {
			margin-top: 20px;
		}
	
		/* Logo */
	
		.logo {
			margin-bottom: 5px;
		}
	
		.logo a {
			font-size: 16px;
			line-height: 20px;
		}
	
		/* Navigation */
	
		#nav ul {
			float: left;
		}
		#nav ul li {
			margin-left: 0px;
			margin-right: 0px;
		}
		#nav ul li a,
		#nav ul li a:hover,
		#nav ul li a.open {
			font-size: 10px;
			line-height: 16px;
			-webkit-background-size: 6px 6px;
			-moz-background-size: 6px 6px;
			-o-background-size: 6px 6px;
			background-size: 6px 6px;
		}
	
		/* Subnavigation */
	
		.subnav ul li a,
		.subnav ul li a:hover,
		.subnav ul li a.open,
		.subnav ul li ul li a,
		.subnav ul li ul li a:hover,
		.subnav ul li ul li a.open {
			background-position: left 3px;
			-webkit-background-size: 12px 12px;
			-moz-background-size: 12px 12px;
			-o-background-size: 12px 12px;
			background-size: 12px 12px;
		}
		
		/* Banner */
	
		#headerContent {
			height: 136px;
			background: url(pics/banners/banner_S.png) no-repeat center top;
		}
	
		/* Slogan */
	
		.sloganWidget {
			width: 50% !important;
			top: 20px;
			left: 150px;
		}
	
		.sloganWidget h3 {
			font-size: 10px;
			line-height: 12px;
		}
	
		/* Yhteystiedot */
	
		#left-column .companyname,
		#left-column .companyaddress1,
		#left-column .companyaddress2,
		#left-column .companyzip,
		#left-column .companycity,
		#left-column .companycountry,
		#left-column .companyphone1,
		#left-column .companyphone2,
		#left-column .companyemail,
		#left-column .companywww {
			font-size: 0.85em;
			line-height: 20px;
		}
		#left-column .contactLabel {
			font-size: 1.0em;
		}
	
		/* Aukioloajat */
		
		#left-column .openingHours {
			font-size: 0.85em;
		}
	
		/* Yhteydenottolomake */
	
		#main-column form input {
			width: 96.5% !important;
		}
		#main-column form textarea {
			width: 96.5% !important;
		}
	
		/* Footer */
		
		#footerWrapperContent {
			width: 300px;
		}

		/* Sitemap */
	
		#footer .sitemapWidget {
			float: left !important;
			width: 47.6% !important;
		}
		#footer .sitemapWidget ul li a {
			font-size: 0.90em;
		}
	
		/* Footer information */
	
		#footer .companyname,
		#footer .companycountry,
		#footer .companyaddress1,
		#footer .companyzip,
		#footer .companycity,
		#footer .companyphone1,
		#footer .companyemail {
			font-size: 0.80em;
			line-height: 7px;
		}
		.yritysWidget {
			float: right !important;
			width: 52% !important;
			border: none;
			height: auto;
			padding: 10px 0 0 0;
		}
		.osoiteWidget {
			float: right !important;
			width: 52% !important;
			border: none;
			height: auto;
			padding: 0;
		}
		.contactWidget {
			float: right !important;
			width: 52% !important;
			border: none;
			height: auto;
			padding: 0;
		}
	
		/* Kartta */

		#MapArea {
			height: 235px !important;
			margin-bottom: 10px;
		}
	}


/* #COLOR PRESETS
================================================== */

body.light { color: #444; }
body.dark { color: #fff; }
body.color { color: #1a1a1a; }

/* Headings */

.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
	color: #846150;
	background-color: #ede4db;
	background-color: #ede4db;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
	color: #1a1a1a;
	background-color: rgba(255, 255, 255, 0.75);
	background-color: rgb(255, 255, 255)\9;
}

.color h1,
.color h2,
.color h3,
.color h4,
.color h5,
.color h6 {
	color: #fff;
	background-color: rgba(0, 0, 0, 0.85);
	background-color: rgb(0, 0, 0)\9;
}

/* Content text */

.light p,
.light ul,
.light form {
	
	margin-bottom: 20px;
	color: #444;
	background-color: rgba(255, 255, 255, 0.75);
	background-color: rgb(255, 255, 255)\9;
}

.dark p,
.dark ul,
.dark form {
	color: #fff;
	background-color: rgba(0, 0, 0, 0.85);
	background-color: rgb(0, 0, 0)\9;
}

.color p,
.color ul,
.color form {
	color: #1a1a1a;
	background-color: rgba(255, 255, 255, 0.75);
	background-color: rgb(255, 255, 255)\9;
}

.light strong { color: #1a1a1a; }
.dark strong { color: #fff; }
.color strong { color: #1a1a1a; }

.light form p,
.light ul li ul,
.dark form p,
.dark ul li ul,
.color form p,
.color ul li ul { background: transparent; }

/* Content links */

.light #contentWrapper a { color: #b83c00; }
.dark #contentWrapper a { color: #00c0ff; }
.color #contentWrapper a { color: #2a9ac8; }

.light .logo a { color: #35b3dd; }
.dark .logo a { color: #ff3d8f; }
.color .logo a { color: #3ca9d6; }

/* Navigation */

.light #nav ul li a {
	color: #8c8c8c;
	background-image: url(pics/navButton_light.png);
}

.dark #nav ul li a {
	color: #8c8c8c;
	background-image: url(pics/navButton_dark.png);
}

.color #nav ul li a {
	color: #3d3d3d;
	background-image: url(pics/navButton_color.png);
}

.light #nav ul li a.open {
	color: #91624c;
	background-image: url(pics/navButtonOpen_light.png);
}

.dark #nav ul li a.open {
	color: #ffff00;
	background-image: url(pics/navButtonOpen_dark.png);
}

.color #nav ul li a.open {
	color: #3ca9d6;
	background-image: url(pics/navButtonOpen_color.png);
}

.light #nav ul li a:hover {
	color: #91624c;
	background-image: url(pics/navButtonHover_light.png);
}

.dark #nav ul li a:hover {
	color: #fff;
	background-image: url(pics/navButtonHover_dark.png);
}

.color #nav ul li a:hover {
	color: #f4206b;
	background-image: url(pics/navButtonHover_color.png);
}

/* Subnavigation */

.light .subnav UL LI A {
	background-image: url(pics/subnavButton_light.png);
}
.dark .subnav UL LI A {
	background-image: url(pics/subnavButton_dark.png);
}
.color .subnav UL LI A {
	background-image: url(pics/subnavButton_color.png);
}

.light .subnav UL LI A:hover {
	background-image: url(pics/subnavButtonHover_light.png);
}
.dark .subnav UL LI A:hover {
	background-image: url(pics/subnavButtonHover_dark.png);
}
.color .subnav UL LI A:hover {
	background-image: url(pics/subnavButtonHover_color.png);
}

.light .subnav UL LI A.open {
	background-image: url(pics/subnavButtonOpen_light.png);
}
.dark .subnav UL LI A.open {
	background-image: url(pics/subnavButtonOpen_dark.png);
}
.color .subnav UL LI A.open {
	background-image: url(pics/subnavButtonOpen_color.png);
}

.light .subnav UL LI UL LI A {
	background-image: url(pics/subnavButton_light.png);
}
.dark .subnav UL LI UL LI A {
	background-image: url(pics/subnavButton_dark.png);
}
.color .subnav UL LI UL LI A {
	background-image: url(pics/subnavButton_color.png);
}

.light .subnav UL LI UL LI A:hover {
	background-image: url(pics/subnavButtonHover_light.png);
}
.dark .subnav UL LI UL LI A:hover {
	background-image: url(pics/subnavButtonHover_dark.png);
}
.color .subnav UL LI UL LI A:hover {
	background-image: url(pics/subnavButtonHover_color.png);
}

.light .subnav UL LI UL LI A.open {
	background-image: url(pics/subnavButtonOpen_light.png);
}
.dark .subnav UL LI UL LI A.open {
	background-image: url(pics/subnavButtonOpen_dark.png);
}
.color .subnav UL LI UL LI A.open {
	background-image: url(pics/subnavButtonOpen_color.png);
}

.light .subnav UL LI UL LI UL LI A {
	background-image: url(pics/subnavButton_light.png);
}
.dark .subnav UL LI UL LI UL LI A {
	background-image: url(pics/subnavButton_dark.png);
}
.color .subnav UL LI UL LI UL LI A {
	background-image: url(pics/subnavButton_color.png);
}

.light .subnav UL LI UL LI UL LI A:hover {
	background-image: url(pics/subnavButtonHover_light.png);
}
.dark .subnav UL LI UL LI UL LI A:hover {
	background-image: url(pics/subnavButtonHover_dark.png);
}
.color .subnav UL LI UL LI UL LI A:hover {
	background-image: url(pics/subnavButtonHover_color.png);
}

.light .subnav UL LI UL LI UL LI A.open {
	background-image: url(pics/subnavButtonOpen_light.png);
}
.dark .subnav UL LI UL LI UL LI A.open {
	background-image: url(pics/subnavButtonOpen_dark.png);
}
.color .subnav UL LI UL LI UL LI A.open {
	background-image: url(pics/subnavButtonOpen_color.png);
}

/* Banner */

.light #header { border-top: 1px solid #a88b7d;}
.dark #header { border-top: 1px dashed #fff; }
.color #header { border-top: 1px dashed #f4206b; }

/* Yhteystiedot */

.light #left-column .siteInfo {
	color: #b83c00;
	background-color: rgba(255, 255, 255, 0.75);
	background-color: rgb(255, 255, 255)\9;
}
.dark #left-column .siteInfo {
	color: #ffff00;
	background-color: rgba(0, 0, 0, 0.85);
	background-color: rgb(0, 0, 0)\9;
}
.color #left-column .siteInfo {
	color: #2a9ac8;
	background-color: rgba(255, 255, 255, 0.75);
	background-color: rgb(255, 255, 255)\9;
}

.light #left-column .companyname,
.light #left-column .companyaddress1,
.light #left-column .companyaddress2,
.light #left-column .companyzip,
.light #left-column .companycity,
.light #left-column .companycountry,
.light #left-column .companyphone1,
.light #left-column .companyphone2,
.light #left-column .companyemail,
.light #left-column .companywww {
	color: #1a1a1a;
}

.dark #left-column .companyname,
.dark #left-column .companyaddress1,
.dark #left-column .companyaddress2,
.dark #left-column .companyzip,
.dark #left-column .companycity,
.dark #left-column .companycountry,
.dark #left-column .companyphone1,
.dark #left-column .companyphone2,
.dark #left-column .companyemail,
.dark #left-column .companywww {
	color: #fff;
}

.color #left-column .companyname,
.color #left-column .companyaddress1,
.color #left-column .companyaddress2,
.color #left-column .companyzip,
.color #left-column .companycity,
.color #left-column .companycountry,
.color #left-column .companyphone1,
.color #left-column .companyphone2,
.color #left-column .companyemail,
.color #left-column .companywww {
	color: #1a1a1a;
}

/* Footer area */

.light #bottom {
	border-bottom: 1px solid #a88b7d;
}
.dark #bottom {
	border-bottom: 1px dashed #fff;
}
.color #bottom {
	border-bottom: 1px dashed #f4206b;
}

/* Footer navigation */

.light #footer .sitemapWidget ul li a {
	color: #1a1a1a;
}
.dark #footer .sitemapWidget ul li a {
	color: #fff;
	background-image: url(pics/footerNavButton_dark.png);
}
.color #footer .sitemapWidget ul li a {
	color: #3d3d3d;
	background-image: url(pics/footerNavButton_color.png);
}

.light #footer .sitemapWidget ul li a:hover {
	color: #91624c;
}
.dark #footer .sitemapWidget ul li a:hover {
	background-image: url(pics/footerNavButtonOpen_dark.png);
}
.color #footer .sitemapWidget ul li a:hover {
	background-image: url(pics/footerNavButtonOpen_color.png);
}

.light #footer .sitemapWidget ul li a.open {
	color: #91624c;
	
}
.dark #footer .sitemapWidget ul li a.open {
	color: #00c0ff;
	background-image: url(pics/footerNavButtonOpen_dark.png);
}
.color #footer .sitemapWidget ul li a.open {
	color: #f4206b;
	background-image: url(pics/footerNavButtonOpen_color.png);
}

/* Footer company information */

.light #footerWrapperContent .companyname,
.light #footerWrapperContent .companycountry,
.light #footerWrapperContent .companyaddress1,
.light #footerWrapperContent .companyzip,
.light #footerWrapperContent .companycity,
.light #footerWrapperContent .companyphone1,
.light #footerWrapperContent .companyemail {
	color: #1a1a1a;
}
.dark #footerWrapperContent .companyname,
.dark #footerWrapperContent .companycountry,
.dark #footerWrapperContent .companyaddress1,
.dark #footerWrapperContent .companyzip,
.dark #footerWrapperContent .companycity,
.dark #footerWrapperContent .companyphone1,
.dark #footerWrapperContent .companyemail {
	color: #fff;
}
.color #footerWrapperContent .companyname,
.color #footerWrapperContent .companycountry,
.color #footerWrapperContent .companyaddress1,
.color #footerWrapperContent .companyzip,
.color #footerWrapperContent .companycity,
.color #footerWrapperContent .companyphone1,
.color #footerWrapperContent .companyemail {
	color: #3d3d3d;
}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/