@charset "utf-8";

/* © 2016
   Author: Jane Griffiths
   Last amended: 17/01/16
*/

/* GENERAL STYLES COMMON TO ALL PAGES */

a {
	text-decoration: none;
}

body {
	font-size: 104.2%; 
	/* Using 104.2% for scalable text, 1em should equate to roughly 12.5pt or 17px, 
	assuming that the browser normally defaults to 1em = 12pt/16px/100%. */
	
	color: #555;
	-webkit-font-smoothing: antialiased; /* To improve rendering in Safari */
	padding-bottom: 10px;
}

.body_background {
	/*Khaki background:*/
	background-color: #D5D5AA;
	background: -webkit-linear-gradient(#DCDCBA, #D5D5AA); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#DCDCBA, #D5D5AA); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#DCDCBA, #D5D5AA); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#DCDCBA, #D5D5AA); /* Standard syntax */

	/* to prevent banding effect at the bottom of shorter pages */
	min-height: 100%;
	margin: 0;
	background-repeat:no-repeat;
	background-attachment: fixed;
}

.WCA_green {
	color: #659044;
}

.deep_red {
	color: #C00;
}

.spaced_list li {
	padding-bottom: 0.75em;
}

h1, h2, h3 {
	font-style:italic;
	font-weight:400;
}

h1 {
	font-size: 1.5em;
	line-height: 1.3em;
	color: #4C6C33; /* mid-navbar green */
	text-shadow:0 1px 1px rgba(255, 255, 255, 0.3); /* Similar to an inset/letterpress shadow (white) */
	-webkit-font-smoothing: antialiased; /* To improve rendering in Safari */
	margin-bottom: 0.5em;
	opacity: 0.8;

}

h2 {
	font-size: 1.3em;
	line-height: 1.3em;
	color: #70705A;
	-webkit-font-smoothing: antialiased; /* To improve rendering in Safari */
	margin-top: 1.15em;
	margin-bottom: -0.25em;
}

h3 {
	font-size: 1.2em;
	line-height: 1.2em;
	color: #87876C;
	-webkit-font-smoothing: antialiased; /* To improve rendering in Safari */
	margin: 1em 0 -0.25em 0;
}

.note {
	font-size: 0.75em;
}


.intro_para {
	margin-bottom: 2.5em;
}

#noscript {
	font-size: 0.9em;
	padding: 0.25em 0.5em 0.25em 0.5em;
	border: 1px solid #999;
	border-radius: 5px;
	margin: 1em 0 2em 0;
}
	
#outerwrapper {
	position:relative;
	font-size: 1em; /* Default for all elements on the page */
	line-height: 1.35em; /* Adjusted to allow slightly more room for link styling */

	width: 100%;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FBFBEF;
	border-radius: 10px;
	border: solid 1px #CCC;
}
@media screen and (min-width: 768px) {
	#outerwrapper {
	  min-width: 768px;
	  max-width: 1024px;
	}
}


#pagecontainer {
	font-family: 'Lora', Georgia, "Times New Roman", Times, serif;
	width: 96%;
	margin-right: auto;
	margin-left: auto;
	padding: 40px 0 20px 0;
}

#headerzone {
	height: auto;
	width: 100%;
}
#footerzone {
	height: auto;
	width: 100%;
	margin-top: 2em;
	color: #334822;
}
#footer_rule {
	color: #334822;
}

#contentzone {
	height: auto;
	width: 96%;
	margin: 40px auto auto auto;
	padding-left: 15px;
	padding-right: 15px;
}

.logo_and_masthead_area {
}

.logo {
	max-width: 25%;
	height: auto;
	border-radius: 3%;
}

.masthead {
	position: absolute;
	vertical-align:text-bottom; 
	margin-left:5px;
	display: inline-block;
	width: 370px;
	height: 150px;
	background-image: url(images/wca_masthead_letterpress.png);
	
	max-width: 65%;
	background-size: contain;
	background-repeat: no-repeat;
}

/* BANNER (INCLUDING MOBILE VERSIONS) */

.banner {
	width: 100%;
	height: 240px;
    background-image:url(images/banner_984w.jpg);
	background-repeat:no-repeat;
	background-position:top;
	background-size:cover;
}

/* Screens up to 980px*/
@media screen and (max-width: 980px) {
  .banner {
	  height: 190px;
  }
}

/* Screens up to 800px*/
@media screen and (max-width: 800px) {
  .banner {
	  height: 180px;
  }
}

/* Screens up to 768px*/
@media screen and (max-width: 768px) {
  .banner {
	  height: 170px;
  }
}

/* Screens up to 640px*/
@media screen and (max-width: 640px) {
  .banner {
	  height: 160px;
  }
}
  
/* Screens up to 480px*/
@media screen and (max-width: 480px) {
  .banner {
	  background-image:url(images/banner_150h.jpg);
	  height: 150px;
  }
}

/* Screens up to 340px*/
@media screen and (max-width: 340px) {
  .banner {
	  height: 140px;
  }
}

/* Screens up to 300px*/
@media screen and (max-width: 300px) {
  .banner {
	  height: 130px;
  }
}


/* POSITIONING CONTAINERS ETC */

.center {
	text-align:center;
}

.main_left {
	display:inline-block;
	width: 550px;
	max-width: 100%;
	margin-right: 20px;
	margin-top: -20px;
	vertical-align:top;
}

.main {
	max-width: 100%;
}

.float_left {
	float:left;
}

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


.about_pics_repositioner {
	z-index: 2;
	margin-top: -35px;
}

.training_pics_repositioner {
	z-index: 2;
	margin-top: -150px;
	margin-left: 360px;
}

.boxout {
	padding: 10px 30px 20px 30px;
	margin-top: 30px;
	border: 1px solid #D5D5AA;
	border-radius: 10px;
	background-color: #FEFEFC;
	color: #555;
	box-shadow: 2px 2px 5px #CCC;
}

.quote {
	margin-top: 1em;
	text-align: center;
}

.spacer_rule_1em {
	border: none;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.spacer_rule_2em {
	border: none;
	margin-top: 1em;
	margin-bottom: 1em;
}

.spacer_rule_3em {
	border: none;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.have_a_go {
	margin-top: 55px;
	min-height: 220px;
}

.subcontent_right_40 {
	padding-left: 20px;
	max-width: 40%;
}

.subcontent_left_60 {
	max-width: 60%;
}

.inline_b {
	display: inline-block;
}


/* Links embedded in main content */
#contentzone a {
	text-decoration: none;
	border-bottom: dashed 1px;
	padding-bottom: 0px;
}
#contentzone a:link {
	color: #4C6C33; /*dark green*/
}
#contentzone a:hover {
	border-bottom: solid 1px;
}

/* NAVIGATION ON ALL PAGES */

.button_wrapper {
	width: 100%;
	height: auto;
}

#menu_button {
	display: none;
	z-index: 50;
	background-color: #FFF;
	min-height: 20px;
	padding: 10px 10px 5px 10px;
	border: 1px solid #666;
	border-radius: 5px;
	font-size: 1em;
	width: 6em;
	margin-top: 0.5em;
	margin-bottom: 1em;
	box-shadow: 1px 1px 5px #666;
}

#menu_button a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
}

#navbar {
  width: 100%;
  float: none;
  background-color: #4C6C33;
  line-height: 2em;
  min-height: 2em;
  margin-top: 1em;
  margin-bottom: 0.25em;
  
  background: -webkit-linear-gradient(#4A6119, #4C6C33, #334822); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#4A6119, #4C6C33, #334822); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#4A6119, #4C6C33, #334822); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#4A6119, #4C6C33, #334822); /* Standard syntax */
}

#navbar ul {
	color: #FFF;
	list-style:none;
	padding: 0;
}

#navbar ul li {
  display: inline-block;
}

.navitem {
	text-align: center;
	height: auto;
	width: auto;
	margin: 0;
	float:left;
}

.navitem a {
  display: inline-block;
  padding: 0 0.9em;
  font-size: 0.99em;
  text-decoration: none;
}

	/* unvisited navbar link */
	.navitem a:link {
		color: #E1E1E1;
	}
	
	/* visited navbar link */
	.navitem a:visited {
		color: #CCC;		
	}
	
	/* for mouse users only: hover effect for navbar link */
	.navitem a:hover {
		text-shadow: -1px 1px 8px #FFFFB3, 1px -1px 8px #FFFFB3;
		color: #FFF;
	}
	
	/* navbar link when clicked*/
	.navitem a:active {
		text-shadow: -1px 1px 8px #FFFFB3, 1px -1px 8px #FFFFB3;
		color: #FFF;
	}
	
	/* currently selected navbar link (for page user is now viewing) */
	.navitem#current a {
		background-color: #D5D5AA;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
		filter: alpha(opacity=50); /* IE5-7 */
		opacity: 0.5; /* Standard */
		color: #333;
		
		text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
    }
	
	/* for mouse users only: hover effect for currently selected navbar link */
	.navitem#current a:hover {
		background-color: #FFF;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */
		filter: alpha(opacity=50); /* IE5-7 */
		opacity: 0.5; /* Standard */
		
		text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
	}


#backToTop {
	width: 60px;
	height: 60px;
	box-sizing:border-box;
	border: 1px solid #CCC;
	background-color:#659044;
	color: #FFF;
	text-align: center;
	font-size: 0.9em;
	padding: 10px 5px 5px 5px;
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 99;
	opacity: 0.8;
}

#backToTop a, #backToTop a:link, #backToTop a:hover, #backToTop a:visited {
	color: #FFF;
}

#backToTop a:hover, #backToTop a:active {
	text-shadow: -1px 1px 8px #FFFFB3, 1px -1px 8px #FFFFB3;
	color: #FFF;
}


/* MOBILE CONTAINERS AND NAVIGATION */
@media screen and (max-width: 767px) {
	#pagecontainer {
	  padding-top: 15px;
	  padding-bottom: 15px;
	}
	
	#headerzone {
	  padding-top: 5px;
	}
	
	#headerzone, #footerzone, #contentzone {
	  width: auto;
	  max-width: 100%;
	  padding-left: 5px;
	  padding-right: 5px;
	}
	
	#contentzone {
	  margin: 0px;
    }
	
	.subcontent_right_40 {
	  padding-left: 0px;
	  display: block;
	  max-width: 100%;
	}
	
	.subcontent_left_60 {
	  display: block;
	  max-width: 100%;
	}
	
	#menu {
	  visibility: visible;
	}
	
	#navbar {
	  max-width: 767px;
	}
	
	#navbar ul li {
	  display:inherit;
	}
	
	.navitem {
	  text-align: left;
	  float: none;
	  padding-top: 0.5em;
	  padding-bottom: 0.5em;
  }
  
  	/* currently selected navbar link (for page user is now viewing) */
	.navitem#current a {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
    }
}


/* STYLES FOR SOCIAL MEDIA */

#social_media_panel {
	display: inline-block;
	margin-top: 0px;
	width: 300px;
	
	padding: 10px 20px 20px 20px;
	border: 1px solid #D5D5AA;
	border-radius: 10px;
	background-color: #FEFEFC;
	color: #555;
	box-shadow: 2px 2px 5px #CCC;
}

.soc_media_icons_box {
	max-width: 400px;
	/* Plus styles common to some other boxouts 
	as well (detailed later in this stylesheet) */
}

.soc_media_icons_box a, .soc_media_icons_box a:link, .soc_media_icons_box a:hover {
	border-bottom: none;
}

.fb-page {
	border: 1px solid #CCC;
	width: 300px;
	min-height: 300px;
	margin: 20px 0 20px 0;
}

.fb_blue {
	color: #3b5999;
}

.fb_box {
	width: 68px;
	height: 68px;
	margin-right: 10px;
}

.twitter_box {
	border: 1px solid #CCD6DD;
	border-radius: 4px;
	width: 68px;
	height: 68px;
	margin-left: 10px;
}

.twitter-timeline {
	border: 1px solid #999;
	width: 300px;
	min-height: 300px;
	margin: 0 0 20px 0;
}

.social_media_follows {
	line-height: 10px; /* So that the fb and Twitter buttons align */
}

.fb-follow {
	margin-right: 12px;
}

/* mobile */
@media screen and (max-width: 767px) {
	#social_media_panel {
		display:block;
	}
}
@media screen and (max-width: 320px) {
	#social_media_panel {
		padding: 5px;
		width: 280px;
		margin-left: auto;
		margin-right: auto;
	}
	
	#social_media_panel h2 {
		padding: 0 5px 0 5px;
	}

	.fb-page {
		width: 260px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* STYLES FOR NEWSLETTER DOWNLOAD PANEL */

#newsletters, #club_rules {
	border: 1px solid #DCDCBA;
	border-radius: 3px;
	padding: 10px 20px 20px 20px;
	margin: 30px 0 20px 0;
}

#newsletters ul li {
	list-style-image:url(images/pdficon_large.png);
}


/* STYLES FOR RIGHT COLUMN, FRONT-PAGE NEWS, FEES, ETC */

.right_col {
	display: inline-block;
	margin-top: 0px;
	width: 300px;
	height: auto;
}

.headline_news_box, .soc_media_icons_box {
	display: inline-block;
	margin-top: 0px;
	width: 300px;
	height: auto;
	border: 1px solid #D5D5AA;
	border-radius: 10px;
	padding: 10px 20px 20px 20px;
	background-color: #FEFEFC;
	color: #555;
	box-shadow: 2px 2px 5px #CCC;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */
	filter: alpha(opacity=80); /* IE5-7 */
	opacity: 0.8; /* Standard */
}

.fees {
	width: 300px;
	height: auto;
	border: 1px solid #D5D5AA;
	border-radius: 10px;
	padding: 10px 20px 20px 20px;
	background-color: #FEFEFC;
	color: #555;
	box-shadow: 2px 2px 5px #CCC;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */
	filter: alpha(opacity=80); /* IE5-7 */
	opacity: 0.8; /* Standard */
}

.headline_news_box h2 {
	font-size: 1.2em;
	color: #659044;
	animation-name: text_glow;
    animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction:alternate;
}
@keyframes text_glow {
	0% {color: #4C6C33;
	text-shadow: 1px 1px 8px #FFFFB3;
	}
	33% {color: #4C6C33;
	text-shadow: 1px 1px 3px #FFFFB3;
	}
	66% {color: #659044;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
	}
    100% {color: #659044;
	text-shadow: 0px 0px 5px #FFFFB3;
	}
}

.headline_news_box .emerging_text {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE5-7 */
	opacity: 1; /* Standard */
	animation-name: emerging_text;
    animation-duration: 5s;
	animation-iteration-count: 1;
}
@keyframes emerging_text {
    from {opacity: 0;
	}
    to {opacity: 1;
	}
}

/* Adapt when screen width can't accommodate main_left (inc margin) 
plus width of news box or social media panel, etc. */
@media screen and (max-width: 1030px) {
	.main_left {
	width: 450px;
	}
	.training_pics_repositioner {
	margin-left: 280px; /* Move further left (was 360px) */
	}
}

@media screen and (max-width: 980px) {
	.training_pics_repositioner {
	margin-top: 0;
	margin-left: 0;
	}
}

@media screen and (max-width: 930px) {
	.headline_news_box, .right_col, .fees, .soc_media_icons_box {
		display: block;
		width: auto;
	}
	
	.main_left {
	width: 100%;
	margin-top:auto;
	/*vertical-align:auto;*/
	}
	
	.about_pics_repositioner {
		margin-top: 0;
	}
}

/* STYLES FOR ILLUSTRATIVE IMAGES ON NON-GALLERY PAGES */

/*.img_frame_outer {
	padding: 15px;
	border: 1px solid #D5D5AA;
	border-radius: 10px;
	background-color: #FEFEFC;
	color: #555;
	box-shadow: 2px 2px 5px #CCC;
}*/
.w180 {
	width: 180px;
}
.w200 {
	width: 200px;
}
.w240 {
	width: 240px;
}	
.w155 {
	width: 155px;
}

.img_frame {
	border: 1px solid #333;
}

.img_surround {
	background-color: white;
	padding: 10px;
	height: auto;
	width: auto;
	border-radius: 4px;
}
	
.rotate_right {
	-ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
	-o-transform: rotate(3deg); /* Opera */
    transform: rotate(3deg);
	
	/* To get rid of jagged edges in some versions 
	of Chrome (caused by a WebKit bug): */
	-webkit-backface-visibility: hidden;
	
	/* To allow for top left corner being higher 
	and bottom right corner being lower when rotated right */
	margin-top: 10px;
	margin-bottom: 10px;
}
.rotate_left {
	-ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
	-o-transform: rotate(-5deg); /* Opera */
    transform: rotate(-5deg);
	
	/* To get rid of jagged edges in some versions 
	of Chrome (caused by a WebKit bug): */
	-webkit-backface-visibility: hidden;
	
		
	/* To allow for top right corner being higher 
	and bottom left corner being lower when rotated left */
	margin-top: 10px;
	margin-bottom: 10px;
}

.img_caption {
	font-size:1em;
	color: #70705A;
	margin: 3px 0 0 0;
	padding:0;
	font-family: 'La Belle Aurore', cursive;
	opacity: 0.8;
}

.shadow {
	box-shadow: 2px 2px 5px #888;
	border: 1px solid #E9E9E9;
}

.faded {
	opacity: 0.5;
}

/*.circular {
	width: 240px;
	height: 240px;
	border-radius: 50%;
}

.portrait_240by320 {
	width: 240px;
	height: 320px;
}
.portrait {
	width: 180px;
	height: 240px;
}
.square {
	width: 180px;
	height: 180px;
}

.landscape {
	width: 320px;
	height: 240px;
}
*/

/*.landscape_smaller {
	width: 240px;
	height: 180px;
}*/

/*.landscape_smallest {
	width: 160px;
	height: 120px;
}*/

.have_a_go_img {
	height: 180px;
	width: auto;
}

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

.margin_above {
	margin-top: 20px;
}
.margin_below {
	margin-bottom: 20px;
}
	
@media screen and (max-width: 767px) {
	.have_a_go_img {
	width: 240px;
	height: auto;
	}
}

@media screen and (max-width: 480px) {
	/* Ensure that images fit within the smallest screen widths,
	allowing for padding, etc */
	.have_a_go_img {
	width: 200px;
	height: auto;
	}
	.have_a_go h2 {
	margin-top: 0;
	}
	
	/* Reset inset elements to display them left-aligned */
	.inset_right {
	float: none;
	margin-left: 0px;
	}
	/* Prevent img_surround elements within inset_right divs 
	stretching to full width of screen when reset to 
	being left-aligned on smaller mobile screens*/
	.inset_right > .img_surround.w200 {
	max-width: 180px;
	}
	.inset_right > .img_surround.w155 {
	max-width: 135px;
	}
}

/* STYLES FOR PRINTED VERSIONS OF THE PAGES */
@media print {
   body {
   color: #000;
   background: #fff;
   }
   
   h1, h2, h3 {
   page-break-after: avoid;
   }
   
   ul, img {
   page-break-inside: avoid;
   }
   
   img {
   max-width: 100% !important;
   }
   
   .masthead {
   display: list-item;
   list-style-image:url(images/wca_masthead_letterpress.png);
   list-style-position: inside;
   margin-top: -140px;
   margin-left: 140px;
   }
   
   #contentzone {
   margin-top: -30px;
   }
   
   .button_wrapper, #navbar, .banner {
   display: none;
   }
   
   #navbar ul li {
   display: none;
   }
	
   #backToTop {
   display: none;
   }
   
   .training_pics_repositioner {
   margin-top: 0;
   margin-left: 0;
   }
}