/*Bloem Bonanza css
//  
//  bloem20xx.xx.css
//
//	add: Info&Orders
*/
	header {
		border: 10px solid #264796;
		border-radius:10px;
		text-align: center;
		width: 98%;
		height: auto;
		background-color: white;
		float: center;
		padding: 1px;
	}
	body{
		/*background-color: white;*/
		background-image:url(../image/Pic2023.png); 
		background-repeat:repeat;
		/*background-repeat: repeat-y;
		/*background-position: 50% 60px;	/* from left, from top of image  */
		background-size: 100%;
	}
	
	div{
		padding: 2px;
		margin: 2px;
	}
	p { 
		margin: 0px;
	}
	h1, h2, h3, h4, h5 {
		padding: 2px;
		margin: 0px;
	}
	h2 {
		color: #022e63;	
	}
	input[type=text] {
/*	text-transform: capitalize;*/
			width: 25%;
	}
	input[type=radio] {
		padding: 0;
	}
	input[type=text]:hover {
		background: #fff65d; 
	}

	select {
		border: 1px solid black; 
		color: black;
		background-color: white;
/*		font-weight: bold;*/
		padding: 2px 2px;
	}	
	select:hover {
		background: #fff65d; 
		border: 1px solid black;
	}
	span.it {
		font-style: italic;
	}
	p.larger {
		font-size: larger;
		text-align: center;
	}

	a.but:link, a.but:visited {
		background-color:white; /* #ed7d31; */
		color: #022e63;	  
		font-weight:bold;
		padding: 8px 8px;
		text-align: center;
		text-decoration: none;
		border-radius:10px;
	}
	a.but:hover, a.but:active {
		background-color:white; /* 022e63; */
		color:#ed7d31; /* #264796; */
		font-weight:bold;
	}
	
	a.butCG:link, a.butCG:visited {
		background-color: #ed7d31;
		background-image:url(../image/TCG_Logo_RGB-7.png); 
		background-size:cover; /*contain;*/
		background-position:center;
		/*border: 2px solid blue;*/
		color: #264796;
		font-weight:bold;
		padding: 8px 8px;
		text-align: center;
		text-decoration: none;
		border-radius:10px;
	}
	a.butCG:hover, a.butCG:active {
		background-color: lightgray; /* 022e63; */
		/*border: 2px solid #ed7d31;*/
		color:#ed7d31;
		font-weight:bold;
	}
	
	a.butBB:link, a.butBB:visited {
		background-color: #ed7d31;
		background-image:url(../image/BonanzaBloem-2.png); 
		background-size:cover; /*contain;*/
		background-position:center;
		/*border: 2px solid blue;*/
		color: #264796;
		font-weight:bold;
		padding: 8px 8px;
		text-align: center;
		text-decoration: none;
		border-radius:10px;
	}
	a.butBB:hover, a.butBB:active {
		background-color: lightgray; /* 022e63; */
		/*border: 2px solid #ed7d31;*/
		color:#ed7d31;
		font-weight:bold;
	}

	a.butPrt:link, a.butPrt:visited {
		background-color: #35b0e8;
		color: white;
		padding: 5px 5px;
		text-align: center;
		text-decoration: none;
		border-radius:10px;
	}
	a.butPrt:hover, a.butPrt:active {
		background-color: #9bd8f3;
		color: #022e63;	  
	}

	a.g2:link, a.g2:visited {
		background: black;
		color: white;
		padding: 5px 4px;
		text-align: center;
		text-decoration: none;
		border-radius:10px;
	}
	a.g2:hover {
		background: #f58220;
		color: white;
	}

	/* Style the tab */
	.tab {
		overflow: hidden;
		border: none;
		border-radius: 10px;		
		margin: 5px 5px;
		padding: 5px 0px 5px 0px;
		background-color:  #264796; /*#00a075; #fdaa44; 35b0e8; */
		color: white;
		text-align: center;
	}	

	.tab button {
		background-color: #fff65d;
		color: #002c62;
		float: center;
		border: 0px solid black;
		border-radius: 10px;		
		outline: none;
		cursor: pointer;
		padding: 0px;
		margin: 10px 12px; 
		transition: 0.3s;
		font-size: 16px;
	}
	.divRadio {
		padding: 5px;
		margin:8px 2px 8px 2px;
		text-align: center;
		overflow: hidden;
	}
	.divRadio label {
		float: center;
		outline: none;
		transition: 0.3s;
	}	

	.imgShirt {
		border: 3px solid blue;
		border-radius: 6px;		
		cursor: pointer;
	}
	.imgShirt:hover{
		border: 3px solid black; 
	}
	.shirtTable {
		font-family: arial, sans-serif;
		border-collapse: collapse;
		width: 100%;
	}
	.shirtTh {
		border: 1px solid #dddddd;
		text-align: center;
		padding: 8px;
	}		
	.shirtLtd {
		border: 0px solid #dddddd;
		text-align: left;
		padding: 8px;
	}
	.shirtCtd {
		border: 0px solid #dddddd;
		text-align: center;
		padding: 8px;
	}

	tr:nth-child(odd) {
		background-color: #fefaaf;
	}
	.closeOrderBut {
		font-weight: bold;
		font-size: larger;
		border-radius: 6px;		
		cursor: pointer;
		color: red;
	}
	.shirtLeft {
		float:left;
		width:44%;
		border: 10px solid #1B6DA6;
		text-align: center;
	}
	.shirtRight {
		float:right; 
		width:44%; 
		border: 10px solid #1B6DA6; 
		border-radius:20px;
	}
	/*Use a media query to add a break point at 800px:*/
	@media (max-width:800px) {
		.shirtLeft, .shirtRight {
			width:92%;/*The width is 100%, when the viewport is 800px or smaller*/
			float:left; 
		}
	}
	.nodeal {
		background:#35b0e8; 
		color:black; 
		margin:5px 5px; 
		border:0px solid #fff65d; 
		border-radius:10px; 
		padding: 10px 0px 10px 0px;
	}	
	.deal {
		background:#35b0e8; 
		color:black; 
		margin:5px 5px; 
		border:0px solid #fff65d; 
		border-radius:10px; 
		padding: 10px 0px 10px 0px;
		background-image:url(../image/picBG3.jpg); 
		background-repeat: repeat;
		/*background-repeat: repeat-y;	*/
	}	
	
	.signOutBut {
	width: 100px;
    padding: 6px;
	background-color: #a94442;
	color: #fff;
	font-weight: bold;
	border-radius: 10px;		
	cursor: pointer;	
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
	}
	.signOutBut:hover {
		background: #4CAF50;
	}

	.labelTxt {
		display: block; 
		width: 18%; /* correspond with padding-left of .divPadLeft .slopeKano */
		float: left; 
		clear: both; 
		margin-top: 2px;
		padding-left: 4px;
	}

	.labelTxt2 {
		display: block; 
		width: 25%; /* correspond with padding-left of .divPadLeft .slopeKano */
		float: left; 
		clear: both; 
		margin-top: 2px;
		padding-left: 4px;
	}

	.divPadLeft{
/*		padding-left: 5%;*/
		margin:5px 2px 10px 2px;
		text-align: center;
	}
	.grpTxtItem {
/*		display: block; 
		width: 100px; 
		float: left; 
		clear: both;  */
		margin: 0 10px 5px;
	}
	.labelSelRadio { 
		background: white; 
		color: black; 
		border: 1px solid black; 
		padding: 6px 1px 2px 1px; 
		border-radius:10px;
		margin: 8px 1px 6px 1px;
	}
	.labelSelRadio:hover{
		background: #fff65d; 
		border: 1px solid black; 
	}
	.labelSelRadio2 { 
		background: white; 
		color: black; 
		border: 1px solid black; 
		padding: 6px 0px 2px 1px; 
		border-radius:10px;
		margin: 8px 0px 6px 1px;
	}
	.labelSelCheck { 
		background: white; 
		color: black; 
		border: 1px solid black; 
		padding: 4px 10px 3px 2px; 
	}
	.labelSelCheck:hover{
		background: #fff65d; 
		border: 1px solid black; 
	}
	
	table {
 /*   	font-family: arial, sans-serif; */
		border-collapse: collapse;
		width: 100%;
	}
	td, th {
		border: 1px solid black;
		text-align: left;
		padding: 2px;
	}
	
	.tdInvDescr {
		width: 60%;
	}
	.tdCenter {
		text-align: center;
	}
	.tdRight {
		text-align: right;
	}
	.form{
		float: left;
		width: 58%;
		margin: 5px auto 4px auto;
		padding: 8px;
		border: 3px solid  #264796; /* #00a075; #84091a; 002c62; */
		border-radius: 10px;
	}
	.ticket_data{
		float: right;
		width: 38%;
		margin: 4px auto;
		border: 0px solid #002c62;
		padding: 4px;
		border-radius: 10px;
		background: #0093dd; /* fff65d; */
	}
	
	.hintInfo {
		display: none;
		position: absolute;
		left: 38%;
		width: 16%;
		margin-top: -2px;
		padding: 2px 2px;
		color: blue;
	 }	
		
	.hint {
		display: none;
		position: absolute;
		left: 38%;
		width: 16%;
		margin-top: -2px;
		border: 1px solid #c93;
		padding: 2px 2px;
		/* to fix IE6, we do a bg image.  Duplicating the pointer.gif
		image, and positioning it not to show up within the box */
		background: #ffc url(../image/pointer.gif) no-repeat -10px 5px;
	}

	/* The pointer image is added by using another span */
	.hint .hint-pointer {
		position: absolute;
		left: -10px;
		top: 2px;
		width: 10px;
		height: 19px;
		background: url(../image/pointer.gif) left top no-repeat;
	}

	/*Use a media query to add a break point at 800px:*/
	@media (max-width:800px) {
		.form, .ticket_data {
			width:92%;/*The width is 100%, when the viewport is 800px or smaller*/
			float:left; 
			font-size: smaller;
		}
		.hintInfo {
			left: 60%;
			width: 30%;
		}	
			
		.hint {
			left: 60%;
			width: 30%;
		}
	}
	.error{
		color: #aa0000;
	}
	.controlerror{
		background: #ffffdd;
		border: 1px solid #aa0000;	
	}
	.slope_angler_data{
		width: 92%; /*300px;*/
		margin: 8px auto;
		border: 0px solid #c2c2c2;
		padding: 10px;
	}	
	.boat_angler_data{
		width: 92%; /*300px;*/
		margin: 8px auto;
		border: 0px solid #c2c2c2;
		padding: 10px;
	}
	.other_data{
		width: 90%; /*300px;*/
		background: #85eaae;
		margin: 5 auto;
		border: 1px solid #c2c2c2;
		padding: 10px;
		border-radius: 10px;
	}
	.ticketInvoice_data{
		float: left;
		width: 96%;
		background: white;
		margin: 5 auto;
		border: 1px solid #c2c2c2;
		padding: 5px;
		border-radius: 10px;
	}
	.data {
		background: #c2c2c2;/*#73927B;*/
		margin: 0px 0px 8px 0px;
		padding: 1%;
	/*	border: 5px solid #c2c2c2;*/
		border: 0px solid gray; 
		border-radius: 10px;
	}
	.slopes {
		margin: 0;
		border: 2px solid white; 
/*		height: 208px;*/
	}
	.slopeUn {
		margin: 4px;
		border: 1px solid #808080; 
		float: left;
/*		width: 85%;*/
/*		height: 65px; */
	}
	.slopeKano {
		border: 1px solid white; 
		padding-left: 5%;
		margin: 0px;
		float: left;
		width: 100%;
/*		height: 40px; */
	}
	.slopeRe {
		margin: 4px;
		border: 1px solid #808080; 
		float: left;
		width: 85%; /*390px;*/
/*		height: 85px;*/
	}
	
	img.map {
		width: 100%;
		height: 80%;
	}
	
	.img-top {
		width: 50px;
		height: 50px;
		float: right;
		position: relative;
	}
	.img-top img{
/*		width: 65%;
		height: 90%;*/
		width: 90%;
		height: 70%;
		position: absolute;
		top: 0px;
		right: 40px;
		bottom: 0px;
		left: 0px;
		border: 2px solid blue;
		border-radius: 6px;		
	}
	.img-top:hover {
		z-index: 800;
	}
	.img-top img:hover {
		width: 800%;
		height: 800%;
		position: absolute;
		top: -680%;
		left: -665%;
	}

	.img-s {
		width: 50px;
		height: 50px;
		float: right;
		position: relative;
	}
	.img-s img{
/*		width: 65%;
		height: 90%;*/
		width: 90%;
		height: 70%;
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		border: 2px solid blue;
		border-radius: 6px;		
	}
	.img-s:hover {
		z-index: 800;
	}
	.img-s img:hover {
		width: 800%;
		height: 800%;
		position: absolute;
		top: -680%;
		left: -665%;
	}
	
	.img-t {
		width: 38px;
		height: 27px;
		position: absolute;
	}
	.img-t img{
		width: 50%;
		height: 60%;
		position: absolute;
		border: 1px solid blue;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		float: left ;
	}
	.img-t:hover {
		z-index: 1000;
	}
	.img-t img:hover {
		width: 600%;
		height: auto;
		position: absolute;
		top: -920%;
		left: -560%;
	}
	
	.img-m {
		width: 38px;
		height: 27px;
		position: absolute;
	}
	.img-m img{
		width: 50%;
		height: 60%;
		position: absolute;
		border: 1px solid blue;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		float: left ;
	}
	.img-m:hover {
		z-index: 1000;
	}
	.img-m img:hover {
		width: 400%;
		height: auto;
		position: absolute;
		top: -450%;
		left: -10%;
	}

	.divGrp {
		padding: 2px;
		margin: 2px;
	}
	#grpLead {
/*		border: 2px solid white;*/
	}
	#grpData {
		font-weight: bold;
		text-align: center;
		border: 2px solid #808080;
	}
	.grpH {
		text-align: center;
		background-color: #849E84;
		color: white;
		margin: 5px;
	}
	#boatAngler {
		background-image: url(../image/BloemhofDam1.png); 
		background-size: 80%;
	}
	.submitBut {
		background-color: #84091a; /* 022e63; */
		padding: 8px 10px 8px 10px;
		text-align: center;
		text-decoration: none;
		font-size: larger;
		color: white;
		font-weight: bold;
		border-radius: 20px;		
		cursor: pointer;	
	}
	
	.submitBut:hover {
		background-color: #fff65d;
		color: #022e63;	  
	}
	.invoiceButDiv {
		text-align: center;
	}
	.invoiceBut {
		font-size: larger;
		font-weight: bold;
		border-radius: 6px;	
		cursor: pointer;	
	}
	.invoiceBut:hover {
		background: #b1b6bf;
	}
	
	.grpInvOrderDivs {
		float:left;
		width: 23%;  
		padding: 0px;
		text-align:center;
		font-weight: normal;
	}

	.divGrpInvOrder {
		display: table;
		width: 98%;
		font-weight: normal;
	}
	.rTableCell {
		/*display: table-cell;*/
		border: 1px solid white;
		background-color: lightgray;
		padding: 1px;
	}
	.selectGray {
		background-color: lightgray;
	}

	.selectInfoOrder {	
		 /*background-color: lightgray; */
	}
	.img-fish img{
		width: 15%;
		height: auto;
		border: 0px solid blue;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		 /*float: right;*/
	}
	.img-maatb {
		width: 30px;
		height: 38px;
		position: absolute;
	}
	.img-maatb img{
		height: 80%;
		width: auto;
		position: absolute;
		border: 2px solid blue;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		float: left ;
	}
	.img-maatb:hover {
		z-index: 1000;
	}
	.img-maatb img:hover {
		width: 400%;
		height: auto;
		position: absolute;
		top: -410%;
		left: 0%;
	}
	
	.img-ruler {
		width: 50px;
		height: 15px;
		position: absolute;
	}
	.img-ruler img{
		width: 100%;
		height: auto;
		position: absolute;
		border: 2px solid blue;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		float: left ;
	}
	.img-ruler:hover {
		z-index: 1000;
	}
	.img-ruler img:hover {
		width: 400%;
		height: auto;
		position: absolute;
		top: -100%;
		left: 0%;
	}
	#tableLinks {
		border-collapse: collapse;
		width: 100%;
		margin-left:auto; 
		margin-right:auto;
		font-size: 18px;
	}
	#tableLinks td, #tableLinks th {
		border: 0px solid #ddd;
		padding: 3px;
	}
	#tableLinksInv {
		border-collapse: collapse;
		width: 40%;
		margin-left:auto; 
		margin-right:auto;
	}
	#tableLinksInv td, #tableLinksInv th {
		border: 0px solid #ddd;
		padding: 3px;
		text-align: center; 
		width: 50%;
	}