/*
    !!! css générique !!!
    NE PAS MODIFIER CE FICHIER
    NE PAS MODIFIER CE FICHIER
    NE PAS MODIFIER CE FICHIER
*/

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
body {
    padding-top: 50px;
    padding-bottom: 24px;
}
#banner {
    height:100px;
    background:url('img/banner.png');
    position:relative;
}
#content {
    width: 1024px;
    margin: auto;
    /*box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.25);*/
    background-color: WHITE;
}
#left_sidebar {
    width: 210px;
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
    float: left;
    text-align: center;
}

#right_sidebar {
    width: 150px;
    height: 500px;
    padding-top:15px;
    margin: 0px;
    margin-right: 5px;
    float: right;
}

#bottom {
    width:1024px;
    background-color: WHITE;
}
#footer {
    font-size:80%;
    text-align:center;
}

.form-actions {
    background-color: transparent;
}

/* === DEVICE OVERVIEW */
.device-title[on_off='on'] {
    color: DARKGREEN;
}
.device-title[on_off='off'] {
    color: FIREBRICK;
}

.ov-btn {
    position:relative;
    width:132px;
    display:inline-block;
    vertical-align:top;
    padding-top:5px;
    cursor:pointer;
}
.ov-btn a {
    text-align:center;
    display:block;
    width:130px;
    margin:auto;
}
.ov-btn-img {
    width:130px;
    height:70px;
    margin:auto;
}

#datasets-btn {
    background:url('img/list1.png') no-repeat center top;
}
#datasets-btn:hover {
    background:url('img/list2.png') no-repeat center top;
}
#alarms-btn {
    background:url('img/notification1.png') no-repeat center top;
}
#alarms-btn:hover {
    background:url('img/notification2.png') no-repeat center top;
}
#routes-btn {
    background:url('img/routes1.png') no-repeat center top;
}
#routes-btn:hover {
    background:url('img/routes2.png') no-repeat center top;
}
#data-btn {
    background:url('img/export1.png') no-repeat center top;
}
#data-btn:hover {
    background:url('img/export2.png') no-repeat center top;
}
#markers-btn {
    background:url('img/marker1.png') no-repeat center top;
}
#markers-btn:hover {
    background:url('img/marker2.png') no-repeat center top;
}
#comment-btn {
    background:url('img/rename1.png') no-repeat center top;
}
#comment-btn:hover {
    background:url('img/rename2.png') no-repeat center top;
}
#userTriggers-btn {
    background:url('img/notification1.png') no-repeat center top;
}
#userTriggers-btn:hover {
    background:url('img/notification2.png') no-repeat center top;
}
#triggers-btn {
    background:url('img/move1.png') no-repeat center top;
}
#triggers-btn:hover {
    background:url('img/move2.png') no-repeat center top;
}

.sparkline {
    width:200px;
    height:40px;
}

/* ======== unit ======== */


.unit-group {
    position:relative;
    margin-bottom:20px;
    height:230px;
}
.unit-group-block {
    position:absolute;
    top:45px;
    left:180px;
}
.unit-group-img {
    position:absolute;
    top:40px;
    left:0;
    cursor:pointer;
}
.unit-group-icons {
    position:relative;
    top:40px;
}
.unit-group-icon {
    width:100px;
    height:85px;
    display:inline-block;
    margin:0px 0px 5px 0px;
    cursor:pointer;
    text-align:center;
    vertical-align: top;
    line-height:0.8;
}
.unit-group-icons img {
    display:block;
    width:55px;
    height:55px;
    margin:auto;
    margin-bottom:3px;
}
.unit-group-icon a:hover {
    text-decoration:none;
    color:CORNFLOWERBLUE;
}
.unit-basic {
    border:1px solid SILVER;
    border-radius:5px;
    padding:10px;
    margin-bottom:10px;
}

#unit-add-button {
    background: MEDIUMSEAGREEN;
    height:110px;
    border-radius: 10px;
    cursor:pointer;
    position: relative;
}
.unit-add-button-title {
    color: SNOW;
    font-size:36px;
    font-weight:bold;
    position: absolute;
    bottom: 8px;
    right: 16px;
    text-shadow: -1px 0 DARKGREY, 0 1px DARKGREY, 1px 0 DARKGREY, 0 -1px DARKGREY;
}

a.divlink {
    color: inherit;
    text-decoration: none;
}
.unit-type-selector {
    width:280px;
    margin:auto;
    user-select: none;
}
.unit-type-selector-picture {
    width:200px;
    display:inline-block;
    vertical-align:top;
    text-align:center;
    user-select: none;
}
.unit-type-selector-arrow {
    font-size:48px;
    height:110px;
    width:30px;
    cursor:pointer;
    display:inline-block;
    vertical-align:top;
    padding-top:90px;
    user-select: none;
}
.unit-type-selector-arrow:hover {
    color:FORESTGREEN;
}
.unit-type-selector-left-arrow {
    text-align:right;
}
.unit-type-selector-right-arrow {
    text-align:left;
}
.unit-type-name {
    text-align:center;
    margin-bottom:20px;
}
.unit-type-slots td {
    padding:3px;
    vertical-align:middle;
}

/* === ALARM MONITOR === */

.alarm {
    border-radius:5px;
    margin:20px;
    padding:10px;
    overflow: auto;
}
.alarm-image-box {
    width:100px;
    height:100px;
    float :right;
}
.alarm-image {
    width:100px;
    height:100px;
    margin:0px;
    border-radius:5px;
}
.alarm-label {
    display:block;
    background-color:BLACK;
    padding-left:3px;
    padding-right:3px;
    border-radius:5px;
    border:1px solid SILVER;
    margin-top:10px;
    font-size:10px;
}

#alarm-informations {
    text-align:center;
}
.alarm-info {
    width:160px;
    background-color:SLATEGRAY;
    color:WHITE;
    display:inline-block;
    vertical-align:top;
    padding:16px;
    margin-bottom:16px;
}
.alarm-info-title {
    text-align:center;
}
.alarm-info-value {
    text-align:center;
    font-size:26px;
}

/* ======== alarm ======== */

.alarm {
    position:relative;
    min-height:100px;
}
.alarm-button {
    background:url('img/marker2.png') no-repeat center top;
    position:absolute;
    left:300px;
    top:15px;
    width:120px;
    height:100px;
    cursor:pointer;
}
.alarm-button a {
    display:block;
    position:relative;
    top:70px;
    text-align:center;
    text-decoration:none;
}
.alarm-markers {
    background:url('img/marker2.png') no-repeat center top;
    left:300px;
}
.alarm-cancel {
    background:url('img/raz_light2.png') no-repeat center top;
    left:420px;
}

/* === MENU === */

a.btn-menu {
    height:62px;
    display:block;
    margin:auto;
    padding-top:10px;
    color:GOLD;
    background-image: url('img/cat_selected.png');
    background-repeat: no-repeat;
    background-position:top left;
    font-style: Bold;
    font-weight: 700;
    font-size: 120%;
    text-align: center;
    text-decoration: none;
    cursor:pointer;
}
a.btn-menu-collapse {
    height:62px;
    display:block;
    margin:auto;
    padding-top:10px;
    color:BLACK;
    background-image: url('img/cat_unselected.png');
    background-repeat: no-repeat;
    background-position:top left;
    font-style: Bold;
    font-weight: 700;
    font-size: 120%;
    text-align: center;
    text-decoration: none;
    cursor:pointer;
}

a.btn-menu:hover {
    height:62px;
    display:block;
    margin:auto;
    padding-top:10px;
    color:GOLD;
    background-image: url('img/cat_selected.png');
    background-repeat: no-repeat;
    background-position:top left;
    font-style: Bold;
    font-weight: 700;
    font-size: 120%;
    text-align: center;
    text-decoration: none;
}

a.btn-menu-collapse:hover {
    height:62px;
    display:block;
    margin:auto;
    padding-top:10px;
    color:GOLD;
    background-image: url('img/cat_selected.png');
    background-repeat: no-repeat;
    background-position:top left;
    font-style: Bold;
    font-weight: 700;
    font-size: 120%;
    text-align: center;
    text-decoration: none;
}

a.inactive {
    color: BLACK;
}
a.active {
    color: GOLD;
}

a.inactive:hover {
    color: GOLD;
}
a.active:hover {
    color: BLACK;
}

/* === DAY === */
.day {
    border:1px solid SILVER;
    border-radius:5px;
    padding:10px;
    margin-bottom:20px;
}
.day-name {
    margin-bottom:40px;
}
.timeline {
    /*border-bottom:1px solid #000;*/
    height:25px;
    font-size: 0;
    cursor:pointer;
    position:relative;
    clear:both;
}
.timeline-labels {
    position:relative;
    text-align:center;
}
.timeline-label-0 {
    width:25px;
    position:absolute;
    left:0px;
    bottom:0px;
}
.timeline-label-12 {
    left:0px;
    bottom:0px;
    display:inline-block;
    vertical-align:bottom;
}
.timeline-label-24 {
    width:25px;
    position:absolute;
    right:0px;
    bottom:0px;
}
.timeline-scale {
    /*width:31px;*/
    width: 4.16%;
    height:25px;
    display:inline-block;
    vertical-align:bottom;
    border-left:2px solid BLACK;
    margin:0px;
    padding:0px;
    position:relative;
    z-index: 100;
}
.timeline-scale-last {
    /*width:30px;*/
    width:4.32%;
    border-right:2px solid BLACK;
}
.timeline-period {
    position: absolute;
    background-color:rgba(63,184,61,0.75);
    height:25px;
    top:0;
    z-index: 300;
}
.timeline-default {
    position: absolute;
    background-color:rgba(191,28,45,0.75);
    width: 100%;
    /*width:768px;*/
    height:25px;
    z-index: 200;
}
.day-buttons {
    /*width:500px;*/
    float:right;
    text-align:right;
    margin-right: 8px;
}
.day-icon  {
    width:70px;
    padding-top:60px;
    /*height:10px;*/
    display:inline-block;
    vertical-align:top;
    background-repeat:no-repeat;
    background-position: top center;
    text-align:center;
    cursor:pointer;
}
.day-reset {
    background-image: url('img/raz_unlight.png');
}
.day-copy {
    background-image: url('img/copy_unlight.png');
}
.day-paste {
    background-image: url('img/paste_unlight.png');
    display:none;
}
.day-delete {
    background-image: url('img/trash_unlight.png');
    display:none;
}
.interval {
    border:1px solid SILVER;
    border-radius:5px;
    padding:10px;
    margin:16px;
    /*height:120px;*/
}

/* === NEWS === */
#news-slideshow {
   position:absolute;
   z-index:1000;
   width: 670px;
   height: 120px;
   bottom:0;
   right:0;
   overflow: hidden;
}
#news-slideshow ul {
   height: 100px;
   padding:0;
   margin:0;
   list-style: none;
}
#news-slideshow li {
   float: left;
}
.news-slide {
   width: 670px;
   height: 110px;
   overflow: hidden;
   position:relative;
}
.news-slide h1 {
   border-bottom:0px;
}
.news-text {
   position:absolute;
   width:382px;
   cursor:pointer;
}
.news-img {
   position:absolute;
   width: 290px;
   height: 85px;
   right: 0px;
   top: 20px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

/* === Signal Level === */
.signal-level {
    height: 24px;
    width: 24px;
    vertical-align: bottom;
    margin: 0.2em;
}
/* === Battery Level === */
.battery-level {
    height: 20px;
    width: 30px;
    vertical-align: bottom;
    margin: 0.2em;
}