/*  Have to import like this for primefaces resources */
@import "https://fonts.googleapis.com/css?family=Cabin+Sketch:bold";
@import "https://fonts.googleapis.com/css?family=Permanent+Marker";
@import "https://fonts.googleapis.com/css?family=Righteous";
@import "/javax.faces.resource/css/styles-common.css.seam?ln=common-layout&nocache=1583747261708&nocache=1583747261708";
@import "/javax.faces.resource/css/layout.css.seam?ln=common-layout&nocache=1583747261708&nocache=1583747261708";
@import "/javax.faces.resource/css/forumAndMessages.css.seam?ln=common-layout&nocache=1583747261708&nocache=1583747261708";

/* Top level settings, no margins or padding initially so we can define our own */
body, div, dd, dt, dl, img, ul, ol, li, p, h1, h2, h3, h4, h5, form, hr, fieldset { margin: 0; padding: 0;}

label {	font-weight: bold; vertical-align: bottom; }
img { border: 0; }

ol, ul { margin: 10px 0px 10px 6px; }
fieldset { border: 0;}

/* Img so that it doesn't bust frames on mobile **/
img {max-width: 100%}

/* General
----------------------------------------------- */

.center { text-align: center;}
.entry { clear: both; padding-top: 10px;}
.entry .label { float: left; padding-top: 10px; padding-right: 5px; font-weight: bold; width: 150px; text-align: right; }
.entry .output { float: left; width: 250px; padding-top: 10px; text-align: left;}
.entry .input { float: left; width: 250px; text-align: left; }

/* Sidebar */
.notes { text-align: center; font-size: small; }
.subnotes { margin-top: 1em; font-size: small;}
.errors { font-size: small; font-weight: bold; text-align: center; color: #600;}
.errors div { text-align: left;}
.errors input { border: 1px solid #600;}
.errors ul { list-style: none;}
.buttonBox { text-align: center; padding: 5px 0;}
#sidebar p { font-size: small; color: #8B7869; line-height: 150%; padding-bottom: 10px;}
#sidebar li { font-size: small; color: #8B7869;}
#sidebar h1 { line-height: normal; font-weight: bold; font-size: small;}

/* Sidebar menus **/
.sidebarMenuTitle { padding: 4px 10px}
.sidebarMenu { list-style: none;}
.sidebarMenu a { color: #600; text-decoration: none; font-weight:normal;}
.sidebarMenu a.selected { font-weight:bold;}

/*
 * Content, The main page area and tables and such
 */
.section, .sectionSeparator {float: left; width: 100%; clear:both; padding-top: 10px; padding-bottom: 10px;}
.sectionSmallerPadding {float: left; width: 100%; clear:both; padding-top: 2px; padding-bottom: 2px;}
.sectionNoPadding {float: left;	width: 100%; clear:both;}
p { padding-bottom: 10px;}

.actionButtons { float:right;}
.datePickerInvisibleInputPart input {display: none}

.editDataTable { width: 100%; }
.editDataTable, .editDataTable td, .editDataTable tbody td { border: none;}
.noBorderDataTable, .noBorderDataTable tr, .noBorderDataTable td {border: none;}

/** Common ones.  Added div. to the insertedPageHTMLContent to increases specificity and override the original style **/
div.insertedPageHTMLContent {}
div.insertedPageHTMLContentEditMode { min-height: 100px; border: 2px solid red}
.footyShirt { width:100px; }
.modalPanelCloseIcon { padding-top: 2px; padding-right: 1px; cursor: pointer;}
.hiddenField { display: none;}
.exclusiveStatusDialog { width: 250px; height: 250px; background: transparent url("/javax.faces.resource/images/animatedSoccer.gif.seam?ln=common-layout&nocache=1583747261708&nocache=1583747261708") no-repeat center; }

/** General primefaces other things.  Checkbox menu panel needs to have a width as we are getting issues on some pages **/
.ui-selectcheckboxmenu-panel { min-width:200px}

/** General data tables, we can't be too specific on data tables.  Need to set the header as wrappable as lots of tables are too big in primefaces**/
/** Need padding on bottom of container to prevent the lopping off of items **/
/** table-layout overriden from primefaces 5 upgrade which was a little different (fixed col widths) **/
/** generalDataTableContainerNoOverflow was needed for sub tables overflowing **/
.ui-datatable table.dynamicSizedColDataTable {table-layout: auto}
.ui-datatable table.generalDataTable {table-layout: auto}
.ui-datatable table.generalLayoutOnlyTable {table-layout: auto}
.generalDataTableContainer  { width: 100%; overflow: auto; padding-bottom:10px}
.generalDataTableContainerNoOverflow  { width: 100%; padding-bottom:10px }
.generalDataTableContainerNoOverflow .ui-datatable-tablewrapper table  { width:99.9% }
.generalDataTable {	width: 100%; border-collapse: collapse;}
.generalDataTable caption {	padding-bottom: 6px; text-align: left; font-weight: bold; }
.generalDataTable thead th { text-align: left; white-space: normal }
.generalDataTable tbody td { white-space: normal}
.generalDataTable .noWrapColumn {white-space: nowrap; }
.generalDataTableSmallerText tbody td { font-size: smaller}
.generalDataTable .actionsCol {width: 50px}
.generalDataTable .smallColumn {width: 30px}
.generalDataTable .smallCol {width: 30px}
.generalDataTable .idCol {width: 50px}
.generalDataTable .tinyCol {width: 10px}
.generalDataTable .moneyCol {width: 100px}
.generalLayoutOnlyTable {border: none}
.generalLayoutOnlyTable tbody tr {border: none}
.generalLayoutOnlyTable tbody th {border: none}
.generalLayoutOnlyTable tbody td {border: none; padding: 2px;}
.generalDataGrid {	width: 100%; border-collapse: collapse;}
.generalDataGridNoBorder {width: 100%; border-collapse: collapse; border: none}
.generalDataGridNoBorder .ui-datagrid-content {border: none}
.generalDataGridNoOtherDecoration {}
.generalDataGridNoOtherDecoration .ui-datagrid-content {background:none}

/** Preview pane for items that may be  visible in a primefaces component, but we want to see them outside it **/
.previewPane {background: none; background-color: white; color:black; border-radius:10px;border-style:solid; padding-left: 5px; padding-right: 5px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.previewPane a {color:inherit}
.popupPreviewPane {background: none; background-color: white; color:black;}

/** Popup dialogue that makes sure we don't go to big on mobiles.  .ui-dialog is a catch all **/
.popupDialog { max-width: 100%;}
.ui-dialog {max-width: 100%}

/** Data list **/
ul.regularDataList li {margin-left: 5px; list-style: disc}
ol.regularDataList li {margin-left: 5px; list-style: disc}

/** Some Column Widths For Data Grids.  Need to fully qualify some css for overide of theme**/
.regularDataGrid { width:100%; clear:both}
.noOverflowColumn, tbody td.noOverflowColumn {white-space: nowrap}
.iconColumn, tbody td.iconColumn {width:25px}
.halfWidthColumn { width: 50%}
.thirdWidthColumn { width: 33%}
.quarterWidthColumn { width: 25%}
.fifthWidthColumn { width: 20%}
.tenthWidthColumn { width: 10%}
.fullWidthInputField {width: 95%}
.smallTextInput { width: 100px}
.mediumTextInput { width: 300px}
.largeTextInput { width: 500px;}
.pseudoLabel {font-weight: bold; padding-right: 10px }

/* Commmon link and message styles */
.errorMessage { color: red; font-weight: bold; list-style: none; }
.warnMessage { color: orange; font-weight: bold; list-style: none;}
.infoMessage { color: blue; font-weight: bold; list-style: none;}
.generalInfoText { font-weight: bold; }
a, .generalLink, .tooltipLink { cursor: pointer; text-decoration: none; font-weight: bold; }
.highlightedRow {background-color:#F1F1F1; }
.clickedRow {background-color: #E2F6E2}

/** Input Field Templates **/
.decoratedLabelInputWithError { width: 100%; clear:both; padding-top:4px}
.decoratedInputLabel, .decoratedInputLabelInError {float: left; width: 25%;}
.decoratedInputLabelInError { color:red }
.decoratedInputField, .decoratedInputFieldInError {float: left; width:70%; padding-left:10px }
.decoratedInputFieldInError {color:red}
.decoratedInputFieldinputFieldErrorMessage {padding-left:5px }
.decoratedInputLabelWithPadding { padding-top: 10px}

/** Some common top level notes **/
.pageHeaderTitle { padding-bottom: 25px; width:100%; clear: both}
.pageHeaderTitle h1 { font-size: x-large; text-align: center; line-height: 1.25em; font-family: inherit  }
.pageHeaderTitle h2 { text-align: center; line-height: 1.25em; font-family: inherit }
.pageHeaderNotes {border: 1px dashed green; background-color: #E2F6E2; padding:5px; margin-bottom: 15px;}
.pageHeaderNotesWarning {border: 1px dashed red; background-color: yellow; padding:5px; margin-bottom: 15px;}
.pageHeaderNotesError {border: 1px dashed maroon; background-color: #ff4500; padding:5px; margin-bottom: 15px;}

/* Action pull downs **/
.actionPulldownMenu {float: right}
.ui-menubutton .ui-button { min-height: 25px}

/** Notiication message about the mobile version **/
.notificationOfMobileVersionBar { z-index: 9999; background-color: black; font-size: xx-large; color: yellow; line-height: 1.5em;}
.notificationOfMobileVersionBar.ui-notificationbar { padding: 10px; height: 500px;}
.notificationOfMobileVersionBar .notificationOfMobileVersionBarInfoDiv { text-align: center; width: 100%; clear: both}
.notificationOfMobileVersionBar .notificationOfMobileVersionBarButtonsDiv { text-align: center; width: 100%; clear: both; padding-top: 25px}

/* Polls, for the votes screen */
.pollDiv {padding-bottom:10px; padding-top:10px; width:100%; clear:both;}
.pollDiv .pollTitle { width:100%; float: left; clear:both; font-weight: bold; padding-bottom: 10px; }
.pollDiv .pollResultsLink { float: left; clear:both; cursor: pointer; padding-top: 10px;}
.pollDiv .pollDescription { width:100%; float: left; clear:both; padding-bottom: 10px; }
.pollOptionsTable,  .pollOptionsTable td { border: none; }
.pollOptionsTable,  .pollOptionsTable td { border: none; }

/** Pending Evends Popup **/
.popupPanelMainArea p { padding-bottom: 10px; }

/** League division switcher **/
.leagueDivisionSwitcher {}
.leagueDivisionSwitcher .ui-menu-parent .ui-menu-list {  margin-left: 1px}

/** A division table **/
.divisionTable {}
.divisionTable .statCol { width: 1%; white-space: nowrap}

/** Fixtures and result output */
.fixturesPage { width:100%; clear:both}
.fixturesPage .fixtureDateSeparator {width:100%; clear:both}
.fixturesPage .fixtureDivisionSeparator {width:100%; clear:both;padding-top:10px; color: #5D1414;font-weight:bold;}
.fixturesPage .infoLink { width:20px;}
.fixturesPage .startTime { width:50px; font-weight:bold; }
.fixturesPage .homeTeam { min-width:180px;}
.fixturesPage .teamJerseys { width:85px; text-align: center; white-space: nowrap}
.fixturesPage .awayTeam { min-width:180px;}
.fixturesPage .location { width:110px; font-weight:bold; font-style:italic; text-align:right; }
.fixtureResultsPage { width:100%; clear:both}
.fixtureResultsPage .fixtureDateSeparator {width:100%; clear:both;}
.fixtureResultsPage .fixtureDivisionSeparator {width:100%; clear:both;padding-top:10px; color: #5D1414;font-weight:bold;}
.fixtureResultsPage .infoLink { width:20px;}
.fixtureResultsPage .homeTeam {min-width:295px;}
.fixtureResultsPage .homeTeamScore { width:25px;}
.fixtureResultsPage .awayTeam {min-width:295px;}
.fixtureResultsPage .awayTeamScore {width:25px;}

/** Fixture Details Page **/
.fixtureDetailsGameTypeHeader { font-weight: bold; text-align: center}

/** Fixtures and result output */
.generatedFixturesPage { width:100%; clear:both}
.generatedFixtureRow {}
.generatedFixtureRow .previousEncounters { width: 1%}
.generatedFixtureRow .homeTeam { width:400px;}
.generatedFixtureRow .teamJerseys { width:125px;}
.generatedFixtureRow .awayTeam {}

/** Products table for admin **/
.productsAdminTable {}
.productsAdminTable tbody td { font-size: smaller}

/** Products table **/
.productsTableContainer { width:100%}
.productsTable {}
.productsTable thead th {white-space: normal; text-align: center}
.productsTable tbody td {white-space: normal}
.productsColumnHeaders { }
.productsSubColumnHeaders {}
.productsSpannerColumn {  }
.productsColumnData { text-align: center}
.productsColumnPrice { width: 100px; font-size: smaller}
.productsSpannerRows { font-family: Verdana, Arial, Helvetica, serif; font-weight:bold; font-size: 16px; background-color:#F1F1F1; text-align:center; }
button.ui-button.productDetailsButton { /* No override, let the skin decide **/}
button.ui-button.productInviteOnlyButton { /* No override, let the skin decide **/}
button.ui-button.productSoldOutButton { background-image: none; background-color: red; border: 1px solid red; color: white}
button.ui-button.productSignupButton { background-image: none; background-color: green; border: 1px solid green; color: white}

/** Product carousel, to remove borders **/
.productsHomePageCarousel {border: none; background: none}
.productsHomePageCarousel .ui-carousel-header { display: none}
.productsHomePageCarousel .ui-carousel-title { display: none}
.productsHomePageCarousel .ui-carousel-viewport { border: none}
.productsHomePageCarousel .productsHomePageCarouselItem { border: none; background: none}

/** Product output defaults **/
.productProductOutput {}
.productTitle {clear: both;}
.productMetaDataHeader { padding-top: 10px}
.productProductDescription { float:left;}
.productProductMainImage { width:100%; max-width: 500px; margin: auto}
.productProductMainImage img {width:100%}
.productProductOtherImages { width:100%; max-width: 500px; padding-top: 1px; clear: right;}
.productProductOtherImages img {width: 100%}
.productProductInfo { clear:both; border: 1px dashed #a9a9a9; background-color: #d3d3d3; padding:5px; margin-bottom: 15px; }
.productSignupButtons {clear: both; float: right; padding-bottom: 10px;}

/** Season Overview Contracts Table **/
.contractSeasonOverviewTableContainer { width: 100%; overflow: auto; padding-bottom:10px}
.contractSeasonOverviewTable { width: 100%; clear:both; }
.contractSeasonOverviewTable tbody td { font-size: smaller}
.contractSeasonOverviewTable thead th { font-size: smaller}
.contractSeasonOverviewActionsColumn {width:1%}
.contractSeasonOverviewTable tbody td.contractSeasonOverviewDivisionColumn {white-space: nowrap; }
.contractSeasonOverviewNumericColumn { text-align: right;}

/** News article **/
.newsArticle {}
.newsArticleShort { }
.newsArticle .newsArticleTitle { color: yellow}
.newsArticleShort .newsArticleTitle {}
.newsArticleShort .newsArticleImage, .newsArticle .newsArticleImage { max-width:75px; float:left; margin-right:1em}
.newsArticleShort .newsArticleContent { max-height: 125px; overflow: hidden;}
.newsArticleContent img { max-width: 100%; height:auto; }

/** Blog feed **/
.blogFeedMessageTitle { color: yellow}

/** Team home page **/
.teamHomePageContent h1, .teamHomePageContent  h2, .teamHomePageContent h3, .teamHomePageContent h4 { color: #600; font-family: Permanent Marker, Verdana, Arial, Helvetica, sans-serif; line-height: 1em; }
.teamHomePageContent h1 { font-size:40px; text-align: center;}
.teamHomePageContent h2 { font-size:20px; text-align: center; }
.teamHomePageContent h3 { font-size:20px; }
.teamHomePageContent h4 { font-size:20px; }

/** Team Notice **/
.teamNotice {}
.teamNoticeContent img { max-width: 100%; height:auto; }
.teamNoticeShort { }
.teamNotice .teamNoticeTitle { color: yellow}
.teamNoticeShort .teamNoticeTitle {}
.teamNoticeShort .teamNoticeImage, .teamNotice .teamNoticeImage { max-width:75px; float:left; margin-right:1em}
.teamNoticeShort .teamNoticeContent { max-height: 125px; overflow: hidden;}

/** Team Roster **/
.teamRoster {}

/** Team Fixtures **/
.teamFixturesTable {}
.teamFixturesTable .infoLink { width:20px; }
.teamFixturesTable .startTime { width:50px; font-weight: bold}
.teamFixturesTable .homeTeam { min-width:180px;}
.teamFixturesTable .awayTeam { min-width:180px;}
.teamFixturesTable .teamJerseys { width:85px; text-align: center; white-space: nowrap}
.teamFixturesTable .location { width:110px; font-weight: bold}

/** Team results **/
.teamResultsTable {}
.teamResultsTable td { vertical-align: top;}
.teamResultsTable .homeTeam {width:200px;}
.teamResultsTable .homeTeamScore {width:20px;}
.teamResultsTable .awayTeam {width:200px}
.teamResultsTable .awayTeamScore {width:20px;}
.teamResultsTable .teamResultsFixtureTypeLEAGUE {}

/** Team record results **/
.teamRecordResultsScore {}
.teamRecordResultsScore td { width: 50%}
.teamRecordResultsScore .teamName { font-weight: bold}
.teamRecordResultsScore .teamScore { float: right; margin-right: 20px}
.teamRecordResultsScorers {}
.teamRecordResultsScorers {}
.teamRecordResultsScorers .playerName {}
.teamRecordResultsScorers .playerScorerInput {}

/** Friends List **/
.friendsDataGrid {}
.friendGridItem { min-height:75px; width: 150px;}
.friendGridItemPhoto{}
.friendGridItemImage {width:150px; float:left; margin-right:1em }
.friendGridItemName {text-align: center; width: 100%}

/** Home Photos **/
.photoAlbumPage {}
.photoAlbumPage .photoAlbumFeedItem {}
.photoAlbumPage .photoAlbumFeedItemTitle {color: yellow}
.photoAlbumPage .photoAlbumFeedItemContents {}
.photoAlbumPage .photoAlbumFeedItemContents img {max-width: 200px}
.photoAlbumPage .photoAlbumFeedItemContents span { color: white}
.photoAlbumDataGrid {}
.photoAlbumDataGridItem { text-align: center; width: 200px;}
.photoAlbumDataGridItemPhoto {width:100%; float:left; margin-right:1em; text-align: center }
.photoAlbumDataGridItemName {text-align: center; width: 100%}

/** Where we play **/
.whereWePlayMainImage {max-width: 400px; float:right;}
.whereWePlayMainImage img { max-width: 100% }
.whereWePlayOtherImages { max-width: 400px; float:right; padding-top: 1px;}
.whereWePlayOtherImages img {width: 100%}
.whereWePlayGoogleMap {float:left; padding-top: 10px; bottom: 10px; width: 100%; height: 420px; clear: both}

/** Player profile pages **/
.playerProfilePicDiv {width: 100%; text-align: center; clear: both}
.playerProfilePic { width: 256px; height: 265px}

/** General admin pages styles for smaller tables etc **/
.adminDataTable tbody { }

/** Fixture losenges, shared on a couple of different pages **/
.fixtureLosenge { font-size: xx-small; -moz-border-radius: 6px; -webkit-border-radius:6px; border-radius: 6px; color:black; padding:5px; background: #d3d3d3;}
.fixtureLosengeSelected {border: 2px solid black;}
.fixtureLosenge .fixtureLosengeGameType {font-weight:bold; float: left;}
.fixtureLosenge .fixtureLosengeGameTypeAndActions {font-weight:bold; float: left;}
.fixtureLosenge .fixtureLosengeGameTypeAndActions table { width: 100%; border: none;}
.fixtureLosenge .fixtureLosengeGameTypeAndActions tr {border: none;}
.fixtureLosenge .fixtureLosengeGameTypeAndActions td {border: none; padding: 1px; text-align: left; font-weight: bold}
.fixtureLosenge .fixtureLosengeActions {float: right}
.fixtureLosenge .fixtureLosengeOpponents {}
.fixtureLosenge .fixtureLosengeOpponents table { width: auto; border: none;}
.fixtureLosenge .teamShirt { border: 1px solid black;}
.fixtureLosenge .fixtureLosengeOpponents tr {border: none;}
.fixtureLosenge .fixtureLosengeOpponents td {border: none; padding: 1px; text-align: left; font-weight: bold}
.fixtureLosenge .fixtureLosengeGameTime { font-weight: bold}
.fixtureLosenge .fixtureLosengeGameCrossDivWarning {}
.fixtureLosengeForeign {}
.fixtureLosengeContinued {font-weight: bold}

/** Edit fixtures items **/
.editFixturesFixtureLosenge { z-index: 9; -moz-border-radius: 6px; -webkit-border-radius:6px; border-radius: 6px; color:black; padding:5px; background: #d3d3d3; font-size: small}
.editFixturesLocationOverviewTable thead th { padding: 2px; white-space: nowrap; }
.editFixturesOpponentOverviewTable thead th { padding: 2px; white-space: nowrap; }

/** Teams and divs screen.  Need padding on bottom of container to prevent the lopping off of items **/
.teamsAndDivisionsTableContainer  { width: 100%; overflow: auto; padding-bottom:10px}
.teamsAndDivisionsTable th { white-space: normal}
.programsTableContainer  { width: 100%; overflow: auto; padding-bottom:10px}
.programsTable th { white-space: normal}

/** Field reservation ranges **/
.fieldReservationRangeOuterDiv { overflow: auto}
.fieldReservationRangeTable tbody td {height: 15px}
.fieldReservationRangeTable tbody td.fieldReservationRangeTimeslotCol {padding: 0px 0px 0px 0px}
.fieldReservationRangeTableHeader {width: 100%; height: 25px}
.fieldReservationRangeTableHeaderDate { float: left}
.fieldReservationRangeTableHeaderAction { font-size: xx-small; float: right}
.fieldReservationRangeSelectCol { white-space: nowrap; width: 15px}
.fieldReservationRangeLocationCol { white-space: nowrap; font-weight: bold; width: 150px;}
.fieldReservationRangeVerificationCol { white-space: nowrap; width: 25px}
.fieldReservationRangeTimeslotCol {width:25px /*Allows scroll on mobile*/}
.fieldReservationRangeTimeslotInner {width: 100%; height: 100%; padding: 3px}
.fieldReservationRangeTimeslotInnerBooked {background-color: green; color: white}
.fieldReservationRangeTimeslotInnerNotBooked { background-color: red; color: white}
.fieldReservationRangeTimeslotHeader {font-weight: bold; font-size: xx-small}

/** Rental Availability **/
.fieldAvailabilityBooked {background-color: red; color: white}
.fieldAvailabilityNotBooked { background-color: green; color: white}

/** Fixtures By Date **/
.fixturesByDateSchedule {}
.fixturesByDateSchedule .fc-event {}
.fixturesByDateSchedule .fc-event:hover {cursor:pointer;}
.fixturesByDateSchedule .fixturesByDate {background-color: blue; color: white}
.fixturesByDateSchedule .fixturesByDate .fc-event-inner {background-color: blue; color: white}
.fixturesByDateSchedule .fieldsByDate {background-color: green; color: white}
.fixturesByDateSchedule .fieldsByDate .fc-event-inner {background-color: green; color: white}
.fixturesByDateSchedule .rentalsByDate {background-color: orange; color: white}
.fixturesByDateSchedule .rentalsByDate .fc-event-inner {background-color: orange; color: white}
.fixturesByDateTable th { font-size: small}
.fixturesByDateTable td { font-size: x-small}

/** Staff By Date **/
.staffByDateSchedule {}
.staffByDateSchedule .fc-event {}
.staffByDateSchedule .fc-event:hover {cursor:pointer;}
.staffByDateSchedule .staffByDateFixtures { background-color: blue; color: white}
.staffByDateSchedule .staffByDateFixtures .fc-event-inner { background-color: blue; color: white}
.staffByDateSchedule .staffByDateFields { background-color: blue; color: white}
.staffByDateSchedule .staffByDateFields .fc-event-inner { background-color: blue; color: white}
.staffByDateSchedule .staffByDateUnassignedFields { background-color: red; color: white }
.staffByDateSchedule .staffByDateUnassignedFields .fc-event-inner {  background-color: red; color: white}
.staffByDateSchedule .staffByDateItemDRAFT { background-color: black; color: white}
.staffByDateSchedule .staffByDateItemDRAFT .fc-event-inner { background-color: black; color: white}
.staffByDateSchedule .staffByDateItemSUBMITTED { background-color: black; color: white}
.staffByDateSchedule .staffByDateItemSUBMITTED .fc-event-inner { background-color: black; color: white}
.staffByDateSchedule .staffByDateItemACCEPTED { background-color: green; color: white}
.staffByDateSchedule .staffByDateItemACCEPTED .fc-event-inner { background-color: green; color: white}
.staffByDateSchedule .staffByDateItemREJECTED  { background-color: red; color: white}
.staffByDateSchedule .staffByDateItemREJECTED  .fc-event-inner { background-color: red; color: white}
.staffByDateSchedule .staffByDateItemCANCELLED { background-color: red; color: white}
.staffByDateSchedule .staffByDateItemCANCELLED .fc-event-inner { background-color: red; color: white}
.staffByDateSchedule .staffByDateItemCOMPLETED  { background-color: green; color: white}
.staffByDateSchedule .staffByDateItemCOMPLETED  .fc-event-inner { background-color: green; color: white}
.staffByDateSchedule .staffByDateItemPAID { background-color: green; color: white}
.staffByDateSchedule .staffByDateItemPAID .fc-event-inner { background-color: green; color: white}
.staffByDateTable { }
.staffByDateTable th { font-size: small}
.staffByDateTable td { font-size: x-small; vertical-align: top;}
.staffByDateTableLocationCol {}

/** Staff By Date **/
.staffAvailabilitySchedule {}
.staffAvailabilitySchedule .fc-event {}
.staffAvailabilitySchedule .fc-event:hover {cursor:pointer;}
.staffAvailabilitySchedule .staffAvailabilityAVAILABLE { background-color: green; color: white}
.staffAvailabilitySchedule .staffAvailabilityAVAILABLE .fc-event-inner { background-color: green; color: white}
.staffAvailabilitySchedule .staffAvailabilityNOT_AVAILABLE { background-color: red; color: white}
.staffAvailabilitySchedule .staffAvailabilityNOT_AVAILABLE .fc-event-inner { background-color: red; color: white}

/** My staff schedule **/
.myStaffSchedule {}
.myStaffSchedule .fc-event {}
.myStaffSchedule .fc-event:hover {cursor:pointer;}
.myStaffSchedule .myStaffScheduleItemSUBMITTED { background-color: blue; color: white}
.myStaffSchedule .myStaffScheduleItemSUBMITTED .fc-event-inner { background-color: blue; color: white}
.myStaffSchedule .myStaffScheduleItemACCEPTED { background-color: green; color: white}
.myStaffSchedule .myStaffScheduleItemACCEPTED .fc-event-inner { background-color: green; color: white}
.myStaffSchedule .myStaffScheduleItemREJECTED { background-color: red; color: white}
.myStaffSchedule .myStaffScheduleItemREJECTED .fc-event-inner { background-color: red; color: white}
.myStaffSchedule .myStaffScheduleItemCANCELLED { background-color: red; color: white}
.myStaffSchedule .myStaffScheduleItemCANCELLED .fc-event-inner { background-color: red; color: white}
.myStaffSchedule .myStaffScheduleItemCOMPLETED { background-color: green; color: white}
.myStaffSchedule .myStaffScheduleItemCOMPLETED .fc-event-inner { background-color: green; color: white}
.myStaffSchedule .myStaffScheduleItemPAID { background-color: green; color: white}
.myStaffSchedule .myStaffScheduleItemPAID .fc-event-inner { background-color: green; color: white}

/** My Staff availability.  Put style on 2 parts for now as differences between PrimeFaces 4 and 5**/
.myStaffAvailabilitySchedule
.myStaffAvailabilitySchedule .fc-event {}
.myStaffAvailabilitySchedule .fc-event:hover {cursor:pointer;}
.myStaffAvailabilitySchedule .myStaffAvailabilityItemAVAILABLE {background-color: green; color: white}
.myStaffAvailabilitySchedule .myStaffAvailabilityItemAVAILABLE .fc-event-inner { background-color: green; color: white}
.myStaffAvailabilitySchedule .myStaffAvailabilityItemNOT_AVAILABLE {background-color: red; color: white}
.myStaffAvailabilitySchedule .myStaffAvailabilityItemNOT_AVAILABLE .fc-event-inner { background-color: red; color: white}

/** Indies team player assignments **/
.indieTeamPlayerAssignments {}
.indieTeamPlayerAssignments .indieTeamPlayerAssignmentsTeamsDataGrid .ui-datagrid-content {border: none;}
.indieTeamPlayerAssignments .indieTeamPlayerAssignmentsTeamsDataGrid .ui-datagrid-column {vertical-align: top;}
.indieTeamPlayerAssignmentMALE {background-color: lightblue; color:black}
.indieTeamPlayerAssignmentFEMALE {background-color: pink; color:black}

/** Registration **/
.registrationConfirmProduct { font-size: large}
.registrationEnterDetailsLabelCol { width: 150px}
.registrationEnterDetailsOtherCol { padding-right: 10px}
.registrationEnterDetailsErrorCol { width: 150px}

/** Roles and permissions **/
.rolesAndPermissionsAssignedItems { border: none;}
.rolesAndPermissionsAssignedItems tr .rolesAndPermissionsAssignedItems td { border: none}
.rolesAndPermissionsAssignedItems .rolesAndPermissionsAssignedItemsLabel { width: 100px;}
.rolesAndPermissionsAssignedItems .rolesAndPermissionsAssignedItemsValues { word-wrap: break-word;}

/** Pickup game calendar **/
.pickupSchedule {}
.pickupSchedule .pickupGameUPCOMING {background-color: blue; color: white}
.pickupSchedule .pickupGameCOMPLETE {background-color: red; color: white}
.pickupSchedule .pickupGame .fc-event-inner {cursor: pointer;}

/* Pickup Game List Items */
.pickupGameDataList { border: none; }
.pickupGameDataList .ui-datalist-content { border: none;}
.pickupGameListItem {padding-bottom: 10px}
.pickupGameListItem .pickupGameListItemHeadline{ font-weight: bold; padding: 5px 5px 5px 10px;}
.pickupGameListItem .pickupGameListItemMeta {padding: 0px 5px 5px 10px;}
.pickupGameListItem .pickupGameListItemMeta label {font-weight: bold; padding-right: 25px}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaItems {float:left; padding-left: 10px;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogo {float: left; width:125px; height: 125px;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoSOCCER {background: url(https://images.footysevens.com/pickup/banners/soccerball.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoFUTSAL {background: url(https://images.footysevens.com/pickup/banners/futsal.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoVOLLEYBALL {background: url(https://images.footysevens.com/pickup/banners/volleyball.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoFLOORHOCKEY {background: url(https://images.footysevens.com/pickup/banners/ballhockey.jpg); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoDODGEBALL {background: url(https://images.footysevens.com/pickup/banners/dodgeball.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoBASKETBALL {background: url(https://images.footysevens.com/pickup/banners/basketball.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoFLAGFOOTBALL {background: url(https://images.footysevens.com/pickup/banners/flagfootball.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoHANDBALL {background: url(https://images.footysevens.com/pickup/banners/handball.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemMeta .pickupGameListItemMetaLogoULTIMATE {background: url(https://images.footysevens.com/pickup/banners/ultimatefrisbee.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameListItem .pickupGameListItemContent {padding: 0px 0px 0px 10px;}
.pickupGameListItem .pickupGameListItemLocked { font-size: large; font-weight:bold; color: red; text-align: center }
.pickupGameListItem .pickupGameListItemActions {width:100%; clear: both;padding: 5px 0px 5px 10px; }
.pickupGameListItem .pickupGameListItemActions .pickupGameSoldOutButton { background-color: red; border: red}

/** Pickup game full item **/
.pickupGameFullItem {}
.pickupGameFullItem .pickupGameFullItemHeadline{ font-weight: bold; padding: 5px 0px 5px 0px;}
.pickupGameFullItem .pickupGameFullItemMeta {padding: 0px 5px 5px 0px;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaItems {float:left; padding-left: 0px}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogo {float: left; width:125px; height: 125px;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoSOCCER {background: url(https://images.footysevens.com/pickup/banners/soccerball.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoFUTSAL {background: url(https://images.footysevens.com/pickup/banners/futsal.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoVOLLEYBALL {background: url(https://images.footysevens.com/pickup/banners/volleyball.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoFLOORHOCKEY {background: url(https://images.footysevens.com/pickup/banners/ballhockey.jpg); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoDODGEBALL {background: url(https://images.footysevens.com/pickup/banners/dodgeball.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoBASKETBALL {background: url(https://images.footysevens.com/pickup/banners/basketball.png); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoFLAGFOOTBALL {background: url(https://images.footysevens.com/pickup/banners/flagfootball.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoHANDBALL {background: url(https://images.footysevens.com/pickup/banners/handball.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta .pickupGameFullItemMetaLogoULTIMATE {background: url(https://images.footysevens.com/pickup/banners/ultimatefrisbee.gif); background-size: contain; background-repeat: no-repeat;}
.pickupGameFullItem .pickupGameFullItemMeta label {font-weight: bold; padding-right: 25px}
.pickupGameFullItem .pickupGameFullItemLocked { font-weight:bold; text-align: center; color:red }
.pickupGameFullItem .pickupGameFullItemContent {padding: 0px 0px 5px 0px;}
.pickupGameFullItem .pickupGameFullItemContent ul li {margin-left: 25px; list-style:decimal;}
.pickupGameFullItem .pickupGameFullItemContent ol li {margin-left: 25px; list-style:decimal}
.pickupGameFullItemActions {width:100%; clear: both;padding: 5px 0px 0px 0px;}
.pickupGameMyInterest .pickupGameMyInterestContent {padding: 3px 3px 3px 3px;}
.pickupGameInterestedParties {}
.pickupGameInterestedPartiesTable {}
.pickupGameInterestedPartiesTable .statusCol { width: 6em}
.pickupGameInterestedPartiesTable .genderCol { width: 6em}

/** System config **/
.systemConfigInput {width: 95%}

/** Some hacks for rotating text **/
.verticalText { width:1em;text-align:center;height:200px;}
.verticalText { display: inline-block;
    white-space: nowrap;
    -webkit-transform: translate(1.1em,0) rotate(90deg);
    -moz-transform: translate(1.1em,0) rotate(90deg);
    -o-transform: translate(1.1em,0) rotate(90deg);
    transform: translate(1.1em,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    /* IE9+ */
    -ms-transform: none;
    -ms-transform-origin: none;
    /* IE8+ */
    -ms-writing-mode: tb-rl;
    /* IE7 and below */
    *writing-mode: tb-rl;
}