@import url('https://fonts.googleapis.com/css?family=Marvel');

/*Now the CSS*/
* { margin: 0; padding: 0; }
html, body { font-family: 'Marvel', sans-serif; font-size: 20px; width: 100%; text-align: center; }

#search_dog { font-size: 1em; display: inline-block; }
#search_dog table { text-align: left; }
#search_dog table tr td:last-child { margin-left: 1em; }
#search_dog table tfoot tr td { margin-top: 1em; }
#search_dog table span.vereist { vertical-align:sub; font-weight: bold; color: red; float: right; }
.header { margin-bottom: 1em; }
#footer { display: block; margin-top: 3em; font-size: .7em; margin-bottom: 1em; }

#gegevens { position: relative; display:block; margin-top: 3em; margin-bottom: 2em; width: auto; min-width: 800px; }
#gegevens h1 { margin-bottom: 1em; font-size: 2em; }
#gegevens p { font-size: 1em; }

div.loading {
	content: '';
	background-image: url('ajax-loader.gif');
	background-repeat: no-repeat;
	display: none;
	width: 3em;
	height: 3em;
	z-index: 99;
	position: absolute;
	left: 50%;
	top: 50%;
	/*visibility: hidden;*/
}

div#resultaten div#content {
	margin: 1em;
	overflow-y: auto;
	height: 100%;
	display: block;
	box-shadow:
        inset 0px 10px 10px -5px rgba(255,255,255,1),
        inset 0px -11px 10px -5px rgba(255,255,255,1);
}
div#resultaten {
	/*overflow: scroll;*/
	width: 500px;
	height: 400px;
	margin: 1em;
  position: relative;
  display: block;
  margin: 1em auto;
  border-top: 3px solid #c0c0c0;
	/*-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;*/
}
div#resultaten:before, div#resultaten:after {
  content: "";
  position: absolute;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c0c0c0), to(transparent));
  background-image: -webkit-linear-gradient(#c0c0c0, transparent);
  background-image: -moz-linear-gradient(#c0c0c0, transparent);
  background-image: -o-linear-gradient(#c0c0c0, transparent);
  background-image: linear-gradient(#c0c0c0, transparent);
  top: -3px;
  bottom: 50px;
  width: 3px;
}
div#resultaten:before {
  left: -3px;
}
div#resultaten:after {
  right: -3px;
}
div#resultaten div.item { display:table; width: 100%; margin-bottom: .5em; }
div#resultaten div.item:first-child { margin-top: .5em; }
div#resultaten div.item img {
	margin-left: .5em;
	width: 5em;
	height: auto;
	display: table-cell;
	float: left;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: #666 0px 0px 5px;
	-moz-box-shadow: #666 0px 0px 5px;
	box-shadow: #666 0px 0px 5px;
}
div#resultaten div.item a { display: table-cell; margin-right: 1em; margin-left: 1em; width: 60%; float: right; }

#count_result {}

form {
	background-color: aliceblue;
	padding: 10px;
	border: solid 1px #85b1de;
	font-size: 1em;

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.72, #F0F8FF),
	color-stop(1, #F8F8FF)
);
background-image: -o-linear-gradient(bottom, #F0F8FF 72%, #F8F8FF 100%);
background-image: -moz-linear-gradient(bottom, #F0F8FF 72%, #F8F8FF 100%);
background-image: -webkit-linear-gradient(bottom, #F0F8FF 72%, #F8F8FF 100%);
background-image: -ms-linear-gradient(bottom, #F0F8FF 72%, #F8F8FF 100%);
background-image: linear-gradient(to bottom, #F0F8FF 72%, #F8F8FF 100%);

	-webkit-box-shadow: #c0c0c0 0px 5px 8px;
	-moz-box-shadow: #c0c0c0 0px 5px 8px;
	box-shadow: #c0c0c0 0px 5px 8px;

	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

iframe {
	border: none;
	width: 500px;
	height: 300px;
	display: block;
	margin: 0 auto;
	margin-top: 1em;
}

#ui-id-1,#ui-id-2,#ui-id-3,#ui-id-4 {
	border: 1px solid #ccc;
	font-size: .9em;
	font-weight: bold;
	-moz-outline: none;
	outline: none;
	color: black;
	background-color: #fa8072;
	background-image: none;

	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),div#resultaten a {
	border: 1px solid #ccc;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	display: inline-block;
	-moz-outline: none;
	outline: none;
	background-color: #fafafa;

	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

#menu {
	margin-top: 2em;
	margin-left:auto;
	margin-right:auto;
	z-index: 99;
	width: 800px;
}

#menu li a {
	display: block;
	float: left;
	margin-left: 2em;
	border: 1px solid #ccc;
	background-color: #fafafa;

	margin-bottom: .5em;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
	display: inline-block;
	-moz-outline: none;
	outline: none;

	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

#menu li {
	text-align: center;
	list-style-type: none;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

#menu ul {
	padding-top: 20px; position: relative;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
input:hover:not([type="radio"]):not([type="checkbox"]):not([type="file"]), input:focus:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="reset"]),div#resultaten div.item a:hover,#menu a:hover {
	background-color: #c8e4f8 !important; color: #000 !important; border: 1px solid #94a0b4 !important;
}

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type="radio"],input[type="file"] {
	display:none;
	margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type="radio"] + label,input[type="file"] + label {
	cursor: pointer;
	display:inline-block;
	margin:-2px;
	padding: 4px 12px;
	background-color: #fafafa;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #ccc;
	margin: 0 .1em;
	color: #666;
	font-size: .9em;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type="radio"]:checked + label {
   background-image: none;
	background-color:#c8e4f8;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
input[type="file"]:hover + label,input[type="radio"]:not(:checked):hover + label {
   background-image: none;
	background-color:#c8e4f8;
	color: black;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

input[type="submit"],input[type="button"],input[type="reset"] {
	cursor: pointer;
}

input[type='text'] { font-family: 'Marvel', sans-serif; font-size: 1em; }

:focus {outline:none;}
::-moz-focus-inner {border:0;}


div#resultaten div.item a.reu { 	background-color: aliceblue;
	border: solid 1px #85b1de;
}
div#resultaten div.item a.teef { 	background-color: LavenderBlush;
	border: 1px solid #FFB6C1;
}

/*input[type="submit"] {
	border: 1px solid #ccc;
	color: #666;
	background-color: #fafafa;
	-moz-outline: none;
	outline: none;
}*/