body {
    font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;
}

.header {
    min-width: 640px;
}

.headline {
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}

.rightbox {
    float: right;
    max-width: 50%;
}

.leftbox {
    float: left;
    max-width: 50%;
}

.submit {
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;

    width: 6em;
    height: 1em;
    background: green; color: white;

    padding: 0.5em 0 0.5em 0;
    border-radius: 5px;
    float: right;
    cursor: pointer;
}

.info {
    font-size: 2em;
    text-align: center;

    height: 1em;
    background: lightblue;

    margin-right: 0.2em;
    border-radius: 5px;
    padding: 0.5em;
    float: right;
}

.submit:hover {
    background: GreenYellow;
}

#filter {
    font-size: 2em;
    margin: 0 1em .3em 0;
}

.clear {
    clear: both;
}

.explainer {
    margin-top: 5em;
    text-align: right;
}

.explainer ul {
    list-style-type: none;
    padding:0;
    margin:0;
    height: 8em;
    overflow: hidden;
}

.boxer {
    font-size: 1em;
    float: left;
    width: 2em;
    height: 2em;
    background: grey;
    color: white;
    text-align: center;
    margin-right: 0.2em;
    padding: 0.2em 0 0 0;
    cursor: pointer;
    border-radius: 5px;
}

.allboxes {
    clear: left;
    margin-top: 3em;
}

.mediumboxes {
    width: 3em;
    height: 3em;
}

.largeboxes {
    width: 4em;
    height: 4em;
}

.views {
    float: left;
    background: grey;
    margin-right: 0.2em;
    padding: 0.2em 0 0 0;
    text-align: center;
    color: white;
    width: 3em;
    height: 2em;
    cursor: pointer;
    border-radius: 5px;
}

.views:hover,
.boxer:hover {
    background: #eee;
}

.track h2 {
    text-align: center;

    border-bottom: 0.3em solid #4588ba;

    margin: 2em 0 1em 0;
    clear: both;
}

.event {
    overflow: hidden;

    background: #eee;
    border-radius: 5px;

    margin: 0 0.8em 0.8em 0;
    cursor: pointer;
}

.event-in-list {
    display: inline-block;
    float: left;
}

.event-in-list.small {
    width: 14em;
    height: 14em;
}
.event-in-list.medium {
    width: 17em;
    height: 17em;
}
.event-in-list.large {
    width: 20em;
    height: 20em;
}

.event-in-calendar,
.room-label {
    position: absolute;
    width:    18.75%;
}

.room-label {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    top: 350px;
}
.day_1    {  }
.day_2    {  }
.day_3    {  }
.day_4    {  }

.event-in-calendar.room_325, .room1 { left:  5.00%; }
.event-in-calendar.room_326, .room2 { left: 28.75%; }
.event-in-calendar.room_327, .roomg { left: 52.50%; }
.event-in-calendar.room_328, .room6 { left: 76.25%  }

.event-in-calendar.duration_1800 { height:  95px; }
.event-in-calendar.duration_3600 { height: 195px; }
.event-in-calendar.duration_5400 { height: 290px; }
.event-in-calendar.duration_7200 { height: 395px; }
.event-in-calendar.duration_8100 { height: 445px; }

.guide {
    position: absolute;
    z-index: -1;
    font-weight: bold;
}
hr.guide {
    left: 4%;
    width: 95%;
}

.time_1100 { top:  400px;  }
.time_1130 { top:  500px;  }
.time_1200 { top:  600px;  }
.time_1245 { top:  750px;  }
.time_1300 { top:  800px;  }
.time_1400 { top: 1000px;  }
.time_1500 { top: 1200px;  }
.time_1600 { top: 1400px;  }
.time_1645 { top: 1550px;  }
.time_1700 { top: 1600px;  }
.time_1715 { top: 1650px;  }
.time_1730 { top: 1700px;  }
.time_1800 { top: 1800px;  }
.time_1815 { top: 1850px;  }
.time_1830 { top: 1900px;  }
.time_1900 { top: 2000px;  }
.time_2000 { top: 2200px;  }
.time_2030 { top: 2300px;  }
.time_2100 { top: 2400px;  }
.time_2115 { top: 2450px;  }
.time_2145 { top: 2550px;  }
.time_2200 { top: 2600px;  }
.time_2245 { top: 2750px;  }
.time_2300 { top: 2800px;  }
.time_2330 { top: 2900px;  }
.time_0000 { top: 3000px;  }
.time_0015 { top: 3050px;  }
.time_0100 { top: 3200px;  }
.time_0200 { top: 3400px;  }

.event-in-list:hover {
    position: relative;
    top: auto !important;
}

.event:hover,
.highlighted {
    overflow: visible;
    z-index: 1;
    background: grey;
}

.selected {
    background: red !important;
}
.selected.friend {
    background-image:
        repeating-linear-gradient(
          45deg,
          purple,
          purple 20px,
          red 20px,
          red 40px /* determines size */
        ) !important;
        color: white;
}
.selected:hover,
.friend:hover {
    background: pink !important;
    color: black;
}
.friend {
    background: purple;
    color: white;
}

.title {
    font-weight: bold;
    font-size: 1.1em;
    padding: 0.2em 0.2em 0 0.2em;
}

.event_type {
    font-style: italic;
    padding: 0 0.2em 0 0.1em;
    margin-bottom: 0.2em;
}

.event:hover .abstract,
.event.highlighted .abstract {
    background: inherit;
}

.abstract {
    padding: 0 0.2em 0.2em 0.2em;
    border-radius: 5px;
}

.hidden {
    visibility: hidden !important;
    display: none !important;
}

.export-url {
    float: left;
    padding: 0.2em 0 0 0;
    border-radius: 5px;
    text-align: center;
    background: lightblue;
    width: 6em;
    height: 2em;
}

#qrcode {
    display: inline-block;
    float: right;

    margin: 0 0.8em 0.8em 0;
    width:  14em;
    height: 14em;
}

.limit#qrcode canvas {
    width: 4em;
    height: 4em;
}

#qrcode:hover canvas,
.selected#qrcode canvas {
    width: 224px !important;
    height: 224px !important;
}