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

:root {
    --main-menu-bg-color : #0b59a2;
    --main-menu-text-color: #ffff00;
    --sub-menu-bg-color :  #0b59a2;
    --sub-menu-text-color: #ffff00;
    --main-menu-text-hover-color: orange;
    --sidebar-separator-bg-color: #0b59a2;
    --sidebar-separator-text-color: #ffff00;
    --page-title-bg-color: #0b59a2;
    --page-title-text-color: #ffff00;
}

/* Element Defaults.  Need table to prevent browser agent css from overriding */
table { font-size: inherit; color: inherit;}

/* Element Defaults.  Keep UI-Widget in line with body*/
html { min-height: 100%; height: auto;}
body { font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.25em; height: 100%; color: black}
li { margin: 10px 12px; }

/* Layout */
#document { width: 100%; float: left; box-sizing: border-box}

/** Main menu **/
.mainMenu { text-align: center; overflow: visible; float: left; width: 100%; clear:both; background-color: var(--main-menu-bg-color)}
.mainMenu li {display: inline; padding-left: 10px; font-family: 'Righteous', cursive; text-transform: uppercase; font-weight: normal; font-size: large; line-height: 1.5em;}
.mainMenu li a {color: var(--main-menu-text-color); font-weight: normal;}
.mainMenu li a:hover {color: var(--main-menu-text-hover-color); font-weight: normal;}

/** Submenu.  Have to set the font-size to 13, please do not change as it causes issues on IE/Firefox with menu items dissappearing **/
.subMenu {clear: both; font-size: 13px;}

#pageErrors { width:100%; text-align:center;}
#footer { background-color: #fff; margin-left: auto; margin-right: auto;  clear:both; overflow: hidden; z-index: 0;}
#footerContent { padding: 10px; }

/** Main Page Area. Overflow:hidden required to cause it to clear to get background color.  **/
#sidebar {display: none; min-height: 60vh; box-sizing: border-box}
#sidebarContent { padding: 10px; box-sizing: border-box}
#content { padding-bottom: 100px; box-sizing: border-box} /** Padding added so dropdowns don't flow into footer **/

/** Defined in other layouts, needed here **/
.card { clear: both; box-sizing: border-box}

/** Some overrides to the primefaces widgets as they are often a little skewed **/
/** Previous had a font size = small set for the .ui-widget but somehow this caused menubars to screw up on IE, so had to revert. **/
/** Really strange **/
/** Added padding to ui-selectonemenu so that it is visible on longer selected items **/
.ui-selectonemenu  { padding-right: 15px}
.ui-selectonemenu-item  { font-size: smaller}
.ui-accordion .ui-accordion-content { padding: 1em 1em;}

/** Growl **/
.ui-growl { top:200px; left:20px; }

/** Team roster overrides **/
.teamRoster tbody td { font-size: smaller}

/** Page notes, warnings and errors **/
.pageHeaderNotes a, .pageHeaderNotesWarning a, .pageHeaderNotesError a { color:blue; text-decoration: none; font-weight:bold; }
.pageHeaderNotes a:visited, .pageHeaderNotesWarning a:visited, .pageHeaderNotesError a:visited { color:blue; text-decoration: none; font-weight:bold; }
.pageSectionBubble { color: #ffffff; background:#075698; background:linear-gradient(#2e88c4, #075698);}
.pageSectionBubble a, .pageSectionBubble a:visited { color:yellow; text-decoration: none; font-weight:bold;}
.pageHeaderNotes a:visited, .pageHeaderNotesWarning a:visited, .pageHeaderNotesError a:visited { color:blue; text-decoration: none; font-weight:bold;}

/** Sidebar and page title and other headings **/
h3 { font-family: 'Righteous', cursive; font-weight: normal }
.sidebarMenuTitle { padding: 4px 10px; text-align: center;background-color:var(--sidebar-separator-bg-color); color: var(--sidebar-separator-text-color); font-family: 'Righteous', cursive; text-transform: uppercase; font-weight: normal}
.pageHeaderTitle h1, .body-about h1, .body-about h2 { font-size: 1.5em; padding: 8px; 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 {font-size: 1.1em; padding: 5px; text-align: center; font-family: 'Righteous', cursive; text-transform: uppercase; font-weight: normal }
.body-about h2 { font-size: inherit; text-align: left}

/** Profile Page **/
.playerProfilePicDiv { width: 100%; height: 427px; background-repeat: no-repeat; background-position: center; background-image: url(https://images.ottawafootysevens.com/footysevens/backgrounds/polaroidBackgroundWithLogo.jpg);text-align: center;}
.playerProfilePic { position: relative; left: 1px; top:80px;}

@media (max-width:500px){
    /** For ipads and lower res desktops, make the menu fit **/
    .mainMenu li {line-height: 1em}
    .divisionTable { font-size: small}
}

@media (max-width:1000px){
    #mainPageArea{width: 100%; border: none; background-color: white; clear:both; overflow: scroll;}
    #sidebar { display: none; width: 250px; z-index: 20; float: left; position:absolute; background-color: white; border: 1px solid black;}
    #footer {border-top: 2px solid black;}
    .mainMenu {display: none}
    .mainMenu .ui-menu.ui-menubar>.ui-menu-list>.ui-menuitem {display: block; text-align: left}
    .header {height:50px}
    .headerLogo { position:absolute; top:1px; left:50px; height:48px; width:48px;}
    .headerQuickFind {width:100%; clear:both; padding-top: 10px; z-index: 99; background: var(--main-menu-bg-color); }
    .headerQuickFind .ui-autocomplete {display: block; width: 100%; z-index: 99; }
    .headerQuickFind .ui-autocomplete input {width: 95%; padding: 10px; }
    .mainContentInner {margin: 10px;}
    .mainContent {width: 100%}
    .headerActionsMobile .mobileCurrentMenuButton {float: left; margin-left: 10px; margin-top: 10px}
    .headerActionsMobile .mobileHomeMenuButtons { position:absolute; float: right; right: 10px; top:10px}
    .mobileHide {display:none}
    .subMenu { display:none; width: 200px; float: left; position:absolute; z-index: 20;}
    .subMenu li.ui-menuitem {display: block; width:200px}
    .mainMenu {display:none; width:100%; z-index: 20;}
    .mainMenu li { border-top: 1px solid; display: block; text-align: center; padding: 10px 0px 10px 0px}
}

@media (min-width:1001px){
    /** Few pixels of padding for content + sidebar for the lunar and nova themes **/
    .header {min-width: 1000px;}

    #footer {width: 1000px;}

    /** Even though we are using flex on this layout, we need to set some boundary widths too **/
    #mainPageArea {display: flex; width: 1000px; background-color: white; border: 1px solid #C3BBB6; clear:both; margin-left: auto; margin-right: auto;}
    #sidebar { display:block; border-right: 1px solid darkgrey; flex: 0 0 20%;}
    #content { flex: 0 0 80%;}

    /** Player page no sidebar **/
    .body-player #sidebar { display: none;}
    .body-player #content { flex: 0 0 100%;}

    .mobileOnly {display:none}
    li.mobileOnly {display:none}

    /** Header.  Overflow:hidden required to cause it to clear to get background color. **/
    .header { width: 100%; min-width: 1000px; clear:both;height: 150px; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; }
    .headerLogo { position:absolute; top:1px; left:5px; height:150px; width:175px; z-index: 10;}
    .headerStatus { float: right; text-align: right; font-weight: bold; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; padding-right: 15px; width: 100%; height: 150px; padding-top: 0px}
    .headerStatus a { color: white; text-decoration: none;}
    .headerUserActions { margin-top: 10px; margin-right: 1px}
    .headerUserNotifications { position: absolute; bottom: 10px; right: 30px}
    .headerQuickFind .ui-autocomplete input {width: 500px}
    .headerQuickFind { margin-top: 10px; margin-right: 1px}
    .mainContentInner {margin: 20px;}
}
@media (min-width:1001px) and (max-width:1349px){
    /** For ipads and lower res desktops, make the menu fit **/
    .mainMenu li {font-size: 12px;}
}
@media (min-width:1100px) {
    #footer {width: 1050px;}
    #mainPageArea {width: 1050px; }
}
@media (min-width:1200px) {
    #footer {width: 1100px;}
    #mainPageArea {width: 1100px; }
}
@media (min-width:1350px) {
    #footer {width: 1200px;}
    #mainPageArea {width: 1200px; }
}