/*
Title:		Styles for Ummeljimal.org V5 Main Pages
Author:		PRC
Copyright:	Copyright 2015 Umm el-Jimal Project and Open Hand Studios. All rights reserved.
Version:	1.0 
*/

/* CSS Reset for HTML5 in part devloped from http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 0;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Page Structure */

body {
	background: #506473 url(../img/bg_fade_stripe.jpg) repeat-x left top;
	font-family: 'Gill Sans', Lato, sans-serif;
	font-weight: 100;
}

.wrap {
	margin: 0 auto 0 auto;
	min-width: 320px;
	max-width: 1440px;
}

header {
	padding: 0 4.296875% 40px 4.296875%;
	text-align: center;

}

.media {
	margin: 0 6.25%;
	background-color: #FFFEFA;	
}

main {
	position: relative;
	margin: 0 6.25%;
	padding-bottom: 60px;
	text-align: center;
	border: 3px solid #BFBBAA;
	box-shadow: inset 0px 0px 100px 0px rgba(52,53,54,0.65);
	background: #FFFEFA url(../img/bg_main.jpg) repeat left top;
}

section {
	padding: 0 0 0 200px;
	text-align: left;
}

aside {
	
}

footer {
	position: relative;
	padding: 40px 6.25% 80px 6.25%;
	text-align: center;
}


/* Float Fixes */

.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	clear: both;
	*zoom: 1;
}

/* Navigation: Main Menu */

.nav-m1 li, .nav-m2 li {
	display: inline;
	float: left;
	padding-top: 40px;
	width: 6.837606837607%;
	margin: 0 2.136752136752% 0 2.136752136752%;
}

.nav-m1 a, .nav-m2 a {
	border: none;
	text-decoration: none;
}

.nav-m1 img, .nav-m2 img, .nav-m1 img a, .nav-m2 img a {
	border: 0;
	min-width: 80px !important;
	height: 80px !important;
	text-decoration: underline;
	color: #fff;
	opacity: .5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 hack */
	filter: alpha(opacity = 50); /* IE 5-7 hack */
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

.nav-m1 a:hover img,
.nav-m2 a:hover img,
.nav-m1 a:focus img,
.nav-m2 a:focus img,
.nav-m1 li.current-nav img,
.nav-m2 li.current-nav img {
	opacity: 1.0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
	filter: alpha(opacity = 100); /* IE 5-7 hack */
}


/* Navigation: Mast */

.mast {
	position: absolute;
	left: -40px;
	top: -100px;
	width: 200px;
	text-align: center;
	background: #99adbd url(../img/bg_mast.jpg) repeat right top;
	box-shadow: 0px 0px 10px 0px rgba(52,53,54,0.50);
	z-index: 1;
}

.mast a {
	text-decoration: none;
}

.mast a:hover, .mast a:focus, .mast a:active, .mast a:visited {
	color: #bfbaaa;
}

ul.mst {
	border: 2px solid #84a4bd;	
}

li.mst-fst {
	margin-top: 10px;
}

li.mst-lst {
	margin-bottom: 10px;
} 

.mst a:hover li, .mst a:focus li, .current-mst {
	background-image: url("../img/mst_over.png");
	background-size: 100% 100%;
	background-position: 50% 0;
}


/* Main Section */

div.hlt {
	float: right;
	max-width: 320px;
	margin: 40px;
}

div.hlt-txt {
	padding: 20px;
	border: 1px solid #595450;
	background: #8C8B87 url("../img/bg_hlt.jpg") repeat top right;
	box-shadow: inset 0px 0px 20px 0px rgba(52,53,54,0.35);
}

div.cpt {
	float: right;
	position: relative;
	max-width: 480px;
	right: -60px;
	padding: 20px;
	margin: 40px 40px 40px -20px;
	background: #595450 url("../img/bg_cpt.jpg") repeat top right;
	box-shadow: 0px 0px 10px 0px rgba(52,53,54,0.50);
}

div.hlt-img {
	font-size: .875em;
	font-style: normal;
	text-decoration: none;
	letter-spacing: 1px;
	text-align: center;
	line-height: 0;
	color: #fff;
}


/* Text Styles */

b, strong {
	font-weight: bold;
}

i, em {
	font-style: italic;
}

h2.mst {
	font-family: 'Rock Salt', 'Gill Sans', Lato, sans-serif;
	font-size: 1.25em;
	letter-spacing: 0px;
	line-height: 20px;
	margin-top: 3px;
	
}

h3.mst {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 16px;
}

h2.mst, h3.mst {
	padding: .625em 0px .625em 0px;
	font-style: normal;
	font-weight: 100;
	color: #fff;
}

h1.ttl {
	font-family: 'Rock Salt', 'Gill Sans', Lato, sans-serif;
	font-size: 28px;
	line-height: 1.625em;
	padding: 40px 200px 30px 200px;
	color: rgba(52,53,54,.5);
}

h2.mn {
	font-size: 32px;
	line-height: 1.25em;
	padding: 40px 40px 16px 0;
	max-width: 640px;
	color: #ae4633;
}

h3.mn {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25em;
	padding: 24px 40px 16px 0;
	max-width: 640px;
	color: #ae4633;
}

p.mn {
	font-family: 'Sorts Mill Goudy', Quattrocento, Cardo, serif;
	font-size: 16px;
	line-height: 1.5em;
	padding: 0 40px 16px 0;
	max-width: 640px;
	color: #595450;
}

h4.hlt {
	padding: 0 0 .875em 0;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0px;
	color: #ffffff;
	line-height: 1.125em;
}

p.hlt, p.hlt a {
	font-family: 'Sorts Mill Goudy', Quattrocento, Cardo, serif;
	padding: 0 0 14px 0;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	color: #ffffff;
	line-height: 1.375em;
	text-decoration: none;
}

p.hlt a {
	text-decoration: underline;
}

p.hlt a:hover, p.hlt a:active, p.hlt a:visited {
	color: #eeebe2;
}

.copyright, .copyright a, .ftrlnk, .ftrlnk a  {
	font-family: 'Gill Sans', Lato, sans-serif;
	font-weight: 100;
	font-size: 14px;
	line-height: 22px;
	padding-bottom: 0;
	color: #ffffff;
}

.copyright a:hover, .ftrlnk a:hover {
	color: #eeebe2;
}

.ftrlnk {
	padding-top: 1.25em;
}


/* Image Styles */

img {
	max-width: 100%;
}

img.mst-ln {
	margin-top: -10px;
}

img.pg {
	min-width: 280px;
	color: #343536;
	z-index: 0;
}

img.ln-ttl {
	height: 2px;
	opacity: .5;
}

img.ohs {
	position: absolute;
	right: 30px;
	bottom: 30px;
	width: 20px;
	height: 20px;
}


/* Responsive Design for Smaller Screen Widths */


@media (max-width: 960px) {

	section {
		padding: 0 0 0 160px;
	}
	
	.mast {
		width: 160px;
	}
	
	h2.mst {
		font-size: 1.125em;
		line-height: 18px;		
	}
	
	h3.mst {
		font-size: .875em;
		line-height: 14px;
	}

}

@media (max-width: 800px) {
	
	div.hlt {
		float: none;
		margin: 40px auto;
	}
	
}

@media (max-width: 640px) {

	main {
		box-shadow: inset 0px 0px 50px 0px rgba(52,53,54,0.65);
		padding-bottom: 6.25%;
	}

	section {
		padding: 0 6.25%;
	}

	.mast {
		position: static;
		width: 100%;
	}
	
	img.logot, img.mst {
		display: none;
	}
	
	img.mst-ln {
		width: 100%;
		height: 1px;
	}
	
	h2.mst {
		font-size: 1.25em;
		line-height: 20px;		
	}
	
	h3.mst {
		font-size: 1em;
		line-height: 16px;
	}
	
	h1.ttl {
		padding: 30px 6.25% 20px 6.25%;
	}
	
	h2.mn, h3.mn, p.mn {
		padding-right: 0;
	}
	
	div.hlt {
		margin: 20px auto;
	}
		
}


@media (max-width: 480px) {
	
	h2.mst {
		font-size: 1em;
		line-height: 16px;		
	}
	
	h3.mst {
		font-size: .875em;
		line-height: 14px;
	}
	
	h1.ttl {
		font-size: 24px;
		line-height: 1.375em;
	}
	
	h2.mn {
		font-size: 26px;
		line-height: 1.125em;
	}
	
	h3.mn {
		font-size: 18px;
		line-height: 1.125em;
	}
	
	p.mn {
		font-size: 14px;
		line-height: 1.5em;
	}
	
	h4.hlt {
		font-size: 16px;
		line-height: 1em;
	}
	
	p.hlt, p.hlt a {
		font-size: 12px;
		line-height: 1.375em;
	}

	.copyright, .copyright a, .ftrlnk, .ftrlnk a  {
		font-size: 12px;
		line-height: 1.375em;
		padding-bottom: 0;
		color: #ffffff;
	}
	
}