/* Just some base styles not needed for example to function */
html { font-family: Verdana, Arial, Helvetica, sans-serif; }

/* Makes the layout exapnd to 100% height without this css below won't work */
html,body { height: 100%; }

html, body, form, ul, li, p, h1, h2, h3, h4, h5
{
	margin: 0;
	padding: 0;
}
img { border: none; }
p
{
	margin: 0 0 1.308em 0; /* 17px */
}
ul { padding: 0 0 0 20px; }

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

html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }
	
/* Drag drop upload styles */
/*
@font-face {
	font-family: 'VomZom';
	src: url('vomzom.eot');
	src: local('VomZom'), local('VomZom'), 
	url('vomzom.woff') format('woff'), 
	url('vomzom.svg#VomZom') format('svg'), 
	url('vomzom.ttf') format('truetype');
}
*/
body,
#maincontainer
{ 
	background: #fff;
	/*background: -moz-linear-gradient(0% 0%, 0% 100%, from(#594F50), to(#547980)); /* Firefox 3.6+ */
	/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#594F50), to(#547980)); /* Safari */
	color: #000; 
}

#maincontainer
{
	display: table;
	height: 100%;
	width: 100%;
}
	/*  Basic table layout */
	#maincontainer header#banner,
	#maincontainer #content,
	#maincontainer footer
	{
		display: table-row;
	}

#maincontainer header#banner
{
	padding: 30px 0 0;
	display: table-cell;
	border-bottom: 3.667em solid #fff; /* 44px */
	margin: 0 0 1.333em;
	height: 7.5em; /* 90px */
}
	#banner hgroup
	{
		display: block;
		margin: 0;
		border-bottom: 0.417em solid #DC143C; /* 5px */
		height: 7.5em; /* 90px */
	}
	header#banner h1,
	header#banner h2
	{
		font-family: VomZom, Verdana, Arial, Helvetica, sans-serif;
		font-size: 6.333em; /* 100px */
		text-shadow: 1px 1px 1px #000;
		width: 960px; 
		margin: 0 auto;
		color: #DC143C;
		text-indent: 127px;
		white-space: nowrap;
	}
	header#banner h2
	{
		font-size: 1.333em; /* 16px */
		text-indent: 197px;
		text-shadow: none;
	}

#content
{
	height: 100%;
}
	#content #content_inner 
	{ 
		height: 100%; 
		width: 960px; 
		margin: 0 auto;
		padding: 16px 0 30px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#content section
	{
		display: block;
		width: 625px;
		min-height: 100%;
		float: left;
		margin: 0 15px 0 0;
	}
	#content section:first-child
	{
		background: #fff;
		/*background: -moz-linear-gradient(0% 0%, 0% 100%, from(#56686c), to(#547980)); /* Firefox 3.6+ */
		/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#56686c), to(#547980)); /* Safari */
		width: 305px;
		
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		
		-moz-box-shadow: 5px 5px 5px #000;
		-webkit-box-shadow: 5px 5px 5px #000;
		box-shadow: 5px 5px 5px #000;
	}
		section header
		{
			background-color: #fff;
			display: block;
			padding: 18px 0 20px;
			margin: 0 0 4px;
			
			-moz-border-radius: 10px 10px 0 0;
			-webkit-border-top-left-radius: 10px;
			-webkit-border-top-right-radius: 10px;
			border-radius: 10px 10px 0 0;
			
			-moz-box-shadow: 1px 1px 3px #000;
			-webkit-box-shadow: 1px 1px 3px #000;
			box-shadow: 1px 1px 3px #000;
		}
			section header h1
			{
				text-shadow: 1px 1px 1px #000;
				text-align: center;
				font-size: 1.833em;
				line-height: 1;
			}
		ul#fonts
		{
			padding: 0;
			margin: 0 15px 15px;
		}
			#fonts li
			{
				font-size: 1.5em; /* 18px */
				line-height: 3.222em; /* 58px */
				list-style: none;
				height: 3.222em; /* 58px */
				overflow: hidden;
				border-bottom: 2px solid #594f4f;
				-moz-border-bottom-colors: #547980 #594f4f;
				cursor: pointer;
			}
				#fonts li span
				{
					width: 84px;
					height: 2.222em; /* 40px */
					line-height: 2.222em; /* 40px */
					display: block;
					float: left;
					padding: 0 5px 0 0;
					margin: 0.444em 0 0;
					text-align: center;
					overflow: hidden;
				}
				#fonts li span:first-child
				{
					width: 179px;
					border-right: 2px solid #594f4f;
					-moz-border-right-colors: #547980 #594f4f;
				}
			#fonts li:first-child { font-family: VomZom, Verdana, Arial, Helvetica, sans-serif; } /* Apply example font to first item only */
			#fonts li.active,
			#fonts li:hover
			{
				/*background: -moz-linear-gradient(0% 0%, 0% 100%, from(#56696d), to(#547980)); /* Firefox 3.6+ */
				/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#56696d), to(#547980)); /* Safari */
				text-shadow: 1px 1px 10px #000;
			}
	#custom
	{
		padding: 1.167em 0 4.167em 1.333em; /* 14px/50px/16px */
		position: relative;
		
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
		#custom:before
		{
			display: none;
			content: "This text is editable";
			/*background: -moz-linear-gradient(0% 0%, 0% 100%, from(#56696d), to(#547980)); /* Firefox 3.6+ */
			/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#56696d), to(#547980)); /* Safari */
			background: #fff;
			border: 1px solid #fff;
			font-weight: bold;
			left: 50%;
			margin: 0 0 0 -70px;
			opacity: 0.7;
			padding: 5px;
			position: absolute;
			width: 140px;
			text-align: center;
			
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
		}
		#custom:hover 			{ text-shadow: 1px 1px 10px #000; }
		#custom:hover:before 	{ display: block; top: -10px; }
		
		#custom h1
		{
			color: #000;
			font-size: 2.5em;
			font-weight: normal;
			margin: 0 0 0.633em; /* 19px */
		}
		#custom p,
		#custom ul li
		{
			color: #000;
			font-size: 1.083em;
			line-height: 1.308em;
		}
		#custom ul li
		{
			
		}
			#custom ul li li
			{
				font-size: 1em;
			}
		
footer
{
	height: 40px;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
	footer p
	{
		margin: 0 auto;
		width: 960px;
		line-height: 40px;
		font-size: 0.917em;
	}
	footer a.cssninja	{ float: right; background: url(ico_ninja.png) 0 50% no-repeat; padding: 0 0 0 27px; }
	footer a 			{ color: #blue; text-decoration: none; }
	footer a:hover	{ text-decoration: underline; }