@charset "utf-8";
@import "/javax.faces.resource/css/styles.css.seam?ln=common-layout&nocache=1750755676082";

:root {
    --header-bg-color: #0b59a2;
    --header-link-color: white;
    --header-link-hover-color: #fad417;
    --header-logo-bg-style: url('https://images.footyforall.ca/footyforall/home/logo-footy4all.png') no-repeat center;
    --header-logo-width: 186px;
    --header-logo-height: 50px;
    --header-logo-padding-top-bottom : 0px;
    --sidebar-bg-color: #0b59a2;
    --sidebar-font-color: white;
    --sidebar-link-color: white;
    --sidebar-link-hover-color: #fad417;
    --sidebar-menu-title-bg-color: #0b59a2;
    --sidebar-menu-title-font-color: #ffff00;
    --footer-bg-color: black;
    --footer-font-color: white;
    --footer-link-color: white;
    --footer-link-hover-color: #fad417;
    --page-title-bg-color: #0b59a2;
    --page-title-text-color: #ffff00;
    --submenu-mobile-bg-color: #0b59a2;
    --submenu-mobile-font-color: #ffff00;
}

*,body,html { margin: 0; padding: 0; font-family: Lato,sans-serif;}
h1,h2 { font-weight: 900; text-transform: uppercase;}
h1,h2,h3,h4 { padding: 5px 0;}
a, a:hover { color: red; text-decoration: none;}
a:visited, a:active { text-decoration: none;}

h1 { font-size: 30px;}
h2 { font-size: 24px;}
h4,p { font-weight: 300;}
h4 {font-size: 22px; border-bottom: 1px solid; margin: 0 0 20px;}
button,p,li { font-size: 18px;}
h4 { margin: 15px 0;}
p { line-height: 24px; padding: 5px 0;}

.nav-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.header-wrapper { background-color: var(--header-bg-color)}
.banner,.content-wrapper,.header { margin: 0 auto; max-width: 1000px; }
.content-wrapper { margin-top: 5px;}
.header-wrapper { overflow: hidden;}
.header-nav { float: left; text-align: right; text-transform: capitalize; width: 75%;}
.header-logo-imgs { padding-top: var(--header-logo-padding-top-bottom); padding-bottom: var(--header-logo-padding-top-bottom);}
.header-logo-img { width: var(--header-logo-width); height: var(--header-logo-height); background: var(--header-logo-bg-style); background-size: contain;}



.footer-nav,.footy-copyrights,.program,.reason,.reasons-heading>h1 {text-align: center;}
.header-nav li { display: inline;}
.header-nav li a { color: var(--header-link-color); padding: 8px 20px; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-block; text-transform: uppercase;}
.header-nav li:last-child a { padding-right: 0;}
.header-nav li a.active,.header-nav li a:hover { color: var(--header-link-hover-color)}
.header-nav .menu-level1 li a {}
.header-nav .menu-level2 ul {}
.header-nav .menu-level2 li a {}

.banner-wrapper { border-bottom: 10px solid #fad417; overflow: hidden; }

.main {}
.main li {margin: 5px 0; padding: 5px 15px; }
.main ul {overflow: hidden; list-style-image:url('https://images.footyforall.ca/footyforall/home/16px-soccer-ball.jpg'); padding-left:25px;}

.aboutPage {}

.footy-footer { max-width: 1000px; margin: 0 auto;}
.footy-footer-wrapper { background-color: var(--footer-bg-color); padding: 50px 0; overflow: hidden; text-align: center; color: var(--footer-font-color);}
.footer-nav { text-transform: capitalize; width: 100%; overflow: hidden; padding: 20px 0;}
.footer-nav li { display: inline;}
.footer-nav li a { color: var(--footer-link-color); padding: 30px 20px; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-block; text-transform: uppercase;}
.footer-nav li a:hover,.header-nav li a.active { color: var(--footer-link-hover-color)}
.footer-nav.social { padding: 0;}
.footy-copyrights { font-weight: 300; font-size: 11px; text-transform: uppercase; color: var(--footer-font-color);}

/** Our custom stuff for sidebar display.  Only show on certain subsystems **/
.sidebar {display: none; background-color: var(--sidebar-bg-color); color: var(--sidebar-font-color); min-height: 60vh;}
.sidebarContent {padding: 10px}
.sidebar a, .sidebarMenu a { color: var(--sidebar-link-color); font-size: 15px; font-weight: 700; text-decoration: none; display: inline-block; text-transform: uppercase;}
.sidebar a.visited, .sidebarMenu a:visited {  color: var(--sidebar-link-color);}
.sidebar a.active, .sidebar a:hover, .sidebarMenu a:hover, .sidebarMenu a:active { color: var(--sidebar-link-hover-color)}
.sidebarMenu li, .sidebar li { padding-bottom: 10px;}

.sidebarMenuTitle { padding: 4px 10px; text-align: left; background-color:var(--sidebar-menu-title-bg-color); color: var(--sidebar-menu-title-font-color); font-family: 'Righteous', cursive; text-transform: uppercase; font-weight: normal}
.pageHeaderTitle h1 { padding: 10px; text-align: center;background-color:var(--page-title-bg-color); color: var(--page-title-text-color); font-family: 'Righteous', cursive; text-transform: uppercase; font-weight: normal }
.pageHeaderTitle h2 {padding: 5px; text-align: center; font-family: 'Righteous', cursive; text-transform: uppercase; font-weight: normal }

/** Product Info **/
.productProductInfo { border: none; position:relative; margin:1em 0 1em 0; border-radius:10px; color:#fff; background:#2e88c4; background-image: linear-gradient(#2e88c4, #075698);}
.productProductInfo label { color: yellow;font-weight: bold;}

/** Pickup game stuff.  Have to override main li stuff **/
.pickupGameDataList ul { padding-left: 0px}
.pickupGameDataList ul li { margin: 0px; padding-left: 0px}
.pickupGameListItem { border-bottom: 3px solid var(--header-bg-color);}

@media only screen and (max-width:320px) {
    /** Smaller fonts on smaller phones for the menu buttons so they fit **/
    .header-logo-plus-buttons {font-size: small}
}

/** Everything including ipads has a toggleable menu **/
@media only screen and (max-width:1299px) {
    :root {
        --header-logo-width: 100px;
        --header-logo-height: 27px;
    }
    .header-logo-plus-buttons { width: 100%;}
    .header-logo-plus-buttons .header-logo-imgs { float: left; width: 40%; margin-left: 10px; margin-top: 5px; margin-bottom: 5px}
    .header-logo-plus-buttons .header-logo-img {}
    .header-logo-plus-buttons .header-menu-buttons {float:right; text-align: right; padding-right: 20px; margin-top: 10px; margin-bottom: 10px}
    .header-nav { width: 100%; display: none;}
    .header-nav li a { border-top: 1px solid; display: block; text-align: center; padding: 30px 20px;}
    /** Make sure it doesn't go right to the edge on mobile screens **/
    .content-wrapper { margin-left: 5px; margin-right: 5px}
    .sidebar { width:100%; clear: both; }
    .subMenu { display:none; width: 200px; float: left; position:absolute; z-index: 20;}
    .subMenu li.ui-menuitem {display: block; width:200px}
}

/** For larger screens, let the submenu always be visible.  **/
@media only screen and (min-width:1300px) {
    .header-logo-plus-buttons { float: left; width: 25%;}
    .header-logo-plus-buttons .header-logo-img {padding-top: 20px;}
    .header-menu-buttons { clear: both;}
    .header-menu-buttons .mainMenuButton { display: none;}

    .content-wrapper { max-width: 1250px; display: flex; margin-bottom: 5px }
    .sidebar { display:block; flex: 0 0 20%;}
    .main { background: white; margin-left: 10px; flex: 0 0 80%;}
    .header-menu-buttons { display: none;}
    .footy-footer-wrapper { width:100%; clear:both}

    /** For specific pages **/
    .main-body-admin .subMenuButton {display: none}
    .main-body-player .sidebar { display: none;}
    .main-body-player .main { width: 1250px; max-width: 1250px; padding-left: 0px}
}