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

		/* web font - Oswald: require this to solve the display problem in Chrome when user has oswald font installed in their machine*/
		
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 300;
	src: local('☺'), local('☺'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src: local('☺'), local('☺'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	src: local('☺'), local('☺'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

/* TAG STYLE : this is the default settings for the webpage */
html {
	height: 101%;
}
body {
	margin: 0px;
	padding: 0px;
	color: #DAD3C2;
	font-size: 100%;
	font-family: 'Oswald', Verdana, Geneva, sans-serif;
	letter-spacing:1px;
	text-transform:uppercase;
	text-align: center; /* Used by older IE browsers to center page. Note: text-align reset back to left in div (or right for Arabic)) */
	direction: ltr;
	/*Creat full image background*/
	background: url(../ty-commonObject/background/canvasBkgrd_1800x1200.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color:black;
}
div {
	display: block;
	border: 0px solid #fffffe;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	border: 0px solid #fffffe;
	text-shadow: 3px 3px 3px black;
}

h1{font-weight:700;color:#D8C583;}
h2{font-weight:400;}
h3{font-weight:400;}		
img {
	padding: 0px;
	margin: 0px;
	border: 0px solid #fffffe;
}
a {
	color: #DAD3C2;
}
a:hover {
	color: #D8C583;
}
ul, li {
	margin: 0;
	padding: 0;
	}

footer {
	display:block;
	visibility: visible;
}
nav{display:block;}

address{
	display:block;}


/* ID STYLE : target one object and give it a defined style */
		
#dPageHolder {
	max-width: 2000px;/*Site would not stretch beyond 2000px*/
	width: 100%;
	height: 1000px;
	margin-left: auto;
	margin-right: auto;
	
}
	#dHeader {
		z-index:10;
	/*	-moz-transform: translateZ(10px);
		-o-transform: translateZ(10px);
		-webkit-transform: translateZ(10px);
		transform: translateZ(10px);*/
		
		position:fixed; /*hold #dHeader at the top of the page*/
		top:0px;/*hold #dHeader at the top of the page for IE*/
		width: 100%;/*let the #dHeader stretch*/
		max-width: 2000px;/*#dHeader can only stretched to 2000px*/
		height: 60px;
		font-weight: 300;
		font-size: 15px;
		letter-spacing:1.5px;
		border-bottom:1px solid rgba(0,0,0,0.9);
		box-shadow:0 5px 5px rgba(17,17,17,0.3);
		background:rgba(0,0,0,0.7);
		}
	
		/*--Top nav menu (#nNav) styles in Header--*/
			#nMainNav {
				/*Nav is defined as a block element from the TAG styles*/
				max-width: 640px;
				min-width:570px;
				height:60px;
				padding: 0;
				margin: 0 auto ; /*Margin: auto used to center the Nav within the dHeader*/
				}
				#aHome_SmallScreen,#dSmallScreenBtn {display:none;}
				
			 	#dNavBox {
					max-width: 640px;
					min-width:570px;
					height:60px;
					}
				  #ulMainNavList {
					  width: 100%; /* take out the whole width of the of #nMainNav*/ 
					  height: 60px;
					  list-style: none;
					  }
					  
					  #ulMainNavList li {
						  float: left;
						  width:20%;
					  }
					  
					  #ulMainNavList li:hover {
						  background:#000;
						  }
						  
						  #ulMainNavList li a {
							  display: block;/*take up the whole width of the li element*/
							  line-height: 60px; 
							  text-decoration: none;
						  }
			  /*--END top nav menu styles in Header ---*/
			  
						  /*-- Styles targets the <a> tag for the Home Button with bird Logo background--*/
						  #aHomeBtn {
							  background: url(../ty-commonObject/logo/canvasClub_BirdLogo_43x44.png) no-repeat center;
							  width: 100%;
							  height: 60px;
							  }
						  #aHomeBtn:hover {
							  background: url(../ty-commonObject/logo/canvasClub_BirdLogoHover_43x44.png) no-repeat center;
							  
						  }
						  /*--END styles targets the <a> tag for the Home Button with bird Logo background--*/


	#dSubHeader{display:none;}
	#dTorso{
		width:100%;
		max-width:2000px;
		height:auto;
		}
		#dLeft{display:none;}
		#dMiddle{}	
		#dRight{display:none;}
		
	
	/*-dSubHeader contains the contact links, located towards the bottom of the page-*/
	#dSubFooter{
		position:fixed;/*hold #dSubFooter just above the footer of the page*/
		bottom:33px;/*postion the #dSubFooter 33px from the bottom of the viewport (33px is the height of the footer*/
		width:100%;/*stretched to the width of the viewport*/
		max-width: 2000px;/*only stretched to 2000px*/
		height:auto;/*the height would stretched between 60px and 120px;*/
		min-height:60px;
		max-height:120px;
		text-align:center;
		font-weight: 300;
		font-size: 15px;
		/*box-shadow:0 -5px 5px rgba(17,17,17,0.3);*/
		background:rgba(0,0,0,0.8);
		z-index:9;
		}
		#ulContactList{
			width:90%;/*stretched to 90% of #dSubFooter*/
			max-width:1100px;/*only stretched out to 1100px of width*/
			height:auto;/*the height would stretched between 60px and 120px;*/
			min-height:60px;
			max-height:120px;
			margin-left:auto;/* center #ulContactList within #dSubFooter*/
			margin-right:auto;/* center #ulContactList within #dSubFooter*/
			list-style:none;
			
			}
				#ulContactList li{
					display:inline-block;
					line-height:60px;
					}
				
					/*Styles targets the <a> within the <li> under the #ulContactList */
					#ulContactList li a{
						text-decoration:none;
						padding-right:30px;
						padding-left:50px;
						}
							/*--Styles fo the <a> items under the #ulContactlist--*/
							#aGoogleMap{
							background:url(../ty-commonObject/icons/locationIcon_14x20.png) no-repeat 20px center;
							}
							
							#aGoogleMap:hover{
							background:url(../ty-commonObject/icons/locationIcon_Hover_14x20.png) no-repeat 20px center;
							}
							
							#aTel{
							background:url(../ty-commonObject/icons/callUsIcon_17x17.png) no-repeat 20px center;
							}
							
							#aTel:hover{
							background:url(../ty-commonObject/icons/callUsIcon_Hover_17x17.png) no-repeat 20px center;
							}
							
							#aEmail{
							background:url(../ty-commonObject/icons/emailIcon_21x15.png) no-repeat 20px center;
							}
							
							#aEmail:hover{
							background:url(../ty-commonObject/icons/emailIcon_Hover_21x15.png) no-repeat 20px center;
							}
							
							#aResevation{
							color:#D8C583;
							letter-spacing:2.5px;
							font-weight:700;
							background:url(../ty-commonObject/icons/reservationIcon_Hover_18x16.png) no-repeat 20px center;
							}
														
	/*--End of dSubHeader contains the contact links, located towards the bottom of the page--*/		
	#dFooter{display:none;}
	#dLeftWing{display:none;}
	#dRightWing{display:none;}
	
	
	
/*-------- Style for Site footer (#fFooter) element -----------*/

	/*Note: fFooter is outside the #dPageHolder structure*/
	
	#fFooter {
		position:fixed;
		bottom:0;
		width: 100%;
		height: 33px;
		font-weight: 300;
		font-size: 13px;
		letter-spacing:1.2px;
		line-height:33px;
		background:#000;
		z-index:9;
	}
		#fFooterHolder{
			width:100%;
			max-width:2000px;
			/*min-width:595px;*/
			margin-left:auto;
			margin-right:auto;	
			}
	
			#dfFooterFltLeft{
				float:left;
				margin-left:100px;
				}
				#dfFooterFltLeft a img{
					position:relative;
					top:2.2px;}
			#dfFooterFltRight{
				min-width:280px;
				float:right;
				margin-right:70px;
				}
		
/*-------- End of Style for Site footer element  (#fFooter) -----------*/

/*Class styles*/
.sFinePrint{font-size: 12px; line-height: 5px; letter-spacing:2px; color: #DAD3C2; text-shadow:none;}
.cHiddenContent, .cSmallScrnTxt {
	position: absolute;
	top: -20000px;
	left: -20000px;
}

.cSocialLnkSeperatorMargin{
	margin-right:7px;
	margin-left:7px;}

.cSocialLnkMargin{
	margin-right:15px;}

.cSiteInfoMargin{
	margin-right:20px;}
	
.cBorderRight{
	border-right:1px solid #DAD3C2;}

.cInfobutton{
			display:block;
			font-size:18px;
			text-decoration:none;
			border:1px dotted #DAD3C2;
			background:rgba(0,0,0,0.6);
			padding:10px;
			width:180px;/* total width of 200px (width:180 + padding 10px*2)*/
			margin-left:auto;
			margin-right:auto;
			box-shadow:1px 10px 5px rgba(17,17,17,0.3);
			}
.cInfobutton:hover{
			background:rgba(27,22,14,1);
			border:1px solid #D8C583;
			}
			
.cTnrItalic{
	  font-style:italic;
	  font-family:Georgia,"Times New Roman", Times, serif;
	  font-size:19px;
	  text-transform:none;
  }
 .cPdfSizeItalic{
	 margin-top:0px;
	  font-style:italic;
	  font-family:Georgia,"Times New Roman", Times, serif;
	  font-size:15px;
	  text-transform:none;
  }
/*==== create short border before box ====*/
			.cDashBefore:before{
				content:"";
				display:block;
				height:60px;
				width:80px;
				margin:0 auto;
				border-top:2px solid #DAD3C2;
				}			
/*==== create short border after box ====*/
			.cDashAfter:after {
				content:"";
				display:block;
				height:60px;
				width:80px;
				margin:0 auto;
				border-bottom:2px solid #DAD3C2;
				}

		/*---the words food & drinks in foodAndDrinks.html--*/
			.cHighlight{color:#D8C583;text-shadow: 3px 3px 3px black;}
	
	/*=======Use to align inline-block to the top ====*/
		/*.cAlignTop{vertical-align:top;}*/

/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack*/
/*For modern browser */
.cf:before, .cf:after{
	content:"";
	display:table;	
	}
.cf:after{
	clear:both;
	}

	
/* CSS for Responsive web */

/*small screens styles (this style applies to screens smaller than 480px. 480px is width of iphone screen in landscape mode) */
@media screen and (max-width: 600px){
	body{background-image:none; background:black;}
	
	#dPageHolder{
				width:100%;
				min-width:320px;
				}
				
				#dHeader{
				position:relative;
				z-index:100;
				/*position:absolute;*/
				top:0px; 
				left: 0px;
				width:100%;
				min-width:320px;
				height: auto;
				font-size: 14px;
				}
				
			 	/*--Styles for top Menu--*/ 						
						#nMainNav{
						height:auto;
						min-width:320px;
						width:100%;
						}
							#aHome_SmallScreen {
								display:inline-block;
								float:left;
								background:url(../ty-commonObject/icons/birdIcon_62x41.png) no-repeat center;
								width:30%;
								height:101px;
								border:1px solid #9C9183;
								}
							#dSmallScreenBtn{
								display:inline-block;
								float:left;
								width:69%;
								border-top:1px solid #9C9183;
								border-right:1px solid #9C9183;
								border-bottom:1px solid #9C9183;
								}
								#aCanvasMenus{
									float:left;
									width:49.5%;
									min-width:108px;
									padding-top:15px;
									height:35px;/*50px(supposed height)-15px(padding-top)=32px (final height)*/
									border-right:1px solid #9C9183;
									border-bottom:1px solid #9C9183;
									text-decoration:none;
									}
								#aCallUs{
									float:right;
									width:50%;
									min-width:108px;
									padding-top:18px;
									height:32px;/*50px(supposed height)-18px(padding-top)=32px (final height)*/
									border-bottom:1px solid #9C9183;
									background:url(../ty-commonObject/icons/callUsIcon_17x17.png) no-repeat center;
									}
								#dSmallScreenBtn button,#dSmallScreenBtn button:focus, #dSmallScreenBtn button:active{
									border:none;
									width:100%;
									height:50px;
									font-family: inherit;
									color: inherit;
									font-size:14px;
									text-transform:inherit;
									font-weight:inherit;
									outline:none;
									outline:0;
									-moz-outline-style: none;
									cursor:pointer;
									background:url(../ty-commonObject/icons/menuIcon_25x22.png) no-repeat 25px;
									}
							/*box holding the drop down menu*/
							#dNavBox{
								width:100%;
								max-width: 600px;
								min-width: 320px;
								height:auto;
								clear:both;
								}
							/*Navigation Menu contained in the nav button*/
								#ulMainNavList {
									width: 100%; /* take out the whole width of the of #nMainNav*/ 
									height: auto;
									list-style: none;
									}
									
									#ulMainNavList li {
										float:none;
										width:100%;
										height:50px;
										border-bottom:1px solid #9C9183;
										background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Safari 5.1 to 6.0 */
										background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Opera 11.1 to 12.0 */
										background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Firefox 3.6 to 15 */
										background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* Standard syntax */
										
									}
									
									#ulMainNavList li:hover {
										background:#000;
										}
										
										#ulMainNavList li a {
											display: block;/*take up the whole width of the li element*/
											line-height: 50px; 
																					}
							/*--END top nav menu styles in Header ---*/
							
										/*-- Styles targets the <a> tag for the Home Button with bird Logo background--*/
										#aHomeBtn {
											background: none;
											width: 100%;
											height: 50px;
											}
										#aHomeBtn:hover {
											background:none;
										}
										/*--END styles targets the <a> tag for the Home Button with bird Logo background--*/
					
					/*--Background image for small screen devices--*/
					#dTorso {background:url(../ty-commonObject/background/smlBgd_600x900.jpg) no-repeat center top;}
							  
										  
								#dSubFooter {position:relative; margin-top:50px; margin-bottom:200px;}
								#dSubFooter li{
											border:1px dotted #DAD3C2;
											display:block;
											margin-bottom:5px;
											max-height:42px;
											line-height:42px;
											}
									#ulContactList{padding-bottom:200px;}/*add bottom space for viewing in safari*/
											#ulContactList li a{
												padding-right:10px;}
												#aResevation{color:#DAD3C2;
												background:url(../ty-commonObject/icons/reservationIcon_18x16.png) no-repeat 20px center;}
												#aResevation:hover{
												color:#D8C583;
												background:url(../ty-commonObject/icons/reservationIcon_Hover_18x16.png) no-repeat 20px center;
												}
												
									
	/*Classes used in Javascript for drop down menu*/					
			.cHiddenInit {
				left:-20000em; /*submenu went out of the screen*/
				max-height: 0;
				overflow:hidden;
				}
			
			.cHidden {
				left:-20000em; /*submenu went out of the screen*/
				max-height: 0;
				/*transition give it an animation to the dropdown*/
				-moz-transition:max-height 0.5s ease-in-out;
				-webkit-transition:max-height 0.5s ease-in-out;
				-o-transition:max-height 0.5s ease-in-out;
				transition:max-height 0.5s ease-in-out;
				overflow:hidden;
				}
			
			.cShow {
				left:0; /*submenu reappear*/
				max-height: 255px; /*allow the ul to be 255px MAX*/
				/*transition give it an animation to the dropdown*/
				-moz-transition:max-height 0.5s ease-in-out;
				-webkit-transition:max-height 0.5s ease-in-out;
				-o-transition:max-height 0.5s ease-in-out;
				transition:max-height 0.5s ease-in-out;
				overflow:hidden;
				}
			 
			 /*initial start of drop down menu if javascript on browser is disabled*/
			 .cFlashMenu{
				left:0; /*submenu reappear*/
				max-height: 250px; /*allow the ul to be 10em MAX*/
				overflow:hidden;
			 }
			
	/* End of classes used in Javascript for drop down menu*/
	.cSmallScrnTxt {
	position:inherit;}
	
	/*--End Styles for top Menu--*/
	
	
	.cHiddenContent_lrgMedScreen {
	display:inherit;
	}
	
	#dSubHeader,#dLeft,#dRight,#dFooter{display:none;}
	
	
/*-------- Style for Site footer (#fFooter) element -----------*/

	/*Note: fFooter is outside the #dPageHolder structure*/
	
	#fFooter{
		
		position:fixed;
		bottom:0;
		width: 100%;
		min-width:320px;
		height:66px;;
		font-weight: 300;
		font-size: 13px;
		letter-spacing:1.2px;
		line-height:33px;
		background:#000;
		z-index:9;
		}
	
		#dfFooterFltLeft, #dfFooterFltRight{
			display:block;
			margin-left:auto;
			margin-right:auto;
			float:none;
				}
				
/*-------- End of Style for Site footer element  (#fFooter) -----------*/

			.cSocialLnkSeperatorMargin{
			margin-right:3px;
			margin-left:3px;}
		
			.cSocialLnkMargin{
			margin-right:6px;}
		
			.cSiteInfoMargin{
			margin-right:10px;}
			
			.cBorderRight{
			border-right:none;}
	
	}

/*medium screens styles */
@media screen and (min-width: 601px) and (max-width: 768px){
	
	/* ID STYLE : target one object and give it a defined style */
		
#dPageHolder {}
	#dHeader {
		height:80px;
		}
	
			/*--Top nav menu (#nNav) styles in Header--*/
			#nMainNav {
				min-width:481px;
				height:80px;
				}
			 
			 	#dNavBox {
					min-width:481px;
					height:80px;
					
					}
			 	#ulMainNavList {
					width: 100%; /* take out the whole width of the of #nMainNav*/ 
					height:80px;
					
					}
					
					#ulMainNavList li {
						width:19.5%;
						}
					
						/*--Styles for individual <li> in the #ulMainNavList--*/ 
						#liFoodAndDrinks{
							min-width:100px;
							}
						
							#ulMainNavList li a {
								line-height: 80px; 
								}
								
			/*--END top nav menu styles in Header ---*/
			
			/*-- Styles targets the <a> tag for the Home Button with bird Logo background--*/
				#aHomeBtn {
					height: 80px;
					}
			/*--END styles targets the <a> tag for the Home Button with bird Logo background--*/

	/*dHeaderSmall only display For small screens*/
	#dHeaderSmall {
		display: none;
	}
	#dSubHeader{display:none;}
	#dTorso{}
		#dLeft{display:none;}
		#dMiddle{}
		#dRight{display:none;}
		
	
	/*-dSubHeader contains the contact links, located towards the bottom of the page-*/
	#dSubFooter{
		
		height:110px;/*the height would stretched between 60px and 120px;*/
		text-align:center;/*right align - align text in <a> to the right with padding to its right to create the illustion that the text is centered*/
		}
		#ulContactList{
			width:100%;/*stretched to 90% of #dSubFooter*/
			height:110px;/*the height would stretched between 60px and 120px;*/
			background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Safari 5.1 to 6.0 */
			background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9)); /* For Firefox 3.6 to 15 */
			background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9)); /* Standard syntax */
			}
				#ulContactList li{
					float:left;
					height:45px;/*this sets the height of the seperator border-right*/
					width:24.75%;
					min-width:114px;
					border-right:1px solid #DAD3c2;/* this is the seperators borders*/
					margin-top:40px;/* push the <li> boxes down from the top of the #ulContactList to center the border vertically to the middle of the box*/
					}
					#ulContactList li:last-child{
						border-right:none;} /* the last <li> doesn't get a border-right*/
				
					/*Styles targets the <a> within the <li> under the #ulContactList */
					#ulContactList li a{
						font-size:14px;
						float:left;/* float the <a> tags so that their size are not restricted by the <li> tags*/
						height:110px;/*full height of the #dSubFooter*/
						padding-top:50px;/*set the location of the text*/
						padding-right:0px;/*to cancel out the padding set in style_all.css*/
						padding-left:0px;/*to cancel out the padding set in style_all.css*/
						margin-top:-40px;/*to cancel out the margine-top of the <li> and push the <a> tags back to the top of the #dSubFooter*/
						line-height:20px;
						width:100%;
						
						}
							/*--Styles fo the <a> items under the #ulContactlist--*/
							#aGoogleMap{
							background:url(../ty-commonObject/icons/locationIcon_15x21.png) no-repeat center 21px;
							
							}
							#aGoogleMap:hover{
							background:url(../ty-commonObject/icons/locationIcon_Hover_15x21.png) no-repeat center 21px;
							}
							
							#aTel{
							background:url(../ty-commonObject/icons/callUsIcon_23x23.png) no-repeat center 22px;
							}
							#aTel:hover{
							background:url(../ty-commonObject/icons/callUsIcon_Hover_23x23.png) no-repeat center 22px;
							}
							
							#aEmail{
							background:url(../ty-commonObject/icons/emailIcon_25x18.png) no-repeat center 23px;
							}
							#aEmail:hover{
							background:url(../ty-commonObject/icons/emailIcon_Hover_25x18.png) no-repeat center 23px;
							}
							
							#aResevation{
							background:url(../ty-commonObject/icons/reservationIcon_20x19.png) no-repeat center 22px;
							}
							#aResevation:hover{
							background:url(../ty-commonObject/icons/reservationIcon_Hover_20x19.png) no-repeat center 22px;
							}
	/*--End of dSubHeader contains the contact links, located towards the bottom of the page--*/		
	#dFooter{display:none;}
	#dLeftWing{display:none;}
	#dRightWing{display:none;}
	
/*-------- Style for Site footer (#fFooter) element -----------*/

	/*Note: fFooter is outside the #dPageHolder structure*/
	
		#dfFooterFltLeft{
				margin-left:10px;
				}
			#dfFooterFltRight{
				margin-right:10px;
				}
		
/*-------- End of Style for Site footer element  (#fFooter) -----------*/

			.cSocialLnkSeperatorMargin{
			margin-right:3px;
			margin-left:3px;}
		
			.cSocialLnkMargin{
			margin-right:6px;}
		
			.cSiteInfoMargin{
			margin-right:10px;}
			
			.cBorderRight{
			border-right:none;}
		
	}