90 lines
1.4 KiB
Plaintext
90 lines
1.4 KiB
Plaintext
|
/* global classes */
|
||
|
.center {
|
||
|
text-align:center;
|
||
|
}
|
||
|
.cb {
|
||
|
clear:both;
|
||
|
}
|
||
|
|
||
|
/* basic layout */
|
||
|
header {
|
||
|
width: 600px;
|
||
|
margin: 20px auto 0;
|
||
|
padding:10px 0 0 0;
|
||
|
|
||
|
background-color:#aaa;
|
||
|
|
||
|
border-radius: 5px;
|
||
|
border: 2px solid #000;
|
||
|
|
||
|
position:relative;
|
||
|
z-index:1;
|
||
|
}
|
||
|
|
||
|
#content {
|
||
|
width:550px;
|
||
|
margin: -10px auto;
|
||
|
padding: 20px 5px 5px 5px;
|
||
|
|
||
|
background-color: #ddd;
|
||
|
border-radius: 5px;
|
||
|
border: 2px solid #000;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
font-size: 1.4em;
|
||
|
a { text-decoration:none; color:#000; }
|
||
|
}
|
||
|
|
||
|
nav {
|
||
|
}
|
||
|
|
||
|
nav ul li {
|
||
|
float:left;
|
||
|
width:100px;
|
||
|
height:80px;
|
||
|
border: 1px solid #fff;
|
||
|
margin: 9px;
|
||
|
text-align:center;
|
||
|
|
||
|
/*temp*/
|
||
|
background-color: #444;
|
||
|
}
|
||
|
|
||
|
nav ul li a {
|
||
|
display:block;
|
||
|
height: 80px;
|
||
|
text-decoration:none;
|
||
|
color: #fff;
|
||
|
line-height:80px;
|
||
|
}
|
||
|
|
||
|
nav ul li a:hover { background-color:#777; }
|
||
|
|
||
|
.room
|
||
|
{
|
||
|
position:relative;
|
||
|
height: 300px;
|
||
|
}
|
||
|
|
||
|
.room#room1 { background:url(../img/room1.png) no-repeat center; }
|
||
|
.room#room2 { background:url(../img/room2.png) no-repeat center; }
|
||
|
.room#room3 { background:url(../img/room3.png) no-repeat center; }
|
||
|
.room#room4 { background:url(../img/room4.png) no-repeat center; }
|
||
|
.room#room5 { background:url(../img/room5.png) no-repeat center; }
|
||
|
|
||
|
.device
|
||
|
{
|
||
|
position:absolute;
|
||
|
cursor:pointer;
|
||
|
}
|
||
|
|
||
|
.on
|
||
|
{
|
||
|
background-color:Green;
|
||
|
}
|
||
|
|
||
|
.off
|
||
|
{
|
||
|
background-color:Red;
|
||
|
}
|