* {
	box-sizing:border-box;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box;
	margin:0;
	outline: none;
}
body {
	padding:0;
	font-family: 'DM Sans', sans-serif;
	font-size:16px;
	color: #369; background: #FAFFFF; 
}
header{
	width: 100%;
	height: 36px;
	margin-bottom: 1em;
	text-align: center;
	background: #D2D2E7;
}
header:hover{
	transition: background 2s;
	background: #BCBCDB;
}
/* ----------------------------------- Navigation ----------------------------------- */
#menu_icon{
	display: none;
	width: 100%;
	text-decoration: none;
	padding-top: 8px;
}
#nav_menu{
		max-width: 960px;
		height: 50px;
		line-height: 35px;
		margin: 0 auto; padding-left: 100px;
/*		border: thin solid red;*/
}
#nav_menu a{
	width: 14%; float: left;
	display: block;
	font-size: 16px;
	letter-spacing: 1.5px;
	text-align: center;
	text-decoration: none;
	text-shadow:1px 1px 1px #369;
	color: #57879E;
	transition:all .2s linear;
	-webkit-transition:all .2s linear; -moz-transition:all .2s linear;
}
#nav_menu a:hover{ color: white; background: #A6A6BE;}
#nav_menu .selected{ color:#000;}

/* ----------------------------------- table ------------------------------------- */
table{	/* for travel */
	margin: 1em auto;
	border: thin solid #8ca1bf;
	border-radius: 0.5em; /* -moz-border-radius: 0.5em; */
	font-size: 100%; 
}
table tr { vertical-align: top;	}
table th { 
	padding: 0.1em; 
	font-variant: small-caps; 
	color: #036; background: #d7d7e6;
	border-radius: 0.3em; -moz-border-radius: 0.3em;
}
table td { padding: 0 0.5em; }
/* ----------------------------------- styles ------------------------------------- */
footer { 
	padding-top:1em;
	font-size: 76%; 
	text-align: center; 
}
h1, h2{ 
	padding-left: 0.2em;
	font-weight: normal; 
	font-family: "Trebuchet MS", Helvetica, sans-serif; 
	color: #038; background: #d7d7e6;
}
h1 { 
	margin: 1em 0.1em;
	font-size: 140%; 
	line-height: 2em;
	font-variant: small-caps;
}
h2 { 
	margin: 0.7em 0.1em;
	font-size: 120%; 
	line-height: 1.5em;
}
p{ margin: 0.2em 0 0 1em; }
p.ind{ margin-left: 2em; }
a { color: #369; }
a:hover { color: #000; }
img{ padding-top: 0.3em; }
img.sites{ border: none; padding: 0; vertical-align: middle;}
ul{ clear: both; margin: 0.2em 2em; padding: 0;}
li{ display: inline; }
em{ color: green; }
span.warn{ color:red;}
span.s4{ font-size: 66%; }
span.highlight{ background-color: yellow;}
#frame{ /* for favorites */
	width: 34em; 
	margin: 100px auto 10px auto; 
	border: thin solid #d6d7d9; 
	border-radius: 5px; 
	box-shadow: 5px 5px 10px #d9d8d8; 
	}
.box{ display:inline-block; vertical-align:top; width:11em; padding:10px; text-align: center;}
	.box a{ display:block; padding:5px 3px;}
	.box h2{ border-radius: 5px; }
.hidden a{ padding:50px; color: #ededfc; }
.center{ margin: 0; padding: 0; text-align: center; }

#article {	/* for accounts */
	column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;
	column-gap: 2em; -webkit-column-gap: 2em; -moz-column-gap: 2em;
	column-rule: 1px solid #ddd; -webkit-column-rule: 1px solid #ddd; -moz-column-rule: 1px solid #ddd;
}
/* ----------------------------------- mobile ------------------------------------- */
@media screen and (max-width: 800px) {
	header{ margin-bottom: 0;}
	#menu_icon{ display: block; }
	#nav_menu.show_menu{ display: block; }
	#nav_menu{
		display: none;
		position: relative;
		height: auto;
		margin: 0; padding: 0;
		overflow: hidden;
		text-align: center;
		background: #BCBCDB;
	}
	#nav_menu a{
		display: block;
		width: 100%;
		padding: 5px 0;
		background: #D2D2E7; 
		border-bottom: thin solid #038;
	}
	#frame{ width: 35em; margin: 1em auto; }
}

@media screen and (max-width:768px) {
	#frame{ width: 23em; margin: 1em auto; }
	#article { column-count: 1; }
}