BODY {
	background: #fff url(../img/body-bg.png) left 50px repeat-x;
	font-family: sans-serif, helvetica, arial;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

BODY.front-page {
	background-image: url(../img/body-bg-front-koirapeli.png);   
/*  background-image: url(../img/body-bg-front-joulu2010.png);  */
}

/* GENERIC STYLES */

UL {
	list-style: none;
	padding: 0;
	margin: 0;
}

UL UL {
	padding-left: 20px;	
}

UL LI {
	background: url(../img/bullet.png) 4px .1em no-repeat;
	padding-left: 22px;
	margin: .5em 0;
}

UL.flat,
UL.flat LI,
UL.flat UL {
	list-style: none;
	padding: 0;
	margin: 0;
	background: none;
}

UL.horizontal LI {
	float: left;
	background: none;
}

UL.separated LI,
A.separated,
SPAN.separated {
	border-left: 1px solid #dbdbdb;
	padding-left: .75em;
	margin: .5em 0 .5em .75em;
}

UL.separated LI.first-child,
UL.separated LI:first-child {
	border: 0;
	padding-left: 0;
	margin-left: 0;
}

UL.listing LI {
	clear: both;
	background: url(../img/dot-bg.png) top repeat-x;
	padding-top: .5em;
	margin-top: 1em;
}

UL.listing LI IMG {
	float: left;
	margin: 0 1em 1em 0;
}

UL.listing-icons {
	margin-right: -20px;
}

	UL.listing-icons LI {
		float: left;
		clear: none;
		width: 198px;
		height: 198px;
		margin: 0 20px 20px 0;
		padding: 10px;
		border: 1px solid #dbdbdb;
		background: none;
		position: relative;
		overflow: hidden;
	}
	
	UL.listing-icons LI .icon {
		display: block;
		float: none;
		margin: 0 auto 10px auto;
		width: 198px;
		height: 198px;
		overflow: hidden;
	}
	
	UL.listing-icons LI .icon IMG {
		display: block;
		float: none;
		margin: 0 auto;	
	}
	
	
	UL.listing-icons LI .caption {
		width: 188px;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 10px 15px 15px 15px;
		background: #fff;
		opacity: 0.7;
	}
	
		UL.listing-icons LI .caption * {
			color: #000;
			font-weight: bold;	
		}
		
		UL.listing-icons LI .caption .unimportant {
			float: right;
		}
		
P {
	margin: .5em 0;	
}

TD {
	font-family: sans-serif, helvetica, arial;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

A, .clickable {
	color: #006f27;
	text-decoration: none;
}

.clickable {
	cursor: pointer;
}

A:hover, .clickable:hover {
	text-decoration: underline;
}

P.clickable:hover {
	text-decoration: none;
}

A IMG {
	border: 0;	
}

A.block {
	display: block;
	margin: .5em 0;
}

A STRONG {
	text-decoration: underline;	
}

FIELDSET {
	margin: 0;
	padding: 0;
	border: 0;	
}

H2 {
	color: #278d22;
	font-size: 2.33em;
	font-weight: normal;
	line-height: 1.2em;
	margin-top: 1.3em;
	width: 70%;
}

BODY.front-page H2 {
	width: auto;	
}

.unimportant {
	color: #bbb;
	font-size: .92em;
}


/* LAYOUT ELEMENTS */

#header,
#content,
#footer {
	font-size: .75em; /* 12px */
}

#header,
#top-gfx .inner,
#content,
#footer .inner {
	width: 964px;
	margin-left: auto;
	margin-right: auto;
}

#header {
	position: relative;
	padding-top: 9px;
	height: 77px;
}

	#header H1 {
		margin: 0;		
	}

	#header H1 A {
		display: block;
		width: 149px;
		height: 31px;
		background: url(../img/logo.png) no-repeat;
		overflow: hidden;
		text-indent: -1000in;
		font-size: 1px;
	}
	
	#header .lang {
		font-weight: bold;
		position: absolute;
		bottom: 46px;
		right: 0;
	}

	#header .lang LI {
		margin-left: 1em;
	}
	
	#header .search {
		position: absolute;
		top: 50px;
		left: 730px;
		width: 224px;
		height: 36px;
		background: url(../img/search-bg.png) top left no-repeat;
	}

		#header .search INPUT.text {
			top: 10px;
			left: 53px;
			width: 136px;
			height: 13px;
			background: transparent;
			border: 0;
			padding: 2px;
			font-size: 11px;
			line-height: 13px;
			position: absolute;
		}

		#header .search INPUT.submit {
			top: 9px;
			left: 196px;
			position: absolute;
		}

	#header .nav-main {
		position: absolute;
		top: 50px;
		left: 0;
		height: 36px;
		font-size: .92em;
	}
		
	#header .nav-main LI {
		margin: 0;
		padding: 0 0 0 4px;
	}

	#header .nav-main A {
		display: block;
		color: #fff;
		text-transform: uppercase;
		font-weight: bold;
		margin: 0;
		line-height: 34px;
		padding: 2px 10px 0 6px;
		text-decoration: none;
	}

	#header .nav-main A SPAN {
		display: block;
	}

	#header .nav-main LI.current, #header .nav-main LI:hover, #header .nav-main LI.hover {
		background: url(../img/navi-hover.png) top left no-repeat;
	}

	#header .nav-main LI.current A, #header .nav-main LI:hover A, #header .nav-main LI.hover A {
		background: url(../img/navi-hover.png) top right no-repeat;
		color: #036726;
	}

	#header .nav-main LI.current A SPAN, #header .nav-main LI:hover A SPAN, #header .nav-main LI.hover A SPAN {
		background: url(../img/navi-hover-indicator.png) center 29px no-repeat;
	}
	
	#header .nav-main li.first-child:hover a span {
		background-image: url(/files/pk/img/nav-etusivu-hilite.png);
	}

	#header .nav-main LI.first-child A SPAN {
		overflow: hidden;
		text-indent: -1000in;
		font-size: 1px;
		width: 15px;
		height: 34px;
		background-position: center 11px;
		background-repeat: no-repeat;
	}

	#header .nav-main LI.first-child-current A SPAN {
	}

	
#top-gfx {
	height: 175px;
	padding-top: 25px;
	margin: 0 auto;
	min-width: 964px;
	background-repeat: no-repeat;
	background-position: top center;
}

	BODY.front-page #top-gfx {
		height: 304px;
		background-image: url(../img/header-etusivu-koirapeli.jpg);  
/*	background-image: url(/files/pk/img/header-etusivu-joulu2010.png); */
	}

	#top-gfx .inner {
		position: relative;
	}

	#top-gfx .rounded-box {
		display: block;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		height: 27px;
		width: 204px;
		text-decoration: none;
		font-size: 13px;
		color: #000;
	}

		#top-gfx .rounded-box STRONG {
			display: block;
			line-height: 27px;
			margin-bottom: 0em;
			font-weight: bold;
			color: #069a39;
			font-size: 14px;
			text-decoration: none;
			padding: 0 15px;
			background: url(../img/rounded-box-closed.png) left top no-repeat;
		}

		#top-gfx .rounded-box SPAN {
			padding: 0 15px 10px 15px;
			display: block;
			background: url(../img/rounded-box-open.png) left bottom no-repeat;
		}

		#top-gfx .rounded-box:hover {
			height: auto;
		}

		#top-gfx .rounded-box:hover STRONG {
			background: url(../img/rounded-box-open.png) left top no-repeat;
		}

		#top-gfx .rounded-box:hover SPAN {
			background: url(../img/rounded-box-open.png) left bottom no-repeat;
		}

	#top-gfx .image-box {
		position: relative;
		display: block;
		float: right;
		clear: right;
		z-index: 10;
		margin-bottom: 10px;
	}

	#top-gfx .image-box IMG {
		position: static;
	}

#content {
	min-height: 400px;
}
			
	#content .column H3 {
 		font-size: 1em;	
	}

	#content .column H4 {
 		font-size: 1em;	
 		color: #00812D;	

	}

	#content UL.listing H3 {
		font-size: 1.25em;	
	}

	#content .column-main {
		float: left;
		width: 700px;
		padding-right: 20px;
		border-right: 1px solid #dbdbdb;
		min-height: 300px;
	}

	#content .section {
		display: block;
		border-top: 1px solid #c5e0ba;
		margin-top: 1em;
		padding-top: 1em;
	}

	#content .column-side {
		float: left;
		width: 220px;
		margin-left: 9px;
		padding-top: 1.5em;
		font-size: .92em;
	}
		#content .column-side a {
			text-decoration: none;	
		}
		
		#content .column-side .section H3 {
			margin-top: 0;	
			margin-bottom: 0;	
		}

		#content .column-side .section-news H3 {
			margin-bottom: .3em;
		}

		#content .column-side .section-news .date {
			margin-bottom: .5em;
		}

		#content .column-side .section-magazine {
			padding-left: 85px;
			overflow: hidden;
		}

			#content .column-side .section-magazine IMG {
				float: left;
				margin-left: -85px;
			}

	#content .column-top {
		padding-left: 235px;
		font-size: 1.25em;
		line-height: 1.5em;
		position: relative;
		background: url(../img/dot-bg.png) bottom repeat-x;
		padding-bottom: .5em;
		margin-bottom: 1em;
		margin-top: 1.5em;
		font-family: geneva, tahoma, sans-serif;
	}

		#content .column-top .column-first {
			float: left;
			width: 220px;
			margin-left: -240px;
		}

		#content .column-top .column-first IMG {
			/*float: right;*/
			position: absolute;
			bottom: 1.5em;
			right: 480px;
		}
	
		#content .column-top H2 {
			color: #278d22;
			font-size: 1.87em;
			font-weight: normal;
			line-height: 1.2em;
			margin: 0;
		}

		BODY.front-page #content .column-top {
			min-height: 245px;
		}

		BODY.front-page #content .column-top IMG.first-child,
		BODY.front-page #content .column-top IMG:first-child {
			position: absolute;
			bottom: 1px;
			right: 480px;
		}

		/* Fix admin */		
		BODY.admin #content .column-top IMG.first-child,
		BODY.admin #content .column-top IMG:first-child {
			position: static;
		}

		/* Fix admin */		
		BODY.admin #content .column-top #cmSlot2 {
			float: left !important;
			margin-left: -240px !important;
		}

		BODY.subfront-page #content .column-top IMG.corner {
			bottom: 1.5em;	
		}

		BODY.sub-page #content .column-main .column-first {
			padding-top: 1.5em;
		}

		BODY.sub-page #content .column-main .column-two-third P {
			margin: 1em 0;
		}

		BODY.sub-page #content .column-main .column-two-third IMG {
			margin: 0 2.5em 2.5em 0;
		}

		BODY.sub-page #content .column-main P.first-of-type {
			font-size: 1.4em;
			line-height: 1.35em;
		}

		BODY.sub-page #content .column-main .column > P:first-of-type {
			font-size: 1.4em;
			line-height: 1.35em;
		}

		BODY.sub-page #content .column-main H3 {
			color: #00812d;
			margin-top: 1.5em;
		}

		BODY.sub-page #content .column-side H3 {
			color: #00812d;
		}

	#content UL LI.current,
	#content UL LI.open {
		font-weight: bold;
	}
	
	#content .column-one-third {
		float: left;
		width: 220px;
		margin-left: 20px;
	}

		#content .column-one-third UL.nav {
			margin-bottom: 3em;	
		}
	
		#content .column-one-third UL.nav UL {
			padding-left: 0;
		}

		#content .column-one-third UL.nav UL LI {
			font-weight: normal;
		}

		#content .column-one-third UL.nav UL LI.current {
			font-weight: bold;
		}

		BODY.front-page #content .column-one-third {
			line-height: 1.5em;
		}
	
		BODY.front-page #content .column-one-third UL {
			line-height: 1em;
		}
	
		BODY.front-page #content .column-one-third UL A {
			font-weight: bold;
		}
	
		BODY.front-page #content .column-one-third LI {
			background: url(../img/list-bg-dotted.png) top left no-repeat;
			padding-top: 8px;
		}

		#content .column-first {
			margin-left: 0;
			clear: left;
		}

	#content .column-two-third {
		float: left;
		width: 460px;
		margin-left: 20px;
	}
	
	#content .nav-collage {
		margin-right: -20px;
	}

	#content .nav-collage LI {
		width: 220px;
		margin-right: 20px;
	}

		#content .nav-collage LI.nth-child-odd {
			clear: left;
		}

		#content .nav-collage LI:nth-child(odd) {
			clear: left;
		}

		#content .nav-collage LI .read-more {
			font-weight: bold;
			text-decoration: underline;	
			white-space: nowrap;
		}

		#content .nav-collage LI P {
			line-height: 1.5em;	
		}

		#content .nav-collage LI LI,
		#content .column-editable LI {
			background: url(../img/dot-bg.png) top repeat-x;
			margin: 0 0 .5em 0;
			padding-top: .5em;
			padding-left: 0;
		}

		#content .nav-collage LI LI A,
		#content .column-editable LI A,
		#content .nav-collage LI LI A.first-child,
		#content .nav-collage LI LI A:first-child {
			background: url(../img/bullet.png) 4px .1em no-repeat;
			display: block;
			padding-left: 22px;
			height: auto;
			white-space: normal;
		}

		#content .nav-collage LI A.first-child,
		#content .nav-collage LI A:first-child {
			margin-top: 0;
			height: 91px;
			position: relative;
			display: block;
		}

		#content .nav-collage LI * A.first-child,
		#content .nav-collage LI * A:first-child {
			height: auto;
			display: inline;
			white-space: nowrap;
		}

		.public #content .nav-collage LI A.first-child IMG,
		.public #content .nav-collage LI A:first-child IMG {
			position: absolute;
			bottom: 0;
			left: 0;
		}
	
		#content .nav-collage LI H3 A {
			display: block;
			text-indent: -1000in;
			font-size: 1px;
			width: 220px;
			height: 91px;
			background-position: left bottom;
			background-repeat: no-repeat;
			overflow: hidden;
		}
		
		#content .show-in-sidebar {
			float: right;
			width: 220px;
			margin: 1.5em -260px 1em 0;
		}

			#content .show-in-sidebar IMG {
				margin: .5em 0 !important;
			}
	
			#content .show-in-sidebar .caption {
				font-size: .92em;
				font-weight: bold;
				margin-bottom: 1em;
				display: block;
			}
			
		#content .date {
			font-weight: bold;	
		}
		
		#content .playback {
			background: url(../img/dot-bg.png) top repeat-x;
			margin-top: 1em;
			padding-top: 1em;
		}

			#content .playback .next {
				float: left;
			}

			#content .playback .prev {
				float: right;
			}
		

#footer {
	background: #45a41c url(../img/footer-gradient.png) top left repeat-x;
	padding-bottom: 50px;
	color: #fff;
	clear: both;
	border-top: 2em solid #fff;
}

	#footer .inner {
		padding: .5em 0;
		text-align: center;
	}

	#footer A {
		color: #fff;
	}

	#footer .nav {
		overflow: hidden;
		background: url(../img/footer-hr.png) bottom center no-repeat;
		text-align: left;
		margin-bottom: 1em;
	}

	#footer .nav LI.first-child {
		background: none;
		font-weight: normal;
		line-height: 1.3em;
	}

	#footer .nav LI.first-child .title {
		font-weight: bold;
	}

	#footer .nav LI {
		background: url(../img/footer-separator.png) top left no-repeat;
		padding: 10px;
		margin-left: 10px;
		font-weight: bold;
		width: 13%;
		overflow: hidden;
	}
	
	#footer .nav UL LI {
		float: none;
		width: auto;
		margin: .3em 0;
		padding: 0;
		font-weight: normal;
		background: none;
	}
	
	#footer .nav-legal {
		margin: 0 auto;
		clear: both;
	}

	#footer .nav-legal LI {
		float: none;
		display: inline;
		margin: 0 .75em;
	}

/* @group forms */

form table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

form th {
	font-weight: normal;
	padding: 0.3em 10px 1px 1px;
	text-align: left;
	width: 35%;
}

form th.ngformError {
	color: red;
}

form .wide-area th {
	color: #048330;
	font-weight: bold;
	padding: 1em 1px 1px 1px;
	text-align: left;
	width: auto;
}

form td {
	padding: 1px;
}

form table.rating td {
	text-align: center;
}

form tr.rating-row th {
	color: #048330;
	font-weight: bold;
}

form td input.text-input, form td textarea, form th textarea {
	border: 1px solid #048330;
	color: #000;
	font-family: sans-serif, helvetica, arial;
	font-size: 100%;
	font-weight: normal;
	width: 100%;
}

form input.checkbox-input, form input.radio-input {
	vertical-align: -1px;
}

form th.subtitle {
	color: #048330;
	font-weight: bold;
	padding: 1em 1px;
}

form .actions {
	margin: 2em 0 1em 0;
	text-align: right;
}

/* @endgroup */


/* @group extra languages */

.extralang-page #header .nav-main, .extralang-page #header .search {
  display: none;
}

.extralang-page #header .lang {
  bottom: 10px;
}

body.extralang-page {
  background: url('../img/body-bg-short.png') repeat-x 0 50px; 
}

.extralang-page #header {
  height: 41px;
}

.extralang-page #top-gfx {
  margin-top: 1px;
  height: 235px;
  background: url('../kuvitus/lang-header.jpg') no-repeat top;
}

.extralang-page .column-top IMG.corner {
	float: left;
	margin-left: -240px;
}

/* @endgroup */


/*

  Customer magazine order form styles

*/

#customermagazine label,
#customermagazine input.text
{
  display: block;
  margin: 0 0 5px 0;
}

#customermagazine input.text
{
  width: 300px;
}


#customermagazine .ngformError input
{
  border: 2px solid red;
}