/*!****/
/*!* styles.css | https://www.stonewarebirds.co.uk/inc/styles.css *!*/
* {
	box-sizing: border-box;
}
body {
	background-image: url('/images/back200.jpg');
	font-family: 'Habibi', serif;
	margin: 0;
	padding: 0;
}
h1 {
	color: #313326;
	text-align: center;
	margin: 0 0 16px;
	padding: 0;
}
h2 {
	font-size: 18px;
	color: #313326;
	line-height: 24px;
	text-align: center;
	width: 380px;
	margin: 0 auto 5px;
	padding: 70px 20px 0;
	clear: both;
	background-image: url('/images/stonewarebirds_h1.png');
	background-repeat: no-repeat;
	background-position: center top;
	height: 100px;
	max-width: 100vw;
	background-size: contain;

}
.containerPad {
	padding-top:10px !important;
	/*height: 626px !important;*/
	min-height:626px !important;
}
#container {
	/*background-image: url('/images/main900.png');*/
	background-image: url('/images/main900b.jpg');
	min-height:646px;
	padding: 0;
	background-size: cover;
	margin: 10px auto 0;
	overflow:auto;
	width: 900px;
	max-width: 100vw;
	background-position: center;
}
#container  a {
	color: #000;
	text-decoration: none;
	font-size: 14px;
}
#container img {
	border: none;
}

#container #baselevel a {
	color: #000;
	text-decoration: none;
	font-size: 18px;
}
#container #toplevel a {
	color: #000;
	text-decoration: none;
	font-size: 18px;
}
#container a:hover {
	font-weight: bold;
}
#controlbox {
	background-image: url('/images/white10fw70.png');
	padding: 5px;
	clear: both;
	width: 700px;
	margin: 10px auto;
}
#controlbox a {
	border-bottom: 1px solid blue;
}
#controlbox a:hover,
#controlbox a:focus {
	border-bottom-color:transparent;
}

.narrativel {
	font-size: 15px;
	line-height: 17px;
	width: 340px;
	margin: 0 auto;
	padding: 5px 85px 10px 25px;
	text-align: center;
	float: left;
}
.narrativer {
	font-size: 15px;
	line-height: 17px;
	width: 400px;
	margin: 3rem 1rem 1rem auto;
	padding: 5px 25px 10px;
	text-align: center;
	float: right;

}

#credit {
	width: 900px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 12px;
	color: #313326;
	padding: 5px 0;
	border-top: 1px solid #596442;
}
#nav {
	color: #FFF;
	text-align: center;
	width: 900px;
	margin: 0 auto;
	padding: 2px 0;
	display: block;
	background-image: url('/images/back50trunk.jpg');
	max-width: 100%;
}

#nav a {
	color: #FFF;
	text-decoration: none;
	margin: 0 5px;
	padding: 1px 5px;
	line-height: 2;
	display: inline-block;
}
#toplevel {
	margin: 0;
	padding: 0;
	height: 250px;
	width: 100vw;
	max-width: 900px;
}
#baselevel {
	padding: 0;
	height: 190px;
	width: 900px;
	margin: 0;
}

#bluetit {
	background-image: url('/images/bluetit200.png');
	padding: 0;
	height: 120px;
	width: 200px;
	margin-top: 0;
	margin-left: 60px;
	float: left;
	text-align: right;
	display: block;
	background-repeat: no-repeat;
}
#robin {
	background-image: url('/images/chaffinch200.png');
	height: 95px;
	width: 200px;
	margin-top: 60px;
	margin-left: 190px;
	float: left;
	clear: none;
	padding: 90px 0 0 0;
	text-align: right;
	display: block;
	background-repeat: no-repeat;
}
#wren {
	background-image: url('/images/robin180.png');
	padding: 0;
	height: 120px;
	width: 180px;
	margin-top: 0;
	margin-left: 40px;
	float: left;
	text-align: center;
	display: block;
	background-repeat: no-repeat;
	background-position: bottom;

}
#chaffinch {
	background-image: url('/images/greattit200.png');
	padding: 0;
	height: 111px;
	width: 200px;
	margin-top: 70px;
	margin-left: 30px;
	float: left;
	display: block;
	clear: left;
	text-align: right;

}
#thrush {
	background-image: url('/images/thrush200.png');
	height: 120px;
	width: 200px;
	margin-top: 24px;
	margin-left: 360px;
	float: left;
	text-align: right;
	display: block;
	left: 600px;
	top: 500px;
	padding: 16px 0 0 0;
}
.one {
	padding: 0;
	height: 160px;
	width: 160px;
	margin-top: 20px;
	margin-left: 60px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 10;
	left: 60px;
	top: 60px;
}

.two {
	padding: 0;
	height: 160px;
	width: 160px;
	margin-top: 0;
	margin-left: 0;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 20;
	left: 200px;
	top: 5px;
}
.three {
	padding: 0;
	height: 160px;
	width: 160px;
	margin-top: 20px;
	margin-left: 80px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 30;
	left: 600px;
	top: 60px;
}
.four {
	padding: 0;
	height: 170px;
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 40;
	left: 300px;
	top: 20px;
}
.five {
	padding: 0;
	height: 170px;
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 50;
	left: 200px;
	top: 60px;
}
.six {
	padding: 0;
	height: 170px;
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	left: 120px;
	top: 10px;
	z-index: 60;
	margin: 0;
}
.seven {
	padding: 0;
	height: 160px;
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 70;
	left: 400px;
	top: 10px;
}
.picsrow1,
.picsrow2 {
	text-align: center;
	width: 100%;
	max-width: 900px;
	clear: both;
}

.eight {
	padding: 0;
	height: 160px;
	width: 600px;
	margin-top: 0;
	margin-left: 0;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 10;
	left: 10px;
	top: 5px;
}
.eight > img {
	display: none;
}
.nine {
	padding: 0;
	height: 180px;
	width: 240px;
	margin-top: 20px;
	margin-left: 0;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 20;
	left: 20px;
	top: 120px;
}
.ten {
	padding: 0;
	height: 180px;
	width: 240px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 30;
	left: 60px;
	top: 60px;
}
.eleven {
	padding: 0;
	height: 100px;
	width: 340px;
	margin-top: 80px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 50;
	left: 310px;
	top: 180px;
}
#one {
	padding: 0;
	height: 160px;
	width: 160px;
	margin-top: 20px;
	margin-left: 60px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 10;
	left: 60px;
	top: 60px;
}

#two {
	padding: 0;
	height: 160px;
	width: 160px;
	margin-top: 0;
	margin-left: 0;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 20;
	left: 200px;
	top: 5px;
}
#three {
	padding: 0;
	height: 160px;
	width: 160px;
	margin-top: 20px;
	margin-left: 80px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 30;
	left: 200px;
	top: 60px;
}
#four {
	padding: 0;
	/*height: 170px;*/
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 40;
	left: 300px;
	top: 20px;
}
#five {
	padding: 0;
	/*height: 170px;*/
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 50;
	left: 200px;
	top: 53px;
}
#six {
	padding: 0;
	height: 170px;
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	left: 120px;
	top: 10px;
	z-index: 60;
}
#seven {
	padding: 0;
	height: 160px;
	width: 160px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 70;
	left: 400px;
	top: 10px;
}

#eight {
	padding: 0;
	height: 160px;
	width: 600px;
	margin-top: 0;
	margin-left: 0;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 10;
	left: 10px;
	top: 5px;
}
#nine {
	padding: 0;
	height: 180px;
	width: 240px;
	margin-top: 20px;
	margin-left: 0;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 20;
	left: 20px;
	top: 120px;
}
#ten {
	padding: 0;
	height: 180px;
	width: 240px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 30;
	left: 60px;
	top: 60px;
}
#eleven {
	padding: 0;
	height: 100px;
	width: 380px;
	margin-top: 80px;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	z-index: 50;
	left: 270px;
	top: 180px;
}
.clearall {
	clear: both;
}
#topHead {
	display:none;
}
#msg {
	background: #FFF;
	text-align: center;
	margin: 10px auto;
	padding: 2px;
	max-width: 600px;
	border: 2px solid #030;
	width: 80%;
}
#notearea{
	display: inline-block !important;
	max-height: 156px !important;
	overflow-y: scroll;
}
.discountTR {
	background-color: rgba(100,100,200,0.25);
}
.postTR,
table.discountOrders tr:nth-of-type(odd){
	background-color: rgba(100,200,100,0.25);
}
.totalTR{
	background-color: rgba(220,220,220,0.15);
}
.pageBlock {
	display: inline-block;
}
.pageBlock > a > strong {
	color:#33f;
}
table.discounts {
	border-collapse: collapse;
}
table.discounts tr:nth-of-type(n+2):not(:last-of-type) td {
	border-bottom:1px solid #999;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}
h2#nobird {
	padding-top:20px;
	background: none;
	height:auto;
	text-align: center;
}
table.discountOrders {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}

.transient_backing {
	background-color: rgba(250,250,250,0.5);
	border-radius: 0.5rem;
	margin-left: 1rem;
	margin-right: 1rem;
	padding: 0.5rem;
}

@media screen and (min-width: 900px) {

	#container {
		border-top-left-radius: 2rem;
		border-top-right-radius: 2rem;
	}
}


@media screen and (max-width: 890px) {
	div#container .picsrow1 a#one,
	div#container .picsrow1 a#three,
	div#container .picsrow1 a#four,
	div#container .picsrow1 a#five,
	div#container .picsrow1 a#six,
	div#container .picsrow2 a#seven,
	div#container .picsrow1 a#two {
		float:none;
		display: inline-block;
		width: 40%;
		position: static;
		margin: 2%;
		vertical-align: text-top;
		min-width: 250px;
		text-align: left;
		font-size: 15px; /* +1 to default 14px */
	}

	div#container .picsrow1 a > img,
	div#container .picsrow2 a > img {
		float:left;
		margin-right: 0.5rem;
	}


	div#container div.eight,
	div#container div.nine,
	div#container div.ten,
	div#container div.eleven	{
		float:none;
		position: static;
		height:unset;
		max-width: 100vw;
		margin: 1rem auto;
		width: unset;
		padding: 0 1rem;
	}

	div#container div.nine {
		display: none;
	}
	div#container div.eight > img {
		display: block;
		margin:1rem auto;
	}

}