/* type styles */

body {
font-size: 100%;
}

#header {
font-family: 'Raleway', sans-serif;
font-size: 1.4em;
font-weight: 600;
line-height: 1.5em;
color: #4d3f03;
background-color: #FFF;
margin: 0px;
padding: 40px 10px 20px 10px;
text-align: left;
}

#main {
font-family: 'Lusitana', serif;
font-size: 1em;
font-weight: 400;
line-height: 1.4em;
color: #000;
background-color: #FFF;
margin: 0px;
padding: 0px 10px 20px 10px;
text-align: left;
}

img.float_right {
	float: right;
	border:1px solid #021a40;
	margin: 0 0 10px 10px; 
}

a {
font-family: 'Raleway', sans-serif;
font-size: 1em;
font-weight: 600;
text-decoration: none;
line-height: 1.5em;
color: #2591b4;
padding: 0px 10px 20px 10px;
}

a:visited {
  color: #b2aa8b;
}
a:hover {
  color: #f2c209;
}
a:active {
  color: #f2c209;
}

	
#container_buttons{
	width: 100%;
	margin: 10 auto;
	background: rgba(255,255,255,0.3);
	padding: 10px 10px 10px 10px;
}

#container_buttons p{
	display:block;
	padding-bottom:10px;
}

.a_button {
	background-color:#3bb3e0;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	padding-right:50px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(44,160,202)),
	color-stop(1, rgb(62,184,229))
	);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
	-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_button:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(62,184,229)),
	color-stop(1, rgb(44,160,202))
	);
	-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
	-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
	-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_button::before {
	background-color:#2591b4;
	background-image:url(images/right_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-9px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.a_button:active::before {
	top:50%;
	margin-top:-12px;
	-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
	-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
	-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
	box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

		#bg {
			position:fixed; 
			top:-50%; 
			left:-50%; 
			width:200%; 
			height:200%;
		}
		#bg img {
			position:absolute; 
			top:0; 
			left:0; 
			right:0; 
			bottom:0; 
			margin:auto; 
			min-width:50%;
			min-height:50%;
		}
		
		#page-wrap { position: relative; z-index: 2; width: 800px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
		p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }


/* ========================================================
   NEW ADDITIONS FOR SEO AND MOBILE RESPONSIVENESS
   ======================================================== */

/* Ensure images are responsive */
img {
	max-width: 100%;
	height: auto;
}

/* Styles for new semantic HTML5 elements */
h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.3em;
	color: #4d3f03;
	margin: 0 0 0.5em 0;
}

h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 1.3em;
	font-weight: 600;
	line-height: 1.4em;
	color: #4d3f03;
	margin: 1.5em 0 0.5em 0;
}

header {
	margin-bottom: 1em;
}

nav {
	margin: 1em 0;
	padding: 0.5em 0;
}

main {
	display: block; /* for older browsers that don't recognize <main> */
}

section {
	margin: 2em 0;
}

footer {
	margin-top: 3em;
	padding-top: 1em;
	border-top: 1px solid #ccc;
	font-size: 0.9em;
	color: #666;
}

/* Mobile responsiveness - adjust layout for smaller screens */
@media (max-width: 850px) {
	#page-wrap {
		width: 90%;
		max-width: 800px;
		margin: 20px auto;
		padding: 15px;
	}
	
	#bg {
		display: none; /* Hide background image on mobile for better performance */
	}
	
	body {
		background-color: #f5f5f5;
	}
}

@media (max-width: 600px) {
	#page-wrap {
		width: 95%;
		margin: 10px auto;
		padding: 10px;
	}
	
	#header {
		font-size: 1.2em;
		padding: 20px 10px 10px 10px;
	}
	
	h1 {
		font-size: 1.3em;
		line-height: 1.2em;
	}
	
	h2 {
		font-size: 1.1em;
	}
	
	#main {
		font-size: 0.95em;
		padding: 0px 5px 15px 5px;
	}
	
	p {
		font-size: 14px;
		line-height: 1.6;
	}
	
	a {
		padding: 0px 5px 15px 5px;
	}
	
	img.float_right {
		float: none;
		display: block;
		margin: 10px auto;
		max-width: 100%;
	}
}

/* Very small screens (phones in portrait) */
@media (max-width: 400px) {
	#header {
		font-size: 1.1em;
	}
	
	h1 {
		font-size: 1.2em;
	}
	
	.a_button {
		font-size: 11px;
		padding: 8px 15px;
		padding-right: 40px;
	}
}