/* Colours:
dark purple: #5D0B78
med purple: #C39DCF
light purple: #ECE6F0
*/
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 150%;
}

#header_bg {
	background-color: #fff;
	width: 100%;
	float: left;
}
#header {
	max-width: 960px;
	margin: 0 auto 0 auto;
}
.title {
	color: #5D0B78;
	font-family: 'Amaranth', sans-serif;
	font-style: italic;
	font-size: 120%;
	line-height: 150%;
	text-align: center;
}
#nav_bg {
	background-color: #fff;
	width: 96%;
	padding: 0 2% 0 2%;
	float: left;
	overflow: hidden; /* prevent overflow to 2nd line */
}
#nav {
	max-width: 960px;
	margin: 0 auto 0 auto;
}

#main_bg {
	background-color: #5D0B78;
	width: 96%;
	float: left;
	padding-top: 2%;
	padding-right: 2%;
	padding-bottom: 1%;
	padding-left: 2%;
}
.flextab { display: inline; }
.tabs2 {
	display: none;
	max-width: 960px;
	margin: 0 auto 0 auto;
	color: #5D0B78;
	font-size: 75%;
	font-weight: bold;
}
.tabs2 span { background-color: #ECE6F0; padding: 2px 8px; text-align: left; float: left; border-right: 2px solid #5D0B78; }
.tabs2 a:link, .tabs2 a:visited { color: #5D0B78; text-decoration: none; }
.tabs2 a:hover span,
.tabs2 span.active {
  color: #5D0B78;
  background: #fff;
}

.purplebar {
  width: 100%;
  height: 3px;
  background: #5D0B78;
}
.tabs {
	display: inline;
	max-width: 960px;
	margin: 0 auto 0 auto;
	color: #5D0B78;
	font-size: 75%;
	font-weight: bold;
	border-bottom: 2px solid #5D0B78;
}
.tabs span { background-color: #ECE6F0; padding: 2px 8px; text-align: left; float: left; border-right: 2px solid #fff; }
.tabs a:link, 
.tabs2 a:visited { 
	color: #5D0B78; 
	text-decoration: none;
	}
/*.tabs a:hover span {
  color: #5D0B78;
  background: #fff;
}*/
.tabs span.active {
  color: #fff;
  background: #5D0B78;
}

#main {
	background-color: #fff;
	max-width: 960px;
	margin: 0 auto 0 auto;
}
#content {
	width: 94%;
	float: left;
	background-color: #fff;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 3% 3% 1% 3%;
}
#content .col1,
#content .col1-video {
	width: 48%;
	padding-right: 2%;
	float: left;
}
.col1 img { border-color: black; }
#content .col2,
#content .col2-video {
	width: 48%;
	padding-left: 2%;
	float: left;
}
.align-left {
	text-align: left;
}

#navbot {
	max-width: 960px;
	margin: 0 auto 0 auto;
	color: #fff;
	text-align: center;
}
#navbot a:link, #navbot a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 65%;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	padding: 7px 4px 7px 4px;
	text-decoration: none;
	white-space: nowrap;
}
#navbot a:hover {
	text-decoration: underline;
	color: #ECE6F0;
}

#footer_bg {
	background-color: #C39DCF;
	width: 100%;
	color: #5D0B78;
}
#footer {
	max-width: 960px;
	margin: 0 auto 0 auto;
	color: #5D0B78;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	line-height: 18px;
	padding: 10px 5px 10px 5px;
}
#footer a:link, #footer a:visited {
	color: #5D0B78;
	text-decoration: underline;
	white-space: nowrap;
}
#footer a:hover {
	color: #ECE6F0;
	text-decoration: underline;
}
a:link, a:visited {
  color: #5D0B78;
  text-decoration: underline;
}
.clear {
	clear:both;
}
.logo {
	padding: 2%;
	max-width: 96%;
}
img {
	max-width: 100%;
}
.nomobile {
	display: block;
}
.mobileonly {
	display: none;
}
.col1of2 {
	float: left;
	width: 50%;
	position: relative;
	overflow: hidden;
}
.twocols_container {
	width: 100%;
	float: left;
	background-color: #fff;
}
p, ul, ol, td {
    font-size: 0.8em; /* If the baseline is 16px, this will scale the font to 14px */
    line-height: 1.5em;  /* This keeps the line height proportional to the font size */
}
td p { font-size: 0.9em; line-height: 1.5em; }
p {
	margin: 0px;
	padding: 5px 5px 5px 0;
}
p.indent {
	margin-left: 20px;
}
p.smallindent {
	margin-left: 20px;
	text-indent: -14px;
	padding-top: 0;
}
p.justify {
	text-align: justify;
}
p.smaller {
	font-size: 0.7em;
}
.main { /* used for form list */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  text-align: left;
  margin: 0px 12px 0 0;
  padding: 5px 5px 5px 0; 
  line-height: 20px;
}
.sprinter { /* used on sponsor page */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #5D0B78;
  font-weight: bold;
  text-align: left;
  margin: 0px 12px 0 0;
  padding: 5px 5px 5px 0; 
  line-height: 20px;
}
.sprinter a:link,
.sprinter a:visited {
	color: #5D0B78;
	text-decoration: none;
}
.sprinter a:hover {
	text-decoration: underline;
}
.runner a:link,
.runner a:visited {
	color: #5D0B78;
	text-decoration: none;
}
.runner a:hover {
	text-decoration: underline;
}

li { margin-bottom: 3px; }
.pcenter {
    font-size: 0.8em; /* If the baseline is 16px, this will scale the font to 14px */
    line-height: 1.5em;  /* This keeps the line height proportional to the font size */
	text-align: center;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
}
h1 {
	color: #5D0B78;
	font-family: 'Amaranth', sans-serif;
	font-size: 22px;
	line-height: 32px;
	text-align: left;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #5D0B78;
	font-style: italic;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
h2 {
	color: #5D0B78;
	font-family: 'Amaranth', sans-serif;
	font-size: 19px;
	line-height: 26px;
	text-align: left;
	font-weight: bold;
	margin-top: 12px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
}
h3 {
	color: #5D0B78;
	font-family: 'Amaranth', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-align: left;
	font-weight: bold;
	margin-top: 12px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
}
td h3, th h3 { 
	text-align: center;
	margin-top: 0;
	padding-top: 0;
 }
.rowofbuttons {
	/*margin: 12px 12px 12px 0px;*/
	margin: 0px 12px 0px 0px;
}
.rowofbuttons img {
	padding: 7px 18px 7px 0px;
	border: none;
	vertical-align: bottom;
}
.hilite {
	color: #5D0B78;
	font-family: 'Amaranth', sans-serif;
	font-style: italic;
	font-weight: bold;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
}
.purple {
		color: #5D0B78;
}
.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.7em; 
    line-height: 1.2em;  
	color: #000000;
	text-align: center;
	font-style: italic;
	padding-left: 0px;
	padding-top: 3px;
}
.picleft {
  text-align: left;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 0;
}
.picright {
  text-align: right;
  padding-top: 5px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 5px;
}
.hurdler-logo {
	max-width: 320px;
	max-height: 100px;
}
.marathoner-logo {
	max-width: 300px;
	max-height: 80px;
}
.responsive_right { /* for images */
	float: right;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 2%;
	margin-left: 2%;
}    
.responsive_right400 { /* for images */
	float: right;
	margin-top: 2%;
	margin-right: 0;
	margin-bottom: 2%;
	margin-left: 2%;
	max-width: 400px;
}    
.responsive_left {
	float: left;
	margin-top: 0;
	margin-right: 2%;
	margin-bottom: 2%;
	margin-left: 0;
}    

.likebox-wrapper * {
   max-width: 100% !important;
}
.google-wrapper * {
   width: 100% !important;
}

.video-container {
	max-width: 640px;
	max-height: 480px;
	margin-left: auto;
	margin-right: auto;
}
.video-wrapper {
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%;
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.purplebox {
	color: #5D0B78;
	background-color: #ECE6F0;
	margin: 2% auto 2% auto;
	padding: 1% 5% 2% 5%;
}
.darkpurplebox {
	color: #fff;
	background-color: #5D0B78;
	margin: 2% auto 2% auto;
	padding: 1% 5% 2% 5%;
}
.darkpurplebox a:link,
.darkpurplebox a:visited,
.darkpurplebox a:hover {
	color: #fff;
}
.quote {
	color: #5D0B78;
	background-color: #ECE6F0;
	margin: 2% auto 2% auto;
	padding: 2%;
	font-style: italic;
	font-weight: bold;
	text-align: center;
}
.flexslider_container_wide {
	text-align: center;
	max-width: 910px;
	max-height: 680px;
	margin-left: auto;
	margin-right: auto;
}
.flexslider_container {
	text-align: center;
	max-width: 710px;
	max-height: 605px;
	margin-left: auto;
	margin-right: auto;
}
.flexslider_home {
	text-align: center;
	max-width: 900px;
	max-height: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.slides li {
	margin-bottom: 0;
}
.flexslider_home .flex-control-nav { 
	display: none; 
}
.btn {
  background: #ECE6F0;
  background-image: -webkit-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: -moz-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: -ms-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: -o-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: linear-gradient(to bottom, #ECE6F0, #ae95bf);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Verdana, Geneva, sans-serif;
  color: #5D0B78;
  font-size: 75%;
  font-weight: bold;
  padding: 3px 10px 3px 10px;
  display:inline-block; 
  margin-top: 5px;
  text-decoration: none;
  max-width: 90%;
}
.btn a:link, .btn a:visited { text-decoration: none; }
.btn:hover {
  color: #fff;
  background: #8631a3;
  background-image: -webkit-linear-gradient(top, #8631a3, #5D0B78);
  background-image: -moz-linear-gradient(top, #8631a3, #5D0B78);
  background-image: -ms-linear-gradient(top, #8631a3, #5D0B78);
  background-image: -o-linear-gradient(top, #8631a3, #5D0B78);
  background-image: linear-gradient(to bottom, #8631a3, #5D0B78);
  text-decoration: none;
  /*white-space: nowrap;*/
  max-width: 90%;
}
.btn:hover a {
  color: #fff;
}
.btn2 {
  color: #fff;
  background: #8631a3;
  background-image: -webkit-linear-gradient(top, #8631a3, #5D0B78);
  background-image: -moz-linear-gradient(top, #8631a3, #5D0B78);
  background-image: -ms-linear-gradient(top, #8631a3, #5D0B78);
  background-image: -o-linear-gradient(top, #8631a3, #5D0B78);
  background-image: linear-gradient(to bottom, #8631a3, #5D0B78);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 75%;
  font-weight: bold;
  padding: 3px 10px 3px 10px;
  display:inline-block; 
  margin-top: 5px;
  text-decoration: none;
  max-width: 90%;
}
.btn2 a:link, .btn2 a:visited { color: #fff; text-decoration: none; }
.btn2:hover {
  color: #5D0B78;
  background: #ECE6F0;
  background-image: -webkit-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: -moz-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: -ms-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: -o-linear-gradient(top, #ECE6F0, #ae95bf);
  background-image: linear-gradient(to bottom, #ECE6F0, #ae95bf);
  text-decoration: none;
  /*white-space: nowrap;*/
  max-width: 90%;
}
.btn2:hover a {
  color: #5D0B78;
}

.purplelist {
  border: 1px solid #5D0B78;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #5D0B78;
  background: #ECE6F0;
  padding: 5px;
}
select, select option, select a:link, select a:visited, select a:hover {
	max-width: 100%;
}

/* RESPONSIVE TABLES */
table#rtable {
	margin-top: 8px;
}
table tr {
	background-color: #ECE6F0;
}
table.whitebg tr {
	background-color: #fff;
}
.stacktable.small-only th h3 {
	display: none;
}
.stacktable.small-only th.st-head-row {
	text-align: left;
	padding-left: 20px;
	color: #5D0B78;
	font-family: 'Amaranth', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
}
.stacktable.small-only td.st-key h3 {
	text-align: right;
	padding-right: 5px;
	color: #000;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	font-size: 100%;
	vertical-align: top;
}
.stacktable.small-only td.st-val {
	text-align: left;
	padding-left: 5px;
	vertical-align: top;
	line-height: 24px;
}
/* RESPONSIVE TABLES */


/* responsive columns from wolfsong portfolio */
.columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;

	-moz-column-count: 3;
	-moz-column-gap: 10px;
	/*-moz-column-fill: auto;*/ /* this results in one very long column */
	-moz-column-fill: balance;

	column-count: 3;
	column-gap: 10px;
	column-fill: auto;
}

@media (max-width: 800px) {
	.columns {
	-webkit-column-count: 2;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 2;
	-moz-column-gap: 10px;
	-moz-column-fill: balance;
	column-count: 2;
	column-gap: 10px;
	column-fill: auto;
	}
}

@media (max-width: 580px) {
	.columns {
	-webkit-column-count: 1;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 1;
	-moz-column-gap: 10px;
	-moz-column-fill: balance;
	column-count: 1;
	column-gap: 10px;
	column-fill: auto;
	}
}

/* /responsive columns from wolfsong portfolio */


/* MEDIA QUERIES */
@media all and (max-width: 870px), 
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), 
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (min-resolution: 192dpi) and (max-width: 1024px), 
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

	/*.flextab { display: none; }*/
	.tabs2 { display: inline; }
	
	#content .col1-video, /* switch earlier if one column has a video */
	#content .col2-video {
		width: 98%;
		padding-left: 1%;
		padding-right: 1%;
	}
}

}
@media only screen and (max-width: 680px) {
	#nav_bg { /* was 810 */
		  margin-top: 5px;
		  margin-bottom: 5px;
	}
	.flex-control-nav {
		display: none;
	}
}
@media only screen and (max-width: 640px) {
	.nomobile {
		display: none;
	}
	.mobileonly {
		display: inline;
	}
	.mobilelist td {
	  display: block;
		}
	.col1of2 {
	  width: 100%;
	}
	.title { padding-top: 0; padding-bottom: 12px; }
	.logo { display: block; float:none; clear:both; margin: 0 auto 0 auto; }
	#content .col1,
	#content .col2  {
		width: 98%;
		padding-left: 1%;
		padding-right: 1%;
		float: left;
	}
	#navbot a:link, #navbot a:visited {
		font-size: 75%;
	}
}
@media only screen and (max-width: 580px) {
	.responsive_right, .responsive_right400, responsive_left { 
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (max-width: 510px) {
	.flex-control-paging { 
		display: none;
	}
}
/* /MEDIA QUERIES */