#topnav {
	 width:auto;
	 max-width:50%;
	 position:relative;
	 left:27%; /* Looks better on ipad/iphone*/
	 padding:0;
	 margin:0;
	 border:1px solid transparent;
	 display:inline-block;
}
/*
#toptag {
	 position:relative;
	 width:auto;
	 left:0%;
	 padding:0;
	 margin:0;
	 margin-left:0px;
	 border:1px solid green;
	 display:inline-block;
}
*/
/* Tag selector CSS */

#tagSel {
      margin:.75rem auto 0 auto;
      text-align:center;
}

/* Top nav elements */
.tabs {
    list-style: none;
    margin: auto;
    padding: 0;
    position: relative;
	color: black;
   display:inline-block;
}
.tabs li {
    margin: 2px 12px;
    padding: 10px;
    cursor: pointer;
    background: #e0e0e0;
    display: inline-block;
   color: black;
    border-radius: 10px;
   border: 1px solid grey;
    box-shadow: -4px 4px 6px #506886;
}
.tabs li:not(.active) {
      background:#f0f0c0;
}
.tabs li:not(.active):hover
{
	background: #c0f0c0;
}
.tabs li > a
{	
	text-decoration: none;
	color: black;
}
.tabs li.active
{
    border: 1px solid #ccc;
	border-bottom-color: #fff;
	color: grey;
	cursor: default;
    box-shadow: -2px 2px 6px #506886;
}

@media (orientation: portrait) {
   #topnav {
	 max-width:50%;
   }
   #tagSel { 
      text-align:left;
   }
   .tabs {
	 display:inline;
	 }
   .tabs li {
    margin: 4px 6px;
    padding: 4px;

}