body {font-family: verdana, San-Francisco, sans-serif;
	font-size:125%;text-align:center;line-height:1.5;
	padding:0;margin:auto;min-width:800px;}

header {text-align:left;height:100px;
	padding:0 0 0 7%;width:93%;overflow:hidden;
	background-image:url('i/sunrise.png');
	translate:no;line-height:2;}

nav {text-align:center;width:100%;height:30px;
	inline-block;overflow:hiden;
	background-color:#cc4b39; 
	background:linear-gradient(90deg,brown,red,orange);
	translate:no;}

main {width:92%;padding:0 4% 18px 4%;
	text-align:center;line-height:1.5;
	display:inline-block;}

aside {width:100%;translate:no;
	padding:8px 0;background-color:#eee;
	border-top:1px dotted #008828;}

nav a {padding:0 9px; margin:0 18px; color:#fff;}

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

main {width:65%;padding:0 1.5% 18px 5%;
	display:inline-block;float:left;}

aside {display:inline-block;width:280px;
	padding:15px 0;
	vertical-align:top;background-color:#fff;
	background-image:url("i/b2.png");border:none;}

}

#dt {width:240px;padding:3px 18px 2px 36px;height:24px;
	font-size:80%;color: #fff;}

.opto {color:#EE3333;font-size:300%;font-weight: bold;
	font-family:Georgia, serif;}

.city {color:green;font-size:300%;font-weight:bold;
	font-family:Georgia, serif;}

.hexagram {color:#EE3333;font-size:150%; 	position:relative;left:38px;bottom:9px;}

.quality {color:#0099cc;yellow;font-size:100%;}

form {width:100%;line-height:2;
	text-align:left;margin:0;padding:10px 0;}

#search {font-size:100%; width:275px;
	position:absolute; top:16px;left:73%;}

#search input[type=text] 		{width:220px;margin:0;height:23px;font-size:80%;}

#search input[type=submit] 
{width:21px;height:21px;margin:0;padding:0;
position:relative;top:3px;left:232px;
background-color:#fff;border:none;}

input {display:inline-block; width:70px;
	text-align:center;color:#333;
	border:1px solid #ccc; border-radius:10px;
	font-size:90%;padding:3px; margin:8px 0;}

input[type=text] {width:325px;}

input[type=submit] {width:110px;border:1px solid #ccc; 				color:#007898;}

textarea, select {width:100%;font-size:125%; color:#333;			border:1px solid #888; border-radius:3px;
padding:3px; margin:8px 0;}

input[type=submit]:hover
	{background-color:#079;color:#fff;}

button:hover
	{background-color:#ccc;}

input:focus, textarea:focus {outline:1px solid grey;}

form li {with:100px;float:right;
	display:inline-block;padding:0;}

ul {width:258px; margin:0 0 15px 0;padding:0 10px;
	display:inline-block;vertical-align:top;}
li {margin:5px 0;padding:0 10px;
	list-style-type:none;text-align:left;}

li a {padding:3px;margin:5px 3px;color:#007bd6;
	text-align:left;
	display:inline-block;min-width:200px;
	line-height:1.25;}

a {text-decoration:none;color:#079;
	display:inline-block;min-width:110px;
	text-align:center;padding:0 18px;}

a:hover {background-color: #ccc;}

div {margin:0;padding:9px 2%;display:inline-block;
	vertical-align:top;text-align:justify;
	line-height:1.7;}

p {margin:0;padding:9px 2%;text-align:justify;
	line-height:1.6;}

h1 {color:#007898;margin:0;xpadding:16px 0 0 0;
	text-align:center;}

h2 {color:#007898;margin:9px 0;padding:0;
	text-align:left;}

h3 {background-color:#09c;color:#fff;margin:18px 0; 			padding:0 9px 2px 9px;
	width:98%;line-height:30px;text-align:left;}

h4 {color:#555;text-align:left;font-size:100%;
	padding:9px 2%;margin:0;}

h5 {margin:0;padding:0;display:inline-block;
	font-size:100%;color:#555;
	text-align:left;}

h6 {min-width:200px;margin:0;padding:0;
	display:inline-block;font-size:100%;
	font-weight:normal;color:#777;
	font-style: oblique;}

hr {height:1px;border-top:1px dotted #083;
	margin:2px 0;padding:0;width:99.7%;}

table {width:100%;font-size:100%;
	margin:12px auto;border-collapse:collapse;
	padding:9px;}

th{border:1px solid #bbb;padding:0 5px;
	text-align:center;}

td {border:1px solid #bbb;padding:8px;line-height:1.2;}

td a {min-width:50px;}

img {display: block;margin:10px auto 0 auto;}

footer {width:100%;padding:10px 0 25px 0;
	border-top:1px dotted #008828;
	font-size:80%;
	text-align:center;background-color:#eee;
	display:inline-block;}

footer div {text-align:left;}

.active, .collapsible:hover 
	{background-color: #ccc;}

.collapsible:after {
  content: '\02C5';
  color: grey;
  font-weight: bold;
  float: right;
}

.active:after {
  content: '\02C3';
  color: grey;
  font-weight: bold;
  float: right;
}

.content {
  padding: 0 18px;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

button {font-size:100%;border-radius:10px;border:1px solid #888;padding:0 10px;}

.e {color:#007bb6;font-size:300%;}
.t {background-color:#00aced;color:#fff;text-align:left;font-size:125%;padding:2px 0;}
.f {background-color:#3b5998;color:#fff;text-align:left;font-size:125%;} 
.g {background-color:#dd4b39;color:#fff;text-align:left;font-size:125%;}
.in {background-color:#007898;#007bb6;color:#fff;text-align:left;font-size:125%;}
.right {width:96%;text-align:right;}