/*************************************************************
  HTML
*************************************************************/
html, body { border: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: large; color: gray; background-color: #E5E5E5; }
p { clear: both; }

/*************************************************************
  HEADER
*************************************************************/
#logo { width: 86%; margin-left: 7%; display: block; float: left; font-size: x-large; color: #9ACD32; font-weight: normal; }
	#logo img { float: left; height: 90px; border: none; }
	#logo h1 { float: left; margin: 15px 0 0 15px; padding: 0; font-family: times new roman; font-weight: lighter; }
	#logo a { color: black; text-decoration: none; }
#search { float: right; margin-top: 15px; width: 50%; }
	#search input { width: 100%; display: block; margin: 0; padding: 0.25em; font-size: x-large; border: 1px solid silver; background: white url('img/icon_search.gif') no-repeat; background-position: 97% 50%; }
	#search input:hover { border: 1px solid #9ACD32; }
	#search input:focus { border: 2px solid #9ACD32; }
#content { clear: both; float: left; width: 86%; margin-left: 7%; border: 1px solid silver; border-top: none; background-color: white; }

/*************************************************************
  FORM AND FIELDSET
*************************************************************/
form { margin: 0; padding: 0; }
fieldset { clear: both; margin: 0; padding: 3% 0 0 0; border: none; }
	fieldset a { color: #9ACD32; text-decoration: none; }
	fieldset a:hover { color: black; text-decoration: underline; }
	fieldset label { width: 35%; display: block; clear: both; float: left;}
	fieldset input { padding: 0.2em 0.2em 0.15em 0.2em; width: 64%; font-size: large; color: black; border: 1px solid silver; }
		fieldset input:hover { border: 1px solid #9ACD32; background-color: #EFEFEF; }
		fieldset input:focus { border: 2px solid #9ACD32; background-color: #EFEFEF; }
	fieldset textarea { padding: 0.2em 0.2em 0.15em 0.2em; width: 64%; font-size: large; color: black; border: 1px solid silver; font-family: arial, helvetica, sans-serif; overflow:hidden; }
		fieldset textarea:hover { border: 1px solid #9ACD32; background-color: #EFEFEF; }
		fieldset textarea:focus { border: 2px solid #9ACD32; background-color: #EFEFEF; }
	fieldset select { padding: 0.2em 0.2em 0.15em 0.2em; width: 64%; font-size: large; color: black; border: 1px solid silver; }
		fieldset select:hover { border: 1px solid #9ACD32; background-color: #EFEFEF; }
		fieldset select:focus { border: 2px solid #9ACD32; background-color: #EFEFEF; }
	fieldset legend { position: relative; margin-top: 15px; background-color: red; display: none; }
	fieldset p { width: 94%; line-height: 185%; margin: 0; margin-left: auto; margin-right: auto; padding: 0; }
		fieldset p.rowbg1 { background: #F0F0F0; padding-left: 0.4em; padding-right: 0.4em; }
			fieldset p.rowbg1:hover { color: black; background: #9ACD32; }
			fieldset p.rowbg1:hover a { color: white; }
			fieldset p.rowbg1:hover a:hover { color: black; }
		fieldset p.rowbg2 { background: white; padding-left: 0.4em; padding-right: 0.4em; }
			fieldset p.rowbg2:hover { color: black; background: #9ACD32; }
			fieldset p.rowbg2:hover a { color: white; }
			fieldset p.rowbg2:hover a:hover { color: black; }
		fieldset p span { float: right; }
		fieldset p span a { color: #9ACD32; margin-left: 0.6em; }
		fieldset p span img { width: 26px; margin: 0em 0.3em -0.35em 0em; border: none; }
	fieldset hr { clear: both; width: 94%; margin-left: auto; margin-right: auto; border: 0; height: 1px; color: #EFEFEF; background-color: #EFEFEF; }
	fieldset i { font-size: small; font-weight: italic; }
		fieldset .btn { font-size: large; padding: 3% 0 3% 0; }
		fieldset .btn input { width: auto; background-color: #9ACD32; color: white; border: 1px solid #698B22; padding: 0.5em; }
		fieldset .btn input:hover { background-color: #9ACD32; color: black; border: 1px solid black; }
	fieldset input[type="checkbox"],input[type="radio"] { background: white; color: white; border: 1px solid silver; width: 26px; height: 30px; }
		fieldset input[type="checkbox"]:checked,input[type="radio"]:checked { background: url('img/boxbg.png'); color: #9ACD32; }

/*************************************************************
  NAVIGATION
*************************************************************/
.nav_active span { padding: 10px; color: black; background: url('img/nav_arrow_white.png') no-repeat 50% 112%; float: left; }
.subnav_active span { padding: 10px; color: black; float: left; }

#nav ul { background: #9ACD32; clear: both; width: 86%; overflow: hidden; margin: 0; margin: 0 0 0 7%; padding: 0; border: 1px solid silver; border-bottom: none; }
	#nav ul li { margin: 0; padding: 0; float: left; list-style-type: none;  list-style-position: outside; }
	#nav ul li a { text-decoration: none; color: white; padding: 10px; float: left; } 
	#nav ul li a:hover { color: #9ACD32; background: white; }

#subnav ul { background: white; clear: both; width: 86%; overflow: hidden; margin: 0 0 0 7%; padding: 0; border: none; border-left: 1px solid silver; border-right: 1px solid silver; }
	#subnav ul li { margin: 0; padding: 0; float: left; list-style-type: none;  list-style-position: outside; }
	#subnav ul li a { text-decoration: none; color: #9ACD32; padding: 10px; float: left; } 
	#subnav ul li a:hover { color: black; }
	
/*************************************************************
  ACTION ERROR / SUCCESS / INFO MESSAGES
*************************************************************/
#error { border: 1px solid red;	margin: 1.8em 1em 1em 1em; padding: 0.5em 0.5em 0.5em 7em; background-color: lemonchiffon; width: 70%; }
		.error { display: block; width: 63px; height: 63px;	background-image: url('img/icon_error.png'); margin: -1.7em 0em 0em -5.5em; float: left; }
#success { border: 1px solid green; margin: 1.8em 1em 1em 1em; padding: 0.5em 0.5em 0.5em 7em; background-color: lemonchiffon; }
		.success { display: block; width: 63px; height: 63px;	background-image: url('img/icon_success.png'); margin: -1.7em 0em 0em -5.5em; float: left; }
#info { border: 1px solid blue; margin: 1.8em 1em 1em 1em; padding: 0.5em 0.5em 0.5em 7em; background-color: lemonchiffon; }
		.info { display: block; width: 63px; height: 63px;	background-image: url('img/icon_info.png'); margin: -1.7em 0em 0em -5.5em; float: left; }
		
/*************************************************************
  PEDIGREE
*************************************************************/
#pedigree .verline { clear: both; margin-left: auto; margin-right: auto; width: 1px; border-right: 1px solid silver; color: white; }
#pedigree .horline { clear: both; margin-left: auto; margin-right: auto; width: 50%; border: 1px solid silver; border-bottom: none; color: white; }
/* DUIF */
#pedigree ul { width: 100%; clear: both; float: left; margin-left: auto; margin-right: auto; padding: 0; list-style: none; text-align: center; }
#pedigree ul li { width: 100%; float: left; margin: 0; padding: 0; text-indent: 0; display: block; } 
#pedigree ul li span { background: #F0F0F0; width: 30%; margin-left: auto; margin-right: auto; display: block; border: 1px solid silver; border-radius: 8px; }
#pedigree ul li span p { margin: 0; padding: 10px; }
	/* winnings */
	#pedigree ul li span p ul { background: pink; }
	#pedigree ul li span p ul li { border-top: 1px dotted blue; clear: both; float: left; width: 100%; text-align: left;  }
/* OUDERS */
#pedigree ul li ul { }
#pedigree ul li ul li { width: 50%; }
#pedigree ul li ul li span { width: 60%; }
/* GROOTOUDERS */
#pedigree ul li ul li ul {  }
#pedigree ul li ul li ul li { width: 50%; }
#pedigree ul li ul li ul li span { width: 75%; }
/* OVERGROOTOUDERS */
#pedigree ul li ul li ul li ul {  }
#pedigree ul li ul li ul li ul li { width: 50%; }
#pedigree ul li ul li ul li ul li span { width: 90%; }

/*************************************************************
  TABS
*************************************************************/
#tabs ul { width: 94%; margin: 0; margin-left: auto; margin-right: auto; padding: 0 0.4em 0 0.4em; display: block; overflow: hidden; border-bottom: 1px solid silver; }
#tabs ul li { float: left; list-style-position: outside; list-style-type: none; margin: 0 0 0 0.5em; padding: 0; background: #E5E5E5; }
#tabs ul li a { padding: 10px; color: white; text-decoration: none; line-height: 185%; }
#tabs ul li a:hover { color: black; }
#tabs ul li.active { color: white; text-decoration: none; line-height: 185%; background: silver; }
#tabs ul li.active span { padding: 10px; }