*
{ 
	font-size: 1.1em;
	hyphens: auto;
}

html,body
{
	width: 95%;
	height: 95%;
}

body
{ 
	font: 1em/1.4 Georgia, Serif;
	color: black;
	background-color: #596BC7;
}
H1, H2, H3, H4
{
	color: #3C361F;
	background-color: #99a5cc;
	text-align: center;
	border-left: 0.2em solid #3a674e;
	border-right: 0.2em solid #3a674e;
	border-radius: 0.5em;
}

div.content
{
	position: absolute;
}

div.paragraph
{
	position: relative;
/*	width: 80%; */
}
.insidephoto
{
	position: absolute;
	top: 30px;
	left: 405px;
	border-bottom: 0.2em solid red;
}

div.saved
{
	color: #63AC63;
	background-color: #63AC63;
	animation-name: saved;
	animation-duration: 4s;
	text-align: center;
	font-size: 2em;
}
div.up
{
	position: relative;
}

p.links
{
	text-align: center;
}

a:link, a:visited 
{
	color: white;
}

a:hover, a:active
{
	background-color: brown;
}

.insidemap a:link, a:visited 
{
	background-color: #f44336;
	color: white;
/*	padding: 14px 25px; adjust for phone */
	margin: 0.1em;
	text-align: center;
	text-decoration: none;
/*	display: inline-block; */
}

.insidemap a:hover, a:active
{
	background-color: brown;
}

.linksinmap a:link, a:visited 
{
	background-color: #f44336;
	color: white;
	padding: 1px 1px; /* adjust for phone */
	margin: 0.1em;
	text-decoration: none;
	display: inline-block;
}

.linksinmap a:hover, a:active
{
	background-color: brown;
}

.halfsize
{
	font-size: 50%;
}	

@keyframes saved
{
0%   {background-color: #63AC63;}
50%  {background-color: #1C7F50;}
100%  {background-color: #63AC63;}
}

.maxwidth10 img
{
	max-width: 10%;
	vertical-align: middle;
}
img.maxwidth
{
	position: relative;
	width: auto;
	float: none;
	height: auto;
	opacity: 0.6;
	box-shadow: 0 0 5px 2px rgba(0, 140, 186, 0.5);
}
img.floatright
{
	float: right;
	margin: 10px;
	opacity: 0.8;
}
img.floatleft
{
	float: left;
	margin: 10px;
	opacity: 0.6;
}

p
{
/*	margin: 20px 20px; */
	margin: 0.5em 0.5em;
	text-align: justify;
}

button.form, button
{
    background-color: #1C7F50;
    border: none;
    color: white;
/*    padding: 15px 32px; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
/*    margin: 40px 20px; no need */
    cursor: pointer;
}

input[type='checkbox']
{
	position: relative;
	background: none;
	height: 1em;
	width: 1em;
	float: right;
}

label
{
display: inline;
}

div.esoxh
{
	margin: 1.5em;
}
div.max
{
	width: 100%;
}
div.checkbox
{
	font-size: 1em;
	background: #66bf66;
	margin: -0.5em;
	padding: 0.5em;
}
div.configup
{
	font-size: 1em;
}

span.live
{
/*	background: #66aa66; */
	color: #60ef30;
}
span
{
	color: #3C361F;
	background-color: #99a5cc;
}
span.ok
{
	color: #003358;
}
span.old
{
	color: #993300;
}
span.josm
{
	font-size: 75%;
}
.right
{
	float: right;
p
.topright
{
	position: absolute;
	top: 0px;
	right: 0;
	width: 10%;
	height: 100px;
}

	/* 
	Generic Styling, for Desktops/Laptops 
	table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* I don't use this
	 */
	.footnote
	{	
		margin-bottom: auto;
		margin-top: 0%;
		margin-left: auto;
		margin-right: 0%;
		border: none !important;
		background: #44bb33;
	}	
	/* Zebra striping */
	tr:nth-of-type(odd) { 
		background: #66aa33;
	}
	th { 
		background: #333; 
		color: white; 
		font-weight: bold; 
		text-align: center;
	}
	td, th { 
		font-size: 1em;
/*		padding: 6px; */
		border: 1px solid #111; 
		text-align: left; 
	}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

BUG, works only with Firefox.
*/
@media 
only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
/*
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi)
*/
{
	*
	{
		font-size: 1em;
	}
	.insidephoto
	{
		left: 0px;
		top: 0px;
		padding: 1em;
		margin-bottom: 1em;
		position: relative;
		opacity: 1;
	}
	p
	{ 
/*		background-color: #A2D9A3; */
		font-size: 1em;
		z-index: +4;
	}
	tr
	{
		font-size: 3em;
	}
	legend
	{
		font-size: 4em;
	}

	button
	{
		font-size: 1em;
	}
	.max
	{
		width: 100px;	
	}
	.maxwidth10 img
	{
		max-width: 30%;
		vertical-align: middle;
	}
	img.maxwidth
	{
		width: 100%;
	}
	span.josm
	{
		font-size: 75%;
	}
	div.checkbox
	{
		font-size: 3.5em;
		margin: 0.2em;
	}
	div.configup
	{
		font-size: 3em;
	}
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
{
	p
	{ 
		font-size: 1em;
		margin: 0px;
		background: #fff;
	}
}

/* ipad-1,2 */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
and (orientation: portrait)
{
	*
	{
		font-size: 1em;
	}

}
