/*
Theme Name: Ballhockey Backup
Theme URI:
Description: Freddy Ball Hockey League theme.
Version: 1.0
Author: Michael Moore
Author URI: http://mkmdesign.ca/
Tags: red, black, clean, web2.0
*/

@import url(font-awesome.min.css);

* {box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

body {padding: 1em; font-family: 'Open Sans', Arial, sans-serif; font-size: 0.8em; line-height: 1.6em; color: #666; text-align: center; background-color: #eee;}
h1,h2,h3,h4,h5,h6 {font-family: 'Open Sans Condensed', Arial, sans-serif; font-weight: normal;}
h1 {margin-top: 0px; font-size: 300%; color: #333; line-height: 1.2em;}
h2 {margin: 0 0 1em 0; padding: 0; font-size: 240%; color: #333; line-height: 1.2em;}
h2.post {margin: 0; padding: 0; font-size: 240%; color: #333; line-height: 1.2em;}
h2 a {text-decoration: none;}
.pagetitle {padding-bottom: 0.5em;}
h2.widgettitle {font-size: 150%;}
h3 {margin-bottom: 0; text-transform: uppercase; font-size: 140%; color: #333;}
h3.comments {padding: 0;margin: 40px auto 20px ;}
h4 {margin: 0; padding: 0px; font-size: 120%; color: #333;}
em {font-style: normal; font-weight: bold; color: #ea020a;}
strong, b {font-weight: bold;}
a {color: #000; text-decoration: underline;}
a:hover {color: #666;}


img {border:0px;}
img.hometown-hockey {max-width: 100%; height: auto; border: 1px solid black;}

#feature {margin-top: 1em; border: 1px solid #000;}
#feature img {display: block; width: 100%;}

.msg {margin-top: 20px; border: 1px solid #e3dd9c; padding: 10px 10px 10px 60px; font-weight: bold; background: #ffffcc url(imgs/icon_caution.gif) no-repeat 10px 10px;}
div.clear {clear: both; font-size: 1%; line-height: 1%;}
hr {margin: 20px 0; height: 1px; border-width: 1px 0 0 0; border-style: dotted; border-color: #ddd; background: transparent; color: #FFF;}
img.featureLeft,
img.featureRight {float: left; padding: 4px; margin: 0 10px 0 0; border-left: 1px solid #CCC; border-right: 1px solid #CCC; border-top: 1px solid #DDD; border-bottom: 1px solid #AAA; background: #FFF;}
img.featureRight {float: right; margin: 0 0 0 10px;}

#gameupdates, #league-champions {display: block; width: 710px; height: 249px; overflow: hidden; background: url(imgs/game_updates.jpg) no-repeat;}
#gameupdates a, #league-champions a {display: block; position: absolute; z-index: 1; width: 710px; height: 249px; color: #fff; text-decoration: none;}
#gameupdates a:hover {color: #fff;}
#gameupdates .week {display: block; position: absolute; z-index: 2; color: #fff; font-size: 18px; font-weight: bold; text-transform: uppercase; margin: 145px 0 0 34px;}
#league-champions {background: url(imgs/league-champions.jpg) no-repeat;}


.wrapper {max-width: 1200px; margin: 0 auto;}
.content {display: flex; flex-direction: row; gap: 2em; padding: 2em; text-align: left; background: #fff;}

#content {display: flex; flex-direction: column; width: 70%;}
#content.full {width: 100%;}

@media screen and (max-width: 768px) {
	.content {display: block;}
	#content {display: block; width: 100%;}
}

#sidebar {display: flex; flex-direction: column; width: 30%; border: 1px solid #ddd; padding: 2em;}
#sidebar form {margin: 0;}
#sidebar h2 {margin: 5px 0 0;padding: 0;}
#sidebar ul {display: block; list-style: none; margin: 0px; padding: 0px;}
#sidebar ul li {display: block; margin-top: 10px;}
#sidebar ul li.widget {float: none; padding-bottom: 10px;}
#sidebar ul li h2.widgettitle {display: block; padding: 0px 10px;}
#sidebar ul li ul {padding: 0 2px;}
#sidebar ul li ul li {margin: 0px; padding: 0 10px; background: none;}

#sidebar img.sidead {width: 100%; max-width: 300px; height: auto;}

#sidebar .pagenav {padding-bottom: 10px;}

#gs-for-wordpress-widget {float: none !important;}
#gigya-socialize-widget-content {padding: 0px; float: none !important;}
.gs-for-wordpress-login-widget {padding-left: 10px;}
#gigya-socialize-widget-content a {float: none; display: inline;}
#gigya-socialize-widget-content form {display: none;}
#gigya-socialize-invite-friends-link {display: none !important;}
.widget_archive select {margin: 6px 0 0 10px; width: 180px;}

#twitter_div {line-height: 1.4em; word-break: break-all;}
#twitter_div a {text-decoration: none;}
#twitter_div ul {margin: 0px; padding: 0px; list-style: none;}
#twitter_div ul li {display: block; padding: 5px 10px !important; border-bottom: 1px dotted #ddd;}
#twitter_div a.more {display: block; padding: 5px 0 0 10px; font-size: 10px;}

div.weather_info {padding: 0 15px;}
p.weather_info {font-size: 10px; line-height: 1.3em;}

#flickr-sidebar {height: 200px;}
#flickr-sidebar a {display: block; float: left; padding: 8px 0 0 8px;}
#flickr-sidebar a img {padding: 2px; border: 1px solid #ccc; background-color: #fff; height: 50px !important; width: 50px !important;}
#flickr-sidebar a:hover img {border-color: #000; }
#flickr-sidebar a.more-photos {display: block; clear: both; font-size: 10px;}

.pagination {display: block; padding: 10px 0; border-top: 1px solid #eee;}
.pagination .alignleft, .pagination .alignright {display: inline-block; width: calc(width: 50% - 2px);}
.pagination .alignright {text-align: right;}
.pagination a {display: block; text-decoration: none; padding: 0.5em 1em; border: 1px solid #ddd; background: #f4f4f4;}

ol.commentlist {list-style: decimal; margin-left: 1.5em;}
ol.commentlist li {clear: both; font-size: 14px; color: #ccc; font-weight: bold; padding: 10px 0; border-bottom: 1px solid #eee;}
ol.commentlist li .comment-body, #respond {font-size: 12px; font-weight: normal; color: #666;}
ol.commentlist li .comment-body img.avatar {padding: 1px; border: 1px solid #ddd;}
ol.commentlist li .comment-body .vcard {float: left;}
ol.commentlist li .comment-body .comment-comment {margin-left: 46px;}
ol.commentlist li .comment-body .comment-comment .fn a {color: #666; text-decoration: none;}
ol.commentlist li .comment-body .comment-comment .fn a:hover {color: #000;}
ol.commentlist li .comment-body .comment-comment .says {display: none;}
ol.commentlist li .comment-body .comment-comment p {margin: 0px; display: inline;}
ol.commentlist li .comment-body .fn {font-style: normal; font-weight: bold;}
ol.commentlist li .comment-body .comment-meta {font-size: 10px; line-height: 1.3em; color: #999;}
ol.commentlist li .comment-body .comment-meta a {color: #999;}
ol.commentlist li .comment-body .comment-meta a:hover {color: #000;}
ol.commentlist li ul.children {list-style: none; margin: 0 0 0 80px; padding: 0px;}
ol.commentlist li ul.children li {border-bottom: 0px;}

#respond {margin-top: 10px; padding: 0 10px; background: #eee; border: 1px solid #ddd;}
#respond textarea {width: 500px;}

/* header and nav */
.header {position: relative; padding-top: 60px; margin: 20px auto 0 auto; color: #fff; text-align: left; background: #000;}
.header .date {position: absolute; right: 10px; top: 10px;}

img.headerad {display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

.logo {display: block; position: absolute; z-index: 9; top: 6px; left: 10px; margin: 0px; padding: 0px;}
.logo a {display: block; background: url(imgs/logo-2.png) no-repeat center center; background-size: contain;}
.logo, .logo a {height: 100px; width: 120px;}

.nav {height: 4em; padding-left: 140px; background: #f36f21;}
.nav ul {display: block; list-style: none; margin: 0px;}
.nav ul li {float: left; margin: 0 auto; line-height: 4em; font-weight: bold; text-transform: uppercase;}
.nav ul li a {display: block; color: #fff; line-height: 4em; padding: 0 1em; text-decoration: none;}
.nav ul li li a {line-height: 2em;}
.nav ul li a:hover {color: #fad7c3;}
.nav ul li.right {float: right;}
.nav ul li ul {visibility: hidden; opacity: 0; position: absolute; z-index: 2; margin-top: -1em; padding: 10px; width: auto; height: auto; box-shadow: 0px 8px 10px rgba(0,0,0,0.15); list-style: none; background: #f36f21;
	-webkit-transition: visibility 0.2s linear, opacity 0.2s linear, margin 0.2s linear;
	-moz-transition: visibility 0.2s linear, opacity 0.2s linear, margin 0.2s linear;
	-o-transition: visibility 0.2s linear, opacity 0.2s linear, margin 0.2s linear;
	-ms-transition: visibility 0.2s linear, opacity 0.2s linear, margin 0.2s linear;
	transition: visibility 0.2s linear, opacity 0.2s linear, margin 0.2s linear;
}
.nav ul li:hover ul {visibility: visible; opacity: 1; margin: 0px;}
.nav ul li ul li {display: block; background: none; float: none; line-height: 1.1em;}
.nav ul li ul li a {display: block; font-size: 12px; font-weight: normal; text-transform: capitalize; padding: 4px 0px;}
.nav ul li.page-item-219:hover ul {display: none;}

#home li.home a,
#schedule li.schedule a,
#teams li.teams a,
#standings li.standings a,
#gallery li.gallery a,
#contacts li.contacts a {color: #FFF;}
#home li.home a,
#gallery li.gallery a,
#contacts li.contacts a {background: none;}

/* DATE FORMATTING AND STYLES */
.item {clear: both; padding-top: 20px; border-top: 1px solid #eee;}
.item .news {margin-left: 70px;}
.item h2 {margin: 0;}
.item .date {float: left; display: block; width: 56px; height: 58px; text-align: center; color: #4c5a60; font-weight: bold; background: url(imgs/cal_bg.gif) no-repeat top center;}
.item .date em {display: block; height: 24px; line-height: 24px; font-size: 10px; color: #FFF; text-transform: uppercase;}
.item .date big {display: block; line-height: 22px; font-size: 30px;}
/*////////////////////////////////////////////////////

FOOTER STYLES

////////////////////////////////////////////////////*/
#footer {padding: 2em 0 1em 0; font-size: 0.75em; line-height: 1.6em; text-align: left;}
#footer a {color: #999;}
/*////////////////////////////////////////////////////

CALENDAR STYLES

////////////////////////////////////////////////////*/
table {width: 100%; padding: 0; margin: 0;}
table.cal th,
table.cal td {padding: 4px; text-align: center;}
table.cal th {color: #ea020a; text-transform: uppercase;}
table.cal th.left {text-align: left;}
table.cal tr.even td {background: #EEE;}
table.cal tr.cur td {border-top: 1px solid #f4cfd0; border-left: 1px solid #f4cfd0; font-weight: bold; background: #ffebec;}
table.cal td {width: 85px; border-left: 1px solid #DDD; border-top: 1px solid #DDD;}
table.cal td.label,
table.cal tr.cur td.label {width: auto; border-left: 0px; text-align: left; font-weight: bold;}
table.cal tr.cur td.label {padding-left: 20px; background-image: url(imgs/arrow.gif); background-repeat: no-repeat; background-position: 6px 9px;}
/*////////////////////////////////////////////////////

STANDINGS STYLES

////////////////////////////////////////////////////*/
table.standings th,
table.standings td {padding: 4px; text-align: center;}
table.standings th {color: #ea020a; text-transform: uppercase; background: #fff;}
table.standings th.left {text-align: left;}
table.standings th.sm {width: 40px;}
table.standings tr.even td {background: #EEE;}
table.standings tr.cur td {border-top: 1px solid #f4cfd0; border-left: 1px solid #f4cfd0; background: #ffebec;}
table.standings td {width: 60px; border-left: 1px solid #DDD; border-top: 1px solid #DDD;}
table.standings td.label,
table.standings tr.cur td.label {width: auto; border-left: 0px; text-align: left; font-weight: bold;}
table.standings tr.cur td.label {padding-left: 20px; background-image: url(imgs/arrow.gif); background-repeat: no-repeat; background-position: 6px 9px;}
table.standings td.points {border-top: 1px solid #f4cfd0; border-left: 1px solid #f4cfd0; font-weight: bold; color: #ea020a; background: #ffebec;}
table.standings tr.even td.points {border-top: 1px solid #f4cfd0; border-left: 1px solid #f4cfd0; background: #ffdbdd;}
table.standings td.xsm,
table.standings th.xsm {width: 20px;}
table.standings td.sm,
table.standings th.sm {width: 40px;}
table.standings td.lg,
table.standings th.lg {width: 120px;}
table.standings tr.notplayed td, table.standings tr.notplayed td a {color: #aaa;}

ul.col2 {margin: 0px; padding: 0px; list-style: none;}
ul.col2 li {display: block; float: left; clear: right; width: 50%; padding: 0px;}

.row {display: flex; gap: 24px; width: 100%;}
.row > .col {display: flex; flex-direction: column; width: 100%;}
/*////////////////////////////////////////////////////

ROSTER STYLES

////////////////////////////////////////////////////*/
table.roster {width: 100%;}
table.roster th, table.roster td {padding: 4px;}
table.roster th {text-align: left; font-weight: bold; border-bottom: 1px solid #ddd;}
table.roster td {text-align: left; border-bottom: 1px solid #ddd;}
table.roster tr:nth-child(2n) td {background: #f6f6f6;}
/*////////////////////////////////////////////////////

GAMES STYLES

////////////////////////////////////////////////////*/
.game_vs {display: block; width: 100px; position: absolute; margin: 180px 0 0 420px; text-align: center; font-weight: bold; font-size: 60px; color: #ddd; text-transform: uppercase;}
.game_team {font-size: 1.5em; font-weight: bold; color: #000; border-bottom: 1px solid #ddd; padding-bottom: 10px;}
.game_team a {color: #000; text-decoration: none;}
.game_team a:hover {color: #666;}
.game_team strong {display: block; float: right; text-align: right;}

.game_date {padding: 0.3em 0 0.3em 0.5em; margin: 2em 0 0 0; color: #fff; font-weight: bold; text-transform: capitalize; line-height: 1.5em; background: #111;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
}
.game_date.cur {background: #cc0000;}
.game_location {margin: 0px; padding: 0.5em 0; font-weight: bold; line-height: 1.5em;}
.games {margin: 0px; padding: 0px; list-style: none; display: block; font-size: 0px;}
.game {font-size: 12px;}
.game.sm {display: inline-block; margin: 0 1px 1px 0; font-weight: bold; color: #000; vertical-align: top; width: 100px; padding: 0 0 5px 0; text-align: center; border: 1px solid #ddd;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
}
.game.sm:first-child {border-left: 1px solid #ddd;}
.game.sm em {color: #666; display: block; padding: 5px 0; margin-bottom: 0.3em; font-size: 10px; font-weight: normal; background: #eee; line-height: 1em;}

.home-games {padding: 20px; text-align: center; color: #fff; background: #5f2c0d;
	background: -moz-linear-gradient(top, #5f2c0d 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #5f2c0d 0%,#000000 100%);
	background: linear-gradient(to bottom, #5f2c0d 0%,#000000 100%);
}
.home-games h3 {color: #fff;}
.home-games a {color: #f36f21;}
.home-games .logo {position: relative; top: auto; left: auto; margin: 0 auto 10px auto;}
.home-games .logo, .home-games .logo a {width: 80px; height: 72px;}
.home-games .game_date {margin-top: 0px; padding: 0 0 1em 0; line-height: 1.1em; background: transparent;}
.home-games .games {margin: 0 auto;}
.home-games .game.sm {margin-left: 1px; margin-right: 1px; margin-bottom: 4px; color: #fff; border-color: #fff; background: transparent;}
.home-games .game.sm em {color: #000; font-weight: bold; background: #fff;}

.btn {display: inline-block; vertical-align: middle; padding: 1em 1.5em; line-height: 1em; border-radius: 2em; border: 0px; background: #fff;}
.btn-primary {color: #fff; background: #f36f21; text-decoration: none;}
.btn-primary:hover {color: #fff; background: #ca5b1a;}

input.btn_save {display: block; width: 109px; height: 26px; border: 0px; padding: 0px; margin: 0px; background: url(imgs/btn_savechanges.gif) no-repeat}
input.btn_save:hover {background-position: center left;}
input.btn_save:active {background-position: bottom left;}

.breadcrumb {font-size: 10px; display: block; padding: 0 0 6px 0;}

.jersey_green,
.jersey_white,
.jersey_blue,
.jersey_orange,
.jersey_black,
.jersey_gray,
.jersey_yellow,
.jersey_purple,
.jersey_red,
.jersey_brown,
.jersey_grey,
.jersey_pink,
.jersey_lightblue {display: block; padding: 0 0 20px 20%; margin-bottom: 20px; background-repeat: no-repeat; background-position: top left; background-size: 16%;}
.jersey_green {background-image: url(imgs/jersey_green.jpg);}
.jersey_white {background-image: url(imgs/jersey_white.jpg);}
.jersey_blue {background-image: url(imgs/jersey_blue.jpg);}
.jersey_orange {background-image: url(imgs/jersey_orange.jpg);}
.jersey_black {background-image: url(imgs/jersey_black.jpg);}
.jersey_gray {background-image: url(imgs/jersey_gray.jpg);}
.jersey_red {background-image: url(imgs/jersey_red.jpg);}
.jersey_lightblue {background-image: url(imgs/jersey_lightblue.jpg);}
.jersey_yellow {background-image: url(imgs/jersey_yellow.jpg);}
.jersey_purple {background-image: url(imgs/jersey_purple.jpg);}
.jersey_brown {background-image: url(imgs/jersey_brown.jpg);}
.jersey_grey {background-image: url(imgs/jersey_grey.jpg);}
.jersey_pink {background-image: url(imgs/jersey_pink.jpg);}

.player_photo {display: block; float: left;}
.player_photo img {padding: 4px; border: 1px solid #ddd; height: auto;}
.player_info {margin-left: 180px;}
.player_name {font-size: 30px; line-height: 1.3em;}
dl.player_stats {margin: 0px; padding: 0px;}
dl.player_stats dt {display: block; float: left; color: #999;}
dl.player_stats dd {margin-left: 100px;}

.posts {display: block;}
.post-item {display: block; padding: 1em 0; border-top: 1px solid #ddd;}
.post-title {margin: 0px; padding: 0px; font-size: 2em; line-height: 1.1em;}
.post-title a {color: #000;}
.post-title a:hover {color: #f36f21;}
.post-body {padding-top: 1em;}
.post-body a {display: none;}
.post-datetime {display: block; padding-top: 0.5em; font-size: 11px; line-height: 1.6em; font-weight: bold;}
.post-metadata {display: block; padding: 0.5em 0; font-size: 10px; line-height: 1.6em; color: #999;}

.posts.home .post-item {display: inline-block; width: calc(50% - 2px); vertical-align: top; padding: 1em;}

.single-post .entry p {max-width: 800px; margin: 0 auto;}
.entry .postmetadata {font-size: 11px; line-height: 14px; color: #999;}

.widget_ffb {padding-bottom: 0px !important; background: none !important;}

.entry p {padding-bottom: 1em;}
.entry ul {list-style: disc; margin-left: 1em; padding: 0 0 1em 1em;}
.entry ol {list-style: decimal; margin-left: 1em; padding: 0 0 1em 1em;}

/* facebook fan page widget */
#alert {padding: 1em; color: #000; font-weight: bold; border: 1px solid #dfc934; background-color: #f6f6d4;}
#alert ul {list-style: none; padding: 0px; margin: 0px;}
#alert ul li {display: block; max-width: 800px; margin: 0 auto;}
#alert ul li > * {font-size: 1em; line-height: 1.4em;}

.dk-speakup-petition .dk-speakup-message {width: 700px !important; height: 10em !important;}

.mobile-icon {display: none;}

.message {text-align: center; max-width: 600px; margin: 0 auto; padding: 4em 0;}


/*
    
    Wordpress overrides

*/

.wp-block-button__link {backgroaund-color: #000 !important;}
.wp-block-button__link:hover {color: #fff; background-color: #333 !important;}

/*
    
    Responsive design media queries

*/
@media screen and (max-width: 768px) {
	body {padding: 0px;}
	.mobile-icon {display: block; position: absolute; right: 1em; z-index: 10; top: 20px; right: 1em; height: 2em; width: 2em; line-height: 2em; text-align: center; font-size: 18px; color: #fff; background: #000; cursor: pointer;}
	.mobile-icon .fa-remove {display: none; margin-top: 8px;}
	.mobile-icon .fa-bars {display: block; margin-top: 8px;}
	.show-menu .mobile-icon .fa-bars {display: none;}
	.show-menu .mobile-icon .fa-remove {display: block;}
	.header {margin-top: 0; padding-top: 150px;}
	.logo {top: 20px; left: 50%; transform: translateX(-50%);}
	img.headerad {max-width: 468px; width: 100%; height: auto;}
	.nav {display: none; position: relative; padding-left: 0; height: auto;}
	.nav ul li {display: block; float: none; line-height: 1.6em; text-align: center;}
	.nav ul li a {line-height: 3em;}
	.nav ul li ul {position: relative; margin-top: 0px; visibility: visible; opacity: 1; box-shadow: none;}
	.nav ul li:hover ul {margin-top: 0px;}
	.show-menu .nav {display: block;}
	#content, #content.narrowcolumn, #sidebar {float: none; width: 100%; padding: 0px;}
	#content {padding-bottom: 2em;}
}

@media screen and (max-width: 520px) {
	.post-item, .posts.home .post-item {display: block; width: 100%;}
}