@import url("styles/html5reset.css" media="all") screen;
@import url("styles/animation.css") screen;
@import url("styles/480.css") screen;
@import url("styles/768.css") screen;
@import url("styles/1024.css") screen;
@import url("styles/col.css") screen;
@import url("styles/2cols.css") screen;
@import url("styles/3cols.css") screen;
@import url("styles/4cols.css") screen;
@import url("styles/5cols.css") screen;
@import url("styles/6cols.css") screen;
@import url("styles/7cols.css") screen;
@import url("styles/8cols.css") screen;
@import url("styles/9cols.css") screen;
@import url("styles/10cols.css") screen;
@import url("styles/11cols.css") screen;
@import url("styles/12cols.css") screen;

/*Theme Name: Responsive Baw Baw Classic Website - March 2016
Theme URI: https://www.bawbawclassic.warragulcyclingclub.org.au/
Description: Based on Paul Yeatman's Warragul Cycling Club wesite design with minor style changes.

Author: Paul Yeatman / Yeatman (Design)
Author URI: https://design.paulyeatman.net.au
Version: 1.0

License: GNU General Public License, v3 (or newer)
License URI: https://www.opensource.org/licenses/gpl-3.0.html

Change History:
1.0: version 1.
-Banner nav changed to grey BBC colours
-existing header and footer changed to match non wordpress look
- images not responsive within content left (WP issue with entry-xxx tags?). Added /overflow: auto; as a temp fix
*/

/*** GLOBAL : GENERAL STYLE DEFAULTS ***/
html
{
	margin: 0;
	padding: 0;
}

body {
	margin: 0 auto;
	color: #777777; /*medium grey*/
	/*font-size: 12px; /*this affects a lot - having it active at 12 shrinks the sidebar bullets too small*/
	font-family: Arial, Verdana, Univers;
	/*background-color: #e6e7e3;*/
	/*margin-top: 5px;*/
}

body, input, textarea {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	/*margin: 0;*/margin-top:25px;margin-bottom:25px;
	padding: 0;
	color: #000;
}

/*  TYPOGRAPHY ============================================================================= */
h1 {
	color: #ffa500;
	font-size: 22px;
	font-weight: normal;
	margin: 23px 0px 10px 0px;
	/*added responsive code*/
	-webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
   -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;  
}

h2 {
	color: #ffa500;
	font-size: 20px;
	font-weight: normal;
	margin: 23px 0px 15px 0px;
	/*added responsive code*/
	-webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in; 
}

h3 {
	color: #ffa500;
	margin-top: 10px;
	font-size: 18px;
	font-weight: bold;
	margin: 13px 0px 5px 0px;
	/*added responsive code*/
	-webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in; 
}

h4 {
	color: #ffa500;
	margin-top: 10px;
	font-size: 16px;
	margin: 13px 0px 5px 0px;
	/*added responsive code*/
	-webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in; 
}

h5 {
	color: #ffa500;
	margin: 13px 0px 5px 0px;
	font-size: 14px;
	font-weight: bold;
	/*added responsive code*/
	-webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in; 
}

h6 {
	color: #ffa500;
	margin: 13px 0px 5px 0px;
	font-size: 14px;
	/*added responsive code*/
	-webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in; 
}

hr
{
	background-color: #999999;/*med light grey*/
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

pre
{
	font: 11px Monaco, monospace;
	line-height: 1.5;
	margin-bottom: 1.5em;
}

code
{
	font: 11px Monaco, monospace;
}

p {
	margin-top: 0px;
	margin-right: 0px;
	font-size: 12px;
	margin-bottom: 12px;
	margin-left: 0px;
}

a {
	color: #00daff; /*cyan*/
}
a:visited  { color: #ffa500; } /*orange*/
a:hover    { color: #112c4c; } /*dark blue*/
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

#wrapper { 
	/* width: 100%; */
	max-width: 1000px; /* sets main content elements width */
	/* position: relative; */
	margin: 0 auto; 
	text-align: left;
}

#headcontainer {
	width: 100%; 
}

header {
	clear: both;
	width: 100%; /* 1000px /* 1250px; with col group, no need for width setting?*/ 
	font-size: 0.8125em; /* 13 / 16 */
	max-width: 92.3em; /* 1000px; /* 13 */
	margin: 0 auto;
	padding: 10px 0px 10px 0px;
	position: relative;
	color: #000000; /*black*/
	text-align: center;
}
		
#container {
    margin: 0 auto;
	position: relative;
	width: 100%;
	/* max-width: 1000px; /* sets main content elements width */
	text-align: left; /* in for t'shooting 20160209 */
}

.container {
    margin: 0 auto;
	position: relative;
	max-width: 100%; /*out for t'shooting 20160209*/
}

#maincontent{
	clear: both;
	width: 100%; /* 1000px /* 1250px */ with col group, no need for width setting?*/ 
	font-size: 0.8125em; /* 13 / 16 */
	max-width: 92.3em; /* 1200px; /* 13 */
	margin: 0 auto;
	/*padding: 1em 0px;*/
	color: #333333; */medium grey*/
	line-height: 1.5em;
	position: relative;
	background-image: url(images/content_bkgd.jpg);
	background-color: #ffffff; /* white*/
}

.maincontent{
	clear: both;
	width: 100%; /* 1000px /* 1250px */  with col group, no need for width setting?*/ 
	font-size: 0.8125em; /* 13 / 16 */
	max-width: 92.3em; /* 1200px; /* 13 */
	margin: 0 auto;
	/*padding: 1em 0px;*/
	color: #333333;
	line-height: 1.5em;
	position: relative;
}

.subfooter{
	clear: both;
	width: 100%; /* 1000px / 1250px */
	font-size: 0.8125em; /* 13 / 16 */
	max-width: /* 92.3em; */ 1000px; /* 13 */
	margin: 0 auto;
	/*padding: 1em 0px;*/
	color: #333333;
	line-height: 1.5em;
	position: relative;
}


/*** PAGE LAYOUT ***/
/* Styles that affect the entire layout of the page */

div#container
{
	margin: 4px 4px 4px 4px;
}

div#content
{
}

/*** HEADER : MENU ***/
/*trying to center this within the div is being a PITA!*/
.menu {
	margin-top:1.65%;
	position: relative;
	float:left;
	display:block;
	/*text-align:center;*/
}

.menu ul {
    list-style: none;
    margin: 0;
}

.menu ul ul
{
    display: none;
}

.menu li
{
    display: inline;
    float: left;
	padding: 0 0 0 23px;
	position:relative;
}

.menu-item
{
}

.menu-item a
{
	font-size: 15px;
	text-decoration: none;
	color: #ffffff; /*white*/
}

.menu-item a:hover {
	color: #003399; /*blue*/
}

/*** MENU : OTHER ***/
#menu-item-297 a {
/*custom image for the facebook link*/
display:block; *height:24px; width:24px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url('images/fbicon.png'); background-position:0 0;
}
#menu-item-297 a:hover { background-position:0 -24px; }

#menu-item-316 a {
/*custom image for the Twitter Feed*/
display:block; height:24px; width:24px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url('images/TwitterLogo.png'); background-position:0 0;
}

#menu-item-316 a:hover { background-position:0 -24px; }

.midnav .menu {
	clear:both;
/*	margin-top:2.75%;
/*	padding-bottom:11.2%;
/*	position: absolute;/*
/*	margin-left:20%;
/*	margin-right:59%;
/*	width: auto;*/
	display:block;
}

.midnav .menu ul
{
    list-style: none;
    margin: auto;
}

.midnav .menu ul ul
{
    display: none;
}

.midnav .menu li
{
    margin-left:1em; /*margin applied to each menu item/*/
	display: inline;
   	float: left;
	padding: 0 0 0 15px;
	position:relative;
}

.midnav .menu-item
{
}

.midnav .menu-item a {
	font-size: 15px;
	text-decoration: none;
	color: #ffffff; /*white*/
}

.midnav .menu-item a:hover {
	color: #003399;/*blue*/
}

/*** HEADER : OTHER ***/
/*** CONTENT : POSTS AND PAGES ***/
/* Entry and Page Titles */
h1.entry-title {
}

h2.entry-title {
}

h2.entry-title a {
}

h1.page-title {
}

/* Media Alignment */
.alignright {
	/* Style for right-aligned images in posts */
	padding: 8px 0 8px 8px;
	float: right;
}

.alignleft {
	/* Style for left-aligned images in posts */
	padding: 8px 8px 8px 0;
	float: left;
}

/* Entry Content */
.entry-content {
	clear: both;
	/* Style that affects actual entry/post content */
	font-size: 14px;
}


.entry-content a {
}

.entry-content a:hover {
}

.entry-content h1, h2, h3, h4, h5 {
}

.entry-content p {
	font-size: 1.0125em; /* 13 */ 16; */
}

.entry-content ol li {
}

.entry-utility {
	clear: both;
	/* Style for the entry utility, which sits below a post and provides info like categories, tags, feeds, and an edit link (for authors) */
	font-size: 0.8125em; /* 13 */ 16; */
	/*this resizes fonts on the single page but not home.php page */
}

. wp-caption-text {
	font-size: 0.8125em; /* 13 */ 16; */
}
.entry-meta {
	clear: both;
	/* Style for the entry metadata (author, etc.) */
}

.skip-link {
	/* Style for the skip link */
	/*position: absolute;
	left: -9000px;*/
}

.navigation {
	/* Style for the navigation links (next/previous post) on a given post */
}

/*** CONTENT : COMMENTS ***/
div#comments {
	/* Style that affects the DIV containing all the comments */
}

.comments h3 {
	/* H3 header style for comments */
}

.comments ol {
	/* Comments are displayed as ordered lists by default, so you want to style that list so it looks the way you want */
}

.comments ol li {
	/* Style each list item in the comments ordered list */
}

.comments img {
	/* Style for the user avatar beside each comment */
	float: left;
	margin: 0 12px 8px 0;
}

.comments .comment {
	/* Style that applies to each individual comment in a series of comments */
}

.children ul li
{
	/* A style that refers to the children (as in, responses to) any given comment */
}

.comment-reply-link
{
	/* Style for the "Reply" link on a comment */
}

.comment-meta
{
	/* Style for metadata for a comment */
}

div#respond
{
	/* DIV that contains the comment response form */
}

div#respond h3
{
	/* H3 header for the comment response form */
}

/*** CONTENT : SIDEBAR ***/
div#primary
{
	/* Primary Widget Area DIV */
}


div#primary li{ list-style-type: none; }
div#primary ul{ list-style-type: none; margin: 0; padding: 5px; }

div#secondary
{
	/* Secondary Widget Area DIV */
}

.widget-area
{
	/* Class that applies to BOTH widget areas */
}

.xoxo
{
	/* Class that applies to each item in each widget area (an unordered list class) */
}

/*** YOUR CSS ***/
.bannernav {
	border-top-left-radius: 20px 20px;
	border-top-right-radius: 20px 20px;
	-moz-border-top-left-radius: 20px 20px;
	-moz-border-top-right-radius: 20px 20px;
	padding-top: 0;
	vertical-align:middle;
	/*text-align:center;*/
	text-transform:uppercase;
   	display:inline-block;
   	/*list-style: none;*/
	width: 100%;
	color: #ffffff;
	font-size: 14px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	/*Official Syntax For CSS Gradient*/
	/*Browser Syntax For CSS Gradient*/	
	background-image: -webkit-linear-gradient(top, #ffa500, #ff6500);
	background-image: -moz-linear-gradient(top, #ffa500, #ff6500); 
	background-image: -o-linear-gradient(top, #ffa500, #ff6500);
	background-image: -ms-linear-gradient(top, #ffa500, #ff6500);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa500', endColorstr='#ff6500');
}

.bannernav a { color: #ffffff; text-decoration: none; }
.bannernav a:visited { color: #ffffff; }
.bannernav a:hover { color: #003399; text-decoration: none; }

.midnav {
	padding-top: 0;
	margin: auto;
	vertical-align:middle;
	/*text-align:center;*/
	text-transform:uppercase;
   	display:inline-block;
   	list-style: none;
	width: 100%;
	color: #ffffff;
	font-size: 14px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	/*Official Syntax For CSS Gradient*/
	background-image: linear-gradient(top, #a6a6a6, #a6a6a6);
	/*Browser Syntax For CSS Gradient*/	
	background-image: -webkit-linear-gradient(top, #a6a6a6, #a6a6a6);
	background-image: -moz-linear-gradient(top, #a6a6a6, #a6a6a6);
	background-image: -o-linear-gradient(top, #a6a6a6, #a6a6a6);
	background-image: -ms-linear-gradient(top, #a6a6a6, #a6a6a6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6a6a6', endColorstr='#a6a6a6');
}

.midnav a { color: #ffffff; text-decoration: none; }
.midnav a:visited { color: #ffffff; }
.midnav a:hover { color: #003399; text-decoration: none; }

.toplogo {
	/*background-image: url(images/background.jpg);*/
	position: relative;
	width: 100%;
	padding-top: 12px;
	padding-bottom: 00px;
/* need to get rid of the white space below this and above the banner nav*/
}

/* FOOTER AREA */
/* resizes too long in small screen*/
.footerArea {
	border-bottom-left-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
	-moz-border-bottom-left-radius: 20px 20px;
	-moz-border-bottom-right-radius: 20px 20px;
	width: 100%;
	max-width:1000px;
	margin: auto;
	/*Official Syntax For CSS Gradient*/
	background-image: linear-gradient(top, #ff6500, #ffa500);
	/*regular colouring*/
	/****************************************/
	/*Official Syntax For CSS Gradient*/
	background-image: linear-gradient(top, #ffa500, #ff6500); 
	/*Browser Syntax For CSS Gradient*/	
	background-image: -webkit-linear-gradient(top, #ffa500, #ff6500);
	background-image: -moz-linear-gradient(top, #ffa500, #ff6500); 
	background-image: -o-linear-gradient(top, #ffa500, #ff6500);
	background-image: -ms-linear-gradient(top, #ffa500, #ff6500);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa500', endColorstr='#ff6500');
	color: ffffff;
	font-size: 16px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	/*added responsive code*/
	-webkit-transition-property: width;
    -moz-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;
}

.footerArea a { color: #ffffff; text-decoration: none; }
.footerArea:visited { color: #ffffff; }
.footerArea a:hover { color: #112c4c; text-decoration: none; }

/*** RESPONSIVE CODING FROM http://www.responsivegridsystem.com/ ***/
/*** if the @ links to the style/css files work, should not need this code ***/
/*  SECTIONS  ============================================================================= */
/* *.section {
/*  	clear: both;
/* 	padding: 0px;
/* 	margin: 0px;
/* }

/*  GROUPING  ============================================================================= */
,group:before,
.group:after {
    content:"";
    display:table;
}

.group:after {
    clear:both;
}

.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}


.contentleft {
	max-width: 600px;
	width:90%;
        display: block;
	padding-left: 20px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	float: left;
	border-right-style: solid;
	border-right-width: 1px;
	/*added responsive code*/
	-webkit-transition-property: width;
    	-moz-transition-property: width;
    	transition-property: width;
    	-webkit-transition-duration: 0.5s, 0.5s;
   	-moz-transition-duration: 0.5s, 0.5s;
   	transition-duration: 0.5s, 0.5s;
  	-webkit-transition-timing function: linear, ease-in;
 	-moz-transition-timing function: linear, ease-in;
 	transition-timing function: linear, ease-in;
	overflow:auto;
}

.contentright {
	max-width:325px;
	font-size: 12px;
	width:80%;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 5px;
	padding-bottom: 10px;
	/*width: 33%;*/
	float: left;
	/*added responsive code*/
    -webkit-transition-property: width;
    -moz-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;
}

img {
	max-width: 95%;
	height: auto;
	width: auto\9; /* ie8 */

.sponsors {
	width: 100%;
	padding-top:5px;
	padding-left: 20px;
}

.clearboth {
	clear:both;
}