/********************************** 
design Michael Ljungqvist (c) 2008
www.helsinkibeerfestival.fi
Muokattu:06-04-2008
Versio 2.0
/**********************************/

/********************************** 
1.  Vakiot
2.  Rakenne
3.  Tekstimäärittelyt
4.  Extra
/**********************************/

/**********************************
24,add bannerK
/**********************************/

/********************************** 
VAKIOT
/**********************************/



body {
	background: url(../img/bg3.gif) #000 repeat-x;;
	text-align: center;
	font-family: "Tahoma", "Helvetica", "Arial", sans-serif;
	text-indent:0;
	font-size: 96%;
	color: #000000;
	margin: 0;
	padding: 0;
 	font-style: normal;
	font-weight: normal;
	}
	
#pikkulogo
{
	position:relative;
	top:0px;
	left:0px;
}
	 
#wrap {
	width: 810px;
	margin-left: auto;
	margin-right: auto;
 	 float:left;
   	}
   	
  
#bannerK{
	margin-left: auto;
	margin-right: auto;
	width: 1040px;
	height: 1040px;
 	}
#bannerLeftSiipi{
	width: 100px;
	height: 500px;
	float:left;
	\margin-right:10px;/* for IE5/Win */
	padding:0;
	margin-top:100px;
	}
	
.bannerLeft1{
	position:relative;
	top:0px;
	right:40px;
	text-align:center;
	width: 140px;
	height: 35px;
	padding:0;
	margin-top:5px;
	}
	
	
.bannerLeft2{
	position:relative;
	top:10px;
	right:40px;
	text-align:center;
	width: 140px;
	height: 350px;
	padding:0;
	margin-top:5px;
	}
 
	
#bannerRightSiipi{
 	width:100px;
	height: 500px;
	float:left;
 	margin-top:100px;
	}

.bannerRight1{
	position:relative;
	top:850px;
	left:10px;
	margin-top:5px;
	text-align:center;
	width: 100px;
	height: 200px;
	padding:0;
	}
.bannerRight2{
	text-align:center;
	width: 100px;
	height: 500px;
	padding:0;
	margin-top:5px;
	}

 .banner {
	color: #FFF;
	}

.banner a,.banner a:active,.banner a:visited{
	font-weight: bold;
	color: #cf4a37;
	}
.banner a:hover{
	font-weight: bold;
	color: #FFF;
	}
	
	
   	
 
   	
a {
	color: #333333;
	text-decoration: underline;
	}

a:active {
	color: #333333;
	text-decoration: underline;
	}
a:visited {
	color: #333333;
	text-decoration: underline;
	}
a:hover {
	color: #cf4a37;
	text-decoration: none;
	}	


h1 {color: #555; font-size: 1.55em; font-weight: normal;padding-left:0;margin-left:0;}
h2 {color: #cf4a37; font-size: 1.3em; font-weight: normal; line-height: 1em;margin-bottom:1px;}
 
h2 a,h2 a:active,h2 a:visited, h2 a:hover{
	color: #cf4a37;
	}
	

	
	
h3 {
	font-size: 100%;
	font-weight: normal;
	color: #cf4a37;
	letter-spacing: 1px;
	text-transform: none;
	}
h4 {
	padding:2px;
	margin:2px 2px 2px 0;
	font-size: 92%;
	font-weight: bold;
	color: #cf4a37;
	letter-spacing: 2px;
	
	}

h4 a,h4 a:active,h4 a:visited{
	padding:2px;
	margin:2px;
	font-size: 90%;
	font-weight: normal;
	color: #b64a3a;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	}


h4 a:hover{
	padding:2px;
	margin:2px;
	font-size: 90%;
	font-weight: normal;
	color: #b64a3a;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	}	

h5 {
	padding:2px;
	margin:2px 0 0 9px;
	font-size: 76%;
	font-weight: bold;
	color: #b64a3a;
	}

 
h5 a,h5 a:active,h5 a:visited{
	padding:2px;
	margin:2px 0 0 9px;
	font-size: 70%;
	font-weight: bold;
	color: #b64a3a;
	}

h5 a:hover{
	padding:2px;
	margin:2px 0 0 9px;
	font-size: 70%;
	font-weight: bold;
	color: #b64a3a;
	}
	

p {
	font-family:Tahoma, Verdana, Arial, Serif;
	font-size:0.85em;
	color:	#666666;
	line-height:1.5em;
	}


.text {
	padding:0;
	margin:0;
	}

.varaus {
	color: #cf4a37;
	font-weight: bold;
	}

.varaus a,.varaus a:active,.varaus a:visited{
	font-weight: bold;
	color: #cf4a37;
	}
.varaus a:hover{
	font-weight: bold;
	color: #000;
	}
.vakioLista {
	margin:0;
	font-family:Tahoma, Verdana, Arial, Serif;
	font-size:0.85em;
	color:	#666666;
	line-height:1.5em;
	}
.noBottom {
	padding-bottom:0;
	margin-bottom:0;
	}
/***************************
Rakenne
/***************************/


#mainSisalto {
	padding: 0px;
	float: left;
	height: auto;
	width: 790px;
	margin-left: 10px;
	}



html body #mainSisalto {
	margin-left: 5px;
	}

.musta {
	color:#cf4a37; 
	}


 
	

#logo {
	float: left;
	height: 150px;
	background-image: url(../img/header_update.gif);
	width: 810px;
	}
#logoEng {
	float: left;
	height: 150px;
	background-image: url(../img/header_update.gif);
	width: 810px;
	}

#headerSisaltoEng {
	float: left;
	height: 143px;
	width: 809px;
	background-image: url(../img/header_02.jpg);
	background-repeat: no-repeat;
	}

#main {
	float: left;
	width: 100%;
	text-align: left;
	padding-bottom: 1em;
	}

	
#footer {
	clear: left;
	float: left;
	height: 66px;
	width: 810px;
	background-image: url(../img/footer_update.gif);
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
	}

#page_bg {
	background: url(../img/tausta2.gif) repeat-y;
	margin: 0px;
	padding: 0px;
	float: left;
	width: 810px;
	}

#navcontainer {
	float: left;
	width: 810px;
	text-align: left;
	padding: 0;
	margin: 0;
	height:1%;
	}

html>body #navcontainer{
	}

#nav {
 	float: left;
	width: 788px;
	padding: 0px  2px  0px  0px;
	background: url(../img/navibg.gif);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
 	height:26px;
	}

html body #nav {
	margin-left:0px;
	width:788px;
	}

#nav li {
	float: left;
 	margin: 2px 0 0 0;
	padding-left: 0px;
	padding-right: 0px;
	list-style: none;
	font-size:70%;
	font-variant: small-caps;
	letter-spacing:1px;
  	}
	

#nav ul {
 	margin: 0px;
 	list-style: none;
 	position:relative;
 	height:1%;
	}


#nav li a,#nav li a:visited,#nav li a:active {
	position:relative;
    padding:4px 10px 8px 10px;
    font-size: 15px;
    text-decoration:none;	
    color:#FFF; 
    font-weight: normal;
  	}


#nav li a:hover {
	position:relative;
   	padding:4px 10px 8px 10px;
    font-size: 15px;
    text-decoration:none;	
    color:#cf4a37;    
    font-weight: normal; 
    background: url(../img/navi_hover_bg.gif);
   	}

#nav li a.active,#nav li a.active:visited , #nav li a.active:active {
	position:relative;
   	padding:4px 10px 8px 10px;
    font-size: 15px;
    text-decoration:none;	
    color:#cf4a37;    
    font-weight: normal; 
    background: url(../img/navi_hover_bg.gif);
	}
 

#nav li a.active:hover {
	position:relative;
   	padding:4px 10px 8px 10px;
    font-size: 15px;
    text-decoration:none;	
    color:#cf4a37;    
    font-weight: normal; 
    background: url(../img/navi_hover_bg.gif);
	}

	
 
#sisaltoVasen, #sisaltoVasenAla{
	float: left;
	display:inline;
    width: 320px;
    margin-left: 80px;
    clear: both;
	height: 1%;
    margin-top: 6px;
	margin-right: 0px;
    margin-bottom: 10px;

    background-position: bottom right;
	}
#sisaltoVasen1{
	float: left;
    width: 600px;
	height:100%;
    margin-left: 80px;
    clear: both;
	height: 1%;
    margin-top: 0px;
	margin-right: 10px;
    margin-bottom: 0px;
    background-position: bottom right;
	}
#sisaltoVasenApu{
	float: left;
	display:inline;
    width: 226px;
    margin-left: 30px;
    clear: both;
    margin-top: 6px;
	margin-right: 0px;
    margin-bottom: 10px;

    background-position: bottom right;
	}

#sisaltoVasenApuSnadi{
	float: left;
	display:inline;
    width: 206px;
    margin-left: 30px;
    clear: both;
    margin-top: 6px;
	margin-right: 0px;
    margin-bottom: 10px;
    
    
    background-position: bottom right;
	}

#sisaltoVasenApuNobg{
	float: left;
	display:inline;
    width: 266px;
    margin-left: 30px;
    clear: both;
    margin-top: 6px;
	margin-right: 0px;
    margin-bottom: 10px;
 	}

#sisaltoVasenKuva{
	float: left;
	display:inline;
    width: 210px;
    margin-left: 30px;
    clear: both;
    margin-top: 6px;
	margin-right: 0px;
    margin-bottom: 10px;
    
  
	}

#sisaltoVasenIso{
	float: left;
	display:inline;
    width: 406px;
    margin-left: 80px;
    clear: both;
    margin-top: 6px;
	margin-right: 0px;
    margin-bottom: 10px;
    
  
  
	}

#sisaltoOikea, #sisaltoOikeaAla {
	float: right;
	display:inline;
    width: 300px;
    margin-left: 0px;
    clear: none;
    margin-top: 6px;
	margin-right: 65px;
    margin-bottom: 10px;
    
    
  
	}


.oma1, .oma1 a
{
	color:#CC4835;
	font-size:14px;
	font-weight:bold;
}
.oma1 a img, img
{
text-decoration:none;
border:0px;
}

#sisaltoOikeaIso 
{
	float: right;
	display:inline;
    width: 506px;
    margin-left: 0px;
    clear: none;
    margin-top: 0px;
	margin-right: 15px;
    margin-bottom: 0px;
}

#sisaltoOikeaIsoIlmanTausta {
	float: right;
	display:inline;
    width: 406px;
    margin-left: 0px;
    clear: none;
    margin-top: 6px;
	margin-right: 65px;
    margin-bottom: 10px;
   	}

#sisaltoTuote {
	float: right;
	display:inline;
    width: 456px;
    margin-left: 0px;
    clear: none;
    margin-top: 6px;
	margin-right: 25px;
    margin-bottom: 10px;

	}

#sisaltoTuote2007 {
	float: right;
	display:inline;
    width: 500px;
    margin-left: 0px;
    clear: none;
    margin-top: 6px;
	margin-right: 25px;
    margin-bottom: 10px;

	}
#sisaltoTuote2008 {
	float: right;
	display:inline;
    width: 510px;
    margin-left: 0px;
    clear: none;
    margin-top: 6px;
	margin-right: 0px;
    margin-bottom: 10px;

	}
#sisaltoRekisteri {
	float: right;
	display:inline;
    width: 700px;
    margin-left: 0px;
    clear: none;
    margin-top: 6px;
	margin-right: 25px;
    margin-bottom: 10px;

	}

#kuvapankki {
	float: right;
	display:inline;
    width: 700px;
    margin-left: 0px;
    clear: none;
    margin-top: 6px;
	margin-right: 25px;
    margin-bottom: 10px;

	}

#sisalto {
	float: left;
    display: inline;
    width: 306px;
    margin-left: 49px;
    clear: both;
    margin-right: 0px;
    margin-bottom: 20px;
	}



#kehykset {
	float: left;
	padding: 0;
	margin: 0;
	}
#kehykset_galleria {
	width:500px;
	border:0;
	text-decoration:none;
	padding: 0;
	margin: 0;
	}
#kehykset #facebook {
	float: right;
	padding: 0;
	margin: 0;
	}

   

#mainKehys {
	font-size: 82%;
	margin-top: 0px;
	width: 790px;
	height: 170px;
	margin:0;
	float: left;
	padding:0;
	background-color: #000;
	background-image: url(../img/tausta_uus.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	border-bottom: 3px ridge #000;
	}

#mainKehysKavijoille {
font-size: 82%;
	margin-top: 0px;
	width: 790px;
	height: 170px;
	margin:0;
	float: left;
	padding:0;
	background-color: #000;
	background-image: url(../img/tausta_uus_kavijoille.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	border-bottom: 3px ridge #000;
	}

#mainKehys3 {
	font-size: 82%;
	margin-top: 0px;
	width: 790px;
	height: 170px;
	margin:0;
	float: left;
	padding:0;
	background-color: #000;
	background-image: url(../img/tausta2.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	border-bottom: 3px ridge #000;
	}

#mainKehys4 {
	font-size: 82%;
	margin-top: 0px;
	width: 790px;
	height: 170px;
	margin:0;
	float: left;
	padding:0;
	background-color: #000;
	background-image: url(../img/tausta2.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	border-bottom: 3px ridge #000;
	}

html>body #mainKehys {
	margin-top: 0px;
	}

 
#mainKehys h1{
 	font: bold small Arial; 
	color: #FFF; 
	text-transform: uppercase; 
	letter-spacing: 0.1em; 
	padding: 35px 5px 4px 8px;
	margin: 0;
	}

#mainSisalto p {
    height:1%;
	padding: 0;
	margin-top: 0.4em;
	margin-right: 4em;
	color: #333333;
	}


#mainKehys p {
	padding: 10px 4px 2px 8px;
	color: #FFF;
	font-size:1.0em;
	}

	
	.float_right {
	float:left;
	margin-top:1px;
	margin-right:10px;
	}

.clear_float {
	clear:both;
	}

 

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

subNavit

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

.alavalikko {
	position:relative;
	list-style: none;
	line-height: 9px;
	margin: 0 auto 15px auto;
 	padding: 0;
	}


.alavalikko li {
	position:relative;
 	list-style: none;
	margin: 0;
	padding: .2em 0 .5em 5px;
	background:url(../img/nuoli.gif) no-repeat left;
   }


.alavalikko a,.alavalikko a:visited,.alavalikko a:active{
	position:relative;
 	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
  	padding-left:19px;
    font-size: 0.8em;
	}


.alavalikko a:hover{
	position:relative;
	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
    padding-left:19px;
    font-size: 0.8em;
	color:#cf4a37;
	text-decoration:none;
	}

	

/**ala active**/

 .alavalikko a.active,.alavalikko a.active:visited,.alavalikko a.active:active{
	position:relative;
	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
	background-repeat: no-repeat;
	padding-left:19px;
    font-size: 0.8em;
    text-decoration:none;
    color:#777;
	}


.alavalikko a.active:hover{
	position:relative;
	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
    padding-left:19px;
    font-size: 0.8em;
	color:#cf4a37;
	text-decoration:none;
	}
	

 
.alaalavalikko {
	position:relative;
	list-style: none;
	line-height: 9px;
	margin: 0 auto 15px 15px;
 	padding: 0;
 	font-size:0.8em;
	}
.alaalavalikko li {
	background:none;
		margin:9px 0 0 15px;
		
	 	}

	
.alaalavalikko a,.alaalavalikko a:visited,.alaalavalikko a:active{
	border-left:3px #cf4a37 solid;
	padding:1px 0 1px 5px;

   	}

.alaalavalikko a:hover{
	border-left:3px #000 solid;

	}

		

/**alaala active**/	



.alaalavalikko a.active,.alaalavalikko a.active:visited,.alaalavalikko a.active:active{
	border-left:3px solid #b64a3a;
	position:relative;
 	padding-top: 2px;
    display: block;
    padding-bottom: 1px;
    padding-left:11px;
    font-size: 0.8em;
    color:#777;
    text-decoration:none;
	margin-right:80px;
	}


.alaalavalikko a.active:hover{
	border-left:3px solid #b64a3a;
	position:relative;
	padding-top: 2px;
	display: block;
    padding-bottom: 1px;
    padding-left:11px;
    font-size: 0.8em;
	color:#777;
	text-decoration:none;
	color:#777;
	margin-right:80px;
	}




.tiedosto {
	position:relative;
	list-style: none;
	line-height: 9px;
	margin: 0 auto 15px auto;
 	padding: 0;
	}


.tiedosto li {
	position:relative;
 	list-style: none;
	margin: 0;
	padding: .2em 0 .5em 5px;
	background:url(../img/document.jpg) no-repeat left;
	}



.tiedosto a,.tiedosto a:visited,.tiedosto a:active{
	position:relative;
 	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
  	padding-left:19px;
    font-size: 0.8em;
	}

.tiedosto a:hover{
	position:relative;
 	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
  	padding-left:19px;
    font-size: 0.8em;	
	color:#777;
	text-decoration:none;
	}



.sivukartta li {
	list-style: none;
	position:relative;
    }

.sivukartta a,.sivukartta a:visited,.sivukartta a:active{
	padding-top: 2px;
	font-size: 0.8em;
	}

.sivukartta a:hover{
	padding-top: 2px;
    font-size: 0.8em;	
	}

/***************************
taulukot
/***************************/



table.tuotteet {
	font-family: "Lucida Sans Unicode", Arial, sans-serif;
	font-size:0.85em;
    margin:10px 10px 10px 0px;
	border: 1px solid #666;
    }

td {
	border: 1px solid #666;
	}

th.tuotteet {
  	font-weight: bold;
    border: 1px solid #666;
  	background: #cf4a37;
  	color: #FFF;
  	text-align: left;
	}
 

tr.variHar {
	background: #FFF;
	text-align: left;
	}


#tuotelistaus {
	margin-left:20px;
	} 


/*vaakaSubMenu*/

#vaakaSubMenu {
	padding: 0 ;
	margin-left: 0;
	}


#vaakaSubMenu {
	padding: 0 ;
	margin-left: 0;
	}


#vaakaSubMenu li {
	list-style: none;
	margin: 0;
	display: inline;
	}



#vaakaSubMenu li a,#vaakaSubMenu li a:visited,#vaakaSubMenu li a:active {
	text-decoration:none;
	padding: 0px 5px  0px  5px;
	border-left: 4px solid #cf4a37;
	text-decoration: underline;
	}

#vaakaSubMenu li a:hover {
	border-color: #AAB;
	color: #555;
	text-decoration: none;
	}
	
/***************************
extrat
/***************************/

#sivukartta ol {
	font-size:	1em;
	font-style: normal;
	line-height: 1em;
	text-indent: 5px;
	list-style-position: outside;
	list-style-type: none ;
	padding: 6px;
	margin: 2px;
	}

#sivukartta li {
	list-style-type: none ;
	font-size:	1em;
	padding:4px;
	text-indent: 0px;
	margin-left:20px;
	}

.vahvista {
	font-weight: bold;
 	}

.isonna {
	text-transform: uppercase;
	}

.tahti {
	font-size: 1.2em;
	color: #dc5a47;
	}	

 .info {
	font-size: 77%;
	color:	#a5a5a5;
	}	

 .copy {
	font-size:0.75em;
	color:	#FFF;
	}		

.artistiInfo {
	text-align:right ;
	margin:0;
	padding:0 4px 0 0;	
	display: block
	}	

.pikkuInfo {
	text-align:right ;
	font-size: 77%;
	color:	#a9a9a9;
	display: block;
	padding:0 4px 0 0;
	}	

.pikkuInfo a,.pikkuInfo a:visited,.pikkuInfo a:visited {
	text-align:right ;
	font-size: 77%;
	color:	#a9a9a9;
	display: block;
	padding:0 4px 0 0;
	}
.pikkuInfo a:hover {
	text-align:right ;
	font-size: 77%;
	color:	#888;
	display: block;
	padding:0 4px 0 0;
	}

.omistus {
	text-align:left;
	color:#a5a5a5;
	}

.punanen_nuoli{
	padding: .2em 0 .5em 18px;
	background:url(../img/nuoli.gif) no-repeat left;
	}
legend

{
	color: #FFF;
	background: #cf4a37	;
	border: 1px solid #D0D0BF;
	padding: 2px 6px
	}


.pakollinen {
	font-size:0.9em;
	color: #cf4a37;
	}
.error {
	font-size:0.9em;
	color: #cf4a37;
	}

.warn {
	font-size:0.9em;
	color: #238348;
	}

.etusivuNosto {
	position:relative;
	list-style: none;
	line-height: 9px;
	margin: 0 auto 15px auto;
 	padding: 0;
	}


.etusivuNosto li {
	position:relative;
 	list-style: none;
	margin: 0;
	padding: .2em 0 .5em 5px;
	background:url(../img/nuoli.gif) no-repeat left;
   }


.etusivuNosto a,.etusivuNosto a:visited,.etusivuNosto a:active{
	position:relative;
 	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
  	padding-left:19px;
    font-size: 0.8em;
	}


.etusivuNosto a:hover{
	position:relative;
	padding-top: 6px;
    display: block;
    padding-bottom: 1px;
    padding-left:19px;
    font-size: 0.8em;
	color:#cf4a37;
	text-decoration:none;
	}