@charset "utf-8";
/* CSS Document */

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

body  {
	font: 0.8em Arial, Helvetica, Verdana, sans-serif;
	background: #fff;
	background-image:url(img/base/bg_1.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center 70px;
	margin: 0; /* " */
	padding: 0;
	text-align: center; 
	color: #545454;
}

/* ################################## CONT  ################################ */

#container { 
	width: 900px;  
	background: #FFFFFF;
	background-image:url(img/base/bg_1_ala.jpg);
	background-repeat:no-repeat;
	background-position:center 70px;
		background-attachment:fixed;

	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 




/* ################################## HEADER  ################################ */
#header { 
	background: #fff; 
height:70px;
text-align:left;
} 

#lang {float:right;
margin:0.5em;}

#lang img {margin:20px 0.5em 0.5em 0.5em;}


/* ################################## ETUSIVU  ################################ */

#front {background-image:url(img/base/bg_1_col.jpg);
	background-repeat:no-repeat;
	background-position:center 0;
	width:900px;
	height:700px;}

/* ################################## SIVU  ################################ */
#navi {
	float: left; /* ! */
	width: 200px; /* ! */
	background: #fff; 
	padding: 6em 1em;
	font-family:Lucida Sans, Arial, Helvetica, sans-serif; font-size:90%;
	
	/* läpinäkyvyys settingsit */
	filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
	
#navi a { text-decoration:none;}
#navi a:link, #navi a:visited, #navi a:active {color:#000;}
#navi a:hover {color:#000;}


#navi ul {margin:0;  list-style:none;}
#navi li {margin:0 0 1.5em 0; padding:0; list-style:none;}
#navi li li {margin:0.8em 0 0 2em; padding:0; list-style:none;}


/* ################################## PÄÄSISÄLTÖ  ################################ */
#leipis { 
	margin: 70px 0 1em 250px; /* ! */
	padding: 0 1em 2em 1em; 
		min-height:580px;
} 


#leipis a {font-family:Arial, Helvetica, sans-serif;  text-decoration:none;}
#leipis a:link, #leipis a:visited, #leipis a:active {color:#454556;}
#leipis a:hover {color:#de8a72;}

#leipis ul {margin:1em 0;}
#leipis li {margin:0.5em 3em;}

#leipis img {margin:0.5em; margin-left:0;}

/* ################################## TEKSTIT  ################################ */

h1 {
		font-family:Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
	font-size: 170%;
	color:#1993ab;
 padding: 0;
margin: 0em 0.5em 1.5em 0em;
	font-weight:normal;
	letter-spacing:0em;
		text-transform:lowercase;
	font-variant:none;
	text-align:left;
}

h1 a {	 color: #ff6d1b; text-decoration:none; background-image:none;}
h1 a:visited {	color: #ff6d1b; text-decoration:none; background-image:none;}
h1 a:hover {	color: #ff6d1b; text-decoration:none; background-image:none;}
h1 a:active {	color: #ff6d1b; text-decoration:none; background-image:none;}
 
 
 h2 {
		font-family:Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	color:#de8a72;
 padding: 0;
margin: -0.5em 0.5em 1.5em 0;
	font-weight:normal;
	letter-spacing:0em;
		text-transform:uppercase;
	font-variant:none;
	text-align:left;
}
 
 
 /*  EI KOSKAAN LINKKIÄ  */
h3 {
		font-family: Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
	font-size: 130%;
	color:#999;
 padding: 0;
margin: 3em 0.5em 1em 0em;
	font-weight:bold;
	letter-spacing:0em;
			text-transform:lowercase;
	font-variant:none;
	text-align:left;
	clear:right;
}
 

 /* SAMA KUIN h3 MUTTEI tyhjennä oikeaa puolta eli clear none */
h4 {
		font-family: Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
	font-size: 130%;
	color:#999;
 padding: 0;
margin: 3em 0.5em 1em 0em;
	font-weight:bold;
	letter-spacing:0em;
			text-transform:lowercase;
	font-variant:none;
	text-align:left;
	clear:none;
}
 
 
h5 {
		font-family: Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	color:#b6c950;
 padding: 0;
margin: 2em 0.5em -1em 0em;
	font-weight:bold;
	letter-spacing:0em;
			text-transform:lowercase;
	font-variant:none;
	text-align:left;
	clear:none;
}
 


p  {margin:2em 0;
line-height:150%;}

a { text-decoration:none;}


/* ################################## TUOTTEET  ################################ */
.tuote { 
float: left; 
width: 120px; 
color: #000000; 
font-size:90%;
}

.tuote p { margin:0;
line-height: 140%; 
font-size:95%;
}

img.tuote {
margin:0 1em 1em 0;
}

 

/* ################################## FOOTER  ################################ */
#footer { 
	background:#fff; 
	text-align:center;
	font-size:85%;
	color:#999;
	border:0;
	border-top:1px solid #ddd; 
} 
#footer p {
	margin: 0; /* ! */
	padding: 0.5em; 
}

#footer a {font-family:Arial, Helvetica, sans-serif;  text-decoration:none;}
#footer a:link, #leipis a:visited, #leipis a:active {color:#454556;}
#footer a:hover {color:#454556;}


/* ################################## EXTRAT  ################################ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}