@font-face
{
	font-family: Asimov;
	src: url('asimov.ttf');
}
@font-face
{
	font-family: BattleST;
	src: url('BATTLEST.TTF');
}
@font-face
{
	font-family: Digitaldots;
	src: url('enhanced_dot_digital-7.ttf');
}
@font-face
{
	font-family: Candles;
	src: url('candles_.ttf');
}
@font-face
{
	font-family: Gazzarelli;
	src: url('gazzarelli.ttf');
}
@font-face
{
	font-family: Nasa;
	src: url('NASALIZA.TTF');
}
@font-face
{
	font-family: Snowdrft;
	src: url('snowdrft.ttf');
}
body
{
	font-family: Arial, Helvetica, sans-serif; /*{global-font-family}*/
/*	font-family: MaretAdvies, Times, sans-serif; *//*{global-font-family}*/
	color: MidnightBlue;
	background: Snow;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: default;
	font-size: 1em;
}
body a:visited,
body a:hover,
body a:active
{
    color: CornflowerBlue;
    text-decoration: none;
	cursor: pointer;
}
*,
*:after,
*::before 
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h1
{
	color: Navy
}
h2
{
	color: White;
	background: DarkGreen;
}
h3
{
	color: Gold;
	background: RoyalBlue;
}
.input-text
{
	background: LightBlue;
	padding: 4px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px DarkGray;
}
.input-text:focus
{
	background: Azure;
}
.insertedlink 		{ display: inline-block; font-weight: bold; }
.insertedlink:hover { text-decoration: underline; cursor: pointer; }
.leftbar			{ display: inline-block; float: left; }
input
{
	padding: 6px;
	background: Ivory;
	width: 220px;
	max-width: 80%;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px DarkGray;
}
input[type="text"], input[type="email"], input[type="password"]
{ 
	width: 200px;
}
input[type="text"]:focus 
{ 
	background: Azure;
}
input[type="checkbox"], input[type="radio"] 
{
	max-width: 10px;
	margin: 6px;
}
table
{
	background: WhiteSmoke;
	padding: 4px;
	margin: 1px;
	max-width: 100%;
	border-radius" 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px MidnightBlue;
}
td	{ padding: 2px; }
::-webkit-input-placeholder { /* WebKit browsers */
    color: SlateGray; background: Ivory; font-size: 1em; padding: 0px 4px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: SlateGray; background: Ivory; font-size: 1em; padding: 0px 4px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: SlateGray; background: Ivory; font-size: 1em; padding: 0px 4px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: SlateGray; background: Ivory; font-size: 1em; padding: 0px 4px;
}
.clearfix::after 
{
	content: "";
    display: block;
    clear: both;
}
*:focus
{
	outline: none;
	background: LightYellow;
	color: MidnightBlue;
}
.my-select select
{
	max-height: 132px;
/* 	display: none; */
/* 	background: Green!important; */
}
.my-select select 
{ 
	background: YellowGreen; 
	font-type: Arial; 
	font-size: 0.8em;
	position: relative; 
	border-radius" 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px MidnightBlue;
}
.my-select option { border-bottom: 1px solid Black; padding: 4px 0px 4px 6px;}
.my-select option:hover { background: GreenYellow!important; } 
.my-select option:checked { color: GreenYellow!important; } 
.Canvas
{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	display: block;
	min-width: 100%;
	max-width: 100%;
	min-height: 100%;
	max-height: 100%;
	padding: 0px;
	margin: 0px;
/* 	overflow: hidden; */
}
.Systembar
{
	position: absolute;
	top: 0px;
	min-width: 100%;
	max-width: 100%;
	height: 2em;
	font-size: 2em;
	background: CadetBlue;
	color: Chartreuse;
	display: inline;
}
.AppIcon
{
	display: none;
	margin: 2px 4px 2px 10px;
	padding: 4px;
	max-height: 28px;
	max-width: 32px;
	width: 32px;
	border-radius: 5px;
}
.AppIcon:hover	{ cursor: pointer; background: SlateGray; }
.Menu
{
	position: absolute;
	display: inline;
	top: 2em;
	left: 0px;
/* 	min-width: 300px; */
/* 
	bottom: 0px;
	right: 0px;
 */
	background: Snow;
	color: Navy;
	z-index: 900;
}
.MenuItem
{
	font-size: 2em;
	display: inline;
	min-width: 100%;
}
.MenuItem:hover
{
	background: DarkGray;
	cursor: pointer;
}
.Menubutton
{
	background: DarkSlateGray;
	color: Chartreuse;
	display: inline-block;
/*	Top, right, bottom, left */
	margin: 0px 4px 2px 10px;
	max-height: 1.8em;
}
.Menubutton:hover	{ cursor: pointer; }
.Message
{
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 16px;
	min-width: 80%;
	background: Yellow;
	color: Red;
	margin: 1px;
	z-index: 999;
	border: thin solid Black;
	border-radius" 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px MidnightBlue;
}
.Viewport
{
	position: absolute;
	top: 2em;
	bottom: 0px;
	left: 0px;
	right: 0px;
	max-height: 100%;
	max-width: 100%;
	font-size: 1em;
	background: Snow;
	overflow-y: hidden;
	display: block;
}
.Application
{
	position: absolute;
	top: 0px;
	left:0px;
	right: 0px;
	bottom: 0px;
	overflow-y: hidden;
	display: none;
}
.Title
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	font-size: 2em;
	background: DarkOliveGreen;
	color: Gold;
}
.Body
{
	position: absolute;
	top: 38px;
	left: 0px;
	right: 0px;
	bottom: 42px;
	display: block;
	overflow-y: scroll;
	border: thin solid Black;
	border-radius" 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px MidnightBlue;
	table-layout:fixed;
}
.ListTable
{
	position: relative;
	min-width: 300px;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: block;
 	font-size: 0.8em; 
}
.ListTbody		{ min-width: 100%; }
.ListTbody img
{
	max-width: 400px;
	overflow-x: scroll;
}
.Footer
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	font-size: 1.2em;
	background: DarkOliveGreen;
	color: Gold;
}
.List, .Add, .Edit, .Display, .Help
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
/* 	max-height: 100%; */
	overflow-x: auto;
}

.ListTitle
{
	font-size: 1.4em;
	background: DarkOliveGreen;
	color: Gold;
	text-align: center;
}
.ListBody
{
	max-width: 100%;
	overflow-x: auto;
}
.AvatarCol, .AvatarImg, PersonAvatar
{
	max-width: 256px;
	font-size: 0.8em;
}
.Avatar
{
	max-width: 128px;
	display: inline;
	cursor: pointer;
}
.Photos
{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: Snow;
	overflow-y: scroll;
	font-size: 0.8em;
}
.Photo
{
	max-width: 128px;
	max-height: 128px;
	outline: Black solid thin;
	margin: 2px;
}
.PhotoThumb
{
	max-width: 48px;
	max-height: 40px;
/* 	outline: Black solid thin; */
	margin: 0px 0px 0px 3px;
}
.loading
{
	position: absolute;
	top: 300px;
	left: 100px;
	max-width: 128px;
	max-height: 128px;
	z-index: 999;
}
.Page
{
}
/* 
.Page
{
	position: absolute;
	top: 2px;
	left: 2px;
	bottom: 2px;
	right: 2px;
	margin: 2px;
	max-height: 100%;
	max-width: 100%;
	font-size: 1em;
	background: Snow;
}
 */
.HelpList
{
	background: BurlyWood;
	margin: 10px;
	padding: 10px;
	list-style: none;
	box-shadow: 5px 5px 5px MidnightBlue;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
}
.HelpBody
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: block;
	background: PowderBlue;
/* 	margin: 5px; */
	padding: 5px;
	box-shadow: 5px 5px 5px MidnightBlue;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	overflow-y: auto;
}
.Button
{
	font-size: 0.8em;
	width: 128px;
	background: PowderBlue;
	box-shadow: 5px 5px 5px MidnightBlue;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
}
.Button:hover
{
	background: SkyBlue;
	box-shadow: 5px 5px 5px MidnightBlue;
	cursor: pointer;
}
.Button:active
{
	background: DeepSkyBlue;
	box-shadow: 1px 1px 1px MidnightBlue;
}
.Downloadbutton
{
	font-size: 0.8em;
	width: 128px;
	background: PowderBlue;
	line-height: 1em;
	padding: 10px;
	border: Black solid thin;
	box-shadow: 5px 5px 5px MidnightBlue;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
}
.Downloadbutton:hover
{
	background: Gold;
}
.FooterButton
{
	min-height: 1.2em;
	max-height: 1.2em;
	height: 1.2em;
	font-size: 1.2em;
	font-style: oblique;
	display: inline;
	background: DarkOliveGreen;
	color: Gold;
/* 
	padding: 2px 4px 2px 2px;
 */
	margin: 2px 2px 4px 4px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 2px 2px 2px DimGray;
}
.FooterButton:hover
{
	background: YellowGreen;
	cursor: pointer;
	box-shadow: 3px 3px 3px DarkGreen ;
}
.FooterButton:active
{
	margin: 6px 0px 2px 6px;
	box-shadow: 0px 0px 0px Green;
	background: GreenYellow;
}
.Login
{
	max-width: 100%;
}
.loginTable
{
	background: AliceBlue;
	margin: 2px;
	max-width: 98%;
	min-width: 96%;
	border: thin solid Black;
	border-radius" 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px MidnightBlue;
}
thead
{
	background: DarkSlateGray;
	color: White;
	font-weight: bold;
}
.included
{
	max-width: 98%;
	min-width: 98%;
	max-height: 75%;
	background: CornSilk;
	margin: 16px;
	padding: 4px;
	overflow-y: scroll;
	border: thin solid Black;
	border-radius" 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px MidnightBlue;
}
.includewrapper
{
/*	min-height: 800px; */
}
.contextMenu
{
	position: absolute; 
	z-index: 960;
	display: none;
	color: Navy;
	text-align: justify;
	max-width: 98%;
	max-height: 75%;
	background: CornSilk;
	margin: 16px;
	padding: 5px;
	font-size: 1.4em;
	border: thin solid Black;
	border-radius" 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px MidnightBlue;
}
.contextMenu tr
{
	padding: 10px;
}
/* 
.contextMenu tr:hover
{
	background: Red;
	color: Yellow;
}
 */
.contextMenuHead
{
	background: OliveDrab;
	color: Gold;
/* 	font-size: 1.5em; */
}
.googlemap
{
	display: block;
	position: relative;
/* 	top: 10px; */
	left: 0px;
	right: 0px;
/* 
	top: 2em;
	bottom: 2em;
 */
/* 	bottom: 40px; */
/* 	width: 99%; */
/* 	height: calc(100% - (220px)); */
/* 
	height: calc(100% - (520px));
	min-height: 128px;
 */
	height: 70%;
	background: LightBlue;
	margin: 3px;
	padding: 10px;
	resize: both;
	overflow-y: scroll;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	box-shadow: 3px 3px 3px 3px Gray;
}
.resizableImg
{
	resize: both;
	overflow: auto;
}
.eventtable
{
	background: Snow;
 	font-size: 0.8em; 
}
input[type="date"]
{
	min-width: 150px;
	max-width: 150px;
}
.eventdate
{
	min-width: 120px;
	max-width: 120px;
}
.eventtime
{
	min-width: 90px;
	max-width: 90px;
}
.eventname
{
	min-width: 100px;
	max-width: 140px;
}
.spandays
{
	background: CornflowerBlue;
}
.votedate, .voted
{
	color: DarkGreen;
}
.multiple
{
	background: SteelBlue;
	color: White;
}
.choice
{
	background: DarkOliveGreen;
	color: Gold;
}
.choice2
{
	background: DarkKhaki;
	color: Navy;
}
.inputField		{ color: RoyalBlue; }
.insertions		{ max-width: 40px; }
.house, .extra	{ max-width: 60px; }
.zipcode		{ max-width: 64px; }
.oddRow
{
	background: LightSteelBlue;
}
.oddRow:hover
{
	background: Tan;
}
.evenRow
{
	background: LightBlue; 
}
.evenRow:hover
{
	background: Tan;
}
.oddRowOddColumn
{
	background: Lavender;
}
.oddRowEvenColumn
{
	background: PowderBlue;
}
.evenRowOddColumn
{
	background: LightSkyBlue; 
}
.evenRowEvenColumn
{
	background: SkyBlue; 
}
.none	{ min-width: 64px; max-height: 1em; }
.AvatarCol		{ display: none; }
.PersonAvatar	{ display: block; }
.EditorHead		{ display: inline; font-size: 0.6em; }

@media screen and (min-width: 400px)
/* @media screen and (min-width: 768px) */
/* @media screen and (min-width: 1600px) */
{
	input[type="text"], input[type="email"], input[type="password"] 	{ max-width: 100%; }
	.Banner				{ display: block; }
	.Login				{ width: 100%; }
	.loginTable tr		{ width: 100%; margin: 4px; }
	.included
	{
		max-width: 90%;
		min-width: 90%;
		max-height: 75%;
		margin: 16px;
		padding: 4px;
	}
	.Page
	{
		margin: 4px;
		padding: 4px;
	}
	.AppIcon
	{
		display: inline;
	}
	.Menubutton
	{
		display: none;
	}
	.ListTable	{ font-size: 1em; }
	.AvatarCol	{ display: inline; }
	.EditorHead	{ display: none; }
	.eventname
	{
		min-width: 184px;
		max-width: 184px;
	}
}





.fileName:hover { background: DarkSlateGray; color: White; }
#filePopup
{
	position: absolute; 
/*	top: 50px;	*/
	z-index: 920;
	display: none;
	text-align: justify;
	overflow-y: scroll;
	color: MidnightBlue;
	background: WhiteSmoke ; 
	outline: Black solid thin;
	padding: 8px;
	box-shadow: 5px 5px 5px Gray;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-overflow-scrolling: touch;
}
#filePopup td:hover { background: LightGray; color: Red; }

/* 
.ViewportBody
{
	position: absolute;
	top: 33px;
	left: 0px;
	right: 0px;
	bottom: 24px;
	padding: 0px 2px 2px 2px;
	display: block;
	overflow-y: scroll;
	font-size: 0.9em;
	background: White;
	color: RoyalBlue;
	-webkit-overflow-scrolling: touch;
}
.ViewportBody:after
{
	clear: both;
}
.ViewportFooter
{
	height: 20px;
	width: 100%;
	font-size: 0.7em;
	display: inline-block;
	padding: 4px;
	position: absolute;
	bottom: 0px;
	background: RoyalBlue;
	color: White;
}
 */

/***	Einde Viewport with Head and Menu  ***/

.ruiter:hover
{
	background: Blue;
	text-decoration: none;
	cursor: pointer;
}
.ruiter
{
	display: inline;
	padding: 2px 10px 2px 10px;
	background: PowderBlue; 
	color: DimGray;
	border-top: thin solid Gray; 
	border-left: thin solid Gray; 
	border-right: thin solid Gray;
	border-bottom-style: hidden;
}
.frontruiter
{
	display: inline;
	padding: 2px 10px 2px 10px;
	background: LightSteelBlue ; 
	color: Black;	
	border-top: thin solid Black; 
	border-left: thin solid Black; 
	border-right: thin solid Black;
	border-bottom-style: hidden;
}
.ruitermap
{
	 background: LightSteelBlue ; 
	 border: thin solid LightSteelBlue ;
}
.colorPick
{
	position: relative;
	top: 100%;
	left: 20px;
	color: Yellow;
}
.colorPick td:hover
{
	color: Black;
}	
label[for]
{
	font-size: 1em;
	color: RoyalBlue;
}
