/* ==========================================================================
   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;
}

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

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


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;
	bottom: 0 ;
	left: 1%;
 	right: 1%;
}

.widget {
	margin-top: 3em;
}


/* ==========================================================================
   Coat.php specific 
   ========================================================================== */
#btnMeasure {
	margin-top: 0.5em;
	margin-bottom: 0;
	padding-bottom: 0;
}


/* ==========================================================================
   Fleece/Doublefleec/Teddy/ .html specific 
   ========================================================================== */
.fabric-colour small {
  display:		 block;
  line-height: 		1em;
  padding-top: 		0;  
  margin-top: 		-1em;
  padding-bottom:	0;
  margin-bottom: 	2em; 
}


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