/*---------- Element stylings ----------*/
.container {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

h1 {
	color: #AF5721;
}

h2 {
	color: #AF5721;
	font-size: 20px;
	font-weight: bold;
}

h3 {
	font-size: 16px;
}

img {
	border-radius: 5px;
}

a {
	color: #AF5721;
}

a:hover {
	color: #AF5721;
}

a:active {
	color: #AF5721;
}

a:focus {
	color: #AF5721;
}

/*---------- Header banner ----------*/
/* Banneret i toppen af siden */
.header .container {
	height: 160px;
	padding: 5px;
	cursor: pointer;
}

.header .title {
	color: #AF5721;
	margin-top: 20px;
}

.header .title h1 {
	font-size: 36px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
}

.header .title p {
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	position: relative;
	left: 90px;
}

.header .header-image img {
	height: 150px;
}

/* Header image cycler */
#cycler {
	position: relative;
	height: 100%;
	width: 150px;
}
#cycler img {
	position: absolute;
	z-index: 1;
}
#cycler img.active {
	z-index: 3;
}

/*---------- Navigation ----------*/
.navigation .container {
	border: 1px solid;
	border-color: #5C3A00 white;
	padding: 5px;
	clear: both;
}

.nav-pills li.active a {
	background-color: #AF5721;
}

.nav-pills li.active a:hover {
	background-color: #AF5721;
}

.nav-pills li.active a:focus {
	background-color: #AF5721;
}

.nav-pills li a {
	color: #AF5721;
}

.nav-pills li a:hover {
	background-color: #F5C677;
}

/*---------- Indhold ----------*/
.contents .container {
	margin-top: 20px;
	padding-top: 5px;
}

.contents .showcase p {
	font-size: 12px;
}

.contents h2 {
	margin-top: 0;
}

.hunde-info {
	padding-top: 25px;
}

.thumbnail {
	border: none;
	color: black;
}

a.thumbnail {
	text-align: center;
	color: black;
}

.square-thumb {
    width: 250px;
    height: 250px;
}

.kuldbilledelink {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.kuldinfona {
	text-align: center;
}

table, th, td {
	margin: 15px 0;
	border: 1px solid #AF5721;
	border-collapse: collapse;
}

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

.kuldoversigt td {
	width: auto;
}

.stamtavle th,td {
    padding: 5px 15px;
    height: 50px;
    width: 30%;
}

.spacer {
	display: block;
	height: 100px;
}

/* fb-like-box */
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {
	width: 100% !important;
}

/*---------- Elementer med id ----------*/
/* Styling af specifiker elementer på siden */
#om-mig {
	background-color: #F5C677;
	border-radius: 5px;
	padding-top: 10px;
}

#om-mig div {
	background-color: #F5C677;
}

#kontakt {
	text-align: center;
}

/*---------- Lightbox galleri ----------*/
#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:url(images/overlay.png) repeat; 
    text-align:center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	z-index: 4; /* Places the lightbox at the top of the stack */
}

#lightbox p {
    text-align: center; 
    color: #fff; 
    margin-right: 20px;
    margin-top: 10px;
    font-size: 14px;
}

#lightbox span {
	color: #fff;
	text-stroke: 1px black;
	-webkit-text-stroke: 1px black;
	-o-text-stroke: 1px black;
}

#lightbox #content {
	display: block;
	border: solid 5px #fff;
    box-shadow:0px 0px 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    border-radius: 5px;
    max-width: 950px;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #fff;
    text-align: center;
}

#lightbox img {
    max-width: 940px;
    max-height: 80%;
}

#lightbox .arrow-prev {
	display: block;
	width: 50%;
	height: 100%;
	text-align: left;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#lightbox .arrow-prev:hover {
	opacity: 1;
}

#lightbox .arrow-prev span {
	position: absolute;
	top: 50%;
	left: 5%;
}

#lightbox .arrow-next {
	display: block;
	opacity: 0;
	width: 50%;
	height: 100%;
	text-align: right;
	float: right;
	position: absolute;
	top: 0;
	right: 0;
}

#lightbox .arrow-next:hover {
	opacity: 1;
}

#lightbox .arrow-next span {
	position: absolute;
	top: 50%;
	right: 5%;
}

#lightbox .close {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 5px;
	right: 5px;
	opacity: 0.8;
	text-align: right;
}

#lightbox .close:hover {
	opacity: 1;
}

/*---------- footer på siden ----------*/
.footer .container {
	padding: 5px;
	border-top: 1px solid #5C3A00;
}

.footer p {
	color: #AF5721;
	font-size: 10px;
	margin: auto;
}

/*---------- Corrections for mobile devices ----------*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
	.container {
		max-width: 100%;
	}
	.header .container {
		height: 100px;
		padding: 5px;
		margin: 0;
	}
	
	.header .title {
		margin: 0;
	}

	.header-image {
		display: none;
	}
	
	.header .title p {
		font-size: 14px;
		font-family: Helvetica, Arial, sans-serif;
		position: inherit;
	}
	
	#lightbox #content {
	    max-width: 100%;
	    max-height: 95%;
	}
	
	#lightbox img {
	    max-width: 100%;
	    max-height: 100%;
	}
	
	#lightbox .arrow-prev {
		opacity: 1;
	}
	
	#lightbox .arrow-next {
		opacity: 1;
	}
	
	#lightbox .close {
		opacity: 1;
	}
	
	.non-mobile {
		display: none;
	}
	
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	
	.container {
		max-width: 100%;
	}
	
	#lightbox #content {
	    max-width: 90%;
	    max-height: 90%;
	}
	
	#lightbox img {
	    max-width: 100%;
	    max-height: 100%;
	}
	
	#lightbox .arrow-prev {
		opacity: 1;
	}
	
	#lightbox .arrow-next {
		opacity: 1;
	}
	
	#lightbox .close {
		opacity: 1;
	}
	
}