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

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);


html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

*:first-child+html .clearfix { zoom: 1; } /* IE7 */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}


body { padding:0; margin:0; background:#fff; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:1.5em } 

textarea { font-family:Arial, Helvetica, sans-serif; font-size:1em; background: #fff; color:#000; border: #DBDBDB solid 1px; padding:5px}

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both; height:0}

.alignright { text-align:right;}
.aligncenter { text-align:center;}

.wrapper, block { width:100%; overflow:hidden;}
.container { width:100%;}

.error { color:#F00 }


div, p, ul, ol, li, br, img, h1, h2, h3 { margin:0; padding:0;}

ul { list-style:none }

img { border:0 }

select { font-size:12px; color:#666666; padding:1px }

a { color: #161616; text-decoration:none }




#container { background:url(../img/bg-back.gif) repeat-x; padding:0 0 10px 0 }

#container-in { background:url(../img/top-bg.jpg) no-repeat center top }

/* #header { height:110px; position:fixed; top:0; left:0; width:100%; background:url(../img/top-bg.png) repeat-x left top; z-index:1 } */

#header { height:110px; position:fixed; left:0; top:0; z-index:999; width:100%; background:url(../img/top-bg.png) repeat-x left top; z-index:1 }

#headerin { width:1150px; margin:0 auto }

#menus {font-family: 'Oswald', sans-serif; font-size:18px; color:#fff; font-weight:400; text-transform:uppercase; margin:45px 0 0 0 }

#menus ul li { float: left; margin:0 5px 0 30px; }

#menus ul li a { display: block;  color:#fff; }
#menus ul li a:hover { color:#20636b }


#menus ul li a.selected { color:#20636b }



#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#body-container { width:100%; min-width: 1200px; padding-bottom:110px;  padding-top:110px; }
#body { width:1140px; margin:0 auto; background:url(../img/content-bg.png) repeat;  }

.contentbody { float:left; padding:30px 20px 30px 30px; width:50% } 
.contentbodyblog { padding:30px; } 

.stitles {  padding:10px 0 30px 0; color:#32b2a7; }
.stitles h2 { font-family: 'Roboto', sans-serif; font-weight:900; font-size:30px; color:#32b2a7; text-transform:uppercase; letter-spacing:-1px; line-height:1em}


.stitles2 {  padding:10px 0 15px 0; color:#32b2a7; }
.stitles2 h2 { font-family: 'Roboto', sans-serif; font-weight:900; font-size:24px; color:#32b2a7; text-transform:uppercase; letter-spacing:-1px; line-height:1em}

#leftimage {  text-align:left; width:100% }



#back_to_camera {
			clear: both;
			display: block;
			height: 80px;
			line-height: 40px;
			padding: 20px;
}
.fluid_container {
	margin: 0 auto;
	max-width: 450px;
	width: 100%;
}



#location { padding:10px 0 0 0 }
#location ul li {display: inline; margin:0 1px 1px 0}




#footercontainer { height:90px; width:100%; position:fixed; left:0; bottom:0; z-index:999; background:url(../img/footer-bg.png) repeat-x left bottom }

#footerin { width:100%; max-width:1140px; margin:0 auto; color:#fff; position:relative; font-family:'Oswald', sans-serif; font-size:14px; text-shadow: 1px 1px 1px rgb(50,130,130); }

#footerin a { color:#fff }

#footerin a:hover { color:#000 }

.copyright { position:absolute; left:10px; top:30px }

.sns {
	position:absolute;
	right:10px;
	top:11px;
	width: 195px;
}

.fb a { display:block; float:left; background:url(../img/icon-fb.png) no-repeat left top; width:79px; height:75px }
.twitter a { display:block; float:left; background:url(../img/icon-twitter.png) no-repeat left top; width:79px; height:75px }

.fb a:hover, .twitter a:hover { background-position:0 -75px }



.title-aboutus { background:url(../img/title-aboutus.png) no-repeat; width:100%; height:107px }
.title-location1 { background:url(../img/title-northshore.png) no-repeat; width:100%; height:107px }
.title-location2 { background:url(../img/title-kitsilano.png) no-repeat; width:100%; height:107px }
.title-location3 { background:url(../img/title-downtown.png) no-repeat; width:100%; height:107px }
.title-location4 { background:url(../img/title-metrotown.png) no-repeat; width:100%; height:107px }



.title-menu { background:url(../img/title-menu.png) no-repeat; width:100%; height:107px }

.title-media { background:url(../img/title-media.png) no-repeat; width:100%; height:107px }
.title-contactus { background:url(../img/title-contactus.png) no-repeat; width:100%; height:107px }
.title-franchise { background:url(../img/title-franchise.png) no-repeat; width:100%; height:107px }

.text { font-family: Georgia, "Times New Roman", Times, serif, sans-serif; font-size:14px;  color:#019284 }












/**********************TABS START******************************/

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 26px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 25px;
	line-height: 23px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	background: #e0e0e0;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 12px;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
	padding: 20px;
	font-size: 13px;
	line-height:18px;
}
.tab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.tab_content h3 a{
	color: #254588;
}
.tab_content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #ddd;
	padding: 5px;
}


.tab_content p { margin:10px 0 0 0 }

/**********************TABS END******************************/







/* Vertical Navigation */
#vertical-navigation { 
	list-style: none; 
	margin: 0; 
	 padding:6px 0 0 0; }


/* CSS for each Parent Item */
#vertical-navigation li { display: block; float:left;  text-shadow: 1px 1px 1px rgb(50,130,130); position:relative }
#vertical-navigation li a { float:left;   text-decoration:none;}

/* 
Change background color and font color 
of parent items when mouse hover 
*/


#vertical-navigation li:hover a,
#vertical-navigation li a:hover
{
	color: #fff;	
}


/* 
Applie to group of Child Items
Each Child Item will be invisible by default
*/
#vertical-navigation ul {display: none;}

/* Each Child Item will be visible if mouse hover */
#vertical-navigation li:hover ul {display: block; float:none}

#vertical-navigation ul
{
	position: absolute;
	margin: 0;
	padding: 10px 0  ;
	top: 19px;
	left: -15px ;
	z-index:999;
	background:#3adee0;
	font-size:12px;
	text-align:left;
}

#vertical-navigation ul li
{
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	width: auto;
	color: #fff;
}


/* 
Reset and re style 
link of each child item
*/
#vertical-navigation li:hover ul li a,
#vertical-navigation ul li a
{
	float:left;
	line-height: 22px;
	display: block;
	width:110px;
	padding: 5px 10px 5px 18px ;
	text-transform: uppercase;
	color: #fff;
	text-align:left !important;
}

#vertical-navigation li:hover ul li a:hover,
#vertical-navigation ul li a:hover
{
	background: none;
	color: #000;
}


#vertical-navigation ul li.selected a { color:#20636b !important }



/**************************SUB ROLLOVER END*****************************************/





.menuarea { width:100%; margin:0 auto; position:relative; font-family: 'Oswald', sans-serif;}

.menuarea h2 {  font-size:14px; text-transform:uppercase; color: #3f3f3f; font-weight:400; padding: 3px 0 10px 0; margin:0 }



.menuitemspecial { float:left; }

.menuitemspecial ul { line-height:1.9em; font-family: 'Doppio One', sans-serif; font-size:13px }
.menuitemspecial ul li { display:block; clear:both; color:#000000}
.menuitemspecial ul li .titles {float:left;  font-size:13px; color:#990000; letter-spacing:1px; font-weight:400; text-transform:uppercase }
.menuitemspecial ul li .mitems { float:left; width:150px;  color:#900  }
.menuitemspecial ul li .mprice { float:right; color: #ADADAD}


.menuitems { float:left; width:395px;  }

.menuitems ul li { display:block; clear:both }
.menuitems ul li .titles {float:left;  font-size:14px; letter-spacing:1px; font-weight:400; text-transform:uppercase }
.menuitems ul li .mitems { float:left; color:#1ab3bd; }
.menuitems ul li .mprice { float:right; color: #ADADAD}



.menupics { float:right; width:395px }

.menupics ul li { display:block; clear:both }
.menupics ul li .titles { float:left; font-size:14px; color:#990000; letter-spacing:1px; font-weight:400; text-transform:uppercase }
.menupics ul li .mitems { float:left; color:#1ab3bd; }
.menupics ul li .mprice { float:right; color: #ADADAD}


.menudrinkl { float:left; width:390px;  }

.menudrinkl ul li { display:block; clear:both }
.menudrinkl ul li .titles {float:left;  font-size:14px; color:#990000; letter-spacing:1px; font-weight:400; text-transform:uppercase }
.menudrinkl ul li .mitems { float:left; width:280px }
.menudrinkl ul li .mprice { float:right; color: #ADADAD}



.menudrinkr { float:right; width:395px;  }

.menudrinkr ul li { display:block; clear:both }
.menudrinkr ul li .titles {float:left;  font-size:14px; color:#990000; letter-spacing:1px; font-weight:400; text-transform:uppercase }
.menudrinkr ul li .mitems { float:left; width:250px }
.menudrinkr ul li .mprice { float:right; color: #ADADAD}


.menuitems ul, .menupics ul { line-height:1.6em; font-family: 'Oswald', sans-serif; font-size:13px }




/**************************MENU MISC*********************************************/

.menu-cat00 { position:absolute; padding:3px; left:420px; top:40px; width:420px; border-top:#282828 solid 1px; border-bottom:#282828 solid 1px;  font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif}

.menu-cat00 a { color:#666666 }
.menu-cat00 a:hover { text-decoration:underline; color:#00CC99 }
.menu-cat00 a.selected { color: #00CCCC; font-weight:bold }

.menu-cat01 { position:absolute; padding:3px; left:390px; top:40px; width:470px; border-top:#282828 solid 1px; border-bottom:#282828 solid 1px; text-align:center; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif}

.menu-cat01 a { color:#666666 }
.menu-cat01 a:hover { text-decoration:underline; color:#00CC99 }
.menu-cat01 a.selected { color: #00CCCC; font-weight:bold }

.menu-cat02 { text-align:center }
.menu-cat02 a { padding:7px 10px 5px 10px; color:#5d5d5d; text-transform:uppercase; font-size:11px; }
.menu-cat02 a:hover { color:#00CCCC; text-decoration: underline }
.menu-cat02 a.selected { color:#FFFFFF }


.menutype001 { margin:30px 20px 0 20px;  border-top:#053c38 solid 1px;  }
.menutype001 h2 { font-family:"Trebuchet MS"; font-size:18px; color:#10d5c8; letter-spacing:-1px; font-weight:normal; padding: 3px 0 5px 0}

.menutype001-listPan {  padding: 10px 0 0 0 }
.menutype001-listPanrow { padding: 10px 0 0 0 }

.menuclear { clear:both; height:20px }

.menuCellLeft { float:left; width:30%; border-top:#baeef2 solid 1px  }
.menuCellLeft h3 { font-size:14px; color:#19a9b3; padding:5px 0 5px 0; font-weight:normal; background:#fff }
.menuCellLeft p { color:#8b8b8b; padding:3px 0 3px 0 }
.menuCellLeft p.price { color: #333333; font-weight:bold }

.menuCellCentre { float:left; width:30%; margin-left:40px; border-top:#baeef2 solid 1px   }
.menuCellCentre h3 { font-size:14px; color:#19a9b3; padding:5px 0 5px 0; font-weight:normal; background:#fff }
.menuCellCentre p { color:#8b8b8b; padding:3px 0 3px 0 }
.menuCellCentre p.price { color:#333333; font-weight:bold }

.menuCellRight { float: right; width:30%; border-top:#baeef2 solid 1px    }
.menuCellRight h3 { font-size:14px; color:#19a9b3; padding:5px 0 5px 0; font-weight:normal; background:#fff }
.menuCellRight p { color:#8b8b8b; padding:3px 0 3px 0 }
.menuCellRight p.price { color:#333333; font-weight:bold }


.menuCellwide {    }
.menuCellwide h3 { font-size:14px; color:#19a9b3; padding:5px 0 5px 0; font-weight:normal; background:#fff }
.menuCellwide p { color:#8b8b8b; padding:3px 0 3px 0 }
.menuCellwide p.price { color: #333333; font-weight:bold }


.menuCellLeft h3:hover, .menuCellRight h3:hover, .menuCellCentre h3:hover { background:#fff}


.menuMiddlwTitle { font-size:16px; color:#3f779a; padding: 20px 0 3px 0; font-weight:bold; border-top: #a4e3e4 solid 1px; margin-bottom:10px}





/*STYLES FOR CSS POPUP*/


#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}

#popUpDiv {
	position:absolute;
	width:800px;
	height:600px;
	border:5px solid #fff;
	z-index: 9002;
}

#popUpDiv a.close {position: absolute; top:20px; left:20px; z-index:9003; color:#999}