body,html {
padding: 0;
margin: 0;
}
#topbar,#topbar2{
background: #3d3d3d;
text-align: center;
color: #fff;
font-family: verdana;
margin-top: 0;
width: 100%;
box-sizing: border-box;
height: 50px;
line-height: 50px;
top: 0;
}
#topbar h1, #topbar2 h1, #topbar h2, #topbar2 h2 {
margin-top: 0;
font-weight: 100;
}
#topbar i, #topbar2 i {
line-height: 50px;
}
.topbar-title {
font-size: 20px;
}
#right {
float: right;
}
#icons {
margin-top: 50px;
width: 260px;
border-radius: 3px;
height: 100px;
line-height: 100px;
background-color: #3a3a3a;
box-sizing: border-box;
padding: 0px 10px;
color: #ccc;
display: inline-block;
margin-left: 20px;
font-family: geneva, sans-serif;
vertical-align: top;
transition: 0.10s linear;
}
#icons:hover {
background-color: transparent;
}
#bigIcon{
display: inline !important;
vertical-align: middle;
line-height: 100px;
}
#bigIcon {
float: left;
font-size: 70px;
}
#spc {
display: none;
}
#right {
display: inline-block;
margin: 0;
font-family: sans-serif;
font-weight: 300;
}
.menu {
top: 0px;
background-color: #333;
color: white;
width: 100%;
height: 100%;
position: fixed;
display: none;
z-index: 2;
overflow: auto;
text-align: center;
}
#hint {
font-size: 10px;
background-color: #333;
color: #fff;
left: 40px;
top: 10px;
opacity: 0;
border: 1px solid #555;
position: fixed;
transition: 0.25s ease;
transition-delay: 0.5s;
padding: 3px;
line-height: 10px;
}
#menubtn ,#menubtn2{
font-size: 20px;
left: 2px;
color: #fff;
float: left;
position: relative;
cursor: pointer;
transition: .25s ease;
padding: 0 10px;
height: 100%;
width: 30px;
padding: 0 10px;
display: inline-block;
border-radius: 50%;
}
#menubtn:hover ,#menubtn2:hover {
opacity: 0.85;
color: #aaa;
background: #555;
}
#menubtn:hover + #hint {
opacity: 1;;
}
@media (max-width:570px) {
#icons{
width: 90%;
font-size: 1.5em;
padding: 0 20px;
box-sizing: border-box;
border: 1px solid #888;
margin: 10px auto;
color: #aaa;
display:block;
}
#bigIcon {
font-size: 2em;
}
.menu {
padding: 0;
}
}