body {
    padding-top: 60px;  /* create space for fixed top navbar header */
}

/***************************************
*       Navbar
****************************************/

.navbar {
    background-color: #2F6FA6;
}

.navbar .navbar-toggle .icon-bar {
    background-color: white;            /* 'hamburger' is white */
}

.my-navbar-text {
    color:white;                        /* navbar text is white */
}

a.my-navbar-text:hover {
    color:black;                        /* keep branded LeslieElaine.com
                                           non-blue on cover home page
                                           this is also color of other navbar
                                           options */
}

/***************************************
*       Art Search AutoComplete
****************************************/

.art-search-thumb-container {
    width: 50px;
    margin-right:10px;
}

.art-search-thumb {
    margin-left: 5px;
    margin-right: 5px;
    width: 35px;
    max-height: 35px;
    display:inline-block;
}

/*
   show menu above navbar, not under:  http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog
   limit height of autocomplete menu:    https://forum.jquery.com/topic/setting-height-on-autocomplete
*/
.ui-autocomplete {
    z-index: 1051 !important;                                       /* autocomplete menu above navbar */
    max-height: 500px; overflow-y: scroll; overflow-x: hidden;      /* limit height of autocomplete menu */
}

/***************************************
*       Sticky Footer
*
* per http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
****************************************/
html, body { height: 100%; }

* { margin: 0;}

.wrapper {
    min-height: 100%;
    height: auto !important;
    /*height: 100%;*/
    margin: 0 auto -52px;           /* -52 must match .wrapper and navbar height */
}

.my-footer {
    height:52px;
}

.push { height:65px; }              /* create space under wrapper */

.my-footer .navbar {
    margin-bottom:0; height:52px;   /* cancel footer navbar's 15px bottom margin */
    border-bottom: 0;               /* cancel bottom border from header navbar */
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

/* for django form field errors */
.errorlist {
    color: red;
}

.panel-border {
    border: 1px gray solid;
    border-radius: 1.5em;
    padding: .5em;
}

.tag-panel {
    margin-top: 1.5em;
    padding-left: 1em;
    padding-right:1em;
}

.main-panel {
    margin-top: 1.5em;
    padding: 1.5em 1em; /* top and bottom 1.5, right and left 1 */
    border: 1px gray solid;
    border-radius: 1.5em;
}

/***************************************
*       Help Panel
****************************************/
.help-panel{
    margin-bottom: 15px;
    padding: 10px;
    border: solid 3px #5bc0de;
}

/***************************************
*       Home Page
****************************************/
.homepage-image {
    /*width:100%*/
    max-width: 500px;
    max-height: 400px;
}

/***************************************
*       Home Page Panel
****************************************/

/* The overall panel (the option) */

.home-page-panel {
    margin-top: 30px;
    background-color: lightgray;
    border: 3px solid lightgray;
    min-height: 10em;
    height:100%
}

.home-page-panel:hover {
    border: 3px solid black;
}

/* title */
.home-page-panel-title {
    margin: .5em;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
}

/* text */
.home-page-panel-text {
    margin: .5em;"
    vertical-align:middle;
    padding-bottom: .5em;
}

/* clear link text decoration */
.home-page-panel a:link,
.home-page-panel a:active,
.home-page-panel a:visited,
.home-page-title a:link,
.home-page-title a:visited,
.home-page-title a:active
{
    text-decoration: none;
}

/***************************************
*       Gallery Panels
*
*       - filter panel, image panel
*       - tile, container, content
****************************************/

/* The overall panel; the 'tile' */

.gallery-panel {
    /*float: left;*/
    /*margin: .5em;*/
    /*margin: 10px;*/
    margin-bottom: 15px;
    border: 3px solid;
}

.gallery-panel-color-white {
    background-color: white;
    border: 3px solid white;
}
.gallery-panel-color-gray {
    background-color: lightgray;
    border: 3px solid lightgray;
}
.gallery-panel-color-brown {
    background-color: saddlebrown;
    border: 3px solid saddlebrown;
}

.gallery-panel-highlight:hover {
    border: 3px solid black;
}

.gallery-panel a:link,
.gallery-panel a:visited,
.gallery-panel a:active
{
    text-decoration: none;
}

.gallery-panel-container {
    /*padding: .5em;*/
    padding: 10px;
    /* approx 25% of 960 pix wide viewport */
    /*width: 265px;*/
    /*height: 250px;*/
    display:block;
}

/***************************************
*       Gallery Filter Panel
****************************************/

/* Title */
.gallery-filter-panel-title {
    font-weight: bold;
    font-size: 1.8em;
}

/* Horizontal Rule */
.gallery-filter-panel-hr {
      margin-top:3px;
      margin-bottom:3px;
}
/* Filter Tags */
.gallery-filter-panel-tags {
    /*background-color: lightgoldenrodyellow;*/
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:160px;
    /*display: table-cell;*/
    text-align: center;
    /*vertical-align: middle;*/
    /*align-content: center;*/
    /*padding-top: .5em;*/
    padding-top: 10px;
    /*padding-bottom: .5em;*/
    padding-bottom: 10px;
    overflow: hidden;
}

.included_filter_tag {
    color:green;
}

.excluded_filter_tag {
    color:red;
}

/* Footer */
.gallery-filter-panel-footer {
    text-align: center;
}


/***************************************
*       Gallery Image Panel
****************************************/

/* This is needed to center the container within the bootstrap div */
.gallery-panel-image-container-centering {
    margin-left:auto;
    margin-right:auto;
    /*width:236px;*/
}
.gallery-panel-image-container {
    /* approx 25% of 960 pix wide viewport */
    /*width: 236px;*/
    /*width: 100%;*/
    height: 230px;
    position: relative; /* no position change; but marked as first positioned ancestor */
}

.gallery-panel-image {
    max-height: 100%;
    max-width: 100%;
    position:absolute;  /* positioned relative to first positioned ancestor */
    top: 50%;           /* halfway down from top of container */
    left: 50%;          /* halfway to right from left of container */
    margin-right: -50%; /* allows it to fit halfway over */
    transform: translate(-50%, -50%)    /* moves img over and up half it's own size */
}

/***************************************
*       Collection Image Panel
****************************************/

/* This is needed to center the container within the bootstrap div */
.collection-gallery-panel-image-container-centering {
    margin-left:auto;
    margin-right:auto;
    /*width:480px;*/
}
.collection-gallery-panel-image-container {
    /* approx 50% of 960 pix wide viewport */
    /*width: 100%;*/
    height: 480px;
    position: relative; /* no position change; but marked as first positioned ancestor */
}

.gallery-panel-image {
    max-height: 100%;
    max-width: 100%;
    position:absolute;  /* positioned relative to first positioned ancestor */
    top: 50%;           /* halfway down from top of container */
    left: 50%;          /* halfway to right from left of container */
    margin-right: -50%; /* allows it to fit halfway over */
    transform: translate(-50%, -50%)    /* moves img over and up half it's own size */
}

/*** Gallery Detail Page ***/

.gallery-detail-image {
    max-width: 100%;
    max-height: 48em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}