html, body
{
	margin: 0; padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-family: 'Arimo', sans-serif;
	width: 100%;
	background-color: #000000;
}

#container 
{
	position: relative;
	overflow: hidden;
	width: 100%;/**Marcus: Is this always going to be 100% ???**/
	background-color: /*#ffffff*/#f5f5f5;
}

.header, .body, .social-media, .navigation, .footer{
	position: relative;
}

.header{ background: url(../../../resource/coatz/image/header-background.png); z-index: 2000; }
.logo{ position: relative; height: 52px; width: /*160*//*150*/145px; border-right: 1px solid #081510; float: left; }
.logo > a{ position: relative; overflow: hidden; height: 100%; width: 100%; display: block; z-index: 9999; }
.logo > a > img{ position: absolute; left: /*20*//*15*//*13*/11px; top: 11px; }
.right{ position: relative; height: 52px; border-left: 1px solid /*#274639*/#4d4d4d; float: left;}

.search{ position: relative; }
.search-icon.active{ background-color: #5de1a7; }

/*Marcus: This is just to simulate as if there were contents*/
/*.body{ height: 1000px; width: 100%; }*/
.body{ width: 100%; }
/*Upon open Search Bar in Mobile, push content below by margin*/
.body.tab{ margin-top: 44px; }
.body.fast{ transition: margin-top 0.1s linear; }
.body.slow{ transition: margin-top 1s linear; }


.social-media{ background-color: /*#0d271c*/#000000; text-align: center; padding: /*7*/4px 0px; min-height: 19px; }
.social-media-image.facebook{ background-position: 0px 4px; background-size: 24px 24px; background-image: url(../image/fb-icon-edited.png); background-repeat: no-repeat; }

.navigation{ position: relative; background-color: /*#05130d*/#101010; font-size: 12px; }
.navigation-ul{ margin: 0; padding: 0; }
.navigation-a{ text-decoration: none; color: #8e9190; font-weight: normal; font-size: 12px; letter-spacing: 0.4px; }

.footer{ background-color: #000000; color: #515151; padding: 7px 0px; min-height: 16px; font-size: 10px; text-align: center; }
.clear-both{ clear: both; }

/*Marcus: This is only applicable for mobile view port*/
#greyout{ z-index: 1500; }
#greyout.show{ display: block; }
#greyout.hide{ display: none; }
@media (min-width: 1px) {
	#greyout {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.8;
		top: 52px;/*Marcus: Do not cover the header*/
		left: 0px;
	
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		transition: all .5s ease;
	
		display: none;
	}
}

@media (min-width: 768px) {
	.logo{ width: 150px; }
	.logo > a > img{ left: 15px; }
	#greyout, #greyout.show{ display: none; }
}

@media (min-width: 1280px) {
	#greyout, #greyout.show{ display: none; }
}