@font-face {
	font-family:'TitleFont';
	src:url('../fnt/artnouveau.ttf?14663396') format('truetype');
	font-weight:normal; font-style:normal;
}

html, body { height: 100%; margin: 0; }
html { heightbox-sizing:border-box; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; overflow-x:hidden }
body { margin:0; font: 13px Verdana, sans-serif; line-height:1.4; overflow: hidden }
#wrapper { min-height: 100% }
*,*:before, *:after { box-sizing: inherit }
h1 { font-size: 36px }
h2 { font-size: 30px }
h3 { font-size: 24px }
h4 { font-size: 20px }
h5 { font-size: 18px }
h6 { font-size: 16px }
h1, h2, h3, h4, h5, h6 { font-family: Helvetica,Arial,sans-serif; font-weight: 400; margin: 10px 0 }

hr {border:0;border-top:1px solid #eee;margin:20px 0 }
img { vertical-align:middle }
a { color:inherit }

red { color:red }
.tf { font-family:TitleFont; text-rendering:auto; webkit-font-smoothing:antialiased; moz-osx-font-smoothing:grayscale; }
.fa { font-family:FontAwesome; font-size:inherit; text-rendering:auto; webkit-font-smoothing:antialiased; moz-osx-font-smoothing:grayscale; }
.shadow { text-shadow: 1px 1px 1px orange, -1px -1px 1px orange, -1px 1px 1px orange, 1px -1px 1px orange; }

#header { z-index: 4; position: fixed; top: 0; width:100%; height: 40px; overflow: hidden; font: 250% TitleFont; text-rendering:auto; webkit-font-smoothing:antialiased; moz-osx-font-smoothing:grayscale; background: #BBFF99; padding: 0 0.5em 0 0.5em; }
#menubar { position: fixed; height: 40px; top: 0; right: 0; margin-top: 21px; font-size: 40%; text-rendering:auto; webkit-font-smoothing:antialiased; moz-osx-font-smoothing:grayscale; }
.menu, .menu_selected { display: inline; height: 24px; border-width: 1px; border-style: solid; border-radius: 8px 0 8px 0; padding: 3px 10px 3px 10px; }
.menuoptions { display: none; position: fixed; top: 40px; right: 0; margin: 0; padding: 5px; border: 0 none; text-align: right; background: #BBFF99; }
.submenu { display: block; height: 16px; margin: 0; padding: 5px; background: #BBFF99; color: #445533; white-space: nowrap; }
.submenu:last-child { padding-bottom: 10px}
.submenu:hover { background: #DDFFC0; }
.menuoptions:hover .submenu { display: block; }
.menu { color: #445533; border-color: #88AA66; }
.menu_selected { color: black; background: white; border-color: black; }
.menu_selected:hover, .menu:hover { border-color: #445533 ; background: #CCFFAA; color: black }

#aux, #main {
	top: 40px; bottom: 15px; left: 0; padding: 20px;
}
#aux {
	position: fixed;
	z-index: 2;
	opacity: 1.0;
	background: #BBFF99; 
}
#aux.hover {
	transition: opacity 1.5s;
	opacity: 1.0;
}
#aux.hidden {
	transition: opacity 1.5s;
	width: 0;
	opacity: 0.2;
}
#aux.hidden * {
	width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
}
#aux input, #aux select {
	margin-bottom: 10px;
}
#aux input[type=button] {
	display: block; width: 100px; padding: 10px 20px; background: #DDFFBB; cursor: pointer; -webkit-border-radius: 5px; border-radius: 5px;
}
#aux.hidden input {
	display: none;
}
#main {
	position: absolute; 
	z-index: 1; 
	right: 0;
	padding-left: 60px;
}
#main table.main {
	display: inline-block;
	margin-right: 40px;
}
#main h2 { text-align:center }
table.classification { display: inline-block; margin: 0; padding: 0; border: gray 1px dotted; border-spacing: 0; border-radius: 10px }
table.classification th { padding: 0 5px; background: #CCFFFF; }
table.classification td { padding: 0 5px 0 10px; background: #E0FFFF; }
tr:first-child th { border-top-left-radius: 10px }
tr:first-child td { border-top-right-radius: 10px }
tr:last-child th { border-bottom-left-radius: 10px }
tr:last-child td { border-bottom-right-radius: 10px }

#footer { z-index: 3; position: fixed; bottom: 0; width: 100%; height: 15px; text-align: center; background: #BBFF99; font-size: 75%; }

#article {
	z-index: 10000; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #EEFFFF; overflow: scroll;
	padding: 20px;
}
#article h2 { text-align: center; }
.mask, .slideshowMask { z-index: 900; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0; padding: 0; background: black; opacity: 1.0; }
.slideshowMask { display: flex; align-items: center; justify-content: center; }
#previousImage, #nextImage { z-index:10000; position: fixed; top: 0; padding: 100px 10px; background: black; color: white }
#previousImage { left: 0 }
#nextImage { right: 0 }
iframe { z-index: 1000; width:100%; height:100%; position: fixed; border: none;  }
#close { z-index: 1100; position: fixed; top: 0; right: 0; height: 48px; width: 48px; background-color: #FF8800; background-image: url(../img/close48.png); cursor: pointer; border-radius: 0 }

#articleContent{
	margin: 20px 0 0 0;
	border : cyan 1px solid;
	border-radius: 20px;
	padding: 20px;
}

#articleContent h4 { margin-top: 40px }

highlight { display: block; width: 75%; margin: 10px auto 40px auto; border: #008888 3px ridge;
	border-radius: 20px; padding: 20px; text-align: center; font-size: 12pt; background: white }

select.taxon { display: block; width: 95%; }

img { border-radius: 10px }

th { text-align:left; vertical-align: top; padding: 5px }
td { text-align:left; padding-left: 5px 10px}

ol,ul { margin: 0 }

cn { font-weight: bold }

div.comment, div.highlight { margin: 20px }
div.highlight { border: #FF8800 1px dotted; border-radius: 10px; padding: 10px; background: #FFFFDD; }

img.responsive { max-width: 100%; height: auto }

@media (max-width:640px){
	#header { height: 64px }
	#menubar { top: 45px; left:0; right: 0; margin-top: 0; text-align: left }
	#aux, #main { top: 64px }
	a.mainImage { display: block; width: 100%; text-align: center }
	a.image { position: static }
	.menuoptions { top: 64px; left: 0; right: 0; text-align: center; }
}