body {
    background: #fff url(/gfx/decore-line.png) repeat-x 0 6.5em;
    padding: 0;
    color: #555;
    font-family: "Segoe UI", Segoe, Calibri, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.6;
    height: 100%;
}

.hide {
    display:none !important;
}

// LAYOUT

#container {
    margin: 0 6%;
}
.content {
    min-height: 100%;
    margin-bottom: -142px;
}
.content:after {
    content: "";
    display: block;
}

#header {
    overflow: hidden;
    position: relative;
    margin: 0 0 0 0;
    padding: 10px 0 10px;
}

#logo {
    float: left;
    padding-right: 5px;
}

#header-title {
    padding: 10px;
}

#subcon {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px 0 20px;
}
#logout {
    text-align: right;
    padding: 2px 0 2px;
}
#logout_btn {
    padding: 2px 2px 2px;
}
#help {
    text-align: right;
    padding: 2px 0 2px;
}
#help_btn {
    padding: 2px 2px 2px;
}
#center {
    display: flex; justify-content: center;
}

#recordplay {
    display: flex; justify-content: center;
    /*
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    */
}

#video {
    /*
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    */
}

#video-panel-heading {
    display: flex; justify-content: center;
}

#videobox {
    position: relative;
}

#videotitle {
    padding: 5px 0 0 0;
}

#thevideo {
    width: 100% !important;
    height: auto !important;
}

.abitsmaller {
    font-size: 80%;
}

.warning .content:after {
    heigth: 142px;
}
.warning {
    background: orange;
    display: flex; justify-content: center;
}

.all-ok .content:after {
    heigth: 142px;
}
.all-ok {
    background: lightgreen;
    display: flex; justify-content: center;
}

.jconfirm-content {
    display: flex; justify-content: center;
}

.jconfirm-buttons {
    text-align: center;
    float: none !important;
}

.recbutton {
    width: 15px;
    height: 15px;
    font-size: 0;
    background-color: red;
    border: 0;
    border-radius: 15px;
    margin: 8px;
    outline: none;
}
.notRec{
	background-color: darkred;
}
.Rec{
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes pulse{
    0%{
	box-shadow: 0px 0px 5px 0px rgba(173,0,0,.3);
    }
    65%{
	box-shadow: 0px 0px 5px 8px rgba(173,0,0,.3);
    }
    90%{
	box-shadow: 0px 0px 5px 8px rgba(173,0,0,0);
    }
}

/* TEXT ----------------- */
h1 + p {
    -moz-column-count: 2;
    -moz-column-gap: 1.5em;
    -o-column-count: 2;
    -o-column-gap: 1.5em;
    -webkit-column-count: 2;
    -webkit-column-gap: 1.5em;
    column-count: 2;
    column-gap: 1.5em;
    color: #7F4627;
    text-shadow: -1px -1px 0 hsla(0,0%,100%,.6);
    font-size: 120%;
}

p, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}
h1 {
    margin-bottom: .25em;
    font-family: 'Nadia Serif', Helvetica, "Helvetica Neue", Arial, sans-serif;
    font-size: 300%;
    text-shadow: -1px -1px 1px hsla(0,0%,100%,.6);
    letter-spacing: -1px;
}
h1, h2, h3 {
    font-weight: normal;
    line-height: 1.2;
}
h2, h3 {
    margin-bottom: 0;
    color: #555;
}
h2 {
    font-family: 'Nadia Serif', Helvetica, "Helvetica Neue", Arial, sans-serif;
    font-size: 150%;
    text-shadow: -1px -1px 0 hsla(0,0%,100%,.6);
    letter-spacing: -1px;
}
h3 {
    font-family: Cambria, "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 112.5%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
select#recslist, select#recslist-color {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url('/gfx/15xvbd5.png'), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

select#resclist-color {
   color: #fff;
   background-image: url('/gfx//15xvbd5.png'), -webkit-linear-gradient(#779126, #779126 40%, #779126);
   background-color: #779126;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}

/*

@media all and (min-width: 400px)  {
    body {background-color: #f1a;}
    .btn {font-size: 2.5vw;}
    .text1 {font-size: 1.0vw;}
    .text2 {font-size: 2.0vw;}
    .text3 {font-size: 3.0vw;}
    .text4 {font-size: 4.0vw;}
}
@media all and (min-width: 600px)  {
    body {background-color: #1fa;}
    .btn {font-size: 2.5vw;}
    .text1 {font-size: 1.0vw;}
    .text2 {font-size: 1.5vw;}
    .text3 {font-size: 2.5vw;}
    .text4 {font-size: 3.0vw;}
}
@media all and (min-width: 1000px) {
    body {background-color: #1af;}
    .btn {font-size: 1.5vw;}
    .text1 {font-size: 1.0vw;}
    .text2 {font-size: 1.5vw;}
    .text3 {font-size: 2.0vw;}
    .text4 {font-size: 3.0vw;}
}
@media all and (min-width: 1400px) {
    body {background-color: #555;}
    .btn {font-size: 1.5vw;}
    .text1 {font-size: 1.0vw;}
    .text2 {font-size: 1.25vw;}
    .text3 {font-size: 1.5vw;}
    .text4 {font-size: 2.0vw;}
}
*/

/*
@media all and (orientation: landscape) {
    body {background-color: #aaa;}
}
*/