body     { background-color: #FFFFE7;
           font-family:Arial, sans-serif; font-size:16px;}
input    { font-family:Arial, sans-serif; font-size:16px; }
select   { font-family:Arial, sans-serif; font-size:16px; }

#logo    { margin-top:10px; margin-left:20px; width:120px; height:132px;
           background-image:url(../images/default/fhemicon.png); }
#menu    { margin-top:10px; margin-left:20px; width:140px; }
#menuScrollArea { width: 175px; left:0px; top:0px; height:100%; 
                  position:fixed; overflow-x:hidden; overflow-y:auto; } 

#hdr     { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }

#connect_err { background-color: #000000; color: #FFFFFF; 
               position:absolute; top:0px; left:40px; z-index: 10; }
.devType { padding-top:20px; }
a {  color: #278727; }
img {  border-style: none; }

.wide { width:100%; }

table.block { border:1px solid gray; background: #F8F8E0; }
table.block tr.odd { background: #F0F0D8; }
table.block tr.sel { background: #F0F0D8; }
table { border-radius:8px; }

table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
table.room tr.sel { background: #A0FFFF; }

#right { position:absolute; top:20px; left:180px; bottom:5px; right: 5px; }


h2,h4 { color:#52865D; line-height:1.3;
           margin-top:1.5em; font-family:Arial,Sans-serif; }
h3 { display: inline; color:#52865D; line-height:1.3;
           margin-top:1.5em; font-family:Arial,Sans-serif; }
body.modular h3 { display: block; }
.langLinks { font-size: 0.6em; }


div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }

a img { border-style:none; }
.col2 { text-align:center; }

/* detail-selector & slider */
.makeTable { display:inline; float:left; clear:left;
             margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; }

select {  margin-left:5px; margin-right:5px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:250px; height:26px; }

/* detail only */
.makeSelect .slider {background:#F0F0D8; border-radius:8px;}

/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; 
          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
          border:3px solid; color:#278727; text-align:center; } 
.downText { margin-top:2px; }

pre { white-space: pre-wrap; }

svg      { height:32px; width:32px; fill:#278727; }
svg.on,svg.FS20_on { fill:orange; }

/* next lines are for remotecontrol */
.rc_body              { border-style: solid; border-color: gray; border-width: 2px; padding: 5px;
                        background: #C8C8B0; font-size:6px;}
.rc_button            { padding: 5px 7px;}
.rc_button img        { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }

.changed { color:red; }


@media screen and (max-width: 480px) {
  body.commandref ul { -webkit-padding-start:0; }
  body.commandref div#menuScrollArea div#menu a { margin-left:10px; }
  body.commandref table.class_device { word-break:break-all; }

  body.commandref div#right { top:48px; }
  body.commandref div#logo { display:none; }
  body.commandref div#menuScrollArea { z-index:30; }
  body.commandref div#menu {
    position:fixed; background-color:#FFFFE7; margin:0;
    top:0; left:0; right:0; height:48px; width:auto;
  }
  body.commandref div#menu a { margin:20px; }
  body.commandref div#menu br { display:none; }
  body.commandref div#menu h3 { display:none; }
  body.commandref div#right { left:5px; right:5px }

  body.commandref.fhemhtml table.room { display:none; }
  body.commandref.fhemhtml img#cloudfree { display:none; }

  /* fhem.de */
  #menuScrollArea { display:none; }
  #right { left:0; right:0; }
}

@media screen and (max-height: 480px) {
  body.commandref ul { -webkit-padding-start:0; }
  body.commandref div#menuScrollArea div#menu a { margin-left:10px; }
  body.commandref table.class_device { word-break:break-all; }

  body.commandref div#right { top:48px; }
  body.commandref div#logo { display:none; }
  body.commandref div#menuScrollArea { z-index:30; }
  body.commandref div#menu {
    position:fixed; background-color:#FFFFE7; margin:0;
    top:0px; left:0px; right:10px; height:48px; width:auto;
  }
  body.commandref div#menu a { margin:20px; }
  body.commandref div#menu br { display:none; }
  body.commandref div#menu h3 { display:none; }
  body.commandref div#right { left:5px; right:5px }

  body.commandref.fhemhtml table.room { display:none; }
  body.commandref.fhemhtml img#cloudfree { display:none; }
}