/* Styles for the wolfram-u calendar.

   developer:   marionm
   requires:    /common/framework/css/framework.en.css
                /wolfram-u/css/shared.en.css
   ========================================================================== */


/* ==========================================================================
   shared
   ========================================================================== */

main header,
main section {
    margin: 3rem 0;
}


/* ==========================================================================
   special events header
   ========================================================================== */

.subheading {
    color: #535353;
    font-family: 'Noto Serif', 'Source Sans Pro', Arial, sans-serif;
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    float: left;
}

 #calendar-header a:hover {
    color: #ff8933;
}

#calendar-header a {
    padding-bottom: 0.6rem;
    display: inline-block; 
    color: #ff6c00; 

}

#events-header {
    margin-top: 5rem;
}

#events-header h1 {
    margin-bottom: 2rem;
}

#special-events a {
    color: #535353;
    display: block;
    max-width: 206px;
}

#special-events a:focus,
#special-events a:hover {
    color: #ff6c00;
}

#special-events .name {
    display: block;
    font-weight: 600;
    margin-bottom: .5rem;
}

#special-events .date {
    color: #757575;
    display: block;
    font-size: .75rem;
}

#special-events a:focus .date,
#special-events a:hover .date {
    color: #ff6c00;
}

/*#special-events>*:nth-child(1) a {
    padding-right: 1rem;
}

#special-events>*:nth-child(2) a {
    margin: 0 auto;
    padding: 0 .5rem;
    max-width: 206px;
}

#special-events>*:nth-child(3) a {
    padding: 0;
    max-width: 206px;
}

#special-events>*:nth-child(4) a {
    padding-left: 1.5rem;
}*/


/* ==========================================================================
   calendar header
   ========================================================================== */

#calendar-header {
    margin-bottom: 0;
}

#calendar-header .page-title {
    margin-bottom: .5rem;
}

#calendar-header p {
    line-height: 1.5;
}

#calendar-header .course-title {}

#calendar-header .level {
    float: left;
}

#calendar-header .length {
    float: left;
    margin-left: 4rem;
}

#calendar-header .social {
    float: right;
}

#calendar-header .social a:not(:last-child) {
    margin-right: .25rem;
}

#calendar-header .download {
    float: right;
    margin-top: .5rem;
}

#calendar-header .download img {
    margin-right: .5rem;
}

#calendar-header .download a {
    color: #5bb2a6;
}

#calendar-header .download a:focus,
#calendar-header .download a:hover {
    color: #ff6c00;
}

/* ==========================================================================
   sorting
   ========================================================================== */

#sort {
    font-size: .8rem;
    margin: 1.75rem 0 1rem;
}

#sort>* {
    display: inline-block;
    margin-right: 1.5rem;
}

#sort span {
    font-weight: 600;
}

#sort .active {
    background: #5bb2a6;
    border-radius: .25rem;
    color: #fff;
    font-size: .8rem;
    padding: .3rem .5rem;
}

#sort .active:focus,
#sort .active:hover {
    background: #ff6c00;
}


/* ==========================================================================
   results
   ========================================================================== */

#result {
    margin: 0 0 5rem;
}

#result .language {
    font-size: .8rem;
    font-weight: 400;
}

#result .limited {
    font-size: .6rem;
    text-transform: uppercase;
}


/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */


/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {}


/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    #calendar-header .social {
        margin-top: 1rem;
    }
}


/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {}


/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}


/* printer styles
   ========================================================================== */

@media print {}