*{
	padding:0;
	margin:0;
	font-family:Calibri;	
}

fieldset, img{
	border:none;	
}

.mobile{
	display:none;	
}

#header{
	padding-top:1em;
	border-bottom:solid 3px #000;
	background:url(images/headerbg.jpg) no-repeat center 18%;
}

a{
	text-decoration:none;
	color:#8C1719;
}

a:hover{
	text-decoration:underline;	
}

ul{
	list-style:none;	
}

/* Header Contact Details */
#contactDetails{
	width:25%;
	margin-top:3em;
	margin-left:15em;
	position:absolute;
}

address{
	font-style:normal;
	font-size:large;
	line-height:1.8em;
}

/*Header Logo */
h1 img{
	position:relative;
	display:block;
	width:200px;
	height:260px;
	margin:0 auto;
	padding-bottom:1em;
}

h2{
	color:#8C1719	
}

h2.headerTitle{
	text-align:center;
	padding-bottom:0.5em;
}

/* Header Opening Hours */
#hours{
	width:20%;
	position:absolute;
	right:15em;
	top:3em;;
}

.hours{
	text-align:center;	
	border-spacing: 0;
    border-collapse: collapse;
}

.hours td,
.hours th{
	padding:0.3em;
	border-bottom: 2px solid #000;
}


td.closed{
	color:#B70205;
	font-weight:bold;
}

/*Content */
#container{
	width:auto;
	height:auto;
	position:relative;
	background:#fff url(images/stripe.png) repeat;
}

#container h2{
	padding-left:1em;
	border-bottom:solid 2px #8C1719;
}

.event{
	width:250px;
	margin-left:1em;
	margin-top:1.5em;
	float:left;
	height:250px;
	border:solid 1px #000;
	text-align:center;
	position:relative;
	background-repeat:no-repeat !important;
}

.event .caption{
	font-style:italic;	
}

.event p{
	padding-left:1em;
	padding-right:1em;	
}

.event h3{
	padding-top:2.2em;	
}

.event .date{
	font-size:1.3em;
	position:absolute;
	bottom:0.2em;
	left:0;
	width:250px;
	font-weight:bold;
}


#events, 
#menus,
#about{
	float:left;
	margin: 2em 2%;
	background-color:#fff;
	padding-bottom:2em;
}

#events{
	width: 30%;	
}

#about{
	width: 36%;	
}

#menus{
	width: 20%	
}

p{
	padding-top:0.75em;	
	padding-left:1.5em;
	line-height:1.3em;
}

ul{
	padding-left:1.5em;	
}

#menus a{
	font-size: 1.5em;
	line-height:1.5em;
}

h2.first{
	padding-top:0.75em;	
}

#socialMedia{
	position:absolute;
	right:9%;
	top:70%;
	text-align:center;
}

p.pictures{
	text-align:center;	
}

@media screen and (max-width: 1800px){
	.event{
		width:180px;	
	}
	
	.event .date{
		font-size:1.1em;
		width:180px;	
	}
	
	.event h3{
		padding-top:0.1em;
	}
	
	#socialMedia{
		top:50%;
	}
}

/* Tablet and Desktop Portrait Mode */
@media screen and (max-width: 1200px){

#contactDetails{
	width:25%;
	margin-top:3em;
	margin-left:3em;
	position:absolute;
}

#hours{
	width:30%;
	position:absolute;
	right:3em;
	top:3em;;
}

#events{
	width:25%;		
}

.event{
	width:210px;	
}
	
.event .date{
		font-size:1.1em;
		width:210px;	
	}
	
.event h3{
		padding-top:1.1em;
}

#menus{
	width:25%;
}

#socialMedia{
	position:absolute;
	right:7%;
	top:40%;
	text-align:center;
}	
}

@media screen and (max-width: 800px){

h1 img{
	width:200px;
	height:260px;
	margin:0 0;
	padding-bottom:1em;
	padding-left:0.5em;
}

#contactDetails{
	width:30%;
	margin-top:0em;
	margin-left:225px;
	position:absolute;
}

#hours{
	width:30%;
	position:absolute;
	right:1em;
	top:1em;;
}

address{
	font-size:medium;	
}

#events, 
#menus,
#about{
	float:none;
	margin: 1em 1%;
	background-color:#fff;
	padding-bottom:2em;
}

#menus{
	width:100%;	
	position:relative;
	float:left;
	text-align:center;
}

#menus li{
	display:inline;	
}

#menus li.small{
	display:none;	
}

#menus a{
	display:inline-block;
	width:220px;
}

#events, #about{
	position:absolute;
	clear:both;
}

#about{
	width:60%;
	top:90%;
	left:35%;	
}

#events{
	width:30%;
	top:90%;
	float:left;	
}

.event{
	width:100%;
	margin-left:0.5em;
	margin-top:0.5em;
	height:250px;
	border:solid 1px #000;
	text-align:center;
	position:relative;
}

.event .caption{
	font-style:italic;	
}

.event p{
	padding-left:1em;
	padding-right:1em;	
}

.event h3{
	padding-top:1.2em;	
}

.event .date{
	font-size:1.2em;
	position:absolute;
	bottom:0.2em;
	left:0;
	width:100%;
	font-weight:bold;
}
		
		
#socialMedia{
	display:none;	
}
}

@media screen and (max-width:670px){

#container{
	background-color:#fff;
	background-image:none;
}

.mobile{
	display:block;	
}

h1 img{
	width:25%;
	height:auto;
	margin:0 auto;
	padding-bottom:0.5em;
	padding-left:0.25em;
}

h2{
	text-align:center;
	margin-top:1.5em;	
}

 .topMobile{
	margin-top:0.5em;	 
 }

#contactDetails, 
#hours,
#events,
#menus,
#about{
	display:none;	
}

#contactDetailsMobile{
	text-align:center;	
}

.event{
	width:45%;
	height:350px;
}
}