h1 { font-size: 2em; text-shadow: 1px 1px 1px #000; float: left; text-transform: none; margin-left: 20px  }

div#container { position: static }
div#header { top: 0; left: 0; right: 0; }
div#footer {  bottom: 0; left: 0; right: 0; }
div#header, div#footer { position: absolute; background: url('../images/background.jpg') repeat; display: none; }

div.highlight { background: url('../images/highlight.png') no-repeat; position: absolute; bottom: 15%; right: 0; color: #fff; width: 843px; height: 50px; display: none; z-index: 10; }
/*div.highlight ul { position: absolute; right: 0 }*/
div.highlight h1 { margin-top: 7px }
div.highlight ul { margin-top: 15px; margin-left: 20px }
div.highlight li { font-size: 1.5em; margin-right: 12px }
div.highlight li a { font-size: 1em }


/**
 * -------------------------------------------------------------------------------------------------
 * RESPONSIVE STYLES
 * -------------------------------------------------------------------------------------------------
 */
@media screen and (max-width: 980px) {
	div.highlight {
		width: auto;
		left: 0;
		background: url('../images/home-hl-bg.png') 0 0 repeat;
		border: solid #cbc3bd;
		border-width: 1px 0;
		height: auto;
		padding: 10px 20px;
	}
		div.highlight:after {
			content: '';
			display: table;
			clear: both;
		}
	div.highlight h1 {
		margin: 0 20px 0 0 !important;
		display: inline-block;
		vertical-align: middle;
		float: none;
		line-height: 1.1em;
		font-size: 28px;
	}
	div.highlight ul {
		margin: 0;
		display: inline-block;
		vertical-align: middle;
		float: none;
	}
	div.highlight ul li {
		float: none;
		font-size: 16px;
	}
}

@media screen and (max-width: 640px) {
	body {
		min-width: 300px;
	}
	
	div#header {
		border-bottom: 0;
	}
	
	div#footer {
		border-top: 0;
	}
	
	div.highlight {
		bottom: 0;
		margin-bottom: 140px;
	}
	div.highlight h1 {
		display: block;
		margin-bottom: 10px !important;
	}
	div.highlight ul {
		display: block;
	}
}