gsuttie/gist:d9de8b850f3c9370c522

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic' rel='stylesheet' type='text/css'>

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">


    <style>

        body{background: #ffffff;
            font-family: 'Open Sans', sans-serif;
            color: #2D4E6F;
        }
        .well-checklist{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+100 */
            background: #e5e5e5; /* Old browsers */
            background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  #e5e5e5 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
            margin:4em 0 0 0;
            border-radius: 3px;
            border: #e5e5e5 1px solid;
            padding: 2em 3em

        }

        .headline {font-weight:300;
            font-size:58px;
            margin: .4em 0 .2em 0;
            color: #2D4E6F;
        }
        .tagline{
            margin: .6em 0 1.6em 0;
            font-style: italic;
            color: #2D4E6F;
        }
        .btn-default{background-color: #2D4E6F;
            color:#ffffff;
            border:  #1E344B 1px solid ;
            border-radius: 2px !important;
            margin: 0 0 6px 0;
            font-size:16px;
            padding:12px;

            text-transform: uppercase}
        .btn-default:hover{
            background-color: #3C6793;
            color: #ffffff;
        }
        .close-checklist{
            font-size: 30px;
            position: relative;
            margin: -.7em -1.7em 0 0;
            color: #333333;
            float: right;
            cursor: pointer;
        }
        .close-checklist:hover{
            color: #5a5a5a;
        }
        .attention{color:#A60002;
            margin: 0 0 1.2em 0;}

        .panel-group{margin: 1em auto;
            width:90%;}

        .panel-default>.panel-heading{
            background-color: #2D4E6F;
            color:#ffffff;
            border:  #1E344B 1px solid;
            border-radius: 2px !important;
            font-size:16px;
            padding:12px;

            text-transform: uppercase
        }
        li{
            display: block;
            margin: .8em 0;
            text-transform: uppercase;

        }
        li:hover{
            color: #3C6793;
            cursor: pointer;

        }
        i{margin: 0 1em 0 0;}


        #wrapper {
            padding-left: 0;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .mth-nav{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2d4e6f+0,42576b+100 */
            background: #2d4e6f; /* Old browsers */

            -webkit-box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
            -moz-box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
            box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
        }
        .tasty-burger{
            margin: 5px 0 0 -120px;
            font-size: 26px;
        }
        .tasty-burger a, a:link{
            color: #ffffff;

        }
        #wrapper.toggled {
            padding-left: 250px;
        }


        #sidebar-wrapper {
            z-index: 1000;
            position: fixed;
            left: 250px;
            width: 0;
            height: 100%;
            margin-left: -250px;
            overflow-y: auto;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
            background: #ffffff; /* Old browsers */
            background: -moz-linear-gradient(left,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */

            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
            border-right: 1px solid #C7C7C7;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 250px;
        }

        #page-content-wrapper {
            width: 100%;
            position: absolute;
            padding: 15px;
        }

        #wrapper.toggled #page-content-wrapper {
            position: absolute;
            margin-right: -250px;
        }

            /* Sidebar Styles */

        .sidebar-nav {
            position: absolute;
            top: 0;
            width: 250px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .sidebar-nav li {
            text-indent: 20px;
            line-height: 40px;
        }

        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #333333;
        }

        .sidebar-nav li a:hover {
            text-decoration: none;
            color: #fff;
            background: rgba(255,255,255,0.2);
        }

        .sidebar-nav li a:active,
        .sidebar-nav li a:focus {
            text-decoration: none;
        }

        .sidebar-nav > .sidebar-brand {
            height: 65px;
            font-size: 18px;
            line-height: 60px;
            margin: 3em 0 0 0;
            border-bottom: 1px solid #e5e5e5;
        }

        .sidebar-nav > .sidebar-brand a {

        }

        .sidebar-nav > .sidebar-brand a:hover {
            color: #fff;
            background: none;
        }

        @media(min-width:768px) {
            #wrapper {
                padding-left: 250px;
            }

            #wrapper.toggled {
                padding-left: 0;
            }

            #sidebar-wrapper {
                width: 250px;
            }

            #wrapper.toggled #sidebar-wrapper {
                width: 0;
            }

            #page-content-wrapper {
                padding: 20px;
                position: relative;
            }

            #wrapper.toggled #page-content-wrapper {
                position: relative;
                margin-right: 0;
            }
        }
    .main-margin{margin: 4em 0 0 0;}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css"></script>

    <title>MTH - Burger</title>
</head>
<body>

<div id="wrapper">

    <nav class="navbar navbar-inverse navbar-fixed-top mth-nav">
        <div class="container">

            <div class="tasty-burger">
                <a href="#menu-toggle"  id="menu-toggle">

                    <i class="fa fa-bars"></i>
                </a></div>

        </div>
    </nav>


    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">


                <a href="#">
                    Category one
                </a>
            </li>
            <li>
                <a href="#"><i class="fa fa-home"></i> MY HUB</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-unlock"></i> Password resets</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-mobile"></i> Mobile &amp; Multimedia</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-envelope"></i> email &amp; sharepoint</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-envelope"></i> Deskphone</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-rocket"></i> applications</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-desktop"></i> my computer</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-medkit"></i> how to</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row main-margin">
                <div class="col-lg-12">
                    <h1 class="headline">MTH Burger Preview</h1>

                    <p class="tagline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis culpa deserunt
                        dolorem doloremque eligendi error, explicabo ipsam iste labore libero maiores natus
                        necessitatibus nesciunt nihil nulla praesentium quo rerum.</p>


                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>


<!-- Menu Toggle Script -->
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic' rel='stylesheet' type='text/css'>

	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">


	<style>

	body{background: #ffffff;
	font-family: 'Open Sans', sans-serif;
	color: #2D4E6F;
	}
	.well-checklist{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+100 */
	background: #e5e5e5; /* Old browsers */
	background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	margin:4em 0 0 0;
	border-radius: 3px;
	border: #e5e5e5 1px solid;
	padding: 2em 3em

	}

	.headline {font-weight:300;
	font-size:58px;
	margin: .4em 0 .2em 0;
	color: #2D4E6F;
	}
	.tagline{
	margin: .6em 0 1.6em 0;
	font-style: italic;
	color: #2D4E6F;
	}
	.btn-default{background-color: #2D4E6F;
	color:#ffffff;
	border: #1E344B 1px solid ;
	border-radius: 2px !important;
	margin: 0 0 6px 0;
	font-size:16px;
	padding:12px;

	text-transform: uppercase}
	.btn-default:hover{
	background-color: #3C6793;
	color: #ffffff;
	}
	.close-checklist{
	font-size: 30px;
	position: relative;
	margin: -.7em -1.7em 0 0;
	color: #333333;
	float: right;
	cursor: pointer;
	}
	.close-checklist:hover{
	color: #5a5a5a;
	}
	.attention{color:#A60002;
	margin: 0 0 1.2em 0;}

	.panel-group{margin: 1em auto;
	width:90%;}

	.panel-default>.panel-heading{
	background-color: #2D4E6F;
	color:#ffffff;
	border: #1E344B 1px solid;
	border-radius: 2px !important;
	font-size:16px;
	padding:12px;

	text-transform: uppercase
	}
	li{
	display: block;
	margin: .8em 0;
	text-transform: uppercase;

	}
	li:hover{
	color: #3C6793;
	cursor: pointer;

	}
	i{margin: 0 1em 0 0;}


	#wrapper {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}

	.mth-nav{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2d4e6f+0,42576b+100 */
	background: #2d4e6f; /* Old browsers */

	-webkit-box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
	-moz-box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
	box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
	}
	.tasty-burger{
	margin: 5px 0 0 -120px;
	font-size: 26px;
	}
	.tasty-burger a, a:link{
	color: #ffffff;

	}
	#wrapper.toggled {
	padding-left: 250px;
	}


	#sidebar-wrapper {
	z-index: 1000;
	position: fixed;
	left: 250px;
	width: 0;
	height: 100%;
	margin-left: -250px;
	overflow-y: auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(left, #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border-right: 1px solid #C7C7C7;
	}

	#wrapper.toggled #sidebar-wrapper {
	width: 250px;
	}

	#page-content-wrapper {
	width: 100%;
	position: absolute;
	padding: 15px;
	}

	#wrapper.toggled #page-content-wrapper {
	position: absolute;
	margin-right: -250px;
	}

	/* Sidebar Styles */

	.sidebar-nav {
	position: absolute;
	top: 0;
	width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
	}

	.sidebar-nav li {
	text-indent: 20px;
	line-height: 40px;
	}

	.sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #333333;
	}

	.sidebar-nav li a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(255,255,255,0.2);
	}

	.sidebar-nav li a:active,
	.sidebar-nav li a:focus {
	text-decoration: none;
	}

	.sidebar-nav > .sidebar-brand {
	height: 65px;
	font-size: 18px;
	line-height: 60px;
	margin: 3em 0 0 0;
	border-bottom: 1px solid #e5e5e5;
	}

	.sidebar-nav > .sidebar-brand a {

	}

	.sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
	}

	@media(min-width:768px) {
	#wrapper {
	padding-left: 250px;
	}

	#wrapper.toggled {
	padding-left: 0;
	}

	#sidebar-wrapper {
	width: 250px;
	}

	#wrapper.toggled #sidebar-wrapper {
	width: 0;
	}

	#page-content-wrapper {
	padding: 20px;
	position: relative;
	}

	#wrapper.toggled #page-content-wrapper {
	position: relative;
	margin-right: 0;
	}
	}
	.main-margin{margin: 4em 0 0 0;}
	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css"></script>

	<title>MTH - Burger</title>
	</head>
	<body>

	<div id="wrapper">

	<nav class="navbar navbar-inverse navbar-fixed-top mth-nav">
	<div class="container">

	<div class="tasty-burger">
	<a href="#menu-toggle" id="menu-toggle">

	<i class="fa fa-bars"></i>
	</a></div>

	</div>
	</nav>






	<!-- Sidebar -->
	<div id="sidebar-wrapper">
	<ul class="sidebar-nav">
	<li class="sidebar-brand">





	<a href="#">
	Category one
	</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-home"></i> MY HUB</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-unlock"></i> Password resets</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-mobile"></i> Mobile & Multimedia</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-envelope"></i> email & sharepoint</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-envelope"></i> Deskphone</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-rocket"></i> applications</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-desktop"></i> my computer</a>
	</li>
	<li>
	<a href="#"><i class="fa fa-medkit"></i> how to</a>
	</li>
	</ul>
	</div>
	<!-- /#sidebar-wrapper -->

	<!-- Page Content -->
	<div id="page-content-wrapper">
	<div class="container-fluid">
	<div class="row main-margin">
	<div class="col-lg-12">
	<h1 class="headline">MTH Burger Preview</h1>

	<p class="tagline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis culpa deserunt
	dolorem doloremque eligendi error, explicabo ipsam iste labore libero maiores natus
	necessitatibus nesciunt nihil nulla praesentium quo rerum.</p>


	</div>
	</div>
	</div>
	</div>
	<!-- /#page-content-wrapper -->

	</div>
	<!-- /#wrapper -->

	<!-- jQuery -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>


	<!-- Menu Toggle Script -->
	<script>
	$("#menu-toggle").click(function(e) {
	e.preventDefault();
	$("#wrapper").toggleClass("toggled");
	});
	</script>

	</body>
	</html>