@charset "utf-8";


/* ==========================
				Standard HTML Tags
				
				These are applied to all html tags throughout the project
	==========================*/
html{
	height:100% /* fix weird whitespace at the bottom of the page in Chrome */	
}
body{
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #000;
	height:100%; /* fix weird whitespace at the bottom of the page in Chrome */	
/*test bg	background: url(../img/ads/sbux_beans_test2.jpg); */
	
}


#backdropBg{
	background: #F9E4CF url(../img/web/bg_lampCny2.png) repeat-x;
}

#main_bg{
	/*background: url(../img/web/bg_mainWithGradient.png) repeat-y center;
	width: 1026px;
	*/
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	background: #FFF;
	border: 1px solid #888;
	border-bottom: none;
	/*
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
	moz-box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.35);
	*/
	box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.4);
	moz-box-shadow:  0px 0px 9px 3px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:  0px 0px 9px 3px rgba(0, 0, 0, 0.4);
}




a {
	color: #0067B4;
	text-decoration:none;
}

a:hover {
	color: #005493;
	text-decoration:underline;		
}

h4 {
	font-size: 15px;
}

h3 {
	font-size: 19px;
}

h2 {
	font-size: 24px;
}

h1 {
	font-size: 30px;	
}

h1, h2{
	color: #F43C1A;		
}

p{
	line-height: 1.3em;
	margin-top: 2em;
	margin-bottom: 2em;
}


input[type="text"],input[type="password"], select{
	height: 21px;
	border:#C4C4C4 1px solid;
	border-top-color: #999;
	color:#333;
	
}

input[type="text"],input[type="password"], textarea{
	border:#C4C4C4 1px solid;
	background: #FFF url(../img/web/background-input.png) repeat-x top left;
	padding: 0 3px;
}

input[type="text"]:focus ,input[type="password"]:focus, textarea:focus {	
	border:#378AC2 1px solid;
	background: #FFF url(../img/web/background-input.png) repeat-x top left;
}
select:focus{ /*select cant do bg color */
	border:#000 1px solid;
}

input[type="checkbox"]:focus, input[type="radio"]:focus{
	outline: #333 1px dotted;	
}

/* ===============================
					default template css
					
					Applied to default template, which is also the entire project - -'
	=============================== */
#top_fixed_bar.notEmpty{
	position:fixed;
	top: 0px;
	width: 100%;
	background: #FF9	;
	padding: 10px; 
	border-bottom: 1px solid #C4AE77;

	/*drop shadow */
	-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);

	z-index: 99999999999999999999;	
}
			
			
#top_ads_area{
	height: 100px;
	position:relative;
}
	#top_ads{
		position:absolute;
		left: 150px;	
	}

#ngiFb_top{
	position:absolute;
	right: 0px;
	bottom: -11px;
	background: url(../img/web/ico_fbNgi_s_bw.png) no-repeat;
	display: block;
	width: 31px;
	height: 46px;
}
	#ngiFb_top:hover{
		background: url(../img/web/ico_fbNgi_s_c.png) no-repeat;
		bottom: -4px;
	}

#top_orange_tab{
	height: 8px;
	background-color: #F4341A;
}
#logo_wrapper{
	position: relative;	
}
#kinnshare_logo{
	position: absolute;	
/*	for xmas version logo
	top: -90px;
	left: 6px;
	*/
	 	top: -60px;
	left: -26px;
	
	z-index:1;
}

#top_setting_links{
	text-align:right;
}
/* search top panel */
#top_setting_links{
	color: #8C9992;	
	height: 17px;
	vertical-align: top;
}

/*lang bar */
	#top_setting_links .langBar{
		display: inline-block;
		position: relative;
		
		padding: 5px ;	
		margin-top: 2px;

		color: #0067B4;
		
		width: 76px;
	}
		#top_setting_links .langBar:hover {			
			padding:4px ;	
			border: 1px solid #AAA;
			border-bottom: 1px solid #FFF;
			background: #E4E4E4;
		}
		
	#top_setting_links .langBar:hover ul.lang{
		display: block;
	}
	
	#top_setting_links .curLang{
		display: inline-block;
		
	}
		
	
	
	#top_setting_links ul.lang{
			display: none;
			position: absolute;
			border: 1px solid #AAA;
			border-top: none;
			background: #EEE;
			
			padding: 5px;
			right: -1px;
			top: 21px;
			
			width: 74px;
			z-index: 5;
			
			/*drop shadow */
			-moz-box-shadow: 1px 1px 2px  rgba(100,100 ,100 ,0.3);
			-webkit-box-shadow: 1px 1px 2px rgba(100,100 ,100 ,0.3);
			box-shadow: 1px 1px 2px rgba(100,100 ,100 ,0.3);
						
	}
		#top_setting_links ul.lang li{
			margin-top: 4px;
			padding: 2px;
							
		}

#food_carriers_s_wrapper{

	height: 48px;
	position:relative;
}
#food_carriers_s{
	text-align:right;
	position:absolute;
	right:0px;
	top: 5px;
}

#top_panel_area_right{
	color: #8C9992;
}

#header_area_right
{
	background: url(../img/web/topBanner_foodCarriers_s.jpg) no-repeat bottom right	;
	height: 120px;
}
	#search_area .huge{
		color: #F23319;
		font-size: 24px;
		font-weight: bold;
	}
	
	/*new design */
	#search_area .wrapBorder{
		border: 1px solid #CCC;
		padding: 7px 0;		
		
		background: url(../img/web/bg_60percentWhite.png);
		height: 50px;
	}
		#search_area .wrapBorder.left{
			border-right: none;
			border-radius: 7px 0 0 7px;
			-moz-border-radius: 7px 0 0 7px;
			
			padding-left: 7px;
		}
		#search_area .wrapBorder.mid{
			border-right: none;
			border-left: none;
			
		}
		#search_area .wrapBorder.right{
			border-left: none;
			border-radius: 0 7px 7px 0;
			-moz-border-radius: 0 7px 7px 0;
			
			padding-right: 7px;
			margin-top: 24px;
		}
	#search_area #mainSearchShadow{
		background: url(../img/web/bg_mainSearchShadow.png) no-repeat;
		position:relative;
		left: 8px;
		width: 91px;
		height: 8px;
	}
	/*acts as design of the txtbox instead */
	#search_area .mainSearchWidgetBox{
		height: 30px; 
		
		border: 1px solid #CCC;
		
		padding: 5px 5px 0 1px;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
	/*	-moz-border-radius: 3px 0 0 3px;
		border-radius: 3px 0 0 3px;	
		*/
		
		background: url(../img/web/bg_gradientSearchBox.jpg) repeat-x;
	}
		/*acts as design of the select instead */
		#search_area .mainSearchWidgetBox.right{ 
			-moz-border-radius:   3px 0 0 3px ;
			border-radius:  3px 0 0 3px ;
			
			border-right: none;
			
			background: -moz-linear-gradient(top,  #FFFFFF, #EEE5E5);
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( #FFFFFF), to(#EEE5E5));
			background: -webkit-linear-gradient( #FFFFFF, #EEE5E5);
			background: -o-linear-gradient( #FFFFFF, #EEE5E5);
			
		}
		#search_area .mainSearchWidgetBox.right:hover{ 
					
			background: -moz-linear-gradient(top,  #EEE5E5, #CCC);
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( #EEE5E5), to(#CCC));
			background: -webkit-linear-gradient( #EEE5E5, #CCC);
			background: -o-linear-gradient(#EEE5E5, #CCC);
			
		}
		
	#search_area input[type="text"], #search_area select{
		font-size: 15px;
		width: 170px;
		height: 21px;
		padding: 3px 0px 2px 5px;
		
		background: none;
		border: none;
		
	}
		#search_area input[type="text"]{
			width: 320px; /* make txtbox longer than select */	
		}
	#search_area input[type="text"]:focus{
	
	}
	
	#search_area select:focus{
		
	}
	
	
	#search_area select{
	/* needs to add overriding extra height to select coz it always show up a little shorter than txtbox/btn */ 
		height: 28px;
		-webkit-appearance: none;
		border: 0;
		background: url(../img/web/ico_arrow_down_ddlist.png) no-repeat right 13px;
		cursor:pointer;
	}
	#search_area input[type="submit"] {
		width: 90px;	
		height: 37px;
		
		border-radius: 0 3px 3px 0;
		-moz-border-radius: 0 3px 3px 0;
	
		
	}
	#search_area #linkPreloaded{
			
	}


/***** breadcrumbs style ****/
#breadcrumbs
{
		color: #BBB;
		padding: 7px 0px 10px;
		font-size: 13px;
}
#breadcrumbs a
{
		color: #999;
		text-decoration:underline;
}
#breadcrumbs a:hover
{
				color: #005493;
	text-decoration:underline;		
}
#breadcrumbs .current
{
				color: #000;
				font-weight: bold;
				
	text-decoration:none;		
}
/***** END breadcrumbs style ****/





#footer_wrap{
	
	color: #8C8580;
	padding-top: 20px;
	
	
}
#footer_left, #footer_mid, #footer_right{
	padding: 0px 10px 0px 10px;
}
#footer_margin{ /* this extra div is added so the l,r paddings wont ruin the grids */
		margin: 20px 20px 30px 20px;
}

	#footer_wrap a{
		color: #8C8580;
		text-decoration: underline;
	}
	#footer_wrap a:hover{
		color: #FFF;
		text-decoration: underline;
	}

	#footer_wrap .title{
		font-size: 18px;	
		margin-bottom: 10px;
		border-bottom: 1px solid #8C8580;
	}
	
	#footer_wrap li{
		margin-top: 5px;	
		margin-left: 10px;
	}
	
	/* for fb, twtr btn, dark logo */
	#footer_wrap #footerLogo{
		width: 68px;
		height: 87px;
		background: url(../img/web/logo_kinnshare_footer_dark.png) no-repeat;
		display: inline-block;
		cursor:pointer;
	}
		#footer_wrap #footerLogo:hover{
			background: url(../img/web/logo_kinnshare_footer.png) no-repeat;
		}
		
	#footer_wrap #ngiFb{
		width: 51px;
		height: 74px;
		background: url(../img/web/ico_fbNgi_dark.png) no-repeat;
		display: inline-block;
		cursor:pointer;
	}
		#footer_wrap #ngiFb:hover{
			background: url(../img/web/ico_fbNgi.png) no-repeat;
		}
	#footer_wrap #ngiTwtr{
		width: 51px;
		height: 74px;
		background: url(../img/web/ico_twitterNgi_dark.png) no-repeat;
		display: inline-block;
		cursor:pointer;
	}
		#footer_wrap #ngiTwtr:hover{
			background: url(../img/web/ico_twitterNgi.png) no-repeat;
		}


/* ------------------------------- 
			flash messages  
	---------------------------------*/
	/*default style - a bar with border and color, the yellow color bar is default */
div.message{
	
}
.flash {
	clear: both;
	margin-top: 10px;
	margin-bottom: 20px;
	background:#FFFF99  url(../img/web/ico_alert_yellow.png) 10px 50% no-repeat;
	border: 1px #CC9900 dotted;
	padding: 7px;
	padding-left: 45px;
	padding-right: 10px;
/*	height: 25px; */
	color:#AE8300;
	
	font-size: 14px;
	font-weight:bold;
	line-height: 1.5em;
	
}

	/*success - add a green check icon, and use green color bar */
 .flash_success
{
	padding-left: 45px;
	background:#CAFF95 url(../img/web/ico_check_green.png) 10px 50% no-repeat;
	border: 1px #669900 dotted;
	color: #336600;
		
}
	/*fail - add a alert icon, and use redcolor bar */
 .flash_failure
{
	padding-left: 45px;
	 background:#FFCCCC url(../img/web/ico_cross_red.png) 10px 50% no-repeat; 
	/*background:#FFCCCC url(../img/web/ico_alert_yellow.png) 10px 50% no-repeat;*/
	border: 1px #990000 dotted;
	color: #990000;
		
}

	/**** classes for cake's auto created errors on form inputs ***/
.form-error
{
	border: 1px #F00 solid;
	
}
/* error-message class has a jquery event that kills the msg when click - jquery event is in ksAllPages */
.error-message 
{	padding: 5px;
	 background:#FFCCCC url(../img/web/ico_x_errMsg.png) no-repeat right 5px ;
	 border: 1px #990000 dotted;
	color: #900;
	margin: 0px 20px 10px 0px;
	font-weight:normal;
}
	
	.error-message:hover /* add this one to afford clicking when hover */
	{
		text-decoration:line-through;
		background:#C99  url(../img/web/ico_x_errMsg.png) no-repeat right 5px ;
		cursor: pointer;
	}

.cake-debug
{
	background:  #FF9;
	color: #006;
}

/* -- censor words - from KinnshareText -- */
.censored
{
	color: #CCC;	
}



/* =================================
			Common classes
			
			class defined here to be reused throughout the project

	=================================*/
	
/***  buttons ***/

/* red button */
input[type="button"].redBtn, input[type="submit"].redBtn{
	position: relative; /*for pressdown effect */
	font-size: 14px;
	color:#FFF; 
	
	height: 30px;
	border:#A32F07 1px solid;
	
	
	cursor: pointer;

	  /* fallback */
	  background-color: #CB260A;
	 background: #CB260A url(../img/web/bg_redGradient.jpg) repeat-x; 
	 
	  
	  /* Firefox 3.6+ */
	  background: -moz-linear-gradient(top, #F4341A, #CB260A);
	  
	  /* Safari 4-5, Chrome 1-9 */
	  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
	) */
	  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4341A), to(#CB260A));
	  
	  /* Safari 5.1+, Chrome 10+ */
	  background: -webkit-linear-gradient(#F4341A, #CB260A);
	  
	  /* Opera 11.10+ */
	  background: -o-linear-gradient(#F4341A, #CB260A);
	  
	
	-moz-box-shadow:  3px 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow:  3px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 3px 2px 3px rgba(0,0,0,0.3);
	
}

input[type="button"].redBtn:hover, input[type="submit"].redBtn:hover{
	
	/* background: #CB260A ; bland a bit dark bgcolor*/
			 
			 
			 /* fallback */
			  background-color: #C0270C;
 			 background: #C0270C url(../img/web/bg_lightRedGradient.jpg) repeat-x; 
		
			  
			 /* Firefox 3.6+ */
				   background: -moz-linear-gradient(top, #F37A69, #C0270C);
				  
				  /* Safari 4-5, Chrome 1-9 */
				  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
				) */
				  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F37A69), to(#C0270C));
				  
				  /* Safari 5.1+, Chrome 10+ */
				  background: -webkit-linear-gradient(#F37A69,#C0270C);
				  
				  /* Opera 11.10+ */
				  background: -o-linear-gradient(#F37A69, #C0270C);

	
}

input[type="button"].redBtn:active, input[type="submit"].redBtn:active{
		top: 1px; /*for press down effect */
	
 			background-color: #B83C1D;
 			 background: #B83C1D url(../img/web/bg_darkRedGradient.jpg) repeat-x ; 

	
			  /* fallback */
			  background-color: #8F1C07;
 			/* background: url(../img/web/bg_redGradient.jpg);  
			  background-repeat: no-repeat;*/
			  
			  /* Firefox 3.6+ */
			   background: -moz-linear-gradient(top ,#8F1C07, #B83C1D);
			  
			  /* Safari 4-5, Chrome 1-9 */
			  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
			) */
			  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8F1C07), to(#B83C1D));
			  
			  /* Safari 5.1+, Chrome 10+ */
			  background: -webkit-linear-gradient(#8F1C07, #B83C1D);
			  
			  /* Opera 11.10+ */
			  background: -o-linear-gradient(#8F1C07, #B83C1D);
}

input[type="button"].redBtn:focus, input[type="submit"].redBtn:focus{
	outline: #000 1px dotted;
}

input[type="button"][disabled].redBtn, input[type="submit"][disabled].redBtn{
 		color: #CCC;
		background: #999;		
		  
		border: #CCC 1px solid;
		outline: #666 1px solid;
		
		cursor: default;
}

/* white button */
input[type="button"].whiteBtn,  input[type="submit"].whiteBtn, input[type="reset"].whiteBtn{
	font-size: 14px;
	color:#666; 
	
	height: 30px;
	border:#FFFFFF 1px solid;
	outline:#666 1px solid;
	
	cursor: pointer;
	

			  
			  /* fallback */
			  background-color: #EEE;
 		background: url(../img/web/bg_whiteGradient.jpg) repeat-x;
			  
	  /* Firefox 3.6+ */
	   background: -moz-linear-gradient(top, #EEE, #CCC);
	  
	  /* Safari 4-5, Chrome 1-9 */
	  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
	) */
	  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#CCC));
	  
	  /* Safari 5.1+, Chrome 10+ */
	  background: -webkit-linear-gradient(#EEE, #CCC);
	  
	  /* Opera 11.10+ */
	  background: -o-linear-gradient(#EEE, #CCC);
			  
	-moz-box-shadow:  3px 2px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow:  3px 2px 3px rgba(0,0,0,0.3);
	box-shadow: 3px 2px 3px rgba(0,0,0,0.3);
	
}

/* #search_area input[type="button"]:hover { */
input[type="button"].whiteBtn:hover,  input[type="submit"].whiteBtn:hover, input[type="reset"].whiteBtn:hover{
	
	/* background: #CB260A ; bland a bit dark bgcolor*/
			 
			 
	  /* fallback */
			  background-color: #FFF;
 		background: url(../img/web/bg_lightWhiteGradient.jpg) repeat-x;
			  
			  /* Firefox 3.6+ */
			   background: -moz-linear-gradient(top, #FFF,#D6D6D6);
			  
			  /* Safari 4-5, Chrome 1-9 */
			  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
			) */
			  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#D6D6D6));
			  
			  /* Safari 5.1+, Chrome 10+ */
			  background: -webkit-linear-gradient(#FFF, #D6D6D6);
			  
			  /* Opera 11.10+ */
			  background: -o-linear-gradient(#FFF, #D6D6D6);
			  

	
}

/* #search_area input[type="button"]:active { */
input[type="button"].whiteBtn:active,  input[type="submit"].whiteBtn:active, input[type="reset"].whiteBtn:active{
	
	  /* fallback */
			  background-color: #999;
 		 background: url(../img/web/bg_darkWhiteGradient.jpg) repeat-x;
			  
			  
			  /* Firefox 3.6+ */
			   background: -moz-linear-gradient(top, #999, #C0C0C0);
			  
			  /* Safari 4-5, Chrome 1-9 */
			  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
			) */
			  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(#C0C0C0));
			  
			  /* Safari 5.1+, Chrome 10+ */
			  background: -webkit-linear-gradient(#999, #C0C0C0);
			  
			  /* Opera 11.10+ */
			  background: -o-linear-gradient(#999, #C0C0C0);
}

input[type="button"][disabled].whiteBtn, input[type="submit"][disabled].whiteBtn, input[type="reset"][disabled].whiteBtn{
 		color: #999;
			background: #D4D4D4;
 			
			  
			border: #CCC 1px solid;
			outline: #999 1px solid;
			
			cursor: default;
			
}




/* CSS Dropdown */






/* red tab  across the screen - for showing section title such as on restPage */
.red_tab_title_wrapper{
	/*old solid color background-color: #F4341A; */
	background: -o-linear-gradient(#F4341A, #CB260A);
	background: #CB260A url(../img/web/bg_redNavGradient.jpg);
	background-repeat: repeat-x;
	background: -moz-linear-gradient(top, #F4341A, #CB260A);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4341A), to(#CB260A));
	background: -webkit-linear-gradient(#F4341A, #CB260A);
	background: -o-linear-gradient(#F4341A, #CB260A);
	
	-moz-box-shadow: 2px 2px 3px rgba(100,100 ,100 ,0.7);
	-webkit-box-shadow: 2px 2px 3pxrgba(100,100 ,100 ,0.7);
	box-shadow: 2px 2px 3px rgba(100, 100, 100, 0.7);
}
.red_tab_title{
	color: #FFF;

	font-size: 18px;
	
	padding: 5px 20px 5px 10px;
	position:relative;
	
}
	.red_tab_title.extraPadding{
		padding-left: 45px;	
	}
	.red_tab_title .icon.map{
			background: url(../img/web/ico_map_big.png) no-repeat;
			width: 70px;
			height: 50px;
			position: absolute;
			top: -15px;
			left: -15px;
	}
	.red_tab_title .icon.listRests{
			background: url(../img/web/ico_rests_big.png) no-repeat;
			width: 70px;
			height: 50px;
			position: absolute;
			top: -10px;
			left: -10px;
	}
	.red_tab_title .icon.comments{
			background: url(../img/web/ico_comments_big.png) no-repeat;
			width: 70px;
			height: 50px;
			position: absolute;
			top: -12px;
			left: -7px;
	}
	
.dotted_for_red_tab{
	margin-bottom: 2px;
	border-bottom: 1px dashed #999;
}



.grey_tab_title_wrapper{
	background-color: #CCC;
}
.grey_tab_title{
	color: #333;
	font-size: 18px;	
	padding: 5px 10px 5px 10px;
	
	
}
	.grey_tab_title .right{
		font-size: 13px;
		float:right;
	}
	
	
.brown_tab_title_wrapper{
	background-color: #625C59;
}
.brown_tab_title{
	color: #FFF;
	font-size: 18px;	
	padding: 5px 10px 5px 10px;	
}
	.brown_tab_title a{
		color: #CCC;
		text-decoration: underline;
	}
	.brown_tab_title a:hover{
		color: #FFF;
	}
	
	.brown_tab_title .left{
		float: left;
		width: 480px;
	}
	.brown_tab_title .right{
		font-size: 13px;
		float:right;
		text-align: right;
		width: 250px;
	}




/* color when using highlight function to highlight some searched terms and stuff */
.highlight{
	color:#F43C1A;
	font-weight:bold;
}



/* -----------------------------------------------
		Font styles
	----------------------------------------------- */
.orangeRed {	/* Kinnshare's branding color */
	color: #F43C1A;	
}
.darkRed{
	color: #AD3417;	
}

.grey{
	color: #999;	
}

.greenGrey {
	color: #819187;	
}

.fbBlue{
	color: #3B5998;	
}

.bold{
	font-weight: bold;	
}

.small{
	font-size: 11px;	
}
.mini{
	font-size: 9px;	
}



.divLink{ /* to make a div look like link - add color and underline ***make sure to change color here to be the same as a and a:hover*/
	color: #0067B4;
	text-decoration:none;
	cursor: pointer;
}
.divLink:hover {
	color: #005493;
	text-decoration:underline;		
}
	.divLink.disabled{ /* if wanting to temp. disable a divLink, add this disable class */
		color: #BBB;
		cursor: default;
	}
	.divLink.disabled:hover{
		color: #BBB;
		cursor: default;
		text-decoration:none;
	}
	


.floatLeft{
	float: left;	
}
.floatRight{
	float: right;	
}
.alignLeft{
	text-align: left;	
}
.alignRight{
	text-align: right;	
}
.alignCenter{
	text-align: center;	
}

/* if wanting to hide some element */
.hidden{
	display: none;	
}

/* ---------------------------------
		dotted, dashed lines
	----------------------------------*/
div.dottedLine{
	border-bottom: 1px #AAA dotted; 
}

div.solidLine{
	border-bottom: 1px #999 solid; 
}

div.dashedLine{
	border-bottom: 1px #999 dashed; 
}

div.dottedLine.light, div.solidLine.light, div.dashedLine.light{
	border-color: #D4D4D4;
}
/* ------------------------------------------------
		different background colors and each bgcolor's font color+link color 
	------------------------------------------------- */
.bg_darkBrown{
	background-color:#413A34;
	color:#CCC;
}
.bg_darkBrown a{
	color: #0088EC;
}
.bg_darkBrown a:hover{
	color: #3EADFF;
}


.bg_darkGreen{
	background-color:#819187;
	color:#333;
}
.bg_darkGreen a{
	color: #0D5992;
}
.bg_darkGreen a:hover{
	color: #093C62;
}


.bg_paleYellow{
	background-color:#F9F4E1;
	color:#4C4C4D;
}
.bg_paleYellow a{
	
}
.bg_paleYellow a:hover{
	
}



/* -----------------------------------------
		 vertical white space row 
	----------------------------------------- */

	div.rowSpacerMini{
		height: 5px;
	}
	
	div.rowSpacerSmall{
		height: 10px;
	}

	div.rowSpacer{
		height: 20px;	
	}

	div.rowSpacerBig{
		height: 35px;
	}
	
	div.rowSpacerHuge{
		height:50px;
	}
	
	div.rowSpacerSuperHuge{
		height:80px;
	}


/* ----------------------------------------------
		helper
	--------------------------------------------*/
	/*** for KinnshareIcon  ***/
	
	/* to align icon to mid of text following */
	.alignIconToText{
		vertical-align:text-bottom;
		
	}
	
	/** base classes for all the icon links **/
	.iconDiv{
		display: inline-block;		
		padding: 3px; /* maintain the same 3px padding for the icon, but for text, might b diff if the icon is higher (bc we need to vert. align txt to center */
		padding-left: 21px;
		height: 17px;		
		cursor: pointer;
		
		border-radius: 3px;
		-moz-border-radius: 3px;
		
		border:1px solid rgba(0,0,0,0); /* transparent */
	}
	.iconDiv:hover{		
		border: 1px solid  rgba(0,0,0,0.3);		
		
		color: #000;
	}
	
	/** iconPlus 16x16px - default size **/
	.iconDiv.iconPlus{
		background: url(../img/web/ico_plus_bw.png) no-repeat 3px 3px;
	}
	.iconDiv.iconPlus:hover{
		background:  rgba(255,255,255,0.6)  url(../img/web/ico_plus_c.png) no-repeat 3px 3px;
	}
	
	
	/** iconTrash - this one is a little high **/
	.iconDiv.iconTrash{
		background: url(../img/web/ico_trash_bw.png) no-repeat 3px 3px;		
		height: 20px;
		padding-top: 8px; /* override padding top so the text aligns with the icon */
	}
	.iconDiv.iconTrash:hover{
		background: rgba(255,255,255,0.6) url(../img/web/ico_trash_c.png) no-repeat 3px 3px;		
	}
	
	/** iconPencil - this one is a little high **/
	.iconDiv.iconPencil{
		background: url(../img/web/ico_pencil_bw.png) no-repeat 3px 3px;		
		
	}
	.iconDiv.iconPencil:hover{
		background:  rgba(255,255,255,0.6)  url(../img/web/ico_pencil_c.png) no-repeat 3px 3px;		
	}
	
	.iconDiv.iconMinus{
		background: url(../img/web/ico_minus_bw.png) no-repeat 3px 3px;
	}
	.iconDiv.iconMinus:hover{
		background:  rgba(255,255,255,0.6)  url(../img/web/ico_minus_c.png) no-repeat 3px 3px;
	}
	
	.iconDiv.iconFlipCcw{
		background:  url(../img/web/ico_flip_ccw.png) no-repeat 3px 1px;
		padding-left: 24px;
	}
	.iconDiv.iconFlipCcw:hover{
		background: rgba(255,255,255,0.6)  url(../img/web/ico_flip_ccw.png) no-repeat 3px 1px;
	}
	
	.iconDiv.iconFlipCw{
		background: url(../img/web/ico_flip_cw.png) no-repeat 3px 1px;
		padding-left: 24px;
	}
	.iconDiv.iconFlipCw:hover{
		background:  rgba(255,255,255,0.6)  url(../img/web/ico_flip_cw.png) no-repeat 3px 1px;
	}
	
	.iconDiv.iconFbShare{
		background: url(../img/web/ico_fbShare_bw.png) no-repeat 1px 1px;
		padding-left: 27px;
		height: 19px;
	}
	.iconDiv.iconFbShare:hover{
		background:  rgba(255,255,255,0.6)  url(../img/web/ico_fbShare_c.png) no-repeat 1px 1px;
	}
	
	.iconDiv.iconBecomeFan{
		background: url(../img/web/ico_becomeFan.png) no-repeat 3px 1px;
		padding-left: 24px;
	}
	.iconDiv.iconBecomeFan:hover{
		background:  rgba(255,255,255,0.2)  url(../img/web/ico_becomeFan.png) no-repeat 3px 1px;
		border-color: rgba(255, 255, 255, 0.3);
	}
	
	
	.iconBts ,.iconMrt{
				padding: 3px 0 0 20px;
		height: 15px;
		display: inline-block;	
	}
		.iconBts{	
			background: url(../img/web/ico_bts_mini.png) no-repeat 3px 3px;
		}
		.iconMrt{	
			background: url(../img/web/ico_mrt_mini.png) no-repeat 3px 3px;
		}
		
		.iconChain{	
			background: url(../img/web/ico_chain_tiny2.png) no-repeat 3px 3px;
			padding: 2px 0 2px 18px;
			min-height: 13px;
			display: inline-block;
		}
		.iconBld{	
			background: url(../img/web/ico_bld_mini.png) no-repeat 3px 3px;
			padding: 2px 0 2px 18px;
			min-height: 13px;
			display: inline-block;
		}
		.iconPriceRange{	
			background: url(../img/web/ico_priceRange_c.png) no-repeat 3px 3px;
			padding: 3px 0 2px 24px;
			min-height: 13px;
			display: inline-block;
		}


/* ----------------------
	 active/inactive tab shown on top of page for admin*
	 -------------------------*/
.activeTab{
	text-align:center;
	padding: 10px 0;
	border: 1px dashed #6C0;
}
.inactive{
	background: #DDD;
	border: 1px dashed #CCC;
	color: #999;	
	
}

/*-------------------------
		Tables  
		  -these classes r derived from cake.generic
	------------------------- */
	
	/** Tables **/
table {
	background: #fff;
	border-right: 0;
	clear: both;
	color: #333;
	margin-bottom: 10px;
	width: 100%;
}
th {
	border:0;
	border-top:2px solid #555;
	border-bottom:2px solid #555;
	border-right: 1px dotted #CCC;
	text-align: left;
	padding:4px;
	font-size: 1.1em;
	
}
th a {
	display: block;
	padding: 2px 4px;
	text-decoration: none;
}
th a.asc:after {
	content: ' ' url(../img/web/ico_sortArrow_blue_up.png); 
}
th a.desc:after {
	content: ' ' url(../img/web/ico_sortArrow_blue_down.png); 
}
table tr td {
	background: #fff;
	padding: 6px;
	text-align: left;
	vertical-align: top;
	border-bottom:1px solid #ddd;
	border-right: 1px dotted #CCC;

}
table tr:nth-child(2n) td {
	background: #f5f5f5;
}
table .altrow td {
	background: #f5f5f5;
}
	table tr.inActive td {
		background: #DDD;
		color: #AAA;
	}
	table tr.unread td {
		font-weight: bold;
		background:#FF9;
	}
	table tr.unvalidated td {
		background: #FF9;
		
	}
	
td.actions {

	white-space: nowrap;
}
table td.actions a {
	margin: 0px 6px 5px;
	padding:2px 5px;
}

/* -------------------------
		cake's sql logs
	------------------------- */
.cake-sql-log table {
	background: #f4f4f4;
}
.cake-sql-log td {
	padding: 4px 8px;
	text-align: left;
	font-family: Monaco, Consolas, "Courier New", monospaced;
}
.cake-sql-log caption {
	color:#fff;
}

/* -------------------------
		cake's scaffold stuff
	------------------------- */
	/* div.form, */
	div.index,
	div.view {
		float:right;
		width:76%;
		border-left:1px solid #666;
		padding:10px 2%;
	}
	div.actions {
		float:left;
		width:16%;
		padding:10px 1.5%;
	}
	div.actions h3 {
		padding-top:0;
		color:#777;
	}

	/** Scaffold View **/
	dl {
		line-height: 2em;
		margin: 0em 0em;
		width: 60%;
	}
	dl .altrow {
		background: #f4f4f4;
	}
	dt {
		font-weight: bold;
		padding-left: 4px;
		vertical-align: top;
	}
	dd {
		margin-left: 10em;
		margin-top: -2em;
		vertical-align: top;
	}
	/**actions in scaffold **/
	div.actions ul {
		margin: 0;
		padding: 0;
	}
	div.actions li {
		margin:0 0 0.5em 0;
		list-style-type: none;
		white-space: nowrap;
		padding: 0;
	}
	div.actions ul li a {
		font-weight: normal;
		display: block;
		clear: both;
	}
	div.actions ul li a:hover {
		text-decoration: underline;
	}



/* --------------------
	goMap api for Google maps
	-------------------- */
	.mapError{ /*show error msg in map div when cant connect to inet */
		padding: 5px 5px 10px;
		color: #CE1A1A;
		background: #EEE;
	}
	
	.gomapMarker{
		overflow-y: hidden;
		font-size: 13px;
		line-height: 1.2em;
		color: #333;
		height: 60px;
	}
		.gomapMarker .emp{
			color: #000;
			font-weight: bold;
		}
		.gomapMarker .empRed{
			color: #C00;
			font-weight: bold;
		}
		
		.gomapMarker div.searchNearHere{
			margin-top: 10px;
			color: #0067B4;
			cursor: pointer;
			font-size: 13px;

		}
			.gomapMarker div.searchNearHere .emp{
				color:#C00;
				cursor: pointer;
				font-size: 13px;
			}
		.gomapMarker div.searchNearHere:hover{
			color: #005493;
			text-decoration: underline;
		}
	


/*----------------
		recently viewed element
	---------------*/
.icon.recentViews{
		
}

.recentRest{
	float:left;
	padding: 10px 5px;
	width: 140px;
	
}
	.recentRest .restName{
		font-weight:bold;	
		min-height: 30px;
	}
	.recentRest .cuisines{
		color: #999;
		font-size: 11px;
		height: 30px;
	}