@charset "UTF-8";

/* #### ALGEMEEN EN FIXES #### */
a:link, a:visited { color: #000; font-weight:bold; text-decoration: none; }
a:hover { text-decoration: underline; }

* html #left {
	left: 175px;            /* IE fix, RC fullwidth */
}

h1, h2, h3, h4 { margin-bottom: 0; }
h1 {font-size: 16px;}

/* Font grootte van AND OR tekst bij radio buttons */
.andor {
	font-size:75%;
	}

#status_box {
	font-size:70%;
	background-color: #b4c5d5;
	visibility: hidden;
}

/* #### BODY #### */
body {
	background: #fff;
	background: url(../img/style/rub_blokken_piram_35p_1600px.png);
	background-attachment:fixed;
	background-size: cover;
	margin: 0;				/* resetten van marges */
	padding: 0;				/* resetten van padding */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	min-width: 615px;       /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
	text-align: left; 	/* dit centreert de container in IE 5* browsers */
							/* Tekst wordt left aligned default in the #container div */
}
ol {
	display: block;
	list-style-type: decimal;
}


/* #### BASE (bevat header en container) #### */
#base {
	width: 1200px;			/* ipv 100% */
	margin: 0 auto;			/* de pagina wordt automatisch gecentreerd indien nodig (icm de width!) */
	text-align: left;		/* override van text-align: center in the body */
}

/* Login en registreer div opmaken */
#login {
	float: right;
	margin: 0 40px;
}

/* #### De tabel (-len) opmaken #### */
.lijst tr:nth-child(even) {background: #fff;z-index: 1;}
.lijst tr:nth-child(odd) {background: #ccc;z-index: 1;}
.lijst tr:hover td { background-color:#F79646;}
.lijst tr.vastekleur td { background-color:#fff;}

.lijst tr td a, tr td a:link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-weight: normal;
  z-index: 1;
}

input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

th {font-weight: bold;}
.edit th {font-weight: normal;}
.edit td{font-weight: bold;}
.edit td input.mijnbreedte{width: 140px; margin: 0; padding: 2px;}
.edit td select.mijnbreedte{width: 140px; margin: 0; padding: 2px;}
.edit td textarea.mijnbreedte {font-family: inherit; font-size: 14px; width: 140px; height: 8ex; margin: 0; padding: 2px;}
.edit td.licht {font-weight: normal;}

.centerText {
   text-align: center;
}
.alignRight {
	text-align: right;
}
	
/* #### HOVERTIP (http://www.spiceupyourblog.com/2011/05/simple-css-only-tooltip-descriptions.html) #### */
.hovertip {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: #222;
	outline: none;
}

.hovertip span {
	visibility: hidden;
	position: absolute;
	bottom: 30px;
	left: 50%;
	z-index: 999;
	width: 230px;
	margin-left: -127px;
	padding: 10px;
	border: 2px solid #ccc;
	opacity: .9;
	background-color: #F79646; /* dit was #ddd */
	background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
	text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

a.hovertip, a.hovertip:link {
	font-weight: normal;
}
.map span {
	bottom: 230px;
	width: 280px;
}

.hovertip:hover{ border: 0; } /* IE6 fix */

.hovertip:hover span { visibility: visible; }

.hovertip span:before, .hovertip span:after {
	content: "";
	position: absolute;
	z-index: 1000;
	bottom: -7px;
	left: 50%;
	margin-left: -8px;
	border-top: 8px solid #F79646;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 0;
}

.hovertip span:before {
	border-top-color: #ccc;
	bottom: -8px;
}

/* #### HEADER #### */
#header { 
	background: url(../img/style/head_grad_zwart_1680px.png) repeat-y; 
	height: 110px;
	padding: 0.3em 0;
} 
div.logo{
	position:absolute;
	margin: 40px 0 0 20px;
	width: 250px;
	height: 48px;
}
div.logo img{
	width: 250px;
	height: 48px;
	border: 0 none;
}
div.contactgeg{
	position: relative;
	margin: 0 0 0 auto;
	padding: 10px 0 5px 0;
	width: 165px;
	color: #fff;
	font-weight: bold;
}	
div.contactgeg a:link, div.contactgeg a:visited, div.contactgeg a:hover {
	color: #fff;
	text-decoration: none;
}
div.contactgeg a:hover {
	text-decoration: underline;
}

/* #### CONTAINER (bevat 1 kolom (.column): center) #### */
#container {
/*	padding-left: 175px;	 LC fullwidth */
/*	padding-right: 215px;	 RC fullwidth + CC padding */
	overflow: hidden;		/* voor kolommen van gelijke hoogte */
	clear: both;
}

#container .column {
	position: relative;
	float: left;
	padding-bottom: 1001em;	/* X + padding-bottom */
	margin-bottom: -1000em;	/* X */
}

img.right {
	float: right;
	margin: 0.5em 1em 1em 1em;
	clear: right;
}

/* #### CENTER (COLUMN) #### */
#center {
	/* padding: 10px 20px;		/* CC padding */
	width: 100%;
}
#center ul {
	margin-top: 0px;
}
#center ul li {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;
	color: #000;
	list-style-type: disc;
	margin-top: 0px;
	padding-bottom: 0px;
}
img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#bodyContent img {
	margin: 0 0 1px 0;
}

.fout {
	color: red;
	padding-left: 15px;
	padding-bottom: 30px;
	font-weight: bold;
}

#loginregis, #loginbox, #uploadbox , #vorigevolgende, #terug{
	float: right;
    background-color: #F79646;
    border: 1px solid #7ac;
    margin: 0 0 0 0; /* was 0 20px 0 0 */
    padding: 0.7em;
    /* width: 12em; */
}

#loginbox {
    width: 25em;
}

#uploadbox {
	float: left;
    background-color: transparent;
	width: 26em;
}

#loginbox .stevig {
    font-size: 120%;
    margin-bottom: 1em;
}

#terug {
	margin: 13px 0 0 0;
}
.stevig {
    font-size: 110%;
}

#loginlink a:link {
	color: #00F;
	font-weight: normal;
	font-size: 85%;
	margin-left: 110px;
	text-decoration: normal;
}

.registreer fieldset {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    margin: 0;
    padding: 0;
}

#loginbox label {
    text-align: left;
    width: 11em;
}

.registreer fieldset label {
    padding-right: 0.5em;
    width: 11em;
}

.basic fieldset label {
    display: block;
    float: left;
    font-weight: bold;
    margin-right: 5px;
	text-align: right;
}

.basic fieldset {
    width: auto;
	border: 0 none;
}

.registreer fieldset fieldset {
    display: block;
    width: auto;
}
.basic fieldset fieldset {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    margin-bottom: 0.75em;
    overflow: hidden;
    padding: 0;
}

.basic .submit {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    display: block;
    padding-right: 0;
    text-align: left;
}

.registreer  p{
	margin: 1.2em 0;
	padding: 15px;
}

.registreer h1 {
    color: #000;
    overflow: hidden;
    padding: 12px 15px 13px;
}

#grad {
	background: url(../img/style/head_grad_zwart_1680px.png) repeat-y;
}
#content {
	width: 800px
}

.inpu .inpp {
	min-width: 8em;
    width: 55%;
}

.inpe {
	min-width: 8em;
    width: 80%;
}

.submit input {
    float: none;
    margin-bottom: 1em;
    margin-left: 167px;
    padding: 0 1em;
    vertical-align: middle;
}

#loginbox .submit input {
    margin-left: 170px;
    width: auto;
}

#uploadbox .submit input {
    margin-left: 250px;
}

#vorigevolgende {
    float: left;
    width: 19em;
	margin: 1em 0;
}

#edit {
	float: left;
}

#add {
	float: left;
}

#gegevens {
	float: left;
	width: 260px;
}

#kaart {
	float: left;
	margin: 0 20px;
}

#map_canvas {
	width: 600px;
	height: 450px;
}

#simpletable {
	float: left;
}

.attentievak {
	position: relative;
	width: 270px;
	height: 40px;
	padding: 10px;
	background: #F79646;
	border: 2px solid #77AACC;
	margin: 0 0 0 0; /* was 0 20px 0 0 */
	float: right;
}

.attentievak:after {
	content: "";
	position: absolute;
	top: -30px;
	left: 190px;
	border-style: solid;
	border-width: 0 20px 30px;
	border-color: #F79646 transparent;
	display: block;
	width: 0;
	z-index: 1;
}

.attentievak:before {
	content: "";
	position: absolute;
	top: -33px;
	left: 188px;
	border-style: solid;
	border-width: 0 22px 32px;
	border-color: #77AACC transparent;
	display: block;
	width: 0;
	z-index: 0;
}

img.kaartje {
	margin: 20px 0 20px 26px;
}

.cfloatleft {
	float: left;
}

.cfloatright {
	float: right;
}

#melding {
	color: red;
	font-weight: normal;
}

table {
	border-collapse: collapse;
}

#rechten {
    position: relative;
    padding: 1em;
    margin: 3em 0 1em 1em;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
    width: 569px;
    text-align: right;
}

/* #### RECHTS #### */

/* Laag met kader en logo over de foto heen */
#strail, #innostrail, #pedestrail, #velostrail, { position: absolute; z-index: 0;}
#strailkader, #innostrailkader, #pedestrailkader, #velostrailkader { position: absolute; z-index: 1;}

#upload-image, #verwijder-image {
	display: none;
	background-color: #e5e5e5;
	border: 2px solid #244656;
	position: absolute;
	left: 650px;
	top: 235px;
	z-index: 1000;
}

#upload-frame, #verwijder-frame {
	padding: 20px;
}

#upload-frame p {
	font-weight: bold;
}

.popup, .popup-verwijder {
	display: block !important;
}

.cursor-pointer {
	cursor: pointer;
	float: right;
}

/* #### FOOTER EN FIXES #### */
#footer {
	clear: both;
	padding: 0 0 0 300px; /* uitgelijnd met center column = 192px */
	/* background: url(../img/navbar_grad_oranje_175x1px.png) repeat-y; */
}

.voettekst {font-size: 11px}
.nedstrailNED {color: #F79646;  font-weight:bold; }
.nedstrailSTRAIL { color: #000; font-weight:bold; }

* html body { 				/* ivm footer fix */
	overflow: hidden;
}

* html #footer-wrapper {	/* ivm footer fix */
	float: left;
	position: relative;
	width: 100%;
	padding-bottom: 10010px;
	margin-bottom: -10000px;
}