tab.css 1.07 KB
.tab {
  margin: 2em 0;
}
.tab:after, .tab>ul:after, .tab>ul>li:after{
  content:"";
  display:block;
  clear:both;
}

.tab > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab > ul > li {
  float:left;
  margin-right:1px;
  color: #fff;
  border-top-left-radius: 0.4em;
  border-top-right-radius: 0.4em;
}

.tab > ul > li > a {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #fff;
}
.tab > ul > li {
  background: #4CB1E5;
}

.tab > ul > li:hover {
  background: #75a44b;
}

.tab > ul > li.active,
.tab > ul > li.active:hover {
  background: #eee;
  color: #000;
  border: 1px solid #4CB1E5;
  border-bottom: 0;
  margin-bottom: -1px;
}

.tab > ul > li.active a,
.tab > ul > li.active:hover a {
  color: #000;
  font-weight: bold;
}
.tab > .content {
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  border-top-right-radius: 0.4em;
  background: #eee;
  border: 1px solid #4CB1E5;
}

.tab > .content > div {
  padding: 2em;
  display: none;
}

.tab > .content > div.selected {
  display: block;
}

img.full {
  width: 100%;
}