/* ==========================================================================
   Custom styles for Kennel Magic Colour
   ========================================================================== */


/* ==========================================================================
   General Layout
   ========================================================================== */
html  {
	 height: 100%; /* To stretch the content to the full screen height */
}

body {
	height: 100%; /* To stretch the content to the full screen height */
	background: linear-gradient(to right,  #CCCCCC,  #696969, #696969, #696969, #696969,  #CCCCCC );
	position: relative;
}
@media (max-width: 768px) {
  body {
    background:  #e7e7e7;  /* no gradient on very small media */
  }
}

/* Navigation bar */
.navbar-header, .navbar-brand {
	padding: 0; /* To let the logo take the full height */
}

li.active > a {
	font-weight: bold;
	font-style: italic;
	border-radius: 5px 5px 0px 0px;
}

#btnWebShopHeader {
	margin-top: 15px;
}

/* Content container */
#contentContainer {
	min-height: calc(100%); 
    background-color:  #e7e7e7;
	    padding-top: 50px; /* The height of the Navigation bar */
    padding-bottom: 50px;
}

/* Sidebar container */
.sidebar-content {
	padding-right: 0;
	overflow: hidden;
	padding-bottom: 14px;
}

/* Footer */
footer {
	background-color: #003366;
}

ul.footercontact {
	margin: 0;
	padding: 0 22 22 0;
	width: 100%;
	text-align: center;
}
 
ul.footercontact > li {
		display: inline-block;
		font-size: 14px;
		border-radius: 28px;
		width: 30px;
		text-align: center;
		padding: 4px; 
		margin: 6px 10px 6px 10px; /* top right bottom left */
	}

/* ==========================================================================
   General Helper Classes
   ========================================================================== */
/* links in running text */
p > a:hover, p > a:focus,
p > small > a:hover, p > small > a:focus {
	color: #e7e7e7;
	background-color: #003366;
	text-decoration: none;
}

.text-white {
  color: white;
}
a.text-white:hover,
a.text-white:focus {
  color: white;
  font-weight: bold;
  background-color: transparent;
  text-decoration: none;
}

.text-warning {
  color: #8a6d3b;
}
a.text-white:hover,
a.text-white:focus {
  color: white;
  font-weight: bold;
  background-color: #8a6d3b;
  text-decoration: none;
}

.vertical-text {
	transform: rotate(90deg);
	transform-origin: center center 150;
	float: right;
}

img {
	margin: auto auto;
	max-width: 100%;
	max-height: 100%;
}
.img-responsive{max-width:100%;}

.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th {
  background-color: #003366;
  color: #e7e7e7;
}
.table-hover > tbody > tr > td.primary:hover,
.table-hover > tbody > tr > th.primary:hover,
.table-hover > tbody > tr.primary:hover > td,
.table-hover > tbody > tr:hover > .primary,
.table-hover > tbody > tr.primary:hover > th {
  	color: #003366;
	background-color: #e7e7e7;
}

.table-small-text {
	font-size: 80%;
}
.thumbnail {
	box-shadow: +2px -2px 8px dimgrey; 
}
/* ==========================================================================
   Index.php specific 
   ========================================================================== */
.carousel-caption {
	text-align: left;
	padding-left: 25px;
	padding-bottom: 0px;
}

.widget {
	margin-top: 3em;
}

.img-slideshow {
	max-width: 50%;
	height:50px;
}

.panel-danger {
    border-color: #e53f3f;
}
.panel-danger > .panel-heading {
    color:	white;
    background-color: #e53f3f;
    border-color: #e53f3f;
    background-image: linear-gradient(to bottom, #e53f3f 0, #ebcccc 100%);
	background-repeat: repeat-x;
 }

/* ==========================================================================
   Rightsidebar.php specific 
   ========================================================================== */
a.actuelIndex {
	overflow: hidden;
}
select#actualIndex {
	margin-top: 2em;
}

/* ==========================================================================
   News.php specific 
   ========================================================================== */

.newsTable > thead > tr > th,
.newsTable > tbody > tr > th,
.newsTable > tfoot > tr > th {
		padding-top: 1.5em;
		border-top: 2px solid #dddddd;
		font-weight: normal;
}

.newsTable > thead > tr > td,
.newsTable > tbody > tr > td,
.newsTable > tfoot > tr > td,
.newsTable > thead > tr:first-child > th,
.newsTable > tbody > tr:first-child > th,
.newsTable > tfoot > tr:first-child > th  {
  		border: 0;

}

.newsTable  tr  td  a .img-responsive {  /* Image size max 90% of table cell */
	width:	90%;
}
    
.newsTable  tr  td, .newsTable  tr  th {  /* Image size max 90% of table cell */
	width:	50%;
}


/* ==========================================================================
   Activity.php specific 
   ========================================================================== */
.caption {
	height: 15em;
}

a.active {background-color: red; color:red;}


/*
.scrollToTop{
	width:100px; 
	height:130px;
	padding:10px; 
	text-align:center; 
	background: whiteSmoke;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	top:75px;
	right:40px;
	display:none;
	background: url('../img/puppy/Arrow_Up.png') no-repeat 0px 20px;
}*/
.scrollToTop:hover{
	text-decoration:none;
}

/* ==========================================================================
   Litter.php specific 
   ========================================================================== */
.picture-text {
	padding-top: 0;
	padding-bottom: 2em;
	margin-top: -1.5em;
	margin-bottom: 0;
}



div.affix {
    right: 100;
    top: 50px;
    word-wrap: break-word;
}



.flexrowbottom {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
}

.flexrowbottom img {
	margin-top: 2em;
}

table.table-pedigree tr td {
     vertical-align: middle;
}

/* ==========================================================================
   Avoiding SPAM
   ========================================================================== */
#emailConfirm { display: none; }