@charset 'utf-8';
/*
*
*		Sivupohja
*
*		style.css
*
*/

	

/**
*	::::::::::::::::::: Perus Tagit :::::::::::::::::::
*/
html												{  }

body												{ font-size: 16px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; 
													  background:url(../_images/bg-body.png) repeat 0 0; margin:0; color:#454545;}
										  													  
#main-wrapper 										{ width: 100%; height: 100%; overflow: auto; margin: 0 auto; text-align: center;}										  
										  													  
#wrapper											{ width: 980px; margin: 0 auto;  padding: 0; text-align:center; overflow: hidden; }

#content											{ width: 980px; padding: 0; text-align: left; float:left; }

p 													{ margin: 0 0 1em; }
strong												{ font-weight: bold; }
.pre 												{ white-space:pre; }


/* Header */
#header												{ height: 200px; margin:0; padding: 0; }
#header #logo										{ margin: 20px 20px 20px 0; float:left;}


/* Palstat */
#mainColumn											{ float: left; width: 580px; padding-right: 20px;}
#mainColumn-wide									{ float: left; width: 880px; padding-right: 20px;}

#secondColumn										{ float: right; width: 300px; padding: 0; margin: 0 50px 0 0;}

.wideColumn											{ float: left; width: 880px;}
.narrowColumn										{ float: left; width: 275px; margin-right: 25px;}
.wrapper											{ float: left; width: 900px;}

.article											{ float: left; width: 280px; margin-right:30px;}

.col3												{ float: left; width: 280px; margin-right:30px;}

.ingressi											{ font-size: 20px; color:#333;}


/* Otsikot */
h1, h2, h3, h4, h5									{ margin: 15px 0 5px 0; font-family: Arial, Helvetica, sans-serif; }
h1 span, h2 span, h3 span, h4 span, h5 span			{ font-size: 65%; }


h1													{ font-size: 28px; color:#757575; line-height: 120%;  }
h2													{ font-size: 22px; color:#757575; line-height: 120%;  }
h3													{ font-size: 18px; color:#757575; line-height: 120%; text-transform: uppercase; }
h4													{ font-size: 18px; }
h5													{ font-size: 16px; text-transform:uppercase; letter-spacing:0.1em; }



/* Linkit */
a													{ color: #454545; }
a:visited											{ color: #222; }
a:hover												{ color: #000; }	
					

/* Listat */
ul													{ padding: 0 0 10px 0; margin: 20x 0 20px 0;}
li													{ list-style-type: none; background:url(../_images/bullet.png) no-repeat 0 9px; padding: 0 0 0 12px; margin-left: 0;}
ul a												{ text-decoration: none; }
ul.viivat li										{ border-bottom: 1px solid #cbc6bc; padding-bottom: 10px; padding-top: 10px;  background: url(../_images/bullet.png) no-repeat 0 17px;}	




/**
*	::::::::::::: Perus Tagit END :::::::::::::
*/





/* ::::::::::::::::::: Päänavigaatio ::::::::::::::::::: */
#nav												{ width: 980px; padding:0; margin: 100px 0 0 0; color: #333; float: left; }	
#nav ul												{ padding: 0; margin: 0; float: left; }
#nav ul	li											{ height:40px; float: left; background: none; padding: 0; margin: 0;}
#nav a												{ font-size: 16px; display:block; float:left; height:31px; padding: 5px 10px 5px 10px; color: #000; text-decoration: none; 
													  text-transform:uppercase; border-right: 1px solid #000;   }

#nav a.first										{ border-left: none;   }	
#nav a.last											{ border-right: none;   }	
												  												  													  
#nav .active a										{ color: #000;   }
#nav a:hover										{ color: #000;   }
#nav .last a										{ border-right: none;   }



/* ::::::::::::::::::: Footer ::::::::::::::::::: */
#footer													{ color: #757575; width:100%; text-align: left; height:200px; }
#footer	a												{ color: #757575; text-decoration: none;}
#footer	a:hover											{ color: #333; text-decoration: none;}

#footer	.article										{ width: 200px; float: left; margin-left: 20px;}
#footer	.wideColumn										{ width: 100%; float: left; text-align: center; }




/* ::::::::::::::::::: Form ::::::::::::::::::: */
input, textarea											{	padding: 5px; margin: 0 0 20px 0;
															background: #fff;
															background: -moz-linear-gradient(top, #ededed 0%, #fff 15%); /* firefox */
															background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(15%,#fff)); /* webkit */
															border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #bfbfbf;
															-moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
}

input													{	height: 25px; }

input.button											{ width: auto; height: 37px; font-size: 15px; padding: 7px; background: #da251c; color: #fff; border: none; 
														  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f33e2e', endColorstr='#c10c0a'); /* for IE */
														  background: -webkit-gradient(linear, left top, left bottom, from(#f33e2e), to(#c10c0a)); /* for webkit browsers */
														  background: -moz-linear-gradient(top,  #f33e2e,  #c10c0a); /* for firefox 3.6+ */ }





/* ::::::::::::::::::: Sekalaista ::::::::::::::::::: */
.nuoli													{  background:url(../_images/nuoli.png) no-repeat 0 2px; padding-left:20px;}
.huomio													{  color: #D3B478; }
.viiva													{  border-bottom: 1px solid #cbc6bc; height:5px; margin: 20px 0 20px 0; }

.valokuva												{  border: 12px solid #fff; margin: 0 0 20px 20px;
															-moz-box-shadow: 3px 3px 9px #cacaca;-webkit-box-shadow: 3px 3px 9px #cacaca;box-shadow: 3px 3px 9px #cacaca;}
	
.varjo													{ -moz-box-shadow: 3px 3px 9px #cacaca;-webkit-box-shadow: 3px 3px 9px #cacaca;box-shadow: 3px 3px 9px #cacaca;}
.tekstivarjo											{ text-shadow: #000 2px 2px 2px; height: 1em; filter: Shadow(Color=#000, Direction=135, Strength=2);}


.rounded-corners										{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;  }

.small													{ font-size: 13px;}
.button													{ padding: 5px; background-color: #830606; color: #fff; border: none;}

.rotate1												{ -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg); -ms-transform:rotate(-1deg); }

.transparent											{ opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */}

blockquote												{ float: left; width: 285px; margin-left: 10px; margin-bottom: 10px; padding-left: 0; font-size: 24px; }







/**
* 	Joka ikiseen projektiin 100% varmuudella sopivia classeja
*/

.removeRightMargin									{ margin-right: 0 !important; }
.removeLeftMargin									{ margin-left: 0 !important; }
.removeTopMargin									{ margin-top: 0 !important; }
.removeBottomMargin									{ margin-bottom: 0 !important; }
.clear												{ clear: both; }
.floatLeft											{ float: left; }
.floatRight											{ float: right; }

.RightMargin										{ margin-right: 20px !important; }
.LeftMargin											{ margin-left: 20px !important; }
.TopMargin											{ margin-top: 20px !important; }
.BottomMargin										{ margin-bottom: 20px !important; }

.RightMargin2										{ margin-right: 40px !important; }
.LeftMargin2										{ margin-left: 40px !important; }
.TopMargin2											{ margin-top: 40px !important; }
.BottomMargin2										{ margin-bottom: 40px !important; }



/*IE7 HACK*/ *:first-child+html 					{ } /*IE7 HACK*/

/*IE8 HACK*/
@media \0screen { .color 							{color: #F00;} }



/* Kannattaa käyttää jos vikaa ei löydy muuten. Esim. paddingtonit tai paddingtonin pahis kaverit margintonit ei täsmää. */
.redBorder											{ border: 1px solid red; }