/* main styles for screen only */

body {
	background-color: #ffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: #333333;
	text-align: center;
	letter-spacing: .2px;
}

html { width: 100%; height: 100% }

/* ------------------------------------------------------------
+ MAIN NAVIGATION
------------------------------------------------------------ */

#navBar { background: #232323; display: block; position: fixed; top: 0px; height: 60px; width: 100%; z-index: 99999 }

#navigation { margin: auto 0px  }

#navigation li { display: inline-block; margin-top: 20px }
#navigation li a { display: block; background: none; font-size: 0.9em; line-height: 1em; color: #fff; padding: 4px; text-decoration: none; margin: 0px 3px 2px 3px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out }
#navigation li a:hover { background: #fff; color: #333333; text-decoration: none; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out }

#navigation .navSpace { color: #a2b3c3; font-size: 10px; margin-bottom: 0px }
a#pull { display: none; }


.headerPane { display: block; position: relative; width: 100%; height: 550px }
.headerBg { position: absolute; top: 0px; left: 0px; height: 550px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: none }

.headerBg:first-of-type { z-index: 3 }

.ah_logo { display: block; position: relative; width: 425px; height: 150px; top: 85px; margin: 0px auto; z-index: 999 }

/*  GROUPING  */

.group:before, .group:after { content:""; display: table }
.group:after { clear:both }
.group { zoom:1; /* For IE 6/7 */ }

/*  COLUMN SETUP  */

.col { display: block; float: left; margin: 0 0 0 0; border: 0px solid green; box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

.col:first-child { margin-left: 0; }
.col:last-child { margin-right: 0; }

.wrapper { display: block; position: relative; color: #333333; font-weight: 300; font-size: 15px; line-height: 20px; margin: 0px auto; width: 100%; overflow: hidden }
.content { display: block; position: relative; color: #333333; font-weight: 300; font-size: 15px; line-height: 20px; margin: 0px auto; width: 1000px; border: 0px solid green }


/* ------------------------------------------------------------
+ GRID OF THREE
------------------------------------------------------------ */

.span_3_of_3 { width: 100%; position: relative }
.span_2_of_3 { width: 66.66%; position: relative }
.span_1_of_3 { width: 32.3%; position: relative; padding-left: 10px; padding-right: 10px; margin-left: 0.5%; margin-right: 0.5%; }


#footer .span_1_of_3:first-of-type { padding-left: 0px; padding-right: 10px }
                                    
/* ------------------------------------------------------------
+ GRID OF SIX OR SEVEN
------------------------------------------------------------ */
.span_1_of_6 { width: 16.66%; position: relative; }
.span_1_of_7 { width: 14.28%; position: relative; }

/* ------------------------------------------------------------
+ BLOCK  STYLES
------------------------------------------------------------ */
.anchorLink { display: block; position: absolute; top: 0px; border: 0px solid red; width: 1px; height: 1px; }

.infoPane .col {background: url("../images/grad.gif") repeat-x top left; border: 0px solid red; }
.infoPane img { display: block; width: 100%; height: auto; margin-top: 10px;}

.footerBack .span_1_of_3 {background: #fff;}


.enquirePane { padding: 50px 0 50px 0px }


/* ------------------------------------------------------------
+ BLOCK BACKGROUND STYLES
------------------------------------------------------------ */


.greyBack { background: #f8f8f8 }

.footerBack { background: #fff; background-image: url("../images/footer_bg.gif"); background-position: top left; background-repeat: repeat-x;}

.dGreyBack { background: #232323 }

.whiteBack { background: #fff }

/* ------------------------------------------------------------
+ TEXT LAYOUT STYLES
------------------------------------------------------------ */

p { color: #333333; -webkit-font-smoothing: antialiased }
p strong { font-weight: 600 }
.p66 { width: 66.66%; position: relative; box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0px }

.title, .tweetTitle { display: inline-block; position: relative; font-family: 'Josefin Sans', sans-serif; color: #a2b3c3; font-weight: 400; font-style: normal; font-weight: 600; text-transform: none; font-size: 25px; line-height: 26px; margin-top: 20px; margin-bottom: 10px; -webkit-font-smoothing: antialiased; }
/*.tweetTitle { text-align: left; }*/
.title:before { content: ""; display: block; position: absolute; background-image: url("../images/flourish_left.png"); background-repeat: no-repeat; background-position: top left; background-size: 100% 100%; width: 30px; height: 20px; top: 0px; left: -35px;}
.title:after { content: ""; display: block; position: absolute; background-image: url("../images/flourish_right.png"); background-repeat: no-repeat; background-position: top left; background-size: 100% 100%; width: 30px; height: 20px; top: 0px; right: -35px;}
.tweetTitle:after { content: ""; display: block; width: 324px; height: 2px; background: #ffcb08; margin: 25px auto 25px }


.general, .generalW, .formItem { font-weight: 300; font-size: 14px; line-height: 22px; margin: 0px auto 30px }
.formItem { margin: 0px auto 15px}
#footer .span_1_of_3:first-of-type .general:last-of-type:after { content: ""; display: block; width: 324px; height: 2px; background: #ffcb08; margin: 30px auto 20px }

.borderLeft { border-left: 4px solid white; box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box }
.borderRight { border-right: 4px solid white; box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box }

.white { color: #fff }
.yellow { color: #ffcb08 }
.black { color: #000 }
.purple { color: #8894c2}

/* ------------------------------------------------------------
+ FORM LAYOUT STYLES
------------------------------------------------------------ */

.generalBlock {
	display: block;
	position: relative;
}

.textInput, .textInputBlock {
	background: rgb(255,255,255);
	background: rgba(255,255,255, .8);
	color: #000;
	padding: 3px;
	width: 320px;
	height: 18px;
	margin: 4px auto 10px;
	text-align: left;
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	border: 0px;
}

.textInputBlock {
	height: 60px;
}
.textInput:focus, .textInputBlock:focus { 
	background: rgb(255,255,255);
	color: #2e6aa3;
}


/* ------------------------------------------------------------
+ FORM LAYOUT STYLES
------------------------------------------------------------ */

.bodyLink {
	text-decoration: none;
	color: inherit;
	font-size: inherit;
	-webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out 
}

.bodyLink:hover {
	text-decoration: underline;
	color: #000;
	-webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out 
}

/* ------------------------------------------------------------
+ FOOTER LAYOUT STYLES
------------------------------------------------------------ */

#footer .title, #footer .tweetTitle { margin-top: 30px; font-size: 25px }

.footerButton {
	display: inline-block;
	text-decoration: none;
	color: #8894c2;
	font-weight: bold;
	padding-left: 30px;
	height: 24px;
	overflow: hidden;
	margin-bottom: 25px;
	box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

.footerButton:last-of-type {
	margin-bottom: 0px;
}

.buttonFB {
	background: url("../images/footer_facebook_icon.gif") 0px 0px no-repeat;
}

.buttonFB:hover {
	background: url("../images/footer_facebook_icon.gif") 0px -24px no-repeat;
}

.buttonTW {
	background: url("../images/footer_twitter_icon.gif") 0px 0px no-repeat;
}

.buttonTW:hover {
	background: url("../images/footer_twitter_icon.gif") 0px -24px no-repeat;
}

.buttonIG {
	background: url("../images/footer_instagram_icon.gif") 0px 0px no-repeat;
}

.buttonIG:hover {
	background: url("../images/footer_instagram_icon.gif") 0px -24px no-repeat;
}



 @media only screen and (max-width: 999px) {
	.content { display: block; position: relative; color: #333333; font-weight: 300; font-size: 15px; line-height: 20px; margin: 0px auto; width: 100%; border: 0px solid red; }
	.mapPic { width: 100%; height: auto; }
 }
 
 
 @media only screen and (max-width: 799px) {
	#navigation li { display: inline-block; margin-top: 13px; }
	#navigation li a { padding: 0px; margin: 0px 0px 2px 0px; line-height: 0.8em; }
 }
 
@media only screen and (max-width: 599px) {
	.span_1_of_3 { width: 100%; position: relative; padding-left: 10px; padding-right: 10px; margin-left: 5px; margin-right: 5px; border: solid red 0px}
}
 
 @media only screen and (max-width: 480px) {
 	#content {
 		position: relative;
 		top: 0%;
		left: 0%;
		width: 100%;
 		margin: 20px auto 20px auto;
 		border: 0px solid yellow;
 	}
 	#navBar { height: 50px; }

 	#navigation { display: none; margin-top: 50px; }
 	#navigation li { display: block; background-color: #232323; width: 100%; border-bottom: 1px solid #333333; margin-top: 0px; margin-bottom: 0px;}
 	#navigation .navSpace { display: none; }
 	#navigation li a { margin: 0px 0px 0px 0px; padding-top: 15px; padding-bottom: 15px;}
 	
 	a#pull { display: block; background-color: #232323; position: absolute; top: 0px; height: 50px; width: 100%; color: #fff; text-decoration: none; font-size: 1em; letter-spacing: 2px; padding-top: 17px; text-transform: uppercase; border-bottom: 1px solid #333333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	a#pull:after { content:""; background: url("../images/menu_icon.gif") no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; left: 10px; top: 15px; } 
	
	.headerPane { height: 350px }
	.headerBg { height: 350px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: none }
 	.ah_logo { width: 90%; height: auto; top: 70px}

 	/*.drinksPane img { display: none; }*/
 	.span_2_of_3 { width: 100%; }
 	.span_1_of_3 { width: 100%; margin: 0px;}
 	.span_1_of_6 { width: 100%; }
 	.span_1_of_7 { width: 100%; }
 	.p66 { width: 100%;  padding-left: 10px; padding-right: 10px;}
 	
 	.title { margin-top: 40px; }
 	/*.title:after { margin: 15px auto 15px;}*/

	.general:last-of-type:after { margin: 20px auto 20px;}
	.generalW:last-of-type:after { margin: 20px auto 20px;}

 }