@import url('//fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=auto');
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

*:not(td) { padding:0px; margin:0px; }
html{min-height:100%;}
body{min-height:100%;}
html, body {-webkit-box-sizing: border-box;-moz-box-sizing:border-box;box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body { margin: 0; background-color: #d5d9d0;font-family: 'Open sans', sans-serif; font-size:18px; color:black;}
H1 {font-size: 2.5em;}
H2 {font-size: 1.8em;}
H3 {font-size: 1.5em;}
H4 {font-size: 1.2em;}

H1, H2, H3, H4 {margin-bottom:10px; clear:both;}
H2, H3, H4 {margin-top:20px;}

p {margin-bottom:15px;}
ul {padding-left: 40px; margin:10px 0px 20px 0px;}

/* MOBILE VS NOT MOBILE */

.mobileOnly { display:block; }
.desktopOnly { display:none; }

/* HYPERLINKS */
a, a:visited {color:rgb(0,85,79); text-decoration:none; cursor:pointer;}
a:hover {color:#000; text-decoration:underline !Important;}

/* PAGEHEADER */
#pageheader {	width:100%; position: relative; cursor:pointer;}
#pageheader img { width:100%;	}

/* Menubutton for mobile phones */
#mobilemenubutton { position: absolute; top: 50%; right: 0px; transform: translate(0%, -50%); margin-right:1%; border:3px solid white; padding:4px; border-radius:8px;}
#mobilemenubutton i {color:white; font-size:25px;}
#menu, #desktopmenubar { display:none; }

/* Menubutton for ipads and desktops*/
#desktopmenubar { background-color:black; height:45px; color:white; position:relative;}
#desktopmenubar > div { max-width:1024px; width:100%;display:block; cursor:pointer;}
#desktopmenubar i { margin-left:1%;  padding: 4px; margin-top: 8px; }

/* Menu */
#menu ul {list-style-type: none;  margin: 0;  padding: 0; background-color:black; max-width:1024px; margin:auto;}
#menu ul li {color:white; font-weight:bold; height: 45px; padding: 8px 15px 0px 10px;border-top:1px solid gray; cursor:pointer;}
#menu ul li:hover {background-color:gray;color:black;}

#menu img {max-height:30px;vertical-align:middle;margin-right:10px;}

/* Main area */
#main {margin: 5px; max-width:1024px; background-color:white; padding:10px 10px 60px 10px; border-radius:8px;}
#main img {max-width:100%;}

/* images in main  */

img.largeThumbnail { width:46%; margin: 4px 1%; height:120px; object-fit: cover; position:relative;}

.thumbnailcontainer { width:46%; margin: 8px 1%; position:relative; display:inline-block; cursor:pointer; }
.imgThumbnail {height:120px; object-fit: cover; width:100%;}
.thumbnailtext {position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, 0px); text-align:center; font-weight:normal;font-size:0.5em;color:white; width:100%; word-wrap:break-word;background-color:rgba(0,0,0,0.85); padding:7px 0px;}

/* LIST */
.list {width:100%;table-layout:fixed; }
.list tr.oddEven:nth-of-type(odd) {background-color:rgba(0,0,0,0.05);}
.list tr:hover {background-color:rgba(0,0,0,0.15) !Important;}
.list td {white-space:nowrap;overflow:hidden;  text-overflow: ellipsis; vertical-align:center;height:45px;padding:0px 4px;}
td.dates {text-align:right;width:35%;}
label {display:inline-block;padding:10px 0px;}


#footer {margin-top:30px; width:100%; text-align:center; background-color:gray; padding-top:10px; padding-bottom: 20px;}


/* FORM ELEMENTS */
button, input[type="button"], input[type="submit"], .clButton {display: inline-block; height:45px;cursor:pointer;background-color:#002f22;color:white;border-top:2px solid #005840; border-right:2px solid black; border-bottom:2px solid black; border-left:2px solid #005840; padding: 4px 20px 4px 20px;font-weight:700;border-radius:3px; font-family:inherit; font-size: inherit;}
input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="file"], input[type="time"], input[type="number"], input[type="url"], textarea, select {font-weight:500;border:1px solid black; padding: 4px; width:100%; height:50px; font-family:inherit; font-size: inherit;}
input[type="number"] {width:auto;}
input[type="file"] {border:0px;}
label {cursor:pointer; }
input:disabled, select:disabled { opacity:0.5; }
.btnCancel {background-color:rgb(102,0,0) !Important; border-top:2px solid rgb(153,0,0) !Important; border-right:2px solid rgb(51,0,0) !Important; border-bottom:2px solid rgb(51,0,0) !Important; border-left:2px solid rgb(153,0,0) !Important;} 
[required] {background-image: url('/images/icon_asterisk_64x64.png');background-repeat: no-repeat;background-position: right 14px center;background-size:8px;padding-right:10px;}



/* RESPONSIVE */
@media only screen and (min-width: 768px) { /* iPad portrait */
	
	.mobileOnly { display:none; }
	.desktopOnly { display:block; }


	#menu, #mobilemenubutton { display:none; }
	#desktopmenubar { display:block; }
	#main {margin: 5px auto; }
	
	.thumbnailcontainer { width:23%; }
	.imgThumbnail {height:150px; }
	.thumbnailtext {font-size:0.7em;}


  
}

@media only screen and (min-width: 1024px) { /* iPad portrait */

	#desktopmenubar > div { margin: auto;}
	#main {padding-left: 3%; padding-right: 3%;}
	button, input[type="button"], input[type="submit"], .clButton {height:auto;}
	input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="file"], input[type="time"], input[type="number"], input[type="url"], textarea, select {height:auto;}
	label {padding:0px;}
	
	img.homepage { width:14%; margin: 4px 1%; height:120px;object-fit: cover;}
	

}


@media only screen and (min-width: 1280px) { /* iPad portrait */

}

@media only screen and (min-width: 1920px) { /* iPad portrait */

#desktopmenubar > div {max-width:1240px; }
#menu ul { max-width:1240px; }
#main {margin: 5px auto; max-width:1240px; padding-left: 4%; padding-right: 4%;}
  
}