/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/





/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
	margin: 0 auto;
	padding: 0 0 0 1%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1220px;
}

.onepcssgrid-1000 {
	max-width: 1020px;
}

.onerow {
	clear: both;
	padding: 0 10px;
}





/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
	margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
	width: 100%;
	height: auto;
	display: block;
}





/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
	.onepcssgrid-1000 {
		max-width: 1000px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
	#cssmenu{ display:none}
	#left_top-nav{ display:block}

}

@media all and (max-width: 1024px) 

	{
		.login_box {top:-297px;}
		#cssmenu{ display:none}
		#left_top-nav{ display:block}
	}





/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 768px) {

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
		float: none;
		width: 99%;
	} 
	
	.header .hd_top .logo {text-align:center; padding:10px 0;}
	.header .hd_top .best {display:none;}
	.header .hd_top .tagline {padding:0; text-align:center;}
	.header .hd_top .tagline strong {padding:0 0 10px 0;}
	
	.social_links {display:block; padding:0; text-align:center; float:none; padding:0 0 10px 0;}
	
	.login_box {position:relative; right:0; top:0; width:auto; display:block; padding:10px 0;}
	.login_box .lb_bottom {border:1px solid #CDCDCD; border-top:none;}

	.steps_section {background:none; margin:0; padding:10px 0;}

	.footer .ft_top .listing h2 {padding:15px 0;}
	.footer .ft_top .listing h2.blank {display:none;}
	.footer .ft_middle .ft_links li {line-height:10px; font-size:12px; padding:0 5px; margin:5px 0;}
	
	.footer .ft_bottom {padding:10px 0;}
	.footer .ft_bottom .btn {display:block; margin:0 0 10px 0;}
	.footer .ft_bottom .copyright {text-align:center; line-height:normal;}
	#cssmenu{ display:block}
	#left_top-nav{ display:none}
	.fav_restaurants .rating_blk {text-align:left;}
	

}

@media all and (max-width:640px) 

	{
		.fr_header {display:none;}
		.fav_restaurants td {padding:5px 0;}
		.fav_restaurants .logo_blk {width:100%; float:left;}
		.fav_restaurants .name_blk {width:100%; float:left;}
		.fav_restaurants .cuisine_blk {width:100%; float:left;}
		.fav_restaurants .speed_blk {width:100%; float:left;}
		.fav_restaurants .order_blk {width:100%; float:left;}
		.fav_restaurants .promotion_blk {width:100%; float:left;}
		.fav_restaurants .rating_blk {width:100%; float:left;}
		
		.frr_inner .restaurant_name {margin-right:10px;}
		.frr_inner .review {margin:0 10px;}
		#cssmenu{ display:block}
		#left_top-nav{ display:none}
		.fav_restaurants .rating_blk {text-align:left;}
		.sign_up_blk .sub_inner textarea {width:100%;}
	}
	
@media all and (max-width:480px) 

{
	.sign_up_blk .sub_inner label {width:100%; padding:0;}
	.sign_up_blk .sub_inner select {width:100%;}
	.sign_up_blk .sub_inner input[type="text"] {width:100%;}
	.sign_up_blk .sub_inner input[type="password"] {width:100%;}
	.sign_up_blk .sub_inner input[type="submit"] {margin:-30px 0 0 0;}
	#cssmenu{ display:block}
	#left_top-nav{ display:none}
	.fav_restaurants .rating_blk {text-align:left;}
	.sign_up_blk .sub_inner textarea {width:100%;}
}

@media all and (max-width: 360px) 

	{
		.listing_search h4 {font-size:20px;}
		.listing_search input {width:100%; margin:0 0 15px 0;}
		
		.fav_restaurants .fr_title strong {font-size:20px;}
		
		.customer_profile_blk h3 .log {display:none;}
		#cssmenu{ display:block}
		#left_top-nav{ display:none}
		.fav_restaurants .rating_blk {text-align:left;}
		.sign_up_blk .sub_inner textarea {width:100%;}
	}