/* Table of contents

A.  Basic elements
A1. font
A2. header
B.  Modules/Page
B1. content block
B2. Detail page
B3. content
B4. buttons

C. date picker
D. search results
E. search box
F. search details 
G. navigation

A. move from layout.css

*/

/* .dayViewList .results {
    display: block;
    clear: both;
    float: left;
    width: 100%;
    margin-top: 1em;
} */

/* embedded (not popup) date picker */
#eventsDatePicker,
#newsDatePicker {
    float: left;
    margin-top: 0;
    padding-top: .9em;
    width: 11.25em;
}

#eventsDatePicker input,
#newsDatePicker input {
    margin: .2em 0 0;
    padding: .45em .2em;
    border: 1px #0081c6 solid;
}

.datePicker {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px #bdbbac solid;
    width: 14.1em;
    /* ie6-7 only */
}

.datePicker .toolbar,
.datePicker .picker,
.datePicker table {
    clear: left;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    border: none;
}

.datePicker .toolbar {
    /* use relative positioning so controls can be absolutely placed */
    display: block;
    position: relative;
    text-align: center;
}

.datePicker table,
.datePicker table tr,
.datePicker table th,
.datePicker table td,
.datePicker td.weekday,
.datePicker td.empty,
.datePicker td a {
    margin: 0;
    padding: 0;
    text-align: center;
    height: auto;
    background: #fff;
}

.datePicker th,
.datePicker td {
    border: 1px #fff solid;
}

.datePicker td.weekday,
.datePicker td a {
    /* rows with text full height */
    padding: 3px;
}

.datePicker td.empty {
    padding: 0;
    /* option 1: rows without links full height
    line-height: 1.6; */
    /* option 2: hide empty rows - calendar may move */
    line-height: 0;
}

.datePicker td.weekday {
    color: #444444;
    background-color: #bdbbac;
    font-weight: bold;
}

.datePicker td a {
    display: block;
    font-weight: bold;
    color: #444444;
    background-color: #f1f0eb;
}

.datePicker td a:hover {
    background-color: #bdbbac;
    text-decoration: none;
}

.datePicker .current a,
.datePicker .current a:hover {
    color: #fff;
    background-color: #0279B1;
    text-decoration: none;
}

.datePicker .thisMonth {
    width: 100%;
    position: relative;
    text-align: center;
    font-weight: normal;
    margin: 0 auto;
    padding: 3px 0;
    color: #fff;
    background-color: #0279B1;
}

.datePicker .previousMonth,
.datePicker .nextMonth {
    display: block;
    position: absolute;
    margin: 0;
    padding: 1px 4px;
    top: 0;
    width: auto;
    height: auto;
    font-weight: normal;
    z-index: 99;
    color: #fff;
    background-color: #0279B1;
}

.datePicker a.previousMonth:hover,
.datePicker a.nextMonth:hover {
    color: #fff;
    background-color: #2e3c50;
    text-decoration: none;
}

.datePicker a.previousMonth {
    left: 0;
}

.datePicker a.nextMonth {
    right: 0;
}

.datePicker .close {
    display: none;
}

.item {
    border-radius: 5px;
    border: 1px #d9d9d5 solid;
    margin-bottom: 18px;
    padding: 3px 13px 4px 13px;
}

.noItem {
    padding: 20px 10px;
    border-radius: 5px;
    border: 1px #d9d9d5 solid;
}

.noItem p {
    margin-bottom: 0;
}

.item:hover,
.noitem:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

div.results>.item>h3>a:focus,
div.results>.item>h3>a:active {
    display: block;
    background-color: #f8c165;
    padding: 0;
    outline-offset: 0;
    outline: 3px solid #f8c165;
}

/* .item h3.a {
    text-decoration: none ;
} */

.item h3 {
    color: #0279b1;
    padding: 0px 13px 0px 13px;
    text-decoration: underline;
    margin-top: 10px;
}

.item p {
    /* padding: 0px 15px 0px 15px; */
    padding: 0px 13px 0px 13px;
    color: #222;
}

.item p.date {
    color: #767676;
    font-weight: 400;
}

.item h3,
.item p {
    width: 768px;
}

/* d. search results - on layout.css*/
.results {
    clear: both;
    margin-left: 5px;
}

/* googlenews on layout, layout-wide, responsive.css */
.modContainer .googleNews {
    overflow: hidden;
}

.modContainer .googleNews {
    clear: both;
}

.home .googleNews {
    float: left;
    margin-left: 10px;
    width: 540px;
    margin-bottom: 7px;
}

.home .googleNews .item {
    margin-bottom: 5px;
}

.googleNews .item img {
    float: left;
    margin: 3px 8px 8px 0;
    clear: both;
}

.googleNews input.query {
    background: url() no-repeat scroll 3px 4px #fff;
}

.googleNews input.searchBoxEmpty {
    background-image: url();
}

.googleNews .isArchived {
    background-color: rgba(178, 178, 178, 0.25);
    border-left: #B2B2B2 3px solid;
    padding: 2px 7px 2px 5px;
}

.contentWide .modContainer .googleNews {
    width: calc(100% - 20px);
    padding-right: 0;
}

.contentWide .modContainer .bottomPanel .googleNews {
    width: calc(33% - 20px);
    float: left;
    margin: 0 20px 20px 0;
}

body #doc #contentContainer .modContainer .googleNews {
    width: 100%;
}

/* e. search box on event calendar - layout, layout-wide, and responsive.css*/
div.quinput {
    display: grid;
    /* width: 30em; */
    margin-left: 5px;
}

div.quinput .previous-news {
    margin-left: 5px;
}

.keywords>input:active,
.keywords>input:focus,
.filters>.nwCategory>select:active,
.filters>.nwCategory>select:focus,
.filters>.nwYear>select:active,
.filters>.nwYear>select:focus,
.filters>.nwMonth>select:active,
.filters>.nwMonth>select:focus {
    box-shadow: 0 0 0 3px #f5a623;
}

.nwYear,
.nwMonth {
    float: left;
}

.quinput label {
    display: block;
    clear: both;
    width: 100%;
    margin: 0;
    padding: .2em 0;
    color: #444;
}

.quinput .keywords,
.quinput .filters {
    display: block;
    margin: 0;
    padding: 0;
}

.quinput .keywords {
    margin-top: .7em;
}

.quinput .keywords input {
    margin: 0;
    /* padding: .6em .2em;
    height: 1em; */
    padding: 5px;
    vertical-align: middle;
}

.quinput .filters select {
    margin: 0;
    padding: .2em 0;
    height: 2.2em;
    /* min-width: 8.5em; */
    background-color: #fff;
}

.quinput .keywords,
.quinput .filters .nwYear,
.quinput .filters .nwMonth,
.quinput .filters .nwCategory,
.quinput .previous-news {
    padding-bottom: 20px;
}

.quinput .keywords input.query {
    width: 330px;
    box-sizing: border-box;
}

.quinput .filters .nwCategory {
    display: inline-block;
    padding-left: 20px;
}

.filters .nwCategory select#nwc {
    width: 240px;
}

.filters .nwYear select#nwy {
    width: 90px;
}

.filters .nwMonth select#nwm {
    width: 160px;
}

/*dropdown for Firefox*/
@supports (-moz-appearance:none) {
    .quinput .filters select {
        padding-left: 0.2em;
    }
}

/*dropdown for iOS*/
@supports (-webkit-touch-callout: none) {

    .quinput .keywords input,
    .quinput .filters select {
        border-radius: 0;
        color: #444444;
    }
}

.quinput .keywords input,
.quinput .filters select {
    border: 2px solid #d9d9d5;
}

.quinput .neighbourhoods,
.quinput .eventtype {
    margin-top: .6em;
    margin-right: .6em;
}

.quinput .buttons>input {
    margin-bottom: 20px;
}

.quinput .buttons {
    margin: 0 0 20px 0;
}

.quinput .buttons input[type='submit'] {
    margin-right: .6em;
    /* margin-top: 20px; */
}

.filters>.nwMonth {
    padding-left: 15px;
}

.searchForm {
    width: 100%;

}

/* f. search details - remove from layout */
.searchDetails {
    clear: both;
    float: left;
    margin-top: 6px;
}

.nwCategory-help {
    font-size: 0.88em;
}

/* g. navigation */
.navigation {
    float: right;
}

.navigation ul li {
    display: inline;
    margin-left: 10px;
}

/*** responsive ***/
/*** mobile nav, desktop body ***/
@media screen and (max-width: 980px) {
    body #doc #contentContainer .searchForm .datePicker {
        width: 50%;
        display: block;
        clear: both;
    }

    body #doc #contentContainer .searchForm .datePicker .picker table {
        display: table;
    }

    body #doc #contentContainer .searchForm .datePicker td.weekday,
    body #doc #contentContainer .searchForm .datePicker td a {
        padding: 7px;
    }

    body #doc #contentContainer .searchForm .datePicker .thisMonth {
        padding: 8px 0;
    }

    body #doc #contentContainer .searchForm .datePicker .previousMonth,
    body #doc #contentContainer .searchForm .datePicker .nextMonth {
        padding: 6px 8px;
    }

    body #doc #contentContainer .searchForm .quinput {
        width: 100%;
        margin-left: 0px;
    }

    body #doc #contentContainer .searchForm .picker table {
        width: 100%;
    }

    .item h3,
    .item p {
        width: auto;
    }

    div.quinput>.keywords,
    div.quinput>.filters {
        margin-left: 5px;
    }
}


/*** tablet ***/
@media screen and (max-width: 768px) {
    .contentWide .modContainer .bottomPanel .googleNews {
        width: 100% !important;
    }
}

/*** mobile ***/
@media (max-width: 599px) {
    body #doc #contentContainer .modContainer .googleNews {
        width: 100% !important;
        float: none;
    }

    /*reset link*/
    .buttons>a {
        margin-left: 5px;
    }

    .quinput .filters select {
        background-color: #fff;
    }

    .quinput .filters .nwCategory {
        display: block;
        padding-left: 0px;
    }

    .quinput .keywords input.query {
        padding-right: 10px;
        width: 100%;
    }

    div.quinput .filters .nwCategory label {
        padding-top: 5px;
    }
}

@media screen and (max-width: 980px) and (max-width: 480px) {
    body #doc #contentContainer .searchForm .datePicker {
        width: 100%;
    }
}