/* CSS System status */

body {
    margin : 0;
    font-family: Helvetica, Arial, sans-serif;
}

.systemstatus {
    background-image: url(../images/bg_iso.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	width:1920px;
	height: 1080px;
}

.logo_beabloo {
    position: absolute;
    width: 144px;
    height: 58px;
    background-image:url(../images/beabloo.png);
    right:5%;
    bottom:5%;
}

.title_systemstatus {
    position: absolute;
    color: rgba(0,0,0,1);
    top: 5%;
    left: 5%;
    font-size: 2.5vw;
    width: 90%;
} 

.columnA {
    position:absolute;
    top: 30%; left: 5%;
    width:40%;
}

.columnB {
    position:absolute;
    top: 30%; left: 50%;
    width:40%;
}

.cpuBlock {
    position:absolute;
    top: 20%; left: 5%;
    width: 85%;
    margin-bottom: 20px;
}
.cpuImage {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/cpu_icon.png);
    background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.cpuValue {
    position: relative;
    width: auto;
    margin-left: 20px;
    float: left;
    font-size: 2vw;
}

.ramBlock {
    position:relative;
    width: 100%;
    margin-bottom: 20px;
	float:left;
}

.ramImage {
    position:relative;
    width: 3vw; height: 3vw;
    background-image:url(../images/ram_icon.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.ramValue {
    position: relative;
    width: auto;
    margin-left: 20px;
    float: left;
    font-size: 2vw;
}

.hddBlock {
    position:relative;
    width: 100%;
    margin-bottom: 20px;
	float:left;
}

.hddImage {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/hdd_icon.png);
    background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.hddValue {
    position: relative;
    width: auto;
    margin-left: 20px;
    float: left;
}

.screenBlock {
    position:relative;
    width: 100%;
    margin-bottom: 40px;
	float:left;
	margin-top:20px;
}

.screenImage {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/screen_icon.png);
    background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.screenValue {
    position: relative;
    width: auto;
    margin-left: 20px;
    float: left;
    font-size: 2vw;
}

.videoinBlock {
    position:relative;
    width: 100%;
	float:left;
}

.videoinImage {
    position:relative;
    width: 6vw; height:4vw;
    background-image:url(../images/videoin_icon.png);
    background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}

.videoinSemaphore {
    position:relative;
    width: 4vw; height:4vw;
    background-image:url(../images/red.png);
    background-repeat:no-repeat;
	background-size:contain;
    float: left;
}

.bluetoothBlock {
    position:relative;
    width: 100%;
    margin-bottom: 20px;
	float:left;
}

.bluetoothImage {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/bluetooth_icon.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}

.bluetoothSemaphore {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/red.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}

.internetBlock {
    position:relative;
    width: 100%; 
    margin-bottom: 20px;
	float:left;
}

.internetImage {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/internet_icon.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}

.internetSemaphore {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/green.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}

.networkBlock {
    position:relative;
    width: 100%;
    margin-top: 30px;
	float:left;
}

.networkImage {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/network_icon.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.networkSemaphore1 {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/red.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.networkValue1 {
    position: relative;
    width: 80%;
    font-size: 2vw;
}
.networkSemaphore2 {
    position:relative;
    width: 3vw; height:3vw;
    margin-left:3vw;
    background-image:url(../images/green.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.networkValue2 {
    position: relative;
    width: 80%;
    font-size: 2vw;
}
.networkSemaphore3 {
    position:relative;
    width: 3vw; height:3vw;
    margin-left:3vw;
    background-image:url(../images/red.png);
    background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
}
.networkValue3 {
    position: relative;
    width: 80%;
    font-size: 2vw;
}

.wifiBlock {
    position:relative;
    width: 100%;
	float:left;
}

.wifiImage {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/wifi_icon.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
    margin-top: 20px;
}

.wifiSemaphore {
    position:relative;
    width: 3vw; height:3vw;
    background-image:url(../images/red.png);
     background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
    float: left;
    margin-top: 20px;
}
.wifiValue {
    position: relative;
    width: auto;
    margin-left: 20px;
    float: left;
    font-size: 2vw;
    padding-top: 20px;
}