/**
 * Base stylesheet for public pages
 * 
 * @author      Lex van der Woude <lex@bizhub.co.nz>
 * @copyright   Copyright (c) 2006-2013 BizHub Ltd.
 * @link        http://bizhub.co.nz
 */

/* Resets */
@import url(//cdn.bizhub.co.nz/css/normalize.css);

/* ==========================================================================
   Styling
   ========================================================================== */

body {
    font: normal 100% Helvetica, Arial, Verdana, sans-serif;
}

a {
    color: #29ABE2;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

p {
    margin: 0;
    padding-bottom: 8px;
    color: #666666;
    font-size: 0.875em;
    line-height: 1.7;
}

/* Headers */
h1 {
    padding-bottom: 10px;
    margin: 0;

    font-size: 1.75em; /* 28px */
    letter-spacing: 1px;
}

h2 {
    line-height: 22px;
    margin: 0;
    margin-bottom: 10px;
    font-size: 1em;
}
h2 > span {
    display: block;
}

h3 {
    margin: 0;
}
h4 {
    padding-bottom: 5px;
    margin: 0;
    
    color: #C2272D;
    font-size: 1em;
    font-weight: normal;
}
h5 {
    margin: 0;
}

/* Lists */
ul, li {
    margin: 0;
    padding-left: 0;
}

/* Round icon offset */
img.ricon {
    margin-right: -46px;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}
.relative {
    position: relative;
}
.show {
    display: block;
}
.hide {
    display: none;
}

/* Mobile */
.mobile-only {
    display: none;
}
.mobile-hidden {
    display: block;
}

/*
 * Printing styles
 */
@media print {
    .noprint { display: none; }
}

/*
 * Clear fix
 */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}


/* ==========================================================================
   Containers
   ========================================================================== */

.container {
    max-width: 75.6875em; /* 1,211px */

    margin: 0 auto;
    padding: 0 1em;
}


/* ==========================================================================
   Round logos
   ========================================================================== */

.rlogo {
    width: 73px;
    height: 75px;
    
    background: url(//cdn.bizhub.co.nz/images/sprites/rlogo.png) left top no-repeat;
}

.rlogo-webdev { background-position: -375px 0; }
.rlogo-contenthub { background-position: -150px 0; }
.rlogo-newshub { background-position: -75px 0; }
.rlogo-hosting { background-position: -300px 0; }


/* ==========================================================================
   Top block
   ========================================================================== */

#top.sticky {
    /* Sticky nav offset */
    padding-bottom: 45px;
    background: #39383A;
}

/**
 * Header
 */
header {
    background: #000000;
    border-top: #C1272D solid 3px;
}
header .container {
    position: relative;
    height: 135px;
}

header .top-pattern {
    position: absolute;
    width: 100%;
    height: 9px;
    
    margin-top: -3px;
    margin-left: -20px;
    background: url(//cdn.bizhub.co.nz/images/public/top-pattern.png) center top no-repeat;
}
header .logo {
    position: absolute;
    top: 30px; left: 20px;
}

/* Highlights */
header div.highlights {
    position: absolute;
    top: 35px; right: 20px;
}
header div.highlights p {
    display: inline;
    float: left;
    clear: both;
    line-height: 1.3;

    margin-bottom: 4px;
    padding: 4px 10px;

    font-size: 0.75em;
    font-weight: bold;
}
header div.highlights p.red {
    background: #C1262C;
    color: #FFFFFF;
}
header div.highlights p.black {
    background: #414143;
    color: #FFFFFF;
}


/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
    height: 45px;
    background: /*url(//cdn.bizhub.co.nz/images/public/backgrounds/nav-dropshadow.png) left 36px repeat-x*/ #39383A;
}
nav .container {
    position: relative;
    text-align: center;
}
nav .container .center {
    display: inline-block;
}

/* Fixed logo */
nav div.nav-logo {
    float: left;
    width: 0;
    height: 34px;
    margin-top: 8px;
    margin-right: 14px;
    
    overflow: hidden;
}

/* Navigation */
nav ul.main {
    float: left;
}

nav ul {
    list-style: none;
}
nav li {
    float: left;
    margin-right: 7px;
}
nav li a {
    display: block;
    width: 108px;
    line-height: 45px;
    
    color: #FFF;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
nav li:hover a {
    background: #666668;
    text-decoration: none;
}
nav li.current a {
    cursor: default;
    color: #FFF;
    background: #C1262C;
}

/**
 * Sticky adjustments
 */
#top.sticky nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 500;
    
    background: rgba(0, 0, 0, 0.75);
}


/* ==========================================================================
   Quick links
   ========================================================================== */

#quick-links {
    width: 100%;
    height: 150px;

    background: #FAFAFA;
    border-bottom: #D9D9D9 solid 1px;
}


/* ==========================================================================
   Panels
   ========================================================================== */

section {
    width: 100%;
}

/* Section header */
.section-header {
    margin-bottom: 30px;
    background: url(//cdn.bizhub.co.nz/images/public/backgrounds/side-border.png) left 1.5625em repeat-x;

    text-align: center;
}
.section-header h1 {
    display: inline-block;
    padding: 0 22px;
    background: #FFF;

    font-family: "Proxima Nova Regular","Helvetica Neue","Calibri","Droid Sans","Helvetica","Arial",sans-serif;
    font-size: 2.75em; /* 44px */
    line-height: 1em;
    text-align: center;
}


/* ==========================================================================
   Panel: intro
   ========================================================================== */

section.intro {
    position: relative;
    height: auto;
    background: #00AFC4;
    text-align: center;

    padding-top: 30px;
    padding-bottom: 48px;
}

section.intro h1 {
    color: #FFF;
    font-family: "Proxima Nova Regular","Helvetica Neue","Calibri","Droid Sans","Helvetica","Arial",sans-serif;
    font-size: 3.8125em; /* 61px */
    font-weight: bold;
    line-height: 1.2em;
    word-spacing: .1em;
}
section.intro p {
    color: #FFF;
    font-size: 1.25em;
    line-height: 1.4;
}
section.intro img {
    max-width: 100%;
}

section.intro .bot-pattern {
    position: absolute;
    left: 0; bottom: -14px;

    width: 100%;
    height: 36px;
    background: url(//cdn.bizhub.co.nz/images/public/backgrounds/border1.png) left top repeat-x;
}


/* ==========================================================================
   Absolute positioned items slideshow
   ========================================================================== */

.abss {
    position: relative;
    min-height: 460px;
    
    text-align: center;
}

.abss .controls {
    display: inline-block;
}
.abss .controls div {
    float: left;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    background: url(//cdn.bizhub.co.nz/images/public/icons/slide-off.png) left top no-repeat;
}
.abss .controls a.current div {
    background: url(//cdn.bizhub.co.nz/images/public/icons/slide-on.png) left top no-repeat;
}

.abss .slide {
    position: absolute;
    top: 25px; left: 0;
    width: 100%;
    overflow: hidden;
}
.abss .slide img {
    max-width: 100%;
    height: auto;
    
    margin-top: 40px;
    margin-left: 0;
}


/* ==========================================================================
   Panel: features
   ========================================================================== */

section.features {
    background-color: #FFF;
    padding-top: 50px;
}
section.features .section-header h1 {
    color: #222;
}

section.features article {
    float: left;
    clear: left;
    padding-bottom: 40px;
    
    text-align: center;
}
section.features article.module-contenthub,
section.features article.module-hosting,
section.features article.right {
    float: right;
    clear: right;
}

section.features article .image {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 145px;
}
section.features article .image img {
    display: inline-block;
}

section.features article h1 {
    padding-bottom: 7px;

    color: #000;
    font-size: 1.5em;
    font-weight: bold;
}

section.features article a {
    text-decoration: underline;
}
section.features article a:hover {
    text-decoration: none;
}

section.features .module-webdev h1 { color: #262262; }
section.features .module-contenthub h1 { color: #00AEEF; }
section.features .module-newshub h1 { color: #6D6E71; }
section.features .module-hosting h1 { color: #004359; }


/* ==========================================================================
   Flyout window for features
   ========================================================================== */

#flyout-window {
    display: none;
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    height: 100%;

    background: #FFF;
    z-index: 1000;
}

/* Overthrow CSS:
   Enable overflow: auto on elements with overthrow class when
   html element has overthrow class too */
.overthrow-enabled .overthrow {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/**
 * Loading screen
 */
#flyout-window .loading {
    z-index: 1100;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;

    background: #222324;
    overflow: hidden;
}
#flyout-window .loading div {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100px;
    margin-top: -50px;
    text-align: center;
}


/**
 * Controls
 */
#flyout-window .controls {
    width: 100%;
    line-height: 49px;

    border-bottom: #FFF solid 1px;
    background: #39383A;
}
#flyout-window .controls a div {
    display: inline-block;
    position: relative;

    padding: 0 20px;

    color: #FFF;
    font-weight: bold;
}
#flyout-window .controls a div:hover {
    background: #C1262C;
}

#flyout-window .controls div.previous-flyout {
    text-align: left;
}
#flyout-window .controls div.close-flyout {
    text-align: center;
}
#flyout-window .controls div.next-flyout {
    text-align: right;
}


/**
 * Content window
 */
#flyout-window .content {
    position: absolute;
    left: 0; right: 0;
    top: 50px; bottom: 0;
    
    text-align: center;
}


/**
 * Base styling
 */
#flyout-window h2 {
    font-size: 1.5625em;
    line-height: 2;
}
#flyout-window img {
    max-width: 100%;
    height: auto;
}

#flyout-window .section-header {
    margin-bottom: 15px;
}

#flyout-window section.intro .bot-pattern {
    z-index: 1010;
    bottom: -9px;
    height: 29px;
}


/**
 * Panel: standard fly
 */
section.fly {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
}
section.fly p,
#flyout-window li {
    margin-bottom: 10px;
    color: #FFF;
    font-size: 1em;
    line-height: 1.4;
}
section.fly .backstretch {
    background: #222324;
}

section.fly ul {
    margin-left: 45px;
    margin-bottom: 16px;
}
section.fly li {
    margin-bottom: 0;
}


/**
 * Features
 */
section.fly span.features ul {
    list-style: none;
    margin: 0;
}
section.fly span.features li {
    float: left;
    width: 160px;

    margin-right: 2.1875em; /* 35px */
    margin-bottom: 20px;

    color: #FFF !important;
    font-size: 0.9375em;
    text-align: center;
}


/**
 * Module themes
 */

/* Web Development */
#flyout-window section.intro.module-webdev {
   /* border-bottom: #262262 solid 8px;*/
    background: #F68E2D;
}
#flyout-window section.intro.module-webdev h1 {
    color: #262262;
}
#flyout-window section.fly.module-webdev li,
#flyout-window .module-webdev h2 {
    color: #F68E2D;
}
#flyout-window .module-webdev .bot-pattern {
    background: url('//cdn.bizhub.co.nz/images/public/backgrounds/bot-pattern-webdev.png') left top repeat-x;
}

/* Contenthub */
#flyout-window section.intro.module-contenthub {
    background: #262362;
}
#flyout-window section.fly.module-contenthub li,
#flyout-window section.intro.module-contenthub h1,
#flyout-window section.fly.module-contenthub h2 {
    color: #00ACEF;
}
#flyout-window .module-contenthub .bot-pattern {
    background: url('//cdn.bizhub.co.nz/images/public/backgrounds/bot-pattern-contenthub.png') left top repeat-x;
}

/* Newshub */
#flyout-window section.intro.module-newshub {
    background: #90A1AB;
}
#flyout-window section.intro.module-newshub h1 {
    color: #336072;
}
#flyout-window section.fly.module-newshub li,
#flyout-window section.fly.module-newshub h2 {
    color: #90A1AB;
}
#flyout-window .module-newshub .bot-pattern {
    background: url('//cdn.bizhub.co.nz/images/public/backgrounds/bot-pattern-newshub.png') left top repeat-x;
}

/* Hosting */
#flyout-window section.intro.module-hosting {
    background: #336072;
}
#flyout-window section.intro.module-hosting h1 {
    color: #004359;
}
#flyout-window section.fly.module-hosting li,
#flyout-window section.fly.module-hosting h2 {
    color: #00AEEF;
}
#flyout-window .module-hosting .bot-pattern {
    background: url('//cdn.bizhub.co.nz/images/public/backgrounds/bot-pattern-hosting.png') left top repeat-x;
}

/**
 * Default module styles
 */
section.fly li span {
    color: #FFF;
}

#flyout-window .enquiry {
    display: none;
}


/* ==========================================================================
   Panel: code thinking
   ========================================================================== */

section.code-thinking {
    padding: 40px 0;

    background: #C1262C;
    text-align: center;
}
section.code-thinking .top-pattern {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 7px;
    
    background: url(//cdn.bizhub.co.nz/images/public/backgrounds/teeth-red.png) #FFF left top repeat-x;
}
section.code-thinking .bot-pattern {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 7px;
    
    background: url(//cdn.bizhub.co.nz/images/public/backgrounds/teeth-grey.png) #C1262C left top repeat-x;
}

section.code-thinking h1 {
    color: #FFF;
    font-size: 3.3125em; /* 53px */
    font-weight: bold;
    line-height: 59px;
}
section.code-thinking h1 span {
    font-size: 1.4150943396em; /* 75px / 53px */
}

section.code-thinking p {
    color: #000;
    font-size: 1.125em; /* 18px */
    font-weight: bold;
    line-height: 1.9375em; /* 31px */
}


/* ==========================================================================
   Panel: showcase
   ========================================================================== */

section.showcase {
    position: relative;
    padding: 40px 0;
    background: #818090;
}

/* Top text */
section.showcase .top {
    padding-bottom: 40px;

    color: #FFF;
    text-align: center;
    font-size: 1.125em;
    font-weight: bold;
    line-height: 31px;
}

/**
 * Items
 */
section.showcase .screens > div {
    position: relative;
    float: left;
    margin-bottom: 24px;
}
section.showcase .screens > div > img {
    width: 100%;
    height: auto;
}

/* Information box */
section.showcase .screens > div .info {
    /* Based on original 387 wide by 329 high */
    display: none;
    position: absolute;
    top: 4.559270516717325%;
    left: 3.875968992248062%;
    z-index: 110;
    overflow: hidden;

    width: 92.50645994832041%;
    height: 58.96656534954407%;

    background: #000;
    text-align: center;
}
section.showcase .screens > div .info > div {
    padding: 1.25em;
}
section.showcase .screens > div .info h3 {
    /* Header */
    padding-bottom: 0.5em;
    
    color: #FFF;
    font-size: 1.25em;
    font-weight: bold;
}
section.showcase .screens > div .info p {
    padding-bottom: 0.5em;
    color: #DDD;
}

/* Bottom pattern */
section.showcase .bot-pattern {
    z-index: 100;
    position: absolute;
    left: 0; bottom: -16px;
    width: 100%;
    height: 29px;

    background: url(//cdn.bizhub.co.nz/images/public/backgrounds/showcase-bot-pattern.png) left top repeat-x;
}


/* ==========================================================================
   Panel: enquiry form
   ========================================================================== */

section.enquiry {
    width: 100%;
    height: auto;

    padding-top: 50px;
    margin-top: -3px;
    background: #FAFAFA;

    text-align: center;
}

section.enquiry .section-header h1 {
    background: #FAFAFA;
    color: #818090;
}

/* Form */
section.enquiry .form {
    width: 600px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 50px;
    
    text-align: left;
}
section.enquiry .form .side-by-side {
    width: 100%;
}
section.enquiry .form .side-by-side .left,
section.enquiry .form .side-by-side .right {
    width: 49%;
}

section.enquiry .error {
    border: #C1262C solid 1px !important;
}
section.enquiry .error-message {
    clear: both;

    padding: 8px 0 8px 35px;
    margin-bottom: 14px;
    border: #C1272D solid;
    border-width: 1px 0 1px 0;

    background: url(//cdn.bizhub.co.nz/images/icons/alert.png) no-repeat 10px 11px;

    color: #C1272D;
    font-size: 0.8125em;
}


/* ==========================================================================
   Panel: newsletter signup
   ========================================================================== */

section.newsletter {
    padding: 30px 0;
    background: #566777;

    color: #FFF;
    text-align: center;
}

section.newsletter .field {
    position: relative;
    display: inline-block;
}
section.newsletter input {
    margin-left: 20px;
    margin-bottom: 0;
    padding: 8px;
}
section.newsletter input.label {
    color: #BBB;
}
section.newsletter input.button {
    position: absolute;
    top: 4px; right: 4px;
    padding: 0;
}


/* ==========================================================================
   Panel: map
   ========================================================================== */

section.map {
    height: 500px;
}


/* ==========================================================================
   Panel: gallery
   ========================================================================== */

section.gallery {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
}

section.gallery ul {
    list-style: none;
}
section.gallery li {
    overflow: hidden;
    width: 330px;

    margin-bottom: 15px;
    padding: 5px 5px 3px 5px;

    border: #DDD solid 1px;
    background: #FFF;
}
section.gallery li p {
    padding-top: 5px;
    color: #666;
}

section.gallery li .hover {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    text-align: center;

    opacity:0;
    filter:alpha(opacity=0);
}
section.gallery li .hover .mask {
    position: absolute;
    left: 0; top: 0;
    z-index: 90;

    width: 100%;
    height: 100%;
    background: #F7FDFF;

    opacity:0.9;
    filter:alpha(opacity=9);
}
section.gallery li .hover img {
    position: relative;
    display: inline-block;
    z-index: 100;

    margin-top: 39px;
}


/* ==========================================================================
   Form (from twitter bootstrap)
   ========================================================================== */

.input-block-level {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}
legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
legend small {
    font-size: 15px;
    color: #999999;
}
label,
input,
button,
select,
textarea {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}
input,
button,
select,
textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
    display: block;
    margin-bottom: 5px;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    vertical-align: middle;
}
input,
textarea,
.uneditable-input {
    width: 206px;
}
textarea {
    height: auto;
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */

    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    *margin-top: 0;
    /* IE7 */

    margin-top: 1px \9;
    /* IE8-9 */

    line-height: normal;
}
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
    width: auto;
}
select,
input[type="file"] {
    height: 30px;
    /* In IE7, the height of the select element cannot be changed by height, only font-size */

    *margin-top: 4px;
    /* For IE7, add top margin to align select with labels */

    line-height: 30px;
}
select {
    width: 220px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}
select[multiple],
select[size] {
    height: auto;
}
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.uneditable-input,
.uneditable-textarea {
    color: #999999;
    background-color: #fcfcfc;
    border-color: #cccccc;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
    cursor: not-allowed;
}
.uneditable-input {
    overflow: hidden;
    white-space: nowrap;
}
.uneditable-textarea {
    width: auto;
    height: auto;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #999999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999999;
}
.radio,
.checkbox {
    min-height: 20px;
    padding-left: 20px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}
.controls > .radio:first-child,
.controls > .checkbox:first-child {
    padding-top: 5px;
}
.radio.inline,
.checkbox.inline {
    display: inline-block;
    padding-top: 5px;
    margin-bottom: 0;
    vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
    margin-left: 10px;
}
.input-mini {
    width: 60px;
}
.input-small {
    width: 90px;
}
.input-medium {
    width: 150px;
}
.input-large {
    width: 210px;
}
.input-xlarge {
    width: 270px;
}
.input-xxlarge {
    width: 530px;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
    float: none;
    margin-left: 0;
}
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
    display: inline-block;
}
input,
textarea,
.uneditable-input {
    margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
    margin-left: 20px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
    width: 926px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
    width: 846px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
    width: 766px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
    width: 686px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
    width: 606px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
    width: 526px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
    width: 446px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
    width: 366px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
    width: 286px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
    width: 206px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
    width: 126px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
    width: 46px;
}
.controls-row {
    *zoom: 1;
}
.controls-row:before,
.controls-row:after {
    display: table;
    content: "";
    line-height: 0;
}
.controls-row:after {
    clear: both;
}
.controls-row [class*="span"],
.row-fluid .controls-row [class*="span"] {
    float: left;
}
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
    padding-top: 5px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    cursor: not-allowed;
    background-color: #eeeeee;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
    background-color: transparent;
}
.control-group.warning .control-label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
    color: #c09853;
}
.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
    color: #c09853;
}
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
    border-color: #c09853;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
    border-color: #a47e3c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
    color: #c09853;
    background-color: #fcf8e3;
    border-color: #c09853;
}
.control-group.error .control-label,
.control-group.error .help-block,
.control-group.error .help-inline {
    color: #b94a48;
}
.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
    color: #b94a48;
}
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
    border-color: #b94a48;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
    border-color: #953b39;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #b94a48;
}
.control-group.success .control-label,
.control-group.success .help-block,
.control-group.success .help-inline {
    color: #468847;
}
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
    color: #468847;
}
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
    border-color: #468847;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
    border-color: #356635;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
    color: #468847;
    background-color: #dff0d8;
    border-color: #468847;
}
.control-group.info .control-label,
.control-group.info .help-block,
.control-group.info .help-inline {
    color: #3a87ad;
}
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
    color: #3a87ad;
}
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
    border-color: #3a87ad;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
    border-color: #2d6987;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}
.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #3a87ad;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b;
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
    border-color: #e9322d;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
}
.form-actions {
    padding: 19px 20px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    *zoom: 1;
}
.form-actions:before,
.form-actions:after {
    display: table;
    content: "";
    line-height: 0;
}
.form-actions:after {
    clear: both;
}
.help-block,
.help-inline {
    color: #595959;
}
.help-block {
    display: block;
    margin-bottom: 10px;
}
.help-inline {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */

    *zoom: 1;
    vertical-align: middle;
    padding-left: 5px;
}
.input-append,
.input-prepend {
    display: inline-block;
    margin-bottom: 10px;
    vertical-align: middle;
    font-size: 0;
    white-space: nowrap;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu,
.input-append .popover,
.input-prepend .popover {
    font-size: 14px;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
    position: relative;
    margin-bottom: 0;
    *margin-left: 0;
    vertical-align: top;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
    z-index: 2;
}
.input-append .add-on,
.input-prepend .add-on {
    display: inline-block;
    width: auto;
    height: 20px;
    min-width: 16px;
    padding: 4px 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    background-color: #eeeeee;
    border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn,
.input-append .btn-group > .dropdown-toggle,
.input-prepend .btn-group > .dropdown-toggle {
    vertical-align: top;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.input-append .active,
.input-prepend .active {
    background-color: #a9dba9;
    border-color: #46a546;
}
.input-prepend .add-on,
.input-prepend .btn {
    margin-right: -1px;
}
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.input-append input,
.input-append select,
.input-append .uneditable-input {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.input-append input + .btn-group .btn:last-child,
.input-append select + .btn-group .btn:last-child,
.input-append .uneditable-input + .btn-group .btn:last-child {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
    margin-left: -1px;
}
.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .btn-group:first-child {
    margin-left: 0;
}
input.search-query {
    padding-right: 14px;
    padding-right: 4px \9;
    padding-left: 14px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */

    margin-bottom: 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.form-search .input-append .search-query {
    -webkit-border-radius: 14px 0 0 14px;
    -moz-border-radius: 14px 0 0 14px;
    border-radius: 14px 0 0 14px;
}
.form-search .input-append .btn {
    -webkit-border-radius: 0 14px 14px 0;
    -moz-border-radius: 0 14px 14px 0;
    border-radius: 0 14px 14px 0;
}
.form-search .input-prepend .search-query {
    -webkit-border-radius: 0 14px 14px 0;
    -moz-border-radius: 0 14px 14px 0;
    border-radius: 0 14px 14px 0;
}
.form-search .input-prepend .btn {
    -webkit-border-radius: 14px 0 0 14px;
    -moz-border-radius: 14px 0 0 14px;
    border-radius: 14px 0 0 14px;
}
.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */

    *zoom: 1;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
    display: none;
}
.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
    display: inline-block;
}
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
    margin-bottom: 0;
}
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
    float: left;
    margin-right: 3px;
    margin-left: 0;
}
.control-group {
    margin-bottom: 10px;
}
legend + .control-group {
    margin-top: 20px;
    -webkit-margin-top-collapse: separate;
}
.form-horizontal .control-group {
    margin-bottom: 20px;
    *zoom: 1;
}
.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
    display: table;
    content: "";
    line-height: 0;
}
.form-horizontal .control-group:after {
    clear: both;
}
.form-horizontal .control-label {
    float: left;
    width: 160px;
    padding-top: 5px;
    text-align: right;
}
.form-horizontal .controls {
    *display: inline-block;
    *padding-left: 20px;
    margin-left: 180px;
    *margin-left: 0;
}
.form-horizontal .controls:first-child {
    *padding-left: 180px;
}
.form-horizontal .help-block {
    margin-bottom: 0;
}
.form-horizontal input + .help-block,
.form-horizontal select + .help-block,
.form-horizontal textarea + .help-block,
.form-horizontal .uneditable-input + .help-block,
.form-horizontal .input-prepend + .help-block,
.form-horizontal .input-append + .help-block {
    margin-top: 10px;
}
.form-horizontal .form-actions {
    padding-left: 180px;
}


/* ==========================================================================
   Buttons (from twitter bootstrap)
   ========================================================================== */

.btn {
    display: inline-block;
    *display: inline;
    padding: 4px 12px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    *border: 0;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
}

.btn:active,
.btn.active {
    background-color: #cccccc \9;
}

.btn:first-child {
    *margin-left: 0;
}

.btn:hover,
.btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn.active,
.btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled,
.btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}

.btn-primary {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #006dcc;
    *background-color: #0044cc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
    color: #ffffff;
    background-color: #0044cc;
    *background-color: #003bb3;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #003399 \9;
}

.btn-warning {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #faa732;
    *background-color: #f89406;
    background-image: -moz-linear-gradient(top, #fbb450, #f89406);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
    background-image: -o-linear-gradient(top, #fbb450, #f89406);
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    border-color: #f89406 #f89406 #ad6704;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
    color: #ffffff;
    background-color: #f89406;
    *background-color: #df8505;
}

.btn-warning:active,
.btn-warning.active {
    background-color: #c67605 \9;
}

.btn-danger {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #da4f49;
    *background-color: #bd362f;
    background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
    background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    background-repeat: repeat-x;
    border-color: #bd362f #bd362f #802420;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
    color: #ffffff;
    background-color: #bd362f;
    *background-color: #a9302a;
}

.btn-danger:active,
.btn-danger.active {
    background-color: #942a25 \9;
}

.btn-success {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #5bb75b;
    *background-color: #51a351;
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
    color: #ffffff;
    background-color: #51a351;
    *background-color: #499249;
}

.btn-success:active,
.btn-success.active {
    background-color: #408140 \9;
}

.btn-info {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #49afcd;
    *background-color: #2f96b4;
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
    color: #ffffff;
    background-color: #2f96b4;
    *background-color: #2a85a0;
}

.btn-info:active,
.btn-info.active {
    background-color: #24748c \9;
}

.btn-inverse {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #363636;
    *background-color: #222222;
    background-image: -moz-linear-gradient(top, #444444, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -webkit-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(top, #444444, #222222);
    background-image: linear-gradient(to bottom, #444444, #222222);
    background-repeat: repeat-x;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
    color: #ffffff;
    background-color: #222222;
    *background-color: #151515;
}

.btn-inverse:active,
.btn-inverse.active {
    background-color: #080808 \9;
}

button.btn,
input[type="submit"].btn {
    *padding-top: 3px;
    *padding-bottom: 3px;
}

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}


/* ==========================================================================
   Back to top
   ========================================================================== */

#backtotop {
    display: none;
    position: fixed;
    right: 20px; bottom: 0;
    z-index: 1100;
}
#backtotop a {
    display: block;
    width: 48px;
    height: 48px;

    border: 0 none;

    text-decoration: none;
}
#backtotop a:hover {
    opacity:.8;
}


/* ==========================================================================
   Footer block
   ========================================================================== */

footer {
    width: 100%;
    min-height: 137px;

    padding-top: 25px;
    padding-bottom: 34px;
    border-top: #C2272D solid 3px;
    background: #000;

    color: #666666;
    text-align: center;
}
footer .g-4 {
    float: left;
}

footer h1 {
    color: #BBB;
    font-size: 1em;
    font-weight: normal;
    line-height: 1;
}
footer h3 {
    font-size: 0.8125em;
    font-weight: normal;
}
footer a {
    display: inline-block;
    color: #666666;
}
footer a:hover {
    text-decoration: none;
}


/**
 * Icon hovers
 */
footer .icon {
    display: inline-block;
    width: 60px;
    height: 60px;
}
footer .icon.linkedin { background: url(//cdn.bizhub.co.nz/images/public/icons/linkedin.png) left top no-repeat; }
footer .icon.email { background: url(//cdn.bizhub.co.nz/images/public/icons/email.png) left top no-repeat; }
footer .icon.skype { background: url(//cdn.bizhub.co.nz/images/public/icons/skype.png) left top no-repeat; }

footer a:hover .icon {
    background-position: 0 -60px;
}


/**
 * Line & trade text
 */
footer .line {
    clear: both;
    width: 100%;
    
    padding-top: 20px;
    margin-bottom: 20px;
    border-bottom: #333 solid 1px;
}
footer .trade {
    font-size: 0.8125em;
}


/* ==========================================================================
   Grid; 988px wide, 20px gutter, 16px outter, 1020px total width
   ========================================================================== */

/* Previewer */
#grid-previewer {
    z-index: 1500;
    position: absolute;
    width: 100%; 
    left: 0; top: 0;
    overflow: hidden;

    pointer-events:none;
}
#grid-previewer .container > div {
    display: none;
    float: left;
    height: 4000px;

    background: #ADFF2F;
    opacity: .2;

    pointer-events:none;
}

/* Toggle previewer */
#grid-toggle {
    z-index: 1500;
    position: fixed;
    left: 70px; bottom: 0;
}
#grid-toggle a {
    display: block;
    width: 48px;
    height: 48px;
    border: 0 none;
    text-decoration: none;
}
#grid-toggle a:hover {
    opacity:.8;
}

/* Widths */
.g-1 { width: 6.440957886044592%; }
.g-2 { width: 14.946325350949630%; }
.g-3 { width: 23.451692815854667%; }
.g-4 { width: 31.957060280759702%; }
.g-5 { width: 40.462427745664741%; }
.g-6 { width: 48.967795210569776%; }
.g-7 { width: 57.473162675474811%; }
.g-8 { width: 65.978530140379860%; }
.g-9 { width: 74.483897605284881%; }
.g-10 { width: 82.989265070189916%; }
.g-11 { width: 91.494632535094965%; }
.g-12 { width: 100.000000000000000%; }

/* Left margins */
.g-1, .g-2, .g-3, .g-4, .g-5, .g-6,
.g-7, .g-8, .g-9, .g-10, .g-11, .g-12 {
    margin-left: 2.064409578860446%;
}

/* Spacing: suffix & prefix */
.prefix-1 { margin-left: 8.505367464905037%; } .suffix-1 { margin-right: 8.505367464905037%; }
.prefix-2 { margin-left: 17.010734929810074%; } .suffix-2 { margin-right: 17.010734929810074%; }
.prefix-3 { margin-left: 25.516102394715112%; } .suffix-3 { margin-right: 25.516102394715112%; }
.prefix-4 { margin-left: 34.021469859620147%; } .suffix-4 { margin-right: 34.021469859620147%; }
.prefix-5 { margin-left: 42.526837324525182%; } .suffix-5 { margin-right: 42.526837324525182%; }
.prefix-6 { margin-left: 51.032204789430224%; } .suffix-6 { margin-right: 51.032204789430224%; }
.prefix-7 { margin-left: 59.537572254335259%; } .suffix-7 { margin-right: 59.537572254335259%; }
.prefix-8 { margin-left: 68.042939719240294%; } .suffix-8 { margin-right: 68.042939719240294%; }
.prefix-9 { margin-left: 76.548307184145330%; } .suffix-9 { margin-right: 76.548307184145330%; }
.prefix-10 { margin-left: 85.053674649050365%; } .suffix-10 { margin-right: 85.053674649050365%; }
.prefix-11 { margin-left: 93.559042113955400%; } .suffix-11 { margin-right: 93.559042113955400%; }

/* No margins */
.g-nm { margin-left: 0; }
.g-nm-all { margin-left: 0 !important; }


/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Portfolio */
@media only screen and (max-width: 1140px) {
    section.showcase .screens > div .info {
        font-size: 13px;
    }
}

/* Mobile */
@media only screen and (max-width: 780px) {
    /**
     * Helper classes
     */
    .mobile-only { display: block; }
    .mobile-hidden { display: none; }
    
    /**
     * Top block
     */
    #top {
        height: 50px;
        
        border-bottom: #C2272D solid 3px;
        background: #000;
    }
    #top.sticky {
        /* Sticky nav offset */
        padding-bottom: 0 !important;
    }
    #top header,
    #top .logo,
    #top nav {
        display: none !important;
    }
    
    /**
     * Mobile
     */
    #top .container.mobile-only {
        overflow: hidden;
        position: relative;
        height: 50px;
    }
    .mob-logo {
        position: absolute;
        left: 20px; top: 12px;
    }
    img.mob-btn-nav {
        position: absolute;
        right: 3px; top: 0;
        cursor: pointer;
        padding: 18px;
    }
    
    /* Mobile navigation */
    #mob-nav {
        display: none;
        border-bottom: #000 solid 2px;
    }
    #mob-nav ul {
        list-style: none;
    }
    #mob-nav li {
        width: 100%;
        /*text-align: center;*/
    }
    #mob-nav a {
        display: block;

        padding: 15px;
        border-left: #0096ab solid 12px;
        background: #00AFC4;

        color: #FFF;
        font-size: 1.25em;
        font-weight: bold;
        text-transform: uppercase;
    }
    #mob-nav a:hover {
        text-decoration: none;
    }
    
    #mob-nav li.services a {
        border-left: #445464 solid 12px;
        background: #566777;
    }
    #mob-nav li.portfolio a {
        border-left: #242049 solid 12px;
        background: #262262;
    }
    #mob-nav li.contact a {
        border-left: #c98a24 solid 12px;
        background: #E4A424;
    }
    
    /**
     * Panel: intro
     */
    section.intro {
        height: auto !important;
        padding-bottom: 30px;
    }
    section.intro h2,
    section.intro p {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
        margin: 0;
    }

    /**
    * Contact
    */
    section.contact .left {
        width: auto;
    }
    section.contact .right {
        width: auto;
        float: none;
        clear: both;
        position: relative;
        right: 0; top: 0;
        text-align: left;
    }
    
    /**
     * Panel: enquiry
     */
    section.enquiry .form {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    section.enquiry .form .side-by-side .left,
    section.enquiry .form .side-by-side .right {
        clear: both;
        width: 100%;
    }
    
    /**
     * Panel: gallery
     */
    section.gallery .container {
        /* Restore the container padding for mobiles */
        padding: 0 20px;
    }
    
    /**
     * Grid
     */

    /* Widths */
    .gm-1 { width: 6.440957886044592%; }
    .gm-2 { width: 14.946325350949630%; }
    .gm-3 { width: 23.451692815854667%; }
    .gm-4 { width: 31.957060280759702%; }
    .gm-5 { width: 40.462427745664741%; }
    .gm-6 { width: 48.967795210569776%; }
    .gm-7 { width: 57.473162675474811%; }
    .gm-8 { width: 65.978530140379860%; }
    .gm-9 { width: 74.483897605284881%; }
    .gm-10 { width: 82.989265070189916%; }
    .gm-11 { width: 91.494632535094965%; }
    .gm-12 { width: 100.000000000000000%; }

    /* Left margins */
    .gm-1, .gm-2, .gm-3, .gm-4, .gm-5, .gm-6,
    .gm-7, .gm-8, .gm-9, .gm-10, .gm-11, .gm-12 {
        margin-left: 2.064409578860446%;
    }

    /* No margins */
    .gm-12 { margin-left: 0; }
    .gm-nm { margin-left: 0; }
}

/* Showcase breakpoint single monitors */
@media only screen and (max-width: 620px) {
    section.showcase .screens > div {
        clear: both;
        width: 100%;
        margin-left: 0;
    }
    section.showcase .screens > div .info {
        font-size: 16px;
    }
}

/* Update newsletter panel */
@media only screen and (max-width: 540px) {
    section.newsletter {
        text-align: center;
    }
    section.newsletter input {
        clear: both;
        margin-left: 0;
    }
}

/* Very small */
@media only screen and (max-width: 380px) {
    #flyout-window section.intro h1 {
        font-size: 2.5em;
    }
    
    section.code-thinking h1 {
        font-size: 2.5em;
    }
    
    section.showcase .screens .info p {
        display: none;
    }
    section.showcase .screens .info p a {
        display: block;
    }
}