* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Fira Sans', sans-serif;	
	font-size: 12px;
	color: #000;
}

section, nav, article, header, footer {
	display:block;
}

div text {
	font-family: 'Fira Sans', sans-serif !important;

}

section, div, nav {
	position: relative;
}
.container {
	width: 1000px;
	height: auto;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 10px;
	margin: auto;
	text-align: left;
}
.header {
	padding: 10px;
}
.main_title {
	background: #cccccc;
	color: #ffffff;
	padding: 10px;
	font-size: 20px;
	line-height: 20px;
}
.content {
	padding: 10px;
	min-height: 100px;
}
.footer {
	padding: 10px;
	text-align: right;

}
.footer a {
	color: #999999;
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}
.label_div {
	width: 120px;
	float: left;
	line-height: 28px;
}
.input_container {
	height: 30px;
	float: left;
}
.input_container input {
	height: 20px;
	width: 200px;
	padding: 3px;
	border: 1px solid #cccccc;
	border-radius: 0;
}
.input_container ul {
	width: 206px;
	border: 1px solid #eaeaea;
	position: absolute;
	z-index: 9;
	background: #f3f3f3;
	list-style: none;
}
.input_container ul li {
	padding: 2px;
}
.input_container ul li:hover {
	background: #eaeaea;
	cursor: pointer;
}
#country_list_id {
	display: none;
}



/* Frontpage */
body#front {
	margin:0;
	padding:0;
	background: url("/gfx/frontimage.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#front div#input {
	width: 80% !important;
	margin-left: auto;
	margin-right: auto;
}


#front h1 {
	margin-top: 40px;
	font-size: 42px;
	width: 80%;
	color: rgba(0,0,0,0.7);
	margin-left: auto;
	margin-right: auto;
	line-height: 1em;

	
}

#front section {
	width: 80%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: static;
}

#front input#country_id {
	font-size:16px;
	padding:4px;
	color: #000;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: left;
}

#front #button {
	margin-top: 8px;
	color: #fff;
	padding: 8px;
	font-size: 18px;
	background-color: #000;
	width: 14px !important;
	height:16px !important;
	position:absolute;
	top: 177px;


}

#front nav#topmenu {
	width:250px;
	display: none;
}
#front nav#topmenu ul {
	position: relative;
	margin:0;
	top:0;

}
#front #button:hover {
	background-color: #ddd;
}

#front>ul, ul#country_list_id, #topmenu ul {
	width: 100% !important;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: absolute;
	top:30px;
	z-index:5000;
}

#front>ul li, .trialmating li, #correct_sire_list li, #correct_dam_list li, #country_list_id li, #topmenu li {
	cursor: pointer;
	list-style-type: none;
	font-size: 18px;
	background-color: rgba(255,255,255,0.8);
	padding-left:6px;
	padding-right: 6px;
}

#front li:hover #correct_sire_list li:hover, #correct_dam_list li:hover {
	background-color: rgba(230,230,230,1);
}


#correct_sire_list, #correct_dam_list {
	width: 100%;
	background-color: #fff;
	position: absolute;
	left: 0;
}

#front>h3 {
	text-align: right;
	font-size: 16px;
	top: 30px;
	right: 150px;
	position: absolute;
	padding: 10px;
	background-color: rgba(255,255,255,0.7);
}

#front>h3 a {
	text-decoration: none;
	color: #000;
}

#front footer {
	border-top: none;
}

span.m, span.f, span.M, span.F {
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}

span.m, span.M {
	background-image: url("../gfx/male.svg");
}
span.f, span.F {
	background-image: url("../gfx/female.svg");
	
}


h1 span {
	background-position-y: 2px;
	margin-right: 4px;
	padding-right: 4px;
}

.title span {
	margin:0;
	padding-right: 0;
	padding-left: 4px;
}


body>div.subjectlinks {
	display:none;
}


#doginfo img {
	width: 40%;
	height: auto;
	float: right;
	
}

section.parents {
	width: 100%;
}

nav#buttons {
	clear: both;
}

#about li,#fix li {
	margin-left: 14px;
	padding-left: 10px;
}

#front footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px;
	background-color: rgba(0,0,0,0.4);
	height: 50px;
	
}

footer #usage p {
	color: #fff;
	text-align: right;
}

footer #usage p a, footer #usage p a:visited {
	color: #fff;
	text-decoration: none;
}

#sharing input {
	width: 100%;
}

#sharing {
	height: 200px;
}

#country_list_id li {
	font-family: "Lucida Grande","Helvetica Neue", "Helvetica-neue", Helvetica, Arial, sans-serif;
	padding-bottom: 0.2em;
}

#topmenu {
	position: absolute;
	top: 25px;
	left: 0px;
	z-index: 1000;
}

#topmenu li {
	display: block;
	text-decoration: none;
}

#menubutton {
	position: absolute;
	top: 0;
	left: 0px;
	width: 25px;
	height: 25px;
	background-image: url('../gfx/menu.svg');
	background-position: top left;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	background-color: rgb(232,99,16);
}

#history {
	display: none;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1000;
}

#history ul li {
	display: block;
	background-color: rgba(255,255,255,0.7);
}

.button {
	cursor: pointer;
}


#favs {
	padding: 10px;
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
}

#favs h3 {
}

#favs ul {
	margin-left: 20px;
}


section#lines {
}


section.sep {
width: 45%;
float: left;
margin-right: 4%;
}

.clear {
	clear: both;
}

#parentinfo,#anc_listing {
	float: left;
	width: 65%;
}

#anc_graphs {
	float: right;
	width: 30%;
}
.pointer {
	cursor: pointer;
}

#common table, #common tr, #common td, #common th, #health table, #health tr,
#health th, #health td, #anc_listings tr, #anc_listings th, #anc_listings td {
	padding:0;
	margin:0;
	border: none;
	border-collapse: collapse;
}

#common th, #health th, #anc_listings th, #anc_listings td {
	text-align: left;
	padding-left: 8px;
	border: none;
}
#common th:last-of-type, #health th:last-of-type
{
	padding-right: 8px;
}

#common tr:nth-of-type(odd), #health tr:nth-of-type(odd), #anc_listings tr:nth-of-type(odd){
	background-color: rgba(232,99,16,0.4);
}

#common td,#health td {
	padding-left: 8px;
}

#star {
	margin-left: 10px;
}

h3.pointer {
	clear: both;
}


form#breederinfo {
	display:none;
	background: rgba(250,200,200,0.8);
	position: absolute;
	bottom:10px;
	right:0;
	padding:10px;
	width: 400px;
}


#breederlist li:hover {
		background: #eaeaea;
	cursor: pointer;

}

p.close {
	text-align: right;
	cursor: pointer;
}


header h1, header h3.pointer {
	float: left;
	margin-right: 20px;
	clear: none;
	padding:0;
}

section#doginfo {
	clear: both;
}

#feedback {
	position: absolute;
	top: 0px;
	left: 450px;
	width: 300px;
	height: auto;
	padding: 20px;
	border: 1px solid black;
	shadow: 1px 1px 5px 5px rgb(20,20,20);
	z-index: 1000;
	background-color: rgba(255,255,255,1);
}


#feedback textarea {
	width: 300px;
	height:120px;
}

#feedback input[type="email"]{
	width: 300px;
}

#feedback input[type="submit"]
{
	color: #000;
	margin-top: 10px;
}

#feedback label {
	font-weight: bold;
}

#feedback p.pointer:first-of-type{
	text-align: right;
	margin-top: -5px;
	margin-right: -5px;
}

#wrapper #main #siblings, #wrapper #main #descend, #wrapper #main #reverse, #wrapper #main #sharing, #wrapper #main #ancestors, #wrapper #main #about, #wrapper #main #vertical, #wrapper #main #fix, #wrapper #main #favs {
	display: none;
	
}

#logo, .nav, footer {
	padding-left: 10px;
}


.trialmating label {
	display: inline-block;
	width: 180px;
}

.trialmating label.date
{
	display: inline;
	width: auto;
}

.trialmating form p {
	line-height: 28px;
}

.trialmating ul {
	margin-left: 180px;
}


.trialmating input {
	color: #000;
}

.trialmating li:hover {
	background-color: rgb(200,200,200);
}

.trialmating form, .trialmating form input, .trialmating form label, .trialmating form li {
	font-size: 16px;
}

p.title, span.title {
	font-size: 9.5px;
	text-transform: uppercase;
	color: rgb(232, 99, 16);
	line-height: 9.5px;
	font-weight: normal;
}

p.title>h1
{
	margin-top: 0;
}

#pedigree.elementer {
	padding:0 !important;
	width: 100%;
}

#pedigree table.report {
	border: none !important;
	width: 100% !important;
}

#pedigree table.report tbody {
	border: none;
}

td section.header {
	text-align: center;
}

#descend p.dob {
	-webkit-margin-before: 0;
	margin-bottom: 6px;
}

#descend h3 {
	margin-top: 12px;
}


table.report p.ancestordetails {
	font-size: 95%;
	color: green;
	line-height: 1.4em;
}

#ancestors{
	min-height: 650px;
}

#ancestors h2, #siblings h3, #siblings h4 {
	margin-top: 12px;
}

#common, #sireanddamlines, #lines {
	margin-bottom: 10px;
}

#ancestors .flright h3 {
	color:black;
}

#descend h3 a {
	display: block;
	margin: 0;
}

#country_list_id {
	z-index: 5000;
}


table.report p {
	line-height: 1em;
	margin-bottom:4px;
}

div#print {
	width:24px;
	height: 24px;
	background-image:url('../gfx/printer67.svg');
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	top: 10px;
	left: 10px;
	z-index: 1000;
	cursor: pointer;
}

#vertical div#print, #reverse div#print {
	display:none;
}

#pedigree section.header #title 
{margin-top: -24px;}

#login, #corrections {
	background-color: rgba(255,255,255,1);
	float: right;
	padding:10px;
	border: 1px solid black;
	z-index: 2000;
	width: 200px;
	height: 200px;
	margin-bottom:-220px;
}
#login label, #login input {
	display: block;
}
#login_form, #register_form {
	display: block;
	float: none;
}

#login h5 a {
	color: rgba(232,99,16,1);
}

#corrections {
	height: 600px;
	margin-bottom: -600px;
	width: 300px;
}
#corrections label {
	display: block;
}

#corrections input[type=text], #corrections input[type=email], #corrections input[type=date] {
	width: 100%;
	color: #000;
}
#addmedia, #add_health_data {
	margin:0;
	padding:0;
	background-color: rgba(255,255,255,1);
	width: 700px;
	float: right;
	height: 340px;
	margin-bottom: -360px;
	z-index: 2000;
	border: 1px solid black;
	padding: 10px;

}


#thumbnails {
	position: absolute;
	top: 10px;
	right:20px;
	z-index:700;
	width: 25%;
	height: 100px;
	overflow: scroll;
	overflow-scrolling: auto;


}

@keyframes largeimage {
    from {transform: scale(0,0);}
    to {transform: scale(1,1);}
}

#largeimage {
	background-color: #fff;
	position: fixed;
	top: 100px;
	left: 35%;
	width: 30%;
	min-width: 350px;
	height: auto;
	z-index: 2100;
	border: 4px solid white;
	animation-name: largeimage;
	animation-duration: 0.5s;
	transform-origin: top right;
	-webkit-transform-origin: top right;
	-moz-transform-origin: top right;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	-ms-transform: scale(1, 1);

}


.thumbnail {
	background-color: #fff;
	width: 18%;
	height: auto;
	cursor: pointer;
	border: 2px solid black;
	margin-right: 3%;
	margin-bottom: 10px;
}

.offspringimage .thumbnail,.offspringimage img {
	width:100px;
	vertical-align: top;
}


td p.image img.thumbnail{
	width: 100px;
}

#thumbnails .thumbnail:nth-of-type(4n+4)
{
	margin-right: 0;
}

.dropzone {
	width: 100%;
	height: 200px;
}

#paypal {
	position: absolute;
	top: 5px;
	right: 100px;
}

nav.pagelinks li {
	padding-top: 0;
	padding-bottom: 4px;
	padding-left: 0;
	padding-right: 0;
	margin-right: 20px;
	border-bottom: none;
	margin-bottom:4px;
}

nav.pagelinks li:hover, h3.pointer:hover {
	border-bottom: rgb(232, 99, 16) solid 4px ;
	margin-bottom:0px;
}

nav.pagelinks li.nophone:hover {
	border-bottom: none;
}

nav.pagelinks li.nophone a:hover {
	border-bottom: rgb(232, 99, 16) solid 4px ;
}


nav.pagelinks ul {
	margin-bottom:10px;
}

.close {
	width:30px;
	height:30px;
	background-image: url('../gfx/close-button.svg');
	background-size: 30px 30px;
	background-repeat: no-repeat;
	position: absolute;
	top:10px;
	right:10px;
	z-index:2;
}
#largeimage img {
	width:100%;
}

div#loginform {
	width:100%;
	height:100%;
	z-index: 5000;
	background-color: rgba(255,255,255,0.7);
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
}

div#loginform form {
	margin-left: auto;
	margin-right: auto;
	margin-top: 15%;
	width: 220px;
	padding: 20px;
	background-color: rgba(255,255,255,1);
	border: solid 1px black;
}
div#loginform label {
	display: block;
}

div#loginform input {
	width: 220px;
}

div#loginform input[type=submit]{
	display: block;
	margin-top: 10px;
}

#resetpw {
	width: 300px;
	margin-left:auto;
	margin-right: auto;
	background-color: rgba(255,255,255,0.8);
	padding: 20px;
}

#resetpw label {
	display: block;
}

#resetpw input[type=submit]{
	display:block;
}

#wrapper table.input {
	width:98%;

}

input {
	color: #000 !important;
}

#front div#frontlogo {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 10000;
	width: 20%;
	height: auto;
	padding: 10px;
	background-color: rgba(255,255,255,0.5);
}

p.life {
	font-size: 95%;
}

.link {
	color: blue;
}

.warning {
	color: rgb(232, 99, 16);
}

#addlitter {
	position: absolute;
	top: 40px;
	left: 200px;
	width: 600px;
	z-index: 5000;
	background-color: rgba(255,255,255,1);
	padding: 10px;
}

#addlitter label {
	display: inline-block;
	width:120px;
}

#addlitter p {
	margin-bottom: 5px;
}

#addlitter table {
	width: 580px;
	border-collapse: collapse;
	margin-top:10px;
	clear: both;
}

#addlitter td {
	padding-top: 5px;
	padding-bottom: 5px;
}

#addlitter .createbutton {
	margin-left: 10px;
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px;
	cursor: pointer;
}

#addlitter table td {
	width: 100%;

}

#addlitter ul{
	position:absolute;
	left:128px;
	padding:5px;
}

#addlitter li {
	display: block;
	cursor: pointer;
	width:200px;
	background-color: rgb(232, 99, 16);
}

#addlitter li:hover {
	background-color: #ccc;
}

#addlitter form {
	float: none;
}

section#cookieinfo {
	background-color: rgba(255,255,255,0.8);
	width: 30%;
	height:200px;
	position: absolute;
	bottom: 80px;
	right:0;
	z-index: 20000;
	padding: 10px;

}

#chart_div {
	position: absolute;
	right: 10px;
	top: 0;
	background: none;
}

#chart_ancloss, #chart_coi {
	position: relative;
	display: block;
	float: none;
	width: 100%;
	min-width: 260px;
}

#chart_ancloss {
	margin-left: -50px;
}

#anc_listings {
	float: left;
	width: 65%;
}

.loader {
	width: 100px;
	height:80px;
	padding: 10px 15px;
	border: #a0a0a0 solid 1px;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.9);
	background-image: url(../gfx/loader.gif);
	background-size: 40px 40px;
	background-position: center 50px;
	background-repeat:no-repeat;
	box-shadow: 0 0 10px 0px #aaa ;
	top: 45%;
	left:45%;
	margin-left: auto;
	margin-right: auto;
}
#loader {

  width: 100px;
	height:80px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
	border-radius: 10px;
  background-color: rgba(255,255,255,0.9);
	background-image: url(../gfx/loader.gif);
	background-size: 40px 40px;
	background-position: center 50px;
	background-repeat:no-repeat;
	position: absolute;
	box-shadow: 0 0 10px 0px #aaa ;
	top: 45%;
	left:45%;
	z-index: 5000;

}
.fb-like {
	margin-top:10px;
}

.movedown {
	margin-top:25px;
}

#litter_sire, #litter_dam, #litter_dob, #litter_breeder {
	width:200px;
}

#login header a {
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0) 100%);
	border-top-right-radius: 10px;
	border: 1px solid black;
	border-bottom: none;
	display: inline-block;
	width: 42%;
	padding:4px;
	margin:0;
}

.correct td input {
	width: 100%;
}

#newreg label {
	float: left;
	width: 150px;
	clear: both;
}
#newreg input {
	float:right;
	width: 400px;
}
#newreg {
	width: 600px;
}

#front #about {
	display: block;
	position: absolute;
	top: 120px;
	width: 60%;
	left: 200px;
	background-color: rgba(255,255,255,0.8);
	padding: 10px;
	border: 1px solid black;
}

#front #about ul {
	display: block;
	list-style-type: disc;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 40px;
	width: auto !important;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
}

#help {
	position: absolute;
	top: 90px;
	right: 20px;
	background-color: rgba(255,255,255,0.95);
	border: 1px solid black;
	padding: 10px;
	width: 300px;
	height: auto;
	padding-top: 20px;
	z-index: 9999;
}

#help p {
	padding-right:30px;
}
#help p.close{
	padding-right:0;
}


#helpmenu {
	position: absolute;
	z-index:9999;
	background-color: rgba(255,255,255,0.9);
	padding:10px;
	border: 1px solid black;
	border-top: none;
}

#helpmenu li {
	display: block;

}

#helpmenu li:hover {
	background-color:rgb(230,230,230);
}

div.note{
	font-size: 80%;
}


div.editablecontent:focus:before, div.note:focus:before, div.editablecontent:focus:after, div.note:focus:after {
	content:"";
}

.usersave {
	display: block;
	margin-top: 5px;
}

.reverse {
	line-height: 1;
}

.healthinfo {
	color: rgb(50,50,50);
	font-size: 90%;
	line-height: 1;
	margin:0;
	padding:0;
	margin-left: 0;
}

section.ancestordetails p{
	font-size: 90%;
}

ul.siblings{
	margin-left: 7px;
	padding-left: 0;
	list-style-type: none;
	line-height: 1;
}

ul.siblings li {
	font-size: 90%;
	margin-left:-7px;
	line-height: 1.3em;
}

ul.siblings li:before {
	content: "-";
	padding-right: 5px;
}

p.ancestorsiblings{
	margin-top:5px;
}


#select_print {
	width: 300px;
	height: auto;
	margin-left: 400px;
	background-color: rgba(255,255,255,0.9);
	border: solid black 1px;
	padding: 12px;
	margin-top: 70px;
	position: fixed;
	z-index: 2000;
}

#select_print label {
	display: block;
}


.input_container_advanced{
	display: grid;
	grid-template-columns: 25% 10% 45% 12% 8%;
	grid-gap: 10px;
	margin-right:10px;
	width: 95%;
}

.part {
	display: block;
}
.part label {
	display: block;
}
.part input {
	display:block;
}

button.part {
	margin-right:10px;
	height: 18px;
	width: 18px;
}
#input1 button.part {
	margin-top:18px;
}

div.advanced {
	display:grid;
	grid-template-rows: auto auto;
	grid-gap: 10px;
}

.part input,.part select {
	width: 100%;
}


@media only screen
  and (min-device-width: 310px)
  and (max-device-width: 800px)

 {
	@import url('phone.css?v0.1');

}

#offspringinfo {
	position:absolute;
	right: 10px;
	top:300px;
	min-width:100px;
	width: auto;
	background-image: url("../gfx/loader.gif");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50px 50px;
	min-height: 100px;
	max-width:40%;

}

#anc_listings th {
	border:none;
	text-align: left;
}

#languages {
	padding-top:8px;
}

#languages a {
	display:inline-block;
}

#languages a img {
	height: 12px;
}

#usage #languages {
	float: left;
}