/* Tag categories for news and calendar pages */

/*
 * These are a list of CSS classes that a user can choose, which
 * allow them to have a number of different colours on categories
 * on their news or calendar pages.
 */

.sb-calendar-event, .event, .event a, a .event {
    background-color: #C3BFCB;
    border-radius: 3px;
    color: #031340;
}

.sb-calendar-event.LightGrey, .event.LightGrey, .event.LightGrey a, a .event.LightGrey {
    background-color: #EDEBE3;
    color: #706948;
}

.sb-calendar-event.DarkGrey, .event.DarkGrey, .event.DarkGrey a, a .event.DarkGrey {
    background-color: #C3BFc9;
    color: #1E1B33;
}

.sb-calendar-event.DarkRed, .event.DarkRed, .event.DarkRed a, a .event.DarkRed {
    background-color: #F6BCA7;
    color: #AB030E;
}

.sb-calendar-event.Red, .event.Red, .event.Red a, a .event.Red  {
    background-color: #FBD7CB;
    color: #BA2612;
}

.sb-calendar-event.LightRed, .event.LightRed, .event.LightRed a, a .event.LightRed {
    background-color: #FDE0DD;
    color: #D10000;
}

.sb-calendar-event.DarkBrown, .event.DarkBrown, .event.DarkBrown a, a .event.DarkBrown {
    background-color: #E1CCC8;
    color: #7C2529;
}

.sb-calendar-event.Brown, .event.Brown, .event.Brown a, a .event.Brown {
    background-color: #FAF0EB;
    color: #9D5F01;
}

.sb-calendar-event.LightBrown, .event.LightBrown, .event.LightBrown a, a .event.LightBrown {
    background-color: #FDF8F2;
    color: #916621;
}

.sb-calendar-event.DarkOrange, .event.DarkOrange, .event.DarkOrange a, a .event.DarkOrange {
    background-color: #F6Af95;
    color: #A0030E;
}

.sb-calendar-event.Orange, .event.Orange, .event.Orange a, a .event.Orange {
    background-color: #FCD7BA;
    color: #974D11;
}

.sb-calendar-event.LightOrange, .event.LightOrange, .event.LightOrange a, a .event.LightOrange {
    background-color: #FCDBCE;
    color: #C81417;
}

.sb-calendar-event.DarkYellow, .event.DarkYellow, .event.DarkYellow a, a .event.DarkYellow {
    background-color: #EAE6A4;
    color: #6C6714;
}

.sb-calendar-event.Yellow .event.Yellow, .event.Yellow a, a .event.Yellow {
    background-color: #FFE894;
    color: #8A6000;
}

.sb-calendar-event.LightYellow, .event.LightYellow, .event.LightYellow a, a .event.LightYellow {
    background-color: #FFF8E9;
    color: #8F6600;
}

.sb-calendar-event.DarkGreen, .event.DarkGreen, .event.DarkGreen a, a .event.DarkGreen {
    background-color: #ADCCC0;
    color: #065B43;
}

.sb-calendar-event.Green, .event.Green, .event.Green a, a .event.Green {
    background-color: #CBE0C7;
    color: #226732;
}

.sb-calendar-event.LightGreen, .event.LightGreen, .event.LightGreen a, a .event.LightGreen {
    background-color: #EFF6F2;
    color: #267E4F;
}

.sb-calendar-event.DarkBlue, .event.DarkBlue, .event.DarkBlue a, a .event.DarkBlue {
    background-color: #D4D2E8;
    color: #303987;
}

.sb-calendar-event.Blue, .event.Blue, .event.Blue a, a .event.Blue {
    background-color: #C8D3EF;
    color: #0A59AE;
}

.sb-calendar-event.LightBlue, .event.LightBlue, .event.LightBlue a, a .event.LightBlue {
    background-color: #E2EEF8;
    color: #207297;
}

.sb-calendar-event.DarkPurple, .event.DarkPurple, .event.DarkPurple a, a .event.DarkPurple {
    background-color: #CCC9D9;
    color: #031A6B;
}

.sb-calendar-event.Purple, .event.Purple, .event.Purple a, a .event.Purple {
    background-color: #E8E3F2;
    color: #6551D6;
}

.sb-calendar-event.LightPurple, .event.LightPurple, .event.LightPurple a, a .event.LightPurple {
    background-color: #EFE7F8;
    color: #91509F;
}

.sb-calendar-event.DarkPink, .event.DarkPink, .event.DarkPink a, a .event.DarkPink {
    background-color: #EAD0CE;
    color: #9E0031;
}

.sb-calendar-event.Pink, .event.Pink, .event.Pink a, a .event.Pink {
    background-color: #FBDFE4;
    color: #C30934;
}

.sb-calendar-event.LightPick, .event.LightPink, .event.LightPink a, a .event.LightPink {
    background-color: #F9E1E7;
    color: #BF2B49;
}

.event.startsBefore {
    border-left: none;
    padding-left: 8px;
    margin-left: 0px;
}

.event.endsAfter {
    border-right: none;
    margin-right: 0px;
}

.event.endsAfter .decoration {
    padding-right: 8px;
    margin-left: 0px;
}

/* Tag filter box, as used on both calendar and news pages */

#tagFilter {
    clear: both;
    margin-bottom: 20px;
}

#newsTagsButtons {
    clear: both;
    margin-bottom: 10px;
}

.newsTags a .event {
    display: inline-block;
    position: relative;
    top: 8px;
}

@media (max-width: 767px) {
    .newsTagButton {
        display: inline-block;
        margin-right: 10px;
    }

    #tagFilter .form-group {
        margin-bottom: 5px;
    }

    /* Overwrite bootstrap default because SiteBuilder font is smaller on xs mode */
    input[type=checkbox] {
        top: -2px
    }

    /* Stops them hanging down */
}

@media (min-width: 768px) {
    .newsTagButton {
        display: inline-block;
        margin-right: 20px;
    }

    input[type=checkbox] {
        top: -4px
    }

    /* Stops them hanging down */
}

@media (min-width: 992px) {
    .newsTagButton {
        display: block;
    }
}

#tagList .form-group {
    margin-left: 0px;
}

.clickMeHint {
    font-weight: bold;
    background-color: #FFFFCC;
}

#tagFilter input[type=checkbox] {
    position: relative;
    top: -4px;
    margin-right: 5px;
    cursor: pointer;
}

#tagFilter label.event:hover {
    cursor: pointer;
}

@media print {
    #tagFilter {
        display: none;
    }

    /* Pretty sure no one wants to print this thing. */
}

/* Extra styling for list of page tags newsbuilder/category/list.jsp - SBTWO-8395 */

#listOfPageTags div {
    margin-bottom: 10px;
}

.event a,
#layoutTable .event a {
    text-decoration: none;
}

.event .title {
    display: inline;
}

.event .time {
    display: block;
}

.event .location {
    display: block;
}

.event .abstract {
    display: block;
}

.event {
    font-size: 87%;
    line-height: 1.4em;
    margin: 0px;
    padding: 5px;
    font-family: Lato, Tahoma, Verdana, Arial, Helvetica, sans-serif;
    overflow: hidden; /* To stop everyone ruining page layouts with their long words */
}

/* SBTWO-7504 */
#tagList .form-check {
    display: inline-block;
    margin-right: 10px;
}

#tagList .form-check-label {
    padding: 0px 2px 0px 2px;
    margin: 0px;
}

/* Category Widget stuff (as seen in newsbuilder item creation pages) */

.categoryWidget .form-group {
    margin-right: 10px;
    margin-bottom: 5px;
}

.categoryWidget input[type=checkbox] {
    position: relative;
    top: -4px;
    margin-right: 5px;
    cursor: pointer;
}

.categoryWidget label.event:hover {
    cursor: pointer;
}

#createCategoryForm {
    margin-bottom: 20px;
}