html, body{
  height: 100%;
  margin: 0px;
  padding: 0px;
}

img{
	border: 0px;
}

body{
  background-image: url("images/background.jpg") ;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 1920px auto;
  background-color: #465d56;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1em;
}

a{
	color: #056623;
}

h3{
	margin-bottom:5px;
	color: #22302d;
	font-family: station;
	text-transform: uppercase;
}

a:hover{
	color: #ffa723;
	text-decoration: underline;
}

@font-face {
    font-family: 'station';
    src: url('fonts/station-webfont.eot');
    src: url('fonts/station-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/station-webfont.ttf') format('truetype'),
         url('fonts/station-webfont.svg#stationmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

#sticky_footer_container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-bottom: -40px; /* hoogte footer */
	background-color: #91AE9F;
}

#javascript_disabled{
  background-repeat: no-repeat;
  background-position: 10px center;
  background-color: #FFBABA;
  background-image: url('images/error.png');
  color: #D8000C;
  padding: 20px 0px 20px 0px;
  font-family: Arial;
  text-align: center;
  border: #D8000C solid 2px;
}

#maintenance{
	box-sizing: border-box;
	background-image: url("images/animated_gears.gif"), url("images/maintenance_background.png");
	background-repeat: no-repeat, repeat;
	background-size: 140px auto, auto auto;
	border: 4px solid #FF6600;
	color: #451C00;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	padding: 28px 60px;
	text-align: center;
	background-position: -5px -50px, center center;
}

#maintenance_done{
	box-sizing: border-box;
	background-image: url('images/check.png');
	background-repeat: no-repeat;
	background-position: 10px center;
	border: 4px solid #2a8983;
	background-color: #ccfffd;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	padding: 28px 60px;
	text-align: center;
}

#server_message{
	box-sizing: border-box;
	background-image: url('images/info.png');
	background-repeat: no-repeat;
	background-position: 10px center;
	border: 4px solid #3f679d;
	background-color: #d2e0f4;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	padding: 28px 60px;
	text-align: center;
}

#menu{
  text-align: center;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 0.9em;
  color: #333333;
  margin-bottom:3px;
  padding: 0px 20px
}

#menu a{
	color: inherit;
	font-variant: normal;
	text-decoration: none;
	margin-left: 20px;
	display: inline-block;
}

#menu .menuicon{
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-image: url("images/header_incons-v1.6.png");
	background-position: top left;
	position: relative;
	top: -1px;
}

#menu .menuicon.home{
	background-position: -64px 0px;
}
#menu .menuicon.info{
	background-position: -32px 0px;
}
#menu .menuicon.wachtrij{
	background-position: -48px 0px;
}
#menu .menuicon.community{
	background-position: 0px 0px;
}
#menu .menuicon.donations{
	background-position: -96px 0px;
}
#menu .menuicon.login{
	background-position: -16px 0px;
}
#menu .menuicon.user{
	background-position: -112px 0px;
}


#menu a:hover{
  /*border-top: 1px dashed #ea8d00;*/
  color: inherit;
  text-decoration: underline;
}

#menu a:hover .menuicon{
	background-position-y: 16px;
}

#login-popup table, #login-popup table button, #login-popup table input{
	width:100%;
}

#login-popup table input, #login-popup table button{
	padding: 5px 10px;
	box-sizing: border-box;
	border: 2px solid #1d2827;
}

#login-popup table button{
	min-width:100px;
	color:white;
	background-color: #426655;
}

#login-popup table button:hover:not(.disabled){
	cursor:pointer;
	background-color: #629e82;
}

input:invalid, input:-moz-ui-invalid {
    border-color: red !important;
    outline: none;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

#login-popup table button:active:not(.disabled){
	border-color:white;
}

button.disabled{
	cursor: not-allowed !important;
}

#login-popup .message{
	margin-top: 15px;
}

#header{
  background-image:url("images/header_background.png");
  height: 100px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
}

#header div{
	background-image: url("images/logo_downloadgemist_v3.png");
	background-position: 0px -38px;
	background-repeat: no-repeat;
	color: rgb(250, 250, 250);
	font-family: station;
	font-size: 30px;
	font-variant: small-caps;
	padding-left: 250px;
	padding-top: 28px;
	text-overflow: clip;
	white-space: nowrap;
	max-width: 800px;
	box-sizing: border-box;
	font-weight: bold;
	height: 100%;
	box-sizing: border-box;
}

.center_content{
  text-align: center;
}

.center_me{
	margin-left:auto;
	margin-right:auto;
}

.break-words{
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	
	-ms-word-break: break-all;
}

#body{
	padding-bottom:40px;
	padding: 0px 20px;
	max-width: 1000px;
	margin-bottom: 30px;
}

#body:after{
	content:"";
	display:block;
	height:40px;
}

#footer{
	font-family: "Trebuchet MS", Helvetica, sans-serif;
  clear: both;
  height: 32px;
  padding-top:2px;
  padding-bottom: 3px;
  width: 100%;
  max-width: 800px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-variant: small-caps;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  text-align: center;
}

/* mobile CSS */
@media all and (max-width: 800px) {
	#body{
		font-size: 0.9em;
		padding: 0px 15px;
	}
	
	
	#menu{
		font-size: 0.9em;
	}
	
	#sticky_footer_container > div{
		min-width: 0;
		width: auto;
	}
	
	#header div{
		text-overflow: initial;
		white-space: normal;
		width: initial;
		padding-top: 0.2em;
		min-width: initial;
	}
	
	#menu a{
		margin-left: 5px;
	}
	
	ul{
		padding-left: 15px;
	}
}

@media all and (max-width: 535px) {
	#body{
		padding: 0px 10px;
	}
	
	#header div{
		color: rgba(0,0,0,0);
		font-size: 0em;
	}
}