/* Reset */


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




/* Body */


body { background: url('images/bg.jpg') 50% -1000px repeat; /* background: url('/images/snowflakes.png') top left; */ background-attachment: fixed; font-family: verdana, 'sans-serif'; font-size: 100%; }




/* Outer frame and inner frame */


#frame { background: white; margin: 20px auto; max-width: 1000px; padding: 23px 0; width: 95%; }
#inner { border-top: 16px solid #BEBC95; margin: 0px auto; width: 95%; }




/* Banner */


#banner { min-height: 130px; position: relative; text-align: right; }
#banner div.hidden_nav { display: block; float: right;  margin-top: 35px; text-align: right; width: 73%; }
#banner div.hidden_nav ol { width: 100%; }
#banner div.hidden_nav ol li { display: inline-block; line-height: 150%; margin-left: 10px;  }
#banner div.hidden_nav ol li a { color: #093542; text-decoration: none; }


#burger { display: none; }


#logo { background: transparent url('images/logo-header.png') top left no-repeat; display: inline-block; height: 183px; position: absolute; left: 3%; max-width: 210px; top: 0px; width: 100%; z-index: 500; }
#logo a { display: block; height: inherit;  width: inherit; }
	
	
#logo.small { background: transparent url('images/arkells__logo__small.png') top left no-repeat; display: inline-block; height: 112px; position: absolute; left: 3%; top: 10px; }


#social { padding-top: 7px; text-align: right; width: 100%; }
#social a { color: #093542; display: inline-block;  margin-left: 5px; text-decoration: none; vertical-align: -webkit-baseline-middle; }
#social a#twitter { background: white url('images/twitter.png') top left no-repeat; height: 24px; text-indent: -5000px; vertical-align: -webkit-baseline-middle; width: 24px; }
#social a#facebook { background: white url('images/facebook.png') top left no-repeat; height: 24px; text-indent: -5000px; vertical-align: -webkit-baseline-middle; width: 24px; }

#nav { display: none; }




/* Slideshow */


#slides { width: 100%; }
#slides img { width: 100%; }
#slides ul { list-style: none; }
#slides ul li img { width: 100%; }


	
	
/* Adverts */


#advert { width: 100%; }
#advert img { width: 100%; }	
	
	
	
	
	/* 3 big buttons in the middle (homepage) */
	
	
	ol.buttons { list-style: none; width: 100%; }
	ol.buttons li { display: inline-block; margin-top: 10px; text-transform: uppercase; width: 31.9%; }
	ol.buttons li.first { margin-left: 0; }
	ol.buttons li.middle { margin: 0 1.5%; }
	ol.buttons li a { /* background: #093542; */ background: url('images/button.png') top left no-repeat; background-size: contain; color: white; display: inline-block; font-size: 0.9em; padding: 8% 0 7% 0; display: block; text-align: center; text-decoration: none; }
	ol.buttons li a:hover { }	
	
	
	
	
	
		
	
	/* Content */
	
	
	#content { min-height: 500px; width: 100%; }
	#map-canvas { height: 400px; margin-bottom: 0px; margin-top: 15px; }
	
	ul.list_of_pubs { color: #003542; font-size: 0.8em; margin-bottom: 15px; margin-left: 15px; }
	ul.list_of_pubs li { margin-bottom: 8px; }
	ul.list_of_pubs li a { color: #093542; text-decoration: none; }
	
	
	.container { width: 100%; }
	
	
	
	

	
	
	
	
	/* Three big boxes */
	
	
/* THE PROBLEM START */

#content div.three { background: #E1E0CE; float: left; height: 365px; margin-top: 15px; overflow: hidden; width: 33.1%; }
#content p { line-height: 140%; }

#content div.three.lefti {   }
#content div.three.middle { margin-left: 0.435%; } #content div.three.middle img { width: 100%; }
#content div.three.righti { float: right; margin-left: 0; }
#content div.three.righti a { color: #093542; display: inline-block; margin-top: 20px; text-decoration: none; }

/* THE PROBLEM END */

#content div.three div { float: left; margin: 20px; }
#content div.three div h3 { color: #8A862B; font-weight: lighter; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
#content div.three div img {}

#twitterbutton, #facebookbutton { font-family: arial; height: 20px; padding-top: 25px; text-decoration: none; color: #002839; text-transform: uppercase; }
#twitterbutton.on, #facebookbutton.on { background: #918B35; color: white; }
#twitterbutton { border-right: 3px solid white; border-bottom: 3px solid white; display: inline-block; padding-left: 2%; width: 47%; }
#facebookbutton { border-bottom: 3px solid white; display: inline-block; padding-left: 2%; width: 47%; }

.guide img { float: right; }
.guide h4 { color: #002839; font-family: arial; font-size: 2em; font-weight: lighter; margin: 10px 5px 0 10px; text-transform: uppercase; }
.guide p { color: #002839; font-size: 1em; margin: 10px !important; }

.poster_right { float: right; width: 50%; }

/* twitter feed start */

.tweet, .query { font: .4em verdana, sans-serif !important; color: #602900; }
.tweet_list { font-size: .9em; margin-top: -10px; list-style: none; overflow-y: hidden; background-color: transparent;  }	
.tweet_list li { color: #093542; overflow-y: auto; overflow-x: hidden; padding: 0.5em; list-style-type: none; }
.tweet_list li a { color: #918B35; }
.tweet_list .tweet_even { background-color: transparent; }
.tweet_list .tweet_avatar { padding-right: .5em; float: left; }
.tweet_list .tweet_avatar img { height: 25px; width: 25px; vertical-align: middle; }


/* booking form start */

	form.booking { color: #093542; font-size: .8em; margin-top: 8px; }
	form dl.sider { clear: both; float: left; width: 100%; }
	form dl.sider dt { float: left; width: 20px; }
	form dl.sider dd { float: left; }
	
	form dl.ftwo { float: left; width: 50%; }
	form dl.ftwo dd input { margin-right: 5px; width: 60%; }
	
	form dl.fthree { float: left; margin-bottom: 10px; margin-top: 10px; width: 30%; }
	form dl.fthree dd select { width: 70%; }

/* booking form end */
	
	
	
	/* Portlets on the homepage */
	
	#portlets { margin-bottom: 18px; margin-top: 15px; width: 100%; }
	#portlets div { background: gray; display: inline-block; margin-right: 1.2%; vertical-align: top; width: 23.9%; }
	#portlets div.last { margin-right: 0; }
	#portlets div img { width: 100%; }
	#portlets h4 { color: white; font-size: .7em; font-weight: lighter; margin: 8px 8px 0 8px; }
	#portlets p { margin: 0px 8px 8px 8px; }
	#portlets p a { color: #B1AA50; font-size: .6em; text-decoration: none; }
	#portlets div.red { background: #50262A; }
	#portlets div.blue { background: #093542; }
	#portlets div.green { background: #AE617A; background: #2C4D46; } 
	#portlets div.purple { background: #4A1A4C; margin-right: 0 !important; }
	
	
	

/* Beer clips START */

	dl.clip { clear: both; float: left; font-family: verdana, 'sans-serif'; font-size: 90%; margin-bottom: 20px; position: relative; width: 100%; }
	dl.clip dd.image { float: left; margin-right: 1%; width: 20%; }
	dl.clip dd.image img { margin-top: 0px; width: 100%; }
	dl.clip > dt { background: #093542; color: white; float: left; font-size: 1.4em; margin-bottom: 10px; padding: .5em 0 .5em 1%; width: 99%; }
	dl.clip dd.text { color: #093542; float: left; margin-top: 15px; width: 70%; }
	dl.clip dd.text p { font-size: 1em; margin-bottom: .9em; }
	dl.clip dd.text p a { color: #093542; text-decoration: none; }
	dl.clip dd.beer__button { float: left; text-align: right; width: 100%; }
	a.tasting__notes__link { background: url('../examples/arrow-down.png') top right no-repeat; color: #093542; padding: 3px 30px 6px 0; text-decoration: none; }
	a.tasting__notes__link.down { background: url('../examples/arrow-up.png') top right no-repeat; padding: 3px 30px 6px 0; }
	.tastingside { float: left; margin-right: 1%; width: 47%;}
	.tastingside img { margin: 15px 0; max-width: 300px; width: 90%; }
	.tastingside form { border: none; }
	.tastingside form fieldset { border: none; }
	.tastingside form fieldset dl { margin-top: 10px; }
	.tastingside form fieldset dl dt { font-weight: normal; }
	.tastingside form fieldset dl dd { margin-bottom: 4px; }
	
/* Beer clips END */




img.resp { width: 100%; }
	
	
	
	
	
	
	/* PUB PAGE */
	
	
	
		/* KEY INFORMATION */
		
		#pub_key { background: #928A34; font-family: georgia; line-height: 140%; margin-bottom: 15px; margin-top: 5px; width: 100%; }
		h3.pub_title { background: #928A34; color: white; margin-bottom: 10px; margin-top: 10px; padding: 5px 10px; text-transform: uppercase; }
		h3.pub_title.aright { text-align: right; }



		
		
		/* MINI MAP */
		
		.back_and_map { width: 100%; }
		.button { background: #093542; outline: 3px solid #BEBC95; color: white; display: inline-block; margin-bottom: 8px; padding: 8px 0; text-align: center; text-decoration: none; width: 100%; }
		.button:hover { background: #014C6C; }
		#mini_map { background: pink; display: block; height: 300px; margin-top: 10px; width: 100%; }
		#mini_map iframe { height: 300px; }
		
		
		
		/* PUB PAGE TEXT */
	
		div.pub_text { color: #294E47; font-family: georgia; font-size: 0.8em; line-height: 150%; margin: 20px 0; }
		
		#more_pub_text { display: none; }
	
	
	
	.page_text { font-family: georgia, serif; font-size: 1em; line-height: 140%; padding-top: 0px; margin-top: 20px;  width: 100%; }
	.page_text h2 { color: #083542; font-family: verdana, sans-serif; font-weight: lighter; margin-bottom: 15px; }
	.page_text h2.larger { margin-top: 25px; }
	.page_text h3 { color: #083542; font-family: verdana, sans-serif; font-weight: bold; margin-bottom: 15px; }
	.page_text hr { display: inline-block; margin: 10px 0; width: 100%; }
	.page_text p { color: #003542; margin-bottom: 15px; }
	.page_text a { color: #093542; font-weight: bold; text-decoration: none; }
	.page_text img.fleft { float: left; margin: 5px 15px 20px 0; max-width: 50%; }
	.page_text img.fright { float: right; margin: 5px 15px 20px 0; max-width: 50%; }
	.page_text #include__tasting__notes { margin-bottom: 15px; }
	
	
	/* MAP & BUTTONS */
	
	#map_buttons { margin-bottom: 10px; margin-top: 15px; width: 100%; }
	#map_buttons div { background: #918B35; display: inline-block; height: 300px; max-height: 80px; margin-right: 0.9%; vertical-align: top; width: 32.3%; }
	#map_buttons div.blue { background: #003542; }
	#map_buttons div h3 { color: white; font-size: 0.95em; font-weight: lighter; margin: 12px 0 0 12px; text-transform: uppercase; }
	#map_buttons div img.100 { width: 100%; }
	#map_buttons div img.mobile { display: none; }
	#map_buttons div form { margin: 12px 0 0 12px; }
	#map_buttons div form select { width: 90%; }
	#map_buttons div.first { background: #093542 !important; }
	#map_buttons div.last { margin-right: 0; }
	
	
	
/*
	Footer	
*/
	
	#footer { border-bottom: 16px solid #BEBC95; margin-top: 25px; padding-bottom: 15px; text-align: center; width: 100%; }
	#footer div.threethree { display: inline-block; margin-bottom: 10px; width: 33% !important; }
	#footer img { margin-bottom: 10px; }
	#footer ul { display: inline-block; font-size: 0.8em; list-style: none; line-height: 150%; }
	#footer ul li { border-right: 1px solid #093542; display: inline-block; font-size: .9em; margin-right: 4px; padding-right: 9px; }
	#footer ul li:last-child { border-right: 0; }
	#footer ul li a { color: #093542; text-decoration: none; }
	#footer p { color: #093542; font-size: 0.8em; margin-top: .5em; }
	
	
	
	
	
	
	
	
	#history_wrapper { background: #063542; padding: 20px 0 50px 0; }
		
	#history { color: white; display: inline-block; margin: 0 auto; position: relative;  width: 90%; }
	div.item { min-height: 240px; border-bottom: 1px dotted #918934; margin: 10px; }
	div.item h4 { border-bottom: 1px dotted #918934; font-size: 1.1em; padding-bottom: 5px; }
	div.item p { color: white; font-size: 0.8em; margin-top: 15px; }
	
	div.customNavigation { position: relative; }
	
	a.btn.play { display: none; }
	a.btn.stop { display: none; }
	a.btn.prev, a.btn.next { display: block; height: 35px; position: absolute; width: 35px; }
	a.btn.prev { background: url('../sketch/arrow_left.png') top left no-repeat; bottom: -40px; left: 5%; text-indent: -5000px; }
	a.btn.next { background: url('../sketch/arrow_right.png') top left no-repeat; bottom: -40px; right: 5%; text-indent: -5000px; }
	
	ol.wedge { list-style: none; width: 100%; }
	ol.wedge li { display: inline-block; width: 30%; }
	ol.wedge li a { background: #093542; outline: 4px solid #BEBC95; color: white; display: inline-block; font-size: 0.8em; padding: 18px 0 15px 0; display: block; text-align: center; text-decoration: none; }
	ol.wedge li a:hover { background: #014C6C; }
			

	
	
	
	
		/* PUB PAGE */
	
	
	
	
		/* Pub Information (divs) */
		
		
		#pub_info { display: inline-block; vertical-align: top; width: 70%; }
		#pub_info div { display: inline-block; vertical-align: top; margin: 10px 0 10px 15px; width: 100%;  }
		#pub_info div h4 { color: #294E47; font-weight: lighter; text-transform: uppercase; }
		#pub_info div a { color: white; }
		#pub_info div p { color: white; font-size: 0.9em;  }
		
		
		
		
		/* Pub Categories (icons on the right-hand-side) */
		
		
		#pub_cats { display: inline-block; margin-bottom: 20px; padding-top: 20px; vertical-align: top; text-align: center; width: 30%; }
		#pub_cats ul { list-style: none; }
		#pub_cats ul li { margin-top: 5px; text-align: left; width: 100%; }
		#pub_cats ul li a { color: white; font-size: 0.8em; text-decoration: none; }
		#pub_cats ul li img { display: inline-block; margin: 0 5px 0 0; vertical-align: middle; }
		
		
		
		
		/* Pub main image */
		
		
		div.pub_slideshow { display: inline-block; margin-bottom: 10px; vertical-align: top; width: 50%; }
		div.pub_slideshow img { width: 100%; }
		
		
		
		
		/* Pub Thumnails */
		
		
		div.pub_thumbs { display: inline-block; width: 49.3%; }
		div.pub_thumbs div { display: inline-block; margin-left: 1.25%; vertical-align: top; width: 32%; }
		div.pub_thumbs div img { width: 100%; }
		
	
		a.pub_thumbs_button { display: none; }
		div.hidden__gap { display: none; height: 45px; width: 100%; }
		
		
		
		
		/* Form - Standard */
		
		
		form.standard { background: gold; }
		form.standard dl { margin: 0 0 15px; }
		form.standard dl dt { font-weight: bold; }
		form.standard dl dd input { padding: 4px; }
		
		
		/* List Of Pubs */
		
		
		
		
		/* Shop */
	
	
		img.shop__beer__image { float: right; }
	
	
	
	
.portlet_beers { width: 100%; }
.portlet_beers img { border: 1px solid #ccc; display: inline-block; margin-right: 2%; width: 17%; }	






/* Brewing Process START */

				
				p.staging { display: none; }
				
				.process__number__top { background: white; border: 1px solid #093542; margin-right: 10px; padding: 5px; }
				.process__number__top.on { background: #093542; color: white; }
				
				
				#brewing__process__frame { position: relative; }
				#brewing__process__frame a { background: transparent; position: absolute; text-align: center; }
				#brewing__process__frame a span { 
					background: white; display: inline-block; padding: 5px; min-width: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
					position: relative; top: 50%; text-align: center; transform: translateY(-50%); 
				}
				
				#brewing__process__content { background: #093542; bottom: 15px; height: 110px; position: absolute; right: 20px; width: 550px; }
				#brewing__process__content div { color: #A29062; line-height: 140%; margin: 10px; }
				#brewing__process__content div span { 
					background: white; color: black !important; display: inline-block; margin-right: 7px; padding: 5px; text-align: center; min-width: 20px; 
					-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;  
				}
				
				#brewing__process__content div strong { color: white; }
				
				
				#brewing__process__one { height: 40px; right: 20px; top: 440px; width: 45px; }
				#brewing__process__two { height: 80px; right: 80px; top: 290px; width: 60px; }
				#brewing__process__three { height: 90px; right: 70px; top: 435px; width: 95px; }
				#brewing__process__four { height: 60px; right: 175px; top: 465px; width: 90px; }
				#brewing__process__five { height: 80px; right: 180px; top: 300px; width: 60px; }
				#brewing__process__six { height: 80px; right: 305px; top: 470px; width: 185px; }
				#brewing__process__seven { height: 40px; left: 400px; top: 465px; width: 40px; }
				#brewing__process__eight { height: 100px; left: 245px; top: 485px; width: 100px; }
				#brewing__process__nine { height: 95px; left: 62px; top: 485px; width: 155px; }
				#brewing__process__ten { height: 75px; left: 55px; top: 605px; width: 195px; }
				
				
				#brewing__beers__and__videos { margin-top: 20px; }
				#brewing__beers { display: inline-block; vertical-align: top; width: 40%; }
				#brewing__beers p { margin-left: 25px; }
				#brewing__video { display: inline-block; vertical-align: top; width: 60%; }
				#brewing__beers img { display: inline-block; width: 30%; }




/* Brewing Process END */

	
	
	
	
	
/* RESPONSIVE */


/* This is strictly for the brewing process - as it's to difficult to adjust the numbers on resize */
	
	@media screen and (max-width: 1000px) {
	
		
		p.staging { display: block; }
		p.staging a {  display: inline-block; margin-bottom: 10px; }
		a.process__number { display: none; }
		#brewing__process__content { bottom: 0; right: -1.5%; padding-top: 5px; position: relative; width: 95%; }
		#brewing__beers { display: inline-block; vertical-align: top; width: 100%; }
		#brewing__beers p { margin-left: 25px; }
		#brewing__video { display: inline-block; vertical-align: top; width: 100%; }
	
	
	}




@media screen and (max-width: 900px) {
	
	
	#banner div.hidden_nav { width: 63%; }
	#slides.pub { display: none; }
	div.hidden__gap { display: block; }
	
	
}
	
	
@media screen and (max-width: 670px) {
	
	#frame { margin-top: 0; padding-top: 10px; }
	#inner { border-top: 0; }
	
	#banner { min-height: 0; text-align: left; width: 100%; }
	#banner div.hidden_nav { float: none; text-align: left; }
	#content { margin-top: 0; }
	
	#social { display: none; width: auto; float: right; }
	
	#nav { display: none; }
	
	#burger { background: url('../sketch/burger.png') top left no-repeat; display: inline-block; height: 29px; margin-top: 7px; text-indent: -5000px; vertical-align: top; width: 36px; }
	#burger a { display: block; height: 29px; width: 36px; }
	
	#banner div.hidden_nav { font-size: 0.8em; display: none; margin: 10px 0 0 0; width: 98%;  }
	#banner div.hidden_nav ol { list-style: none; margin: 5px 0; width: 100% !important; }
	#banner div.hidden_nav ol li { margin-left: 0px !important; width: 100% !important; }
	#banner div.hidden_nav ol li a { border: 1px solid #093542; color: #093542 !important; display: inline-block; margin-bottom: 10px; margin-left: 0px !important; padding: 6px 0; text-align: center; text-decoration: none; width: 100% !important; }
	#banner div.hidden_nav ol li a:hover { background: #014C6C; color: white !important; }

				
				#banner { margin-bottom: 0px; min-height: 140px !important; }
				
				#logo, #logo.small {
				background: url('images/arkells__logo__small.png') center center no-repeat;
				display: block;
				height: 140px;
				left: 0;
				min-width: 100% !important; 
				position: relative;
				z-index: 10;
				}
	
	
	#nav { margin-top: 20px; text-align: center; }
	#nav ol.wedge { width: 100%; }
	#nav ol.wedge li { margin-bottom: 10px; width: 100%; }
	#nav ol.wedge li a { padding: 8px 0 8px 0; }
	
	#map_buttons div { height: auto; margin-bottom: 3px; min-height: 0; margin-right: 0; width: 100%; }
	#map_buttons div img { display: none; }
	#map_buttons div img.mobile { display: block; width: 100%; }
	#map_buttons div.last { padding: 10px 0 10px 0; }
	#map_buttons div.last form { margin: 0; }
	#map_buttons div.last form select { margin-left: 5%; }
	#map_buttons div.last h3 { display: none; }
	
	
	
	
	/* 3 big boxes (Facebook, beer, booking) */
	
	
	#content div.three.lefti {  margin: 12px 0 10px 0; width: 100%; }
	#content div.three.middle { clear: left; margin-left: 0; margin-top: 0; width: 49%; }
	#content div.three.righti { float: right; margin: 0; width: 49%; }
	
	
	
	
	/* 3 big buttons in the middle (homepage) */
	

	ol.buttons { list-style: none; width: 100%; }
	ol.buttons li { margin: 10px 0 0px 0 !important; width: 100%; }
	
	
	
	
	
	
	/* PUB PAGE */
	
	
	h3.pub_title.aright { text-align: center; }
	
	
	/* Pub Info */
	
			
	#pub_info { display: inline-block; vertical-align: top; width: 70%; }
	#pub_info div { display: inline-block; vertical-align: top; margin: 10px 0 10px 15px; width: 100%;  }
	#pub_info div h4 { color: #294E47; font-weight: lighter; text-transform: uppercase; }
	#pub_info div p { color: white; font-size: 0.9em;  }
	
	
	div.pub_slideshow { display: inline-block; margin-bottom: 10px; vertical-align: top; width: 100%; }
	a.pub_thumbs_button { display: block; }
	div.pub_thumbs { display: none; width: 100%; }
	
	
	#brewing__beers img { display: inline-block; width: 60px !important; }
		
	
}


@media screen and (max-width: 550px) {
	
	#banner { min-height: 0; }
	
	#pub_info { width: 100% !important; }
	#pub_cats { margin-left: 4%; padding-bottom: 20px; width: 95% !important; }
	
	#slides { display: none; }
	
	div.hidden__gap { display: none; }
	
}


@media screen and (max-width: 490px) {
	#content div.three.lefti {  margin: 0 0 10px 0; width: 100%; }
	#content div.three.middle { height: auto; margin: 0 0 10px 0; width: 100%; }
	#content div.three.righti { margin: 0 0 10px 0; width: 100%; }
	#portlets div { margin-bottom: 8px;  margin-right: 0; width: 100%; }
}