* { margin: 0; padding: 0; outline: none; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; }
img { border: 0; display: block; width: 100%; height: auto; }
header, section, footer, aside, nav, main, article, figure, figcaption { display: block; }
.clearfloats { clear: both; }
.clearfix:after { content: ""; display: table; clear: both; }


body {
	font: normal normal normal 1em/1.45em 'Source Sans Pro', Arial, Helvetica, sans-serif;
	color: #202020;	background: #fff;
}


.container {
	width: 100%; max-width: 990px;	margin: 0 auto;	padding: 0 30px 0 30px;
	clear: both; box-sizing: border-box; border-left: solid 3px #ccc;
}



/* TYPOGRAPHY */
p { padding: 8px 0 8px 0; }
h2, h3 { font-size: 1.7em; font-weight: bold; line-height: 1.1; padding: 12px 0 8px 0; }
h3 { padding: 0 0 12px 0; }
h4 { font-size: 1.2em; font-weight: bold; line-height: 1.2; padding: 12px 0 12px 0; }
.bigwords { display: inline-block; font-size: 1.7em; font-weight: bold; padding: 8px 0 0 0; }
.evenbiggerwords { font-size: 1.5em; font-weight: bold; } /* Only used on the Take The Tour main menu option. */
.smallwords { font-size: 0.7em; }

ul, ol { padding: 8px 0 8px 32px; }
li { padding: 0 0 8px 0; }



/* DEFAULT TEXT HYPERLINKS */
a { color: #2769cd; text-decoration: underline;}
a:hover { color: #f85c32; text-decoration: underline; }



/* BOXES & LINES */
.navbox, .mainbox, .redbox, .greenbox, .bluebox, .yellowbox, .purplebox { width: 100%; padding: 0 3.25% 0 3.25%; box-sizing: border-box; }

.splitline { clear: both; width: 93.5%; box-sizing: border-box; height: 50px; margin: 0 3.25% 50px 3.25%; border-bottom: solid 3px #ccc; }
.split-no-line { clear: both; width: 93.5%; box-sizing: border-box; height: 50px; margin: 0 3.25% 0 3.25%; }
.gull { background: url(gull.png) right top no-repeat; background-size: 70px 49px; }

.navbox { margin-top: 0; padding-top: 40px; position: relative; }

.redbox	 { border-left: solid 3px #ed2d33; }
.redbox h3, .redbox a { color: #ed2d33; }
.greenbox { border-left: solid 3px #12a356; }
.greenbox h3, .greenbox a { color: #12a356; }
.bluebox { border-left: solid 3px #4e4ed5; }
.bluebox h3, .bluebox a { color: #4e4ed5; }
.yellowbox { border-left: solid 3px #fff752; }
.yellowbox h3, .yellowbox a { color: #202020; }
.purplebox { border-left: solid 3px #a1479f; }
.purplebox h3, .purplebox a { color: #a1479f; }

.redbox a:hover, .greenbox a:hover, .bluebox a:hover, .yellowbox a:hover, .purplebox a:hover { color: #f85c32; }
.redbox p:last-child, .greenbox p:last-child, .bluebox p:last-child, .yellowbox p:last-child, .purplebox p:last-child  { padding-bottom: 5px; }

.footbox {
	width: 100%; padding: 0 3.25% 40px 3.25%; box-sizing: border-box; font-size: 0.8em;
	background: url(tankard-and-drinkers.png) right bottom no-repeat; background-size: 280px 37px;
	border-bottom: solid 3px #3e304b;
}



/* HEADER/BANNER */
.navbox img { float: left; width: 34%; max-width: 312px; margin-top: 6px; } /* Logo graphic */
h1 { /* Site title text */
	float: left; width: 33%; padding: 6px 0 0 2%; box-sizing: border-box;
	font-family: 'IM Fell English', serif; font-size: 4em; line-height: 1.1;
}
a h1, a h1:hover { color: #202020; }

.navlist { float: right; width: 33%; list-style-type: none; text-align: right; padding: 0; }
.navlist li { display: block; font-size: 1.3em; line-height: 1; font-weight: bold; padding: 5px 0 11px 0; }
.navlist li a { padding: 5px 0 5px 0; color: #2769cd; text-decoration: none; transition: all 0.2s ease-in-out; }
.navlist li a:hover { color: #f85c32; }
.navlist li a.on { color: #202020; }
.navlist li a.on:hover { color: #202020; cursor: default; }
#menu-button { display: none; margin: 20px 0 0 0; }
#menu-button a:hover { cursor: pointer; }

@font-face {
    font-family: 'Glyphter';
    src: url('Glyphter.eot');
    src: url('Glyphter.eot?#iefix') format('embedded-opentype'),
         url('Glyphter.woff') format('woff'),
         url('Glyphter.ttf') format('truetype'),
         url('Glyphter.svg#Glyphter') format('svg');
    font-weight: normal; font-style: normal;
}
.facebooklinkbutton:before{	display: inline-block; font-family: 'Glyphter';	font-style: normal;	font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.facebooklinkbutton { display: block; float: right; margin: 18px 0 0 0; font-family: 'Glyphter'; font-size: 38px; text-decoration: none; transition: all 0.15s ease-in-out; }
.facebooklinkbutton:hover { text-decoration: none; }



/* HOMEPAGE LAYOUT TWEAKS */
.pullup { margin-top: -14px; }
.pushdown { margin-top: 6px; }
.fb-like { margin-top: 6px; }


/* HOMEPAGE PUB SOUP */
ul.souplist { width: 100%; box-sizing: border-box; list-style-type: none; padding: 0; margin: 0; }
ul.souplist li.date { font-size: 0.8em; font-weight: bold; list-style-type: none; padding: 8px 0 0 0; }
ul.souplist li.datehidden {	font-size: 0.8em; list-style-type: none; margin: 0;	display: none; }
ul.souplist li.message { padding: 0 0 20px 0; list-style-type: none; margin: 0; }
ul.souplist li.messagehidden { padding: 0 0 20px 0;	list-style-type: none; margin: 0; display: none; }
ul.souplist li.break { width: 90%; height: 47px; list-style-type: none; margin: -5px 0 11px 0; }
#croutonlink { float: left;	padding: 15px 0 15px 0; }



/* CONTACT */
.contactlist { list-style-type: none; padding: 0; text-align: left; }
.contactlist li { padding: 0 10px 10px 0; }



/* WHAT'S OPEN & ON */
.openlist { padding: 0; }
ul.openlist li.opentitle { font-size: 1.2em; font-weight: bold;	list-style-type: none; margin: 0; padding: 4px 0 4px 0; }
ul.openlist li.opendescription { padding: 0 0 20px 0; list-style-type: none; }
ul.openlist li.break { width: 75%; height: 32px; list-style-type: none; margin: -5px 0 11px 0; }

.entrywrapper { margin: 30px 0 30px 0; }
.entrytitle { clear: both; font-weight: bold; font-size: 1.2em; display: table-cell; padding: 0 0 2px 0; }
.entrytext { display: table-cell; }
.entrytripadvisor { float: right; width: 170px;	margin-left: 10px; }

#showmap { height: 240px; } 



/* TOUR */
#map { height: 720px; }
ul.publist { list-style-type: none; margin: 0; padding: 0; }



/* PUB PAGES */
table.pubstatus { width: 100%; border: none; }
table.pubstatus td { vertical-align: top; }
table.pubstatus td.title { text-align: left; font-weight: bold; width: 60px; padding: 0 6px 0 0; }

figure { float: right; width: 46%; margin: 20px 0 20px 8%; box-sizing: border-box; transition: all 0.4s ease-in-out; }
figure img { border: solid 3px #ccc; box-sizing: border-box; }
.no-border { border: none; }
.grower:hover { cursor: pointer; }
figcaption { padding: 10px 0 10px 10%; font-size: 0.85em; line-height: 1.3; text-align: right; }
figcaption span:after { content: " Click the image to enlarge."; font-style: italic; }

.callout-right, .callout-left {	width: 40.5%; font-size: 1.5em; line-height: 1.2; font-weight: bold; font-style:italic; }
.callout-right { float: right; border-left: solid 3px #ccc; padding: 20px 0 20px 5%; margin: 10px 0 10px 8%; }
.callout-left { float: left; border-right: solid 3px #ccc; padding: 20px 5% 20px 0; margin: 10px 8% 10px 0; }

.clipping {
	float: right; width: 40.5%; padding: 32px 0 32px 5%; margin: 18px 0 18px 8%;
	font-family: 'IM Fell English', serif; font-size: 1.05em; line-height: 1.5; border-left: dotted 3px #ccc;
}
.clipping p:last-child  {
	padding: 10px 0 10px 10%; 
	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-size: 0.85em; line-height: 1.3; text-align: right; }
.clipping-full-width {
	width: 100%; box-sizing: border-box; padding: 8px 6% 8px 6%; margin: 14px 0 14px 0; 
	font-family: 'IM Fell English', serif; font-size: 1.05em; line-height: 1.5;
	border-left: dotted 3px #ccc;
}
.clipping span, .clipping-full-width span { font-size: 1.2em; font-weight: bold; text-transform: uppercase; }






@media only screen and (max-width: 1024px) { h1 { font-size: 6vw; line-height: 1.1; } }

@media only screen and (max-width: 999px) {
	.container { border: none; }
}

@media only screen and (max-width: 970px) { .facebooklinkbutton { margin: 18px 0 0 0; font-size: 34px; } }

@media only screen and (max-width: 800px) { .container { padding: 0 3.25% 0 3.25%; } }

@media only screen and (max-width: 736px) {
	.navbox img { width: 42%; }
	h1 { width: 42%; padding: 6px 0 0 2%; font-size: 7.5vw; line-height: 1.1; }
	
	.navlist { /********** DROP-DOWN MENU **********/
		position: fixed; z-index: 10; width: 99%; padding-right: 3.25%; right: 3.25%; box-sizing: border-box;
		top: -190px; font-size: 0.9em; 
		transition: top 0.5s ease-in-out;
		background: #fff; background: linear-gradient(to right, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 60%, #fff);
	}
	#menu-button { display: block; }
	.facebooklinkbutton { margin-top: 27vw; }
}

@media only screen and (max-width: 667px) {
	.facebooklinkbutton { margin-top: 26vw; }
	.splitline { width: 93.5%; height: 30px; margin: 0 3.25% 32px 3.25%; }
	.split-no-line { width: 93.5%; height: 32px; margin: 0 3.25% 0 3.25%; }
}

@media only screen and (max-width: 600px) {
	#map, #showmap { width: 95%; }
	.entrytripadvisor { float: none; margin: 10px 0 10px 0; }
}

@media only screen and (max-width: 568px) {
	.navlist { background: linear-gradient(to right, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 50%, #fff); }
	
	figure { width: 100%; margin: 20px 0 12px 0; } /******** PUB IMAGES etc. GO FULL WIDTH ********/
	.grower:hover { cursor: default; }
	figcaption span:after { content: ""; }
	.clipping, .clipping-full-width, .callout-right, .callout-left { width: 100%; padding: 8px 6% 4px 6%; margin: 14px 0 18px 0; box-sizing: border-box; }
	.callout-right, .callout-left { font-size: 1.35em; line-height: 1.4; }
	.callout-left { border-left: solid 3px #ccc; border-right: none; }
}

@media only screen and (max-width: 480px) {
	.navlist { background: linear-gradient(to right, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 40%, #fff); }
	.facebooklinkbutton { margin-top: 26.5vw; font-size: 28px; }
}

@media only screen and (max-width: 414px) {
	.container { padding: 0 2% 0 2%; }
	.mainbox { padding: 0 2% 0 2%; }
	.redbox, .greenbox, .bluebox, .yellowbox, .purplebox { padding: 0 2% 0 4%; margin-left: -2%; }
	.navbox { padding: 40px 2% 0 2%; }
	.footbox { padding: 0 2% 36px 2%; }
	
	.splitline { width: 96%; margin: 0 2% 32px 2%; }
	.split-no-line { width: 96%; height: 32px; margin: 0 2% 0 2%; }

	.navlist { background: linear-gradient(to right, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 35%, #fff); right: 2%; padding-right: 2%; }
	.facebooklinkbutton { font-size: 24px; }
	
	#map, #showmap { width: 90%; }
	#map { height: 500px; }
	
}

@media only screen and (max-width: 384px) {
	.navbox img { width: 46%; }
	h1 { width: 52%; font-size: 8.5vw; line-height: 1.1; }
	.facebooklinkbutton { margin-top: 10px; font-size: 18px; }
}

@media only screen and (max-width: 320px) {
	.navlist { width: 96%; background: #fff; }
	.navbox { padding-top: 45px }
	.facebooklinkbutton { margin-top: 0; }
}