@charset "utf-8";

/*********************************************************************
CSS RESET
**********************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }



/*********************************************************************
FONTS
**********************************************************************/

h1 { 
	background: url('../img/bg-h1.gif') 0 100% repeat-x; 
	color: #5d5043; 
	font: bold 24px Helvetica, Arial, sans-serif; 
	line-height: 35px; 
	margin: 10px 0 22px; 
	padding-right: 60px; 
}
.frontpage h1 { 
	background: none; 
	color: #fff; 
	font-size: 20px; 
	line-height: 25px; 
	margin: 0 0 15px;
}
h2 { 
	background: url('../img/bg-h1.gif') 0 100% repeat-x; 
	color: #5d5043; 
	font: normal 18px Helvetica, Arial, sans-serif; 
	margin: 15px 0; 
	padding-bottom: 5px;
}
#h2-frontpage, #h2-frontpage h2 {
	background: url('../img/bg-h1.gif') 0 100% repeat-x; 
	color: #5d5043; 
	font: normal 18px Helvetica, Arial, sans-serif; 
	margin: 20px 5px 15px;
	text-transform: uppercase;
}
h3 { 
	color: #3a3a34; 
	font: bold 12px Arial, Helvetica, sans-serif; 
	line-height: 18px; 
	margin: 5px 0 0; 
}

h4 { 
	color: #5d5043; 
	font: bold 15px Arial, Helvetica, sans-serif; 
	line-height: 18px; 
	margin: 5px 0 0; 
}

#innercontent p, 
#innercontent li { color: #3a3a34; font: 12px Arial, Helvetica, sans-serif sans-serif; line-height: 18px; }
.frontpage .headline { color: #faf4e4; font-size: 16px; margin: 0 0 20px; }
#innercontent ul, #innercontent ol { clear: left; margin: 5px 15px 22px 30px; }
#innercontent ul ul, #innercontent ol ol { margin: 0 0 0 30px; }
#innercontent li { margin: 4px 0; }
#innercontent li li { margin: 2px 0; }
#innercontent p { margin: 0 0 22px; }
#innercontent a, .sidebar p a { color: #ec8b00; text-decoration: none; }
#innercontent a:hover, .sidebar p a:hover  { text-decoration: underline; }
#innercontent a:active, .sidebar p a:active { color: #272213; }

#innercontent #output p { margin: 0; }

#innercontent table td { color: #3a3a34; font-size: 12px; padding: 5px 20px 5px 10px; vertical-align: top; }

.sidebar p {
	background: #f6f5f3; 
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #e6e0d5; 
	color: #3a3a34; 
	display: block; 
	font-size: 12px;
	line-height: 18px;
	margin: 0 2px;
	padding: 9px 15px 8px 15px; 
	text-decoration: none; 
}
.sidebar p a { color: #3a3a34; }

/*********************************************************************
BODY LAYOUT
**********************************************************************/

body { background: #e2dbd0; font-family: Arial, Helvetica, sans-serif; }
.frontpage #wrapper { background: #f2eee7 url('../img/bg-frontpage-wrapper.jpg') 50% 0 no-repeat; }
#wrapper { background: #f2eee7 url('../img/bg-wrapper.jpg') no-repeat 50% 0; text-align: center; }
#header { height: 80px; margin: 0 auto; text-align: left; width: 960px; }
#header #logo { display: block; float: left; margin: 20px 0 0 15px; }
#header #logo a { display: block; height: 40px; width: 220px; }
#header #logo img.logo { display: block; height: 38px; position: relative; width: 211px; z-index: -10; }


/*** Container ***/
#container {  
	margin: 10px auto 10px; 
	text-align: left; 
	width: 960px; 
}
#innercontent { 
	background: url('../img/bg-innercontent.gif') repeat-y; 
	float: right; 
	margin: 10px 8px 20px 0; 
	position: relative;
	width: 704px; 
}
#innercontent-top { 
	background: url('../img/bg-innercontent-top.gif') no-repeat; 
	margin: 0; 
	min-height: 295px;
	padding: 1px 30px 15px 30px; 
	width: 704px; 
	width/**/:/**/644px; 
}
#innercontent-bottom { 
	background: url('../img/bg-innercontent-bottom.gif') no-repeat; 
	clear: both;
	height: 5px;
	width: 704px; 
}
.sidebar { 
	background: url('../img/bg-sidebar.gif') repeat-y; 
	clear: left; 
	float: left; 
	margin: 11px 0 1px 8px; 
	padding: 0;
	width: 234px; 
}
.sidebar-top { 
	background: transparent url('../img/bg-sidebar-top.gif') no-repeat;  
	height: 4px;
	margin: -1px 0 0;
	position: absolute;
	width: 234px; 
	z-index: 5;
}
.sidebar-bottom { 
	background: transparent url('../img/bg-sidebar-bottom.gif') no-repeat;  
	clear: both;
	height: 5px;
	margin: -3px 0 0; 
	position: absolute;
	width: 234px; 
	z-index: 5;
}
.clear_both { clear: both; display: block; }

#innercontent table td, #innercontent table th {
	border: 1px solid #dad2bd;
	font-size: 12px;
	padding: 5px 10px;
	vertical-align: top;
}
#innercontent table th, #innercontent table th p { 
	background: #eae6d9; 
	font-size: 12px; 
	margin: 0; 
	font-weight: bold; 
}
#innercontent table td p{ font-size: 12px; margin: 0; }

/*** Footer elements & fonts ***/
#footer { background: #e2dbd0; border-top: 1px solid #d2c9bc; }
#footer #footer_content { margin: 0 auto; padding: 15px 0; text-align: left; width: 960px; position: relative; }
#footer #footer_details { 
	background: url('../img/bg-footerdetails.gif') repeat-x; 
	clear: both; 
	font: 11px Tahoma, Arial, Helvetica, sans-serif; 
	margin: 0 10px 0 10px;
	padding: 10px 0; 
}
#footer, #footer a { color: #796e59; text-decoration: none; }
#footer #esitebox { 
	background: url('../img/bg-esitebox.gif') no-repeat;  
	clear: left; 
	float: left; 
	height: 43px; 
	margin: 0 0 0 8px; 
	width: 234px; 
}
#footer #esitebox a { display: block; height: 64px; width: 234px; }
#footer a { background: url('../images/bg-footer-a.gif') repeat-x 0 100%; padding-bottom: 2px; }
#footer p { display: block; line-height: 16px; }
#footer #footer_content p.copyright { float: left; text-align: left; }
#footer #footer_content p.made_by { text-align: right; }

#footer h4 {
	font-weight: bold;
}
#footer #contact_info {
	float: right;
	margin: 0 10px 14px 0;
text-align: right;
	width: 570px;
}
#footer #contact_info .spacer { margin: 0 5px; }

#footer #contact_info p {
	font: 11px Tahoma, Arial, Helvetica, sans-serif;
	line-height: 21px;
	margin: 0 0 2px;
}

#footer .location {
	background: url('../img/bg-footer-location.gif') 100% 0 repeat-y;
	float: left;
	padding: 0 15px;
	text-align: right;
	width: 190px;
	width/**/:/**/ 160px;
}
#footer .location p {
	font: 12px Arial, Helvetica, sans-serif;
	line-height: 18px;
	margin: 0 0 2px;
}


/*********************************************************************
ETUSIVUN LAYOUT
**********************************************************************/

.frontpage #headline{ 
	background: none;
	float: left; 
	height: 184px;
	line-height: 1.5em;
	margin: 35px 0 0 20px; 
	position: relative;
	width: 480px; 
}
.frontpage #innercontent { 
	background: none;
	min-height: inherit; 
	margin: 30px 0;
	width: 948px;
}
.frontpage #innercontent-top { 
	background: url('../img/bg-innercontent-top-frontpage.gif') no-repeat; 
	margin: 0; 
	min-height: inherit;
	padding: 1px 25px 15px 25px;
	width: 704px; 
	width/**/:/**/654px; 
}
.frontpage #innercontent-bottom { clear: both; }
.frontpage #innercontent ul { list-style-type: none; margin: 0; padding: 0; }
.frontpage #innercontent .product-card { 
	background: #f3efe7;
	background-position: 14px 23px;
	background-repeat: no-repeat;
	border: 1px solid #e2dbd0;
	float: left;
	margin: 0 3px 5px 2px; 
	min-height: 105px;
	padding: 25px 5px 5px 10px; 
	width: 310px; 
	width/**/:/**/ 290px; 
}
.frontpage #innercontent li.hover {
	background-color: #faf8f5;
	cursor: pointer;
}
.frontpage #innercontent li a { color: #3a3a34; }
.frontpage #innercontent li a:hover { text-decoration: none; }
.frontpage #innercontent li h3 { padding-left: 87px; }
.frontpage #innercontent li p { margin-bottom: 0; padding-left: 87px; }

.frontpage #innercontent .raportointi { background-image: url('../images/small-raportointi.png'); }
.frontpage #innercontent .budjetointi { background-image: url('../images/small-budjetointi.png'); background-position: 12px 15px; }
.frontpage #innercontent .jakelu { background-image: url('../images/small-jakelu.png'); }
.frontpage #innercontent .konserni { background-image: url('../images/small-konserni.png'); background-position: 12px 18px; }
.frontpage #innercontent .moduulit { background-image: url('../images/small-moduulit.png'); background-position: 10px 22px; }
.frontpage #innercontent .liittymat { background-image: url('../images/small-liittymat.png'); background-position: 18px 22px; }


/*********************************************************************
PRINT + HEADLINE
**********************************************************************/

button.print {
	background: transparent url('../img/button-print.gif') 0 50% no-repeat;
	border: none;
	color: #5c4f42;
	cursor: pointer;
	font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
	padding: 5px 5px 5px 22px;
	position: absolute;
	right: 30px;
	top: 22px;
	width: 90px;
}
img.slogan {
	border: none;
	clear: left; 
	float: left; 
	margin: 10px 0 10px 8px;
}


/*********************************************************************
FORMS
**********************************************************************/

input, select, textarea {
	color: #3a3a34; 
	font: 11px Tahoma, Arial, Helvetica, sans-serif;
	margin: 2px 0;
	padding: 4px;
} 
input.text, select, textarea {
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
}
select { background: #fff; padding: 3px; }
select:hover { background: #fff; }
option { padding: 1px 4px; }
option:hover { background: #fff; }
.sidebar form {
	background: #f6f5f3; 
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #e6e0d5; 
	color: #3a3a34; 
	display: block; 
	font-size: 12px;
	margin: 0 2px;
	padding: 9px 15px 8px 15px; 
	text-decoration: none; 
}
.sidebar input.text { border: 1px solid #d9d5cd; padding: 6px; width: 130px; } 
.sidebar select { border: 1px solid #d9d5cd; padding: 5px; width: 142px; }
.sidebar h4 { 
	background: #f6f5f3; 
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #e6e0d5; 
	display: block; 
	font-size: 12px;
	margin: 0 2px;
	padding: 9px 15px 8px 15px; 
	text-decoration: none; 
}

.required { color: #c00; font: bold 11px Tahoma, Arial, Helvetica, sans-serif; }

#innercontent table.form td, #innercontent table.form th {
	border: none;
	font-size: 12px;
	padding: 1px 10px;
	vertical-align: middle;
}
#innercontent table.form input.text {
	background: #fafafa;
	border: 1px solid #d9d5cd;
	padding: 5px;
	width: 260px;
}
#innercontent table.form textarea.textarea {
	background: #fafafa;
	border: 1px solid #d9d5cd;
	height: 100px;
	padding: 5px;
	width: 260px;
}
#innercontent table.form input:focus.text,
#innercontent table.form textarea:focus.textarea { background: #fff; border-color: #ccc6ba; }

/*********************************************************************
SPECIAL STYLES
**********************************************************************/

.hidden { position: absolute; height: 0; top: -9000px; left: -9000px; }

button#share { background: #f1efeb url('../images/sprite-elements.png') no-repeat 0 -550px; }
button#print { background: #f1efeb url('../images/sprite-elements.png') no-repeat 0 -575px; }
button#share, button#print { 
	border: none;
	color: #625844;
	cursor: pointer;
	font: 11px Tahoma, Arial, Helvetica, sans-serif;  
	height: 21px; 
	height/**/:/**/ 24px; 
	margin: 24px 10px -24px 0;
	padding: 0px 6px 3px 30px;
}
button#share:hover, button#print:hover { background-color: #e4e0d8; }

.kuva-vasen { display: block; float: left; margin: 1px 5px 10px 0; }
.kuva-oikea { display: block; float: right; margin: 1px 0 10px 10px; }
.kuva-keskitetty { display: block; margin: 2px auto; }

.emailCloak {}