@charset "utf-8";
/* CSS Document */

html {
    /* Prevent font scaling in landscape while allowing user zoom */
    -webkit-text-size-adjust: 100%;
}

body {
	background: #ffffff;
	margin: 0;
	padding: 0;
	color: #646466;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	line-height: 140%;
}
a:link {
	color: #006699;
}
a:visited {
	color: #003399;
}
a:hover, a:active, a:focus {
	color: #5c267c;
}


/* resets the box model */
.row, 
.column {
    box-sizing: border-box;
}

/* clears the floating elements on the row to maintain the structure of the layout  */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

/* clear the floating elements on the row to maintain the structure of the layout */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* sets the container */
.container {
	width: 100%;
	margin: auto;
	background-color: #ffffff;
}

/* Columns */
/* defines the column common styles */
.column {
    position: relative;
    float: left;
		display: block;
}
.column + .column { /* sets the gutters except column 1 */
	margin: 0 1.6%;
}

/* using a 12 column grid */
.column-1 {
	width: 6.86666666667%;
}
.column-2 {
	width: 15.3333333333%;
}
.column-3 {
	width: 23.8%;
}
.column-4 {
	width: 32.2666666667%;
}
.column-5 {
	width: 40.7333333333%;
}
.column-6 {
	width: 49.2%;
}
.column-7 {
	width: 57.6666666667%;
}
.column-8 {
	width: 66.1333333333%;
}
.column-9 {
	width: 74.6%;
}
.column-10 {
	width: 83.0666666667%;
}
.column-11 {
	width: 91.5333333333%;
}
.column-12 {
	width: 100%;
}
h2 {
	font-size: 32px;
	color: #5c267c;
	line-height: 120%;
	margin-top: 30px;
	margin-right: 10px;
	margin-bottom: 0px;
	font-weight: normal;
}
h3 {
	font-size: 1.5em;
	color: #5c267c;
	line-height: 120%;
	font-weight: normal;
}
h4 {
	font-size: 1.2em;
	margin-top: 20px;
	color: #5c267c;
}

p {
	margin-top: 16px;
	font-size: 1.1em;
	line-height: 140%;
}

ul {
	margin-left: 20px;
	font-size: 1.1em;
	line-height: 120%;
}
ul ul {
	margin-top: 8px;
	font-size: .9em;
}
li {
	margin-bottom: 8px;
}
hr {
	color: #005C93;
	height: 2px;
	background-color: #005C93;
}
address {
	font-weight: bold;
	font-size: 1.1em;
	line-height: 140%;
	font-style: normal;
	margin-left: 12px;
}
.address{ /* used for the Ealing address header on contact page */
	margin-bottom:-12px;
	font-size: 1.2em;
}
.logo {
	background-color: #FFFFFF;
	padding-top: 12px;
	padding-bottom: 6px;
}

blockquote {
	border-bottom: 1px solid #6990A8;
	padding-top: 6px;
	padding-bottom: 6px;
}
blockquote p {
	margin-bottom: 6px;
}
blockquote p span {
	font-size: 200%;
	vertical-align: text-top;
}



/* Header area */
header {
	background-color: #5c267c;
	text-align: center;
}

/* Strapline area */
.strapline {
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
	display: block;
	height: 530px;
	position: relative;
	margin-bottom: 10px;
}
.strapline h1 {
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 410px;
	width: 100%;
	text-align: center;
	color: #FFF;
	font-size: 48px;
	display: block;
	height: 90px;
	font-weight: normal;
	background-color: #002D56;
	background-color: #5c267c;
	line-height: 180%;	/* opacity: 0.8;
	filter: alpha(opacity=80); */
}
/* applies different bg image for each page */
#homepage .strapline, #contactpage .strapline {
	background-image: url(../images/strap-home.jpg);
}
#mshippage .strapline {
	background-image: url(../images/strap-mship.jpg);
}
#newspage .strapline {
	background-image: url(../images/strap-news.jpg);
}
#newsletterpage .strapline {
	background-image: url(../images/strap-newsletter.jpg);
}
#officerspage .strapline {
	background-image: url(../images/strap-officers.jpg);
}
#historypage .strapline {
	background-image: url(../images/strap-history.jpg);
}
#contactpage .strapline {
	background-image: url(../images/strap-home.jpg);
}
#rulespage .strapline {
	background-image: url(../images/strap-rules.jpg);
}
#sitemappage .strapline {
	background-image: url(../images/strap-sitemap.jpg);
}
#boxright {
	float: right;
	width: 280px;
	margin-top: 16px;
	border: 1px solid #66C;
	margin-left: 12px;
}
#boxright h3 {
	font-size: 1.4em;
	text-align: center;
	margin-top: 8px;
	margin-bottom: 6px;
}
#boxright p {
	margin: 8px;
}
#boxright ul {
	margin-left: 0px;
	margin-top: 0px;
}
#boxright ul li {
	font-size: .8em;
	margin-left: -18px;
	list-style-type: none;
	margin-right: 12px;
}

.imgright {
	float: right;
	margin: 0 12px 0 12px;
}

/* table of golf results */
table.results {
	border-collapse: collapse;
	margin-bottom: 1em;
	width: 90%;
	clear: right;
}
table.results caption {
	font-weight: bold;
	padding-bottom: 0.25em;
}
table.results th {
	font-size: 90%;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #5E00A0;
	padding: 4px;
	text-align: left;
}
table.results td {
	font-size: 90%;
	font-weight: normal;
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px dashed #FF8000;
}
.golf-teams {
	width: 520px;
	float: right;
	margin-top: -20px;
}
.golf-photos {
	float: left;
	padding: 8px;
	list-style-type: none;
	text-align: center;
}

/* items on the contact page */
.contact {
	border-bottom: 1px solid #002D56;
}
.contact iframe { /* Google Map */
	border: 1px solid #002D56;
	padding: 4px;
	height: 308px;
	width: 408px;
	margin-top: 40px;
}

/* site Map menu list */
.sitemap li {
	list-style-type: none;
	margin-top: 12px;
	font-size: .9em;
}
.sitemap li ul {
	margin-top: 6px;
}

/* footer formatting */
footer {
	background-color: #ecd203;
	font-size: 0.8em;
	margin: 30px 0;
	position: relative;
	color: #333;
}

/* Miscellaneous classes */
.colc2d3df {
	background-color: #C2D3DF;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.floatleft {
	float: left;
}
.floatright{
	float: right;
	margin-left: 6px;
}
.grey {
	background-color: #eaebed;	
}
.linethrough {
	text-decoration: line-through;
}
p span {
	font-size: 1.3em;
	color: #007CC3;
}

.darkblue {
	background-color: #002D56;
}
.darkblue a:link {
	color: #fff;
}
.darkblue a:visited, .vacancylink a:visited {
	color: #fff;
}
.darkblue a:hover, .darkblue a:active, .vacancylink a:hover, .vacancylink a:active {
	color: #6990A8;
}
.privacystatement {
	text-align: left;
	font-size: 90%;
	line-height: 110%;
	margin: 0 12px;
}

/* AMP provides ul on Contact page */
ul.weregood {
	color: #004873;
	font-size: 1.25em;
}
ul.weregood li:nth-child(1) {
	margin-left: 140px;
	margin-bottom: 20px;

}
ul.weregood li:nth-child(2) {
	margin-left: 320px;
	margin-bottom: 12px;
}
ul.weregood li:nth-child(3) {
	margin-left: 440px;
}

@media only screen and (max-width: 1024px) {
		
		.strapline {
			background-position: center -40px;
			height: 500px;
			margin-bottom: -30px;
		}
		.strapline h1 {
			font-size: 40px;
			line-height: 210%;
			top: 300px;
			height: 90px;
		}

		/* AMP provides ul on Contact page */
		ul.weregood li:nth-child(1) {
		margin-left: 40px;
		margin-bottom: 20px;
	
		}
		ul.weregood li:nth-child(2) {
			margin-left: 220px;
			margin-bottom: 12px;
		}
		ul.weregood li:nth-child(3) {
			margin-left: 340px;
		}
}

@media only screen and (max-width: 800px) {
		/* sets the container */
		.container {
			width: 100%;
		}
		.column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        width: auto;
        float: none;
				margin: 0;
    }
		
		/* removes left gutters */
    .column + .column { 
        margin: 0;
		}		
		h2, h3, h4, p {
			margin-left: 2%;
		}
		
		.strapline {
			background-position: center -40px;
			height: 420px;
			margin-bottom: -50px;
		}
		.strapline h1 {
			font-size: 34px;
			line-height: 210%;
			top: 260px;
			height: 80px;
		}
		h2 {
			margin-top: 0;
		}
		.nomargintop {
			margin-top: -40px;;
		}
	
		.menu li { /* all list items */
			font-size: 14px;
		}
		.menu li a:link, .menu li a:visited {
			padding: 2px 5px;
		}
		
		/* AMP provides ul on Contact page */
		ul.weregood li:nth-child(1) {
		margin-left: 120px;
		margin-bottom: 20px;
	
		}
		ul.weregood li:nth-child(2) {
			margin-left: 300px;
			margin-bottom: 12px;
		}
		ul.weregood li:nth-child(3) {
			margin-left: 420px;
		}
}

@media only screen and (max-width: 768px) {
		.column-1 {
			height: 0;
		}
		.column-8 {
			padding-right: 12px;
		}
		
		/* creates the hamburger icon */		
		.hamburger {
			cursor: pointer;
			padding: 15px;
			display: block;
		}
		.line {
			border-bottom: 4px solid #bbb;
			width: 35px;
			margin-bottom: 6px;
		}
		.line:last-child {
			margin-bottom: 0;
		}
		/* formats the menu for mobile */		
		.menu {
			float: left;
			width: 320px;
			height: 0;
			overflow: hidden;
			transition: height 0.3s;
		}
		.open {
			height: 390px;
		}
		.menu li {
			width: 320px;
			float: none;
		}
		.menu li:hover ul, .menu li.sfhover ul { /* lists nested under hovered list items */
			display: block;
			text-align: left;
			top: -40px;
			left: 94px;
		}
		
		.strapline {
			background-position: center -40px;
			height: 420px;
			margin-bottom: -50px;
		}
		.strapline h1 {
			font-size: 33px;
			line-height: 210%;
			top: 260px;
			height: 80px;
		}
		
		/* AMP provides ul on Contact page */
		ul.weregood li:nth-child(1) {
		margin-left: 90px;
		margin-bottom: 20px;
	
		}
		ul.weregood li:nth-child(2) {
			margin-left: 270px;
			margin-bottom: 12px;
		}
		ul.weregood li:nth-child(3) {
			margin-left: 390px;
		}
}

/* adjusts the width of the columns to fit full width */
@media only screen and (max-width: 640px) {
		
		/* hides strapline */		
		/* hides strapline */		
		.strapline {
			height: 90px;
			background-image: none;
			width: 100%;
			margin-bottom: 10px;
		}
		.strapline h1 {
			width: 100%;
			text-align: center;
			margin: 0;
			padding: 6px 0 0 6px;
			font-size: 32px;
			line-height: 120%;
			display: block;
			height: 90px;
			background-color: #5c267c;
			background-image: none;
			color: #FFFFFF;
			position: absolute;
			z-index: 10;
			left: 0px;
			top: 0px;
		}
		.strapline h1.twoline { /* headers that wrap to a second line */
			font-size: 26px;
			line-height: 100%;
		}
		
		h2 {
			font-size: 160%;
			margin-top: 6px;
		}
		
		#boxright {
			float: none;
			width: 96%;
			margin: 0 12px;
		}
		/* cricket photo */
		#cricket-team {
			width: 600px;
			height: 282px;
		}
}

@media only screen and (max-width: 480px) {
		.strapline h1 {
			font-size: 25px;
			line-height: 140%;
		}
		h2 {
			margin-top: 10px;
			text-align: left;
			font-size: 20px;
		}
		.nomargintop {
			margin-top: -40px;;
		}
		.floatright {
			float: none;
		}
		#rcimg {
			width: 440px;
			height: 372px;
		}
		.imgright {
			float: none;
		}
		/* cricket photo */
		#cricket-team {
			width: 460px;
			height: 216px;
		}
}

@media only screen and (max-width: 360px) {
		.strapline {
			height: 70px;
			background-image: none;
			width: 100%;
			margin-bottom: 10px;
		}
		.strapline h1 {
			font-size: 22px;
			height: 70px;
		}
		h2 {
			margin-top: 10px;
			text-align: left;
			font-size: 16px;
		}
		/* AMP provides ul on Contact page */
		ul.weregood li:nth-child(1), ul.weregood li:nth-child(2), ul.weregood li:nth-child(3) {
			margin-left: 10px;
			margin-bottom: 20px;
		}
		#rcimg {
			width: 310px;
			height: 262px;
		}
}

@media only screen and (max-width: 320px) {
			
		.strapline h1 {
			font-size: 22px;
		}
		h2 {
			margin-top: 10px;
			text-align: left;
			font-size: 16px;
		}
		#rcimg {
			width: 260px;
			height: 220px;
		}
}