documon/template/assets/css/tabs/tabs.css

A documentation system for mortals. Use with any language.

/*
Part of Documon.
Copyright (c) Michael Gieson.
www.documon.net
 */

.tabrow {
    text-align: left;
    list-style: none;
    margin: 0 0 0 1em;
    padding: 0;
    line-height: 36px;
    height: 35px;
    font-size: 11.5px;
    font-family: verdana;
    position: relative;
    color: #272727;
    text-shadow: 0 1px #D0D0D0;
	cursor : default;
}

/* don't do a border, since it will block "dead" tabs */
.tabline {
	margin: 0 0 0 -1em; /* opposite tabrow */
	position : absolute;
	height : 2px;
	background-color : #000000;
	left : 0;
	bottom : 0;
	right : 0;
}

.tab-close {
	display : inline-block;
	color : #646464;
	width : 1.5em;
	height : 1.5em;
	text-align : center;
	margin-left : 1em;
}

.tab-close:hover {
	color : #000000;
}

.tab-label {
    white-space: nowrap;
    pointer-events : none;
}


.tabrow li {
    display: inline-block;
    position: relative;
    margin: 0 -1.1em;
    padding: 0 2.5em;
    height: 34px;
    white-space: nowrap;
    overflow: hidden;
    transition : "left 100ms ease-out";
}

.tabrow a {
    color: #272727;
    text-decoration: none;
}

.tabrow li.selected {
    color: #000000;
    text-shadow: none;
}

.tabrow li:before,
.tabrow li:after {
    position: absolute;
    bottom: 0;
    height: 34px;
    content: " ";
    z-index: -1;
    overflow: hidden;
    pointer-events : none;
}



.tabrow li:before {
    left: 0;
    right: 50%;
    background-image: url(tab-off.png);
}

.tabrow li:after {
    right: 0;
    left: 50%;
    background-image: url(tab-off.png);
    background-position: right;
}

.tabrow li.selected:before {
    left: 0;
    right: 50%;
    background-image: url(tab-on.png);
}

.tabrow li.selected:after {
    right: 0;
    left: 50%;
    background-image: url(tab-on.png);
    background-position: right;
}