@charset "utf-8";
/* CSS Document */

/*Basic CSS Styles*/

body {
	font: normal 85%/135% Verdana;
	color: #555;
	background: #000 url(../assets/bg_mauitoes_1280x960.jpg) center center fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}

@media only all and (max-width: 1024px) and (max-height: 768px) {
	body {
	-moz-background-size: 1024px 768px;
	background-size: 1024px 768px;
	}
}


@font-face {
    font-family: 'museo_sans_500regular';
    src: url('MuseoSans_500-webfont.eot');
    src: url('MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('MuseoSans_500-webfont.woff') format('woff'),
         url('MuseoSans_500-webfont.ttf') format('truetype'),
         url('MuseoSans_500-webfont.svg#museo_sans_500regular') format('svg');
    font-weight: normal;
    font-style: normal;

}



div#container {
	position: relative;
	
	margin-top: 5%; 
	margin-left: 8%;
	
	width: 480px;
	height: 360px;
}

div#container #bg, div#container #content {
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div#container #bg {	
	border: solid 2px #f0d8b3;
	
	background: #f7f4ec;
	background: -moz-linear-gradient(100% 100% 90deg, #f7f4ec, #f0d8b3);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from (#f7f4ec), to (#f0d8b3));
	background: -webkit-linear-gradient(#f7f4ec, #f0d8b3);
	background: -o-linear-graident(#f7f4ec, #f0d8b3);
	
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

div#container #content {
	margin-left: 30px;
	margin-top: 15px;
	width: 420px;
}

div#container #content h1 {
	color: #8c6239;
	font: normal 36px/100% museo_sans_500regular, Verdana, sans-serif;
	text-shadow: 0 2px 2px rgba( 254, 254, 254, 0.45);
}

div#container #content p {
	color: #5674b9;
	font: normal 18px/145% museo_sans_500regular, Verdana, sans-serif; 
	margin: 5px 0;
	text-shadow: 0 1px 1px rgba( 254, 254, 254, 0.45);
}