/** 	Heavily inspired by cutcodedown.com: 
    	If you wish to copy good CSS, I suggest 
	you go to the original source!!  **/

/** ============= remove browser defaults ============= **/

html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol, 
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

/** ============= basics ============= **/

@media (max-width:512px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

html, body {
	width:100%;
	height:100%;
}

body {
	display:-webkit-flexbox;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	min-width:52em; /* for pre CSS3 browsers */
	font:normal 85%/160% merriweather,lato,arial,sans-serif;
	font-family: arial, sans-serif; 
	background:#fff;
}

.wrapWidth {
	overflow:hidden; /* wrap floats and margins */
	zoom:1; /* legacy IE */
	max-width:64em;
	margin:0 auto;
	padding:0 1em;
	text-align:left;
}

* html .wrapWidth {
	width:52em; /* legacy IE fallback */
}

.wrapHeight {
	background:#fff;
	clear:both;
	-webkit-flex:1 0 auto;
	-ms-flex:1 0 auto;
	flex:1 0 auto;
	overflow:hidden; /* wrap floats */
	zoom:1; /* legacy IE */
} 

.wrapContent {
	float:left;
	width:100%;
}

#top,
#tabs,
#footer {
	flex-shrink:0;
}


/** ============= universal styles ============= **/

body {
	font:normal 95%/150% merriweather, lato, arial, sans-serif;
}

img {
	border:none;
}


table {
        font-size:100%;
        line-height:150%;
	border-collapse: collapse; 
 } 


/*============== league stuff ==================*/

table td {
	margin: 0;
	vertical-align: top;
	padding-top: 3px;
	padding-bottom:3px;
	border-spacing: 0;
	border-bottom: 1px solid #ccc;
}

table th { 
	font-weight: bold;
	font-size: 1.2em;
	line-height: 2em;
	border-bottom: 1px solid #ccc;
	text-align: center;
}


.eventtable th{ 
	text-align: left;
}
#tablelist {
	width:40%;
	margin-left:10%;
	background: #eca400;
}


tr.citytown td {
	padding-top: 2em;
	font-weight: bold;
}
tr.village td {
	font-weight: bold;
}

/*============== end league stuff ==================*/

hr {
	display:none;
}

img.logo {
  box-sizing: border-box;
	float:left;

}

h1 a {
	float:left;
	padding:0.5em; 
/**	text-decoration:none; **/
	color:#005596;
/** on main page, logo gets h1; on inside pages, title gets h1 **/
}

h1 {
	padding-bottom:0.66em; 
	font:bold 125%/150% merriweather, lato, arial, sans-serif; 
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	line-height:1.3em;
	color: #005596;
}

h2 {
	padding-bottom:0.66em; 
	font:bold 130%/150% merriweather, lato, arial, sans-serif; 
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	line-height:1.3em;
	color: #005596;
} 

h2.h2div, .subSection h2.h2div, .article h2.h2div {
	padding-bottom:0em; 
	text-align: left;
	border-top: 1px solid #cde;
	border-bottom: 1px solid #cde;
}

h2.signUp, #footerUpper h2.signUp {
/**	padding-top:1em; **/
	color: #521c50;
	text-align: center;
}

h3 {
	font-size: 1em;
	text-align: left;
	margin-bottom: 0;
}

p {
	padding-bottom:1em;
}

a:link {
	color: #005596;

}


a:hover {
	color: #eca400;; /** hover doesn't work on mobile phones **/
}

 span {
 color:#005596;
}

 span.emph {
	font-weight: bold;
	color:#be0f34;
}


/*==== navigation bar ===================*/

#navbar { 
	background: #fff; 
	font-size: 1em;
	padding: 10px;
	}

#navbar p  {
	list-style: none;
	color: #000;
	font-weight: bold;
	padding: 0 2px 0 2px;
	margin: 0;
	margin-top: 3px;
}

ul.navbarHeader {
	list-style: none;
	margin-left: 4px;
}

li.navbarHeader {
	border-top: 1px solid #aaa;
	font-weight: bold;
	color: #000;

}

ul.navbarItem {
	list-style: none;
	padding: 0 1em 1em 0.5em; 
	margin: 0 1em 0 2em;

}

p.navbarItem { 
		border-top: 1px solid #aaa;
}

.navbarItem li {
	margin: 0;
	padding: 2px 2px 2px 2px; 
	border-bottom: 1px solid #ccc;
	font-weight: normal;
	color: #005596;
}

li.navbarItemLast {
	border-bottom: none;
}

#navbar #currentPage {
	border: 1px solid #005596;
}

#navbar ul {
	margin-bottom: 0;
}

#navbar a{
	text-decoration: none;
}

.navbarItem a {
}

#navbar a:link {
	color: #000000;
}
/** #navbar a:visited {
	color: #000000;
} **/

#navbar a:hover {
	color: #eca400;
}
#navbar a span:hover {
	color: #eca400;
}


p.breadcrumbs {
	font-size: .8em;
/**	font-weight: bold; **/
	font-style: italic;
	padding: 0 0.3em 0.3em 0.3em;
	background: #ffffff;
}

/** ============= header ============= **/

#tabs {
        flex-shrink:0; 
        padding:0.75em 0;
        text-align:left;
	background:#005596;
	color:#fff;
	font-size: 110%; 
}

#tabs a {
        padding-left:2em;
        padding-right:2em;
	color:#fff;
        text-decoration: none; 
	font-size: 110%; 
}

#tabs div div {
	float:right;
	margin-left:1em;
        font-weight: bold;
        color:#fff;
}

#tabs a:hover {
        color: #eca400;
}


/*============== skiplink is mine and not working right  ==================*/
.skiplink {
	color: #005596;
}

.skiplink a {
	color: #fff;
} 

/**
.skiplink a:hover, a:visited {
	color: #fff;
}
**/


/** ============= main page divisions ============= **/

.contentBox, .atMediaBreak {
	padding:1em;
	margin-bottom:0.5em; 
	background:#fff;
}

#content {
	padding:1em 1em 0 0;
	margin-right:16em; /* == #extras width */
}

#extras,
#extras .firstly,
#extras .secondly {
	position:relative;
}

#extras {
	float:left;
/**	padding-top:1em; **/
	width:16em;
	margin-left:-16em; /* negative of width */
}

.subSection, .article {
	padding:0.75em 1em 0;
/**	border-top:solid 1px #cde; **/
} 

.main, .major {
	border-top:2px solid #cde;
	margin-bottom:1em;
}

.subSection ul,
.subSection ol, 
.article ul, 
.article ol {
	padding: 0 1em 1em 0.5em; 
	margin: 0 1em 0 2em;
}

ul.whereWhen {
	padding: 0 1em 1em 0.5em; 
	margin: 0 1em 0 2em;
	list-style-type: none;
}

#blog h3,
.specialNotice h3 {
	overflow:hidden; /* wrap floats and margins */
	zoom:1; /* legacy IE */
	padding-top: 1em; 
	font:bold 100%/110% merriweather, lato, arial, sans-serif;
}

#savethedate h2 {
	color: #521c50;
}

.advertly {
	text-align:center;
	font-size: 1.0em;
/**	border: solid 1px #cde; **/
/**	width:100%; **/
	height:auto;
}

.advertly p {
        color: #000000;
        text-align: center;
}

.advertly img {
        border: solid 1px #cde;
        width:80%;
} /* 150px pixels */

.advertly a {
        text-decoration:none;
        color:#000000;
}

.advertly a:hover {
/**	font-weight: bold; **/
	color: #eca400;
}

.electionInfo {
	padding: 0.5em ;
	border: solid 1px #cde; 
	text-align:left;
}


/** ============= footer is endless ============= **/

#footer {
	padding:0.75em 1em;
	flex:0 0 auto;
	color:#fff;
	background:#005596;
  	border-radius: 20px 20px 0px 0px;
}

#footer a {
	color:#fff;
}

#footer a:focus,
#footer a:hover {
	color:#eca400;
}


/** ========== from here ======= **/


#footer .footerLower {
        display: flex;
/**	
	max-width:72em; 
**/
      } 

#footer .footerLower {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

#footer .footerCard {
	padding: 10px;
	margin: 10px;
	background: #005596;
	}

#footer .footerCard {
	flex: 1 200px;
	}


/** ========== to here ======= **/


#footer h2 {
	text-align: left;
	font-weight:normal;
	font-size:1.2em;
	margin-bottom:0.66em;
}

#footer h3 {
	font-weight:normal;
	font-size:1.5em;
	margin-bottom:0.66em;
}

#footer ul {
	list-style:none;
}

#footer li {
	overflow:hidden;
	padding-bottom:0.5em;
}


#footerUpper, 
#footerUpper .sitemap {
	overflow:hidden; /* wrap floats */
	zoom:1; /* legacy IE */
	background:#fff;
	color:#005596; 
  	border-radius: 20px 20px 0px 0px; 
}

#footerUpper .sitemap h3 {
	padding-bottom:0em;
	font:bold 100%/120% merriweather, lato, arial, sans-serif;
	font-weight:normal;
	font-size:1.5em;
	margin-bottom:0.16em;
}

#footerUpper .sitemap {
	margin-bottom:1em;
	border-width:1px 0;
	padding:1em 4em 0; /** changed 1.5 to 4 **/
}

#footerUpper .sitemap div {
	overflow:hidden; /* wrap floats */
	zoom:1; /* legacy IE */
	padding:0;
}

#footerUpper .sitemap ul {
	list-style:none;
	float:left;
	padding-right:3em;
}

#footerUpper a {
	text-decoration:none;
	color:#005596;
}

#footerUpper a:active,
#footerUpper a:focus,
#footerUpper a:hover {
	color:#eca400;
}

.moreLink {
	text-align:right;
}

/** ========== from here ======= **/

/**
#footer .footerUpper {
        display: flex;
}

#footer .footerUpper {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

#footer .navMenu {
	padding: 10px;
	margin: 10px;
	background: #fff;
	}

#footer .navMenu {
	flex: 1 200px;
	}
**/

/** ========== to here ======= **/

/** ============ trailingplate ============== **/

.blogImage {
	text-align:center;
	padding:0.5em;
	padding-left:4%;
	background:#fff;
}

.blogImage {
	margin:0 auto;
}

.blogImage img {
	display:block;
	max-width:100%;
	height:auto;
	margin:0 auto 0.75em;
	-webkit-border-radius:0.25em;
	border-radius:0.25em;
}

.blogImage {
	float:right;
	max-width:50%;
/**	margin:0 0 1em 1em; **/
}

.blogImageLeft {
	float:left;
	max-width:50%;
/**	margin:0 0 1em 1em; **/
}

/**
.footerImage {
	width:50%;
	height:auto;
} **/

/** ============== to here ============ **/
/**
	.footerImage {
		text-align:center;
		width:15%;
} **/

/**
.footerImage {
	text-align:center;
	padding:0.5em;
	background:#fff;
}

.footerImage {
	margin:0 auto;
}

.footerImage img {
	display:block;
	max-width:60%;
	height:auto;
	margin:0 auto 0.75em;
}

.footerImage {
	float:right;
	width:60%
} **/



/** ============= @media rules ============= **/

@media (min-width:64em) {
	.wrapWidth {
		max-width:80em;
	}
	#content {
		padding-left:1em;
		margin-left:16em;
	}
	#extras {
		float:none;
		width:auto;
		margin:0;
		padding:0;
	}
	#extras .firstly,
	#extras .secondly {
		position:relative;
		width:16em;
		float:left;
		padding-top:1em;
	}
	#extras .firstly {
		margin-right:-16em;
		left:-100%;
	}
	#extras .secondly {
		margin-left:-16em;
	}

} /* max-width:64em */

@media (max-width:46em) {
	body {
		min-width:192px;
	}
	#content {
		margin:0;
		padding:1em 0 0;
	}
	#extras {
		float:none;
		clear:both;
		float:none;
		width:auto;
		margin:0;
		padding:0 17em 0 0;
	}
	#extras .firstly {
		float:left;
		width:100%;
	}
	#extras .secondly {
		float:left;
		width:16em;
		margin-right:-16em;
		left:1em;
	}

} /* max-width:46em */

@media (max-width:40em) {
	h1 {
		float:none;
		text-align:center;
		max-width:70%; 
	}
/**	img.logo {
	max-width:30em; 
	width:100%;
	height:auto;
} **/
	#tabs {
		padding:0.5em;
		text-align:center;
	}
	#tabs div div {
		float:none;
	}


	.wrapWidth {
		padding:0;
	}
	#content {
		padding:0;
	}
	#extras {
		padding:0;
	}
	#extras .firstly,
	#extras .secondly {
		float:none;
		margin:0;
		left:0;
		width:auto;
	}
	.contentBox, .atMediaBreak {
		padding:1em 0.5em;
		margin-bottom:0;
		border-top:2px solid #005596;
		background:#fff; /*%%%%*/
  	border-radius: 20px 20px 0 0;
	}
	.advertly img {
		width:40%;
	} 
	#footer {
		border:0;
	}
	.blogImage {
		float:none;
		margin:1em;
		max-width:100%;
} /**
#footer	.footerImage {
		text-align:center;
		width:50%;
} **/

#footer li.navMenuItemLast {
	border-bottom: 1px solid #cde;
	padding:1.em;
}


} /* max-width:40em */

@media (max-width:34em) {
	img.logo {
	max-width:30em;
	width:100%;
	height:auto;
} 

	.wrapWidth {
		padding:0;
	}
	#tabs {
		padding:0.5em;
		text-align:center;
	}
} /* max-width:34em */

@media (max-width:20em) {
	h1 img {
	display:block;
	max-width:100%;
	height:auto;
/**	width: 5%;  %%%% **/
	}
	img.logo {
	max-width:18em; /**%%%% argh **/
	width:100%;
	height:auto;
} 
	.advertly img {
	width:20%;
} 
} /* max-width:20em */