/*=============================================================
                       CUSTOM RULES
==============================================================*/

body {
    height: auto;
}

/* to avoid vertical scroll bar */
div.flash.flash-center {
    left: 25%;
    right: 25%;
}

div.flash.flash-top, div.flash.flash-top:hover {
    position: relative;
    display: block;
    margin: 0;
    padding: 1em;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #865100;
    background: #feea9a;
    border: 1px solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-radius: 0;
    opacity: 1;
}

#header {
    margin-top: 60px;
}

.mastheader h1 {
    margin-bottom: 9px;
    font-size: 81px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1;
    font-size: 54px;
}

.mastheader small {
    font-size: 20px;
    font-weight: 300;
}

/* auth navbar - primitive style */
.auth_navbar, .auth_navbar a {
    color: inherit;
}

.ie-lte7 .auth_navbar, .auth_navbar a {
    color: expression(this.parentNode.currentStyle['color']); /* ie7 doesn't support inherit */
}

.auth_navbar a {
    white-space: nowrap;
}

/* to avoid the nav split on more lines */
.auth_navbar a:hover {
    color: white;
    text-decoration: none;
}

ul#navbar > .auth_navbar {
    display: inline-block;
    padding: 5px;
}

/* form errors message box customization */
div.error_wrapper {
    margin-bottom: 9px;
}

div.error_wrapper .error {
    border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

/* below rules are only for formstyle = bootstrap
trying to make errors look like bootstrap ones */
div.controls .error_wrapper {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

div.controls .error {
    min-width: 5px;
    background: inherit;
    color: #B94A48;
    border: none;
    padding: 0;
    margin: 0;
    /*display:inline;*/
    /* uncommenting this, the animation effect is lost */
}

div.controls .help-inline {
    color: #3A87AD;
}

div.controls .error_wrapper + .help-inline {
    margin-left: -99999px;
}

div.controls select + .error_wrapper {
    margin-left: 5px;
}

.ie-lte7 div.error {
    color: #fff;
}

/* beautify brand */
.navbar-inverse .brand {
    color: #c6cecc;
}

.navbar-inverse .brand b {
    display: inline-block;
    margin-top: -1px;
}

.navbar-inverse .brand b > span {
    font-size: 22px;
    color: white
}

.navbar-inverse .brand:hover b > span {
    color: white
}

/* beautify web2py link in navbar */
span.highlighted {
    color: #d8d800;
}

.open span.highlighted {
    color: #ffff00;
}

/*=============================================================
                 OVERRIDING WEB2PY.CSS RULES
==============================================================*/

/* reset to default */
a {
    white-space: normal;
}

li {
    margin-bottom: 0;
}

textarea, button {
    display: block;
}

/*reset ul padding */
ul#navbar {
    padding: 0;
}

/* label aligned to related input */
td.w2p_fl, td.w2p_fc {
    padding: 0;
}

#web2py_user_form td {
    vertical-align: middle;
}

/*=============================================================
                 OVERRIDING BOOTSTRAP.CSS RULES
==============================================================*/

/* because web2py handles this via js */
textarea {
    width: 90%
}

.hidden {
    visibility: visible;
}

/* right folder for bootstrap black images/icons */
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../images/glyphicons-halflings.png")
}

/* right folder for bootstrap white images/icons */
.icon-white,
.nav-tabs > .active > a > [class^="icon-"],
.nav-tabs > .active > a > [class*=" icon-"],
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"] {
    background-image: url("../images/glyphicons-halflings-white.png");
}

/* bootstrap has a label as input's wrapper while web2py has a div */
div > input[type="radio"], div > input[type="checkbox"] {
    margin: 0;
}

/* bootstrap has button instead of input */
input[type="button"], input[type="submit"] {
    margin-right: 8px;
}

/*=============================================================
RULES FOR SOLVING CONFLICTS BETWEEN WEB2PY.CSS AND BOOTSTRAP.CSS
==============================================================*/

/*when formstyle=table3cols*/
tr#auth_user_remember__row > td.w2p_fw > div {
    padding-bottom: 8px;
}

td.w2p_fw div > label {
    vertical-align: middle;
}

td.w2p_fc {
    padding-bottom: 5px;
}

/*when formstyle=divs*/
div#auth_user_remember__row {
    margin-top: 4px;
}

div#auth_user_remember__row > .w2p_fl {
    display: none;
}

div#auth_user_remember__row > .w2p_fw {
    min-height: 39px;
}

div.w2p_fw, div.w2p_fc {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}

div.w2p_fc {
    padding-left: 5px;
    margin-top: -8px;
}

/*when formstyle=ul*/
form > ul {
    list-style: none;
    margin: 0;
}

li#auth_user_remember__row {
    margin-top: 4px;
}

li#auth_user_remember__row > .w2p_fl {
    display: none;
}

li#auth_user_remember__row > .w2p_fw {
    min-height: 39px;
}

/*when formstyle=bootstrap*/
#auth_user_remember__row label.checkbox {
    display: block;
}

span.inline-help {
    display: inline-block;
}

input[type="text"].input-xlarge, input[type="password"].input-xlarge {
    width: 270px;
}

/*when recaptcha is used*/
#recaptcha {
    min-height: 30px;
    display: inline-block;
    margin-bottom: 0;
    line-height: 30px;
    vertical-align: middle;
}

td > #recaptcha {
    margin-bottom: 6px;
}

div > #recaptcha {
    margin-bottom: 9px;
}

div.control-group.error {
    width: auto;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    background-repeat: repeat;
}

/*=============================================================
                       OTHER RULES
==============================================================*/

/* Massimo Di Pierro fixed alignment in forms with list:string */
form table tr {
    margin-bottom: 9px;
}

td.w2p_fw ul {
    margin-left: 0px;
}

/* web2py_console in grid and smartgrid */
.hidden {
    visibility: visible;
}

.web2py_console input {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.web2py_console input[type="submit"],
.web2py_console input[type="button"],
.web2py_console button {
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 3px 0 0 2px;
}

.web2py_console a,
.web2py_console select,
.web2py_console input {
    margin: 3px 0 0 2px;
}

.web2py_grid form table {
    width: auto;
}

/* auth_user_remember checkbox extrapadding in IE fix */
.ie-lte9 input#auth_user_remember.checkbox {
    padding-left: 0;
}

/*=============================================================
                       MEDIA QUERIES
==============================================================*/

@media only screen and (max-width: 979px) {
    body {
        padding-top: 0px;
    }

    #navbar {
        top: 5px;
    }

    div.flash {
        right: 5px;
    }

    .dropdown-menu ul {
        visibility: visible;
    }
}

@media only screen and (max-width: 479px) {
    body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar-fixed-top, .navbar-fixed-bottom {
        margin-left: -10px;
        margin-right: -10px;
    }

    input[type="text"], input[type="password"], select {
        width: 95%;
    }
}