/* ================================================================
** STYLE SHEET FOR LPF STATIC WEBSITE
**
** COLOURS:
**
** 	#8B0000;		dark red for links
**	#333;			off black for body text
**	#e25401;  		brick red for link hover
**	#f9f7ed;		pink grey for header and sidebar background
**
================================================================ */

/* ================================================================
** Set max width of body to 750em so it doesn't keep streatching
** indefinately.
** Top and bottom margins 0, left and right to centre display
================================================================ */

body {
	font-family: Georgia, "Times New Roman", Times, serif;
  	font-size: 16px;
	color: #333;
	max-width: 720em;
	margin: 0 auto;
	max-width: 1080px;
	padding-left: 0.5em;
	padding-right: 0.5em;
	background-color: #fff;
}

/* ================================================================
** Basic page entities (links, headings)
** ============================================================= */

a {
	color: #8B0000;
	text-decoration: none;
	outline: 0;
}

a:hover, #content a:hover {
	color: #e25401;
	transtion: color ease 0.5s;
}

a:link, a:visited {
	color: #8B0000;
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	font-weight: normal;
	color: #000;
}

/* banner */

h1 {
	font-size: 2.5em;
}

/* page headings */

h2 {
	font-size: 2em;
	margin: 0.5em 0 0.5em 0;
}

/* sub-headings */

h3 {
	font-size: 1.4em;
}

/* small sub-headings */

h4 {
	font-size: 1.2em;
}

/* for sub-sections in lists with a tergets <a name= */

h4 a, h4 a:hover, #content h4 a:hover {
	color: #000;
}

h3 a {
	color: #000;	
}

h3 a:hover {
	color: #e25401;
	transtion: color ease 0.5s;
}

li a:hover {
	color: #e25401;
	transtion: color ease 0.5s;
}

/* ================================================================
** Header section for logo and banner
** ============================================================= */

#header {
	padding: 0.5em 0 0 0;
	margin: 0 0 0.5em 0;
	width: 100%;
	height: 7em;
	background-color: #f9f7ed;
	border-top: solid 10px #000;
}

#header img {
	height: 10em;
	float: left;
	margin-right: 1em;
	border: solid 1px #000;
}

#header h1 { 
	margin: 0.2em 0 0.4em 0;
}

/* ================================================================
** Footer section
** ============================================================= */

#footer {
	clear: both;
	border-top: solid 1px #ccc;
	padding: 0.5em;
	width: 95%;
}

#footer-content {
	text-align: center;
}

#footer-content a {
	font-family: "Verdana", Arial, Helvetica, sans-serif;
	border-right: solid 1px #000;
	padding: 0 0.5em 0 0.2em;
	color: #808080;
}

#footer-content a:hover {
	color: #b22222;
}

#footer-content a:last-child {
	border: none;
}

/* ================================================================
** Main content wrapper
** Defaults to 92% wide for phones(not 100% cos of borders)
** For larger devices set to 65% and floats left
** ============================================================= */

#content {
	padding: 0 1em 1em 1em;
	margin-bottom: 1em;
	float: none;
	width: 92%;
	background-color: #fff;
	border: solid 1px #ccc;	
}

/* ================================================================
** Sidebar for short speel about the LPF
** Defaults to 100% wide for phones
** For larger devices set to 30% and floats right
** ============================================================= */

#sidebar {
	width: 100%;
	float: none;
	border: none;
	padding: 0 0 1em 0;
	margin: 0;
}

#sidebar iframe {
	background-color: #f9f7ed;
	height: 38em;
}

#sidebar-content {
	background-color: #f9f7ed;
	padding: 0 1em 1em 1em;
	border: solid 1px #ccc;
}

#sidebar-content h3 {
	color: #8B0000;
}

.sidebar-image {
	width: 10em;
	margin-right: 1em;
}

.sidebar-links {
	width: 100%;
}

#sidebar-content a:hover {
	color: #e25401;
	transtion: color ease 0.5s;
	text-decoration: underline;
}

/* ================================================================
** Main menu section - Home, Articles, Documents
** ============================================================= */

#main-menu {
	text-align: right;
	background-color: #fff;
	padding: 0.2em 0 0.2em 0;
	border-bottom: solid 1px #ccc;
	margin-bottom: 2em;
	white-space: nowrap;
	overflow: hidden;
}

#main-menu a {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 0.2em 0.5em 0.2em 0.5em;
	color: #fff;
	background-color: #000;
	font-weight: bold;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	
	text-decoration: none;

	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 3px #fff;
}

#main-menu .active-tab {
	color: #000;
	background-color: #fff;
}

#main-menu a:hover {
	color: #000;
	background-color: #fff;
	transition: background-color ease 0.5s;
}

/* ================================================================
** Styling for iframes in sidebar and footer
** ============================================================= */

iframe {
	border: none;
	width: 100%;
}

/* ================================================================
** Responsive Styling
**
** Adjusts content and sidbar width based on divice size
** h2:after used to display divice size during debugging
================================================================ */


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
	h2:after {
		content: "1. Extra small devices (phones, 600px and down)";
	}
	h1 {
		font-size: 2.2em;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
	h2:after {
		content: "2. Small devices (portrait tablets and large phones, 600px and up)";
	}
	h1 {
		font-size: 3em;
	}

}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
	h2:after {
		content: "3. Medium devices (landscape tablets, 768px and up)";
	}
	#content {
		width: 65%;
		float: left;
	}
	#sidebar {
		width: 30%;
		float: right;
	}
	h1 {
		font-size: 3.8em;
	}
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
	h2:after {
		content: "4. Large devices (laptops/desktops, 992px and up)";
	}
	#content {
		width: 65%;
		float: left;
	}
	#sidebar {
		width: 30%;
		float: right;
	}
	h1 {
		font-size: 4.5em;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
	h2:after {
		content: "5. Extra large devices (large laptops and desktops, 1200px and up)";
	}
	#content {
		width: 65%;
		float: left;
	}
	#sidebar {
		width: 30%;
		float: right;
	}
	h1 {
		font-size: 4.5em;
	}
}

h2:after {
	content: "";
}

/* END STYLE SHEET FOR LPF STATIC WEBSITE */