/* 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/layout.css.seam?ln=common-layout&nocache=1775635845325"; :root { --product-meta-bg-color : #0b59a2; --product-meta-font : 'Righteous', cursive; --product-meta-text-color : #ffff00; } /* Top level settings, no margins or padding initially so we can define our own */ /* Don't apply box-sizing border box to * or div as it seems to have an effect on some things from pf components **/ 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 **/ /** Second one overrides so that images can actually be seen on tds where we need them **/ img {max-width: 100%} .ui-datatable td img {max-width: none;} /** Primefaces schedule are truncating, and we want that fixed globally **/ .fc-day-grid-event .fc-content { white-space: normal; overflow: auto} /** After Dark and other theme fixes that get in the way of other skinning **/ .body-afterdark .CodeMirror {background-color: white} .body-afterdark .CodeMirror pre {color: black} .body-afterdark label.ui-outputlabel {color: black; font-weight: bold;} .body-afterdark .ui-widget { font-family: Verdana, Arial, Helvetica, sans-serif; } .body-omega .ui-widget { font-family: Verdana, Arial, Helvetica, sans-serif; } .body-sunny .ui-button {background-image: none} .body-omega .ui-button { min-width: 30px} /* 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; } .greenButton, .ui-button.greenButton, button.ui-button.greenButton {background-color: green; border: green; color: white} .redButton, .ui-button.redButton, button.ui-button.redButton {background-color: red; border: red; color: white} .greyButton, .ui-button.greyButton, button.ui-button.greyButton {background-color: grey; border: grey; color: white} .badge { border-radius: 50%; background-color: grey; color: white; display: inline-block; padding-left: 8px; padding-right: 8px; text-align: center; font-weight: bold} .badge-success {background-color: green; color: white} .badge-info {background-color: blue; color: white} a.badge-info {color: white} .badge-warning {background-color: orange; color: black} .badge-error {background-color: red; color: white} /* 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 { color: #8B7869;} #sidebar h1 { line-height: normal; font-weight: bold; font-size: small;} .sidebarMenu { list-style: none;} .sidebarMenu a { color: navy; text-decoration: none; font-weight:normal;} .sidebarMenu a:visited { color: navy; text-decoration: none; font-weight:normal;} .sidebarMenu a.selected { font-weight:bold;} .sidebarMenu a:hover {font-weight:bold;} .sidebarMenu a.ui-commandlink { text-decoration: none; font-weight:normal; font-size: medium} /* * Content, The main page area and tables and such */ .section, .sectionSeparator {box-sizing: border-box; float: left; width: 100%; clear:both; padding-top: 10px; padding-bottom: 10px;} .sectionSmallerPadding {box-sizing: border-box; float: left; width: 100%; clear:both; padding-top: 2px; padding-bottom: 2px;} .sectionNoPadding {box-sizing: border-box; float: left; width: 100%; clear:both;} p { padding-top: 5px; padding-bottom: 5px;} .actionButtons { float:right;} .actionButtonsArea .ui-button { margin-left: 10px} .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} div.insertedPageHTMLContentEditMode:hover { background-color: lightgrey; cursor: pointer} .footyShirt { width:100px; } .modalPanelCloseIcon { padding-top: 2px; padding-right: 1px; cursor: pointer;} .hiddenField { display: none;} .exclusiveStatusDialog {} .exclusiveStatusDialog .ui-dialog-titlebar {display: none;} .exclusiveStatusDialog .ui-dialog-content {padding: 0 0 0 0 !important;} .exclusiveStatusDialog .exclusiveStatusDialogInner { width: 320px; height: 180px; background: transparent url("/javax.faces.resource/images/soccerPlayerDefault.gif.seam?ln=common-layout&nocache=1775635845325") no-repeat center; background-size: cover; } .exclusiveStatusDialog .exclusiveStatusDialogInner1 {width: 320px; height: 320px;background: transparent url("/javax.faces.resource/images/soccerPlayer1.gif.seam?ln=common-layout&nocache=1775635845325") no-repeat center; background-size: cover;} .exclusiveStatusDialog .exclusiveStatusDialogInner2 {width: 320px; height: 213px;background: transparent url("/javax.faces.resource/images/soccerPlayer2.gif.seam?ln=common-layout&nocache=1775635845325") no-repeat center; background-size: cover;} .exclusiveStatusDialog .exclusiveStatusDialogInner3 {width: 320px; height: 227px;background: transparent url("/javax.faces.resource/images/soccerPlayer3.gif.seam?ln=common-layout&nocache=1775635845325") no-repeat center; background-size: cover;} .exclusiveStatusDialog .exclusiveStatusDialogInner4 {width: 320px; height: 240px;background: transparent url("/javax.faces.resource/images/soccerPlayer4.gif.seam?ln=common-layout&nocache=1775635845325") no-repeat center; background-size: cover;} .exclusiveStatusDialog .exclusiveStatusDialogInner5 {width: 320px; height: 180px;background: transparent url("/javax.faces.resource/images/soccerPlayer5.gif.seam?ln=common-layout&nocache=1775635845325") no-repeat center; background-size: cover;} .ajaxStatusDialogSimple { width: 36px; height: 36px; background: transparent url("/javax.faces.resource/images/preloader.gif.seam?ln=common-layout&nocache=1775635845325") no-repeat center; background-size: contain;} /** 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} /** Tab panels has too much of an indent and we want to force off the border **/ .ui-tabs .ui-tabs-panels {border: none !important;} .ui-tabs .ui-tabs-panel {padding: 15px 2px !important;} /** 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, body .generalDataGridNoBorder {width: 100%; border-collapse: collapse; border: none} .generalDataGridNoBorder .ui-datagrid-content, body .generalDataGridNoBorder .ui-datagrid-content {border: none} .generalDataGridNoOtherDecoration {} .generalDataGridNoOtherDecoration .ui-datagrid-content, body .generalDataGridNoOtherDecoration .ui-datagrid-content {background:none; padding: 0px} /** Sometimes we have to use prime:dataList but don't want any of the decoration. Be careful with the spacing in this as css .a.b is not the same as .a .b (first means where both classes on element, second is b nested in a) **/ .dataListNoDecoration {} body .dataListNoDecoration .ui-datalist-content {border: none; padding: 0;} .dataListNoDecoration .ui-datalist-content {border: none} .dataListNoDecoration .ui-datalist-content.ui-widget-content {background: none; color: inherit} .dataListNoDecoration .ui-datalist-data { list-style: none; margin: 0px; padding-top:0px} .dataListNoDecoration .ui-datalist-data li {margin: 0px} .dataListWithPaginationNoDecoration .ui-paginator {} .dataListWithPaginationNoDecoration .ui-widget-header {} .dataListWithPaginationNoDecoration .ui-datalist-content.ui-widget-content {background: none} .dataListWithPaginationNoDecoration.ui-datalist .ui-datalist-content {border: none; color: inherit;} .dataListWithPaginationNoDecoration .ui-datalist-content {border: none; color: inherit;} .dataListWithPaginationNoDecoration .ui-datalist-content a {color: inherit;} .dataListWithPaginationNoDecoration .ui-datalist-data { list-style: none; margin: 0px; padding-top:0px} .dataListWithPaginationNoDecoration .ui-datalist-data li {margin: 0px} /** 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 */ .successMessage { color: green; font-weight: bold; list-style: none; } .errorMessage { color: red; font-weight: bold; list-style: none; } .warnMessage { color: orange; font-weight: bold; list-style: none;} .infoMessage { color: white; background-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 { line-height: 1em} .pageHeaderNotes, .pageHeaderNotesWarning, .pageHeaderNotesError, .pageSectionBubble { color: #F1F6F9; padding:5px; margin-bottom: 15px; border-radius: 10px; clear: both} .pageHeaderNotes a, .pageHeaderNotesWarning a, .pageHeaderNotesError a { color:yellow; text-decoration: none; font-weight:bold;} .pageHeaderNotes a:visited, .pageHeaderNotesWarning a:visited, .pageHeaderNotesError a:visited {color:yellow; text-decoration: none; font-weight:bold;} .pageHeaderNotes p, .pageHeaderNotesError p, .pageHeaderNotesWarning p { padding: 5px 5px 5px 5px; } .pageHeaderNotes {color: #F1F6F9; background-color: #71CC8D;} .pageHeaderNotesWarning {color: #F1F6F9; background-color: #F7941E;} .pageHeaderNotesError {background-color: #ff4500;} .pageSectionBubble {color: #F1F6F9; background:#075698; background:linear-gradient(#2e88c4, #075698);} .pageSectionBubble a, .pageSectionBubble a:visited { color:yellow; text-decoration: none; font-weight:bold;} /* 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. Enough spacing in the */ .fixturesPageResponsive { width:100%; clear:both} .fixtureColumns {width:100%; clear: both;} .fixtureColumns .teams { width:70%; float:left; text-align: left} .fixtureColumns .locationAndTime { width:30%; text-align:right; font-weight:bold; font-style:italic; float:left} .fixtureColumns .teamLogos {width: 40px;} .fixtureColumns .teamNames {} .fixtureColumns .teamsTableContainer, .fixtureColumns .teamsTableContainer td, .fixtureColumns .teamsTableContainer tbody td { border: none; padding: 5px 0px 5px 0px;} .fixtureResultsPage { width:100%; clear:both} .fixtureResultColumns {width:100%; clear: both;} .fixtureResultColumns .teams { width:70%; float:left; text-align: left} .fixtureResultColumns .locationAndTime { width:30%; text-align:right; font-weight:bold; font-style:italic; float:left} .fixtureResultColumns .teamLogos {width: 40px} .fixtureResultColumns .teamScores {width:2.5em; font-weight: bold;} .fixtureResultColumns .teamNames {} .fixtureResultColumns .teamsTableContainer, .fixtureResultColumns .teamsTableContainer td, .fixtureResultColumns .teamsTableContainer tbody td { border: none; padding: 5px 0px 5px 0px;} @media screen and (max-width: 600px) { .fixtureResultColumns .teamLogos { display: none} } /** 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 .functions { width: 1%} .generatedFixtureRow .homeTeam { width:350px;} .generatedFixtureRow .teamJerseys { width:125px;} .generatedFixtureRow .awayTeam { width:350px;} /** 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: 12px} .productsSpannerRows { font-family: Verdana, Arial, Helvetica, serif; font-weight:bold; font-size: 16px; background-color:#F1F1F1; text-align:center; } .productSoldOutLabel {color: red} 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} /** Common product meta stuff **/ .productMetaPart { padding: 2px} .productMetaPart .productMetaPartText { text-align: center;background-color:var(--product-meta-bg-color); color: var(--product-meta-text-color); font-family: var(--product-meta-font); text-transform: uppercase; } @media screen and (min-width: 40.063em) { .productMetaPart .productMetaPartText { font-size: large; line-height: 30px; } } @media screen and (max-width: 40.063em) { .productMetaPart .productMetaPartText { font-size: medium; line-height: 25px; } } /** Carousel, to remove borders and title etc **/ body .ui-carousel .ui-carousel-viewport {border: none; background: none} body .ui-carousel .ui-carousel-viewport .ui-carousel-item {border: none; background: none} body .ui-carousel .ui-carousel-header { display: none} body .ui-carousel .ui-carousel-title { display: none} .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;} .productProductInfo .productInfoWarning {margin:5px; background-color: red; color: white; font-weight: bold} .productBadge {background-color: red; color: white} a.productBadge {color: white} .productBadgeACTIVE {background-color: green; color: white} .productBadgeCOMING_SOON {background-color: orange; color: white} /** 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;} /** Forum Topic **/ .forumTopicShort { position:relative; padding:0 0 0 0; margin:1em 0 1em 0; color:#fff; background:#2e88c4; background:linear-gradient(#2e88c4, #075698); border-radius:10px;} .forumTopicShort {} .forumTopicShort .forumTopicShortTitle{ font-weight: bold; font-size: 16px; padding: 5px 5px 5px 10px; color:yellow} .forumTopicShort .forumTopicShortContent {clear:both; padding: 0px 5px 5px 10px;} .forumTopicShort .forumTopicShortImage { max-width:50px; float:left; margin-right:1em} .forumTopicShortActions {clear: both; padding: 5px 5px 5px 10px;} /** Forum Thread **/ .forumThreadShort { position:relative; padding:0 0 0 0; margin:1em 0 1em 0; color:#fff; background:#075698; background:linear-gradient(#2e88c4, #075698); border-radius:10px;} .forumThreadShortOdd { color:#000; background:#f3961c; background:linear-gradient(#f3961c, #f9d835);} .forumThreadShortEven:after { content:""; position:absolute; bottom:-20px; left:50px; border-width:20px 0 0 20px; border-style:solid;border-color:#075698 transparent; display:block;width:0;} .forumThreadShortOdd:after { content:""; position:absolute; bottom:-20px; right:50px; border-width:20px 0 0 20px; border-style:solid; border-color:#f9d835 transparent; display:block;width:0;} .forumThreadShort a { color : yellow} .forumThreadShortOdd a { color : blue} .forumThreadShortEven .forumThreadShortTitle {color:yellow} .forumThreadShort .forumThreadShortTitle{ font-weight: bold; font-size: 16px; padding: 5px 5px 5px 10px;} .forumThreadShort .forumThreadShortContent {clear:both; padding: 0px 5px 5px 10px;} .forumThreadShort .forumThreadShortImage { max-width:50px; float:left; margin-right:1em} .forumThreadShort .forumThreadShortAuthorAndTime {font-style:italic; font-size: smaller; padding: 0px 5px 5px 10px;} .forumThreadShortActions {clear: both; padding: 5px 5px 5px 10px;} .forumThread { position:relative; padding:0 0 0 0; margin:1em 0 1em 0; color:#fff; background:#075698; background:linear-gradient(#2e88c4, #075698); border-radius:10px;} .forumThread:after { content:""; position:absolute; bottom:-20px; left:50px; border-width:20px 0 0 20px; border-style:solid; border-color:#075698 transparent;display:block;width:0;} .forumThread .forumThreadTitle{ font-weight: bold; color : yellow; font-size: 16px; padding: 5px 5px 5px 10px;} .forumThread .forumThreadAuthorAndTime {font-style:italic; font-size: smaller; padding: 0px 5px 5px 10px;} .forumThread .forumThreadContent { clear: both; padding: 0px 5px 5px 10px;} .forumThread .forumThreadImage { max-width:50px; float:left; margin-right:1em} .forumThread .forumThreadExpiryTime {font-style:italic; font-size: smaller; padding: 0px 5px 5px 10px;} .forumThread .forumThreadActions {clear: both; padding: 5px 5px 5px 10px;} .forumThread a { color : yellow} /* Forum Response **/ .forumResponse { position:relative; padding:0 0 0 0; margin:1em 0 1em 0; color:#000; background:#f3961c; border-radius:10px;background:linear-gradient(#f3961c, #f9d835);} .forumResponse:after { content:""; position:absolute; border-style:solid; border-color:#f3961c transparent; display:block; width:0; top:-15px; right:50px; bottom:auto; left:auto; border-width:0 15px 15px; } .forumResponse { font-size: smaller;} .forumResponse .forumResponseAuthorAndTime {font-style:italic; padding: 5px 5px 5px 10px;} .forumResponse .forumResponseContent { clear: both; padding: 0px 5px 5px 5px;} .forumResponse .forumResponseImage { max-width:50px; float:left; margin-right:1em} .forumResponse .forumResponseActions {clear: both; padding: 5px 5px 5px 10px;} .forumResponse a {color: blue} /** new forum response **/ .forumResponseNew {} /** Quick widgets **/ .quickScheduleWidget {padding:0 0 0 0; margin:1em 0 1em 0; color:#fff; background:#075698; background:linear-gradient(#2e88c4, #075698); border-radius:10px;} .quickScheduleWidget .quickScheduleWidgetInner {padding: 0px 5px 5px 5px;} .quickScheduleWidget .quickScheduleTitle{color : yellow; font-weight: bold; font-size: 16px; padding: 5px 5px 5px 10px; text-align: center} /** Registered User Mesasge Short **/ .messageShort { position:relative; padding:0 0 0 0; margin:1em 0 1em 0; color:#fff; background:#075698; background:linear-gradient(#2e88c4, #075698); border-radius:10px;} .messageShortOdd { color:#000; background:#f3961c; background:linear-gradient(#f3961c, #f9d835);} .messageShortEven:after { content:""; position:absolute; bottom:-20px; left:50px; border-width:20px 0 0 20px; border-style:solid; border-color:#075698 transparent; display:block; width:0;} .messageShortOdd:after { content:""; position:absolute; bottom:-20px; right:50px; border-width:20px 0 0 20px; border-style:solid; border-color:#f9d835 transparent; display:block; width:0;} .messageShort a { color : yellow} .messageShortOdd a { color : blue} .messageShortEven .messageShortTitle {color:yellow} .messageShort .messageShortTitle{ font-weight: bold; font-size: 16px; padding: 5px 5px 5px 10px;} .messageShort .messageShortContent {clear:both; padding: 0px 5px 5px 10px;} .messageShort .messageShortImage { max-width:50px; float:left; margin-right:1em} .messageShort .messageShortAuthorAndTime {font-style:italic; font-size: smaller; padding: 0px 5px 5px 10px;} .messageShortActions {clear: both; padding: 5px 5px 5px 10px;} /** News article **/ .newsArticle {} .newsArticle pre { white-space: pre-wrap; } .newsArticleShort { } .newsArticleShort pre { white-space: pre-wrap; } .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 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 {} /** 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} .playerProfileRolesMenu {width:auto !important; white-space: nowrap;} .playerProfileRolesMenu ul {} .playerProfileRolesMenu ul.ui-menu-child {white-space: nowrap;} /** General admin pages styles for smaller tables etc **/ .adminDataTable tbody { } /** Fixture losenges, shared on a couple of different pages **/ .fixtureLosengeSelected {border: 2px solid black;} .fixtureLosenge { font-size: xx-small; border-radius: 6px; color:black; padding:5px; background: #d3d3d3;} .fixtureLosenge .fixtureLosengeActionButtons {float: right} .fixtureLosenge .fixtureLosengeTenant {font-weight:bold; background:red; color:white; text-align: center; } .fixtureLosenge .fixtureLosengeDraft {font-weight:bold; background:red; color:white; text-align: center; } .fixtureLosenge .fixtureLosengeUnofficiated {font-weight:bold; background:red; color:white; text-align: center; } .fixtureLosenge .fixtureLosengeErrors {font-weight:bold; background:red; color:white; text-align: center; } .fixtureLosenge .fixtureLosengeMultipleFieldsWarning {font-weight:bold; background:red; color:white; text-align: center;} .fixtureLosenge .fixtureLosengeGameDivision {font-weight:bold;} .fixtureLosenge .fixtureLosengeGameCrossDivWarning {font-weight:bold; float: right} .fixtureLosenge .fixtureLosengeGameType {font-weight:bold; float: left;} .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} .rentalLosenge {font-size: xx-small; border-radius: 6px; color:white; padding:5px; background-color: black} .rentalLosenge .rentalLosengeTenant {font-weight:bold; background:red; color:white; text-align: center; } .rentalLosenge .rentalLosengeType {font-weight:bold;} .rentalLosenge .rentalLosengeGameTime {font-weight:bold;} .programFixtureLosenge {font-size: xx-small; border-radius: 6px; color:black; padding:5px; background-color: grey} .programFixtureLosenge .programFixtureLosengeTenant {font-weight:bold; background:red; color:white; text-align: center; } .programFixtureLosenge .programFixtureLosengeType {font-weight:bold;} .programFixtureLosenge .programFixtureLosengeGameTime {font-weight:bold;} .pickupGameLosenge {font-size: xx-small; border-radius: 6px; color:black; padding:5px; background-color: grey} .pickupGameLosengeTENTATIVE {background-color: white; color: black; border: 3px solid green;} .pickupGameLosengeRENTAL.pickupGameLosengeTENTATIVE, .pickupGameLosengeRENTAL.pickupGameLosengeUPCOMING, .pickupGameLosengeRENTAL.pickupGameLosengeDRAFT {background-color: white; color: black; border: 3px solid green;} .pickupGameLosengeRENTAL.pickupGameLosengeCOMPLETE {background-color: black; color: white;} .pickupGameLosenge .pickupGameLosengeTenant {font-weight:bold; background:red; color:white; text-align: center; } .pickupGameLosenge .pickupGameLosengeType {font-weight:bold;} .pickupGameLosenge .pickupGameLosengeGameTime {font-weight:bold;} /** @keyframes pickup-losenge-flash { 0% { background-color: green; color: black; border: 5px solid red;} 50% { background-color: orange; color: black; border: 5px solid green;}} **/ /** Edit fixtures items **/ .editFixturesCalendarTableContainer {} .editFixturesCalendarTable {table-layout: fixed; width: 100% ;} .editFixturesOrphanedTable {table-layout: fixed; width: 100% ;} .editFixturesOrphanedTable .ui-datagrid-column {width:25%} .editFixturesFixtureLosenge { z-index: 9; 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; } .editFixturesCalendarTable td.editFixturesCalendarColumn, .editFixturesCalendarTable th.editFixturesCalendarColumn {} @media (max-width: 1000px) { /** Set a minimum width for the column otherwise it just looks stupid. We have to use width to force minimum, it will be bigger if less cols **/ .editFixturesCalendarTable td.editFixturesCalendarColumn, .editFixturesCalendarTable th.editFixturesCalendarColumn {width:150px;} } /** 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; font-weight: bold} .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} .fieldReservationRangeTimeslotInnerNotAvailable { background-color: orange; color: white} .fieldReservationRangeTimeslotInnerBookedHalfBegin {background: linear-gradient(to left, green 50%, red 50%); } .fieldReservationRangeTimeslotInnerBookedHalfEnd {background: linear-gradient(to left, red 50%, green 50%); } .fieldReservationRangeTimeslotHeader {font-weight: bold; font-size: xx-small} @media (max-width:800px) { /** Issues with wrapping **/ .fieldReservationRangeTableHeader {width: 100%; height: 40px} } /** Rental Availability **/ .fieldAvailabilityTimeslotInner {width: 100%; height: 100%; padding: 3px; font-weight: bold} .fieldAvailabilityOCCUPIED {background-color: red; color: white} .fieldAvailabilityAVAILABLE { background-color: green; color: white} .fieldAvailabilityNOT_AVAILABLE { background-color: orange; color: white} .fieldAvailabilityOCCUPIED_TENTATIVE {background-color: blue; color: white} .fieldAvailabilityOCCUPIED_NO_FIELD {background-color: black; color: white} /** Primefaces schedules, need to hide the time due to a bug **/ .primeSchedule span.fc-time {display: none} /** 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} /** Activity By Date **/ .activityByDateTable {table-layout: fixed; width: 100% ;} .activityByDateTableContainer {} .activityByDateTable th { font-size: small} .activityByDateTable td { font-size: x-small} .activityByDateTableCol {} @media (max-width:800px) { /** Need to force the width on mobiles as we can barely see anything, all scrunched up **/ /** Having issues with min width **/ .activityByDateTableCol {width: 200px; max-width: 100%;} } /** 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 .staffByDateItemONCALL { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemONCALL .fc-event-inner { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemADMINISTRATOR { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemADMINISTRATOR .fc-event-inner { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemDAYOFF { background-color: yellow; color: black} .staffByDateSchedule .staffByDateItemDAYOFF .fc-event-inner { background-color: yellow; color: black} .staffByDateSchedule .staffByDateItemOTHER { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemOTHER .fc-event-inner { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemMAINTENANCE { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemMAINTENANCE .fc-event-inner { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemSNOW_REMOVAL { background-color: orange; color: white} .staffByDateSchedule .staffByDateItemSNOW_REMOVAL .fc-event-inner { background-color: orange; 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 {table-layout: fixed; width: 100% ;} .staffByDateTableContainer {} .staffByDateTable th { font-size: small} .staffByDateTable td { font-size: x-small; vertical-align: top;} .staffByDateTableLocationCol {} .staffByDateTable td.staffByDateGridColumn, .staffByDateTable th.staffByDateGridColumn {} @media (max-width: 1000px) { /** Set a minimum width for the column otherwise it just looks stupid. We have to use width to force minimum, it will be bigger if less cols **/ .staffByDateTable td.staffByDateGridColumn, .staffByDateTable th.staffByDateGridColumn {width:150px;} } /** Staff By Date **/ .staffAvailabilitySchedule {} .staffAvailabilitySchedule .fc-event {} .staffAvailabilitySchedule .fc-event:hover {cursor:pointer;} .staffAvailabilitySchedule .staffAvailability {border: 2px solid black; padding: 2px} .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} /** Staff Vacations **/ .staffVactionsSchedule {} .staffVactionsSchedule .fc-event {} .staffVactionsSchedule .fc-event:hover {cursor:pointer;} .staffVactionsSchedule .staffVacation {border: 2px solid black; padding: 2px; background-color: green; 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-day:hover {cursor:pointer;} .myStaffAvailabilitySchedule .fc-event:hover {cursor:pointer;} .myStaffAvailabilitySchedule .myStaffAvailabilityItem {border: 3px solid black; height: 50px; padding: 10px} .myStaffAvailabilitySchedule .myStaffAvailabilityItemAVAILABLE {background-color: green; color: white;} .myStaffAvailabilitySchedule .myStaffAvailabilityItemAVAILABLE .fc-event-inner { background-color: green; color: white; margin: 20px} .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 span.fc-time {display: none} .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; 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; 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; color:#F1F6F9; background:#F7941E;} .pickupGameInterestedParties {} .pickupGameInterestedPartiesTable {} .pickupGameInterestedPartiesTable .statusCol { width: 6em} .pickupGameInterestedPartiesTable .genderCol { width: 6em} /** Common Shirt image stuff **/ /** Stripe css help is here https://stripesgenerator.com/ background-size determines the strip width which changes per shirt size **/ .teamShirtNew{display:inline-block;} .teamShirtNewSOLID {background-color: var(--shirt-colour-1);} .teamShirtNewXSMALL { width:25px; height: 20px; vertical-align:middle; background-size: 8.49px 8.49px;} .teamShirtNewSMALL { width:32px; height: 26px; vertical-align:middle; background-size: 14.14px 14.14px;} .teamShirtNewLARGE { width:200px; height: 160px; vertical-align:middle; background-size: 42.43px 42.43px} .teamShirtNewHORIZONTAL_STRIPES {background-image: linear-gradient(0deg, var(--shirt-colour-1) 25%, var(--shirt-colour-2) 25%, var(--shirt-colour-2) 50%, var(--shirt-colour-1) 50%, var(--shirt-colour-1) 75%, var(--shirt-colour-2) 75%, var(--shirt-colour-2) 100%);} .teamShirtNewVERTICAL_STRIPES {background-image: linear-gradient(90deg, var(--shirt-colour-1) 25%, var(--shirt-colour-2) 25%, var(--shirt-colour-2) 50%, var(--shirt-colour-1) 50%, var(--shirt-colour-1) 75%, var(--shirt-colour-2) 75%, var(--shirt-colour-2) 100%);} .teamShirtNewDIAGONAL_STRIPES {background-image: linear-gradient(45deg, var(--shirt-colour-1) 25%, var(--shirt-colour-2) 25%, var(--shirt-colour-2) 50%, var(--shirt-colour-1) 50%, var(--shirt-colour-1) 75%, var(--shirt-colour-2) 75%, var(--shirt-colour-2) 100%);} .teamShirtNewVERTICAL_5050 { background: linear-gradient(to left, var(--shirt-colour-1) 50%, var(--shirt-colour-2) 50%);} .teamShirtNewHORIZONTAL_5050 { background: linear-gradient(to top, var(--shirt-colour-1) 50%, var(--shirt-colour-2) 50%);} .body-afterdark .teamShirtNewSMALL { border: 1px solid grey; } .body-afterdark .teamShirtNewLARGE { } @media (max-width:420px) { .teamShirtNewLARGE { width:150px; height: 120px;} } /** Common Fixture type things **/ .fixtureTypeCUP, .fixtureTypePLAYOFF, .fixtureTypeGRADING, .fixtureTypeGRADING {display: inline-block; width:1em; height: 1em; padding-right: 5px} .fixtureTypeCUP, .fixtureTypePLAYOFF {background: url("https://images.ottawafootysevens.com/footysevens/icons/trophy.png"); background-size: 1em; background-repeat: no-repeat; } .fixtureTypeGRADING {background: url("https://images.ottawafootysevens.com/footysevens/icons/letterG.png"); background-size: 1em; background-repeat: no-repeat;} .fixtureTypeFRIENDLY {background: url("https://images.ottawafootysevens.com/footysevens/icons/letterF.png"); background-size: 1em; background-repeat: no-repeat;} /** System config **/ .systemConfigInput {width: 95%} /* Preview Stuff **/ .pageContentEditLayoutViewContainer, .pageContentEditPreviewContainer, .pageContentEditLayoutPreviewContainerNotes, .pageContentEditPreviewContainerNotes {margin: 0 auto; max-width: 1000px; clear:both} .pageContentEditPreviewContainerNotes {margin-bottom: 25px; border-bottom: 3px solid black;} /** Some hacks for rotating text and hover **/ .verticalText { width:1em;text-align:center;height:200px;} .verticalText { writing-mode: vertical-rl;} .hoverMakeFullSize {height: var(--pre-hover-height)} .hoverMakeFullSize:hover { height: auto; ;} @media (min-width:1001px) { .mobileOnly { display: none !important; } }