/*
Dartmouth Digital Orozco Help Page v.1
Gato Gordo Digital Creative
Drafted 4.2014
*/


/* general */

html {
	width: 100%;
	overflow-x: hidden;
}
body {
	background: #662219 url('background.jpg') no-repeat center 0 fixed;
	font-family: 'Roboto', helvetica, arial, sans-serif;
	font-size: 95%;
	font-weight: 400;
	width: 100%;
	text-align: justify;
	color: #333;
}
#content-container {
	width: 700px;
	margin: 70px auto 50px auto;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.8); 
}
#content {
	background: rgba(255, 255, 255, 0.5);
	padding: 30px; 
}

/* text styles */

h1, h2, h3 {
	font-family: 'Lusitana', times, serif;
	margin: 0 0 2px 0;
	color: #746e5a;
}
h1 {
	font-size: 20px;
}
h2 {
	font-size: 17px;
}
a {
	text-decoration: none;
	color: #1f9da0;
}
a:hover {
	color: #0b6567;
}
i {
	color: #746e5a;
}
i:hover, a:hover i {
	color: #454135;
}

/* header */

#help-banner img {
	margin: 0 auto;
	padding: 33px 0 31px 0;
	display: block;
}

/* nav */

#help-topics {
	margin-bottom: 80px; 
	width: 40%; 
	float: left;
	text-align: left;
}
ul {
	margin: 0;
	padding: 15px 12px; 
	margin-left: 0;
	background: rgba(116, 110, 90, 0.15);
	border-radius: 8px;
}
li { 
	list-style-type: none; 
	margin: 16px 0;
	font-size: 95%;
}
li:first-child {
	margin-top: 0;
}
li:last-child {
	margin-bottom: 0;
}
li i {
	color: #666;
}

/* overview */

#overview {
	float: right;
	width: 55%;
	font-size: 90%; 
}

/* topics */

#help-answers {
	width: 90%;
	margin: 0 5%;
	clear: both;
}
.help-answer {
	border-top: 1px solid #d6d3ca;
	padding-top: 25px;
	margin-top: 13px; 
	clear: both;
	overflow: hidden;
}
.help-answer:last-child {
	padding-bottom: 32px;
}
.help-answer p {
	margin: 0 0 15px 0;
	line-height: 25px;
}

/* icons */

#icon-arrow, #icon-i, #icon-overlay, #icon-scale, 
#icon-x, #icon-arrow-up, #icon-arrow-down,
#icon-plus, #icon-minus, #icon-nav {
	position: relative;
	vertical-align: text-top;
}
#icon-arrow, #icon-i, #icon-overlay {
	height: 25px;
	top: -2px;
}
#icon-scale {
	height: 25px;
	top: -1px;
}
#icon-arrow-up, #icon-arrow-down {
	height: 14px;
	top: 4px; 
}
#icon-x {
	top: 4px;
}

/* footer */

footer {
	text-align: center;
	padding: 15px;
}

/* small screen responsiveness */

@media screen and (max-width: 700px) {
	#content-container {
		width: 90%;
		margin: 0 2% 50px 2%;
	}
	#help-banner {
		width: 96%;
		margin: 50px 2% 0 2%;
	}
	#help-topics, #overview, #help-answers {
		width: 100%;
	}
}