/******************************************************************************************
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;
}
ol, ul { list-style-type: none; }
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; }

/*textarea { resize: none; }*/

/******************************************************************************************
CONTENT TEXT STYLES & HEADINGS
******************************************************************************************/
body {
	color: #d5ccbc;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 62.5%;
	line-height: 1.8em;
	text-align: center;
	text-shadow: rgba(0,0,0,0.01) 0 0 0;
}

h1, h2 {
	clear: both;
}

h1 { color: #fff; font-size: 2.4em; line-height: 1.5em; font-weight: normal; margin: 0 0 1em; }
h2 { color: #fff; font-size: 1.8em; line-height: 1.5em; font-weight: normal; margin: 2em 0 1em; }
#sidebar h2 { margin: 0.5em 0 1em; }
h3 { color: #fff; font-size: 1.5em; line-height: 1.2em; font-weight: normal; margin: 0 0 1em; /*opacity: 0.99;*/ }
h4 { color: #fefefe; font-size: 1.2em; font-weight: bold; /*opacity: 0.99;*/ }

#home h1 { position: absolute; top: -9000px; left: -9000px; height: 0; }
#home h2 { clear: none; font-size: 1.8em; margin: 0.3em 0 0.4em; }

p, li { font-size: 1.2em; /*opacity: 0.99;*/ }
li li { font-size: 1em; }

p, ul, ol { margin: 0 0 1.5em; }
ul ul, ol ol { margin-bottom: 0; }
ul li, ol li { margin: 0.9em 0 1.4em 0; }

a { color: #e7b53d; text-decoration: none; } /* color: #eec259; */
a:hover { color: #e7b53d; text-decoration: underline; }

b, strong { font-weight: bold; color: #fafafa; }

#content ul, #widecontent ul { list-style-type: disc; margin-left: 3em; }
#work-displayarea ul { list-style-type: disc; margin-left: 2em; }
#content ol, #widecontent ol { list-style-type: decimal; margin-left: 3em; }
#content ul li, #widecontent ul li, #work-displayarea ul li {
	margin: 3px 0;
}

#content table {
	margin: 1em 0 3em;
}
.zebra .odd td {
	background: url('../img/bg-zebra.png');
	border-top: 1px solid #483625;
}
.zebra  {
	width:100%;
}
table th, table td {
	border: none;
	font-size: 1.2em;
	padding: 10px 10px;
	vertical-align: top;
}
table th {
	/*background: url('../img/bg-hover-35.png');*/
	color: #eeeae3;
	font-size: 1.3em;
	font-weight: bold;
}


#breadcrumb { display: none; position: absolute; top: 10px; }
#breadcrumb ul, #breadcrumb li { font-size: 11px; }
#breadcrumb ul { list-style-type: none; margin: 0; padding: 0; }
#breadcrumb li { display: inline; float: left; margin: 0; padding: 0; }
#breadcrumb a { color: #a6886f; }
#breadcrumb .separator { color: #fafafa; display: block; float: left; font-size: 12px; margin: 0 0.5em; }



/******************************************************************************************
=LAYOUT
******************************************************************************************/

html { overflow-y: scroll; }
html { overflow: -moz-scrollbars-vertical; }

body {
	background: #362313;
}
#wrapper {
	background: #312113;
	text-align: center;
	width: 100%;
}
#header {
	background: #26190d;
}
.wrapper { 
	display: block;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	text-align: left;
	width: 860px; 
}
#logo {
	height: 113px; /* 113px */
	height/**/:/**/ 69px; /* 69px */
	padding: 27px 0; /* 22px 0 */
}
#logo #headerlogo {
	display: block;
	float: left;
	margin-right: 26px;
}
#logo a#headertitle {
	background: url('../img/sprite-kluu.png') no-repeat -300px 0;
	display: block;
	float: left;
	height: 32px;
	margin-top: 19px; /* 15px */
	width: 268px;
}
#logo a#headertitle span { position: absolute; top: -9000px; left: -9000px; height: 0; }
#container {
	background: #362313 url('../img/bg-container.jpg') no-repeat 50% 0; /* #302113 */
	border-top: 1px solid #6b4a2f;
	min-height: 420px;
	padding-bottom: 40px;
}
#home #container { padding-bottom: 20px; }
#widecontent, #workcontent {
	padding-top: 30px;
	position: relative;
	width: 860px;
}
#content {
	float: left;
	display: inline;
	padding-top: 2px;
	position: relative;
	overflow: visible;
	width: 570px;
}
#container .wrapper #content.box {
	background: #2c1c0f; /*url('../img/bg-content-box.jpg') repeat-y;*/
	margin-top: 30px;
	padding: 0;
}
#content .box-top {
	/*background: #332011;
	border: 1px solid #301e10;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;*/
	background: url('../img/bg-content-box-top.jpg') no-repeat;
	clear: both;
	min-height: 365px;
	_height: 365px;
	padding: 30px 35px 0;
	width: 570px;
	width/**/:/**/ 500px;
}
#content .box-bottom {
	background: url('../img/bg-content-box-bottom.jpg') no-repeat;
	height: 25px;
	margin-top: -5px;
	width: 570px;
}
#container .wrapper #content,
#container .wrapper #sidebar { padding-top: 30px; }
#home #container .wrapper #content { padding-top: 0; }
#home #content {
	float: none;
	display: block;
	padding: 0;
	position: relative;
	width: 860px;
}
#sidebar {
	float: right;
	display: inline;
	padding-top: 9px;
	position: relative;
	width: 250px;
}

/******************************************************************************************
=ETUSIVU
******************************************************************************************/
#home #intro {
	background: url('../img/bg-intro.jpg') no-repeat 50% 0;
	display: block;
	height: 316px;
	height/**/:/**/ 270px;
	margin: 0 auto 35px;
	padding: 46px 0 0;
	text-align: center;
}
#home #slideshow {
	height: 250px;
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 840px;
}
#home #slideshow #slidenav {
	height: 250px;
	position: absolute;
	z-index: 5;
}
#home #slideshow #slidenav ul, #home #slideshow #slidenav li {
	margin: 0;
	overflow: visible;
	padding: 0;
	position: relative;
	width: 259px;
	z-index: 5; 
}	
#home #slideshow #slidenav #slidenav-arrow {
	background: url('../img/sprite-kluu.png') no-repeat -300px -61px;
	height: 94px;
	width: 290px;
	position: absolute;
	top: -3px; 
	left: 0; 
}
#home #slideshow #slidenav li a {
	color: #f0f0f0;
	cursor: pointer;
	display: block;
	float: left;
	font: bold 16px Arial, Helvetica, sans-serif;
	line-height: 18px;
	height: 83px;
	height/**/:/**/ 43px;
	margin: 0 0 0 10px;
	padding: 22px 0 18px 15px;
	*padding: 22px 0 16px 15px;
	position: relative;
	text-decoration: none;
	text-shadow: #333333 1px 1px 1px;
	width: 250px;
	width/**/:/**/ 235px;
	z-index: 1;
}
#home #slideshow #slidenav li a span {
	background: none;
	color: #f0f0f0;
	display: block;
	font-size: 12px;
	font-weight: normal;
}
#home #slideshow #slidenav li a:hover { background: url('../img/bg-slidenav-hover.png') no-repeat 0 0; }
#home #slideshow #slidenav li a.current, #home #slideshow #slidenav li a.current:hover,
#home #slideshow #slidenav li a.current span, #home #slideshow #slidenav li a.current:hover span {
	background: none;
	height: 94px;
	height/**/:/**/ 58px;
	margin: -3px 0 -6px;
	padding: 28px 35px 12px 23px;
	*padding: 28px 35px 8px 23px;
	position: relative;
	width: 290px;
	width/**/:/**/ 232px;
	z-index: 5;
	
	color: #333;
	text-decoration: none;
	text-shadow: none;
}

#home #slideshow #slidenav li a.current span, #home #slideshow #slidenav li a.current:hover span {
	background: none;
	padding: 0;
}
/* SCROLLABLE */
#home #slideshow #slides { 
    float: right;
	height: 250px;
	margin-right: 10px;
	overflow: hidden;
	position: relative;
	width: 820px;
} 
#home #slideshow #slides div {
	float: left;
	display: block;
	width: 820px;
	cursor: pointer;
	line-height: 10px;
	padding: 0;
	position: relative;
	margin: 0;
}
#home #slideshow #slides div p { margin: 0; padding: 0; }
#home #slideshow #slides .items { 
    height: 20000em; 
    position: absolute; 
    clear: both; 
    margin: 0; 
    padding: 0; 
} 
/* rollover slidekuville */
#slides .rollover{
	background: url('../img/sprite-kluu.png') no-repeat -300px -350px;
	cursor: pointer;
	height: 30px;
	position: absolute;
	right: 15px;
	top: 205px;
	width: 77px;
}

/*************/

.column { display: block; }
.left { float: left; width: 530px; }
.right { float: right; width: 290px; }
#home .box {
	background: #2d1c0e;
	border: 1px solid #2b1b0d;
	margin: 0 0 20px; 
	padding: 25px 25px 7px;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
}
#home .box p { font-size: 1.4em; line-height: 21px; }
#home .left.box { width: 530px; width/**/:/**/480px; }

#home .column h3 {
	font-size: 1.4em;
	line-height: 18px;
	margin-bottom: 9px;
}
#home .column .news-item {
	margin: 0 0 0;
}
#home .column .news-item a h3  {
	color: #eeeae3;
	font-weight: 600;
	padding: 15px 0 0;
}
#home .column .date {
	color: #99836e;
	font-size: 12px;
	font-weight: normal;
}
#home .column .rss-headline {
	background: url('../img/border-dot-light.gif') repeat-x 0 100%;
	float: left;
	display: block;
	padding-bottom: 1px;
	width: 100%;
}
#home .column.right h2 {
	display: block;
	float: left;
	margin-bottom: 5px;
}
#home .column.right .rss {
	display: block;
	float: left;
	margin: 10px 10px 0 0;
}
#home .column .news-item {
	clear: left; 
}
#home .column .news-item a {
	color: #d5ccbc;
	display: block;
}
#home .column .news-item a:hover {
	background: transparent url('../img/bg-hover-35.png');
	text-decoration: none;
}

/******************************************************************************************
=FOOTER
******************************************************************************************/
#footer {
	background: #362313;
	clear: both;
	display: block;
	padding: 0 0 25px;
	text-align: center;
	width: 100%;
}
#footer .wrapper {
	background: url('../img/border-dot-light.gif') repeat-x;
	clear: both;
	display: block;
	padding: 18px 0 0 0;
	width: 860px;
}
#footer .disclaimer {
	margin-top: 5px;
	padding-top: 16px;
}
#footer #footer-nav {
	display: block;
	float: left;
	margin: 7px 0 7px 25px;
	width: 535px;
}
#footer #footer-nav .first-column,
#footer #footer-nav .second-column,
#footer #footer-nav .third-column {
	display: block;
	float: left;
	margin: 0 20px 0 0;
	width: 165px;
}
#footer #footer-nav .third-column { margin: 0; }


#footer #footer-nav ul ul { margin: 3px 0 0 0; }
#footer #footer-nav li {
	margin: 0 0 3px; 
	padding: 0;
}
#footer #footer-nav li a { 
	color: #eeeae3;
	font-weight: bold;
	margin: 0 0 2px; 
}
#footer #footer-nav li li a {
	color: #99836e;
	display: block;
	font-weight: normal;
	margin: 0; 
	padding-left: 8px;
}

#footer, #footer p, #footer li, #footer a { color: #a28b75; }

#footer .disclaimer p.copyright { display: block; float: left; line-height: 21px; margin-bottom: 20px; margin-left: 25px; }
#footer .disclaimer p.copyright span { margin: 0 8px; }
#footer #scrolltop { display: block; float: right; }


/******************************************************************************************
=NEWSLETTER SIGNUP
******************************************************************************************/
#newsletter {
	background: #2d1c0e;
	border: 1px solid #2b1b0d;
	display: block;
	float: right;
	margin: 0 0 17px;
	padding: 12px 25px; /*10px 20px 10px*/
	width: 290px;
	width/**/:/**/ 240px;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
}
#newsletter h4 { color: #d5ccbc; margin-bottom: 2px; }
#newsletter p { clear: both; color: #745d47; font-size: 11px; font-style: italic; line-height: 16px; margin: 0; padding: 0; }
#newsletter form {
	display: block;
	margin: 5px 0;
	position: relative;
}
#newsletter form input#email_address {
	background: #4a3523;
	border: none;
	color: #d5cdbe;
	display: block;
	float: left;
	font: 1.1em/1.2em Arial, Helvetica, Verdana, sans-serif;
	margin: 0 5px 7px 0;
	padding: 8px 5px 7px;
	width: 187px;
	width/**/:/**/ 177px;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
}
#newsletter form input#email_address:focus {
	background: #533d2a;
}
#newsletter form .action_subscribe, #newsletter form .action_unsubscribe {
	position: absolute;
	top: -9000px;
	left: -9000px;
	height: 0;
}
#newsletter form button.submit {
	background: transparent url('../img/sprite-kluu.png') -150px -250px;
	border: none;
	cursor: pointer;
	display: block;
	float: left;
	height: 27px;
	margin: 0;
	padding: 0;
	position: relative;
	text-indent: -9000px;
	width: 48px;
}
#newsletter form button.submit span {
	/*position: absolute;
	top: -9000px;
	left: -9000px;
	height: 0;*/
}
#newsletter form button.fade span.hover {
	/*background: transparent url('../img/sprite-kluu.png') -150px -280px;
	display: block;
	height: 27px;
	position: absolute;
	top: -6px;
	left: -3px;
	top: 0;
	left: 0;
	width: 48px;*/
}

/******************************************************************************************
=NAV
******************************************************************************************/
#nav { background: #2e1e10 url('../img/bg-nav.gif') repeat-x; display: block; height: 3.9em; }
#nav ul { list-style-type: none; text-align: left; position: absolute; }
#nav ul li { background: url('../img/bg-nav-li.gif') no-repeat 100% 0.2em; display: block; float: left; font-weight: bold; line-height: 1.5em; padding-right: 1px; }
#nav ul li.last { background: none; }
#nav ul li a { color: #a6886f;  margin: 0; padding: 0.9em 1.1em 1.6em; }
#nav ul li a:hover { color: #eeeae3; text-decoration: none; }
#nav ul li.active a, #nav ul li.active a:hover { background: url('../img/nav-a-active.gif') no-repeat 50% 100%; color: #eeeae3; }


/******************************************************************************************
=EXTRANAV
******************************************************************************************/
#extranav {
	position: absolute;
	right: 0px;
	text-align: right;
	top: 129px; /* 50px */
}
#extranav a {
	color: #bead91;
	display: block;
	float: left;
	font-size: 1.1em;
	margin: 0;
	padding: 0 10px;
}
#extranav a:hover {
	color: #eeeae3;
	text-decoration: none;
}
#extranav .banken {
	background: url('../img/sprite-kluu.png') no-repeat -422px -400px;
	display: block;
	float: right;
	height: 27px;
	padding: 0;
}
#extranav .banken span {
	background: url('../img/sprite-kluu.png') no-repeat -350px -430px;
	display: block;
	float: left;
	height: 17px;
	padding: 5px 10px 5px 30px;
}



/******************************************************************************************
=SHARE =ADDTHIS
******************************************************************************************/
.share {
	background: url('../img/sprite-kluu.png') no-repeat -550px -250px;
	height: 132px;
	height/**/:/**/ 122px;
	left: -55px;
	position: absolute;
	padding: 10px 12px;
	width: 40px;
	width/**/:/**/ 16px;
	z-index:1;
}
#content .share { top: 0px; }
#workcontent .share { top: 76px; }

.share a { 
	background: url('../img/sprite-kluu.png') no-repeat 0 0; 
	display: block;
	height: 16px; 
	margin-bottom: 8px;
	width: 16px; 
}
.share .addthis_button_email { background-position: -600px -249px; }
.share .addthis_button_facebook { background-position: -600px -270px; }
.share .addthis_button_twitter { background-position: -600px -295px; }
.share .addthis_button_expanded { background-position: -600px -320px; }
.share .addthis_button_up { background-position: -600px -345px; }

.share a span { position: absolute; top: -9000px; left: -9000px; height: 0; }


/******************************************************************************************
=SIDEBAR =SUBMENU
******************************************************************************************/
#sidebar #submenu ul {
	margin: 0;
}
#sidebar #submenu li {
	background: url('../img/border-dot-lighter.gif') repeat-x 0 100%;
	margin: 0;
	padding-bottom: 1px;
	width: 100%;
}
#sidebar #submenu li a {
	color: #d5ccbc;
	display: block;
	padding: 8px 12px;
}
#sidebar #submenu li a:hover {
	background: transparent url('../img/bg-hover.png');
	text-decoration: none;
}
#sidebar #submenu li a:active {
	background: transparent url('../img/bg-hover-35.png');
}

#sidebar #submenu li.archive span {
	background: url('../img/bg-archive.gif') no-repeat 0 2px;
	padding-left: 18px;
}

#sidebar #submenu li a.active, #sidebar #submenu li a.active:hover {
	background: transparent url('../img/sprite-kluu.png') no-repeat -550px -501px;
	color: #26190d;
	overflow: visible;
	margin-left: -15px;
	padding: 9px 12px 9px 26px;
	text-decoration: none;
	width: 265px;
}


/******************************************************************************************
=TYÖNÄYTTEET =SUBMENU
******************************************************************************************/
#workcontent #submenu {
	display: block;
	height: 25px;
	position: absolute;
	top: 25px;
	right: 5px;
}
#workcontent #submenu ul {
	text-align: right;
}
#workcontent #submenu li {
	display: inline;
	float: left;
	padding: 3px 0;
}
#workcontent #submenu li a {
	border-right: 1px solid #918672;
	color: #ada28e;
	padding: 0 10px 0 9px;
}
#workcontent #submenu li a:hover {
	color: #e7dfd0;
	text-decoration: none;
}
#workcontent #submenu li.last a {
	border-right: none;
	padding: 0 0 0 9px;
}
#workcontent #submenu li.active a, #workcontent #submenu li.active a:hover {
	color: #e7dfd0;
	text-decoration: none;
}
#workcontent #submenu li.active {
	background: url('../img/submenu-a-active.gif') no-repeat 50% 100%;
}


/******************************************************************************************
=NEWS
******************************************************************************************/
#sidebar.news #submenu h2,
#sidebar.news #submenu a { padding-left: 20px;  }
#sidebar.news #submenu ul { background: url('../img/border-dot-light.gif') repeat-x 0 0; }

#news-list { background: url('../img/border-dot-light.gif') repeat-x 0 0; }
#news-list .news-item { margin: 0; padding: 18px 0 0; }
#news-list .hover { background: transparent url('../img/bg-hover.png'); cursor: pointer; }
#news-list .hover:active { background: transparent url('../img/bg-hover-35.png'); }
#news-list p { background: url('../img/border-dot-light.gif') repeat-x 0 100%; margin: 0; padding: 0 15px 15px 15px 0; }
#news-list p.date, #news-list .hover p.date { background: none; margin-top: -1.5em; }
#news-list .news-item h3 { padding: 0 15px 0 0; font-weight: 600; }
#news-list .date { font-size: 0.8em; font-weight: normal; }
#news-list .news-item a { color: #d5ccbc; }
.date { color: #99836e; font-size: 1.2em; }
.news-item a h3 { color: #fff; }
.news-item p { margin: 0; padding: 0 0 16px; }
#home .news-item a .read-more { color: #e7b53d; }
#news-list .news-item.hover a:hover { text-decoration: none; }
a .news-item { color: inherit; }
.news-item a:hover { background: transparent url('../img/bg-hover.png'); }

#sidebar .news-item a { color: #d5ccbc; display: block; }
#sidebar .news-item  a:hover { background: transparent url('../img/bg-hover.png'); text-decoration: none; }
#sidebar .news-item h3 { font-size: 1.2em; line-height: 1.5em; padding: 1.5em 0 0; }
#sidebar .news-item .date { font-size: 1em; }
#sidebar .news-item p { background: url('../img/border-dot-light.gif') repeat-x 0 100%;  padding: 0 0 1.5em; }
#sidebar .archive { margin: 1.5em 0; }




/******************************************************************************************
=PAGINATION
******************************************************************************************/
.pagination {
	display: none;
	margin-top: 40px;
	text-align: center;
}
.pagination span, .pagination a {
	border: 1px solid transparent;
	font-size: 12px;
	color: #a28b75;
	margin: 0 3px;
	padding: 3px 6px;
}
.pagination a {
	color: #ece9e3;
	text-decoration: none;
}
.pagination a:hover {
	background: #281a0e;
	border: 1px solid transparent;
	text-decoration: none;
}
.pagination a:active {
	background: #191008;
}
.pagination .ditto_currentpage {
	background: #624e3b;
	border: 1px solid #685542;
	color: #ece9e3;
}
.pagination .ditto_previous_off, .pagination a.ditto_previous_link {
	margin-right: 2px; 
}
.pagination .ditto_next_off, .pagination a.ditto_next_link {
	margin-left: 2px; 
}


/******************************************************************************************
=TUOTTEET
******************************************************************************************/
#emailmanager, #sitemanager {
	display: block;
	height: 300px;
	height/**/:/**/ 210px;
	margin-top: 20px;
	*margin-top: 40px;
	width: 430px;
	width/**/:/**/ 225px;
}	
#emailmanager {
	background: url('../img/emailmanager-large.jpg') no-repeat 0 0;
	float: left;
	padding: 90px 0 0 205px;
	text-align: left;
}	
#sitemanager {
	background: url('../img/sitemanager-large.jpg') no-repeat 100% 0;
	float: right;
	padding: 90px 205px 0 0;
	text-align: right;
}
#emailmanager h2, #sitemanager h2 {
	margin: 0 0 4px;
}
#emailmanager p, #sitemanager p {
	color: #e3d0be;
	margin: 0 0 8px;
}
.lisatiedot {
	cursor: pointer;
	display: block;
	height: 30px;
	position: relative;
	width: 124px;
}
#emailmanager .lisatiedot {
	background: url('../img/sprite-kluu.png') no-repeat 0 -280px;
}
#sitemanager .lisatiedot {
	background: url('../img/sprite-kluu.png') no-repeat 0 -310px;
}
#sitemanager a.lisatiedot {
	float: right;
}
.lisatiedot span {
	position: absolute;
	top: -9000px;
	left: -9000px;
	height: 0;
}
.lisatiedot.fade span.hover {
	background: url('../img/sprite-kluu.png') no-repeat 0 -250px;
	display: block;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
	width: 124px;
}


/******************************************************************************************
=TYÖNÄYTTEET =WORK
******************************************************************************************/
#workcontent h1 { margin-bottom: 15px; padding: 0; width: 420px; }
#workcontent .wrapper {
	background: url('../img/bg-workcontent-wrapper.jpg') repeat-y;
	width: 860px;
}
#work {
	background: url('../img/bg-work.jpg') no-repeat 50% 0;
	min-height: 269px;
	padding: 50px 50px 20px;
	position: relative;
	width: 860px;
	width/**/:/**/ 760px;
}
#work-bottom {
	background: url('../img/bg-work-bottom.jpg') no-repeat 50% 100%;
	clear: both;
	height: 25px;
	width: 860px;
}

/*** Työnäytteet pääsivu - listanäkymä ***/
#work-list-wrapper {
	margin: -25px 0 -25px;
	overflow: auto;
}
.work-list-items {
	margin: 10px 0 20px;
}
.work-list-items, .work-list-items a {
	display: block;
	float: left;
}
.work-list-items li { 
	display: block;
	float: left;
	margin: 10px 35px 20px 0;
	width: 230px; 
	height: 180px; 
	overflow: hidden;
	position: relative; 
}
.work-list-items li.last {
	margin-right: 0;
}
work-list-items img {
	display: block;
	width: 230px;
}
.work-list-items li a {
	display: block;
	text-decoration: none;
}
.work-list-items li a:hover,
.work-list-items li a .details:hover,
.work-list-items li a:hover .details,
.work-list-items li a:hover .type {
	color: #fafafa;
}
.work-list-items li .read-more { 
	background: url('../img/sprite-kluu.png') no-repeat -300px -250px;
	display: none;
	height: 24px;
	left: 201px;
	position: absolute;
	top: 108px;
	width: 24px;
}
.work-list-items li .details {
	display: block;
	line-height: 16px;
	color: #d5ccbc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 0.01em;
	font-weight: bold;
	padding: 5px 0 9px;
}
.work-list-items li .details .type {
	color: #ada28e;
	font-size: 12px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0;
}
/***********************************/
.work-list {
	margin: 0 0 10px;
}
.work-list-heading {
	background: url('../img/border-dot-light.gif') repeat-x 0 100%;
	padding: 2em 0 0.2em;
}
.work-list-heading h2 {
	font-size: 2.1em;
	margin: 0 0 2px;
}

#work .item {  }
#work-displayarea {
	min-height: 250px;
	padding-top: 30px;
	width: 760px;
}
#work-displayarea h2 { margin: 0; }
#work-displayarea a.external { background: url('../img/bg-link-external.gif') no-repeat 100% 2px; padding-right: 16px; }
#work-displayarea .pic {
	float: left;
	position: relative;
}
#work-displayarea .pic .zoom-in {
	background: url('../img/sprite-kluu.png') no-repeat -350px -250px;
	cursor: pointer;
	height: 44px;
	position: absolute;
	left: 370px;
	top: 200px;
	width: 44px;
}
#work-displayarea .details {	
	margin: 0 0 0 455px;
	position: relative;
}
#work-displayarea .details h2 { clear: none; margin: 0 0 18px; *height: 34px; }
#work-displayarea .details p { clear: none; margin: 0 0 18px; }
#work-displayarea .details h3 { color: #fff; font-size: 1.2em; margin: 0; }

/** caset **/
.case #work-displayarea .pic {
	display: block;
	float: right;
	position: relative;
}
.case #work-displayarea .details {	
	margin: 0;
	position: relative;
	width: 480px;
}

#work-nav {
	margin: 0 auto;
	padding: 25px 0 2px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 760px;
}
#work-nav .work-links-wrapper {
	clear: both; 
	float: left;
	overflow: visible;
	position: relative; 
	width: 100%; 
}
.test {
	display: block;
	margin: 0 auto 3px; 
	float: left; 
	height: 18px;
	left: 50%;
	overflow: visible;
	position: relative; 
}
#work-nav .prev, #work-nav .next { 
	display: block;
	float: left;
	cursor: pointer;
	height: 28px;
	overflow: visible;
	width: 28px;
	z-index: 1;
	right: 50%;
	position: absolute;
}
#work-nav .prev {
	background: url('../img/sprite-kluu.png') no-repeat -650px -600px;
	/*left: -29px;*/
	margin-left: -29px;
	overflow: visible;
	padding-left: 1px;
	*padding-left: 29px;
	position: relative;
}
#work-nav .next { 
	background: url('../img/sprite-kluu.png') no-repeat -700px -600px;
	/*right: -30px;*/
	margin-right: -29px;
}
#work-nav .prev:hover { background-position: -650px -630px; }
#work-nav .next:hover { background-position: -700px -630px; }

#work-nav #work-links { 
	display: block;
	margin: 0 auto 3px; 
	float: left; 
	height: 18px;
	position: relative; 
}
#work-nav #work-links li {
	float: left; 
	position: relative; 
	right: 50%;
	margin: 0 1px;
}
#work-nav #work-links li a {
	background: url('../img/sprite-kluu.png') no-repeat -550px -600px;
	border: none;
	color: #371f0c;
	display: block;
	float: left;
	padding: 4px 0 9px;
	width: 28px;
}
#work-nav #work-links li a:hover {
	color: #d5ccbc;
	text-decoration: none;
}
#work-nav #work-links li a.current, #work-nav #work-links li a.current:hover,
#work-nav #work-links li a.current span.hover, #work-nav #work-links li a.current:hover span.hover {
	background-position: -600px -600px;
	color: #fff;
	padding-bottom: 9px;
}
#work-nav #work-links li a span,
#work-nav .prev span, 
#work-nav .next span {
	height: 0;
	left: -9000px;
	position: absolute;
	top: -9000px;
}



/******************************************************************************************
=YHTEYDENOTTO › =LOMAKKEET
******************************************************************************************/
#content #form-links {
	border-bottom: 1px solid #816d5c;
	list-style-type: none;
	margin: 35px 0 25px;
	line-height: 29px;
	*line-height: 31px;
	padding: 0;
}
#form-links li { 
	display: inline; 
	margin: 0;
	padding: 0;
}
#form-links li a {
	background: url('../img/bg-hover-50.png');
	border: 1px solid #70533a;
	border-bottom: 1px solid #816d5c;
	color: #a6886f;
	height: 28px;
	height/**/:/**/ 8px;
	margin: 0 1px 0 0;
	padding: 8px 10px;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
}
#form-links li a:hover {
	color: #fff;
	text-decoration: none;
}
#form-links li a.current, #form-links li a.current:hover {
	background: none;
	border-color: #816d5c;
	border-bottom: 1px solid #362312;
	color: #e2dacc;
}


.offer-form, .recruit-form, .contact-form {
	margin: 0 0 20px;
}
.offer-form fieldset, .recruit-form fieldset, .contact-form fieldset {
	background: url('../img/border-dot-light.gif') repeat-x 0 0;
	padding: 20px 0 0;
}

form .form-row {
	clear: both;
	margin: 0 0 5px;
	width: 100%;
}
form .left {
	clear: left;
	float: left;
	width: 45%;
}
form .right {
	clear: right;
	float: right;
	width: 45%;
}
form .errors {
	background: url('../img/sprite-kluu.png') no-repeat 15px -486px;
	border: 1px solid #eaa435;
	color: #fafafa;
	font-size: 1.2em;
	margin: 10px 0;
	padding: 10px 10px 10px 60px;
}
form label, form label.required { 
	color: #d5ccbc;
	display: block;
	font-size: 1.2em;
	margin: 2px 1px 1px; 
	padding: 2px 0 0;
	vertical-align: top; 
}
form input.text, form textarea {
	background: #4a3523;
	color: #e9e0cf;
	font: 1.2em/1.6em Arial, Helvetica Verdana, sans-serif;
	border: none;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 6px 5px;
	*padding: 4px 5px 8px;
}
form input.text:focus, form textarea:focus {
	background: #533d2a;
}
form input.text {
	width: 100%;
}
form textarea {
	height: 120px;
	*overflow-y: hidden;
	width: 100%
}
form .form-row.attachment {
	margin-top: 15px;
	width: 65%;
}
form .form-row.attachment label {
	color: #d5ccbc;
	cursor: pointer;
	margin-bottom: 5px;
}
form .form-row.attachment label:hover { text-decoration: underline; }
form .form-row.attachment input.file {
	display: none;
}
#offer-form-submit-button, 
#recruit-form-submit-button, 
#contact-form-submit-button {
	background: url('../img/sprite-kluu.png') no-repeat 0 -350px;
	border: none;
	cursor: pointer;
	display: block;
	float: right;
	height: 28px;
	margin: 20px 0 0 0;
	position: relative;
	text-indent: -9000px;
	width: 65px;
}
#offer-form-submit-button span, 
#recruit-form-submit-button span, 
#contact-form-submit-button span {
	/*position: absolute;
	top: -9000px;
	left: -9000px;
	height: 0;*/
}
#offer-form-submit-button.fade span.hover, 
#recruit-form-submit-button.fade span.hover, 
#contact-form-submit-button.fade span.hover {
	/*background: url('../img/sprite-kluu.png') no-repeat 0 -380px;
	display: block;
	height: 28px;
	position: absolute;
	top: -7px;
	left: -9px;
	*top: 0;
	*left: 0;
	width: 65px;*/
}
#offer-form-submit-button.fade:active span.hover, 
#recruit-form-submit-button.fade:active span.hover, 
#contact-form-submit-button.fade:active span.hover {
	/*left: -10px;*/
}
table.messagecopy {
	color: #fafafa;
}


/******************************************************************************************
MISC. STYLES
******************************************************************************************/

.clearfix { clear: both; display: block; font-size: 0; height: 0; }
.lead-kuva { margin-top: -25px; }
.kuva-vasen { display: block; float: left; margin: 2px 15px 15px 0; }
.kuva-oikea { display: block; float: right; margin: 2px 0 15px 15px; }
.kuva-keskitetty { display: block; margin: 2px auto; }
.hidden { display: none; }
.kuvateksti { font-size:11px; color:#99836E; text-align:right; margin:-20px 0 15px 0;}
#kartta {
	border: 1px solid #eeeae3;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
}
#floatMenu {
	position:absolute;
	top:0;
	left:0;
	margin-left:0px;
	width:30px;
}
#floatMenu ul {
	margin-bottom:20px;
}