@import url(opera.css);

button {
  font-weight: 700;
  float: right;
}

.manual,
ul {
  padding: 3px;
  border-radius: 4px;
  background-color: rgba(227, 232, 236, 0.4);
  border: 1px solid rgba(175, 188, 203, 0.5);
}

.manual::after {
  content:'';
  display: block;
  clear: both;
}

.connected{
  padding: 13px 8px 10px 10px;
  margin: 0px;
  border-radius: 4px;
  background-color: rgba(227, 232, 236, 0.4);
  border: 1px solid rgba(175, 188, 203, 0.5);
}

.connected dl{
  width: 100%;
}

.connected  dd:first-child:after{
  content: '\00a0';
}

ul li {
  padding: 13px 0px 10px 10px;
  margin: 0px;
  border: 0px solid rgba(175, 188, 203, 0.306);
  border-bottom-width: 1px;
  background: none;
  list-style-position:inside;
  opacity: 0;
  transition: opacity 0.5s;
}

ul li::after {
  content:'';
  display: block;
  clear: both;
}

ul li:first-child {
  padding-top: 10px;
}

ul li:last-child {
  border-bottom-width: 0px;
  padding-bottom: 7px;
}

ul li:only-of-type {
  padding-top: 13px;
  padding-bottom: 10px;
}

li.show {
  opacity: 1;
}

li.hide {
  opacity: 0;
}

dl {
  display: inline-block;
  margin: 0px;
}

dl dd {
  display: inline-block;
  width: auto;
}

ul dl {
  margin: 0;
}

ul dl dt img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%
}

ul dl dd {
  padding: 2px 0 2px 0;
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
}

.iplabel:after{
  content: ':';
}

.portlabel{
  color: rgba(0, 0, 40, 0.6);
}

ul p.status_label {
  padding: 2px 0px 2px 10px;
  text-align: center;
  float: right;
  margin: 0px;
}

div p.status_label {
  padding: 2px 0px 2px 10px;
  text-align: center;
  float: right;
  margin: 1.7em 0 8px 8px;
}

.manual {
  padding: 6px 13px;
}

.manual dl:first-child dd:after {
  content: ':';
  display: inline-block;
  vertical-align: middle;
  padding-left: 4px;
}

.manual dl dt {
  display: block;
  width: auto;
  margin: 0.05em;
}

.manual button {
  margin-bottom: 8px;
  margin: 1.7em 0 8px 8px;
}

ul button {
  margin: 0;
  margin-left: 8px;
}

input[type="text"],
input[type="number"] {
  border: 1px solid #afbccb;
  border-radius: 3px;
  padding: 4px 5px;
}

input[type="text"]:hover, input[type="text"]:focus,
input[type="number"]:hover, input[type="number"]:focus {
   border-color: #69b;
   color: #000;
}

@media screen and (max-width: 320px), projection and (max-width: 320px), tv and (max-width: 320px) {

  ul li dl {
    display: block;
    margin-bottom : 1em;
  }

  ul li button,
  .manual  button {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .manual dl {
    display: block;
  }

  .manual dl+dl {
    margin-top: 6px;
  }

  .manual dl dd {
    display: block;
  }

  .manual dl:first-child dd:after {
    content: none
  }

  .manual dl dd input {
    width: 100%;
  }

  ul p {
    float: none;
    padding: 4px 0;
    text-align: center;
  }

  div p dl {
    float: none;
    padding: 4px 0;
    text-align: center;
  }

  .connected dd {
    display: block;
    float: none;
  }

}