body { background-color:#ddd; }
a { border:0; }
.layout_tile { vertical-align:top; }
.layout_tile { padding:3px; }
.tile_content { padding-top:10px; padding-bottom:10px; }
.tile_content { padding-left:10px; padding-right:10px; }

/************ MENU ************/
#main td { background-color:#eee; }

/* unstyle all ul and li */
#nav td ul { margin:auto; margin:0; padding:0; list-style:none; border:0; }
#nav td li { margin:0; padding:0; list-style:none; border:0; }

/* hide all submenus */
#nav td ul ul { display:none; }

/* top menu links */
#nav td > ul > li > a { font-family:sans-serif; color:#000; font-size:18px; font-weight:normal; text-decoration:none; background-color:#eee; padding:2px 5px; border-radius:2px; }
#nav td > ul > li.active > a { background-color:#ccc; font-weight:bold; }
#nav td > ul > li:hover > a { text-decoration:underline; background-color:#d9d9d9; }

/* submenu */
#nav td > ul > li > ul { padding:6px 5px; background-color:#e6e6e6; }

/* submenu links */
#nav td > ul > li > ul > li > a { font-family:arial, sans-serif; font-size:13px; color:#000; text-decoration:none; display:block; padding:0px 7px; line-height:23px; white-space:nowrap; }
#nav td > ul > li > ul > li.active > a { text-decoration:underline; background-color:#d9d9d9; font-weight:bold; }
#nav td > ul > li > ul > li:hover > a { text-decoration:underline; background-color:#d9d9d9; } 

@media screen and (min-width: 769px) {
	#main { width:1240px; margin:auto; }
	#nav { margin:auto; }
	#nav td > ul > li { display:inline; float:left; margin-bottom:5px; }
	#nav td > ul > li > a { display:block; margin-right:10px; }
	#nav td > ul > li > ul { border-top:solid 4px #ddd; } /* submenu nudge down */
	#nav td > ul > li:hover > ul { display:block; position:absolute; } /* submenu position */
	#nav td > ul > li:last-child > ul { margin-left:-50px; } /* last submenu nudge left */
	#nav td > ul > li:first-child { display:none; } /* hide menu toggler */
}

@media screen and (max-width: 768px) {
	
	#main { width:100%; margin-top:43px; }
	#nav.open { min-width:222px; }
	
	#nav { position:fixed; background-color:#bbb; top:3px; }
	#nav td > ul > li:first-child { text-align:left; }
	
	#nav td > ul > li { display:none; float:none; margin-bottom:0; } 
	#nav td > ul > li > a { margin-right:0; }
	#nav td > ul > li:last-child > ul { margin-left:0; } /* last submenu no nudge left */
	#nav td > ul > li > ul { border-top:0; } /* submenu no nudge down */
	
	/* bg color on li, not links */
	#nav.open td > ul > li { background-color:#eee; }
	#nav.open td > ul > li.active { background-color:#ccc; }
	#nav.open td > ul > li:hover { background-color:#d9d9d9; }
	#nav.open td > ul > li > a { background-color:transparent; }
	
	/* show/hide top links  */
	#nav.open td > ul > li { display:block; }
	#nav.closed td > ul > li { display:none; } 
	
	#nav.open td > ul > li > ul { display:none; }
	#nav.open td > ul > li.open > ul { display:block; }
	/*
	#nav.open td > ul > li > span { margin-top:4px; cursor:pointer; display:block; float:right; width:16px; height:16px; background:url(arrow-right.gif) no-repeat transparent; }
	#nav.open td > ul > li.open > span { background:url(arrow-down.gif) no-repeat transparent; }
	*/
	#nav.open td > ul > li > span { margin-top:1px; cursor:pointer; display:block; float:right; width:20px; height:20px; background:url(arrow-right.gif) no-repeat transparent; background-size: 20px 20px; }
	#nav.open td > ul > li.open > span { background:url(arrow-down.gif) no-repeat transparent; background-size: 20px 20px; }


	/* menu toggler */
	#nav td > ul > li:first-child { line-height:1px; display:block; background-color:transparent !important; }
	#nav td > ul > li:first-child a { display:inline-block; background-color:#eee; text-decoration:none; line-height:32px; width:32px; height:32px; padding:0 8px; background: url(menu-button.png) no-repeat #eee; background-size: 32px 32px; background-position: 8px 0px; }
	#nav.open td > ul > li:first-child { margin-bottom:5px; }

}

/************ END MENU ************/