/*  
Theme Name: MuchBetterText
Theme URI: 
Description: 
Version: 1.0
Author: Pete Hill
Author URI: 

*/

@font-face {
  font-family: 'baskerville_old_faceregular';
  src:  url('baskvill-webfont.woff2') format('woff2'),
        url('baskvill-webfont.woff') format('woff');
}

/*	undohtml.css
(CC) 2004 Tantek Celik. Some Rights Reserved.
	http://creativecommons.org/licenses/by/2.0
	This style sheet is licensed under a Creative Commons License.

	Purpose: undo some of the default styling of common (X)HTML browsers */

/*	link underlines tend to make hypertext less readable, because underlines
	obscure the shapes of the lower halves of words */

:link, :visited { text-decoration: none; }

/*	no list-markers by default, since lists are used more often for semantics */
ul, ol { list-style: none; }

/*	avoid browser default inconsistent heading font-sizes and pre/code too */
h1, h2, h3, h4, h5, h6, pre, code
{
	font-size: 1em;
	text-transform: none;
}

/*	remove the inconsistent (among browsers) default ul,ol padding or margin
	the default spacing on headings does not match nor align with normal
	interline spacing at all, so let's get rid of it. Zero out the spacing
	around pre, form, body, html, p, blockquote as well form elements are oddly
	inconsistent, and not quite CSS emulatable. Nonetheless strip their margin
	and padding as well */

ul, li, h1, h2, h3, h4, h5, h6, pre, sup, form, body, html, p, blockquote, fieldset, input
{
	margin: 0;
	padding: 0;
}

table, tr, th, td
{
	margin: 0;
	padding: 0;
    border-collapse: collapse; 
}

/*	whoever thought blue linked image borders were a good idea? */
a img, :link img, :visited img { border: none; }

/*	de-italicize address */
address { font-style: normal; }

a {
   outline: 0;
}

/* Fix IOS right margin */

html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
}

/*MUCH BETTER STYLES*/


body
{background-image: url(data:image/png;base64,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);
background-color:#222;
 font-family: 'baskerville_old_faceregular', Baskerville, serif;
 font-size:18px;
}

.clear{
	clear:both;
}

.indent-pic{
	margin-left:120px;
	margin-right:100px;
}

p{
	margin-bottom:1em;
	line-height:1.4em;
}

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


.wide{
	width:100%;
	margin:0;
	text-align:center;
	min-width:314px;
}

.container{
	max-width:800px;
	margin: 10px auto;
	padding:20px;
}

.header{
	text-align:center;
}

h1.title{
	font-size:3em;
	color: #FFF;
	margin-bottom:0.75em;
}

h2{
	font-size:1.5em;
	margin-bottom:1em;
}

h3{
	

}

h3.exception{
	text-transform:none;
}

ul{
	list-style:disc;
	list-style-position:inside;
	margin-bottom:10px;
}

ul.quotes{
	list-style:none outside none;
}

ul.quotes li{
	margin-bottom:10px;
}

p.pre-list{
	margin-bottom:5px;
}

.subtitle{
	font-size:1.3em;
	margin:0.75em 0;
	font-weight:normal;
	text-align:center;
	line-height:0.75em;
}

.tab{
	background-color:#E4E4E4;
	text-align:left;
	border: 1px solid #999;
	padding: 4px 12px;
	border-radius: 4px 4px 0 0;
}

.image-box{
	display:flex;
	text-align:right;
	max-width:800px;
	overflow:hidden;
	height:auto;
	min-height:338px;
	flex-direction:  row-reverse;
	clear:both;
}

.box1{
	background-image:url("img/Upper-Denton-Church.jpg");
	background-size: cover;
	background-position:right top;
}

.box2{
	background-image:url("img/talkin-tarn.jpg");
	background-size: cover;
	background-position:right top;
}

.box3{
	background-image:url("img/Lanercost-Priory.jpg");
	background-size: cover;
	background-position:right top;
}
.box4{
	background-image:url("img/banks-east.jpg");
	background-size: cover;
	background-position:right bottom;
}



.bg-image{
	width:100%;
}

.caption{
	margin-top:auto;
	padding:10px;
	background-color:rgba(0, 0, 0, 0.5);
	color:#FFF;
}
p.caption{
	margin-bottom:0;
}

.credit{
	font-size:0.8em;
	color:#CCC;
}

.credit a, .credit a:visited{
	color:#CCC;
}

.check{
	font-size:2em;
	color:#8de362;
	float:left;
	padding:0 15px 0 0;
	text-shadow: 2px 2px #555;
}

.check.cross{
	color:#ff3300;
}

.portrait{
	float:left;
	width:120px;
	width:auto;
	margin-top:5px;
}

.item-grid{
	display:flex;
	width:100%;
	flex-wrap:nowrap;
	justify-content:space-evenly;
}

.item{
	margin:10px;
	flex-shrink:1;
	flex-basis:auto;
	text-align:center;
}

.item-img{
	height:auto;
	width:100%;
}

.footer p {
	color:#CCC;
}




/*TAB SYSTEM*/

	input { display: none; }                /* hide radio buttons */
	input + label { display: inline-block } /* show labels in line */
	
	

	input ~ .tab { display: none }          /* hide contents *//* show contents only for selected tab */
	#tab1:checked ~ .tab.contents1,
	#tab2:checked ~ .tab.contents2,
	#tab3:checked ~ .tab.contents3,
	#tab4:checked ~ .tab.contents4{
		display: block;
		}

	input + label {             /* box with rounded corner */
	  border: 1px solid #999;
	  background: #CCC;
	  padding: 4px 12px;
	  border-radius: 4px 4px 0 0;
	  position: relative;
	  top: 1px;
	  cursor:pointer;
	}
	input:checked + label {     /* white background for selected tab */
	  background: #E4E4E4;
	  border-bottom: 1px solid transparent;
	}
	input ~ .tab {          /* grey line between tab and contents */
	  border-top: 1px solid #999;
	  padding: 12px;
	}
	
	.portfolio-tab{
	border: 1px solid #999;
	  background: #CCC;
	  padding: 4px 12px;
	  border-radius: 4px 4px 0 0;
	  position: relative;
	  top: 1px;
	  cursor:pointer;
	}
	
/*FLICKETY*/

* { box-sizing: border-box; }


.carousel {
  background: #EEE;
}

.carousel-cell {
  margin-right: 20px;
  overflow: hidden;
}

.carousel-cell img {
  display: block;
  height: 200px;
   width:auto;
  min-width:120px;

}

.carousel-img{
	height: 200px;
   width:auto;
  min-width:120px;
}
  
  

.main-carousel{
	margin:20px 0 50px 0;
	height:200px;
	text-align:center;
}

.carousel-cell {
  width: 20%;
  height: 200px;
  margin-right: 10px;
}

.carousel-cell.is-selected {

}

.carousel-img{
	height:200px;
	width:auto;
	display:block;
}



/* dots are lines */
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}

@media screen and (max-width:700px){
	
	.indent-pic{
	margin-left:120px;
	margin-right:0;
	}
	
	.carousel-cell {
		  width: 33%;
		  height: 200px;
		  margin-right: 10px;
	}

	
}

@media screen and (max-width:440px){
		.carousel-cell {
		  width: 50%;
		  height: 200px;
		  margin-right: 10px;
	}
	
}

@media screen and (max-width:380px){
	
	body{
		font-size:20px;
	}
	input + label {             /*reduce size of tabs for narrow screens*/
	font-size:0.8em;
	padding: 4px 6px;
	}
	
	.item-grid{
	flex-wrap:wrap;
	}
	
	.item{
	margin:10px;
	width:100%;
	}
	
	.carousel-cell {
		width: 75%;
		height: 200px;
		margin-right: 10px;
	}
}