/* ------------------------------------------------------*\
CONTENTS
1. CSS Reset
2. Defaults
3. Body and Wrapper
4. Top Bar
5. Masthead
6. Main Navigation
7. Banner
8. Boxouts
9. Footer
10. Site Info
11. Main Content
12. Media Queries
\*------------------------------------------------------ */

/* ------------------------------------------------------*\
1. CSS RESET
Source: http://maxdesign.com.au/articles/css-reset/
Includes alterations
\*------------------------------------------------------ */

html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p 
{
	margin: 0;
	padding: 0;
}

fieldset,img { border: 0; }

legend { color: #000; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

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

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

/* Added to make <main> work in IE */
main {
    display: block
}


/* ------------------------------------------------------*\
2. DEFAULTS
\*------------------------------------------------------ */

body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
}

p, ul, ol {
	margin-bottom: 10px;
	line-height: 1.4;
	font-size: 1.2em;
}

h1 {
	font-size: 2em;
	margin-bottom: 10px;
}

h2 {
	font-size: 1.8em;
	margin-bottom: 10px;
}

h3 {
	font-size: 1.6em;
	margin-bottom: 10px;
}

h4 {
	font-size: 1.4em;
	margin-bottom: 10px;
}

h5 {
	font-size: 1.2em;
	margin-bottom: 10px;
}

h6 {
	font-size: 1em;
	margin-bottom: 10px;
}

a {
	color: #800000;
}

a:hover {
	text-decoration: none;
}

.alignright {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}

.alignleft {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

/* Making Images Responsive */

img,
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
#sidebar img,
.wp-caption {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}

img.aligncenter,
.wp-caption.aligncenter {
	display: block;
	margin: 0 auto 10px;
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------*\
3. BODY AND WRAPPER
\*------------------------------------------------------ */

#wrapper, .innerwrapper {
	max-width: 940px;
	margin: 0 auto;
}



/* ------------------------------------------------------*\
4. TOP BAR
\*------------------------------------------------------ */

#topbar {
	background: #e6e6e6;
	padding: 10px;
	font-size: 0.8em;
	overflow: hidden;
	font-weight: bold;
}

#topcontacts {
	float: left;
}

#topsocial {
	float: right;
}

/* ------------------------------------------------------*\
5. MASTHEAD
\*------------------------------------------------------ */

header#masthead {
	padding: 20px 10px 0 10px;
	overflow: hidden;
	color: #800000;
	text-align: center;
}


#masthead .cta {
	float: right;
	font-size: 1.1em;
	text-align: center;
	border: 1px solid #333;
	padding: 10px;
}

/* ------------------------------------------------------*\
6. MAIN NAVIGATION
\*------------------------------------------------------ */





/* ------------------------------------------------------*\
7. BANNER
\*------------------------------------------------------ */

#banner {
	padding: 0 10px;
}

/* ------------------------------------------------------*\
8. BOXOUTS
\*------------------------------------------------------ */

aside.boxouts {
	overflow: hidden;
	margin-bottom: 20px;
	padding-top: 15px;
	font-size: 1.2em;
}

.boxout {
	width: 50%;
	float: left;
	list-style: none;
	box-sizing: border-box;
	padding: 10px;
}

.boxoutinner {
	display: block;
	border: 1px solid #ccc;
	min-height: 275px;
}

.boxout h2 {
	font-size: 1em;
	margin-bottom: 0;
	background: #e6e6e6;
	padding: 5px;
}

.boxout p {
	font-size: 0.9em;
	padding: 0 10px;
}

.boxout p.boxoutlink {
	text-align: center;
}

.boxout p.testimonialcredit {
	font-style: italic;
	padding: 0 20px;
}

.boxout blockquote {
	padding: 20px;
	margin: 0;	
}

.boxout ul {
	font-size: 0.9em;
	margin-top: 5px;
	margin-left: 25px;
	list-style: disc;
	padding: 0 5px;
}

.boxout ul li {
	line-height: 1.8;
}


/* ------------------------------------------------------*\
9. FOOTER
\*------------------------------------------------------ */

footer {
	overflow: hidden;
	margin-bottom: 5px;
	background: #575757;
	color: #fff;
}

.footersection {
	width: 33.3333333%;
	float: left;
	box-sizing: border-box;
	padding: 10px;
}

footer h2 {
	font-size: 1em;
}

footer p {
	font-size: 0.9em;
}

footer ul {
	font-size: 0.9em;
	margin-top: 5px;
	list-style: none;
	border-top: 1px solid #ccc;
}

footer a {
	color: #fff;
}

footer ul a {
	text-decoration: none;
	display: block;
	border-bottom: 1px solid #ccc;
	padding: 5px 0;
}

footer ul a:hover {
	text-decoration: underline;
}

footer input[type="text"] {
	padding: 7px;
	width: 100%;
	box-sizing: border-box;
	font-size: 0.9em;
	padding: 5px;
}
	
footer input[type="submit"] {
	width: 100%;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 0.9em;
	font-weight: bold;
	padding: 5px;
	-webkit-appearance: none;
	cursor:pointer;
	background: #A04040;
	border: 1px solid #800000;
	border-radius: 10px;
	box-shadow: 0 0 4px rgba(0,0,0, .75);
	color:#f3f3f3;
}	

footer input[type="submit"]:hover {
	background-color: #883636;
	box-shadow: 0 0 1px rgba(0,0,0, .75);
}

/* ------------------------------------------------------*\
10. SITE INFO
\*------------------------------------------------------ */

#siteinfo {
	max-width: 940px;
	margin: 0 auto 10px auto;
	font-size: 0.8em;
	overflow: hidden;
}

#copyright {
	float: left;
	padding: 0 5px;
}

#credit {
	float: right;
	padding: 0 5px;
}

/* ------------------------------------------------------*\
11. MAIN CONTENT
\*------------------------------------------------------ */

main#content {
	padding: 10px 0;
	overflow: hidden;
}

/* ------------------------------------------------------*\
12. MEDIA QUERIES
\*------------------------------------------------------ */

/* TABLET = 501px - 800px */

@media only screen
and (min-width : 501px ) and (max-width : 800px) {
	
	/* Tablet 2. Defaults */
	
	/* Tablet 3. Body and Wrapper */
	
	/* Tablet 4. Top Bar */

	/* Tablet 5. Masthead */
	
	header#masthead {
		padding: 20px 10px;
	}

	/* Tablet 6. Main Navigation */

	/* Tablet 7. Banner */

	/* Tablet 8. Boxouts */

	/* Tablet 9. Footer */
	
	footer input[type="text"] {
		padding: 7px;
		width: 100%;
		box-sizing: border-box;
	}
	
	footer input[type="submit"] {
		width: 100%;
		box-sizing: border-box;
	}

	/* Tablet 10. Site Info */

	/* Tablet 11. Main Content */
	
	main#content {
		padding: 10px;
	}
	
}

/* INBETWEEN - UNFLOATING IMAGES AND UNFLOATING BOXOUTS */

@media only screen
and (min-width : 501px ) and (max-width : 650px) {
	
	/* Images */
	
	.alignright, .alignleft {
		float: none;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 20px;
		display: block;
		margin: 0 auto 10px;
		max-width: 100%;
		height: auto;
	}
	
	/* Boxouts */
	
	.boxout {
		width: 100%;
		float: none;
		list-style: none;
		box-sizing: border-box;
		padding: 10px;
	}
	
	.boxoutinner {
		display: block;
		border: 1px solid #ccc;
		min-height: 0;
		max-width: 295px;
		margin: 0 auto;
	}
	
	.boxout p, .boxout ul {
		font-size: 1em;
	}
	
	/* Footer */
	
	footer {
		text-align: center;
	}
	
	.footersection {
		width: 100%;
		float: none;
		box-sizing: border-box;
		padding: 10px;
	}
	
	footer p {
		font-size: 1em;
	}
	
	footer ul {
		font-size: 1em;
	}
	
	footer ul a {
		padding: 15px 0;
	}
	
	footer input[type="text"] {
		padding: 7px;
		width: 100%;
		box-sizing: border-box;
	}
	
	footer input[type="submit"] {
		width: 100%;
		box-sizing: border-box;
	}
	
	
}
	
/* INBETWEEN - FLIPPING THE MENU */	

@media only screen
and (min-width : 501px ) and (max-width : 750px) {
	
	/* Navigation */
	
	nav#mainnav {
		text-align: center;
	}
	
	nav#mainnav ul{
		margin-bottom: 0;
	}
	
	nav#mainnav > ul > li {
		float: none;
	}
	
	nav#mainnav ul li a {
		border-bottom: 1px solid #ccc;
		padding: 15px 10px;
		width: 100%;
		box-sizing: border-box;
	}
	
	nav#mainnav > ul > li:last-child  a {
		border: none;
	}
	
	nav#mainnav ul li:hover > ul {
		display: none;
	}
	
	
	
	
	
}

/* INBETWEEN - ALIGNING HEADER */

@media only screen
and (min-width : 501px ) and (max-width : 600px) {
	
	header#masthead {
		text-align: center;
		padding: 10px;
	}
	
	#logo, #masthead .cta {
		float: none;
	}
	
}
	

/* PHONE = 0px - 500px */

@media only screen
and (min-width : 0px ) and (max-width : 500px) {
	
	/* Phone 2. Defaults */
	
	.alignright, .alignleft {
		float: none;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 20px;
		display: block;
		margin: 0 auto 10px;
		max-width: 100%;
		height: auto;
	}
	
	/* Phone 3. Body and Wrapper */
	
	/* Phone 4. Top Bar */
	
	#topbar {
		text-align: center;
	}
	
	#topcontacts, #topsocial {
		float: none;
		margin-bottom: 5px;
	}

	/* Phone 5. Masthead */
	
	header#masthead {
		text-align: center;
		padding: 10px;
	}
	
	#logo, #masthead .cta {
		float: none;
	}

	/* Phone 6. Main Navigation */
	
	nav#mainnav {
		text-align: center;
	}
	
	nav#mainnav ul{
		margin-bottom: 0;
	}
	
	nav#mainnav > ul > li {
		float: none;
	}
	
	nav#mainnav ul li a {
		border-bottom: 1px solid #ccc;
		padding: 15px 10px;
		width: 100%;
		box-sizing: border-box;
	}
	
	nav#mainnav > ul > li:last-child  a {
		border: none;
	}
	
	nav#mainnav ul li:hover > ul {
		display: none;
	}
	
	/* Phone 7. Banner */

	/* Phone 8. Boxouts */
	
	.boxout {
		width: 100%;
		float: none;
		list-style: none;
		box-sizing: border-box;
		padding: 10px;
	}
	
	.boxoutinner {
		display: block;
		border: 1px solid #ccc;
		min-height: 0;
		max-width: 295px;
		margin: 0 auto;
	}
	
		
	.boxout p, .boxout ul {
		font-size: 1em;
	}

	/* Phone 9. Footer */
	
	footer {
		text-align: center;
	}
	
	.footersection {
		width: 100%;
		float: none;
		box-sizing: border-box;
		padding: 10px;
	}
	
	footer p {
		font-size: 1em;
	}
	
	footer ul {
		font-size: 1em;
	}
	
	footer ul a {
		padding: 15px 0;
	}

	/* Phone 10. Site Info */
	
	#siteinfo {
		text-align: center;
	}
	
	#copyright, #credit {
	float: none;
	}

	/* Phone 11. Main Content */
	
	main#content {
		padding: 10px;
	}

}