/* The Hope Carshalton CSS styles Version 0.1.0 

Author - James Renwick */


@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

/* Styles are stated here and then inherited/overwritten for ipad and desktop views */

/* == Fluid grid layout == */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* == Element styles == */

body {
	font: normal 100% Helvetica, Arial, sans-serif;
	background: black;
}
h1 {
	font-size: 1.5em;
	width:90%;
	
}
h2 {
	font-size: 1.375em;
}
h3 {
	font-size: 1.25em;
}
h4 {
	font-size: 1.125em;
}
h1, h2, h3, h4, p {
	margin: 0.83em 5%;
}
table {
	margin: 0 0 5% 5%;
	width:90%;
}
hr {
width: 90%;
margin: 0 5%;
}
a {
	text-decoration:none;
}

:focus, :active {  
    outline: 0;  
}  

/* == Useful classes == */

.clear {
	clear:both;
}
.small {
	font-size:0.8em;
}
.mobileHide {
	display:none;
}

/* == Heading == */


	#test { /* Used to test for Javascript */
		display:none;
	}
	
#heading { 
	width: 100%;  
	position: relative;
	top: 0;
	text-align:center;
	color:white;
	font-size: 1.125em;
	font-weight:bold;
	background: black;
	border-radius:5px;
	-webkit-box-shadow:  5px 5px 50px 5px rgba(0, 0, 0, 0.6);
        
        box-shadow:  5px 5px 50px 5px rgba(0, 0, 0, 0.6);
}
#mainHeading { 
padding:0.1em;
}
#mainHeading h1 {
	font-size: 1.5em;
	width:90%;
	
}



#tabs {
	width:100%;
	border-top:1px solid white;
	border-bottom: 1px solid white;
	background:black;
	z-index: 100000;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);

}

.tab {
width: 50%;
float: left;
text-align:center;
padding: 0.3em 0;
font-size:0.9em;
}

.tab:hover {
background: darkorange;
}

.tab a {
text-decoration: none;
color: white;
display: block;
}


#signature {
position: fixed;
width: 100%;
color: white;
text-align: center;
bottom: 0;
left: 0;
z-index: -100;
font-size:0.8em;
}
.announcement {
text-align: center;
border-top: 4px orange solid;
border-bottom: 4px orange solid;
width: 90%;
margin: 5%;
padding: 3% 0;
font-size: 1.4em;
font-weight: bold;
}
#signature a {
	color:white;
}

#signature a:hover {
	color:orange;
	font-weight:bold;
}

/* == Background ==*/
.background {
	background-image:url(../cssImages/background.png);
	background-repeat: no-repeat;
	background-position: 0% 100%;
	background-size: 10%;
	background-attachment: fixed;
	position:fixed;
	z-index:1000;
	width: 10%;
	padding-bottom: 100%;
	display:none; /* not diplayed for mobile view as screen is too small */
}
#right {
	right:0;
	background-position: 100% 100%;
}
	
	
/* == Main Content == */

#page {
	position: relative;
	background: black;
	background-image:url(../cssImages/wood.jpg);
	color: white;
	margin: 0px;
	margin-bottom: 3em;
	width: 100%;
	padding-top:0.1em;
border-right: 0px;
border-bottom: 0px;
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.6);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.6);
	clear:both;	
	overflow:hidden;

}

#content {
	float:left;
	width:100%;
	position:relative;
}

.col1,
.col2 {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
}

.col1 {
	width:100%; /* mobile and tablet view is single column layout */
}
.col2 {
	/*when desktop view 2nd col is visible however width style is set here */
	width:29%;
	display:none;
}

/* == Slider == */
/* Esentially a horrizontal accordion */

#infoSlider {
	display:none; /* Only visible in tablet view */
	margin:10px auto;
	overflow:hidden;
	border-radius:5px;
	width:95%;
}
.sliderHeader {
width: 25%;
text-align: center;
vertical-align: middle;
float: left;
display: table-cell;
padding-bottom: 50px;
margin-bottom: -45px;
opacity: 0.7;
background: black;
}
.sliderHeader:hover {
color:orange;
opacity:1;
cursor:pointer;
}
.sliderHeader h3 {
font-size:1em;
margin:auto;
}

#sliderBody {
color: black;
background: white;
z-index: 10;
position: relative;
border: 10px black solid;
height:9.875em;
padding:0;
}

.sliderContent{
	display:none;
	position:absolute;
	width:100%;
}
.event-header {
width: 46%;
text-align: center;
vertical-align: middle;
float: left;
display: table-cell;
padding-bottom: 0;
margin: 2%;
opacity: 0.1;
background: black;
color: white;
padding: 1%;
border-radius: 10px;
}
.event-header a {
color: white;
}
.event-header:hover {
opacity:1;
}
.event-header:hover a {
color: orange;
}
.event-header h3 {
font-size:1em;
margin:auto;
}

.active-title {
opacity: 1;	
}


/* == Accordion == */

/* only visible for mobiles. allows lots of information to be contained in a small amount of space */

#accordion {
	display:block; /* will be set to none for tablets and desktops */
color: white;
background: none;
position:relative;
}
#accordion .ui-accordion-content {  
font-size: 10pt;
line-height: 16pt;
background: black;
color: black;
width: 100%;   
padding:0.3em;
} 
#accordion .ui-accordion-content:last-of-type {  
}
#accordion .ui-accordion-header {
background: black;
opacity: 0.7;
background-image: url(../cssImages/arrow2.gif);
border-bottom: lightgrey 1px solid;
background-repeat: no-repeat;
background-size: 1em;
background-position-x: 95%;
background-position-y: 50%;
background-position: 95% 50%;
font-size: 1em;
margin: 0;
padding: 0.83em 5%;
}
#accordion .ui-accordion-header:hover {
	cursor:pointer;
opacity:1;
color:orange;
}
#accordion .ui-state-active {
background-image: url(../cssImages/arrow.gif);
background-repeat: no-repeat;
background-size: 1em;
background-position-x: 95%;
background-position-y: 50%;
opacity:1;
}

	
* {   
    -moz-box-sizing: border-box;   
    -webkit-box-sizing: border-box;   
    box-sizing: border-box;  
}  
#accordion .ui-accordion-content > * {  
    margin: 0;  
	padding:0 5%;
}



/* == second column information == */
/* I put the 2nd col styles here as its with all of the other info parts which all use the classes within this section */

#info {
	display:none; /* Only displayed for desktops */
}

.infoBox {
	padding:0.3em;
	background:white;
}
.infoBox img {
	display:block;
	margin:1em auto;
}
.infoBox p {
	font-size:1em;
}
.events-home {
	border:none;
	width:95%;
}
.events-home td {
padding: 3%;
}
.events-home .highlight {
width:50%;
font-size:0.8em;
}
.highlight {
	font-weight:bold;
}


/* == Content items == */

/* all white boxes have this class (except info boxes) */

.content-item {
	width:95%;
	margin:10px auto;
	background: #FFF;
	position: relative;
	color: black;
	border: 0.0625em black solid;
	margin-bottom:5%;
    border-right: 2px solid rgba(0, 0, 0, .2);  
    border-left: 2px solid rgba(0, 0, 0, .2);  
    border-bottom: 2px solid rgba(0, 0, 0, .2);  
    border-top: 2px solid rgba(250, 250, 250, .2); 
	
	
	-webkit-box-shadow:  0px 0px 0px 0px rgba(0, 0, 0, 0);
        
        box-shadow:  0px 0px 0px 0px rgba(0, 0, 0, 0);
}

/* == Home == */

/* for boxes used on the home page */

.main-item {
padding: 0 5% 5% 5%;
}
.main-item  h3,
.main-item  p{
margin-left:0;
}
.main-item p{
display:table-cell; /* keeps the text from wrapping around the images */
}

.about-item p {
display:block !important;
}

/*.left,
.right{
display:none; not the background images, these are for images on the homepage which don't appear in mobile view 
}*/

/* image styles for images that are portait or landscape. Also left and right positioning of the images */

.portrait {
	max-width:195px;
	max-height:270px;
	width:70%;
	height:100%;
}
.landscape {
	max-width:270px;
	max-height:195px;
	width:100%;
	height:100%;
}
.portrait-large {
	max-width:195px;
	max-height:270px;
	width:70%;
	height:100%;
}
.landscape-large {
	max-width:270px;
	max-height:195px;
	width:100%;
	height:100%;
}
.right, 
.left {
	display:block;
	float:none;
	margin: 3% auto;
}



/* == Contact us page == */



#maplink {
	display:block; /* Map isn't displayed for mobiles so this is displayed instead */
}
#map { /* the wrapper element for the google map. set to none as the map is too big for mobile view */
display: none;
float: right;
width: 40%;
height: 15em;
margin: 0 5%;
}
#gmap {
width: 100%;
height: 100%;	
}
#contact {
width: 90%;
margin: 0 5%;
}
#contact h3,
#contact p,
#contact table {
	margin-left: 0;
}
.travel {
	list-style: none; /* Removes bullet points */
}
.travelHead {
	list-style: none;
}


/* == Events == */

.events {
	width:90%;
	margin: 0 5%;
}
.events a {
	text-decoration:none;
}
.events tr {
border-bottom: rgb(214, 214, 214) 1px solid;
}
.events td {
font-size: 0.8em;
padding: 1% 1% 1% 5%;
font-weight: bold;
height: 6.25em;
vertical-align: middle;
}
.events .highlight {
width: 20%;
text-align: left;
border-right: rgb(214, 214, 214) 1px solid;
}
.events .col-head {
height: 1.25em;
font-size: 1.2em;
padding: 1% 1% 1% 1%;
border-bottom: orange 4px solid;
}
.info {
font-weight: normal;
font-size: 0.8em;
margin: 2% 0%;
}
.small-events .highlight {
font-size: 0.8em;
padding: 1% 1% 1% 1%;
width: 20%;
}
.small-events td {
font-size: 0.8em;
padding: 1% 1% 1% 1%;
}


/* == Links == */

#links {
	width:100%;
}
.logo{
	width:94%;
float: left;
text-align: center;
border-bottom: 1px lightgray solid;
margin: 3%;
}
.logo img {
height: 90px;
width: auto;
}



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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


#accordion {
	display:none;
}
#infoSlider {
	display:block;
}
	
.mobileHide {
	display:block;
}
#mainHeading h1{ 
	font-size:1.5em;
}
#mainHeading h3{ 
	font-size:1em;
}
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.portrait {
	max-width:130px;
	max-height:180px;
	width:70%;
	height:100%;
}
.landscape {
	max-width:180px;
	max-height:130px;
	width:100%;
	height:100%;
}
.portrait-large {
	width:30%;
}
.landscape-large {
	width:40%;
}

.right {
	float:right;
	margin: 0 0 0 5%;
}
.left {
	float:left;
	margin: 0 5% 0 0;
}
.content-item {	
	-webkit-box-shadow:  5px 5px 5px 5px rgba(0, 0, 0, 0.6);
        
        box-shadow:  5px 5px 5px 5px rgba(0, 0, 0, 0.6);
}


#tabs {
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.6);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.6);

}


.tab {
width: 33.33333333334%;
}

#contact {
width: 40%;
}
#map {
display: block;
}

.logo{
	width:44%;
}
#signature {
	font-size:1em;
}
.events td {
	font-size:1em;
}
.events .highlight {
text-align: right;
}
.event-header {
	width:29%;
}
}
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 800px) {
	
.col1 {
	width:70%;
}
.col2 {
	display:block;
}
	#test {

		display:block;
background: white;
border: red 3px solid;
	}
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#heading {
	/*position: fixed;*/
	z-index: 1000;
}
#mainHeading { 
	margin: 0 auto;  
	width: 90%;  max-width: 61.75em;
}
#mainHeading h3{ 
	font-size:1.25em;
}
#page {
	min-width:48em;
	margin: 20px  auto 3em auto;
	width: 78%;
	max-width:61.75em;
border-right: 7px solid rgba(0, 0, 0, .4);
border-bottom: 7px solid rgba(0, 0, 0, .7);
}

#tablist {
	min-width:48em;
	margin:0 11%;
}

.tab {
width: 16.66666666666666667%;
font-size:1.125em;
}
#infoSlider {
	display:none;
}

#info {
	display:block;
}

.infoBox {
	padding:0.3em;
}
.infoBox img {
	display:block;
	margin:1em auto;
}
.infoBox h3 {
	font-size:1em;
}
.infoBox p {
	font-size:0.8em;
margin: 0.83em 5%;
}


.main-item p,
left,
right{
display:table-cell;
}

#bar {
	display:block;
}

#maplink {
	display:none;
}
.event-header  {
	width:21%;
}
}
@media only screen and (min-width: 1000px) {
	.background {
		display:block;
	}
}