<!--LISTBASERADE MENYER DÄR LISTELEMENTEN SAKNAR ID-ATTRIBUT ELLER KLASSER-->
<!-- testad i NN7, Opera, Firefox, IE6, IE5.5, IE5, för Windows och Safari och IE5 för Mac -->
<!--fortsättning på exemplet med en vågrät meny-->

/* den vågräta menyn börjar här */
div#listmenu {
 width:100%; 	               /* ger div-elementet full bredd */
 float:left; 	               /* gör att div-elementet omsluter listan */
 border-top:1px solid #CCC;    /* skapar en linje i div-elementets övre kant */
 border-bottom:1px solid #CCC; /* skapar en linje i div-elementets nedre kant */
 background-color:#0066CC;     /* ger div-elementet färg */
 margin:0px;
}
div#listmenu ul {margin:2px 3em 2px 0; /* drar in ul från behållarens kant */
}
div#listmenu li:first-child {
 border-left:1px solid #CCC; /* den första lodräta linjen på menyn */
}
div#listmenu a {
 display:block; /* alternativen på listmenyn ändrar färg */    
 padding:0px 12px; /* skapar luft på varje sida om menyalternativen */
 text-decoration:none;	 /* tar bort understrykningen av länken */
 font-weight:bold;
 color:#FFF;	/* anger teckenfärgen */
}
div#listmenu a:hover {
 font-weight:bold;
 color:#000;
}
/* den vågräta menyn slutar här */

/* listmenyn börjar här */
div#listmenu ul li ul {
 margin:0;  /* förhindrar att det tillfälliga värdet från den vågräta menyn ärvs här */
            /* OK att ta bort, om du också  */
	    /* tar bort det tillfälliga värdet ovan */ 
 position:absolute; /* positionerar ul-listmenyn i förhållande till dess relativt */
                    /* positionerade li-förälder */ 
 width:8em;  /* anger menyns bredd - i kombination med bredden 100% för li-elementet */
             */ gör detta att menyn justeras lodrätt */
 left:-1px; /* justerar listmenyn exakt under den vågräta menyn */
 top:19px;
}
div#listmenu ul li ul li {
 width:100%; /* får listposterna att fylla ut listbehållaren (ul) */ 
 border-left:1px solid #CCC; /* tre sidor på varje listpost på varje listmeny */  
 border-bottom:1px solid #CCC;
 border-right:1px solid #CCC;
}
div#listmenu ul li ul li:first-child {
 border-top:1px solid #CCC; /* högst upp på listmenyn */
}
/* gör att listmenyn visas när användaren pekar på menyn */ 
div#listmenu ul li ul {display:none;} /* döljer listmenyn när användaren inte */ 
                                      /* pekar på menyn */ 
div#listmenu ul li:hover ul {display:block; } /* visar listmenyn när användaren */
                                              /* pekar på menyn */ 
/* HACK-ZON - */
/* hack för IE (alla modeller) så att menyn får en vågrät linje längst ut till vänster */
* html div#listmenu ul {
 float:left; /* får ul att omsluta alla li-elementen */
 border-left:1px solid #CCC; /* lägger till linjen längst ut till vänster i */
                             /* ul-elementet */
 margin-left:15px; /* IE fördubblar värdet som angivits - varför? */
}
/* * html a {display:block;} */ /* får IE5 & 5.5 att acceptera padding för länken */
/* lägger till en topplinje på listmenyer och popupmenyer i IE-webbläsarna -*/
/* kan inte läsa :first-child */ 
* html  div#listmenu ul li ul {
 border-top:1px solid #CCC;
 border-left:1px solid #CCC; /* gör att listmenyn inte ärver kantlinjen för ul-elementet */ 
}
/* slut på hack-zon */
/* SLUT PÅ LISTBASERAD MENY */

/* css för att poppa upp större bilder! */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail_large{
position: relative;
z-index: 0;
}
.thumbnail_large:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail_large span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail_large span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail_large:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -525px; /*position where enlarged image should offset horizontally */
}
.thumbnail_small{
position: relative;
z-index: 0;
}
.thumbnail_small:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail_small span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail_small span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail_small:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 25px; /*position where enlarged image should offset horizontally */
}
/* slut css för större bilder! */