#header {	
	background-color: indigo;
/*	height: 200px;   150 for laptop screen, 200 for iPad */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: 150px;
	}
			
#logoArea {	
	width: 360px;
	height: 110px;
	background-image: url(dsoclogo.png);
	background-color: indigo;
	margin-left: auto;
	margin-right: auto;		
	}	
		
#nav1{
	text-align: center;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
}

.mybuttons { 
    list-style-type: none;
    margin: auto;
/*    padding: 5,0,5,0;  */
    top: 70px; 
    }

.mybutton, .mydropbtn { 
	display: inline-block;  
	font-size:medium; 
    color: black;
    text-align: center;
    padding: 7px;
    border: 2px solid;
    border-radius: 10px;
    background-color: palegreen; 
    cursor:pointer;
    text-decoration: none;
}

.mybutton a, .mydropbtn a{
	color: black;
}
.mybutton:hover, .mydropbtn:hover {
    color: white;
    background-color: green;
}
.mybutton a:hover, .mydropbtn a:hover{
    color: white;
}
/*------------------------------*/
/* The container <div> - needed to position the dropdown content */
.mydropdown {
    display: inline-block; 
}

/* Show the dropdown menu on hover - not using hover as iPad can't cope with it!
 * Using javascript instead */
/* .mydropdown:hover .mydropdown-content{
    display: block;
}
*/
/*---------------------------------------*/
/* Dropdown Content (Hidden by Default) */
.mydropdown-content {
    display: none;
    position: absolute;
    background-color: palegreen;
    min-width: 150px;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);   
    overflow: auto;
}

/* Links inside the dropdown */
.mydropdown-content a {
    color: black;
    height: 15px;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.mydropdown-content a:hover{
	background-color: green;
	color: white;
}
/*
.mydropdown-content:hover{
    display: block;
}
* */
.active {
    color: yellow;
}

.show {
  display: block;
}

/*======================================*/

#footer	{	
	background-color: indigo;
/*	height: 50px;  */
	width: 100%;
	color: white;
	padding-top: 11px;
	}
	
#footerleft	{
	padding-left : 0;
	text-align: left;
	}
			
#footerright {
	text-align: right;
	float:right;
	}		

/*===================================================================*/