/*
Site Colours

purple = #432248;
pink = #E30B6F;
Main text = #4d4d4d;

*/


.error { border: 1px solid; font-weight: bold; padding: 10px; background: red; color: #ffffff; margin-top: 10px; }
.error p { color: #ffffff; }

body {
	font-size: 100%;
	font-weight: 400;
	line-height: 1.4;
	color: #4d4d4d;
	background-color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	margin: 0px;
}


/* Grid Styles */

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0;
	margin: 0;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */

.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.45%;
}
.span_10_of_12 {
  	width: 82.9%;
}

.span_9_of_12 {
  	width: 74.35%;
}

.span_8_of_12 {
  	width: 65.8%;
}

.span_7_of_12 {
  	width: 57.25%;
}

.span_6_of_12 {
  	width: 48.7%;
}

.span_5_of_12 {
  	width: 40.15%;
}

.span_4_of_12 {
  	width: 31.6%;
}

.span_3_of_12 {
  	width: 23.05%;
}

.span_2_of_12 {
  	width: 14.5%;
}

.span_1_of_12 {
  	width: 5.95%;
}



/*HEADER */
header 
{background-color: #432248;
color: #ffffff;
}
header p {text-align: right;}

.logo {width: 100%;
max-width: 500px; }


/*NAV STYLES*/

.nav a:link, a:visited{
text-transform: uppercase;
text-decoration: none;
color: #E30B6F; 

font-size: 16px;

}





/* WRAPPER STYLES */
.wrapper {width:90%; margin:0 auto; max-width:1600px;}


/*TEXT STYLES*/
h1 {
	color: #432248;
	font-weight:700;
	font-size: 30px;
}
h2 {
	color: #432248;
	font-size:23px; 
	margin-bottom:.5em;
}
h3 {
	color: #432248;
	font-size: 20px;
margin-bottom: 0px;
}

p, li {
	font-size:18px; 
	color: #4d4d4d; 
}

.list_line-height ol p {margin-bottom:0; line-height:1.1;}

a:link, a:visited{
text-transform: uppercase;
text-decoration: none;
color: #E30B6F; 
font-weight: bold;
font-size: 16px;

}

a:hover {color:  #432248; }



/*EXTRA STYLES*/
a.button {color: #ffffff; font-weight: normal;}
a.button:hover {color:  #432248; }

.button {background-color: #E30B6F;
padding: 10px;
text-transform: uppercase;
color: #ffffff;
font-weight: normal;
-webkit-appearance: none;}

.bannerbutton {
    position: relative;
    float:left;
    height: 200px;
    width: 150px;
    }
    .bannerbutton p {
        position: absolute;
        bottom: 0;
        }

.purple {background-color: #432248;

}
.purple h2, .purple h3, .purple p {color: #ffffff; padding-left: 10px; padding-right: 10px; margin-left: 10px; margin-right: 10px;}
.purple h2 {text-transform: uppercase;}

.purple a:hover {color: #ffffff;}

.who, .contact-us {padding-bottom: 20px; padding-top: 20px;}

.img-respond { width:100%; height:auto; display:block;}

.clear {clear: both;}

.become-member {background-image: url ("lib/images/become-member.jpg"); background-repeat: none;}

.sign-up {background-image: url ("lib/images/sign-up.jpg"); background-repeat: none;}

 .galleryimage {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px;
 }
 
 .galleryimage img { 
  position: absolute;
  /* Position the image in the middle of its container. */
   top: -9px;
  right: -9px;
  bottom: -9px;
  left: -9px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
 }

[type^="button"] {

    border: none;
}

label, input, textarea {
    display: block;
    line-height: 1em;
	font-size: 1em;
	font-family: 'Montserrat', sans-serif;
}
label {
    width: 100%;
}

form .button {background-color: #E30B6F; color: #ffffff; padding: 5px;}

.form-input { 
    border: 1px solid #999;
    padding: 10px;
    margin-top: 5px;
	margin-bottom: 1em;
    width: 97%;
}

.form-comments {
    display: block;
    height: 200px;
    line-height: normal;
    padding: 10px;
}


/*FOOTER STYLES*/

footer {
	background-color: #432248;
width: 100%;
color: #ffffff;
margin-top: 30px;
}

footer h2, footer p {color:#ffffff;
}

footer p {font-size: 15px;}

.oxit {
	background-color: #ffffff;
	color: #4d4d4d;
	width: 100%;
	text-align: center;
}

.oxit p, .oxit a {color: #4d4d4d; padding-top: 10px;}


/* ===== TASC-NOTICE ===== */
.tasc-notice {
	border-left: solid 9px #432247;
	background-color:#E31270;
	padding:1em 2em;
	display:inline-block;
}

.tasc-notice p {
	margin:0;
	padding:0;
	color:#fff;
}


.member { width:50%; float: left; }

@media only screen and (max-width: 1080px) {
	.col {  margin: 1% 0 1% 0%; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%; 
	}
	
	.logo {width: 95%;}
	
}
@media only screen and (max-width: 800px) {
	
	.member { width:100%;  }


    .bannerbutton p {
        position: static;
        bottom: 0;
        }
		
		img[src*="lib/images/barn.jpg"] {
		width:55%;
		}

}


.uberAccordion {
   padding: 0;
}

.uberAccordion > li {
    list-style: none;
    margin: 0;
	
}

.uberAccordion > li > h1 {
    background-color: #432248;
    margin: 0;
    font-size: 23px;
    padding: 5px;
    cursor: pointer;
	color: #fff;
	text-transform: uppercase;
	padding: 15px;
}

.uberAccordion > li.active > h1 {
    background-color:   #E30B6F;
}

.uberAccordion > li > div {
    background-color: #fff;
    padding: 15px;
}


/* Default CSS for sub-accordion */

.uberAccordion .uberAccordion > li > h1 {
    font-size: 30px;
    padding: 5px;
}

.uberAccordion .uberAccordion > li > div {
   background-color: #666666;
   color: #FFF;
}


/* Default CSS for vertical orientation */

.uberAccordion.accordion-vertical {
    height: 400px;
}

.uberAccordion .uberAccordion.accordion-vertical {
    height: 400px;
}



@media only screen and (max-width: 600px) {
	/* ===== TASC-NOTICE ===== */
	.tasc-notice {
		padding:1em;
	}
	
	
}