html {
	height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 10pt;
	background-color: #754825;
	height: 100%;
	margin: 0;
	background-image: url(img/bg-body.jpg);
}

a:link {
	color: #743f00;
}

a:visited {
	color: #4c2900;
}

h1 {
	font-weight: 300;
	font-size: 26pt;
	color: #743f00;
}

h2 {
	color: #743f00;
}

.page {
	display: block;
	position: relative;
	width: 94%;
	max-width: 1145px;
	min-width: 800px;
	margin: 50px auto;
	background-color: #FFFBEB;
	/* Webkit (Safari/Chrome) */ -webkit-box-shadow: 0px 2px 17px 0px #000000;
	/* Mozilla Firefox */ -moz-box-shadow: 0px 2px 17px 0px #000000;
	/* Proposed W3C Markup */ box-shadow: 0px 2px 17px 0px #000000;
	min-height: 85%;
	padding-bottom: 30px;
}

.header {
	display: block;
	position: relative;
	width: 100%;
	height: 590px;
	background:url(img/bg-header.jpg) top center no-repeat;
	background-size:cover;
	border-bottom: solid 1px #000;
	
	/* Webkit (Safari/Chrome) */ -webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,.3);
	/* Mozilla Firefox */ -moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,.3);
	/* Proposed W3C Markup */ box-shadow: 0px 2px 1px 0px rgba(0,0,0,.3);
}

	#art-logo {
		margin: 20px;
	}

	#logo-1 {
		display: block;
		position: absolute;
		top: 7%;
		left: 10%;
		width: 42%;
	}
	
	#logo-2 {
		display: block;
		position: absolute;
		top: 49%;
		left: 40.5%;
		width: 13%;
	}
	
	#logo-3 {
		display: block;
		position: absolute;
		top: 9%;
		left: 20%;
		width: 50%;
	}
	
	#wifi {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 10%;
		max-width: 52px;
	}
	
	#lights {
		display: none;
		width: 100%;
		position: absolute;
		top:0;
		left:0;
		z-index: 2;
	}
	
		#light-l {
			display: none;
			position: absolute;
			top: -111px;
			left: -89px;
		}
		
		#light-r {
			display: none;
			position: absolute;
			top: -111px;
			right: -89px;
		}

	#menu {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 89px;
		background:url(img/bg-nav.png);
		z-index: 3;
	}
	
		#contacts {
			display: block;
			float: left;
			width: 28%;
			font-size: 10pt;
			line-height: 23pt;
			margin-left: 2%;
		}
		
			#contacts a {
				color: #fff;
				
			}
		
		#homelink, #message {
			display: block;
			float: left;
			width: 10%;
			color: #fff;
			text-align: center;
			padding-top: 10px;
			text-decoration: none;
			cursor: pointer;
		}
	
		.nav {
				display: block;
				float: left;
				width: 49%;
				padding: 0;
				margin: 0;
				font-size: 12pt;
				font-weight: 300;
				background:url(img/bg-navbutton.png);
				border-right: solid 1px #795e44;
			}
			
			.nav > li {
				display: block;
				float: left;
				width: 19.5%;
				height: 89px;
				text-align: center;
				color: #fff;
				position: relative;
				border-left: solid 1px #795e44;
			}
			
			.menu-label {
				display: inline-block;
				text-decoration: none;
				color: #523b28;
				cursor: pointer;
				margin-top: 28px;
			}
			
			.nav a:link, .nav a:visited {
				color: #523b28;
			}
			
			.submenu {
				display: block;
				position: absolute;
				left: 0;
				top: 89px;
				margin: 0;
				padding: 0;
				height: 0;
				overflow: hidden;
				list-style: none;
				background-color: #a86908;
				border-left: solid 1px #795e44;
				border-right: solid 1px #795e44;
				z-index: 10;
				font-size: 11pt;
				line-height: 20pt;
				font-weight: 400;
			}
			
			.submenu-visible {
				border-bottom: solid 1px #795e44;
				/* Webkit (Safari/Chrome) */ -webkit-box-shadow: 0px 2px 6px 0px #000000;
				/* Mozilla Firefox */ -moz-box-shadow: 0px 2px 6px 0px #000000;
				/* Proposed W3C Markup */ box-shadow: 0px 2px 6px 0px #000000;
			}
			
				.submenu li {
					margin: 5px 10px;
				}
				
				.submenu a:link, .submenu a:visited {
					color: #fff;
					text-decoration: none;
				}
				
.fullpage-content {
	width: 96%;
	margin: 2%;
	position: relative;
	z-index: 2;
}
	
#Content {
	width: 68%;
	float: left;
	margin: 2%;
	position: relative;
	z-index: 2;
}

	#Content .ui-accordion-header {
		font-weight: bold;
		font-size: 10pt;
	}
	
	#Content .ui-accordion-content {
		font-size: 10pt;
	}

#aside {
	position: relative;
	display: block;
	width: 25%;
	padding: 2% 2% 2% 0;
	float: left;
	z-index: 2;
}

.short {
	font-weight: 300;
	font-size: 12pt;
	margin-bottom: 20px;
}

#footer {
	display: block;
	width: 92%;
	margin: 2%;
	padding: 2%;
	border-top: solid 1px #523b28;
}

/* Frontpage */

#slides {
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
}

.slide {
	max-width:100%;
	margin: 0 auto;
	position: relative;
	display: none;
}

.current-slide {
	display: block;
}

/* News */

.newsInterval {
	text-align: center;
	margin-bottom: 30px;
	font-size: 8pt;
}

.newsListDate {
	font-size: 8pt;
}

.newsListImage {
	display: block;
	float: left;
	width: 200px;
	height: 200px;
	margin-right: 20px;
	-webkit-background-size: cover;
	background-size: cover;
}

.newsListItem {
	display: block;
	float: left;
	width: 48%;
	margin: 1%;
}

.news-image {
	display: block;
	max-width: 40%;
	float: left;
	margin: 0 2% 2% 0;
}

.news-lead {
	font-size: 12pt;
	margin-bottom: 20px;
}

/* Animals */

.animal-div {
	display: block;
	float: left;
	width: 31%;
	height: 230px;
	margin: 1%;
	position: relative;
	
}
	
.animal-div .image {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* --- Admin ------ */

#door {
    position:absolute;
    top: 5px;
    right: 2px;
z-index: 1000;
}

#door a, #door img {
    border: 0;
}

#admPanel22 {
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    padding: 0px 10px 10px 10px;
    background-color: #999;
    opacity: .85;
    border: solid 1px #fff;
    overflow: hidden;
	z-index: 1000;
}

#admPanel22 a:link, #admPanel22 a:visited {
    color:#000;
}

#managed-media-icon {
	display:none;
	position: absolute;
	cursor: pointer;
	width: 20px;
	z-index: 1000;
}

#managed-media-dialog {
	font-size:8pt;
}


/* UI fixes */

.ui-widget {
	font-family: 'Open Sans', sans-serif !important;
}

#front-Content h3.ui-accordion-header {
	font-weight: 600;
}

#front-Content .ui-accordion-content {
	font-size: 9pt;
}

/* Utility */

strong {
	font-weight: 600;
}

.allwide {
    width: 100%;
}

.halfwide {
    width: 50%;
}

.half-or-full {
	width: 48%;
	margin-right: 2%;
	float: left;
}

.third-or-full {
	display: block;
	width: 100%;
}

.pad10 {
    margin:10px;
}

.clear {
    clear: both;
}

.half {
    display: block;
    width: 49%;
    margin-right: 1%;
    float: left;
}

.clickable {
    cursor:pointer;
}

.itemHidden {
	opacity: .6;
}

.right-dashes {
	border-right: 2px dotted #F18D1B;
}
.center {
	text-align: center;
}
.right {text-align: right;}
.max-100 {
	max-width: 100%;
}
.no-caps {
	font-variant: normal !important;
}
.float-right {
	display: block;
	float: right;
}

.layout-table {
	width: 100%;
	border: none;
}

.layout-table td {
	text-align: left;
	vertical-align: top;
	padding: 10px;
}

.ruledTable {
	border: solid 1pt #555;
}

.ruledTable td {
	border-collapse: collapse;
	border: solid 1pt #555;
	padding: 7px;
}

.black {
	color: #000;
}

.hide {
	display: none;
}

#sortable {
	list-style: none;
}

#sortable li {
	display: inline-block;
	border: solid 1px #ccc;
	text-align: center;
	padding: 7px;
}

.media-wrapper {
	display: block;
	background-position: center;
	background-size: cover;
}

.form-container {
	position: relative;
}

.form-control {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1000;
}


.square-2 {
	display: block;
	float: left;
	width: 46%;
	height: 0;
	padding-bottom: 46%;
	margin: 0 4% 4% 0;
}

.square-5 {
	display: block;
	float: left;
	width: 18%;
	height: 0;
	padding-bottom: 18%;
	margin: 0 2% 2% 0;
}

.square-3 {
	display: block;
	float: left;
	width: 31%;
	height: 0;
	padding-bottom: 31%;
	margin: 0 2% 2% 0;
}


.square-4 {
	display: block;
	float: left;
	width: 23%;
	height: 0;
	padding-bottom: 23%;
	margin: 0 2% 2% 0;
}

.one-third {
	display: block;
	float: left;
	width: 31%;
	margin-right: 2%;
}

.missing {
	background-color: #f77;
}

@media only screen and (min-width: 100px) {
	
	.one-third, .half-or-full {
		width: 98%;
	}
	
	
}


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

	.header {
		height: 400px;
	}

	.half-or-full {
		width: 48%;
	}
	
	.one-third {
		width: 31%;
	}

}

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

	.header {
		height: 460px;
	}
	
	
	.nav {
		font-size: 13pt;
	}
	
	#contacts {
			font-size: 11pt;
	}
	
}


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

	.header {
		height: 500px;
	}
   

}

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

	.header {
		height: 560px;
	}
   
	#lights, #light-l, #light-r {
		display: block;
	}
	
	.nav {
		font-size: 14pt;
	}

}