ul#projnav {
  position: fixed;
  left: 20px;
  top: 30px;
  width: 220px;
  border-width:thin;
  border-style:dotted;
}

/* VANLIGA MENY LÄNKAR */
ul.projdrop a {
           display:block; 
           width:180px; 
           font-family: verdana; 
           font-size: 11px;
           text-decoration: none;
           text-align:left;}


           
ul.projdrop,                           /* Grå platta bakom länkarna */ 
ul.projdrop ul,
ul.projdrop li 
 
            {        
            float:left;
            list-style: none; 
            margin: 0; 
            padding: 0; 
            border:1px solid #fff; 
            background:#EEEDEA;
            color: #fff;
            -webkit-box-shadow:  5px 5px 9px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow:     5px 5px 9px 0px rgba(0, 0, 0, 0.1);
            box-shadow:          5px 5px 9px 0px rgba(0, 0, 0, 0.1);
            }
         
ul.projdrop { 
           position: relative; 
           z-index: 1; 
           float: left; } 
ul.projdrop li { 
           float: left; 
           line-height: 1.3em; 
           vertical-align: middle; 
           padding: 3px 20px; 
           }
ul.projdrop li.hover, 
ul.projdrop li:hover 
           {
           position: relative; 
           z-index: 599; 
           text-decoration: none;
           background-color: #fefefe;		/* bakgrundens  färg i menuitem (vitt) */
           background-image: url(/graphics/arrow_on.gif);
           background-repeat: no-repeat;
           background-position:2% 50%;
           }                        
ul.projdrop ul { 
           visibility: hidden; 
           position: absolute; 
           top: 100%; 
           left: 0; 
           z-index: 598; 
           /* width:240px;*/
           width:220px; 
           
           background: #555; 
           border:1px solid #fff; 
           position: absolute; left: 75%; top: 50%;
           }           
ul.projdrop ul li { 
           float: none;
            
           }
ul.projdrop ul ul { 
           top: -2px; 
           left: 100%; 
           }
ul.projdrop li:hover > ul { 
           visibility: visible; 
           }
                      
ul li.homelink
           {
           font-family: Verdana, sans-serif, Arial, Verdana;

           font-size: 16px; 
           color: #5A5A5A;
           background-color: #E6E3DE;
           vertical-align: middle;
           line-height:20px;
           border-top: #eee;
           border-right: #fff;
           border-bottom: #b9b9b9;
           border-left: #fff;
           border-style: solid;
           border-width: 2px 1px;
           }
ul li.homelink:hover 
           {
           background-color: #F5F5F5;	/* bakgrundens färg i homelink (ljusgrått) */
           }    
 
 
  /* body# kommer ihåg vilken sida man är på när denna sidas id är aktuell    */   
  /* När Li ID är samma som Body ID - kommer menyn ihåg vilken sida den är på */   
      
body#storybody li#storybody,       
body#storybody li#storyofaship,          
         
body#swecompany li#company,           
body#swecompany li#swecompany,        


body#bogyll li#company,
body#gothist li#company,
body#swehist li#company,
body#ships li#company,
body#priv1731 li#company,
body#chapman li#company,
body#scots li#company,
body#traveltoswed li#company,

body#bogyll li#bogyll,
body#gothist li#gothist,
body#swehist li#swehist,
body#ships li#ships,
body#priv1731 li#priv1731,
body#chapman li#chapman,
body#scots li#scots,
body#traveltoswed li#traveltoswed,

/*  flik två  */

body#lastvoyagebody li#lastvoyagebody,
body#lastvoyagebody li#lastvoyage,

body#crew li#lastvoyage,
body#cargo li#lastvoyage,
body#food li#lastvoyage,
body#drinks li#lastvoyage,
body#silver li#lastvoyage,
body#armament li#lastvoyage,
body#clothes li#lastvoyage,
body#sjofor li#lastvoyage,
body#units li#lastvoyage,

body#crew li#crew,
body#cargo li#cargo,
body#food li#food,
body#drinks li#drinks,
body#silver li#silver,
body#armament li#armament,
body#clothes li#clothes,
body#sjofor li#sjofor,
body#units li#units,

/*  flik tre  */

body#research li#research,
body#research li#awmarex,

body#books li#research,
body#bourn li#research,
body#hwar8dag li#research,
body#elfsborgbody li#research,
body#porcelain li#research,
body#awmarbild li#research,
body#archives li#research,
body#others li#research,
body#baghlah li#research,
body#hiorten li#research,
body#awmarexbody li#research,

body#books li#books,
body#bourn li#bourn,
body#hwar8dag li#hwar8dag,
body#elfsborgbody li#elfsborg,
body#porcelain li#porcelain,
body#awmarbild li#awmarbild,
body#archives li#archives,
body#others li#others,
body#baghlah li#baghlah,
body#hiorten li#hiorten,
body#awmarexbody li#awmarex,


/* Flik fyra */

body#chronology li#chronology,
body#chronology li#project,

body#researchnprepbody li#project,
body#earlyorg li#project,
body#objectives li#project,
body#fundraising li#project,
body#terranova li#project,
body#larsgillis li#project,
body#coldin li#project,
body#newvoyage li#project,
body#canton2006 li#project,
body#portelisabeth li#project,
body#homecoming li#project,


body#researchnprepbody li#researchnprep,
body#chronology li#chronology,
body#earlyorg li#earlyorg,
body#objectives li#objectives,
body#fundraising li#fundraising,
body#terranova li#terranova,
body#larsgillis li#larsgillis,
body#coldin li#coldin,
body#newvoyage li#newvoyage,
body#canton2006 li#canton2006,
body#portelisabeth li#portelisabeth,
body#homecoming li#homecoming



{ 
background: #FaFaFa;
border-bottom: #fff;
border-right: #fff;
border-top: #D4CECE;
border-left: #fff;
border-style: solid;
border-width: 1px 1px;
}


ul#projnav ul.scroll{
    max-height: 600px;
    overflow-y: visible;
    overflow-x: hidden;
}



/* DROP DOWN MENY */
.dropbtn {

/*           width:220px;*/ 
           font-family: verdana; 
           font-size: 11px;
           text-decoration: none;
           text-align:left;}
}


/* Dropdown Button */
.dropbtn {
  background-color: #E6E3DE;
  color: #6D899D;
  padding: 16px;
  font-size: 11px;
  border: none;
  cursor: pointer;
}


/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #F5F5F5;
}

/* The container <div> - needed to position the dropdown content */


.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 11px;
  border-bottom-style:groove;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 



@media screen and (max-width: 900px) {
    

body {
    background: #FFFEF5 url(/graphics/silk.jpg);
    font: 16px/1.5em Georgia, serif;
    color: #525A71;
    max-width: 1200px;
    margin-left: 5px;
    margin-right: 12px;
    height:100%;
    padding: initial;
}    

h1 {
        padding-bottom: 0px;
        line-height: 1.2em;
        padding-left: 5px;
        padding-right: 5px;
    }
        
H1  { font-size: 18px;
}
H2  { font-size: 14px;
}
H3  { font-size: 13px;
      line-height:14px;
      padding-top: 0px;
}
    
.show-only-on-desktop {
        display: none;
    }

ul#projnav {
        float: initial;
        position: initial;
        margin-left: auto;
        margin-right: auto;
        display: block;
        max-width: 100%;
        height: auto;
        }
        
ul.projdrop li a {					/* I det här sammanhanget em LI under ul.sidenav som omfamnar en ny UL LI-LI-LI /UL grupp */ 
text-align: center;
float: none;
}
        
}