@font-face {
    font-family: 'BazarMedium';
    src: url('../fonts/bazar/bazar.eot');
    src: url('../fonts/bazar/bazar.eot?#iefix') format('embedded-opentype'), url('../fonts/bazar/bazar.woff') format('woff'), url('_source/fonts/bazar/bazar.ttf') format('truetype'), url('../fonts/bazar/bazar.svg#bazarmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
.alignright {
    float: right !important;
    padding-left: 20px;
}
.agb-breadcrubs {
    margin: -10px 0 20px 0;
}
body {
    background-color: #f1f1f1;
    min-width: 480px;
}
#agb-dashboard,
#agb-tabs ul,
#agb-tabs thead {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
#agb-header {
    width: 100%;
    background-color: #31302f;
    height: 150px;
    margin-bottom: 40px;
}
#agb-header h1 {
    color: #fff;
    text-shadow: 3px 3px 0px #31302f, 5px 5px 0px #4e4c46;
    font: 80px'BazarMedium';
    /* font-variant: normal; didn't work well in all browsers for this font */
    letter-spacing: 10px;
    background-color: #31302f;
    margin: 25px auto 0 auto;
    width: 600px;
    text-align: center;
}
#agb-header h1 i {
    font-style: normal;
    font-size: 60px;
    margin-left: -3px;
}
#agb-header .row {
    /* just some trickery to make those lines */
    background: url(../images/grey.png) 0 75px no-repeat, url(../images/grey.png) 100% 75px no-repeat, url(../images/white.png) 0 68px repeat-x, url(../images/white.png) 0 75px repeat-x;
}
@media only screen and (max-width: 40em) {
    /* Define mobile only styles for header*/
    #agb-header {
        height: 50px;
    }
    #agb-header h1 {
        font-size: 30px;
        margin-top: 8px;
        width: 290px;
    }
    #agb-header h1 i {
        font-style: normal;
        font-size: 23px;
    }
    #agb-header .row {
        /* just some trickery to make those lines */
        background: url(../images/grey.png) 0 27px no-repeat, url(../images/grey.png) 100% 27px no-repeat, url(../images/white.png) 0 22px repeat-x, url(../images/white.png) 0 27px repeat-x;
    }
}
#srm-image {
    background-color: #b6edff;
    margin-top: -25px;
    margin-left: -20px;
}
.agb-bar {
    height: 8px;
    width: 100%;
    margin-top: 8px;
    border: 1px solid #ccc;
    border-color: #fff #ccc #ccc #fff;
    background-color: #fff;
    position: relative;
}
.agb-bar-range {
    background-color: #ccc;
    height: 100%;
    position: absolute;
}
/*
div.agb-bar-this {
    height: 10px;
    width: 10px;
    top: -2px;
    border: 1px solid #fff;
    border-color: #fff #064a5f #064a5f #fff;
    background-color: #007da4;
    position: absolute;
    display: block;
    left: -5px;
}*/

i.agb-bar-this {
    color: #007da4;
    display: block;
    position: absolute;
    top: -11px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 24px;
    margin-left: -8px;
    padding-left: 1px;
    padding-right: 1px;
    transform: scale(0.7, 1.0);
    /* the padding fix is for font-awsome animation artifacts in chrome */
}
/* tabs */

#agb-tabs {
    margin-top: 20px;
    outline: none;
}
#agb-tabs #agb-ingredients {
    border: 1px solid #ccc;
    background-color: #fff;
    margin-top: -1px;
}
#agb-tabs .tab-title > a {
    outline: none;
}
/* vertical tabs */

#agb-tabs ul.tabs.vertical {
    width: 110px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-top: -1px;
    margin-right: 15px;
}
#agb-tabs .tabs .tab-title > a {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}
#agb-tabs .tabs.vertical .tab-title.active > a {
    border-right: none;
    margin-right: -1px
}
/* horizontal tabs */

#agb-tabs ul.tabs.horizontal {
    border-right: 1px solid #ccc;
}
#agb-tabs ul.tabs.horizontal li {
    width: 25%;
    text-align: center;
}
#agb-tabs ul.tabs.horizontal .tab-title > a {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #fff;
}
#agb-tabs ul.tabs.horizontal .tab-title.active > a {
    border-bottom: 1px solid #fff;
    margin-bottom: -2px;
}
/* border on last tab? */

ul.vertical #agb-last-tab {
    border-bottom: 1px solid #ccc;
}
ul.vertical #agb-last-tab.active {
    border-bottom: 1px solid #fff;
}
/* active sections*/

#agb-ingredients.tabs-content section {
    min-height: 230px;
}
@media only screen and (max-width: 40em) {
    #agb-ingredients section {
        overflow-x: auto;
    }
}
#agb-ingredients table {
    margin-top: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
#agb-ingredients table td.td-remove {
    width: 10px;
}
.remove-row:link,
.remove-row:visited {
    color: #ccc;
}
.remove-row:hover,
.remove-row:focus {
    color: #008cba;
}
#agb-ingredients.tabs-content table {
    width: auto;
    margin-top: -15px;
    border-spacing: 0px;
}
#agb-ingredients table th {
    color: #aaa;
    white-space: nowrap;
}
#agb-ingredients.tabs-content table th {
    background-color: #fff;
    font-weight: normal;
    padding: 10px 5px 0 5px;
}
#agb-ingredients table td {
    background-color: #fff;
    padding: 5px;
}
#agb-ingredients input,
#agb-ingredients select {
    margin: 0;
}
input.error{
    background-color: #fcd9de;
}
#agb-ingredients.tabs-content input {
    max-width: 70px;
}
#agb-ingredients.tabs-content select {
    min-width: 100px;
}
#agb-ingredients input.withpostfix {
    float: left;
    width: 70%;
}
#agb-ingredients span.postfix {
    float: right;
    width: 30%;
}
#tabs-toggle {
    position: absolute;
    right: 20px;
    top: -4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
#tabs-toggle:link,
#tabs-toggle:visited {
    color: #ccc;
}
#tabs-toggle:hover,
#tabs-toggle:focus {
    color: #008cba;
}
/* archive tables */
/* switch bars to .agb-barmin,.agb-barmax,.agb-barback */
.agb-table,
.agb-table thead,
.agb-table tbody tr {
    border: none;
    background: none;
}
.agb-table thead th:hover {
    cursor: pointer;
}
.agb-table tbody tr td,
.agb-table div.highlowbars{
    position: relative;
    width: 100%;
}
/*.agb-table div.alphalowbar,
.agb-table div.alphahighbar,
.agb-table div.betalowbar,
.agb-table div.betahighbar,
.agb-table div.ppgbar,
.a
.agb-table div.attlowbar,
.agb-table div.atthighbar,
.agb-table div.templowbar,
.agb-table div.temphighbar,
.agb-table div.waterbar,*/
.agb-table div.srmbar,
.agb-table div.srmbarback,
.agb-table div.barback,
.agb-barmin,
.agb-barmax,
.agb-barsingle,
.agb-barback{
    height: 20px;
    background-color: #abba71;
    color: #fff;
    padding-left: 5px;
    position: absolute;
    z-index: 2;
    top: -10px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
    white-space: nowrap !important;
}
.agb-barmax{
    z-index: 1;
}
.agb-barback {
    background-color: #e2e2e2; 
    width: 100%;
    z-index: 0;
    box-shadow: #fff -1px 1px 0, #bbb 0px -1px 0;
}
.agb-table div.srmbar {
    width: 20px;
    left: 50px;
    top: 0;
    background-color: #4c2413;
    z-index: 3;
}
.agb-table div.srmbarback {
    width: 20px;
    left: 50px;
    top: 0;
    background-color: #fff;
    box-shadow: #fff -1px 1px 0;
}


/*
.agb-table div.ppgbar {
    background-color: #7c452d;
}

.agb-table div.alphahighbar {
    background-color: #8b9b49;
    z-index: 1;
}
.agb-table div.betalowbar {
    background-color: #6da7bc;
}
.agb-table div.waterbar {
    background-color: #6da7bc;
}
.agb-table div.barback, .agb-barback {
    background-color: #e2e2e2; 
    width: 100%;
    z-index: 0;
    box-shadow: #fff -1px 1px 0, #bbb 0px -1px 0;
}
.agb-table div.betahighbar {
    background-color: #49859b;
    z-index: 1;
}
.agb-table div.templowbar, .agb-barmin {
    background-color: #af6260;
}
.agb-table div.temphighbar, .agb-barmax{
    background-color: #994a49;
    z-index: 1;
}
.agb-table div.attlowbar {
    background-color: #cc8a3f;
}
.agb-table div.atthighbar {
    background-color: #aa681d;
    z-index: 1;
}*/



/* single posts */

body.single-agb_grain div.icon,
body.single-agb_hops div.icon,
body.single-agb_yeast div.icon,
body.single-agb_water div.icon{
    float: right;
    /* font-size: 20vw; cool but not completly supported */
    font-size: 200px;
    height: 200px;
    margin: 0 0 10px 20px;
    color: #e2e2e2;
    text-shadow: #fff 0px 2px 0, #bbb 0 -1px 0;
}
body.error404 div.icon{
    float: right;
    font-size: 200px;
    height: 200px;
    margin: 0 0 10px 20px;
    color: #e2e2e2;
    text-shadow: #fff 0px -2px 0, #bbb 0 1px 0;
    transform:rotate(-180deg); 
}

/* share */
#content div.sharedaddy, #main div.sharedaddy, div.sharedaddy{
	display: inline;
    float: right;
}

/*panel override */
.panel{
	background-color: #fff;
}