* {margin: 0; padding: 0}

body{
	font-family: 'Noto Sans', Verdana, serif;
}


a{

	text-decoration: none;
}

h2{

	color: #52A3CC;
}

h4{

  font: bold 20px/1.5 'Noto Sans', Verdana, serif;
}

.Introduction h2{

   font-size: 2em;

}

/*WEBSITE CONTENT */

/*********************************** HEADER **********************************/


header{

	position: fixed;
	z-index: 1;
	width:100%;
	height: 3.3rem;
}

@media (max-width: 480px){

	header{
		position: relative;
	}

}

nav a{

	width: 100%;
	
}

.fixedLinks a, .fixedLinks a:visited{

	display: inline-block;
	background-color: black;
	color: #FFFFFF;
	padding: 1em 2em;
	text-decoration: none;
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;

}

.book{
	background-color: black;
}


.eve {
	background-color: black;
}


.loc {
	background-color: black;
}


.les {
	background-color: black;
}


.fixedLinks a:hover, .fixedLinks a:active, .fixedLinks a:focus {
	background-color: #52A3CC;
	color: white;
}

.Logo{
	height: 3.3rem;

}

@media(max-width: 1106px){

	a.BATeeTime{
		padding: 1em;
		
	}
}

@media(max-width: 480px){

	a.BATeeTime{
		padding: 1em;
	}
	.fixedLinks img{

		width:10em;

	}
}



/********************************* Footer ***********************************/
.footer p{

	display: inline-block;

}

.footer{

	min-height: 6rem;
	width:100%;
}

.FooterContent1{

	background-color: #000000;
	color: #EAEBEC;
	padding-right: 1em;
	z-index: 1;
	border-right-style: solid;
	border-width: 1px;
	border-color: #52A3CC;
	text-align: right;
	font-size: 70%;
}

.test1{
	display:inline;
}

@media (max-width: 630px){

	.test1{
		display:none;
	}
}


.FooterContent2{

	background-color: #000000;
	color: #EAEBEC;
	padding-left: 1em;
	z-index: 1;
	text-align: left;
	font-size: 70%;
}

.FooterContent1>p{

	margin:0rem;
	padding:1rem;
	width: 15em;/* setting the width of the content */
	
}

.FooterContent2>p{

	margin:0rem;
	padding:1rem;
	width: 17em;/* setting the width of the content */

}

@media (max-width: 480px){

	.FooterContent1 p{
		font-size: 10px;
		padding-left: 25%;
		position:relative;
		right: 20%;
		
	}

	.FooterContent2 p{
		font-size: 10px;
		padding-right: 25%;

	}

}

/******************************** Homepage *********************************/

.HomeImage{

	position:relative;
	width:100%;
	
}

.HomeImage img.homepageImage{

	width:100%;
	height: auto;

}

.Intro{

	position:relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image: url("http://i.imgur.com/WAmnwbG.jpg");
	/*background-image: url('Photos/home/Background2.jpg');*/
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-top: 10em;
	padding-bottom: 10em;
	bottom: 5rem;
}

@media (max-width: 480px){

	.Intro{
		background-size: auto 100%;

	}
	.Introduction h2{
		font-size: 1em;

	}

}

@media(max-width: 560px){

	.Intro{
		background-size: auto 100%;

	}

}


@media (max-width: 600px){

	.Intro{
		background-size: auto 100%;

	}
	.Introduction h2{
		font-size: 1em;
	}

}

/************************************* INTRODUCTION BURNABYGOLF **********************************/


.Introduction{
	
	text-align: center;
	margin: 1em;
}

.Introduction h2 span{

	color: white;
	font: bold 3em Noto Sans, Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.5);
    padding: 10px; 

}


.FrontButton{

	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;

}

.FB{

	padding: 0.5em;
	background-color: #8AB800;
	color: white;

}

.FB:hover{

	background-color: #6E9300;

}

.PVG{

	text-align: center;
	display: inline-block;
	color:white;
	margin-top: 7em;
	width: 100%;
}

.PVG span{
	color: white;
	font: bold Noto Sans, Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.5);
    padding: 10px; 

}

@media (max-width: 480px){

	.PVG a{

		display:block;
		width: 100%;
	}
}

.PVG p{

	margin-top: 2em;
}


.pageContent{

	position: relative;
	top: 0em;
	z-index: 0;
}

/****************************** About *****************************/
.About{
	position:relative;
	background-color: #DDDDDD;
	min-height: 40em;

}

.aboutContent{

	text-align:center;

}
.aboutContent article {

	text-align: center;
	margin: auto;

}

.columnOne{

	margin:0;

}

.About h3{

	font-size: 150%;
	text-align: center;
	margin-bottom: 3em;
	padding-top: 5rem;
}

.About img{

	padding: 1rem;
	margin-top: 3rem;

}

.aboutImg{

	text-align: center;
	position:relative;
	margin: auto;
}

.aboutImg2{

	text-align: center;
	position:relative;
	margin: auto;
}
.aboutImg3{

	text-align: center;
	position:relative;
	margin: auto;
}
.About article{

	width: 40em;
	text-align: center;

}

.PVG1{

	padding-right: 1em;

}

/*create the paragraph indent for the first <p> tag */
article p.columnOne{
	text-align: left;
	text-indent:3em;

}

@media (max-width: 480px){

	article .columnOne{
		width: 50%;
		margin: 1em 2em;
		text-align: center;
	}

	.aboutImg{

		position: relative;
		left: 0em;

	}
}

@media(max-width:612px){

	#abtImage{
		width: 100%;
		height: 70%;
	}
	#abtImage2{
		width: 100%;
		height: 70%;
	}
		#abtImage3{
		width: 100%;
		height: 70%;
	}

}

/* create space and align the text of the second <p> tag (the continuation) 
article #columns{
	margin-left: 1em;
	float: left;
}
*/
/**************************** News ************************************/
/*make sure that the grid is working on border-box model */
article{

	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

.News{

	background-color: white;
	min-height: 50em;
	padding: 0em;
}

.News h3{

	font-size: 150%;
	text-align: center;
	margin-bottom: 3em;
	margin-left: 10em;
	padding-top: 5rem;
}

.News p{

	font-size: 1rem;
	line-height: 1.3em; 
	text-align: left;
	height: 5em;
	padding-top: 1em;
	margin-right:0em;
	margin-bottom: 2em;
}

.News img{

	float: right;
	margin-right: 2rem;

}

/*for the second news column*/

.secondHalf{

	float: left;
	text-align: left;
	margin-left: 3em;

}

.secondHalf img{

}

 .secondHalf p{

 	float:left;
	text-align: left;
	width: 100%;
 }

.date{

	color: gray;
	font-size: 0.5em;
	margin-top: 1em;
	

}



@media(max-width:1150px){

	.News img{
		float:left;
	}
	.News img{

		margin-left:2em;

	}
	.News p{

		padding:0em 2em;

	}
	.News h4{

		margin-left:2em;

	}
	.News{
		position:relative;
		left:7em;
		
	}
	.News h3{

		margin-left:1em;

	}

}

@media(max-width:900px){

	.News img{

		float:right;

	}
	.News{

		position:relative;
		right: 6em;

	}
	.secondHalf{

		position:relative;
		right:1.5em;

	}

}

@media(max-width: 480px){

	.News img{

		float: left;
		margin-left:2em;

	}
	.secondHalf{
		margin-left:0;

	}
	.News p {

		width: 100%;
		text-align:left;
		padding: 0em 2em;
	}
	.News{
		position:relative;
		left: 7em;

	}
	.News h3{

		margin-left:0em;


	}
	.News h4{

		margin-left:2em;
		

	}

}
/***************************** BOOKINGS *********************************/

.BookingSection{

	min-height: 45rem;
	position:relative;
	background-image: url("http://i.imgur.com/aH6LO3S.jpg");
	background-repeat:no-repeat;
	background-attachment: scroll;
	background-size: 100% 100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align:center;
}



.BookingSection section{

	width: 20em;
	margin-right: 0em;
	margin-left: 9em;
	margin-top: 6em;
	-webkit-transition: all 0.5s ease;
	  -moz-transition: all 0.5s ease;
	  -o-transition: all 0.5s ease;
	  -ms-transition: all 0.5s ease;
	  transition: all 0.5s ease;
}

.BookingSection section p{

	width: 100%;
	height: 100%;
	text-align: left;
	margin-top: 2em;
	padding-left:5em;
}

.BookingSection section a{

	width: 100%;
	text-align: center;
	margin-top: 2em;
	color:#52A3CC;
}

.textLink{

	width: 100%;

}
.BookingSection span{

	color: white;
	font: bold Noto Sans, Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.5);
    padding: 10px; 

}

@media(max-width: 480px){

	.BookingSection{
		background-size: auto 100%;
		background-repeat:no-repeat;
		background-attachment: scroll;

	}

	.BookingSection section{

		margin-left: 0em;
		float:left;
	}

	.BookingSection section p{

		width: 75%;
		margin-bottom: 2em;
	}
	.return{
		position: relative;
		left:5em;

	}
}

@media(max-width: 500px){


	.BookingSection{
		background-size: auto 100%;

	}

	.BookingSection section{

		margin-left: 0em;
		float:left;
	}
	.BookingSection section p{

		width: 75%;
		margin-bottom: 2em;
	}

}

@media(max-width: 1000px){


	.BookingSection{
		background-size: auto 100%;

	}

	.BookingSection section{

		margin-left: 3em;
		float:left;
	}
	.BookingSection section p{

		width: 75%;
		margin-bottom: 2em;
	}

}


/*************************** Booking A Table ****************************/
article.art{


	position: relative;
   	min-height: 5em;
    left: -1rem;
	text-align: left;	 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
   	
}

.content{

	text-align: left;
	padding: 3em;
	line-height: 250%;

}

h2.BAT{
	font-size: 160%;
	text-align: left;
	/*padding-top: 2em;*/
	padding-left: 1.5em;
}

/*display of the links within li

.fixedLinks>li{

	position:relative;
	bottom: 1em;
	display:inline;
	padding: 3em;
	left: 15em;
}

*/

/*the image is responsive according to the size of the window*/

figure.resPhotos{
	float: left;
	width: auto;
	max-width: 100%;


}

@media(max-width:1260px){

	.whole{

		position:relative;
		left:3em;

	}

}

@media(max-width:1168px){

	.whole{

		position:relative;
		left:6em;

	}
}

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

    figure.resPhotos { display:none }
}

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

    figure.resPhotos { display:none }
}


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

    figure.resPhotos { display:none }
    .whole{
    	position:relative;
		left:3em;
	}
}

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

    figure.resPhotos { display:none }
}




/*************************** Receipt ****************************/


/*position of the image on the reciept*/

.image1{

 	float: left;
	height: auto; 
	width: auto;
	max-width: 100%;

}

.content{

	padding-left:1em;

}

/* Submit Button */

.SubmitButton{
	margin-top: 1.5em;
	margin-bottom: 5em;
	float: left;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
}

.SB{
	padding: 0.5em;
	background-color: #87b636;
	color:white;
}

.SB:hover{
	background-color: #73a224;
}
/*the contact information of the gold course in the footer*/

.address{
	list-style:none;
	float:left;
	position: relative;
	left: 20rem;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

ul.Buttonss{

	list-style-type:none;
	display:inline-block;
	width:100%;
}

.Buttonss li{

	position:relative;
}

/* Home Button */


.HomeButton{
	margin-top: 2em;

	float: left;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
}

.HB{
	padding: 0.5em;
	background-color: #87b636;
	color:white;
}

.HB:hover{
	background-color: #73a224;
}


/* Edit Button */


.EditButton{
	margin-left: 0.5em;
		margin-top: 2em;
	float: left;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
}

.EB{
	padding: 0.5em;
	background-color: #87b636;
	color:white;
}

.EB:hover{
	background-color: #73a224;
}



/* Cancel Button */


.CancelButton{
	margin-left: 0.5em;
		margin-top: 2em;
	float: left;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
}

.CB{
	padding: 0.5em;
	background-color: #87b636;
	color:white;
}

.CB:hover{
	background-color: #73a224;
}

@media(max-width:1260px){

	.moveEverything{

		position:relative;
		left:3em;

	}

}

@media(max-width:1168px){

	.moveEverything{

		position:relative;
		left:6em;

	}

}

@media screen and (max-width:480px) {
    figure.resPhotos { display:none }
    .moveEverything{
    	position:relative;
		left:3em;
	}
}
/********************** Cancelled **********************************/

.Cancel h1{

	padding-top: 10rem;

}

.GoingBack{
	
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
}

.goback{
	padding: 0.5em;
	background-color: #87b636;
	color:white;
}

.goback:hover{
	background-color: #73a224;
}


/********************** Golf Course *********************************/


.Riverway{

	position: relative;

}

.Riverway h1{

	text-align: center;
	padding-top: 2em;
	color: #000000;

}

.riverwayDesc{

	text-align: center;
	margin-top: 2em;
	
}


section .riverwayDesc p{

	
	width: 50%;
	text-align: left;
	text-indent: 3em;

}


.BurnabyMountain{


	background-color: #DDDDDD;
	position:relative;

}

.BurnabyMountain h1{

	color: #000000;
	padding-top: 2em;
	text-align: center;

}

.BurnabyMountainDesc{

	text-align: center;
	margin-top: 2em;
	
}

section .BurnabyMountainDesc p{

	
	width: 50%;
	text-align: left;
	text-indent: 3em;

}

.Kensington{

	position:relative;

}

.Kensington h1{

	color: #000000;
	padding-top: 2em;
	text-align: center;
}

.KensingtonDesc{

	text-align: center;
	margin-top: 2em;
	
}

section .KensingtonDesc p{

	
	width: 50%;
	text-align: left;
	text-indent: 3em;

}

.CentralPark{

	background-color: #DDDDDD;
	position:relative;
}

.CentralPark h1{

	color: #000000;
	padding-top: 2em;
	text-align:center;

}

nav.navi {
  margin: 4em 4em;
  width: 100%;
  text-align:center;

}

@media(max-width: 1150px){

	nav.navi{
		width:75%;

	}

}


.navi ul {
  overflow: auto;
  list-style-type: none;
  width: 100%;
  padding-left: 9em;
}

.navi ul li {
  height: 25px;
  float: left;
  margin-right: 0px;
  border-right: 1px solid #aaa;
  padding: 0 20px;
}

@media(max-width:500px){

	.navi ul li{

		padding-bottom: 3em;
		margin-bottom: 3em;
	}

}

.navi ul li:last-child {
  border-right: none;
}

.navi ul li a {
  text-decoration: none;
  color: #565656;
  font: 10px/1 Helvetica, Verdana, sans-serif;
  text-transform: uppercase;
 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.navi ul li a:hover {
  color: #080808;
}
 
.navi ul li.active a {
  font-weight: bold;
  color: #333;
}