/* global styles */

/* modifications to elusive-webfont.less */
a [class^="el-"],
a [class*=" el-"] {
	text-decoration: none;
	padding-right: 0.25em;
}
button [class^="el-"],
button [class*=" el-"] {
	text-decoration: none;
	padding-right: 0.35em;
}

/* generic classes */
.clearfix::after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.hidden {
	display: none;
}
.left {
	float: left;
}
.right {
	float: right;
}
.hint {
	color: #ccc;
}
.paddingTop {
	padding-top: .5em;
}

html, body {
	/* height: 100%; hack to extend the height of short pages to avoid background issues */
}
body {
	margin: 0;
	font-family: 'Open Sans', sans-serif; font-size: 16px;
	color: #333;
}


/* textured backgrounds */
body, /* remove when enabling a UIWebView theme */
#globalWrapper,
body.navIsOpen,
#mobileLoadingIndicator {
	background-size: 100px 100px; /* common */
	background-attachment: fixed; /* common */
}
body, /* remove when enabling a UIWebView theme */
#globalWrapper {
	background-color: #eee;
	background-image: url(/images/lightBackground.png);
}
body.navIsOpen,
#mobileLoadingIndicator {
	background-color: #333;
	/*background-image: url(/images/darkBackground.png);*/
}
/*
@media only screen and (min-device-pixel-ratio: 1.5) {
	body,
	.wrapper {  //////body may not be needed in this selector
		background-image: url(/images/lightBackground@2x.png);
	}
	body.navIsOpen,
	#mobileLoadingIndicator {
		background-image: url(/images/darkBackground@2x.png);
	}
} */

/* header */
#hero {
	background-image: url(/images/hero/hero3-1440.jpg);
	background-position: center;
	background-size: cover;
	position: relative;
	min-width: 996px;
	height: 400px;
	content: ".";
}
@media (min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio : 1.5), (min--moz-device-pixel-ratio: 1.5), (min-width: 1600px) {
	#hero {
		background-image: url(/images/hero/hero3-2880.jpg);
	}
}
.logo,
#desktopNavigationBar nav,
.wrapper {
	margin: 0 auto;
	max-width: 980px;
}
.wrapper {
	min-width: 980px; /* remove to enable responsivness */
	padding: 0 8px;
	/* min-height: 100%; hack to extend the height of short pages to avoid background issues */
}
#nf {
	margin-top: 1.5em;
	margin-left: .75em;
}
#uiWebViewNavToggle {
	display: none;
}
#mobileLoadingIndicator {
	display: none;
	position: fixed;
	color: #ccc;
	width: 100%;
	padding: .5em;
}
#desktopNavigationBar {
	position: absolute;
	bottom: 0;
	height: 2.5em;
	width: 100%;
	background-color: rgba(68, 129, 202, 0.7);
}
#desktopNavigationBar nav {
	line-height: 2.5em;
	padding-left: 1.45em;
}
#desktopNavigationBar nav a {
	color: #ffffff;
	margin-right: 3em;
}

/* footer */
.mainFooter {
	padding-bottom: 30px;
	text-align: center;
}
	
/* anchors */
a {
	color: #4481ca;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* generic content container */
.box {
	padding: .5em;
	border: 1px solid #ccc;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	line-height: 1.5em;
	margin-bottom: .5em;
	word-wrap: break-word;
}
.box article {

}
.box footer {
	font-size: 0.8em;
	border-top: 1px solid #ccc;
	padding: 13px 5px 5px 0;
	margin-top: .5em;
}
.box.image {
	line-height: 0;
}
.box.sidebar {
	margin-top: 0;
	margin-bottom: 0.5em;
}
.invisibleBox {
	margin-bottom: .5em;
	padding: .5em;
}

/* common header styles */
h2, h3, h4 { 
	font-weight: 300;
	margin-top: 0;
	margin-bottom: .2em;
	line-height: 1.2em;
}
h2 a, h3 a, h4 a {
	color: inherit;
}
h2 a:hover, h3 a:hover, h4 a:hover {
	color: #4481ca;
	text-decoration: none;
}
h2 {
	font-size: 2.5em;
}
h2:not(:first-of-type) {
	margin-top: 0.5em;
}
h3 {
	font-size: 1.5em;
}
h3:not(:first-of-type) {
	margin-top: 2em;
}
h4 {
	font-size: 1.25em;
}

/* common list styles */
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}


#mobileNavigationPane,
#mobileNavigationToggle {
	display: none;
}

/* responsiveness 
@media only screen and (max-width: 767px) {

	.box {
		font-size: 0.8em;
	}

	#desktopNavigationBar {
		display: none;
	}
	#mobileNavigationToggle {
		display: inline;
		float: right;
		font-size: 50px;
		color: #ffffff;
		cursor: pointer;
		padding: 20px;
	}
	#mobileNavigationPane {
		display: none;
	}
	#mobileNavigationPane ul {
		font-size: 150%;
	}
	#mobileNavigationPane li {
		color: #ccc;
	}
	#mobileNavigationPane li a {
		display: block;
		padding: .5em;
		text-decoration: none;
		color: #ffffff;
	}
	#mobileNavigationPane li .avatar {
		width: 64px;
		height: 64px;
		border: 1px solid #ccc;
		margin: .5em;
		float: left;
	}
	#mobileNavigationPane li .profileInfo {
		margin: .5em;
		float: left;
	}
	#mobileNavigationPane li:not(:last-child) {
		border-bottom: 1px dashed rgba(204, 204, 204, 0.25);
	}

}*/