#content {
    margin-top: 50px;
    width: 100%;
    height: 100%;
}

img#logo {
    top: -5px;
    position: relative;
    padding-right: 5px;
}

a:link img.rss-icon, a:visited img.rss-icon, a img.rss-icon {
    text-decoration: none;
}

img.rss-icon {
    height: 14px;
}

.icon-rss:before {
    content: "\2b";
}

div.productRow {
    margin-bottom: 1em;
}

form.productForm input, form.productForm button, div.productRow button, form.productForm select {
    width: 100% !important;
}

.grid {
    width: 100%;
    height: 150px;
}

#statusGrid {
    width: 100%;
}

.ui-grid-filter-select {
    background-color: #ffffff;
    height: 22px;
}

.modal .modal-body {
    max-height: 500px;
    overflow-y: auto;
}

/* +++ START HACKS: to get the height to be decent. this is because percentage heights don't seem to work with the grid */

@media (min-height: 460px) {
    .grid {
        height: 200px;
    }
}

@media (min-height: 560px) {
    .grid {
        height: 300px;
    }
}

@media (min-height: 660px) {
    .grid {
        height: 400px;
    }
}

@media (min-height: 760px) {
    .grid {
        height: 500px;
    }
}

@media (min-height: 860px) {
    .grid {
        height: 600px;
    }
}

@media (min-height: 960px) {
    .grid {
        height: 700px;
    }
}

/* --- END HACKS */

/* this is the same color as the place holder in text inputs */
select.placeHolder {
    color: #777;
}

footer cite {
    font-style: italic;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 30px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 30px;
}