@charset "iso-8859-1";
/* CSS Document */

<!--
body {
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   color:#000000; /* musta  */
   background-color:#FFFFFF; /* valkoinen */
}

#kokosivu { /* koko sivun sisällön ympäröivä div-elementti, joka kattaa kaiken body-elementin sisällön. */
	width:945px; /* mahtuu leveydeltään 1024px resoluutioiseen näyttöön */
    background:#3D2F2C; /* tummanruskea */
	margin:auto; /* sisällön keskittäminen näytölle */
    padding-bottom:0px; /* punainen vaakapalkki alhaalla jos arvona 25px, jos arvona 0 niin palkki häviää */
    overflow:auto;
}

/***************************************************************************************
 * Ylämenun asetukset 
 ***************************************************************************************/ 

#ymenu {
	width:940px; /* kokosivu - ymenu:n paddingit, mahtuu leveydeltään 1024px resoluutioiseen näyttöön */
    background-color:#3D2F2C; /* tummanruskea */
    margin: 20px auto 5px ; /* 20px = menun ylös jää vähän tyhjää tilaa, auto = center, 2px = menun alas pari pixeliä tyhjää */
	border:none;
    padding-left:5px;
    padding-right:5px;
}

#ymenu ul {
   text-align: center;
   margin:0;
   margin-left:-40px;
   #margin:0;
   padding-bottom:8px;
   padding-top:8px;
}

#ymenu ul li {
   font-weight:bold;
   display: inline; /* Tämä määrittää, että lista on vaakatasossa */
   color:#FFFFFF; /* valkoinen */
   text-decoration: none;  
   #padding-left:3px; /* tämä toimii vain IE:ssä eli solujen väliin tulee 3 pikseliä tilaa, jotta ylä- ja alaviivat eivät mene kiinni aktiiviseen valkoiseen taustaan */
   #padding-right:3px; /* tämä toimii vain IE:ssä eli solujen väliin tulee 3 pikseliä tilaa, jotta ylä- ja alaviivat eivät mene kiinni aktiiviseen valkoiseen taustaan */
}

#ymenu ul li a {
   padding-left:15px;
   padding-right:15px;
   #padding-left:12px; /* tämä toimii vain IE:ssä, jotta ylä- ja alaviivat eivät mene kiinni aktiiviseen valkoiseen taustaan */
   #padding-right:12px; /* tämä toimii vain IE:ssä, jotta ylä- ja alaviivat eivät mene kiinni aktiiviseen valkoiseen taustaan */
   color:#FFFFFF; /* valkoinen */
   text-decoration: none;
}

#ymenu ul li a:hover {
   text-decoration: none;
   border-top:2px solid #FFFFFF; /* valkoinen */
   border-bottom:2px solid #FFFFFF; /* valkoinen */
}

#ymenu #active {
   padding-left:15px;
   padding-right:15px;
   font-weight:bold;
   color:#3D2F2C; /* tummanruskea */
   background:#FFFFFF; /* valkoinen */
   border-top:2px solid #FFFFFF; /* valkoinen */
   border-bottom:2px solid #FFFFFF; /* valkoinen */
}

/***************************************************************************************
 * Vasemman menun asetukset 
 ***************************************************************************************/ 

#vmenu {
    width:200px;
    background:#3D2F2C; /* tummanruskea */
    float:left;
    padding-bottom:20px;
}

#vmenu p {
    color:#FFFFFF; /* valkoinen */
}

#vmenu ul {
   text-align: left;
   margin-left:-40px;
   #margin-left:0;
   padding-bottom:8px;
   padding-top:8px;
}

#vmenu ul li {
   list-style:none;
   color:#FFFFFF; /* valkoinen */
   text-decoration: none;
   padding-bottom:15px;
   margin-left:5px;
}

#vmenu ul li a {
   display: block; /* Tekstin pohja tasamittainen, jolloin tekstin rivitys ei sotke reunaviivojen piirtoa */
   color:#FFFFFF; /* valkoinen */
   text-decoration: none;
   border-left:4px solid #3D2F2C; /* tummanruskea */
   border-right:4px solid #3D2F2C; /* tummanruskea */
   padding-left:5px;
   margin-right:5px;
}

#vmenu ul li a:hover {
   text-decoration: none;
   border-left:4px solid #FFFFFF; /* valkoinen */
   border-right:4px solid #FFFFFF; /* valkoinen */
}

#vmenu #active {
   color:#3D2F2C; /* tummanruskea */
   font-weight:bold;
   border-left:4px solid #FFFFFF; /* valkoinen */
   padding-left:5px;
   margin-right:5px;
   padding-bottom:0px;
   margin-bottom:15px;
   background-color:#FFFFFF; /* valkoinen */
}

/***************************************************************************************
 * Ilmoitustaulun asetukset
 ***************************************************************************************/ 

#ilmoitustaulu {
   background-color:#EEEEEE;
   margin-top:6px;
   margin-left:8px;
   margin-right:8px;
   border-top:4px solid #2B201E;
   border-right:4px solid #523F3A;
   border-bottom:4px solid #523F3A;
   border-left:4px solid #2B201E;
}

/* Ilmoitustaulu silloin, kun sivustolla käytetty väri oli punainen eli #CC0000
#ilmoitustaulu {
   background-color:#EEEEEE;
   margin-top:6px;
   margin-left:8px;
   margin-right:8px;
   border-top:4px solid #990000;
   border-right:4px solid #FF0000;
   border-bottom:4px solid #FF0000;
   border-left:4px solid #990000;
}
*/

#ilmoitustaulu p {
    color:#000000; /* musta */
}

/***************************************************************************************
 * Leipätekstin asetukset
 ***************************************************************************************/ 

#leipateksti {
	width:745px; /* tämä + vmenu mahtuvat leveydeltään 1024px resoluutioiseen näyttöön */
	background:#FFFFFF; /* valkoinen */
    min-height: 500px; /* määrittää sivun vähimmäiskorkeuden, jotta oikean alanurkan tassukuva ei jää sisällön alle */
	text-align:left;
    padding-bottom:20px;
    padding-top: 1px;
    background-image: url(tassu.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    float:right;
}

/***************************************************************************************
 * p = Leipätekstin kappaleet
 ***************************************************************************************/ 

p { 
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   color:#000000; /* musta  */
   text-align:left;
   margin-left:10pt;
   margin-right:10pt;
}

/***************************************************************************************
 * h1 = Etusivun "Bernhardinkoirayhdistys ry" -otsikko
 ***************************************************************************************/ 

h1 { 
   font-family:"Palatino Linotype", "Times New Roman", Palatino, serif;
   font-size:3em;
   font-weight:bold;
   letter-spacing:1px;
   color:#B70000; /* tummanpunainen */
   margin-top:8pt;
   margin-left:5pt;
}

/***************************************************************************************
 * h2 = Alasivujen pääotsikko esim. "Tarvikemyynti" tai "Julkaisut ja lehdet".
 *    Muuten sama kuin h1, mutta tekstikoko pienempi
 ***************************************************************************************/ 


h2 { 
   font-family:"Palatino Linotype", "Times New Roman", Palatino, serif;
   font-size:2em;
   font-weight:bold;
   letter-spacing:1px;
   color:#B70000; /* tummanpunainen */
   margin-top:20pt;
   margin-left:5pt;
}


/***************************************************************************************
 * h3 = Leipätekstin sisäinen väliotsikko, esim. Index-sivulla: "Uusimpia päivityksiä"
 ***************************************************************************************/ 

h3 {
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:1.1em;
   font-weight:bold;
   letter-spacing:1px;
   color:#B70000; /* tummanpunainen */
   margin-top:10pt;
   margin-left:10pt;
}

/***************************************************************************************
 * h4 = Leipätekstin sisällä oleva väliotsikko, esim. Erikoisnäyttelytuloksissa
 ***************************************************************************************/ 

h4 {
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   font-weight:bold;
   text-transform:uppercase; /* Kaikki kirjaimet tikkukirjaimia */
   letter-spacing:1px;
   color:#B70000; /* tummanpunainen */
   margin-top:10pt;
   margin-left:10pt;
}

/***************************************************************************************
 * KAPITAALITEKSTI,
 * esim. Tarvikemyynnin sivuilla oleva UUTUUS-teksti tai TARJOUS-teksti
 * tai Pentuvälitys-sivulla ilmoitusten otsikot
 ***************************************************************************************/ 

#uutuus {
   color:#CC0000; /* punainen */
   font-weight:bold;
   text-transform:uppercase; /* Kaikki kirjaimet tikkukirjaimia */
}

/***************************************************************************************
 * Väliviiva
 ***************************************************************************************/ 

hr { 
    border: 0;
    width: 100%;
    color: #3D2F2C; /* tummanruskea */ /* Väri IE:n käyttöön */
    background-color: #3D2F2C; /* tummanruskea */ /* Väri Firefoxin käyttöön */
    height: 3px;
    margin-top: -6px; /* Tämä nostaa viivaa hieman ylemmäs */
}

/***************************************************************************************
 * 
 *   Linkkien määritykset
 *
 ***************************************************************************************/

/* Linkkinä toimivan kuvan ympärillä ei ole kehyksiä */
a img {
   border:none;
}

/***************************************************************************************
 * Leipätekstin linkkien väri musta
 ***************************************************************************************/    
a:link {
   color:#000000; /* musta  */
   text-decoration:underline;
}

a:visited {
   color:#000000; /* musta  */
   text-decoration:underline;
}

a:hover {
   color:#000000; /* musta  */
   text-decoration:underline;
}

a:active {
   color:#000000; /* musta  */
   text-decoration:underline;
}  

/***************************************************************************************
 * 
 *   Luetteloiden määritykset
 *
 ***************************************************************************************/

/***************************************************************************************
 * Luettelo
 ***************************************************************************************/
 
ul {
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   color:#000000; /* musta  */
   list-style-type:square; /* Luettelomerkkinä musta neliö */
   list-style-position:outside;
}

/***************************************************************************************
 * Numeroitu luettelo 
 ***************************************************************************************/
 
ol {
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   color:#000000; /* musta  */
   list-style-type:decimal;
   list-style-position:outside;
}

/***************************************************************************************
 * Sivukarttaluettelo
 ***************************************************************************************/ 

#sivukartta {
   padding-bottom:20px;
   list-style-type:none; /* Ei luettelomerkkiä */
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   text-align:left;
   margin-left:0px;
   #margin-left:10px;
}

#sivukartta ul {
   font-size:100%;
   margin-left:-20px; /* Sisennettyjen listojen sisennyksen pituus */
   #margin-left:20px; /* Vastaava kuin yllä, mutta tämä on IE:lle */
}

#sivukartta ul li {
   list-style:none;
   color:#000000; /* musta  */
   text-decoration: none;
}

#sivukartta ul li a {
   color:#000000; /* musta  */
   list-style:none;
}

/***************************************************************************************
 * 
 *   Taulukoiden määritykset
 *
 ***************************************************************************************/
 
/* Taulukko, jonka kokonaisleveys on 710px, 
käytetty esim. Valiokoiria-sivuilla, Näyttelyt 2008 -sivulla ja Vuoden Bernhardinkoira -sivulla */ 
table.taulukko1 {
   width: 710px;
   border: none; /* Ei reunuksia */
   border-collapse: collapse;
   border-spacing: 0px;
   margin-left: 20px;
}

/* Taulukko, jonka kokonaisleveys on 550px */ 
table.taulukko2 {
   width: 550px;
   border: none; /* Ei reunuksia */
   border-collapse: collapse;
   border-spacing: 0px;
   margin-left: 20px;
}

/* Taulukko, jonka kokonaisleveys on 680px ja jonka ylä- ja alareunassa on punaiset viivat,
käytetty Pentuvälitys-sivulla */ 
table.taulukko3 {
   width: 680px;
   /* border:none; */
   border-collapse: collapse;
   border-spacing: 0px;
   margin-left: 20px;
   border-bottom-color: #3D2F2C; /* tummanruskea */
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-top-color: #3D2F2C; /* tummanruskea */
   border-top-width: 1px;
   border-top-style: solid;
}

/* Taulukon otsikkorivi */ 
td.otsake {
   text-align: left;
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-weight: bold;
   font-size:0.9em;
   color:#000000; /* musta  */
   padding-left: 5px;
   padding-right: 0px;
}

/* Taulukon "normaalirivi" */ 
td.rivi {
   text-align: left;
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   color:#000000; /* musta  */
   padding-left: 5px;
   padding-right: 0px;
}

/* Taulukon "normaalirivi", joka tasattu ylös */ 
td.rivi_top {
   text-align: left;
   vertical-align:top;
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   color:#000000; /* musta  */
   padding-left: 5px;
   padding-right: 0px;
}


/* Taulukon "normaalirivi", jonka tekstissä linkki (ks. Vuoden Bernhardinkoira -sivu) */ 
td.rivi_linkki {
   text-align: left;
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   text-decoration:underline;
   color:#000000; /* musta  */
   padding-left: 5px;
   padding-right: 0px;
}

/* Taulukon "normaalirivi", jonka ala- ja yläpuolella ohut punainen viiva */ 
td.rivi_viiva {
   text-align: left;
   font-family:Verdana, Arial, Geneva, sans-serif;
   font-size:0.9em;
   color:#000000; /* musta  */
   padding-left: 5px;
   padding-right: 0px;
   border-bottom-color:#3D2F2C; /* tummanruskea */
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-top-color:#3D2F2C; /* tummanruskea */
   border-top-width: 1px;
   border-top-style: solid;
}


/***************************************************************************************
 * 
 *   Kuvien asetukset
 *
 ***************************************************************************************/

/***************************************************************************************
 * Index-sivun kuva
 ***************************************************************************************/ 

.imgIndex { 
margin: 0px 0px 10px 15px; /* ylä, oikea, ala, vasen */
float:right;
} 

/***************************************************************************************
 * Vierekkäin olevat kuvat
 ***************************************************************************************/ 

.imgVierekkain { 
margin: 2px 0px 2px 15px; /* ylä, oikea, ala, vasen */ 
} 

/***************************************************************************************
 * Oikealle tasatut kuvat
 ***************************************************************************************/ 

.imgOikea { 
margin: 0px 0px 10px 13px; /* ylä, oikea, ala, vasen */
float:right;
} 

/***************************************************************************************
 * Muiden kuvien marginaalit
 ***************************************************************************************/ 

.imgMuut { 
margin: 0px 0px 10px 13px; /* ylä, oikea, ala, vasen */ 
} 


/***************************************************************************************
 * 
 *   "popup-kuvat"
 *
 ***************************************************************************************/

/***************************************************************************************
 * Valiokoirien kuvien yhteydessä käytetään .pieni-luokkaa 
 ***************************************************************************************/ 

.pieni {
position: relative;
z-index: 0;
}

.pieni:hover {
background-color: transparent;
z-index: 10;  /* tämä määrittää, että aukeava kuva on pikkukuvan ja tekstien päällä */
}

.pieni span { /*CSS-määritykset suurelle kuvalle */
position:absolute;
#min-width:300px; /* taustan minimileveys (jotta kuvateksti ei rivity IE:ssä) */
background-color:#FFFFFF; /* valkoinen */
padding: 10px;
border-color:#3D2F2C; /* tummanruskea */
border-width: 2px;
border-style: solid;
visibility: hidden;
color:#000000; /* musta  */
text-decoration: none;
top: 20px;
#top: 85px; /* Tämän ymmärtää vain IE */
left: 107px; /* suuren kuvan paikka horisontaalisesti */
}

.pieni:hover span { /*CSS-määritys suurelle kuvalle */
visibility: visible;
/*top: 20px;
#top: 85px; /* Tämän ymmärtää vain IE */
left: 107px; /* suuren kuvan paikka horisontaalisesti */
}

/* käytetään kuville, joiden popup-kuva aukeaa pienen kuvan yläpuolelle */
.pieni_ylos {
position: relative;
z-index: 0;
}

.pieni_ylos:hover {
background-color: transparent;
z-index: 10;  /* tämä määrittää, että aukeava kuva on pikkukuvan ja tekstien päällä */
}

.pieni_ylos span { /*CSS-määritys suurelle kuvalle */
position:absolute;
#min-width:300px; /* taustan minimileveys (jotta kuvateksti ei rivity IE:ssä) */
background-color:#FFFFFF; /* valkoinen */
padding: 10px;
border-color:#3D2F2C; /* tummanruskea */
border-width: 2px;
border-style: solid;
visibility: hidden;
color:#000000; /* musta  */
text-decoration: none;
top: -400px;
#top: -332px; /* Tämän ymmärtää vain IE. Kun arvo on -372, suurennettu kuva ei peitä ko. kuvaan liittyviä tekstejä. */
left: 107px; /* suuren kuvan paikka horisontaalisesti */
}

.pieni_ylos:hover span { /*CSS-määritys suurelle kuvalle */
visibility: visible;
left: 107px; /* suuren kuvan paikka horisontaalisesti */
}

/***************************************************************************************
 * Tarvikemyynnin suurikokoisten suurennettujen kuvien yhteydessä käytetään .pieni2:sta 
 ***************************************************************************************/ 

.pieni2 {
position: relative;
z-index: 0;
}

.pieni2:hover {
background-color: transparent;
z-index: 10;  /* tämä määrittää, että aukeava kuva on pikkukuvan ja tekstien päällä */
}

.pieni2 span { /*CSS-määritys suurelle kuvalle */
position:absolute;
#min-width:300px; /* taustan minimileveys (jotta kuvateksti ei rivity IE:ssä) */
background-color:#FFFFFF; /* valkoinen */
padding: 10px;
border-color:#3D2F2C; /* tummanruskea */
border-width: 2px;
border-style: solid;
visibility: hidden;
color:#000000; /* musta  */
text-decoration: none;
top: -150px;
#top: 0px; /* Tämän ymmärtää vain IE */
left: 150px; /* suuren kuvan paikka horisontaalisesti */
}

.pieni2:hover span { /*CSS-määritys suurelle kuvalle */
visibility: visible;
left: 150px; /* suuren kuvan paikka horisontaalisesti */
}

/* ylos käytetään kuville, joiden popup-kuva aukeaa pienen kuvan yläpuolelle */
.pieni2_ylos {
position: relative;
z-index: 0;
}

.pieni2_ylos:hover {
background-color: transparent;
z-index: 10;  /* tämä määrittää, että aukeava kuva on pikkukuvan ja tekstien päällä */
}

.pieni2_ylos span { /*CSS-määritys suurennetulle kuvalle, jonka korkeus on yli 250 pikseliä */
position:absolute;
#min-width:300px; /* taustan minimileveys (jotta kuvateksti ei rivity IE:ssä) */
background-color:#FFFFFF; /* valkoinen */
padding: 10px;
border-color:#3D2F2C; /* tummanruskea */
border-width: 2px;
border-style: solid;
visibility: hidden;
color:#000000; /* musta  */
text-decoration: none;
top: -377px;
#top: -240px; /* Tämän ymmärtää vain IE */
left: 150px; /* suuren kuvan paikka horisontaalisesti */
}

.pieni2_ylos:hover span { /*CSS-määritys suurelle kuvalle */
visibility: visible;
/*top: -220px;
#top: -285px; /* Tämän ymmärtää vain IE */
left: 150px; /* suuren kuvan paikka horisontaalisesti */
}


/***************************************************************************************
 * Tarvikemyynnin pienikokoisten suurennettujen kuvien yhteydessä käytetään .pieni3:sta 
 ***************************************************************************************/ 

.pieni3_ylos { /* ylos käytetään kuville, joiden popup-kuva aukeaa pienen kuvan yläpuolelle */
position: relative;
z-index: 0;
}

.pieni3_ylos:hover {
background-color: transparent;
z-index: 10;  /* tämä määrittää, että aukeava kuva on pikkukuvan ja tekstien päällä */
}

.pieni3_ylos span { /*CSS-määritys suurennetulle kuvalle, jonka korkeus on alle 250 pikseliä */
position:absolute;
#min-width:300px; /* taustan minimileveys (jotta kuvateksti ei rivity IE:ssä) */
background-color:#FFFFFF; /* valkoinen */
padding: 10px;
border-color:#3D2F2C; /* tummanruskea */
border-width: 2px;
border-style: solid;
visibility: hidden;
color:#000000; /* musta  */
text-decoration: none;
top: -257px;
#top: -140px; /* Tämän ymmärtää vain IE */
left: 150px; /* suuren kuvan paikka horisontaalisesti */
}

.pieni3_ylos:hover span { /*CSS-määritys suurelle kuvalle */
visibility: visible;
/*top: -220px;
#top: -285px; /* Tämän ymmärtää vain IE */
left: 150px; /* suuren kuvan paikka horisontaalisesti */
}

-->