@CHARSET "ISO-8859-1";

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

html * {
	max-height: 100000px;	/* Reset for Andoird Chrome browser */
}

html, body {	
	margin: 0;
	padding: 0;
	
	width: 100%;
	height: 100%;
	
	overflow-y: hidden;
		
	/* Main font */
	color: #252525;
	font-size: 16px;
	font-family: Arial, Helvetica, Tahoma;	
	
	background: rgba(208,208,208,1);
}

ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

label, input, select, .button {
	margin: 0;
	
	font-size: 13px;
	line-height: 26px;
	
	display: block;
}

input, select, .button {
	min-height: 26px;			/* Important for FF, else must be equal to line-height */
	
	padding: 7px;

	border: 1px solid #FFF;
	border-radius: 3px;
	background: #FFF;
}

/* *
 * Main layout */
#mainWrapper {
	position: relative;
	
	width: auto;
	min-height: 100%;
	max-height: 100%;
	overflow: hidden;
	
	padding: 0 0 0 0;	
}

	#messageWrapper {
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		
		margin: 0 auto;
		padding: 10px 0;
		
		color: #FFF;
		text-align: center;
		
		background-color: #E00000;
		box-shadow: 0px 0px 5px #999;
		
		/* Will be faded in by javascript */
		opacity: 0;
		z-index: 999;
	}
	
	#contentWrapper {	
		margin: 0;
		padding: 0;
		
		min-width: 500px;
		overflow-y: auto;
		
		background: rgb(247,247,247); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(208,208,208,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(208,208,208,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(208,208,208,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(208,208,208,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(208,208,208,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(208,208,208,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d0d0d0',GradientType=0 ); /* IE6-9 */
	}
	
		/* Home button top left corner */
		#contentWrapper #home {
			top: 15px;
			left: 15px;
			
			background-image: url(../images/icon_home_36px.png);
			background-repeat: no-repeat;
			background-position: 6px 6px;
		}
		
		/* Logout button top right corner */
		#contentWrapper #logout {
			top: 15px;
			right: 15px;
			
			background-image: url(../images/icon_logout_36px.png);
			background-repeat: no-repeat;
			background-position: 6px 6px;
		}
	
	#subcontentWrapper {
		z-index: 500;
		position: absolute;
		bottom: 0;
		left: 15px;
		
		width: calc( 100% - 70px );
		overflow: hidden;
		
		padding: 25px 20px 15px 20px;
	
		color: #252525;
	
		background: rgb(255,255,255); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
	
		/*
		background-image: url(../images/logos_beverinnovations.png);
		background-repeat: no-repeat;
		background-position: bottom right;
		*/
		
		box-shadow: 0 0 10px #BABABA;
		border-radius: 3px 3px 0 0;
	}

/* *
 * General classes */
.clr {
 	clear: both;
 	
 	height: 0px;
 	max-height: 0px;
 	overflow: hidden;
 	
 	font-size: 0px;
 	line-height: 0px;
 }
 
 .gray {
 	color: #666;
 }
 
 .smaller {
 	line-height: 20px;
 	font-size: 14px;
 }

.hr {
	margin: 0 0 10px 0;
	border-bottom: 1px solid #EEE;
}

.centerContent {	
	position: relative;
	width: 90%;
	min-width: 500px;
		
	padding: 0;
	margin: 0 auto !important;	
}

.flatbutton {
	position: absolute;
	z-index: 500;

	width: 50px;
	height: 50px;
	overflow: hidden;
	
	color: #FFF;
	font-size: 32px;
	line-height: 50px;
	text-align: center;
	
	background: #FEFEFE;
	box-shadow: 0 0 10px #BABABA;
	border-radius: 3px;
}

.flatbutton:hover {
	cursor: pointer;
}
		
.flatbutton:active {
	background: #EEE;
}

/* *
 * Headers */
h1, h2, h3 {
	margin: 0;
	padding: 0;
	
	color: #252525;
}

h1 {
	padding: 0 0 15px 0;
	font-size: 26px;
}


h2 {
	padding: 0 0 10px 0;
	font-size: 22px;
}

h3 {
	padding: 0 0 5px 0;
	font-size: 18px;
}

/* *
 * Paragraphs */
p {
	margin: 0;
	padding: 0 0 10px 0;	
}

/* *
 * Link styles */
a {
	color: #252525;
	text-decoration: none;
}

a:focus {
	/* Remove dotted line around list-item 
	 * when clicked on */
	outline: none;
}

/* *
 * Tables */
table tr td {
	vertical-align: top;	
}