@charset "utf-8";

@import url("reset.css");

/*
===============================================================================
SET CHARACTERSET AND RESET ALL STYLING

Now that we have leveled the playing field flattening out all styles, we will
begin style and positioning.
===============================================================================
*/


/*
===============================================================================
COLOR PALLETE FOR SITE:

#012595 or rgb(1, 37, 149):		Action Racket Blue
#be06a4 or rgb(190, 6, 164): 	Action Racket Magenta
#11a420 or rgb(17, 164, 32):	Action Racket Green

Nav Button Backgrounds:

rgba(1, 37, 149, 0.25):			Link State AR Blue 25%
rgba (1, 37, 149, 0.25):		Link Visited AR Blue 25%
#be06a4:						Hover State AR Magenta
#11a420:						Active State AR Green

===============================================================================
*/


/*
===============================================================================
Headers and Captions Typeface Usage:

<h1>: "Open Sans:700" and/or "Open Sans:700italic"

<h2>: "Open Sans:600" and/or "Open Sans:600italic"

<figcaption>:

"Open Sans:300" and/or "Open Sans:300italic"
===============================================================================
*/

/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,700italic,600,300,300italic,600italic);*/
@import url(http://fonts.googleapis.com/css?family=Averia+Libre:700,700italic,300,400);
/*
===============================================================================
Body Copy Typeface Usage:

<p>: "Merriweather:400"

<em>: "Merriweather:400italic"

<strong>: "Merriweather:700"

===============================================================================
*/

@import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic);

/*
===============================================================================
TYPOGRAPHY
===============================================================================
*/

p {
	font-family: 'Merriweather', 'Times New Roman', serif;
	font-weight: 400;
	font-size: 15.5px;
	line-height: 23.5px;
	word-spacing: 0.25em;
	margin-bottom: 16px;
}

footer p {
	font-family: 'Merriweather', 'Times New Roman', serif;
	font-weight: 300;
	font-size: 13px;
	text-align: center;
}

h1, h2, h3,
h4, h5, h6	{
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
}

h1, h2, h3 {
	margin-top: 18px;
	margin-bottom: 9px;
	font-weight: 700;
}

h1 {
	font-size: 37px;
	font-weight: 700;
	color: #012595;										/* Action Racket Blue */
}

.pageHead {
	display: inline-block;
	/*border: groove 2px #c0c0c0;*/						/* Styling for <h1> Page Header */
	/*background-color: rgba(17, 164, 32, 0.50);*/
	padding: 5px;
}

h2, h3 {
	font-weight: 400;
	color: rgba(1, 37, 149, 0.65);						/* Action Racket Blue 35% */
}

h2 {
	font-size: 26px;
}

h3 {
	font-size: 20px;
}

em {
	font-style: italic;
}

figcaption {
	font-family: 'Merriweather', 'Times New Roman', serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 23px;
	word-spacing: 0.2em;
	margin-top: 3px;
	width: 95%;
}

strong,
figcaption strong {
	font-weight: 700;
	/*color: rgba(17, 164, 32, 0.65);*/						/* Action Racket Green 65% */
}

#events strong {
	font-weight: 600;
}

figure.right,
figure.left		{
	padding: 12px;
}

figure.right {
	float: right;
}

figure.left {
	float: left;
}

figure.overlap {
	position: relative;
	z-index: 1;
}

figure.underlap {
	position: relative;
	z-index: -1;
}

img,
video {
	max-width: 100%;									/* Assures fluid media adjusting to mobile platforms. */
}

object {
	pointer-events: none;
	display: block;
}

figcaption span.capTitle {
	font-weight: 700;
	font-style: italic;
}

.twoColRowInset {
	margin-left: 5%;
}

.threeColRowInset {
	margin-left: 19%;
}

#mission,
#events {
	/*border: ridge 5px #c0c0c0;*/
	background-color: rgba(192, 192, 192, 0.18);			/* Silver 18% */
}

#mission {
	margin-left: 10%;
}

a:link,
a:visited {
	color: #012595;										/* Action Racket Blue */
	font-weight: 700;
	text-decoration: none;
}

a:hover,
a:active {
	text-decoration: underline;
}

a:hover {
	color: #be06a4;										/* Action Racket Magenta */
}

a:active {
	color: #11a420;										/* Action Racket Green */
}


/*
===============================================================================
OVERALL DESIGN APPROACH:

This site will adhere to the mobile first philosophy now prevalent on the web.
With that in mind, following are declarations and media queries that will
drive the styles of the site regardless of device viewport size.

===============================================================================
*/


* {
    
	/* Make sure that border and padding are included in width
	   and height of box. */
	
	box-sizing: border-box;
}


/*
===============================================================================
PERSISTENT NAVIGATION STYLING
===============================================================================
*/

nav ul {
	list-style-type: none;
	margin-left: 45%;
	padding-top: 10%;
	padding-bottom: 0;
}

nav ul li {
	display: inline-block;
	border: groove 2px #c0c0c0;							/* Silver */
	padding-bottom: 0;
}

nav ul li a {
	text-decoration: none;
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 300;
	font-size: 16px;
}

nav ul li a:link,
nav ul li a:visited {
	color: #ffffff;
}

nav ul li a:hover,
nav ul li a:active {
	font-weight: 700;
	text-decoration: none;
}

nav li {
	width: 115px;
	height: 35px;
	padding-top: 10px;
	text-align: center;
	background-color: rgba(128, 128, 128, 0.48);		/* Gray 48% */
}

nav ul li.activeGroup {
	background-color: #11a420;							/* Highlights nav of active page group. */
}

nav ul li.activeGroup a {
	font-weight: 700;
}

nav li:hover {
	background-color: #be06a4;							/* Action Racket Magenta */
}

nav li:active {
	background-color: #11a420;							/* Action Racket Green */
}


/*
===============================================================================
ARTICLE STYLING
===============================================================================
*/

article {
	/*background-color: #ffffff;*/
	/*border-top: double 2px #c0c0c0;*/						/* Silver border */
	/*border-bottom: double 2px #c0c0c0;*/					/* Silver border */
	padding: 6px 12px;
}

article#whatWeDo {
	margin-left: 4%;
}

.title {
	font-weight: 700;
	font-style: italic;
}


/*
===============================================================================
CONTACT US FORM STYLING
===============================================================================
*/

.contactUs {
	border: 2px groove #c0c0c0;
}

.contactUs p.instructions {
	font-weight: 700;
	width: 95%;
	margin-bottom: 1.5em;
}

.contactUs input[type="text"],
.contactUs input[type="email"]	{
	height: 2em;
	padding: 5%;
	display: inline-block;
	margin-bottom: 1.5em;
	border: groove 2px #c0c0c0;
	-webkit-border-radius: 15px;						/* Make cross-browser compatible in future revisions */
	background-color: rgba(17, 164, 32, 0.05)			/* Action Racket Green 5% */
}

.contactUs label {
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 400;
	color: rgba(17, 164, 32, 0.85);						/* Action Racket Green 85% */
}

.contactUs textarea {
	margin-left: 4%;
	border: groove 3px #c0c0c0;
	overflow: scroll;
	background-color: rgba(17, 164, 32, 0.05);			/* Action Racket Green 5% */
}

.contactUs input[type="submit"] {
	display: block;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 4.25%;
	font-family: 'Averia Libre', 'Trebuchet MS', cursive;
	font-weight: 600;
	height: 100px;
}

.contactUs .phoneInfo {
	margin-left: 5%;
}


/*
===============================================================================
RESPONSIVE GRID FRAMEWORK:

(Based on W3 Schools Tutorial)
http://www.w3schools.com/css/css_rwd_grid.asp

Industry-Standard 12-column grid based on this formula:

100% width / 12 = 8.33%

Define spans from 1-column to 12-column width.

===============================================================================
*/

@media screen and (min-width: 768px) {

	.oneColumn {
		width: 8.33%;
	}

	.twoColumn {
		width: 16.66%;
	}

	.threeColumn {
		width: 25%;
	}

	.fourColumn {
		width: 33.33%;
	}

	.fiveColumn {
		width: 41.66%;
	}

	.sixColumn {
		width: 50%;
	}

	.sevenColumn {
		width: 58.33%;
	}

	.eightColumn {
		width: 66.66%;
	}

	.nineColumn {
		width: 75%;
	}

	.tenColumn {
		width: 83.33%;
	}

	.elevenColumn {
		width: 91.66%;
	}

	.twelveColumn {
		width: 100%;
	}
	
}	/* END media query */

    
/* Make all columns float left so that they follow each other inline
   for all available space in a row. */

.oneColumn, .twoColumn,
.threeColumn, .fourColumn,
.fiveColumn, .sixColumn,
.sevenColumn, .eightColumn,
.nineColumn, .tenColumn,
.elevenColumn, .twelveColumn	{
	float: left;
	padding: 15px;
	vertical-align: text-top;
}
    
/* Make all other elements outside of row class clear the rows. */
	
.row:after {
	content: "";
	clear: both;
	display: block;
	margin-bottom: 25px;
}


/*
===============================================================================
OVERALL POSITIONING AND STYLING
===============================================================================
*/


html {
	margin-left: 2%;
	margin-right: 2%;
}

body {
	background-color: rgba(190, 6, 164, 0.03);			/* Action Racket Magenta 3% */
}

#logo {
	margin-top: 0;
	width: 235px;
	height: 125px;
}

header {
	max-height: 140px;
	background-color: #ecf0f1;
}
	
.centerHead {
	text-align: center;
}