@charset "UTF-8";
/* CSS Document */

html, ul {margin:0; padding:0;}
body {font-size:16px; font-weight:normal; margin:0; color:#403d38;}
body {-webkit-font-smoothing:antialiased; font-smoothing:antialiased;}
body {font-family:'Noto Sans', sans-serif; background-color:#f1eee7;}
body#gallery {background-color:#403d38;}

h1, h2 {font-family:'Josefin Slab', Georgia, serif;}
h2 {font-size:1.6em; color:#6a6458;}
h3 {font-family:'Noto Sans', serif; font-weight:600; color:#665e53; font-size:1em; margin-top:1.4em;}

a {text-decoration:none;}
a, a:visited, a:active {color:#403d38;}
a.link {display:inline-block; background-color:#d2cec4; margin:1em 0.4em 1em 0; color:#403d38;}
a.link {-moz-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em; padding:0.2em 0.8em 0.4em 0.8em;}
a.link:hover {color:#f1eee7; background-color:#9e978a;}

div#wrapper {display:inline-block; width:79vw; background-color:#f1eee7; margin:0 0 1.2em 0;}
div#wrapper {min-height:42em;}
div.container {background-color:#e0dcd1;}
@media screen and (max-width:1500px) 	{div#wrapper {width:74.5vw;}}
@media screen and (max-width:1200px) 	{div#wrapper {width:72.9vw;}}
@media screen and (max-width:890px) 	{div#wrapper {width:100%;}}
@media screen and (max-width:380px) 	{div#wrapper {margin-bottom:0;}}

div#menu {display:inline-block; width:25vw; height:100%;}
div#menu { [;width:25%;]; }
div#menu {background-color:#e0dcd1; border-right:1px solid #d2cec4; vertical-align:top;}
div#menu ul {width:100%; background-color:#e0dcd1;}
div#menu ul li {display:block; height:4em; padding-left:1em; line-height:3.8em;}
div#menu ul li {border-bottom:1px solid #d2cec4; border-top:1px solid #f1eee7;}
div#menu ul a li {font-size:1em; color:#434343;}
div#menu ul a li:hover {background-color:#d2cec4; border-top:1px solid #9e978a;}
div#menu ul li.parent {height:3em; line-height:2.8em; border-bottom:0;}
div#menu ul.sub li {height:2em; line-height:1.8em; padding-left:2.4em; border:0;}
div#menu ul.sub a li:hover {border-top:0;}
div#menu ul.sub a li.last {margin-bottom:1em;}
div#footer a {text-decoration:none; color:white}
#menuicon {display:none;}

div#header {background-color:#403d38; font-family:'Josefin Slab', Georgia, serif; color:#f1eee7; min-width:280px;}
div#header {height:4.4em; border-bottom:1px solid transparent;}
div#header h1 {margin-left:0.4em;}
div#header a.index {margin-left:0.4em; color:#d2cec4;}
div#header a:hover.index {color:#fff;}
.index {display:inline-block; line-height:100%; font-size:2.6em; font-weight:400; margin:0.4em 0 0 0;}

@media screen and (max-width:890px) {
	div#wrapper {width:100%;}
	a#menubutton {margin:1em; opacity:0.6; display:inline-block; vertical-align:top;}
	a#menubutton:hover {opacity:1;}
	#menuicon {display:block;}
	div#menu {display:none;}
	div#menupage div#menu {display:block; width:100%;}
	div#menu ul a li {font-size:1.1em; padding-left:1.4em;}
	div#refresh {display:none;}
	div#header h1, div#header a.index {margin-left:0;}
	}
@media screen and (max-width:380px){
	a#menubutton {margin:0.5em 0 0.5em 0.5em;}
	div#header {height:3.4em;}
	.index {font-size:2.4em; font-weight:300; margin-top:0.2em;}
	}
@media screen and (min-width:790px) {div#menu {max-width:18em;}}

div#view {background-size:cover; min-height:40vw; border-bottom:1px solid #d2cec4;}
@media screen and (max-width:1000px){div#view {min-height:30vw;}}
@media screen and (max-width:400px){div#view {min-height:50vw;}}
.home {background:url('../images/photographs/stone-floor.jpg') center center no-repeat #d2cec4;}
.ourplans  {background:url('../images/photographs/front-door.jpg') center center no-repeat #d2cec4;}
.exterior {background:url('../images/photographs/autumn-waterwheel.jpg') center center no-repeat #d2cec4;}
.ongoing {background:url('../images/photographs/toolbox.jpg') center center no-repeat #d2cec4;}
.ancient {background:url('../images/photographs/ancient-photo.jpg') bottom left no-repeat #d2cec4;}
.ecological  {background:url('../images/photographs/ecological.jpg') center center no-repeat #d2cec4;}
.forsale {background:url('../images/photographs/for-sale.jpg') center center no-repeat #d2cec4;}
.waterflow {background:url('../images/photographs/high-waterflow.jpg') center center no-repeat #d2cec4;}
.rollermachines {background:url('../images/photographs/roller-machines.jpg') center center no-repeat #d2cec4;}
.curved-timbers {background:url('../images/photographs/curved-timbers.jpg') center center no-repeat #d2cec4;}
.millhistory {background:url('../images/photographs/south-windows.jpg') center center no-repeat #d2cec4;}
.buildhistory {background:url('../images/photographs/south-windows.jpg') center center no-repeat #d2cec4;}
.mills {background:url('../images/photographs/hyde-mill.jpg') center center no-repeat #d2cec4;}
#brick-areas {background:url('../images/photographs/brick-areas.jpg') center center no-repeat #d2cec4; background-size:cover;}
#tech1 {background:url('../images/pictures/timber-lucum.jpg') center center no-repeat; background-size:cover;}
#tech2 {background:url('../images/pictures/crown-wheel.jpg') center center no-repeat; background-size:cover;}
#person1 {background:url('../images/pictures/richard.jpg') center center no-repeat; background-size:cover;}
#person2 {background:url('../images/pictures/john.jpg') center center no-repeat; background-size:cover;}
#windmill {background:url('../images/pictures/windmill.jpg') center center no-repeat; background-size:cover;}
#postcard {background:url('../images/previews/mill-postcard.jpg') center center no-repeat; background-size:cover;} 
#mapofmills {background:url('../images/previews/watermills-map.jpg') center center no-repeat; background-size:cover;} 
#domesday {background:url('../images/pictures/domesday-reloaded.jpg') center center no-repeat; background-size:cover;} 
#chapterIV {background:url('../images/pictures/chapterIV.jpg') top center no-repeat; background-size:cover;}  
#henryVII {background:url('../images/pictures/henryVII.jpg') top right no-repeat; background-size:cover;} 

div.words {margin:1.2em 1.4em 1.6em 1.4em; color:#403d38;}
div.words p { max-width:42em;}
div.words h1 span {font-size:0.7em; color:#9e978a; weight:400;}
@media screen and (max-width:670px){
	div.words img {display:block; margin:1em auto 1em auto; alignment-adjust:central; width:100%;}
	
}
@media screen and (max-width:340px){
	div.words {margin:1em auto 0 auto;}
	div.words img {margin:0.2em auto 0.2em auto;}
	div.words h1 {margin-left:0.4em; margin-right:0.4em;}
	div.words p {margin-left:1em; margin-right:1em;}
	div.words h2 {margin-left:0.8em;}
	}

div.section {display:inline-block; width:40%; margin:0 1.4em 2em 1.4em; vertical-align:top;}
div.preview {display:inline-block; width:35%; margin:0 1em 2em 1.4em; height:20vw; border:1em solid #d2cec4;}
div.section div.caption p, div.section div.caption h3 {margin:0 0 0.3em 0;}
@media screen and (max-width:600px){
	div.preview {width:auto; display:block; margin:1em 1.4em; height:50vw;}
	div.section {width:auto;}
	}

ol {margin:1em 2em 3em 2em;}
ol li {margin:0.8em 0 0.8em 0;}
@media screen and (max-width:600px){ol {margin:2em 1em 3em 1.4em; padding:0 0 0 1em;}}

div#points {margin:2em auto 0 auto; text-align:center;}
div#points div.point {display:inline-block; width:18em; margin:0 1.2em 0 1.2em; vertical-align:top;}
div#points div.point img {width:16em; border:1em solid #d2cec4;}
div#points div.point h3 {margin:0.6em 0 0 0; font-size:1.4em;}
div#points div.point h3 span {font-weight:400; font-size:0.7em;}
div#points div.point p {text-align:left; margin:0.4em 0 2em 0;}

ul.card {list-style-type:none; color:#403d38;}
ul.card li {margin:0 2% 0 2%; border-bottom:1px solid #d2cec4; padding-bottom:1.4em;}
ul.card li:last-child {border:0;}
ul.card li a:hover {opacity:0.8;}
ul.card li img, ul.card li div {display:inline-block; vertical-align:top;}
ul.card li img {margin:2em 0 2em 1em; width:30%; border:1em solid #d2cec4;}
ul.card li div {margin:2em 1em 1em 1em; width:55%; max-width:500px;}
ul.card li div h3 {font-size:1.6em; margin:0;}
p.date {font-size:1em; color:#9e978a; margin-top:0;}
@media screen and (max-width:600px){
	ul.card li img, ul.card li div {display:block; width:80%; margin-left:auto; margin-right:auto;}
	}

div#chronology ul {margin:2em 1.4em 4em 1.4em; list-style-type:none;}
div#chronology ul li {margin:0 0 0.2em 0; white-space:nowrap; width:100%;}
div.when, div.what {display:inline-block; white-space:nowrap; overflow:hidden; height:2em; line-height:1.8em; margin:0;}
div.when {text-overflow:ellipsis; color:#f1eee7; font-weight:bold; width:2.4em;}
div.when {border-radius:2em 0 0 2em; padding:0 0.6em 0 1.2em; background-color:#9e978a;}
div#chronology a:hover {opacity:0.8;}
div.what {max-width:72%; border-radius:0 2em 2em 0; padding:0 1.2em 0 0.6em;}
div.what {color:#403d38; background-color:#d2cec4; text-overflow:ellipsis;}
@media screen and (max-width:340px){div#chronology ul {margin-left:0.4em;}}

div.extract {margin:0 20% 0 1em; max-width:38em;}
ul#sources {list-style-type:dot;}
ul#sources li.title {list-style-type:none; font-weight:700; color:#9e978a;}
ul#sources li {font-size:0.9em; list-style-position:inside;}
ul#sources li a:hover {text-decoration:underline;}

ul.pages {list-style-type:none; margin:0 0 1em 0;}
ul.pages li, ul.navpages li {display:inline-block; width:2em; text-align:center; margin:0.2em; color:#9e978a;}
ul.navpages {margin-bottom:2.4em;}
ul.pages li a, ul.pages li.active {-moz-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em}
ul.pages li a {padding:0.2em 0.8em 0.4em 0.8em;}
ul.pages li.active {background-color:#9e978a; color:#f1eee7; padding:0.2em 0.1em 0.4em 0.1em;}
ul.pages li a {background-color:#d2cec4; color:#403d38;}
ul.pages li a:hover {color:#f1eee7; background-color:#9e978a;}
ul.pages li.label {text-align:left; width:3em;}
ul.navpages a {color:#9e978a;}
ul.navpages li {color:#f1eee7;}
@media screen and (max-width:340px){
	ul.pages {margin-left:0.4em;}
	ul.pages li.label {display:none;}
	}

body#gallery div#header {height:auto;}
body#gallery div#header h1, #gallery div#header p {font-family:'Noto Sans', sans-serif;}
body#gallery div#header h1 {font-size:1.2em; font-weight:400; color:#d2cec4;}
body#gallery div#header h1 {display:inline-block; margin-left:1em; vertical-align:top; line-height:42px;}
body#gallery div#header h1 a {color:#d2cec4;}
body#gallery div#header h1 a:hover { color:#fff;}
body#gallery div#header h1 span {font-size:0.8em; color:#9e978a; margin-right:0.4em;}
body#gallery div#header p {color:#9e978a; margin:0.2em 1em 0.8em; max-width:800px; display:block; height:5em;}
body#gallery div#header img {margin-left:0.4em;}
body#gallery ul.filmstrip {background: #1c1b1a; width:100%;}
body#gallery ul.filmstrip li {display:inline-block; margin:0.6em 0.2em 0.4em 0.2em;}

div.showcase img {width:100%;}

div#thanks, div#refresh {position:absolute; width:100%; height:100%; background-color:#f1eee7; z-index:10;}
div#thanks p, div#refresh p {display:block; height:100%; margin:20% auto 0 auto; text-align:center; vertical-align:central;}
div#thanks p, div#refresh p {font-size:4em; font-family:'Josefin Slab', Georgia, serif; color:#d2cec4;}
div#thanks p a, div#refresh p a {display:block; line-height:3em; font-family:'Noto Sans', serif; font-weight:400; color:#665e53; font-size:0.7em;}
div#thanks p, div#refresh p {text-shadow: 1px 1px white, -1px -1px #9e978a;}
div#thanks p a:hover, div#refresh p a:hover {color:#9e978a;}

div#contact {background-color:#f1eee7; color:#434343;}

div#map {background:url('http://maps.googleapis.com/maps/api/staticmap?center=52.001687,-0.483366&scale=2&zoom=15&format=png&markers=color:0x9e978a|52.001687,-0.483366&sensor=false&size=640x340&maptype=roadmap&style=feature:poi|visibility:off&style=feature:road.local|element:geometry.stroke|color:0x9e978a|weight:0.5&style=feature:road|element:geometry.fill|color:0xffffff&style=feature:road|element:labels.text.fill|visibility:on|color:0x9e9789&style=feature:road.arterial|element:labels.text.stroke|visibility:off|color:0x403d37&style=feature:water|element:geometry.fill|color:0x72879e&style=feature:landscape.natural|color:0xd2cec4&style=feature:road.arterial|element:geometry.stroke|weight:2|color:0x9e978a&style=feature:road.arterial|element:labels.text.fill|color:0x403d37') no-repeat #d2cec4;}
div#map {height:340px; overflow:hidden; width:100%;}
div#map h2 {display:block; text-align:center; margin-top:0; line-height:2em;}
div#map {background-position:center;}

div#mapintro {border:1px solid #9e978a; width:100%; background-color:#d2cec4; border-bottom:1px solid transparent;}

div#map, div#map-legend {border:1px solid #9e978a; width:100%;}
div#map-legend {background-color:#9e978a;}
div#map-legend ul, div#mapintro p {margin:2% 4% 2% 2%; list-style:none; color:#403d38;}
div#map-legend ul li {font-size:1em; text-indent:-1em; margin:0 0 0 1em; font-weight:600;}
div#map-legend ul li span {display:inline-block; margin-right:0.4em; font-size:1.1em;}

div#footer {background-color:#403d38; color:#f1eee7; border-top:1px solid transparent; border-bottom:1px solid transparent;}
div#footer div {margin:1em;}
div#footer ul li span {visibility:hidden;}
.empty {margin-bottom:4em;}

#links, #socialicons {display:inline-block; margin-right:10%;}
#socialicons {margin-bottom:2em; vertical-align:top;}
#links {margin-right:4em; margin-bottom:4em;}
#links {list-style-type:none; margin-bottom:1em; color:#9e978a;}
#links a {color:#e0dcd1;}
#links a:hover {text-decoration:underline;}
#links h3 {margin:0; color:#9e978a;}
#links li {margin:0.2em 0 0.2em 0;}
#socialicons li, #socialicons a {height:43px; display:inline-block; vertical-align:top;}

#pinterest, #envelope, #map-pin, #wordpress, #more {width:43px;}
#pinterest a, #envelope a, #map-pin a, #wordpress a, #more a {width:43px;}

#pinterest {background:url('../images/socialicons.png')0 0;}
#envelope {background:url('../images/socialicons.png')-43px 0;}
#map-pin {background:url('../images/socialicons.png')-86px 0;}
#wordpress {background:url('../images/socialicons.png')-129px 0;}
#more {background:url('../images/socialicons.png')-172px 0;}

#pinterest a:hover {background:url('../images/socialicons.png')0 -43px;}
#envelope a:hover {background:url('../images/socialicons.png')172px -43px;}
#map-pin a:hover {background:url('../images/socialicons.png')129px -43px;}
#wordpress a:hover {background:url('../images/socialicons.png')86px -43px;}
#more a:hover {background:url('../images/socialicons.png')43px -43px;}

#links

/* Colours
Parchment	f1eee7
Pale dust	e0dcd1
Dust		d2cec4
Mushroom 	9e978a
Dark text 	434343
Very dark 	9e978a
Coal 		373330
Black 		1c1b1a
*/