* { margin: 0; }
html, body { padding: 0; width: 100%; height: 100%; min-height: 100%; font-family: arial, helvetica, verdana; background: url(../images/bg_main.jpg) no-repeat;  background-color: rgb(235,230,225);  }
a:focus { outline: none; }

/*
BANNERS
-------------------------------------------------- */
.banner { display: block; width: 220px; height: 150px; }
.logobanner { display: block; width: 220px; border-top: 1px dashed rgb(220,220,220); border-bottom: 1px dashed rgb(220,220,220); margin-bottom: 10px; }

/*
COLUMNS
-------------------------------------------------- */

.column_01, .column_02, .column_03, .column_04 { display: none; width: 221px; height: 100%; float: left; }
.column_01 { width: 220px; padding-right: 9px; }
.column_04 { padding-left: 9px; }
.column_01, .column_02, .column_03 { border-right: 1px solid rgb(220,220,220); }
.column_02, .column_03 { padding: 0px 9px; }
.column_2x { float: left; width: 461px; padding-left: 9px; }
#text-container { display: block; width: 220px; float: left;  margin-bottom: 10px; }
#text-container.maalampo { height: 500px; }
#text-container.ilmalampo { height: 400px; }
#text-container.lattialammitys { height: 400px; }

/*
COPYRIGHT
-------------------------------------------------- */
#copyright { width: 980px; height: 80px; float: left; text-align: right; line-height: 1.4em; font-size: 9px; color: rgb(140,140,140); }
#copyright a, #copyright a:visited { color: rgb(140,140,140); text-decoration: none; }
#copyright a:hover { color: rgb(140,140,140); text-decoration: underline; }

/*
FONTS
-------------------------------------------------- */

h2, h3, h5, p { text-align: left; }
h1 { padding: 60px 0px 10px 0px; font-size: 150%; color: rgb(140,40,30); font-weight: normal; }
h2 { font-size: 120%; color: rgb(140,40,30); font-weight: normal; line-height: 1.1em; padding: 10px 0px 5px 0px; }
h2 a, h2 a:visited { color: rgb(140,40,30); text-decoration: none; }
h2 a:hover { text-decoration: underline; }
h3 { display: block; height: 31px;  padding-top: 10px; text-align: center; font-size: 80%; color: rgb(50,50,50); font-weight: normal; text-transform: uppercase; filter: alpha(opacity=65); opacity:0.65; background: url(../images/bg_title.gif) repeat-x; }
h4 { display: block; font-size: 90%; font-weight: bold; text-transform: uppercase; color: rgb(80,80,80); filter: alpha(opacity=90); opacity:0.9; margin: 0; padding: 0; }

p { font-size: 80%; line-height: 1.4em; color: rgb(80,80,80); margin-bottom: 1.4em; }
p.slider { font-size: 80%; line-height: 1.4em; color: rgb(80,80,80); margin:0; padding: 0; }
p a, p a:visited, h4 a, h4 a:visited { color: rgb(140,40,30); text-decoration: none; }
p a:hover, h4 a:hover { color: rgb(140,40,30); text-decoration: underline; }
p.ingressi { font-family: georgia, times; font-size: 100%; line-height: 1.3em; font-style: italic; color: rgb(140,40,30); }

.red { color: rgb(140,40,30); }
.gray { color: rgb(225,220,215); }
.bold { font-weight: bold; }
.superscript { display:inline-block; font-size: 8px; margin-top: -4px; vertical-align: top; } 
.subscript { font-size: xx-small; vertical-align: bottom; } 
.caps { font-size: 70%; text-transform: uppercase; }

/*
FOOTER
-------------------------------------------------- */

#footer { width: 980px; height: 40px; float: left; text-align: center; padding-top: 14px; background: url(../images/bg_footer.gif) repeat-x; }
.footertext { font-size: 80%; color: rgb(50,50,50); line-height: 1em; filter: alpha(opacity=80); opacity:0.80; }
.footertext a, footertext a:visited { color: rgb(50,50,50); text-decoration: none; }
.footertext a:hover { text-decoration: underline; }

/*
FORM
-------------------------------------------------- */
input { margin: 4px; padding: 4px; font-family: georgia, times; font-style: italic; border: 1px solid rgb(140,40,30); }
.button { border: 0px; margin: 0px 0px 15px -4px; }
.button:hover {  filter: alpha(opacity=75); opacity:0.75; }
textarea { margin: 4px; padding: 4px; border: 1px solid rgb(140,40,30); }
select { color: rgb(80,80,80); margin: 4px; }

.sliderlink_01, .sliderlink_02, .sliderlink_03 { display: block; width: 100%; margin: 0; padding: 0; background: transparent; }
#form_01, #form_02, #form_03 { display: none; width: 220px; height: 500px; margin: 0; padding: 0; }

/*
IMAGES
-------------------------------------------------- */
.colorbox { display: block; float: left; margin-top: 14px; }
a img { border: 0px; }

/*
LINKS
-------------------------------------------------- */
a:focus, input:focus { outline: none; }
a:link, a:visited { text-decoration: none; }
a.lisatiedot, a.lisatiedot:visited { display: block; width: 204px; background: rgb(205,200,195); margin: 1em 0em; padding: 8px; color: rgb(255,255,255); text-decoration: none;  }
a.lisatiedot:hover { background: rgb(190,185,180); text-decoration: none; }

.popup a, popup a:visited { position: relative; }
.popup a:hover {  }
.popup em { position: absolute; left: 100px; top: 150px; width: 600px; height: auto; padding: 1em; z-index: 9999; color: rgb(140,40,30);  border: 8px solid rgb(60,60,60); ; background: rgb(255,255,255); -moz-border-radius: 20px; -webkit-border-radius: 20px; font-family: arial, helvetica; font-size: 100%; line-height: 1.5em; text-align: left; color: rgb(130,140,150); display: none; 
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}



/*
LIST
-------------------------------------------------- */
.data ul { list-style-type: none; margin: 0; padding: 0; }
.data ul li { font-size: 80%; line-height: 1.8em; border-bottom: 1px solid rgb(230,230,230); color: rgb(140,140,140); background-image: url(../images/list.gif); background-repeat: no-repeat; background-position: 0px 7px; padding-left: 14px;  }

/*
NAVIGATION
-------------------------------------------------- */
#navigation.container { float: right; width: auto; height: 60px; }
#navigation.data {}

/*
STRUCTURE
-------------------------------------------------- */
#main_container { position: relative; width: 980px; height: auto; margin: 0 auto; }
#logo { position: absolute; top: 44px; left: -25px; z-index: 2000; }
#slogan { width: 488px; height: 40px; margin: 60px 0px 0px 460px; float: right; background: url(../images/pohjolan_ekolampo_slogan.png) no-repeat; }
#headline { width: 940px; height: 42px; text-align: center; margin-top: 10px; padding-top: 12px; background: url(../images/bg_footer.gif) repeat-x; }
.product_offer { display: block; width: 200px; padding: 10px; border: 1px solid rgb(140,40,30);}

#data_container { width: 940px; float: left; margin-top: 20px; padding: 20px; background-color: rgb(255,255,255); }
#data_container.maalampo { background: url(../images/bg_maalampo.jpg) no-repeat; background-position: bottom left; background-color: rgb(255,255,255); }
#data_container.ilmalampo { background: url(../images/bg_ilmalampo.jpg) no-repeat; background-position: bottom left; background-color: rgb(255,255,255); }
#data_container.lattialammitys { background: url(../images/bg_lattialammitys.jpg) no-repeat; background-position: bottom left; background-color: rgb(255,255,255); }
#data_container.lampokaivot { background: url(../images/bg_lampokaivot.jpg) no-repeat; background-position: bottom left; background-color: rgb(255,255,255); }
#data_container.yhteystiedot { background: url(../images/bg_yhteystiedot.jpg) no-repeat; background-position: bottom left; background-color: rgb(255,255,255); }
#data_container.tarjouspyynto { background: url(../images/bg_tarjouspyynto.jpg) no-repeat; background-position: bottom right; background-color: rgb(255,255,255); }

#page { width: 710px; height: 350px; float: left; margin-bottom: 0px; }
#page.maalampo { background: url(../images/page_maalampo.jpg) no-repeat; }
#page.lampoassa { background: url(../images/page_lampoassa.jpg) no-repeat; }
#page.gebwell { background: url(../images/page_gebwell.jpg) no-repeat; }
#page.nibe { background: url(../images/page_nibe.jpg) no-repeat; }
#page.viessmann { background: url(../images/page_viessmann.jpg) no-repeat; }
#page.ilmalampo { background: url(../images/page_ilmalampo.jpg) no-repeat; }
#page.lampokaivot { background: url(../images/page_lampokaivot.jpg) no-repeat; }
#page.lattialammitys { background: url(../images/page_lattialammitys.jpg) no-repeat; }

.bold_line { display: block; float: left; width: 100%; height: 8px; background: url(../images/bg_bold_line.jpg); margin-bottom: 6px;  }

/*
TABLE
-------------------------------------------------- */
table.basic { margin-top: 15px; background: rgb(200,200,200); border: 0px solid transparent; font-family: arial, helvetica; font-size: 80%; line-height: 1.6em; color: rgb(80,80,80); }

table.basic a, table.basic a:visited { color: rgb(100,160,220); text-decoration: none; }
table.basic a:hover { color: rgb(100,160,220); text-decoration: underline; }

tr.a, td.a { background: rgb(255,255,255); text-align: center; }
tr.b, td.b { background: rgb(240,235,230); text-align: center; }