* { border: 0; margin: 0; padding: 0; }

/* Guides */

#frame { background: yellow; }
#banner { background: gold; }
#logo { background: blue; }
#nav { background: red; }
#arkells { background: purple; }
#content { background: pink; }
#copyright { background: red; }
#side { background: aqua; }
#footer { background: brown; }


/* Style */

#frame { background: #d9d7c4; }
#banner { background: #c29180; }
#logo { background: transparent url('images/logo.jpg') top left no-repeat; background-size: 90%; }



#arkells { background: #d9d7c4 url('images/arkells.jpg') top left no-repeat; background-size: 100%;  }
#nav { background: transparent; font-family: 'Fjalla One', sans-serif; font-size: .9em; text-transform: uppercase; }
#nav ul { margin-left: 6%; }
#nav ul li { letter-spacing: 1px; margin-right: 2%; }
#nav ul li a { color: #3a2626; text-decoration: none; }
#nav ul li a:hover { color: #d9d7c4; }
#nav ul li.selected a { color: #d9d7c4; }

#wrapper { background: #d9d7c4; }
#content { background: transparent; color: #615748; font-family: arial; font-size: .75em; line-height: 150%; }
#content h2 { color: #3a2626; font-family: 'Fjalla One', sans-serif; font-size: 1.25em; font-weight: normal; letter-spacing: 1px; margin-bottom: -20px; text-transform: uppercase; }
#copyright { background: transparent; color: #3a2626; font-family: 'Fjalla One', sans-serif; font-size: .8em; letter-spacing: 1px; margin: 20px 0 0 4%; text-transform: uppercase; width: 100%; }
#footer { background: #c29180; }


/* Shape */
#frame { margin: 20px auto; max-width: 950px;  position: relative; width: 95%; }
#banner { display: inline-block; height: 144px; width: 67.5%; vertical-align: top; }
	#logo { height: 120px; width: 100%; }
	#nav { width: 100%; }
	#nav ul { list-style: none; }
	#nav ul li { display: inline-block; }
#arkells { display: inline-block; height: 144px; width: 32.5%; vertical-align: top; }

#tel { background: url('images/tel.png'); height: 124px; position: absolute; right: 17.5%; text-indent: -5000px; top: 250px; width: 124px; z-index: 500; }

#splash { height: 0; padding-bottom: 29%; width: 100%; }
#splash img { width: 100%; }

ul.slidesPagination { display: none; }
.slidesContainer { height: inherit !important; padding-bottom: inherit; }

#wrapper { min-height: 300px; padding: 20px 0; width: 100%; }

#content { display: inline-block; margin-left: 4%; min-height: 200px; width: 61%; vertical-align: top; }
	#content.wide { width: 95%; }
#content a { color: #812f1f; }

h2.menu_button { font-size: 1.1em; margin-bottom: 5px !important; margin-top: 10px; }
h2.menu_button a { color: inherit; text-decoration: none; }
.menu { display: none; }

form { margin-top: 20px; }
form dl { margin-bottom: 10px; }
form dl dd input { padding: 4px; width: 250px; }
form input.submit { background: #812f1f; border: 1px solid #888; color: white; margin-top: 10px; padding: 5px; }
label.error { float: none; color: #cc0000; margin-left: 2px; padding-left: .5em; vertical-align: top; }

#side { background: transparent; display: inline-block; margin-left: 2.8%; min-height: 200px; width: 30%; vertical-align: top; }

.portlet { color: #615748; font-family: arial; font-size: .75em; line-height: 150%; margin-bottom: 20px; padding-bottom: 5px; width: 100%; }
.portlet div { margin: 5px 10px; }
.p1 { background: #adc1bb; }
.p2 { background: #812f1f; }
.p3 { background: #c29180; }

.p2 a { color: white !important; }
.p2 h3 { color: white !important; }

.p3 a { color: white !important; }
.p3 h3 { color: white !important; }

.portlet a { color: #615748; text-decoration: none; }
.portlet h3 { color: #3a2626; font-family: 'Fjalla One', sans-serif; font-size: 1.2em; font-weight: normal; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.portlet img { width: 100%; }



		
		dl.gallery { width: 100%; }
		dl.gallery dd { display: inline-block; height: 200px; margin: 0 5px 10px 0 !important; overflow: hidden !important; width: 200px; vertical-align: top; }
		dl.gallery dd img.portrait { width: 100%; margin-top: -25%; vertical-align: top; }
		dl.gallery dd img.landscape { height: 120%; margin-left: -25%; vertical-align: top; }
		dl.gallery dd img.square { width: 100%; vertical-align: bottom; }




#copyright { width: 80%; }
#footer { height: 30px; width: 100%; }



/* Mobilise */

@media screen and (max-width: 972px) {
	#banner { height: auto; width: 100%; }
	#logo { background-size: 95%; height: 0; padding-bottom: 20%; width: 100%; }
	#arkells { display: none; }
	#nav ul { margin: 0; width: 100%; }
	#nav ul li { border-bottom: 1px dotted white; margin: 0; padding: 8px 0; text-align: center; width: 100%; }
	#nav ul li:last-child { border-bottom: 0; }
	#tel { display: none; }
}

@media screen and (max-width: 650px) {
	#banner { height: auto; width: 100%; }
	#logo { background-size: 95%; height: 0; padding-bottom: 20%; width: 100%; }
	#arkells { display: none; }
	#nav ul { margin: 0; width: 100%; }
	#nav ul li { border-bottom: 1px dotted white; margin: 0; padding: 8px 0; text-align: center; width: 100%; }
	#nav ul li:last-child { border-bottom: 0; }
	#tel { display: none; }
	#content { width: 95%; }
	#side { margin-left: 0; margin-top: 20px;  width: 100%; }
}