Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">

	<body>
		<header><div id="header_text"><h1>Real Path Of Exile Race Ladders</h1></div></header>
		<div class="container span12 center">
			<div class="row">
				<ul class="nav nav-pills navbar-inverse span8 offset2 nav-justified center">  
					<li class="disabled">
						<a href="#">Season:</a>
					</li>
				  	<li class="dropdown seasonsBlock">
				    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">		
				      		<p class="headerText info">Select season</p>
				      		<span class="caret"></span>
				    	</a>
					    <ul class="dropdown-menu">
							<li><a class="S06" href="#">Six</a></li>
							<li><a class="S07" href="#">Seven</a></li>
				    	</ul>
				  	</li>  
				  	<li class="disabled">
						<a href="#">Race type:</a>
					</li>
				  	<li class="dropdown raceBlock">
				    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
				      		<p class="headerText">Select race type</p> <span class="caret"></span>
				    	</a>
					    <ul class="dropdown-menu">						
				    	</ul>
				  	</li>  
				  	<li class="disabled">
						<a href="#">Class:</a>
					</li>
				  	<li class="dropdown classesBlock">
				    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
				      		<p class="headerText">Select character</p> <span class="caret"></span>
				    	</a>
					    <ul class="dropdown-menu">
					    	<li><a href="#" class="Duelist">Duelist</a></li>
							<li><a href="#" class="Marauder">Marauder</a></li>
							<li><a href="#" class="Ranger">Ranger</a></li>
							<li><a href="#" class="Scion">Scion</a></li>
							<li><a href="#" class="Shadow">Shadow</a></li>
							<li><a href="#" class="Templar">Templar</a></li>						
							<li><a href="#" class="Witch">Witch</a></li>
				    	</ul>
				  	</li> ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

header {
	padding: 0;	padding-left: 2.5%; 	padding-right: 2.5%; 	width: 95%; 	background-color: black; margin: 0;
}
div#header_text {
	text-align: center;	font-family: 'Myriad Pro', Helvetica, Arial sans-serif;    font-size: 2em;	width: 100%;	margin: 0;	padding: 0 30 0 0;
}

div#header_text  h1 {
	text-decoration: none;     font-weight: bold;     color: #ffffff;     text-shadow: 0 2px 0 #721e1e, 0px 2px 5px rgba(0,0,0,0.5);
    position: relative;     -webkit-transition: all 0.2s ease-in; 	margin: 0 0 5 0; z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0.11, rgba(0,0,0,0)), color-stop(0.65, rgba(225,225,225,1))
    );
}

.center { text-align: center;	   float: none;     margin-left: auto;     margin-right: auto;	}

.headerText {display: inline-block;}

.selected {	background:red;}

.sidebar {	background: gray; }

.sidebar ul {	float:left; list-style: none;	}

.sidebar ul li {	display: none;	}

.sidebar ul li : hover {
	float:left; display: inline-block;
}

.sidebar p {
	float:left; display: inline-block;
}
p.lol {float:left; display: inline-block;}
div#header_text h1:hover {
    text-shadow: 0 2px 0 #d84f4f, 0 4px 0 #d54646, 0 6px 0 #ce3333, 0 8px 0 #b92e2e, 0 10px 0 #912525, 0 12px 0 #721e1e, 0px 12px 10px rgba(0,0,0,0.5);
    top: -12px;
}

div#header_text h1:active {
    text-shadow: none;     bottom: 555;     text-shadow: 0px 0px 7px rgba(0,0,0,0.5);
}

div#header_text h1:before {
    position: absolute;     top: 4px;     color: #aaa;     text-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
 
div#header_text h1:after {
    color: #e0e0e0;     position: absolute; 
}

div#login {
	text-align: center;
}

#login p {
	z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0.11, rgba(0,0,0,0)), color-stop(0.65, rgba(225,225,225,1))
    );
	margin: 0; 	padding: 0;
}

#login p:hover {
	z-index:...