/* Structure */

body {
	font-family: arial, sans-serif;
	font-size:100%;
	/*min-width: 1200px;*/
	background-image:url(../backgrounds/page.jpg);
	background-repeat:repeat;
	background-attachment:fixed;
	background-position: bottom center;
	margin-top: 0;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}

h2 {
	text-align: left;
	padding-top: 1em;
}
/*#masthead {*/
	/*height: 150px;*/
	/*background:#EEDBEE none repeat scroll 0 0;*/
	/*margin: 0;*/
	/*padding: 0;*/
	/*!*border-bottom: gray inset;*!*/
/*}*/

#masthead {
	height: 150px;
	background-image: url("../masthead/masthead-image.jpg");
	background-color: #EEDBEE;
	background-repeat: no-repeat;
	background-position: right;

}

.banner{
	margin-left: 10px;
	/*margin-top: 15px;*/
/*@include display(inline-flex);*/
/*@include flex-direction(column);*/
/*@include align-items(center);*/
}

.banner p:first-child {
	font-size: xx-large;
	/*margin-left: 1em;*/
	margin-bottom: 0;
	margin-top: 0;
	padding-top: 10px;
}

.banner p:last-child {
	font-size: large;
	font-style: italic;
	margin-top: 0;
	margin-left: 30px;
}
/* -------   end masthead ---------- */

#main {
    margin-top: -5px;
	margin-left: 5px;
	margin-right: 5px;
}

#content {
	margin-left: 1em;
	margin-right: 1em;
	color: black;
}

/*#navigation {*/
	/*float: right; /!* change news-item float if you change this *!/*/
	/*margin: 1em;*/
	/*padding: .5em;*/
/*}*/

/*#navigation a {*/
	/*font-size: 12px;*/
	/*color: #000066;*/
	/*text-decoration: none;*/
	/*}*/

/*#navigation #home a, #navigation #blog a, #navigation #puppies a {*/
		/*text-align: left;*/
		/*font-size: 20px;*/
		/*font-style: italic;*/
		/*font-weight: bold;*/
		/*color: #000066;*/
	/*}*/

/*#navigation a:hover, #navigation #home a:hover, #navigation #blog a:hover  {*/
	/*color: #FFFFFF;*/
	/*background: #737FA8;*/
/*}*/

/*#navigation p {*/
	/*text-align: left;*/
	/*font-size: 14px;*/
	/*font-style: italic;*/
	/*font-weight: bold;*/
/*}*/


.footer {
  clear: both;
}

.w3c-validated {
	text-align: center;
}

.w3c-validated a {
	padding-right: 1em;
}

.copy-right {
	font-size: 10px;
	text-align: center;
	display: block;
}

.logos {
	text-align: center;
	float: left;
}

.logos img{
	padding: .5em;
}

.logos p {
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	color: #000066;	
}

.click-for a {font-size: 20px;}
.anchor-list a {padding-right: 1em;}
.anchor-list {text-align: center;}
.anchor-list-large a {padding-right: 1em; font-size: 20px;}
.anchor-list-large {text-align: center;}

.photo-array-small {
	float: left;
}

.photo-array-small td {
	padding: .5em;
}

.gallery  {
	margin-left: auto;
	margin-right: auto;
}

.gallery-image  {
	float: left;
	width: 275px;
	height: 475px;
	overflow: scroll;
}

.gallery-image p {
	margin-left: 1em;
	margin-right: 1em;
}

.gallery-image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.photo-sidebar-left {
	clear: left;
	float: left;
	margin-bottom: 1em;
	margin: 1em;	
}

.photo-sidebar-right {
	clear: left;
	float: right;
	margin-bottom: 1em;
	margin: 1em;	
}

.photo-strip-with-caption {
	float:left;
	max-width: 260px;
	margin-left: auto;
	margin-right: auto;
}

.photo-with-caption {
	/* max-width: 260px; */
}

.photo-list {
    width: 320px;
    height: 350px;
    float: left;
    text-align: center;
    font-weight: bold;
    padding: .25em;
}

.photo-caption {
	text-align: center;
	font-weight: bold;
}

.photo-title {
	text-align: center;
	font-weight: bold;
}
.news-item {
	clear: left; /* change this to right if you put the navigation on the left */
	padding-top: 1em;
}

.news-item h3 {
	padding-top: .75em;
}

.news-item img {padding:10px;}

div#pedigree-table table {
	clear: left; /* change this if you put the navigation on the left */
	border-collapse: collapse;
	border-style: solid;
	border-width: thin;
	margin-top: 1em;
	empty-cells: show;
}

div#pedigree-table td {
	border: groove;
	text-align: center;
	padding: .25em;
}

div#pedigree-table th {
	background-color: #EEDBEE; /* Lavender; */
	border: groove;
	text-align: center;
	font-size: 120%;
	font-weight: bold;
}

.album-page-link, .album-fullpage-link {
    clear: left;
	text-align: center;
}

.album-thumbnail {
	overflow: auto;
    clear: left;
}

.album-thumbnail table {
	clear: left;
}

.album-thumbnail td {
	text-align: center;
	font-size: .8em;
	width: 480px;
}

.album-thumbnail img {
	border:none;
	width: 480px;

}
.album-page-link a, .current-link-marker, .album-fullpage-link, .album-fullpage-link-marker {
    padding-top: 2em;
	padding-right: .5em;
	/*padding-bottom: 1em;*/
}

.album-content {
    clear:left;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
	padding: 1em;
}

.album-content img {
	border: none;
	padding: .25em;
}

.album-content td {
	padding: .25em;
}

.link-large {
	font-size: 20px;
}

.attention {
	font-size: 125%;
	font-weight: bold;
	/* color: #8B008B; DarkMagenta */
	color: #191970; /*MidnightBlue */
}

.table-pedigree-info {
	border-collapse: collapse;
	border-style: solid;
	border-width: thin;
	margin-top: 1em;
	empty-cells: show;
}

.table-pedigree-info td {
	border: groove;
	padding: .25em;	
	border-color: #D3D3D3; /* LightGrey */
}

/* Background for first column */
.table-pedigree-info td:first-child {
	background-color: #D3D3D3; /* LightGrey */
}

/* Thick right border on 2nd column */
.table-pedigree-info tr > td:first-child + td {
	border-right-style: solid;
	border-right-width: 5px;
	border-right-color: #808080; /* Grey */
	
}

/* Bold the names - all but the first column of first row */
.table-pedigree-info tr:first-child  td + td {
	font-weight: bold;
}

.health-scores-new td:first-child {
    font-weight: bold;
}

.health-scores {
	border-collapse: collapse;
	border: 1px solid black;
}

.health-scores th {
	background: #EEDBEE;
	border: 1px solid black;
	padding: .5em;}

.health-scores td {
	background: #EEEEEE;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: .25em;
}

.test-title {
    font-weight: bold;
    margin-right: 1em;
}
.test-name {
	/* background: #EEEEEE; */
}

.test-result {
	/* background: #FBFBFB; */
}

.courtesy {
	font-size: 8px;
	font-style: italic;
}

.available-now img {
	float: left;
	padding-right: 1em;
}

.available-now td {
	padding: .5em;
}

.lead-in {
	float:left;
	font-size: 24px;
	font-weight: bold;
	font-style: italic;
	padding: .25em;
	padding-right: 1em;

}

.little-lead-in {
	float:left;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	padding-right: .5em;

}

.medium-lead-in {
	float:left;
	font-size: 18px;
	font-weight: bold;
	font-style: italic;
	padding: .25em;
	padding-right: .5em;

}


#recent-family-updates {
	clear: left;
}

.recent-family-updates {
	float:left;
}
#questionaire textarea {clear:left}

a.more-less {
	text-decoration:none;
}

.image-top {vertical-align:top}

.current-video {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
.current-video a {
	clear: left;
}

#navigation {
	background-color: #3a3a3a;
}

@media screen and (min-width:900px) {

	#toggle-menu {
		display: none;
	}

	#primary_nav_wrap {
		padding-top: 10px;
		padding-left: 1em;
		font-size: 18px;
		color: white;
	}

	#primary_nav_wrap ul {
		list-style: none;
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}

	#primary_nav_wrap ul a {
		display: block;
		color: whitesmoke;
		text-decoration: none;
		font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
	}

	#primary_nav_wrap ul a:hover {
		background: lightgrey;
		color: #3a3a3a;
	}

	#primary_nav_wrap ul li {
		position: relative;
		float: left;
		margin: 0;
		padding-left: 10px;
		padding-right: 10px
	}

	#primary_nav_wrap ul li:hover {
		background: lightgrey;
		color: #3a3a3a;
	}

	#primary_nav_wrap ul ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background: #3a3a3a;
		padding: 0
	}


	#primary_nav_wrap ul ul a {
		padding: 10px;
	}


	#primary_nav_wrap ul li:hover > ul {
		display: block;
	}

	li.icon {
		display: none;
	}

	#nav-spacer {
		margin-top: -5px;
		padding-top: 25px;
		padding-bottom: 5px;
		border-bottom: black inset;
		background: #3a3a3a;
	}
}

@media screen and (max-width:899px) {
	.hide {
		display: none;
	}

	#toggle-menu {
		padding-left: 10px;
	}

	#masthead-logo {
		display: none;
	}

	#primary_nav_wrap {
		clear: left;
		font-size: 18px;
		background: #3a3a3a;
		color: white;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	#primary_nav_wrap li {
		padding-top: 1em;
	}

	#primary_nav_wrap a {
		color: white;
		text-decoration: none;
	}

	#primary_nav_wrap ul {
		list-style: none;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	#primary_nav_wrap ul ul {
		display: none;
	}

	#primary_nav_wrap ul li:hover > ul {
		display: block;
		padding-left: 20px;
	}

}

@media screen and (max-width:640px) {

	#masthead {
		height: 150px;
		background-image: url("../masthead/masthead-image-opaque-1.jpg");
		background-color: #EEDBEE;
		background-repeat: no-repeat;
		background-position: right;

	}

	.hide {
		display: none;
	}

	#toggle-menu {
		padding-left: 10px;
	}

	#masthead-logo {
		display: none;
	}

	#primary_nav_wrap {
		clear: left;
		font-size: 18px;
		background: #3a3a3a;
		color: white;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	#primary_nav_wrap li {
		padding-top: 1em;
	}

	#primary_nav_wrap a {
		color: white;
		text-decoration: none;
	}

	#primary_nav_wrap ul {
		list-style: none;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	#primary_nav_wrap ul ul {
		display: none;
	}

	#primary_nav_wrap ul li:hover > ul {
		display: block;
		padding-left: 20px;
	}

	.health-scores,p,h1,h2,table {
		clear: left;
		margin-left: 5px;
		margin-right: 5px;
	}

	.photo-sidebar-left {
		clear: both;
		float: none;
	}
	.photo-sidebar-left img {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

}
/*
	this rule allows IE9 and below to display somewhat reasonably
	an html conditional (which is only executed by IE) ensures heartsong-flex.css is not not loaded in IE9 and below
*/

.flex-item {
	float: left;
}

/*
	heartsong-flex.css will be loaded after heartsong, provided the browser is not IE..   see the conditional html
	in <head> for details
*/