@import 'reset.css';
@import 'grid.css';


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


body {
	background: #2D4507;
	color: #FFFFFF;
	font-family: "Source Sans Pro", helvetica, arial, sans-serif;
	font-size: 16px;
	line-height: 1.2em;
}

/* Hide some areas for desktop view */
#jump, .outter-wrap nav li#back {
	display: none;
}

a { color: #51800c; text-decoration: none; }

h1 { font-size: 2.5em; font-weight: bold; line-height: 2em; }
h2 { font-size: 1.75em; font-weight: bold; line-height: 1.5em; margin: 0.5em 0; }
h3 { font-size: 1.25em; font-weight: bold; line-height: 1em; margin: 0.3em 0; }
h4 { font-size: 1em; font-weight: bold; line-height: 0.75em; margin: 0.25em 0; }

p { line-height: 140%; margin: 0.5em 0; }


img.float-left,
img.alignleft { float: left; margin: 8px 8px 8px 0; }
	img.float-left:after,
	img.alignleft:after { display: block; clear: both; content: " "; height: 0; overflow: hidden; }

img.float-right,
img.alignright { float: right; margin: 8px 0 8px 8px; }
	img.float-right:after,
	img.alignright:after { display: block; clear: both; content: " "; height: 0; overflow: hidden; }



a.action-button,
input[type='submit'] {
	background: #2D4507;
	border: none;
	color: #FFF;
	display: inline-block;
	float: right;
	font-size: 14px;
	margin: 8px;
	padding: 10px 16px;
}



strong, .bold { font-weight: bold; }
.italic { font-style:italic; }
.center { text-align: center; }
.clear { clear: both; }
.spacer { height: 20px; }
.spacer-bottom { margin-bottom: 10px; }
.required { color: #FF0000; }

form { margin: 1em 0; }
label { clear: both; display: inline-block; font-weight: bold; padding: 0.75em 0 0.25em; }
input[type='email'], input[type='text'], textarea { border-radius: 3px; clear: both; display: inline-block; font: inherit; padding: 0.25em; width: 100%; background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #B6B6B6; }
input[type='submit'] { float: none; font-weight: bold; margin: 1em 0 0; }
textarea { height: 15em; resize: none; }
input.error, select.error { background: #FFBABA; color: #D8000C; border-color: #D8000C; }




#header-wrap {
	background: #FFF;
	border-bottom: 3px solid #666;
	height: 89px;
}

#header-wrap .row { overflow:visible; }
#header-wrap .twelvecol { position: relative; }

#header-wrap #logo {
	margin-top: 6px;
	height: 77px;
	width: 112px;
}

#header-wrap nav {
	position: absolute;
	bottom: 1px;
	right: 0;
	float: right;
}
#header-wrap nav ul {
	float: right;
	list-style-type: none;	
}
	#header-wrap nav ul li {
		float: left;
		font-size: 0.75em;
		text-transform: uppercase;
		display: inline-block;
		*display: inline;
		zoom: 1;
	}
		#header-wrap nav ul li a {
			padding: 1.6em 2em;
			color: #666;
			display: block;
		}
		#header-wrap nav ul li a.active {
			color: #222;
		}
		
		#header-wrap nav ul li.menu-item-has-children {
			position: relative;
		}
		#header-wrap nav ul li.menu-item-has-children:hover ul {
			display: block;
		}
		#header-wrap nav ul li.menu-item-has-children ul {
			display: none;
			position: absolute;
			margin: 0;
			padding: 0;
			list-style-type: none;
			background: #ffffff;
			border: 1px solid #666666;
			border-top: 0 none;
			white-space: nowrap;
		}
		#header-wrap nav ul li.menu-item-has-children ul li {
			display: block;
			font-size: 1em;
			float: none;
		}
		#header-wrap nav ul li a {
			display: block;
			text-decoration: none;
		}
		
#header-wrap span {
	float: left;
}


#main {
	background: url('images/background.jpg') #EAEAEA center top;
	color: #222;
	margin-top: 0;
	z-index: 1;
}
	#main .container { background: #fff; margin: 0 auto; max-width: 1160px; padding-bottom: 32px; }
	#main em { font-style: italic; }
	#main ol { list-style-type: decimal; margin-left: 25px; }
	#main ul { list-style-type: disc; margin-left: 25px; }
	#main table { width: 100%; }
	#main table td { font-size: 90%; padding: 4px; width: 33%; }
	
#side-wrap {
	background: #C0C0C0;
	margin-top: 32px;
	margin-bottom: 70px;
	padding: 0 8px 8px;
	text-align: center;
}
	#side-wrap #package-wrap { background: #CFCFCF; margin: 8px 0; padding: 8px; }
	#side-wrap h3,
	#side-wrap h4 { font-weight: bold; }
		#side-wrap h4:before {
			background-image: url('images/star.jpg');
			background-position: left center;
			background-repeat: no-repeat;
			padding: 0 13px;
			content: "\00a0";
		}
		#side-wrap h4:after {
			background-image: url('images/star.jpg');
			background-position: right center;
			background-repeat: no-repeat;
			padding: 0 13px;
			content: "\00a0";
		}
	#side-wrap h4+p { font-size: 90%; }
	#side-wrap a.button-link { background: #fff; color: #000; display: inline-block; margin: 8px; padding: 4px; }

#pre-footer-wrap { overflow: visible; padding: 0; }
#pre-footer { background: url('images/footer-badminton.png') no-repeat top right; top: -63px; height: 160px; position: relative; }

footer {
	height: 150px;
}
	footer .row { clear: both; padding: 0 0 1em; }
	footer a { color: #fff; text-decoration: underline; }
	footer #footer-right { text-align: right; }
	
	
#social-icon-wrap {
	padding-top: 8px;
    text-align: center;
}
	#social-icon-wrap ul li {
		color: #2D4507;
		display: inline-block;
		position: relative;
	}
		#social-icon-wrap ul li a {
			background: none repeat scroll 0 0 #E6E6E6;
			border-radius: 17px;
			color: inherit;
			float: left;
			font-size: 22px;
			height: 34px;
			line-height: 34px;
			margin-right: 10px;
			text-align: center;
			vertical-align: middle;
			width: 34px;
		}



/* ====================================== */
/*   Custom layout for wide version   */
/* ====================================== */


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


/* ====================================== */
/*   Custom layout for standard version   */
/* ====================================== */


@media only screen and (min-width: 768px) and (max-width: 1140px) {
	
	#header-wrap {
		height: 60px;
	}
	
	#header-wrap #logo {
		margin-top: 4px;
		height: 50px;
		width: 73px;
	}
	
	#header-wrap nav ul li a {
		padding: 1.6em 0.75em;
	}
		#header-wrap nav ul li ul li a {
			padding: 0.75em 0.75em;
		}
	
	
	#main { background :#fff; }
	
}


/* ==================================== */
/*   Custom layout for mobile version   */
/* ==================================== */


@media handheld, only screen and (max-width: 767px) {
	
	.mobile { display: inline; visibility: visible; }
	.desktop { display: none; visibility: hidden; }
	.outter-wrap nav#related-sites .mobile { display: block; }
	.outter-wrap nav#related-sites ul.desktop { display: none; visibility: hidden; }
	
	img.float-left, img.float-right, img.alignleft, img.aligncenter, img.alignright { clear: both; display: block; float: none; margin: 8px auto; }
	
	#wrapper {
		width: 100%;
		margin: 0px;
	}
	
	#header-wrap {
		height: 60px;
	}
	
		#header-wrap #logo {
			margin-top: 4px;
			margin-left: 20px;
			height: 50px;
			width: 73px;
		}
		
		#header-wrap nav {
			bottom: auto;
			position: relative;
			right: auto;
			float: none;
		}
			#header-wrap nav ul li.menu-item-has-children:hover ul {
				display: none;
			}
	
	#header-wrap .row .twelvecol { padding-left: 0; padding-right: 0; }
	
	.outter-wrap nav {
		background: none;
		visibility: hidden;
	}
		.outter-wrap nav ul {
			height: 44px;
			margin: 0;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			z-index: 1000;
		}
			.outter-wrap nav ul li {
				background: #666;
				height: 45px;
				padding: 0px;
				width: 100%;
			}
				.outter-wrap nav ul li#back {
					height: 60px;
				}
				.outter-wrap nav ul li a,
				.outter-wrap nav li a.on {
					background: url('images/x1/arrow.png') no-repeat scroll 97% 50%;
					text-align: left;
					padding: 16px 6px;
					width: 100%;
				}
				#header-wrap nav ul li a,
				#header-wrap nav ul li a.active {
					color: #fff;
				}
		
		body:not(:target) .outter-wrap nav ul#nav {
			left: 0;
			margin: 0;
			outline: 0 none;
			position: absolute;
			right: 0;
			top: 0;
			visibility: none;
			z-index: 1000;
		}
			body:not(:target) .outter-wrap nav ul#nav:target {
				visibility: visible;
				z-index: 1001;
			}
			body:not(:target) .outter-wrap nav ul#nav a {
				border-bottom-width: 0;
				font-size: 120%;
				font-weight: bold;
				height: 0;
				line-height: 0;
				overflow: hidden;
				padding: 0 1em;
			}
			body:not(:target) .outter-wrap nav ul#nav:target a {
				 -moz-transition: height .25s ease 0s, line-height .25s ease 0s;
				  -ms-transition: height .25s, line-height .25s;
				   -o-transition: height .25s, line-height .25s;
			  -webkit-transition: height .25s, line-height .25s;
					  transition: height .25s, line-height .25s;
				
				height: 44px;
				line-height: 44px;
				position: relative;
				padding: 0 20px;
				z-index: 1;
			}
				.outter-wrap nav ul:target li:hover {
					background: #222;
					color: #fff;
				}
			.outter-wrap nav ul li {
				float: auto;
			}
				.outter-wrap nav ul li:not(:last-child){
					border-bottom: 1px solid #ffffff;
				}
	
	#jump {
		color: #222;
		text-align: center;
		font-size: 30px;
		line-height: 56px;
		cursor: pointer;
		display: block;
		padding: 0;
		height: 56px;
		width: 56px;
		position: absolute;
		right: 0;
		top: 1;
		z-index: 1001;
	}
	
	body:not(:target) .outter-wrap nav ul#nav:target li#back {
		background: none;
		border-bottom: none;
		display: block;
		position: relative; 
	}
		body:not(:target) .outter-wrap nav ul#nav:target li#back a {
			background: none repeat scroll 0 0 transparent;
			border: 0;
			bottom: -101em;
			display: block;
			height: auto;
			left: 0;
			line-height: 1;
			position: absolute;
			right: 0;
			text-indent: -999em;
			top: -101em;
			z-index: 0;
		}
	
	
	
	a.action-button {
		margin: 6px;
		padding: 8px 12px;
	}
	
	
	input[type='email'], input[type='text'], textarea { width: 100%; }
	label { margin-top: 10px; }
	
	
	#main { background :#fff; }
	
	
	footer #footer-right nav {
		margin-top: 20px;
	}
		
		footer #footer-right nav ul {
			margin: 0;
			position: absolute;
			right: 0;
			left: 0;
		}
			footer #footer-right nav ul li {
				text-align: left;
				height: 45px;
				width: 100%;
			}
			footer #footer-right nav ul li a {
				background: url('images/x1/arrow.png') no-repeat scroll 97% 50%;
				border-bottom-width: 0;
				font-weight: bold;
				height: 0;
				line-height: 0;
				overflow: hidden;
				padding: 0 1em;
				height: 44px;
				line-height: 44px;
				position: relative;
				padding: 0 20px;
				display: block;
				width: 100%;
			}
			.outter-wrap footer #footer-right nav li a {
				text-align: left;
			}
				footer #footer-right nav ul li:hover a {
					background: url('images/x1/arrow.png') no-repeat scroll 97% 50%;
					background: url('images/x1/arrow.png') no-repeat scroll 97% 50%;
				}
				
				footer #footer-right nav ul li:not(:last-child){
					border-bottom: 1px solid #ffffff;
				}


}