/* Tämä on tyylitiedosto design boulevard sivuille, tässä tiedostossa määritellään sivun ulkoasu ja elementtien sijoituspaikat */

body {
font-family : helvetica,arial;
background-color: #cccccc;
height: 100%;
text-align: center;
margin: 0;
}

/* body määritteessa asetetaan sivun perusominaisuudet, kuten taustaväri ja fontti */

.hiddenPic {display:none;}

/* määrittelee esiladattavan kuvan näkymättömäksi */

.thumb { 
width: 58px;
height: 58px;
}

#preloadimgs {
width: 0;
height: 0;
background-image: url('buttons/design-boulevard2.jpg');
background-image: url('buttons/tuotteet2.jpg');
background-image: url('buttons/uutiset2.jpg');
background-image: url('buttons/yhteystiedot2.jpg');
}

/* preloadimgs esilataa "hiiripäällä" -kuvat, kun se kutsutaan eri html tiedostoista */

#preloadimgs2 {
width: 0;
height: 0;
background-image: url('buttons/elektroniikka2.jpg');
background-image: url('buttons/huonekalut2.jpg');
background-image: url('buttons/keittioon2.jpg');
background-image: url('buttons/kellot2.jpg');
background-image: url('buttons/seinalle2.jpg');
background-image: url('buttons/tekstiilit2.jpg');
background-image: url('buttons/valaisimet2.jpg');
background-image: url('buttons/valikoidut2.jpg');
background-image: url('buttons/muut_btn_2.jpg');

}

/* sama kuin edellä, mutta lataa eri kuvat joita ei tarvita joka sivulla */

#wrapper {
position: relative;
width: 1000px;
height: 100%;
margin: 0 auto;
text-align: left;
}

/* wrapper ympäröi kaikkia sivun elementtejä, se määrittelee sisällön maximi leveyden ja keskittää sen selaimilla joilla on isompi resoluutio */

#top {
background-image: url('images/ylaslicet_01.jpg');
background-repeat: no-repeat;
width: 1000px;
height: 581px;
}

/* joka sivun yläosan taustakuva ja mitat */

#top_left {
position: absolute;
top: 230px;
left: 0px;
width: 65px;
height: 320px;
background-image: url('images/top_left.jpg');
}

/* määrittää jokaiselle sivulle yläosaan design boulevard kuvan sijainnin */

#top_center {
position: absolute;
top: 230px;
left: 65px;
width: 867px;
height: 320px;
background-image: url('images/flashtausta.jpg');
}

#top_center img {
border: 0;
}

/* määrittää jokaiselle sivulle yläosaan flash -kehyskuvan sijainnin */

#flash {
position: relative;
top: 0px;
left: 0px;
}

#top_right {
position: absolute;
top: 230px;
right: 0px;
width: 69px;
height: 320px;
background-image: url('images/top_right.jpg');
}

/* määrittää jokaiselle sivulle yläosan oikean reunan mitat ja taustan */

#ala_spacer {
position: absolute;
top: 550px;
left: 00px;
width: 1000px;
height: 31px;
background-image: url('images/ala_spacer.jpg');
}

/* määrittää jokaiselle sivulle yläosan tilanpitäjä laatikon */

#top_navi ul {
list-style-type: none;
position: absolute;
top: 180px;
left: 0px;
width: 1000px;
height: 33px;
margin: 0px;
padding: 0px;
}

/* määrittää jokaiselle sivulle yläosan navigoinnin sijainnin ja mitat */

#top_navi li {
display: inline;
margin-right: -6px;
}

/* määrittää yläosan navigoinnin tyyliä */

#top_navi img {
border: 0;
}

/* määrittää yläosan navigoinnin tyyliä */

#yla_spacer {
position: absolute;
top: 212px;
left: 0px;
width: 1000px;
height: 18px;
background-image: url('images/yla_spacer_1.jpg');
}

/* määrittää yläosan "pisterivin" */



/* määrittää sivun "osoiterivin" kohdan, mitat ja taustan */

#top_location ul {
list-style-type: none;
margin-left: 25px;
margin-top: 6px;
}

/* määrittää yläosan "osoiterivin" tyyliä */

/* määrittää yläosan "osoiterivin" tyyliä */

#content {
position: relative;
width: 1000px;
min-height: 400px;
margin: 0 auto;
text-align: left;
}

/* määrittää sivun sisältöosan sijainnin, mitat ja taustan */

#cont_otsikko {
position: absolute;
top: 0px;
left: 0px;
width: 1000px;
height: 89px;
background-image: url('images/tuotteet_otsikko.jpg');
}

#cont_otsikko img {
border: 0;
}


#cont_left {
position: absolute;
top: 89px;
left: 65px;
width: 233px;
height: 100%;
}

/* määrittää sivujen sisältöosan vasemman laidan */


#cont_blog {
position: absolute;
top: 0px;
left: 65px;
width: 233px;
height: 100%;
}

#cont_blog img {
border: 0;
}

/* määrittää sivujen sisältöosan vasemman laidan */


#cont_left ul {
list-style-type: none;
position: absolute;
top: 3px;
left: 0;
margin: 0;
padding: 0;
}

/* määrittää sivujen sisältöosan vasemman laidan menu tyyliä */

#cont_left li {
margin-bottom: -3px;
}

/* määrittää sivujen sisältöosan vasemman laidan menu tyyliä */

#cont_left img {
border: 0;
}

/* määrittää sivujen sisältöosan vasemman laidan menu tyyliä */

#cont_center {
position: absolute;
top: 89px;
left: 298px;
width: 702px;
height: 400px;
min-height: 400px;
height: auto;
}

/* määrittää sivujen keskiosan sijainnin ja määritteet */

#cont_centerblog {
position: absolute;
top: 0px;
left: 298px;
width: 702px;
height: 400px;
min-height: 400px;
height: auto;
}

/* määrittää sivujen keskiosan sijainnin ja määritteet */

.photo {
padding-left: 25px;
padding-bottom: 20px;
}

/* määrittää sivujen sisältöosan kuvien näkymättömät rajaukset */


#cont_center H1 {
font-size: 13px;
color: #8d8e90;
margin-top: 25px;
margin-left: 65px;
margin-right: 40px;
}

/* määrittää sivujen sisältöosan H1 otsikkotyylin ja sijainnin */

#cont_center H2 {
font-size: 14px;
color: #81d4e5;
margin-top: 25px;
margin-left: 65px;
margin-right: 40px;
}

/* määrittää sivujen sisältöosan H2 otsikkotyylin ja sijainnin */

#cont_center P {
font-size: 13px;
color: #8d8e90;
margin-left: 65px;
margin-right: 40px;
}


/* määrittää sivujen sisältöosan P -tagien sisällä olevan tekstityylin */


#cont_center P2 {
font-size: 13px;
color: #8d8e90;
margin-left: 0px;
margin-right: 40px;
}


/* OMA: määrittää sivujen sisältöosan P -tagien sisällä olevan tekstityylin */

#gallery {
position: absolute;
top: 10px;
right: 0px;
left: 14px;
width: 702px;
}

/* määrittää tuoteluettelosivujen kuvaosuuden määritteet */

#gallery IMG {
position: relative;
margin: 0px 2px 4px 2px;
right: 0px;
border: 0px;
}

/* määrittää tuoteluettelosivujen kuvien sijainnit */


#blog {
position: absolute;
top: 35px;
left: 39px;
right: 0px;
width: 595px;
}



/* OMA määrittää tuoteluettelosivujen kuvaosuuden määritteet */

#blog IMG {
position: relative;
margin: 0px 0px 0px 0px;
right: 0px;
border: 0px;
}

#blog H1.otsikko {
font-size: 38px;
font-weight:bold;
color: #333333;
margin-bottom:3px;
margin-top: 0;
margin-left: 0px;
margin-right: 0px;
}

#blog H1.paiva {
font-size: 12px;
color: #58b2cc;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

#blog P {
font-size: 13px;
font-weight:normal;
line-height:130%;
color: #333333;
margin-top: 0px;
margin-left: 0px;
}

#blog H1.viite {
font-size: 10px;
font-weight:normal;
text-align:right;
color: #58b2cc;
margin-right: 0px;
margin-top: 0px;
margin-left: 0px;
}

#blog H1.uutiset{
font-size: 23px;
font-weight:bold;
color: #333333;
margin-bottom:3px;
margin-left: 0px;
margin-right: 0px;
}






/* OMA määrittää tuoteluettelosivujen kuvien sijainnit */

#prod_img {
position: absolute;
left: 0px;
top: 10px;
width: 275px;
height: auto;
min-height: 300px;
margin-left: 18px;
}

/* määrittää tuotesivujen kuvapuoliskon määritteet */

#prod_img IMG {
padding-bottom: 5px;
padding-right: 5px;
}

/* määrittää tuotesivujen kuvien näkymättömät rajat */

#prod_info {
position: absolute;
left: 300px;
top: 0px;
width: 337px;
height: auto;
min-height: 300px;
}

#prod_info img {
border: 0;
}

/* määrittää tuotesivujen tekstipuoliskon määritteet */

#prod_info H1 {
font-size: 16px;
font-weight:bold;
line-height:90%;
color: #58b2cc;
margin-left: 0px;
margin-right: 15px;
}

#prod_info H {
font-size: 12px;
color: #333333;
margin-left: 0px;
margin-right: 15px;
}

/* määrittää tuotesivujen tekstityylin ja sijainnin */

#copyright {
position: absolute;
bottom: 2px;
font-size: 10px;
color: #8d8e90;
vertical-align: bottom;
}

/* määrittää copyright tekstin ulkoasun ja sijainnin */

#cont_right {
position: absolute;
top: 0px;
right: 0px;
width: 271px;
height: 100%;
background-image: url('images/sisaslicet_02.jpg');
background-repeat: no-repeat;
}

/* määrittää sivujen oikean laidan määritteet, sijainnin ja taustakuvan */

#artlink {
position: absolute;
top: 16px;
right: 61px;
width: 173px;
height: 126px;
}

/* määrittelee kuukauden taideteos kehyksen sijainnin */

#artlink img {
border: 0;
}

/* määrittelee kuukauden taideteos linkin tyylin */

#bloglink {
position: absolute;
top: 200px;
right: 61px;
width: 173px;
height: 126px;
}

/* määrittelee blogi kehyksen sijainnin */


#bloglink img {
border: 0;
}

/* määrittelee blogi linkin tyylin */

#cont_center img {
border:0px;
}


#cont_center map {
border:0px;
}