html, body, header, article, section, footer,textarea, button, label, ul, li
{box-sizing:border-box; margin:0px; padding:0px; color:#282a2d; font-family:verdana, sans-serif;  
white-space: pre-wrap; /* This preserves spaces and line breaks! */}

html, body, div#wrapper{
	margin:0px;
	padding:0px;
	box-sizing: border-box; 
	background-color:beige;
}
body{

}
label{float:left; padding:10px 0px;}
button{float:left;}
input, button{font-family:verdana, sans-serif; height:60px; width:100%;}
div.selection{display:flex; flex-direction:row; width:400px;}
input[type="radio"] {width:auto; margin-left:15px; margin-top:-10px;}
textarea{font-family:verdana, sans-serif; height:600px; width:100%; }
::file-selector-button {
  border: 1px solid #1d1e18;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #e2e8c5;
  font-family:verdana, sans-serif;
}
	
h1{font-family:verdana, sans-serif; line-height:1.0; font-size:14px;  padding:20px 0px 10px 0px; color:#1d1e18; }
h2{font-family:verdana, sans-serif; line-height:1.0; font-size:20px;  padding:15px 0px 8px 0px; color:#1d1e18; }
h3{font-family:verdana, sans-serif; line-height:1.0; font-size:17px;  padding:15px 0px 8px 0px; color:#1d1e18; }
section#image-container div{
	position:relative;
	margin:0px; 
	padding:0px;
}
h2.image-text{
	position:absolute;
	top:0;
	left:0;
	box-sizing:border-box;
	width:100%;
	padding:20px; 
	
	background-color: rgba(255, 255, 255, 0.5);
	color:#261935;
}
p{font-family:verdana, sans-serif; color:#282a2d; font-size:18px; padding:5px 0px 10px 0px;}
a{font-family:verdana, sans-serif; color:#282a2d; font-weight:bold;}
a#logotype{
	text-decoration:none;
	font-size:18px;
	color:black;
}
a:hover{color:#282a2d; text-decoration:none;}
a.external{color:#74a9ff;}
a.external:hover, a.external:active{color:#527abb; text-decoration:none;}

div#top-part{display:flex; width:100%; height:60px; margin:0px; padding:2px 50px; background-color:#77556c; align-items:flex-start;}
div#top-part div{margin:0px; padding:0px; font-size:15px; color:#261935;}

header{ width:100%; position:absolute; top:0px; display:flex; flex-direction:column; padding:0px;}
header nav{
	padding:2px 20px;
	display:flex;
	flex-direction:row;
	align-items:center;
}

header a{padding:5px 7px; margin-right:10px;}
h1#location{
	padding:50px 20px;
}

article{
	display:flex; 
	flex-direction:column; 
	padding:20px 0px 10px 0px; 	
	align-items:center;
}

section{
	display:flex; 
	flex-direction:column; 
	padding:10px; 
	margin:15px;
	display:flex; 
	
}
section div{width:100%;}
section a{float:left;}

section#image-container{
	width:100%; height:900px;
	background-image:url("images/P9051331.JPG");
	background-repeat:no-repeat;
}
	
img{width:100%; height:auto;margin:0px; padding:0px; margin-bottom:15px;}
img.infographic{width:150px; height:auto; margin-bottom:15px;}
img.icon{
	max-width:50px;
	height:auto;
	float:left;
}

div.blog-content{
	white-space: pre-wrap;
	line-height:1.5; 
	font-size:20px;  
	padding:50px 0px 0px 40px; 
	color:black;
	
}
div.blog-info{display:flex; flex-direction: row; justify-content:left; }
div.blog-info a{ padding:25px 40px;}
div.blog-post{
		white-space: pre-wrap;
		background-color:white; 
		
}

footer{
	padding:20px;
	background-color:#c14c4c; 
	margin-top:25px; 
}
footer p, footer a{color:white; font-size:15px;}


ul li{list-style-type:none; }

ul#ul_food-diary{
	border-top:1px solid #282b2a;
	border-bottom:1px solid #282b2a;
}
ul#ul_food-diary li{display:flex; flex-direction:row; background-color:#bbbbb9; color:#282b2a; padding:10px 20px; border:1px solid #282b2a;}
ul#ul_food-diary li:first-child{border:0px 1px 1px 1px solid #282b2a;}
ul#ul_food-diary li:last-child{border:1px 1px 0px 1px solid #282b2a;}
ul#ul_food-diary li div:first-child{font-weight:bold; margin-right:5px;color:#323b0b; }
ul#ul_food-diary li div:nth-child(2){font-style:italic; margin-right:35px; color:#320b3b;}

 div.button-container{
 display:flex; flex-direction:row;}
 } 
 div.input-container{
 display:flex; flex-direction:column;}
 }
 div.button-container button{margin-right:5px;}
div.horizontal-container{display:flex; flex-direction:row;}

.horizontal{flex-direction:row;}
div#basket{max-width:500px; background-color: lightGray; color:purple; padding-right:20px;}

div#basket button{width:150px; padding:5px; font-size:12px; font-weight:bold; background-color:purple; color:lightGray; margin:10px; border:none;}
div#basket button:hover{background-color:purple; color:yellow;}
button#btnClearBasket{display:block; float:left;}
button#btnPay{display:block; float:right;}
p#cart{ padding:10px 30px; color:#191605;}
div#basket h2{padding:30px;}
.clear{clear:both; display:flex;}

div.store-image-container{
	width:100%;
	height:500px;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#87617b;
	position:relative;
	overflow:hidden;
}
div.buy-info{position:absolute; top:5px; right:5px;  background-color:rgba(255, 0, 0, 0.2); color:darkBrown; padding:0px; margin:0px; height:90px;}
div.buy-info button{position:absolute; top:5px; left:5px; width:auto; font-size:15px; padding:4px 7px; margin:3px;}

h3.blog-title{font-size:25px; font-weight:bold;}
a.blog-subject{font-style:italic;}
a.blog-time{font-size:12px; margin-top:-20px; padding-top:0px; color:#645568;}

@media (min-width: 800px) {
	div#top-part{padding:5px 80px;}
	header nav{
	padding:5px 70px;
}
	article{flex-direction:row; padding:20px 0px; }
	section{flex-direction:row; width:60%; padding:40px; margin-right:20px;}
	article{display:flex; flex-direction:row;}
	footer{padding:60px 70px 20px 70px;}
}

@media (min-width: 1900px) {

	div#top-part{padding:5px 80px;}
	header nav{
	padding:5px 70px;
}
	article{flex-direction:row; padding:20px 150px; justify-content: center;}

	section{width:700px; height:auto; overflow:none; flex-direction:row; justify-content:center;}
	section.forms{flex-direction:column; justify-content: left;}
	footer{padding:60px 70px 20px 70px;}
	
	img{height:450px; width:auto;}
	
	
	
}