/* style sheet for home page */
/* this was made on 23rd February 2015. It is less   s p a c e d   o u t    than style1.css*/
/*it works with main1.html*/ 

/* general look of page */
body {
background-color: #ccccc0; 
font-family: arial, verdana, helvetica, sans-serif; font-size: 4mm;
}

/* centered text (mostly titles) and centered pictures, used for Arachnophilia logo */
div.center {
h3-align: center;  
text-align: center;
align: center
width: 750px;
margin-left: auto; margin-right: auto;
margin-top: 0px; margin-bottom: 0px;
padding-top: 4px;  padding-bottom: 4px; 
}
/*general title*/
titel {
text-align: center;
font-size: 5mm;
width: 500px;
/*margin-left: 120px;*/
padding-top: 10px;  padding-bottom: 10px; 
}

/*subtitle for concerts in biography*/
subtitle {
font-size: 5mm; 
width: 500px;
/*margin-left: 120px;*/
padding-top: 10px;  padding-bottom: 10px; 
}



/* main titles on home page */
h2 {
text-align: left; 
/*align: center;*/
width: 750px;
margin-left: auto; margin-right: auto;
margin-top: 10px; margin-bottom: 10px;
padding-top: 0px;  padding-bottom: 0px; 
}
/*padding-top: 4px;  padding-bottom: 4px;*/ 

/* sub titles on home page) */
h3 {
align: center; 
/*height:1px; */
/*width: 750px; */
/* text-align: left; */
/*margin-left: auto; margin-right: auto;*/
margin-top: 5px; margin-bottom: 5px;
padding-top: 0px;  padding-bottom: 0px; 
}
/*padding-top: 0px;  padding-bottom: 3px; */




/*subtitle for concerts in biography*/
subtitle {
font-size: 5mm; 
width: 500px;
/*margin-left: 120px;*/
padding-top: 10px;  padding-bottom: 10px; 
}

/* plain wide text */
div.widetext {
text-align: left; 
width: 750px; 
margin-left: auto; margin-right: auto;
margin-top: 0px; margin-bottom: 0px;
padding-top: 0px;  padding-bottom: 0px; 
}

/* full width picture */ 
div.widepicture { 
width: 750px;
align: center;
margin-left: auto; margin-right: auto;
margin-top: 0px; margin-bottom: 0px;
padding-top: 4px;  padding-bottom: 4px; 
}

/* tables, containing text and pictures */
table {
align: center; 
width: 750px;
text-align: left; 
margin-left: auto; margin-right: auto;
margin-top: 0px; margin-bottom: 0px;
padding-top: 0px;  padding-bottom: 0px; 
/*padding-top: 4px;  padding-bottom: 4px;*/ 
} 

/* white horizontal rule */
hr {
color:#fff; 
background-color:#fff; 
width:750px; height:3px;
border:0;
margin-top: 10px; margin-bottom: 0px;
padding-top: 0px;  padding-bottom: 0px; 
}

/* link colours */
a:link, a:visited, a:active { text-decoration:none }
a:hover { color:#ff3300;}
a:text { color:#000000;}

/* Created on 04-Nov-2023 16:35:56     does not work     i do not understand java script    copied to style2bak.css*/

/* Style the navbar */
/*
#navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links 
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}


.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position 
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) 
.sticky + .content {
  padding-top: 60px;
}
/*--------------------------------------------------------------------------------------------------------------------------------*/

.navbar {
  overflow: hidden;
  background-color: #ccccc0;
  position: fixed;
  top: 0;
  padding-bottom: 10px; 
}
  width: 100%;
}

.navbar a {
<!--   float: center; -->
  display: block;
  color: blue;
  text-align: center;
  padding: 4px 6px;
  text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

.navbar a:hover {
  background: #ccccc0;
  color: red;
}

-----------------------------------------------------------
......................................................................
body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #ccccc0;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
 <!--  float: center; -->
  display: block;
  color: blue;
  text-align: center;
  padding: 4px 6px;
  text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

.navbar a:hover {
  background: #ccccc0;
  color: red;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
  background-color: #ccccc0;
}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
    background-color: #ccccc0;  
}