html.colorful & {
    body {
        .font();
    }

    .outer-wrap-header,
    .outer-wrap-footer {
        background-color: #42755A;
    }

    .site-header {
            color: #CC9933;
    }

    .site-logo-text a {
        text-decoration: none;
        color: #CC9933;
    }

    .breadcrumb-wrap {
        a {
            color: #000;
        }

        a:hover {
            color: #8D1DC2;
        }

        a:active {
            color: #591D75;
        }
    }

    .main {
        a {
            color: #CC9933;
            background-color: #8D1DC2;
            border-radius: 2px;
            padding: 3px;
            margin: 3px;
        }

        a:hover {
            color: #CC9933;
            background-color: #591D75;
        }

        a:active {
            color: #CC9933;
            background-color: #591D75;
        }
    }

    .toc {
        a {
            color: #000;
        }

        a:hover {
            color: #8D1DC2;
        }

        a:active {
            color: #591D75;
        }

        li.selected a {
            background-color: #CC9933;
            border-radius: 2px;
        }
    }

    .footer {
        color:  #CC9933;

        a {
            color: #000;
        }

        a:hover {
            color: #8D1DC2;
        }

        a:active {
            color: #591D75;
        }

        a:visited {
            color: #fff;
        }
    }
}