Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        <link href='http://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
        <link href="~/Content/css/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="~/Content/css/Layout.css" rel="stylesheet" />
        @RenderSection("Styles", false)
    </head>
    <body>

        <div class="wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container">
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <a class="brand" href="/Home">Mercator Brassband</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav">
                                <li>@Html.ActionLink("Dirigent","Index", "Musician")</li>
                                <li>@Html.ActionLink("Muzikanten","Index", "Musician")</li>
                                <li>@Html.ActionLink("Historiek","Index", "Musician")</li>
                                <li>@Html.ActionLink("Evenementen","Index", "Musician")</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


            <div id="header">
                <div class="container">
                    <div class="row">

                        <div class="span9">
                            <div id="headertitle">
                                @RenderSection("PageTitle", true)
                            </div>
                        </div>
                        <div class="span3">

                        </div>
                    </div>
                </div>
            </div>

            <div id="content">
                <div class="container">
                    <h2>A CSS Sticky Footer that just works</h2>
                    <p>We've all tried to use a <strong>CSS Sticky Footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand <strong>CSS Sticky Footer</strong> are thankfully over. With just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>CSS Sticky Footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
                    <h2>Usage of the CSS Sticky Footer</h2>
                    <p><q>Great! This is exactly what I'm looking for! Can I use it?</q></p>
                    <p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>
                    <p class="download"><a href="layout.css" title="Download the stylesheet">View the CSS</a> or <a href="/resources/footer-stick-to-bottom-of-page/" title="Make a footer stick to the bottom of a page">learn about using it</a></p>
                    @RenderBody()

                </div>

            </div>


            <div class="push"></div>
        </div>
        <div class="footer visible-desktop">
            Copydinges
        </div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="~/Scripts/twitterbootstrap/bootstrap.min.js"></script>
        @RenderSection("Scripts", false)

    </body>
</html>


CSS----------------------------------------

html,body {
    height: 100%;
    background-color: #3F3F3F;
    min-width: 320px;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -40px;
}


/* HEADER */

.navbar {
    margin-bottom: 0px;
}

.navbar-inner {
    border-bottom: 1px solid white;
    border-color: white !important;
}

#header {

    background: url(../img/header-bg.png) bottom center repeat-x #1489C7;
    background-position-x: 50%;
    background-position-y: 100%;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #1489C7;
}

#headertitle {
    font-family: 'Quicksand', sans-serif;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 38px;
    margin-top: 60px;
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    #headertitle {
        font-size: 20px;
        margin-top: 5px;
        margin-bottom: 25px;
    }

    #header {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width:979px) and (min-width:768px) {

    #headertitle {
        font-size: 26px;
        margin-top: 10px;
        margin-bottom: 35px;
    }
}

@media (min-width:980px) {
    #headertitle {
        font-size: 38px;
        margin-top: 60px;
        margin-bottom: 50px;
    }
}

/* CONTENT */

#content .container {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

/* FOOTER */
.footer {
    background:black;
    border-top: 1px solid white;
    color: white;
    text-align: center;
}

.footer, .push {
    height: 40px;
}