body {
    margin-top: 50px;
}

footer {
    text-align: right;
    padding-right: 10px;
    padding-top: 2px; }
    footer a {
        text-decoration: none;
        color: black;
        font-weight: bold;
    }

/* smart phones */
@media screen and (max-device-width: 480px) {
}

.topbar-inner,.topbar .fill{
    background-color:<% $color1 %>;
    background-repeat:repeat-x;
    background-image:-khtml-gradient(linear, left top, left bottom, from(<% $color2 %>), to(<% $color1 %>));
    background-image:-moz-linear-gradient(top, <% $color2 %>, <% $color1 %>);
    background-image:-ms-linear-gradient(top, <% $color2 %>, <% $color1 %>);
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, <% $color2 %>), color-stop(100%, <% $color1 %>));
    background-image:-webkit-linear-gradient(top, <% $color2 %>, <% $color1 %>);
    background-image:-o-linear-gradient(top, <% $color2 %>, <% $color1 %>);
    background-image:linear-gradient(top, <% $color2 %>, <% $color1 %>);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='<% $color2 %>', endColorstr='<% $color1 %>', GradientType=0);
    -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}