/* @override http://www.nokianpanimo.fi/css/style.css */

/* -----------------------------------------------------------

	Project:		Nokian Panimo
	Version:		1.0
	Created:		26/11/08
	Modified:		16/01/09
	
		[Table of contents]
		1. Reset
		2. Typography
			2.1	Headings
			2.2	Text elements
			2.3	Lists
			2.4	Tables
			2.5	Forms
		3. Structure
			3.1	Header
			3.2	Navigation
			3.3	Content
			3.4	Footer
		4. Clear floats
	
----------------------------------------------------------- */


/* -----------------------------------------------------------

	Reset
	
----------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tr, caption, tbody, tfoot, thead, th, {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table 			{ border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, th 	{ vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }


/* -----------------------------------------------------------

	Typography
	
----------------------------------------------------------- */

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body { 
	background: url('../img/background.jpg') no-repeat top center #000;
	font-size: 75%;
	color: #222;
	line-height: 1.5;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; color: #443119; margin-left: 20px; margin-top: 40px; }
h2 { font-size: 1.6em; margin-bottom: 0.75em; color: #5c4d3a; margin-left: 25px; margin-right: 15px; }
h3 { font-size: 1.8em; line-height: 1; color: #443119; width: 450px; margin-left: 22px; _margin-top: -30px; *margin-bottom: 15px; }
h4 { font-size: 1.5em; line-height: 1.25; margin-margin-bottom: 1.25em; height: 1.25em; color: #4c290a; }
h5 { font-size: 2.0em; margin-bottom: 0.75em; color: #5c4d3a; margin-left: 20px; /*margin-right: 40px; float: left; display: inline;*/ }
h6 { font-size: 1.6em; font-weight: bold; color: #443119; margin: 0; margin-left: 5px; text-transform: uppercase; }

#container h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; color: #443119; margin-left: 20px; margin-top: -0px; }

.ind { margin-top: 20px; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin-left: 25px; margin-right: 15px; *margin-bottom: 15px; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

p.main { margin-left: 25px; margin-right: 15px; }
p.sb-m { margin-left: 15px; margin-top: 10px; }
p.sb-m2 { margin-left: 15px; margin-top: 20px }

p.footer1 { margin-left: 30px; margin-top: 30px; *margin-top: 50px; }
p.footer2 { margin-left: 55px; margin-top: 99px; *margin-top: 120px; }

p.mestari { font: normal 0.8em Arial; margin-top: 20px; }
p.mestariteksti { font: normal 0.8em Arial; color: #000; margin-bottom: 3px; margin-top: 5px; margin-left: 0; }
p.keisarioluet { margin-top: 520px; *margin-top: 70px; _margin-top: 80px; }

p.ruoka { font: 1.0em Arial; color: #5c4e3a; margin-right: 0px; *margin-bottom: 10px; }

a:focus, 
a:hover     { color: #000; }
a           { color: #000; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 

/* Hyperlinks
-------------------------------------------------------------- */

a.navigation1:link, a.navigation1:visited { color: #fefefe; text-decoration: none; margin-right: 18px; }
a.navigation1:active { color: #ed1c24; text-decoration: none; margin-right: 18px; }
a.navigation1:hover { color: #d5bb9a; text-decoration: none; margin-right: 18px; }

a.navigation2:link, a.navigation2:active, a.navigation2:visited { color: #ed1c24; text-decoration: none; }
a.navigation2:hover { color: #ff595f; text-decoration: none; }

.navselected { color: #d5bb9a; }

a.enemman:link, a.enemman:active, a.enemman:visited { color: #eb3d37; text-decoration: underline; }
a.enemman:hover { color: #ff7873; text-decoration: underline; }

a.enemman2:link, a.enemman2:active, a.enemman2:visited { color: #eb3d37; padding-left: 24px; text-decoration: underline;  }
a.enemman2:hover { color: #ff7873; text-decoration: underline; padding-left: 24px; }

a.mestarilinkki:link, a.mestarilinkki:active, a.mestarilinkki:visited { color: #eb3d37; text-decoration: underline; font: normal 0.8em Arial; }
a.mestarilinkki:hover { color: #ff7873; text-decoration: underline; font: normal 0.8em Arial; }

/* Lists
-------------------------------------------------------------- */

li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; background: #C3D9FF; }
th,td       { padding: 4px 10px 4px 5px; }
tr.even td  { background: #E5ECF9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Forms
-------------------------------------------------------------- */

label { font-weight: bold; }

fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

input.text, input.title   { width: 300px; margin:0.5em 0.5em 0.5em 0; }
input.text, input.title   { border:1px solid #bbb; background:#f6f6f6; padding:5px; }
input.text:focus,
input.title:focus         { border:1px solid #999; background:#fff; }
input.title               { font-size:1.5em; }

textarea            { width: 400px; height: 250px; margin:0.5em 0.5em 0.5em 0; }
textarea            { border:1px solid #bbb; background:#eee; padding:5px; }
textarea:focus      { border:1px solid #999; background:#fff; }

select              { border:1px solid #ccc; background:#f6f6f6; width:200px; }
select:focus        { border:1px solid #999; background:#fff; }


/* -----------------------------------------------------------

	Structure
	
----------------------------------------------------------- */

body {
	text-align: center; /*ie hack for centered layout. if not centered, remove this line and the next hack in wrapper*/
	margin: 0;
}

#page {
	width: 903px;
	margin: auto;
	text-align: left; /*for previous ie hack*/
}


/* Header
-------------------------------------------------------------- */



/* Navigation
-------------------------------------------------------------- */

#navigation {
	width: 100%;
	height: 49px;
	background: #000;
}

#navicontainer {
	width: 967px;
	height: 49px;
	margin-left: auto;
	margin-right: auto;
	_margin-left: auto;
}

#navigation_main {
	width: 600px;
	height: 33px;
	color: #fefefe;
	float: left;
	padding-top: 16px;
	padding-left: 50px;
	font: normal 1.05em Times New Roman;
	text-transform: uppercase;
	background: url('../img/nav_logo.jpg') no-repeat top left #000;
	text-align: left;
}

#navigation_languages {
	height: 32px;
	width: 112px;
	font: normal 0.95em Times New Roman;
	text-transform: uppercase;
	float: right;
	padding-top: 17px;
	background: #000;
	color: #5c4d3a;
	padding-right: 40px;
}

#subnavigation {
	width: 873px;
	height: 35px;
	background: transparent;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: -35px;
	_margin-top: -55px;
}

a.sub1 { float: left; text-align: center; width: 89px; height: 25px; background: url('../img/tab_off.jpg') 0 0 no-repeat; text-decoration: none; margin-left: 5px; font: bold 1.1em Arial; color: #4b2907; padding-top: 10px; }
a.sub1:hover { background-position: 35px 0; background: url('../img/tab_off.jpg'); color: #836a51; }

a.sub2 { float: left; text-align: center; width: 139px; height: 25px; background: url('../img/tab_off.jpg') 0 0 no-repeat; text-decoration: none; margin-left: 5px; font: bold 1.1em Arial; color: #4b2907; padding-top: 10px; }
a.sub2:hover { background-position: 35px 0; background: url('../img/tab_off.jpg'); color: #836a51; }



/* Content
-------------------------------------------------------------- */

#container {
	float: left;
	clear: both;
	width: 906px;
	background: url('../img/test/background.jpg') repeat-y 0 0; 
	margin-left: auto; 
	margin-right: auto;
	_margin-top: 0px;
}

#container-index { float: left; clear: both; width: 906px; background: url('../img/test/background.jpg') repeat-y 0 0;  margin-left: auto;  margin-right: auto; margin-top: -18px; _margin-top: -18px; }

#container_bottom {
	width: 923px;
	height: 50px;
	float: left;
	background: url('../img/content_bg.png');
	clear: both;
}

#invisible_container {
	width: 923px;
	height: 400px;
	background: transparent;
	margin-left: auto;
	margin-right: auto;
}

#invisible_container-alasivu {
	width: 788px;
	height: 15px;
	background: transparent;
	margin-left: auto;
	margin-right: auto;
	padding-top: 120px;
	padding-left: -40px;
}

.textable {
	width: 530px;
	background: transparent;
	border-bottom: 1px dotted #302c2c;
	float: left;
	display: inline;
	margin-left: 20px;
	text-align: left;
}

.textable h3 {
	font-size: 1.5em; line-height: 1; margin-bottom: 1em; color: #443119; width: 450px; margin-left: 10px; *margin-top: 20px;
}

.textable-first {
	width: 530px;
	background: transparent;
	border-bottom: 1px dotted #302c2c;
	float: left;
	display: inline;
	margin-left: 20px;
	margin-top: 20px;
	text-align: left;
}

.textable h4 {
	margin-left: 117px;
	margin-top: 0;
	margin-bottom: 5px;
}

.ruokaboksi {
	width: 305px;
/*	height: 240px; */
/*	*height: 235px; */
	background: transparent;
	margin-left: 15px;
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #000;
}

.ruokaboksi2 {
	width: 500px;
	height: 100px;
	background: transparent;
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 40px;
	padding-top: 10px;
}

#champion {
	width: 285px;
	_width: 278px;
	height: 118px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 17px;
	font: bold 1.4em Arial;
	color: #765020;
	background: transparent;
	border: 3px solid #afa18e;
	padding-top: 12px;
	padding-left: 12px;
	text-align: left;
}

#kanta-asiakas {
	width: 285px;
	_width: 278px;
	height: 105px;
	margin-top: 5px;
	margin-bottom: 50px;
	margin-left: 17px;
	font: bold 1.4em Arial;
	color: #765020;
	background: transparent;
	border: 3px solid #afa18e;
	padding-top: 12px;
	padding-left: 12px;
	text-align: left;
}

#container_top {
	width: 923px;
	height: 132px;
	background: url('../img/test/corners.png') no-repeat;
	margin-left: auto;
	margin-right: auto;
	padding-top: 12px;
	padding-left: 11px;
	clear: both;
	_padding-top: 30px;
}

#container_top-alasivu {
	width: 895px;
	height: 92px;
	background: url('../img/container_top2.png') no-repeat;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	padding-left: 30px;
	padding-top: 30px;
}

#mainbar {
	width: 570px;
	_width: 480px;
	float: left;
	display: inline;
	background: transparent;
}

#mainbar h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; color: #443119; margin-left: 20px; margin-top: -15px; }

#mainbar-y { width: 570px; float: left; display: inline; background: transparent; border-right: 1px dotted #000; margin-top: 30px; }
#mainbar-juomat { width: 453px; float: left; display: inline; background: transparent; }
#mainbar-j { margin-top: 30px; width: 570px; float: left; display: inline; background: transparent; }
#mainbar-j2 { margin-top: 30px; width: 570px; float: left; display: inline; background: transparent; border-right: 1px dotted #000; }
#mainbar-j h1 { margin-top: -20px; *margin-top: -20px; _margin-top: -10px; }
#mainbar-j2 h1 { margin-top: -40px; *margin-top: -20px; _margin-top: -10px; }
	
#sidebar {
	width: 298px;
	float: left;
	display: inline; 
	background: transparent;
	margin-top: 30px;
}

#sidebar-bl { width: 328px; _width: 280px; float: left; display: inline; _margin-left: 10px; text-align: center; background: transparent; margin-top: 35px; border-left: 1px dotted #000; }
#sidebar1 { width: 328px; float: left; display: inline;  background: transparent; margin-top: 30px; margin-top: 10px; border-left: 0; }
#sidebar2 { width: 328px; float: left; display: inline;  background: transparent; margin-top: 30px; }
#sidebar3 { width: 328px; float: left; display: inline; background: transparent; margin-top: -30px; *margin-top: -20px; border-left: 0; }
#sidebar4 { width: 328px; float: left; display: inline;  background: transparent; margin-top: 30px; margin-top: 3px; border-left: 1px dotted #000; }

#sidebar-juomat {
	width: 435px;
	float: left;
	display: inline; 
	background: transparent;
	margin-top: 30px;
	border-left: 2px dotted #000;
}

#sideheader {
	width: 307px;
	height: 38px;
	background: url('../img/alasivu-kukka.png') no-repeat;
	padding-top: 29px;
	padding-left: 8px;
	font-size: 1.9em;
	color: #5c4d3c;
}

#sideheader-f { width: 315px; height: 42px; no-repeat; margin-top: -20px; margin-left: 10px; padding-top: 29px; font-size: 2.1em; color: #5c4d3c; background: url('../img/alasivu.png'); }
#sideheader-m { width: 315px; height: 38px; margin-left: -3px; background: url('../img/alasivu-kukka1.png') no-repeat; margin-left: 10px; padding-top: 29px; font-size: 1.7em; color: #5c4d3c; margin-top: -15px; }
#sideheader-nobm { margin-top: 28px; border: 0; 	width: 315px; height: 38px; background: url('../img/alasivu-kukka1.png') no-repeat; margin-left: 10px; padding-top: 29px; font-size: 1.7em; color: #5c4d3c; }
#sideheader-r { width: 315px; height: 38px; margin-left: 20px; background: url('../img/alasivu-kukka1.png') no-repeat; margin-left: 6px; padding-top: 29px; font-size: 1.7em; color: #5c4d3c; margin-top: -20px; border: 0; }

#sideheader2 { width: 281px; height: 47px; background: url('../img/sideheader.png') no-repeat; margin-left: 10px; padding-top: 20px; font-size: 1.7em; color: #5c4d3c; }


/* Footer
-------------------------------------------------------------- */

#footer {
	width: 912px;
	_width: 917px;
	height: 194px;
	background: url('../img/content_bg_footer.png') no-repeat right bottom;
	margin-bottom: 100px;
	*margin-bottom: 100px;
	_margin-bottom: 100px;
	padding-top: 20px;
	clear: both;
	float: left;
	display: inline;
	_margin-left: -10px;
	text-align: left;
}


/* -----------------------------------------------------------

	Clear floats
	
----------------------------------------------------------- */

.wrapper 		{ display: inline; }
.wrapper:after 	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .wrapper { height: 1%; }
.wrapper 		{ display: block; }

/* -----------------------------------------------------------

	Extra stuff
	
----------------------------------------------------------- */

.juomat { width: 104px; height: 23px; }
#pullo { width: 119px; height: 253px; }
.pullo-in { width: 119px; height: 253px; margin-top: -20px; }
.jbox { width: 530px; height: 220px; border-bottom: 1px dotted #000; margin-left: 22px; *margin-bottom: 20px; }
.jbox1 { width: 530px; height: 180px; *height: 200px; border-bottom: 1px dotted #000; margin-left: 22px; *margin-bottom: 20px; }
.jbox2 { width: 530px; height: 180px; *height: 200px; border-bottom: 1px dotted #000; margin-left: 22px; *margin-bottom: 20px; margin-bottom: 15px; }
.vehna { width: 138px; height: 205px; }
#maailmalta { width: 104px; height: 23px; _margin-bottom: 25px; }
#tuoppi { margin-top: -35px; }
#nokiantehdas { float: right; width: 257px; height: 186px; margin: 10px; }
#terveisianokialta { width: 257px; height: 186px; margin: 20px; }
.vj-pic { width: 65px; height: 150px; float: left; margin-left: 22px; margin-right: 22px; }
#aretrunt { display: inline; margin-left: 30px; margin-right: 10px; width: 188px; height: 388px; float: left; display: inline; }
.imgline { width: 510px; height: 1px; *margin-top: 30px; *margin-bottom: 30px; }
p.imgline { margin-left: 15px; margin-top: -60px; }
#keisaritolkit { margin-left: 30px; margin-right: 5px; width: 204px; height: 159px; _margin-left: -7px; _margin-right: 50px;  }
#juomat1 { float: right; margin-right: 40px; margin-left: 20px; }
.kaikki { width: 85px; height: 199px; }
.png_bg { width: 85px; height: 199px; margin-left: -10px; }
.resepti_img { margin-left: 20px; }
.resepti_img2 { margin-left: 20px; float: left; display: inline; margin-right: 20px; margin-top: -5px; }

.infobox {
	width: 288px;
	height: 23px;
	background: #FFF;
	border-bottom: 1px solid #c3baa5;
	font: normal 1.0em Arial;
	color: #5c4d3a;
	margin-left: 15px;
	padding-left: 7px;
	padding-top: 8px;
}

.infobox2 {
	width: 278px;
	height: 23px;
	background: transparent;
	font: normal 1.0em Arial;
	color: #5c4d3a;
	margin-left: 15px;
	padding-left: 7px;
	padding-top: 8px;
}

.product-box {
	width: 135px;
	height: 144px;
	background: transparent;
	float: left;
	margin-left: 30px;
}

/* -----------------------------------------------------------

	YouTube
	
----------------------------------------------------------- */

.youtube-video {
	width: 130px;
	height: 74px;
	background: transparent;
	margin-left: 30px;
}

.youtube-text {
	width: 259px;
	height: 74px;
	margin-left: 165px;
	margin-top: -74px;
	background: transparent;
	font: normal 0.95em Arial;
}

.youtube-info {
	width: 107px;
	height: 74px;
	margin-left: 449px;
	margin-top: -74px;
	background: transparent;
	font: normal 0.95em Arial;
}

/* -----------------------------------------------------------

	Juomat.html
	
----------------------------------------------------------- */

.juomat-box {
	width: 414px;
	/*height: 203px;*/
	background: transparent;
	border-bottom: 1px dotted #000;
	margin-left: 18px;
}

.juomat-box_p {
	/*width: 374px;
	height: 200px;*/
	background: transparent;
	margin-left: 15px;
		padding: 20px 0 20px 20px;
		margin-right: 10px;
	padding-top: 45px;
		overflow: hidden;

}
.juomat-box_p h5 	{ float: right; width: 300px; margin-top: 0; margin-bottom: 0; margin-left: 0 !important; }
.juomat-box_p p 	{ margin-left: 0; margin-right: 0; float: right; width: 280px; padding-right: 20px; }
.juomat-box_p img 	{ float: left; }

/*.juomat-box_p h5 { font-size: 1.6em; margin-bottom: 0.75em; color: #5c4d3a; margin-left: 40px !important; margin-right: 40px; display: block !important; width: 60%; }*/

/* -----------------------------------------------------------

	Stars
	
----------------------------------------------------------- */

.stars {
	width: 87px;
	height: 17px;
	background: transparent;
	border: 2px solid #714c24;
	text-align: center;
}

a.stars_on { float: left; text-align: center; width: 15px; height: 17px; background: url('../img/stars_on.png') 0 0 no-repeat; text-decoration: none; margin-left: 2px; }
a.stars_off { float: left; text-align: center; width: 15px; height: 17px; background: url('../img/stars_off.png') 0 0 no-repeat; text-decoration: none; margin-left: 2px; }

.clear { width: 100%; overflow: hidden; }


/* UUTTA RESEPTISIVUA */
.ainekset, .juomaksi {
	float: left; display: inline;
}
.ainekset { padding-top: 9px; }
.juomaksi {
	margin-left: 20px;
	width: 265px;
}
.juomaksi img {
	margin-top: -15px;
	margin-left: 15px;
}
.korkea {
	min-height: 900px;
	_height: 900px;
}
.ruokaboksi_wide {
	background: transparent;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 10px;
	padding-top: 10px;
	border-bottom: 1px dotted #000;
}
.hr {
	clear: both;
	height: 20px;
	border-bottom: 1px dotted #000;
	margin: 0 20px;
}

/*
	Ajankohtaista-/pakinablogikuvat
*/
.ajankohtaista_ingressikuva {
	float: right;
	display: inline;
	margin-right: 10px;
}

.ajankohtaista_leipiskuva {
	float: left;
	display: inline;
	margin-left: 10px;
}