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

*,body,html { margin: 0; padding: 0; font-family: Lato,sans-serif;}
h1,h2 { font-weight: 900; text-transform: uppercase;}
h1,h2,h4 { padding: 10px 0;}
a, a:visited, a:hover, a:active { color: red; 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 { font-size: 18px;}
h4 { margin: 15px 0;}
p { line-height: 24px; padding: 16px 0;}
a:visited, a:hover, a:active { color: inherit}

.nav-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.header-wrapper { background-color: white;}
.banner,.content-wrapper,.header { margin: 0 auto; max-width: 1000px; overflow: hidden;}
.content-wrapper { margin-top: 5px;}
.header-wrapper { overflow: hidden;}
.header-nav { float: left; text-align: right; text-transform: capitalize; width: 75%;}

/** Makes sure enough distance to footer **/
.content-wrapper { padding-top: 20px; padding-bottom: 50px}

.footer-nav,.footy-copyrights,.program,.reason,.reasons-heading>h1 {text-align: center;}
.header-nav li { display: inline;}
.header-nav li a { color: #71CC8D; 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: red}
.header-nav .menu-level1 li a {}
.header-nav .menu-level2 ul {}
.header-nav .menu-level2 li a {}

/** Make sure menu items can be seen **/
.main-menubar {background-color: #71CC8D; width: 100%;}
.main-menubar { overflow: visible; text-align: center}
.main-menubar li { display: inline; padding-left: 20px}
.main-menubar li.normal-menu-item {}
.main-menubar li.normal-menu-item a { color: white; padding-top: 15px; padding-bottom: 15px; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-block; text-transform: uppercase;}
.main-menubar li.normal-menu-item a.active, .main-menubar li.normal-menu-item a:hover { color: red}

.main-menubar .ui-menu {background-color: #71CC8D; border: none}
.main-menubar .ui-menu .ui-menu-parent li a { color: #71CC8D;}
.main-menubar .ui-menu  li a:hover { color:#71CC8D;}

.footy-footer { max-width: 1000px; margin: 0 auto;}
.footy-footer-wrapper { background-color: #000; padding: 50px 0; overflow: hidden; text-align: center;}
.footer-nav { text-transform: capitalize; width: 100%; overflow: hidden; padding: 20px 0;}
.footer-nav li { display: inline;}
.footer-nav li a { color: #fff; 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: #fad417;}
.footer-nav.social { padding: 0;}
.footy-copyrights { font-weight: 300; font-size: 11px; text-transform: uppercase; color: #fff;}

/** Page header notes stuff **/
.main ul {overflow: hidden; }


/** Sidebar and page title **/
.sidebarMenuTitle { padding: 4px 10px; text-align: center;background-color:#71CC8D; color: #ffffff; font-family: 'Righteous', cursive; text-transform: uppercase; font-weight: normal}
.pageHeaderTitle h1 { padding: 10px; text-align: center;background-color:#71CC8D; color: #ffffff; 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 }

/** Pickup game stuff **/
.pickupGameListItem { border-bottom: 3px solid #71CC8D;;}
.pickupGameMyInterest { color:#F1F6F9; background:#F7941E;}

@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}
}
@media only screen and (max-width:1000px) {
    .header-logo-plus-buttons { width: 100%; margin: 10px 10px 10px 10px;}
    .header-logo-plus-buttons .header-logo-imgs { float: left; width: 40%;}
    .header-logo-plus-buttons img {width: 100%; height: auto; max-width: 186px}
    .header-logo-plus-buttons .header-menu-buttons {float:right; text-align: right; padding-right: 20px;}
    .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 { min-width:97%;}
    .main-menubar-mobile {background-color: #71CC8D; height: 5px}
    .main-menubar { width:100%; display:none}
    .main-menubar li { border-top: 1px solid; display: block; text-align: center; padding: 10px 10px;}
    .mobileHide {display:none}
}
@media only screen and (min-width:1001px) {
    .header-logo-plus-buttons { float: left; width: 25%;}
    .header-logo-plus-buttons img {padding-top: 10px;}
    .header-menu-buttons { clear: both;}
    .header-menu-buttons .mainMenuButton { display: none;}
    .header-menu-buttons .subMenuButton { display: none;}
    .main-body-admin .subMenuButton {display: none}
}

/** For the devices with view port etc **/
@media (min-width: 960px){
    #layout-topbar{min-height:110px;}
    #logo{height:75px;  margin-top: 5px; margin-bottom: 5px}
}

@media (min-width:320px) and (max-width: 960px) {
    #logo { height: 50px; margin-top: 5px; margin-bottom: 5px}
    .decoratedLabelInputWithError { width: 100%; clear:both; padding-top:2px}
    .decoratedInputLabel, .decoratedInputLabelInError {float:left; clear: both; padding: 2px; width: 100%}
    .decoratedInputField, .decoratedInputFieldInError {float:left; width: 100%; clear:both;}
}

@media (min-width:320px) and (max-width: 500px) {
    .largeTextInput { width: 275px;}
    .mediumTextInput { width: 250px;}
}