.graphic_pane{ background: #50597B; width:100%; list-style-type: none; margin:0; } .graphic_pane li{ background: #50597B; margin:0; display: inline-block; vertical-align: top; padding: 10px; margin-right: 1px; } .graphic_pane li h2{ color: #ffffff; font-size: 16px; margin:0; padding: 0; } .graphic_pane li h1{ color: #8B95B8; font-size: 11px; margin:0 0 10px 0; padding: 0; } .graphic_pane li.pane_red{ border-top: 3px solid #EF4D66; } .graphic_pane li.pane_blue{ border-top: 3px solid #0AB4B3; } .graphic_pane li.pane_orange{ border-top: 3px solid #FFBF4C; } .graphic_pane li.pane_cyan{ border-top: 3px solid #4F92BD; } .gpio_container{ background:#393939; width:100%; height:100%; border-collapse:collapse; border-top:5px solid #636363; border-bottom:5px solid #636363; margin:0; padding:0; } .gpio_container tr td { margin:0; padding:0; } .gpio_container tr td div{ padding:3px 10px 3px 10px; line-height:20px; height:20px; background-color:#393939; transition: all 0.2s ease-in-out; } .gpio_container small{ font-size:9px; } .gpio_container span:before{ font-size:20px; } .gpio_container tr td div:hover{ background:#222222; } .gpio_state_on,.gpio_state_waiting,.gpio_state_off,.gpio_power,.gpio_ground{ background:#222222; padding:5px; color:#ffffff; cursor:help; transition:all 0.4s ease-in-out; } .gpio_state_on,.gpio_state_waiting,.gpio_state_off{ cursor:pointer; } .gpio_state_on span,.gpio_state_waiting span,.gpio_state_off span{ text-shadow:0 0 5px #ED0808; transition:all 0.4s ease-in-out; } .gpio_state_on span:before,.gpio_state_waiting span:before,.gpio_state_off span:before{ content: "\f192"; font-family: FontAwesome; } .gpio_state_on span{ text-shadow:0 0 5px #ED0808; } .gpio_state_waiting span{ text-shadow:0 0 5px #08D2ED; } .gpio_state_on span{ text-shadow:0 0 5px #0AED08; } .gpio_power span:before{ content: "\f0e7"; text-shadow:0px 0px 5px #ED0808; color:#FFDC00; font-family: FontAwesome; } .gpio_ground span:before{ content: "\f011"; font-family: FontAwesome; }