#page {
    position: relative; 	/* Set the position property so z-index will apply */
    z-index: 20; 		/* Make sure this is higher than #menu */
    height: 100%;
}

#menu {
    display: none;
    position: absolute;
    top: 114px;
    right: 0;
    width: 260px;
    padding: 5px 5px 5px 9px;
    margin: 0;
    list-style: none;
    /* background: #333; */
    z-index: 10; /* Make sure the z-index is lower than the #page */
    border-left: #aaaaaa 1px solid;
}
 
#menu a {
    display: block;
    /* color: #fff; */
    color: #333333;
    padding: 7px 0 0 0;
    border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
}

#toggle-menu-map {   /* this is the hamburger */
    position: absolute;
    top: 128px;
    right: 10px;
}

/* Show the menu when animating or visible */
.animating #menu, .menu-visible #menu {
  display: block;
}


li.smallcapswhite {
font-size: 110%;
font-variant: small-caps;
color: #ddeedd;
padding: 0 0 0 5px;
}

/***
 * If the animating class is present then apply
 * the CSS transition to #page over 250ms.
 */
.animating #page {
  transition: transform .25s ease-in-out;
  -webkit-transition: -webkit-transform .25s ease-in-out;
}

/***
 * If the left class is present then transform
 * the #page element 275px to the left.
 */	
.animating.left #page {
  transform: translate3d( -275px, 0, 0 );
  -webkit-transform: translate3d( -275px, 0, 0 );
}

/***
 * If the right class is present then transform
 * the #page element 275px to the right.
 */
.animating.right #page {
  transform: translate3d( 275px, 0, 0 );
  -webkit-transform: translate3d( 275px, 0, 0 );
}

/***
 * If the menu-visible class is present then
 * shift the #page 275px from the right edge
 * via position: absolute to keep it in the 
 * open position. When .animating, .left and
 * .right classes are not present the CSS
 * transform does not apply to #page.
 */
.menu-visible #page {
  right: 275px;
}

.mcol1of2 {
width: 190px;
display: inline;
float: left;
margin: 0;
padding: 0;
}

.mcol2of2 {
width: 60px;
display: inline;
float: right;
margin: 0;
padding: 0;
}

.hamburger {
padding: 18px 5px 0 0;
margin: 0;
}

div.mainlogo {
padding: 6px 0 0px 6px;
}


div.minibreak {
padding: 0;
margin: 0;
}

div.titlebarleft {
float: left;
padding-right: 60px;
}

div.titlebarright {
width: 64px;
float: right;
display: inline;
}

/* ----------------  NAV and ANCHORS ----------------- */





/* DEFAULT MOBILE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */




/* WIDE MOBILE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

@media only screen and (min-width: 360px) and (max-width: 767px) {


} /* end of wide mobile */


/* EXTRA-WIDE MOBILE, SMALL TABLET xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


@media only screen and (min-width: 500px) and (max-width: 767px) {



} /* end of extra-wide mobile */


/* TABLET xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

@media only screen and (min-width: 768px) {


} /* KEEP THIS */