@import url(https://fonts.googleapis.com/css?family=Carrois+Gothic+SC);
@import url(https://fonts.googleapis.com/css?family=ABeeZee);

body {
	background-color: #C0D2D8;
   background-image: url(kuvat/taustagradientti.jpg);
   background-repeat: repeat-x;
   background-position: top left;
	margin: 0;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	color: #444242;
}

#taustakuva {
   background-image: url(kuvat/taustakuva-2013.jpg);
   background-repeat: no-repeat;
   background-position: top left;
	margin: 0;
	width: 100%;
	height: 100%;
}


ul {
	list-style-image: url(kuvat/dot.png);
	margin-left: 2%;
	padding-left: 1em;
}

h1, h2 {
	font-family: 'Carrois Gothic SC', 'ABeeZee', Helvetica, Arial;	
		text-align: center;
		text-shadow: 1px 1px #fff;
		margin-top: 2%;
}

#main-content h2 {
	text-align: left;
}

h1 {
	font-size: 1.4em;
	
}


 
h2 {
	font-size: 1.2em;
	margin: 0 0 .5em;

} 



a:hover {
	color: #5a84e3;
}

a {
	text-decoration: none;
		color: #7286B1;
}

.product-image a {
   transition: .6s;
	transition-timing-function: ease-in-out;
	opacity: 1;
	text-decoration: none;

}
.product-image a:hover {
	opacity: .8;
	padding-left: 1em;
}

#container
{
	position: relative;
	width: auto;
	max-width: 80em;
	min-width: 50em;
	margin: 0 auto;
	background: transparent;
}

#header-bg-left
{
	background: url(kuvat/header-bg-left.png) no-repeat left top;
	height: 165px;
}

#header-bg-right
{
	background: url(kuvat/header-bg-right.png) no-repeat right top;
	height: 165px;
}

#header
{
	position: relative;
	background: #fbf2d4;
	margin: 0 124px;
	height: 165px;
}

#header h1 { margin: 0; }

#info
{	position: relative;
   top: 5%;
   right: 2%;
 	float: right;
	width: auto;

	background: rgba(251, 242, 212, .85);
	z-index: 3;
	font-family: 'Trebuchet MS', Arial, Sans-serif ;
	letter-spacing: .08em;

	font-size: .8em;
	box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
	border: 1px solid #fff;
	text-shadow: 1px 1px rgba(255,255,255,.3);
	padding: 0.1em 0.5em;
	
	
/* TUMMA INFO */		
/*		background: #333;
		background: rgba(51, 51, 51,.9);
		border: 2px solid #fff;
		font-weight: bold;
		color: #fff;
		border-radius: .5em;*/

}

#info ul
{  	
	margin: 0;
	padding: 0;
}

#info ul li
{
	list-style-type: none;
	display: inline;
	float: left;
	padding: .3em 1em;
	border-right: 1px solid #fff;

}

#info ul li.last
{
	border-right: 0;
}

#info li a
{
	display: block;
	text-decoration: none;
	border-bottom: 1px dotted #afafaf; 

/* TUMMA INFO */	
/*			color: #fff;*/
}

#info li a:hover { 	border-bottom: 1px solid transparent; text-shadow: 0 0 3px #fff;  }



#content-bg-left {
	clear: both;
	background: url(kuvat/content-left.png) repeat-y left top;
	width: 100%;
}

#content-bg-right {
	background: url(kuvat/content-right.png) repeat-y right top;
}


#content-container {
	margin: 0 124px;
	background-color: #FBF2D4;
	clear: both;

}

#content {
	background-color: #FBF2D4;
	width: 100%;
	clear: both;
}

#monitorin-tausta {		
	position: absolute;
	top: 0;
	left: 95px;
	background-image: url(kuvat/monitorin-tausta.png);
   background-repeat: repeat;
   background-position: top left;
   width: 459px;
   height: 335px;
   z-index: 1;

}

#main-content-border {
	background-color: #E5F6E5;
	width: 80%;
	position: relative;
	top: -7em;
	left: 15%;
	border: 1px solid #C2D0C2;
	border-radius: 1em;
	max-width: 50em;
	margin-left: 3em;
	z-index: 2;
	box-shadow: 0 0 20px 6px rgba(255,255,255,.8);
}



#main-content {
	background-color: #E5F6E5;
	border: 2px solid #F4FBF0;
	padding: 1em 1em 1em 3em;
	border-radius: 1em;
	z-index: 2;
}

#logo {
	position: absolute;
	top: -2px;
	left: -150px;
}

div.kpl {
margin-top: 2em;
}

#kumppani  {
}

#luotto {
}

#luotto img {
float:left;

}



#logo img, #main-content img {
max-width: 100%; 
}

.readmore {
display: block;
font-style: italic;
font-size: 1.1em;
margin: 0.3em 0 0.5em 0.5em;
}

#uutiskirje {
	float:left;
	font-size: 0.9em;
	text-align:left;
	text-transform:uppercase;
	font-weight:bold;
	margin: 1em auto 2em 30%;
}
 #uutiskirje a {
 	box-shadow:0 0 3px 2px rgba(0,0,0,.1);
 	border: 1px solid #fff;
 	display:block;
 	background-color: #effaef;
 	border-radius:0.5em;
 	padding: .5em 1em .5em 50px;
 	background-image: url(kuvat/uutiskirje-tumma.png);
 	background-repeat: no-repeat;
 	background-position: 1em center;
 	 }

#uutiskirje a:hover {
 	box-shadow:0 0 13px 5px rgba(255,255,255,.2);
 	background-color: #f5fcf5;

 	 }
 	 
#products-all-container {
	position: relative;
	margin: -4em auto 0 auto;
	background-color: transparent;
	overflow: visible;
	z-index: 2;

}

.product-container {
	float: left;
	margin: 0 1% 2em 1%;
	text-align: center;
   z-index: 2;
}

.autotieto {
width: 15em;

}

.ajomestari {
width: 28em;

}

.my-way {
width: 15em;

}

.product-image {
	height: 200px;
	overflow: visible;

}

.product-image img {
   border: 0;
   max-width: 100%;
}


.product-border {
	background-color: #E5F6E5;
	margin: 0;
	border: 1px solid #C2D0C2;
	border-radius: 1em;
	vertical-align: bottom;
	box-shadow: 0 0 15px 3px rgba(255,255,255,.8);
}

.product {
	background-color: #E5F6E5;
	border: 2px solid #F4FBF0;
	width: auto;
	padding: 3%;
	border-radius: 1em;
	text-align: left;

}


#bottom-bg-left
{
	clear: both;
	background: url(kuvat/content-bottom-left.png) no-repeat left top;
	height: 196px;
}

#bottom-bg-right
{
	background: url(kuvat/content-bottom-right.png) no-repeat right top;
	height: 196px;
}

#bottom {
	background: url(kuvat/content-bottom.png) repeat-x left top;
	height: 196px;	
	margin: 0 124px;
	text-align: right;
	padding: 55px 0 0 0;
	color: #233438;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	text-shadow: 2px 2px #fff;	
}


#footer
{
	clear: both;
	background: transparent;
	text-align: right;
	padding: .2em 1em;
	height: 1.5em;
}