﻿/* http://patorjk.com/software/taag/#p=display&h=1&f=Big&t=Table%20%20%20of%20%20%20Contents

  _______      _      _                   __      _____               _                _        
 |__   __|    | |    | |                 / _|    / ____|             | |              | |       
	| |  __ _ | |__  | |  ___      ___  | |_    | |      ___   _ __  | |_  ___  _ __  | |_  ___ 
	| | / _` || '_ \ | | / _ \    / _ \ |  _|   | |     / _ \ | '_ \ | __|/ _ \| '_ \ | __|/ __|
	| || (_| || |_) || ||  __/   | (_) || |     | |____| (_) || | | || |_|  __/| | | || |_ \__ \
	|_| \__,_||_.__/ |_| \___|    \___/ |_|      \_____|\___/ |_| |_| \__|\___||_| |_| \__||___/
																								
																								
Variables
Brand Colours
Login Page Layout
Header & Logo
Navbar
Orange Header & Background
Footer
Forms
Panels
Buttons
Pills
Tabs
Mobile Footer
Sticky Footer
Afterword

*/
/*

 __      __           _         _      _            
 \ \    / /          (_)       | |    | |           
  \ \  / /__ _  _ __  _   __ _ | |__  | |  ___  ___ 
   \ \/ // _` || '__|| | / _` || '_ \ | | / _ \/ __|
	\  /| (_| || |   | || (_| || |_) || ||  __/\__ \
	 \/  \__,_||_|   |_| \__,_||_.__/ |_| \___||___/
													
													
Am I not dressed formally enough? Should I zip the hoodie before the meeting?
*/
/* http://lesscss.org/features/#variables-feature-urls */
/*

  ____                          _      _____        _                          
 |  _ \                        | |    / ____|      | |                         
 | |_) | _ __  __ _  _ __    __| |   | |      ___  | |  ___   _   _  _ __  ___ 
 |  _ < | '__|/ _` || '_ \  / _` |   | |     / _ \ | | / _ \ | | | || '__|/ __|
 | |_) || |  | (_| || | | || (_| |   | |____| (_) || || (_) || |_| || |   \__ \
 |____/ |_|   \__,_||_| |_| \__,_|    \_____|\___/ |_| \___/  \__,_||_|   |___/
																			   
																			   
If you keep screaming your name, it forces the assailant to acknowlege you as a human.
*/
/*

  _                    _            _____                        _                                  _   
 | |                  (_)          |  __ \                      | |                                | |  
 | |      ___    __ _  _  _ __     | |__) |__ _   __ _   ___    | |      __ _  _   _   ___   _   _ | |_ 
 | |     / _ \  / _` || || '_ \    |  ___// _` | / _` | / _ \   | |     / _` || | | | / _ \ | | | || __|
 | |____| (_) || (_| || || | | |   | |   | (_| || (_| ||  __/   | |____| (_| || |_| || (_) || |_| || |_ 
 |______|\___/  \__, ||_||_| |_|   |_|    \__,_| \__, | \___|   |______|\__,_| \__, | \___/  \__,_| \__|
				 __/ |                            __/ |                         __/ |                   
				|___/                            |___/                         |___/                    

I'm not one to gush, but the possibilities of your consequence-free reality are darkly promising.
*/
body#login h2 {
  color: #5f5e64;
  font-size: 12px;
  padding: 40px;
  text-align: center;
}
body#login h1 {
  color: #0b79bf;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
}
body#login .login-message {
  margin-bottom: 60px;
}
/*

  _    _                   _                            _                          
 | |  | |                 | |                 ___      | |                         
 | |__| |  ___   __ _   __| |  ___  _ __     ( _ )     | |      ___    __ _   ___  
 |  __  | / _ \ / _` | / _` | / _ \| '__|    / _ \/\   | |     / _ \  / _` | / _ \ 
 | |  | ||  __/| (_| || (_| ||  __/| |      | (_>  <   | |____| (_) || (_| || (_) |
 |_|  |_| \___| \__,_| \__,_| \___||_|       \___/\/   |______|\___/  \__, | \___/ 
																	   __/ |       
																	  |___/ 
					
Keenan: You want a beer? I just put in a fresh keg.
Gilfoyle: He put in a fresh keg.                                                                      
*/
header {
  display: none;
}
#logo-white {
  display: block;
  margin-top: 10px;
  margin-bottom: -10px;
  margin-left: 15px;
}
#logo-white a img {
  margin-top: 10px;
  /*width: 122px;*/
}
.secondaryglobalnav {
  margin-top: 16px;
  text-align: right;
}
.secondaryglobalnav a {
  color: #5f5e64;
  padding: 0 5px;
}
@media (min-width: 768px) {
  header {
    padding: 10px 0 20px;
    display: block;
  }
  #logo-white {
    display: none;
  }
  #logo a img {
    margin-top: 20px;
    /*width: 172px;*/
  }
}
/*

  _   _                _                  
 | \ | |              | |                 
 |  \| |  __ _ __   __| |__    __ _  _ __ 
 | . ` | / _` |\ \ / /| '_ \  / _` || '__|
 | |\  || (_| | \ V / | |_) || (_| || |   
 |_| \_| \__,_|  \_/  |_.__/  \__,_||_|   
										  
										  
Erlich: May I borrow this hammer to pound in these flamboyant little nails?
Gilfoyle: Those are screws.
*/
.navbar {
  margin-bottom: 0;
  min-height: 50px;
}
.navbar-inverse {
  border-radius: 0;
  background: #232528;
  background: linear-gradient(to bottom, #232528 0%, #3a3d42 1%, #3a3d42 99%, #2a2c30 100%);
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #5f5e64;
  background-image: none;
}
.navbar-inverse .navbar-nav form li > a {
  color: #9d9d9d;
}
.navbar-nav form li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.nav form li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
@media (min-width: 768px) {
  .navbar {
    min-height: 32px;
  }
  .navbar-nav {
    margin: 0 0 0 -15px;
  }
  .navbar-nav > li > a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .secondaryglobalnav {
    margin-top: 46px;
    text-align: right;
  }
  .navbar-inverse .navbar-nav > li.loggedout,
  .nav form {
    display: none;
  }
}
.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 12px 10px;
  margin-top: -19px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
/*

   ____                                      _    _                   _                            ____                _                                         _ 
  / __ \                                    | |  | |                 | |                 ___      |  _ \              | |                                       | |
 | |  | | _ __  __ _  _ __    __ _   ___    | |__| |  ___   __ _   __| |  ___  _ __     ( _ )     | |_) |  __ _   ___ | | __ __ _  _ __  ___   _   _  _ __    __| |
 | |  | || '__|/ _` || '_ \  / _` | / _ \   |  __  | / _ \ / _` | / _` | / _ \| '__|    / _ \/\   |  _ <  / _` | / __|| |/ // _` || '__|/ _ \ | | | || '_ \  / _` |
 | |__| || |  | (_| || | | || (_| ||  __/   | |  | ||  __/| (_| || (_| ||  __/| |      | (_>  <   | |_) || (_| || (__ |   <| (_| || |  | (_) || |_| || | | || (_| |
  \____/ |_|   \__,_||_| |_| \__, | \___|   |_|  |_| \___| \__,_| \__,_| \___||_|       \___/\/   |____/  \__,_| \___||_|\_\\__, ||_|   \___/  \__,_||_| |_| \__,_|
							  __/ |                                                                                          __/ |                                 
							 |___/                                                                                          |___/                                  


Go for Chambers.
*/
/*
Orange heading bar & main content background
----------------------------------------------------------*/
.page-header-primary {
  border-top: 1px solid #1C9ADD;
  border-bottom: 1px solid #07537F;
  margin-top: 0;
  margin-bottom: 0;
  background: #0b79bf;
  background: linear-gradient(to bottom, #0b79bf 0%, #0968A3 100%);
}
.page-header-primary h1 {
  font-size: 18px;
  color: white;
  line-height: 1.2em;
  text-shadow: -1px -1px 2px #9e5200;
  margin: 15px 0;
}
.page-header.first {
  margin-top: 0;
}
body {
  background-image: url("/images/bg_doc.jpg");
  background-repeat: repeat-x;
  background-position: 0 189px;
}
body#login {
  background-image: none;
}
.page-background {
  background-color: #fdfdfd;
  margin-top: 0;
  padding-top: 15px;
}
.grey-background {
  background-image: none;
  background-color: #efefef;
  outline: 1px solid #efefef;
}
.white-background {
  background-image: none;
  background-color: white;
  padding-bottom: 20px;
  outline: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .page-header-primary h1 {
    font-size: 30px;
    line-height: 1em;
  }
  .page-background {
    margin-top: 20px;
  }
  .white-background {
    outline: 1px solid #efefef;
    box-shadow: 0 0 10px 0 rgba(95, 94, 100, 0.2);
  }
}
/*

  ______             _              
 |  ____|           | |             
 | |__  ___    ___  | |_  ___  _ __ 
 |  __|/ _ \  / _ \ | __|/ _ \| '__|
 | |  | (_) || (_) || |_|  __/| |   
 |_|   \___/  \___/  \__|\___||_|   
									
									
It says here on your resume that from 2010 to 2011 you "crushed it"?
*/
footer {
    color: #c5c5c5;
    padding: 25px 0;
    background: #232528;
    background-image: url("/images/bg_footer_noise.png");
    background-repeat: repeat;
    box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, 0.3);
    height: 90px;
}
.environment-name {
  color: #0b79bf;
  font-weight: 600;
}
/*

  ______                           
 |  ____|                          
 | |__  ___   _ __  _ __ ___   ___ 
 |  __|/ _ \ | '__|| '_ ` _ \ / __|
 | |  | (_) || |   | | | | | |\__ \
 |_|   \___/ |_|   |_| |_| |_||___/
								   
								   
Ah. You've got a garage inside your garage.
*/
/* calendar */
.k-calendar th {
  background-color: #5f5e64 !important;
}
/* nested fieldsets */
.form-group .form-group {
  margin-left: 0;
  margin-right: 0;
}
/* Errors  */
.field-validation-valid {
  display: none;
}
.has-error .form-control,
.input-validation-error {
  border: 1px solid #a94442;
  background-color: #fee;
}
.input-validation-error .k-dropdown-wrap .k-input input.input-validation-error,
input.k-textbox.input-validation-error,
input.k-textbox.input-validation-error:hover,
textarea.input-validation-error,
textarea.k-textbox.input-validation-error,
textarea.k-textbox.input-validation-error:hover,
.k-dropdown.input-validation-error .k-dropdown-wrap,
.k-multiselect.input-validation-error .k-multiselect-wrap {
  background-color: #fee !important;
}
.input-validation-error .k-picker-wrap.k-state-default,
.input-validation-error .k-dropdown-wrap.k-state-default {
  border: transparent!important;
}
.input-validation-error .k-picker-wrap.k-state-default .input-validation-error {
  border: transparent!important;
}
input[type="checkbox"].input-validation-error {
  border: 0 none;
}
.validation-summary-valid {
  display: none;
}
/* success */
.has-success label {
  color: #3c763d;
}
.has-success .form-control {
  border-color: #3c763d;
  background-color: #dff0d8;
}
/* warning */
.has-warning label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
  background-color: #fcf8e3;
}
/* :focus */
.k-state-focused {
  border-color: #0b79bf !important;
  outline: 0!important;
  box-shadow: 0px 0px 5px 2px rgba(227, 119, 34, 0.08) !important;
}
.form-control:focus {
  border-color: #0b79bf !important;
  outline: 0!important;
  box-shadow: 0px 0px 4px 2px rgba(8, 91, 140, 0.65) !important;
}
.form-control.k-dropdown-readonly {
  border-color: none!important;
  outline: 0!important;
  box-shadow: none!important;
}
/* state selected & hover - changed in newer versions of Kendo */
.k-state-selected {
  color: #ffffff !important;
  background-color: #5f5e64 !important;
  border-color: #5f5e64 !important;
}
.k-state-hover {
  background-color: #ebebeb !important;
}
.k-state-selected.k-state-hover {
  color: #1f2c33 !important;
}
.k-multiselect-wrap.k-state-hover,
.k-state-hover > .k-multiselect-wrap {
  color: #1f2c33 !important;
}
/*

  _____                     _      
 |  __ \                   | |     
 | |__) |__ _  _ __    ___ | | ___ 
 |  ___// _` || '_ \  / _ \| |/ __|
 | |   | (_| || | | ||  __/| |\__ \
 |_|    \__,_||_| |_| \___||_||___/
								   
								   
Your hacker girlfriend wouldn't happen to know the model of our router, would she?
*/
.panel {
  margin-left: -15px;
  margin-right: -15px;
  border-radius: 0;
  border: none;
}
.panel + .panel {
  margin-top: -20px;
}
.panel-default > .panel-heading,
.panel-title,
.panel-heading {
  border-radius: 0;
  border: none;
  font-size: 16px;
  padding: 5px 15px;
  background-color: #5f5e64;
  color: white;
}
.panel-default > .panel-heading a,
.panel-title a,
.panel-heading a {
  display: block;
  margin: -10px -30px;
  padding: 11px 15px;
  background-color: #e2e2e2;
  text-decoration: none!important;
  border: 1px solid #ccc;
  color: #1f2c33;
}
.panel-default > .panel-heading a:hover,
.panel-title a:hover,
.panel-heading a:hover {
  background-color: #d6d6d6;
}
h4.panel-title a {
  padding-top: 14px!important;
  padding-bottom: 13px!important;
}
.panel-body {
  border: none;
  background-color: #f6f6f6;
  padding-left: 15px;
  padding-right: 15px;
}
.panel-toggle .panel,
.panel-toggle.form-group {
  margin-bottom: -1px;
}
@media (min-width: 768px) {
  .panel {
    margin-left: 0;
    margin-right: 0;
  }
  .panel + .panel {
    margin-top: 20px;
  }
  .panel-default > .panel-heading,
  .panel-title,
  .panel-heading {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .panel-body {
    border: 1px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #f3f3f3;
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  .panel-toggle .panel .panel-body,
  .panel-toggle.form-group .panel-body {
    border-bottom: none;
    margin-bottom: -2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
#InternalCommentsPanel a span.small,
h4.panel-title a span.small {
  color: #1f2c33;
}
.panel-heading a:after {
  /* fa-chevron-down http://astronautweb.co/snippet/font-awesome/ */
  font-family: FontAwesome;
  content: "\f078";
  float: right;
  color: #1f2c33;
  transform: rotateX(180deg);
  transition: 0.4s;
}
.panel-heading a.collapsed:after {
  /*content: "\f054";*/
  transform: rotateX(0deg);
}
#InternalCommentsPanel .panel-heading a:after,
#InternalCommentsPanel .panel-heading a.collapsed:after,
.panel-heading h4.panel-title a:after,
.panel-heading h4.panel-title a.collapsed:after {
  margin-top: -9px;
}
/* eg: bottom of home owner permit. similar code, but need to raise icon (code above), then reset (below)*/
.panel-heading h4.panel-title.panel-title-custom a:after,
.panel-heading h4.panel-title.panel-title-custom a.collapsed:after {
  margin-top: 0;
}
/*

  ____          _    _                     
 |  _ \        | |  | |                    
 | |_) | _   _ | |_ | |_  ___   _ __   ___ 
 |  _ < | | | || __|| __|/ _ \ | '_ \ / __|
 | |_) || |_| || |_ | |_| (_) || | | |\__ \
 |____/  \__,_| \__| \__|\___/ |_| |_||___/
										   
										   
I'm not hiring him. He uses spaces not tabs.
*/
/* remove borders */
.btn {
  border: none;
}
/*change primary button to orange */
.btn-primary {
  background-color: #0c88d7 !important;
}
.btn-primary:disabled,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #0c88d7 !important;
  box-shadow: none!important;
}
.btn-primary:hover {
  background-color: #0b79bf;
}
.btn-primary:active {
  background-color: #0a6aa7 !important;
}
.btn-primary:focus {
  background-color: #0a6aa7;
}
/*change default button to reeeeeally light gray */
.btn-default {
  background-color: #efefef;
}
/* material design-esque animation */
.btn {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  /* border: none!important; */
  position: relative;
  overflow: hidden;
}
.btn:after {
  content: '';
  position: absolute;
  top: 41%;
  left: 46%;
  width: 0.4em;
  height: 0.4em;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}
.btn-default:after {
  background: rgba(100, 100, 100, 0.1);
}
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}
@keyframes ripple-focus {
  0% {
    transform: scale(8, 8);
    opacity: 1;
  }
  50% {
    transform: scale(12, 9);
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(8, 8);
  }
}
.btn:focus:not(:active)::after {
  animation: ripple 2s ease-out;
}
.btn:hover {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
.btn:active {
  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.8) !important;
  outline: none!important;
}
.btn:focus {
  box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.3);
  outline: none!important;
}
/*plain link buttons */
.btn-link,
.btn-link:hover,
.btn-link:active,
.btn-link:focus {
  box-shadow: none !important;
}
.btn-float {
  position: fixed!important;
  width: 50px!important;
  height: 50px!important;
  bottom: 40px;
  right: 40px;
  border-radius: 40px;
  transition: transform 0.2s ease-out;
  -webkit-transition: transform 0.2s ease-out;
  -moz-transition: transform 0.2s ease-out;
  z-index: 50000;
  opacity: 0.8;
}
.btn-float:hover {
  transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  transition: transform 0.2s ease;
  -webkit-transition: transform 0.2s ease;
  -moz-transition: transform 0.2s ease;
  opacity: 1;
}
/*

  _____  _  _  _      
 |  __ \(_)| || |     
 | |__) |_ | || | ___ 
 |  ___/| || || |/ __|
 | |    | || || |\__ \
 |_|    |_||_||_||___/
					  
					  
Dinesh: Jared, have you been crying? 
Jared: Yes, but for ordinary reasons.
*/
.nav-pills > li > a {
  color: #1f2c33;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #5f5e64;
}
/*

  _______      _          
 |__   __|    | |         
	| |  __ _ | |__   ___ 
	| | / _` || '_ \ / __|
	| || (_| || |_) |\__ \
	|_| \__,_||_.__/ |___/
						  
						  
Jian-Yang: (phone message) Eric Bachman, is your refrigerator running? This is Mike Hunt.
*/
.nav-tabs > li > a {
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f5f5+1,f5f5f5+70,e5e5e5+100 */
  background: #f5f5f5;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f5f5f5 1%, #f5f5f5 70%, #e5e5e5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f5f5f5 1%, #f5f5f5 70%, #e5e5e5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f5f5f5 1%, #f5f5f5 70%, #e5e5e5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5', GradientType=0);
  /* IE6-9 */
}
.nav-tabs > li > a:hover {
  border: 1px solid #ddd;
  box-shadow: 0 -1px 2px 0 #e5e5e5;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  background: white;
  box-shadow: none;
}
/* Mobile footer
----------------------------------------------------------*/
table {
  border: 1px solid #ddd;
}
thead,
tfoot {
  background-color: #5f5e64;
  color: #fff;
}
/*

  __  __         _      _  _           ______             _              
 |  \/  |       | |    (_)| |         |  ____|           | |             
 | \  / |  ___  | |__   _ | |  ___    | |__  ___    ___  | |_  ___  _ __ 
 | |\/| | / _ \ | '_ \ | || | / _ \   |  __|/ _ \  / _ \ | __|/ _ \| '__|
 | |  | || (_) || |_) || || ||  __/   | |  | (_) || (_) || |_|  __/| |   
 |_|  |_| \___/ |_.__/ |_||_| \___|   |_|   \___/  \___/  \__|\___||_|   
																		 
																		 
Let me put this in terms you'll understand. I'm like a suicide bomber of humiliation.
I'm happy to go out as long as I take you with me. Your shame is my paradise.
*/
/* https://www.bootply.com/106743 */
/* https://www.w3schools.com/bootstrap/bootstrap_navbar.asp */
body#has-mobile-footer #footer {
  margin-bottom: 60px;
}
@media (min-width: 768px) {
  #mobile-footer {
    display: none;
  }
  body#has-mobile-footer #footer {
    margin-bottom: 0;
  }
}
#bottomNav {
  padding: 7px 0;
}
#bottomNav a {
  font-size: 0.86em;
  color: #ddd;
  text-decoration: none;
}
#bottomNav a .fa {
  font-size: 2em;
}
#bottomNav a:hover {
  color: #fff;
}
/*

   _____  _    _        _               ______             _              
  / ____|| |  (_)      | |             |  ____|           | |             
 | (___  | |_  _   ___ | | __ _   _    | |__  ___    ___  | |_  ___  _ __ 
  \___ \ | __|| | / __|| |/ /| | | |   |  __|/ _ \  / _ \ | __|/ _ \| '__|
  ____) || |_ | || (__ |   < | |_| |   | |  | (_) || (_) || |_|  __/| |   
 |_____/  \__||_| \___||_|\_\ \__, |   |_|   \___/  \___/  \__|\___||_|   
							   __/ |                                      
							  |___/                                       
Always blue! Always blue! Always blue! Always blue! Always blue! Always blue! Always blue! Alway - Aah! (all groan)
*/
html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
}
#main {
  overflow: auto;
  padding-bottom: 90px;
}
/* 106 must be same height as the footer */
#footer {
  position: relative;
  margin-top: -90px;
  /* negative value of footer height */
  height: 90px;
  clear: both;
}
/*

			 __  _                                        _ 
	 /\     / _|| |                                      | |
	/  \   | |_ | |_  ___  _ __ __      __ ___   _ __  __| |
   / /\ \  |  _|| __|/ _ \| '__|\ \ /\ / // _ \ | '__|/ _` |
  / ____ \ | |  | |_|  __/| |    \ V  V /| (_) || |  | (_| |
 /_/    \_\|_|   \__|\___||_|     \_/\_/  \___/ |_|   \__,_|
															
															

Derek suggests moving the hacks into head of html.
Mark and Aaron say Derek is low priority.

If things bork in Opera or IE, here is the solution:

Opera Fix 

body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/
}

IE fix

<!--[if !IE 7]>
  <style type="text/css">
	#wrap {display:table;height:100%}
  </style>
<![endif]-->

*/