FTU Template #1

[styleclass=nav][
][accordion][
][a-section="Title 1"]Text 1[/a-section][
][a-section="Title 2"]Text 2[/a-section][
][a-section="Title 3"]Text 3[/a-section][
][a-section="Title 4"]Text 4[/a-section][
][a-section="Title 5"]Text 5[/a-section][
][a-section="Title 6"]Text 5[/a-section][
][/accordion][
][/styleclass][
][styleclass=mainpage]Main page
[styleclass=credit][
]free-to-use template by [url=/user/Eltafez]Eltafez[/url][
][/styleclass][/styleclass][
][


][style]
// --- Customizable. Please make sure the option ends with a semi-colon --> ;

@fullHeight: 400px;
@textFont: inherit;
@creditColorBg: black;
@creditColorFg: white;

@pageTextAlign: center;
@pagePadding: 2%;
@pageColorFg: white;
@pageColorBg: black;

@linkColorFg: silver;
@linkColorHover: orange;

@tabAmount: 6;
@tabTextAlign: center;
@tabPadding: 1%;
@tabHeight: 6%;
@tabColorFg: black;
@tabColorBg: white;
@tabBorderWidth: 1px;
@tabBorderStyle: solid;
@tabBorderColor: black;
@tabBorderRadius: 5px 5px 0 0;

@tableColorBg: black;
@tableColorFg: white;
@tableBorderColor: white;

// --- Please do not touch.
@tabWidth: (@fullWidth/@tabAmount) - (@tabPadding*2) - (@tabBorderWidth*2);
@fullWidth: 100%;
@textSize: auto;

// --- Actual code, change with caution.
.nav>.panel {
    width: @fullWidth;
    border: 0;
    min-width: @tabHeight;
    background: transparent;
    height: @fullHeight;
    border: 0;
    font-family: @textFont;
    font-size: @textSize;

    &>h3 {
        >a { color: @tabColorFg; }
        background-color: @tabColorBg;
        width: @tabWidth;
        height: @tabHeight;
        display: inline-block;
        border-radius: @tabBorderRadius;
        padding: @tabPadding;
        float: left;
        text-align: @tabTextAlign;
        border: @tabBorderWidth @tabBorderStyle @tabBorderColor;
    }
    &>div {
        .page;
        z-index: 2;
    }

    &>h3:hover {
        &>a { color: @linkColorHover; }
        background: @tabColorFg;
    }
}

.mainpage {
    .page;
    z-index: 1;
}

.panel {
    border: 1px solid @tabColorBg;
    &>h3 {
        &>a { color: @tabColorFg; }
		color: @tabColorFg;
        background: @tabColorBg;
        text-align: @tabTextAlign;
    }
    &>div {
        color: @pageColorFg;
        background: @pageColorBg;
        text-align: @pageTextAlign;
    }
}

.page {
    display: inline-block;
    width: (@fullWidth - (@pagePadding*2));
    color: @pageColorFg;
    background-color: @pageColorBg;
    padding: @pagePadding;
    clear: both;
    position: absolute;
    top: (@tabHeight + (@tabPadding*2) + (@tabBorderWidth*2));
    bottom: @pagePadding;
    text-align: @pageTextAlign;
}

a { color: @linkColorFg;}
a:hover { color: @linkColorHover; }

.bbcode_table {
    margin: 0 auto;
    border: 0;
    tr {
        th, td {
            padding: 3px;
            border: 1px solid @tableColorFg;
        }

        th {
            color: @tableColorBg;
            background: @tableColorFg;
        }

        td {
            color: @tableColorFg;
            background: @tableColorBg;
        }
    }
}

span.bbcode_tooltip {
    border-bottom: 1px dashed @pageColorFg;
}

.credit {
    color: @creditColorFg;
    background-color: @creditColorBg;
    z-index: 5;
    position: absolute;
    bottom: @pagePadding;
    right: @pagePadding;
    font-size: 9px;
    padding: 2px;
}
[/style]