FHEM Cobraball

body { background:none repeat scroll 0 0 #FFFFFF; color:#333333; font-family: Arial, sans-serif; font-size:11px; margin:0; padding:0; }
a:link, a:visited { color:#309bbd; text-decoration:none; }
a:hover { color:#003366; }
a img { border:medium none; }

div#logo    { position: fixed; z-index:12000; top:3px; left:5px; float:left; width:24px;height:24px; background:url("../images/default/fhemicon_bright.png") no-repeat;}
#menu    { position: relative; top: 60px; float:left; width: 25%; padding: 0px 20px 120px;}
#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
#hdr     { position: fixed; z-index: 1000; float: left; clear: both; height:32px; width: 100%; -webkit-box-sizing: border-box;  moz-box-sizing: border-box; box-sizing: border-box; background:black; background-image: linear-gradient(#333333,#222222); }
#content { width:70%; float:right; margin-top:60px; }
#errmsg { background-color: #000000; color: #FFFFFF;
          position:fixed; top:0px; left:40px; z-index: 10; }

table { margin: 0; padding: 0; border-spacing: 0px; border-collapse:separate; }
td, th { font-family: Arial, sans-serif; font-size:11px; line-height:13px; vertical-align:middle; }
th { font-weight:bold; font-size:12px; text-align:left; }

div.devType { display:block; padding: 5px 10px 4px; font-weight:bold; font-size: 1.3em; }
div#content > table { width:90%; background-image: linear-gradient(#e5e5e5,#ababab); }
div#content table { border:1px solid lightgray; border-radius:3px; border-spacing:0px;}
div#content table td { border-bottom:1px solid #ddd; border-top: 1px solid #fff; padding:0; margin:0; background:#e5e5e5; background-image: linear-gradient(#e5e5e5,#dbdbdb); }
div#content table td table, div#content table td table td { border:0px none; border-radius: 0px; background: #eee; }
table br { clear:both; }
table.block { padding: 5px 10px 4px; width: 100%; min-width:250px; background: none; border:0px none;}
table.block tr { background:none repeat scroll 0 0 white; }
table.block tr.sel { background: #cac8cf; }
table.block td {border: 0px solid none;}

div#menu table { width:100%; }
table.room { background: #eee; width: 100%; border: 1px solid lightgray; border-radius:3px; border-spacing:0px;}
table.room td { border-top: 1px solid #fff; border-bottom: 1px solid #ddd; padding: 5px 10px 4px; font-weight:bold; font-size:1.2em}
table.room a { color: #455667; text-decoration: none; }
table.room a:hover { color: #1f1f1f; }
table.room tr.sel { background: #cac8cf; }

input { outline:none; border:1px solid white; color: #344556; padding:2px; border-radius:1px;}
input:focus { border: 1px solid red; }
input.maininput { background: lightgray; margin-top:5px; }
div#hdr:before { float:left; color:white; margin:5px 5px 0px 35px; text-shadow: 0px 10px gray;content: "FHEM SERVER"; }
textarea { background-color: #e5e5e5; border: 1px solid #ffffff; color: gray; padding:5px; margin-left: 10px; border-radius:3px; }

/*
next lines are for commandref and faq
*/
#left  { position:absolute; top:140px; left:60px; width:140px; }
#right { float:left; margin-top:60px; width:800px; }
body>div#left { position:fixed; }
div#block { border:1px solid gray; background: #101010; padding:0.7em; }
div#dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
h2,h3,h4 { color:#777; line-height:1.3; margin-top:1.5em; font-family:Verdana; }

select.attr,input.attr,select.set,input.set { margin-bottom:10px; }
a img { border-style:none; }
.col2 { text-align:center; }
tr.column td { padding:0; vertical-align:top;}

/* detail-selector & slider */
select {  border:0px none; margin-left:5px; margin-right:5px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:250px; height:26px; }
.set .slider { background:#101010; 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:2px solid; color:#309bbd; text-align:center; }
.downText { margin-top:8px; font-weight:bold; }

svg { height:32px; width:32px; fill:#309bbd; vertical-align:middle; margin:2px 0; }
g.on { fill:red; }
div[id*="Kalender-"] { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div[id*="disp"] { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.block tr.even a[onclick*="Javascript"], table.block tr.odd a[onclick*="Javascript"] { font-weight: bold; cursor: pointer }
div.dval { margin-left:10px; }

.colorpicker_ct .slider { background: url(../jscolor/ct_background.svg); }
.colorpicker_ct_mired .slider { background: url(../jscolor/ct_mired_background.svg); }
.colorpicker_hue .slider { background: url(../jscolor/hue_background.svg); }
.get,.set,.attr { margin-bottom:5px; float:left; }
select.svgSrc     { width:100px; }
select.svgColumn  { width:50px;  }
select.svgRegexp  { width:120px; }

/* jQuery-UI mods */
div.ui-dialog { border:3px solid #278727; padding: 0.2em; }
div.ui-dialog div.ui-dialog-titlebar { display:none; }
div.ui-widget-content { background:#FFFFE7; }
.ui-widget { font-family:Arial,sans-serif!important; }
.ui-button-text { font-weight:normal!important; color:#555!important; }

#fwmenu {
  position: absolute; z-index:1005;
  text-align:left; max-width:600px;
  font-weight: normal; font-size: 100%; 
  background:#FFFFE7; border:1px solid #278727;
}
#fwmenu li a { color:#278727; }

div#svgmarker {
  position: absolute; z-index:1005; padding: 6px 10px;
  text-align:left; max-width:600px;
  color:#278727; background:#FFFFE7;
  border:2px solid #278727; border-radius:4px;
}

div.detLink { display:inline-block; margin-right:0.5em; }

svg.zw_nr .zwBox { stroke:#333333; stroke-width:2px; fill:#eeeeee; }
svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#eeeeee; }
svg.zw_nr .zwMargin { stroke:#333333; stroke-width:1px; fill:none; }
svg.zw_nr .zwLine { stroke:#333333; stroke-width:1px; }
svg.zw_nr .zwArrowHead { fill:#333333; stroke-width:1px; }
svg.zw_nr { height:auto; width:auto; margin:0; }