body {
  width: 1024px;
  margin: 0 auto;
  font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
}

h1, h2, h3 {
  color: darkred;
  float: left;
  width: 100%;
}

h1 {
  margin-top: 0;
  color: #000;
  border-bottom: 1px solid #000;
}

a {
  color: #000;
}

p {
  float: left;
  margin-top: 0;

}

.back {
  float: left;
  width: 100%;
  margin-top: -20px;
}

.code,
.preview {
  float: left;
  width: 100%;
}

.preview {
  height: 300px;
  border: 1px solid #000;
}

.table {
  width: 100%;
  float: left;
}

.t-80 {
  width: 78%;
  padding: 0 1% 1% 1%;
}

.t-75 {
  width: 73%;
  padding: 1% 1% 1% 1%;
}

.t-60 {
  width: 58%;
  padding: 0 1% 1% 1%;
}

.t-25 {
  width: 23%;
  padding: 1% 1% 1% 1%;
}

.t-10 {
  width: 8%;
  padding: 2% 1% 1% 1%;
}

.two-rows {
  padding: 1%;
}

.w-100 {
  width: 100%;
}

.row {
  background-color: #F9F9F9;
  border: 1px solid #000;
  width: 100%;
  float: none;
  display: inline-block;
}

.row.header {
  background-color: #EBE9E9;
  border: 1px solid #000 !important;
}

.row.header div {
  font-weight: bold;
  margin: 0;
  padding: 1%;
}

.row.double {
  min-height: 60px;
}

.row div {
  float: left;
  word-wrap: break-word;
}

.row span {
  padding-right: 10px;
}

.componentRow:hover {
  background-color: #EBE9E9;
}

.componentRow .title .name {
  padding: 6px 0 0 0;
  font-weight: bold;
  font-size: 18px;
  margin: 0;
  width: 100%;
}

.componentRow .title .description {
  padding: 0;
  font-size: 14px;
}

.social {
  float: left;
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.field {
  width: 100%;
  float: left;
}

.field p,
.field span,
.field a {
  float: left;
  margin: 0;
}

.field p {
  color: #8B0000;
  font-weight: bold;
  margin-right: 10px;
}

.search {
  width: 98%;
  font-family: Arial;
  border: 1px solid #8B0000;
  margin-bottom: 10px;
  font-size: 20px;
  padding: 10px;
}

#href {
  height: 30px;
}

.states {
  width: 100%;
  margin-bottom: 30px;
}

.states span,
.states .state {
  float: left;
  margin-right: 20px;
}

.states input {
  float: left;
}

.details-state span {
  padding: 3px;
  margin-left: 10px;
  font-size: 75%;
  font-weight: bold;
  color: #FFF;
  background-color: #1E42B9;
  white-space: nowrap;
}

.state span {
  padding: 3% 8% 3% 8%;
  font-size: 75%;
  font-weight: bold;
  color: #FFF;
  background-color: #1E42B9;
  white-space: nowrap;
}

span.component-state-experimental {
  background-color: #B9961E;
}

span.component-state-deprecated {
  background-color: #B9381E;
}

.bold {
  font-weight: bold;
}

.hide {
  display: none !important;
}