tabby/example/static/style.css

create tabbed web apps with progressive enhancement

#header {
  background-color: rgb(63,63,191);
}

#section {
  min-width: 140px;
  text-align: center;
  display: inline-block;
  font-size: 2em;
  margin-left: 10px;
  color: rgb(191,191,223);
}

#tabs {
  display: inline-block;
  padding: 0px;
  margin-left: 15px;
}

#tabs li {
  cursor: pointer;
  display: inline-block;
  width: 100px;
  background-color: rgb(95,95,223);
  padding: 10px;
  text-align: center;
  font-size: 1.5em;
  margin-right: 5px;
}

#tabs a:link, #tabs a:visited {
  color: rgb(223,233,255);
  text-decoration: none;
}

#tabs a:hover {
  color: rgb(255,255,127);
}

#tabs li:hover {
  color: rgb(127,127,255);
}

#content {
  padding: 20px;
  border: 4px solid rgb(191,191,223);
  border-top-width: 0px;
}

.summary h2, .full h1 {
  padding: 5px;
  padding-left: 10px;
}

.full h1 {
  color: white;
}

.summary h2 a:link, .summary h2 a:visited {
  color: white;
  text-decoration: none;
}

.summary h2 a:hover {
  color: rgb(255,255,127);
}

.cat.summary h2 {
  background-color: rgb(191,63,223);
}

.cat.full h1 {
  background-color: rgb(191,63,223);
}

.owner.summary h2 {
  background-color: rgb(223,127,63);
}

.owner.full h1 {
  background-color: rgb(223,127,63);
}

.label {
  font-size: 2em;
  color: white;
  padding: 5px;
  padding-left: 10px;
}

.owner .label {
  background-color: rgb(223,127,63);
}