/* CSS Document */

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body { margin: 0px;
background-image:url(images/header.jpg);
background-repeat:repeat-x;
font-family:Arial;
padding:0px;

 }
 #wrapperouter{
	background-color:#fff; }
#wrapper{
	margin:0;
	max-width:1024px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	margin-top:0px;
}
#header-wrapper{

text-align:center;
}
#logo{
	display: inline-block; width:500px;
	margin:0px;

}
#haverfordwest{
	float:left;
	width: 120px; 
	font-family:Tahoma, Arial;
	font-size:18px;
	color:#fff;
margin-top:50px;
padding-left:20px;
}
#tel{
	float:right;
	width: 200px;
	font-family:Tahoma, Arial;
	font-size:18px;
	color:#fff; 
	margin-top:50px;
	height:41px;
	vertical-align:middle;
}

#tel img{
	vertical-align:middle;
}

.columnsContainer, footer, header { position: relative; margin: .5em; text-align:left; }

.leftColumn, .rightColumn, footer, header {  border: none; padding: 1.25em;  }

.leftColumn { margin-bottom: .5em; min-height:520px; text-align:left; font-size:0.9em;  }

.leftColumn a{color:#670001;
	
}

.nav {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
  text-align:center;
  font-family:Tahoma, Arial;
}

.nav ul {
	margin:0px;
}

.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
  color:#670001;
  text-decoration:none;
}

.headimage{
	width:100%;
	height:auto;
	box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;
margin-bottom:20px;
	
}

.inline-items {
  margin-top: 0;
}

.inline-items li {
  margin-left: 0;
  /*border-left: 1px solid black;*/
  padding-left: 10px;
  padding-right: 10px;
}

.inline-items li:first-child {
  margin-left: 0;
  border: none;
  padding-left: 0;
  padding-right: 10px;
}

.inline-items li:last-child {
  padding-right: 0;
}

h1, h2, h3, h4{
	color:#660000;
	 font-family:Tahoma, Arial;
	 font-weight:400;
	 
}
h2{
	margin-top:0px;
}

.products{
	width:115px;
	text-align:center;
	margin-right:5px;
	margin-bottom:5px;
	float:left;
}
.products h3{
	width:100%;
	color:#fff;
	background-color:#660000;
	margin:0px;
	padding:0px;
}

.products a{

	text-decoration:none;
}


.rightColumn ul{
	margin:0px;
	padding:0px;
	list-style:none;
	
}

.rightColumn ul li{
	margin:0px;
	padding:0px;
	
}

.rightColumn ul li a{
	color:#242415;
	font-family:Tahoma, Arial;
	font-size:14px;
	text-decoration:none;
	font-weight:normal;
	
}

.rightColumn h3{
	background-color:#660000;
	color:#fff;
	padding:3px;
	margin-bottom:3px;
	font-weight:300;
}

.rightColumn h3.first{
	margin-top:0px;
}

#footer, #footer h3{
	background-color:#000;
	color:#fff;
	font-weight:normal;
	font-family:Tahoma, Arial;
}

#footer-inner{
	max-width:1024px;
	margin-left:auto;
	margin-right:auto;
	
}

#footcontact{
	width:33%;
	float:left;
	margin-left:25px;
	
	
}
.map{
	width:193px;
	float:left;
}

.maptext{
	width:130px;
	float:left;
	font-size:85%;
	margin-left:10px;
}

#footcontact img{

vertical-align:middle;

}

#footfacebook{
	width:302px;
	float:left;
	
	margin-left:25px;
	
}

#footopening{
	width:28%;
	float:left;
	margin-left:40px;
	
}

#baseline{
	  background-color:#670001;
	  height:30px;
	  margin-top:20px;
}

/* MEDIA QUERIES */
@media screen and (min-width: 50.5em ) {
  .leftColumn { margin-right: 19.5em; }

	.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   
	
	
}

@media screen and (max-width: 50.5em ) {
	
	body {
background-image:url(images/header2.jpg);
background-repeat:repeat-x;
	}
	
	#logo{
		display: inline-block; 
	}
	
	#logo img{
		width:400px;
		
	}
		#haverfordwest{
	float:none;
	width: 100%; 
	font-family:Tahoma, Arial;
	font-size:22px;
	color:#000;
	margin-top:0px;
	margin-right:30px;
	text-align:center;
	color:#660000;
	clear:left; 
}
#tel{
	float:none;
	width: 100%;
	font-family:Tahoma, Arial;
	font-size:22px;
	color:#000; 
	
		margin-top:0px;
		text-align:center;
		color:#660000;
}

#tel span{
	clear:both;
	
}

#tel img{
	width:30px;
}

h1, h2, h3, h4{
	
	
}
	
}

@media screen and (max-width: 40.5em ) {
	
	#logo{
		display: inline-block; width:300px; 
	}
	
	#logo img{
		width:300px;
		
	}
	
	body { 
background-image:none;

}