@charset "UTF-8";

body {
	background: #eeeeee;
	font-family:  "Meiryo", "Hiragino Kaku Gothic Pro", "sans-serif";
	margin: 0 10%;
}

.zh {
	font-family:"Microsoft Yahei", "PingHei", "sans-serif";
}
.en, .es {
	font-family:"Arial", "Times New Roman", "sans-serif";
}

a:link {
	color: blue;
}
a:visited {
	color: blue;
}
a:hover {
	color: red;
}
a:active {
	color: red;
}

h1 {
	padding: 12px 16px 4px 16px;
	background: royalblue;
	color: white;
	border-bottom: double 4px cyan;
}

h2 {
	padding: 0px 8px;
	color: royalblue;
	background: lavender;
	border-left: solid 5px mediumblue;
}

h3 {
	padding:2px 8px;
	color: snow;
	background: lightskyblue;
	border-radius: 4px;
}
h3.red {
	//color: snow;
	background: mediumpurple;
}

div.main {
	background: snow;
}

header {
	margin-top: -24px;
}

article {
	margin: 16px;
}

footer {
	padding: 8px 16px;
	background: royalblue;
	color: white;
	border-top: solid 2px cyan;
}

ol {
	padding-left: 24px;
	position: relative;
}

ol li {
	list-style-type: none!important;
	padding-left: 4px;
}

ol li::after {
	margin-left: 20px;
 	display: block;
 	content: '';
 	position: absolute;
	top: .5em;
	left: -1em;
  	width: 8px;
  	height: 3px;
  	border-left: 2px solid teal;
  	border-bottom: 2px solid teal;
  	-webkit-transform: rotate(-45deg);
  	transform: rotate(-45deg);
}

ol.red li::after {
  	border-left: 2px solid hotpink;
  	border-bottom: 2px solid hotpink;
}

article ul {
	margin-left: -4px;
}

article ul li {
  	position: relative;
	padding-left: 4px;
}
article ul li::after, ul li::before {
  	display: block;
  	content: '';
  	position: absolute;
}
article ul li::after {
  	top: .35em;
  	left: -1.2em;
  	width: 14px;
  	height: 14px;
  	background-color: royalblue;
  	border-radius: 100%;
}
article ul li::before {
  	z-index: 2;
  	top: .625em;
  	left: -.975em;
  	width: 4px;
  	height: 4px;
  	border-right: 1px solid #fff;
  	border-bottom: 1px solid #fff;
  	-webkit-transform: rotate(-45deg);
  	transform: rotate(-45deg);
}
article ul.red li::after {
  	background-color: blueviolet;
}
article ul.green {
	margin-bottom: 8px;
}
article ul.green li::after {
  	background-color: teal;
}

article li:hover {
	background: paleturquoise;
}
article .red li:hover {
	background: peachpuff;
}

nav a {
	text-decoration: none;
}
   
nav li {
    	padding:0px;
    	margin: 8px 0px 0px -16px;
    	position:relative;
    	display: block;
    	padding: 4px 0px 4px 32px;
    	background: mediumblue;
    	color: snow;
    	border-radius:16px 0px 0px 16px;
}
     
nav li:hover {
	background: deepskyblue;
	//color: yellow;
}

nav li:after {
    	content:'';
    	display:block; 
    	position:absolute;
    	width:14px;
    	height: 14px;
    	top:8px;
    	left:8px;
    	background: snow;
    	border-radius: 8px;
}

table {
	border: solid 2px silver;
	margin: 16px;
	width: calc(100% - 32px);
	border-collapse: collapse;
	background-color: lavender;
}

th, td {
    	padding: 2px 16px;
    	border: 1px solid silver;
    	vertical-align: middle;
    	text-align: center;
}

th {
	color: white;
    	border: 1px solid snow;
	background: slateblue;
}

td.left {
	text-align: left;
}

table tr:nth-child(odd) td {
    	background: ghostwhite;
}