* {
margin: 0;
padding: 0;
border: 0;
}
body {
color: #000000;
font: 100.01% sans-serif;
line-height: 1.45em;
background-image: url(/images/bg/bg_left.gif), url(/images/bg/bg_right.gif);
background-position: left top, right top;
background-repeat: repeat-y, repeat-y;
background-color: #6699CC;
padding: 5px 40px 10px 40px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h2{
font-size: 1.4em;
}
table, tr, td, th {
padding: 3px;
border: 1px solid #669999;
border-collapse: collapse;
}
table {
width: 100%;
margin: 15px 0 15px 0;
}
/* Header / Footer */
#header, #footer {
background-color: #000033;
text-align:center;
border-radius: 10pt;
color: #FF0;
margin: 2px auto 10px auto;
box-shadow: 5px 5px 2px #033;
}
#header {
padding: 10px 0 10px 2px;
max-width: 1150px;
}
#footer {
max-width: 950px;
padding: 7px 5px 7px 5px; 
}
#header a, #header a:hover, #footer a, #footer a:hover {
color: #FF0;
}
#header ul, #footer ul {
padding: 5px 0 5px 5px;
margin: 0;
list-style-type: none;
line-height: 1.5em;
}
#header ul li,#footer ul li {
display: inline;
}
#header li, #footer li {
border-right: thin solid yellow;
padding-right: 5px;
}
#header img {
max-width: 100%;
height: auto;
margin: 2px auto 2px auto;
}
/* Content area */
#bodybox {
width:100%;
}
#body {
width: 720px;
background: #FFF;
padding:20px;
margin: 15px auto 10px auto;
border-radius: 10px;
border: 1px solid #000033;
background-color: #FFF;
box-shadow: 6px 6px 2px #033;
}
#body h1,
#bodybox h1 {
font-size: x-large;
color: #004747;
padding: 0 0 5px 0;
line-height: 1.3em
}
#body h2 {
font-size: large;
color: #003366;
padding: 5px 0 4px 0
}
#body h3 {
font-size: medium;
color: #005C5C;
padding: 0
}
#body h4 {
font-size: medium;
color: #336699;
padding: 0
}
#body p,
#body td,
#body th,
#body dl,
#body dd {
margin: 0px 10px 10px 0px;
line-height: 1.45em;
}
#body li {
line-height: 1.37em;
}
#body p,
#body ul,
#body ol,
#body li,
#body dl,
#body h1,
#body h2,
#body h3,
#body h4 {
max-width: 650px;
}
#body hr { 
height:5px;
border-radius: 4px;
border: 1px solid #69C;
background:#066;
margin: 15px 0 15px 0;
}
#body blockquote {
background-color: #FFFFCC;
margin: 1.5em .5em 1.5em .5em;
padding: 1em;
border-radius: 5px;
border-left: 15px solid #003300;
box-shadow: 11px 10px 0px #eee;
line-height: 1.5em;
}
#body li {
margin: 0px 0px 5px 30px;
line-height: 1.34em
}
#body dl {
margin: 0px 0px 10px 10px;
line-height: 130%;
font-weight: bold
}
#body dt {
margin: 10px 0px 5px 10px;
font-weight: bold
}
#body dd {
margin: 0px 0px 5px 10px;
font-weight: normal
}
#body img, table {
margin: 6px 0px 6px 0px
}
#index table,
#index tr,
#index td {
padding: 3px;
border: 1px solid #669999;
border-collapse: collapse
}
#index table {
width: 100%;
margin: 10px 0 10px 0
}
#index td {
text-align: center;
width:50%;
}
#unicode th, #unicode th a {
background: #033;
color: #FF0;
font-weight: bold;
text-align: left;
}
#unicode tr:nth-of-type(odd) {
background: #FFC;
}
#alphabet td {
text-align: center;
}
#summary {
width: 250px;
float: right;
border: 1px solid #060;
border-radius: 6px;
padding: 4px;
background-color: #FFA;
margin: 10px 0 15px 20px;
font-size: 80%
}
#summary h3,
#summary ul,
#summary li {
width: auto;
padding: 0;
margin: 0
}
#summary ul {
list-style-type: none
}
.nav ul,
.navmain ul,
.contents ul {
padding: 0;
margin: 0 0 15px 0;
list-style-type: none;
line-height: 1.7em
}
.nav {
margin: 10px 0 10px 0
}
.nav ul,
.navmain ul {
padding: 0;
margin: 0 0 10px 0;
list-style-type: none;
line-height: 1.7em
}
.nav ul li,
.navmain ul li {
display: inline
}
.nav li a {
border-right: thin solid black;
padding-right: 5px
}
nav, .nav {
display: block;
}
nav, .nav ul {
  list-style-type: none;
  margin: 10px 0 10px 0;
  padding: 0;
}
nav li, .nav li {
display: inline-block;
}
nav a, .nav a {
 font-size: large;
 display: block;
  text-align: center;
  padding: 0;
}
nav select {
display: none;
}
.list-inline {
    list-style: none;
    padding: 0;
}
.list-inline li a {
padding: 5px 5px 5px 0; 
}
.list-inline > li {
    display: inline;
}
.list-middot > li:not(:last-child)::after {
    content: "\007C";
}
nav select {
display: none;
}
#body img,
embed,
object,
video,
table {
max-width: 100%;
height: auto;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.leftfloat {
float: left;
margin:0 15px 10px 0;
}
.rightfloat {
float: right;
margin:0 0 10px 10px;
}
#langlinks {
width: 130px;
border: solid 1px #000;
float: right;
padding: 3px;
background-color: #FFC;
text-align: center
}
#books img {
margin: 0 20px 5px 0
}
.info {
background: #FFFFCC;
border: 1px solid #066;
border-radius: 3px;
padding: 6px;
margin: 5px 5px 5px 0;
}
.info a {
padding: 0 0 5px 0;
}
#books img {
margin: 0 20px 20px 0;
float: left;
}
.dropcap {
font-size: x-large;
font-weight: bold;
float: left;
margin: 0px 10px 0px 0px;
color: #006
}
#list2 { width:100%; }
#list2 ol { font-family:serif; font-size:1.3em; }
#list2 ol li { }
#list2 ol li p { padding: 0 0 0 8px; font-family: sans-serif; font-style: normal; font-size:medium; }
#list2 ol li p em { display:block; }
#list2 ol {list-style-type: upper-alpha;}

#map {
margin: 10px 0 10px 0;
frameborder: 0;
marginheight: 0;
marginwidth: 0
}
#flex table { 
width: 95%; 
border-collapse: collapse; 
}
#flex tr:nth-of-type(odd) { 
background: #FFC; 
}
#flex th { 
background: #033; 
color: #FF0;
font-weight: bold; 
}
#flex th a { 
color: #FF0;
font-weight: bold; 
}
#flex td, #flex th { 
padding: 3px; 
text-align: left;
border: 1px solid #699; 
}
.intrinsic-container iframe {
width: 560px;
height: 315px;
}

/* Ads */
.flex-container  {
display: flex;
flex-direction: row;
float:none;
position:static;
margin:10px 0 0 0;
}
.flex-container img {
width:100%;
max-width:175px;
height:auto;
}

#footerads {
  border: 1px solid #000033;
  border-radius: 6pt;
  background-color: #CCFFCC;
  padding: 10px;
 margin: 5px auto 15px auto;
  max-width: 900px;
text-align:center;
box-shadow: 6px 6px 2px #033;
}
#footerads ul {
  list-style-type: none;
}
#footerads ul li {
  display: inline;
line-height:1.5em;
}
#footerads li {
  border-right: thin solid black;
  padding-right: 4px;
}
#footerads img {
  float: right;
margin: 0 0 0 10px;
}
#footerads a {
text-decoration:none;
}
#footerads a:hover {
text-decoration:underline;
}

/*Styles for smaller screens */
@media only screen and (max-width: 870px) {
body {
background: #6699CC;
padding:1px;
}
}
@media only screen and (max-width: 760px) {
table {
width:98%;
}
#header, #footer {
width: 100%;
margin: 5px 0 5px 0;
}
#body {
padding:10px;
margin: 3px;
width: 98%; 
}
#body p,
#body li,
#footerads,
#index table,
#mutations table,
.numbers table,
#scroll table,
#alphabet table,
#unicode table,
#langlinks,
.info {
width: 95%
}
.navmain ul {
list-style-type: disc;
margin-left: 0px;
padding-left: 10px;
line-height: 1.7em
}
.navmain li {
border: 0
}
nav ul { display: none; }
nav select { display: inline-block; }
#footer ul {
list-style-type: disc;
margin-left: 0px;
width: 90%
}
.contents {
    margin: 0 0 10px 0
}
#footer ul {
list-style-type: disc;
margin-left: 0px;
width: 90%
}
#summary {
width: 95%;
float: none;
margin: 10px 0 10px 0;
}
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}
.icons {
float: none;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}
.intrinsic-container iframe {
max-width: 100%;
max-height: 100%;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px){

/* Force table to not be like tables anymore */
#flex table, #flex thead, #flex tbody, #flex th, #flex td, #flex tr { 
display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
#flex thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
#flex tr {
 border: 1px solid #699;
}
#flex td { 
/* Behavelike a "row" */
border: none;
border-bottom: 1px solid #CCC; 
position: relative;
padding-left: 50%; 
}
#flex td:before { 
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
white-space: nowrap;
font-weight: bold; 
}
}
@media print {
#footer,
#footerads,
.blurb,
#skyscraper,
#leftlinks,
#paidlinks,
#rightlinks,
.chinese,
#headlinks {
display: none;
}
#body p,
#body li,
#body,
#footerads,
#index table,
#mutations table,
.numbers table,
#scroll table,
#alphabet table,
#unicode table,
#langlinks,
#list2 {
width: 100%
}
#header {
width: 100%;
padding: 2px;
background-color: #FFF;
font-family: Sans-Serif;
text-align: center;
}
#header img {
display: none;
}
#body {
font-size: 12px;
margin: 0 0 0 10px;
}
p a[href^="#"]:after {
display: none;
}
#footerbox {
background-color: #FFF;
}
.copyright,
.copyright a {
color: #000;
text-decoration: none;
}
}