/************************
 * Color Background *****
************************/
html.sm-user-ui  {
}

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
    background-color: #1f2125;
            background-color: rgba(31,33,37, 0.66);
    }
.sm-user-ui .sm-page-content > .sm-page-layout >
    .sm-page-layout-region >
    .sm-page-layout-region-center {
    background-color: #282a2e;
            background-color: rgba(40,42,46, 0);
    }
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
    background-color: #1f2125;
            background-color: rgba(31,33,37, 0);
    }
.sm-gallery-tiles .sm-tile img {
    border-radius:8px;
}

.sm-page-widget-folders .sm-tile a, 
.sm-page-widget-galleries .sm-tile a,
.sm-page-widget-nodes .sm-tile a,
.sm-page-widget-pages .sm-tile a {
  border-radius: 8px;
}

/* Move the info tile to the top of the image, rather than the bottom */
.sm-tiles-info-over .sm-tile-info {
  top: 0px !important;
  height: 32px;
}

/* Align the text in the center */
.sm-tiles-grid .sm-tiles-list .sm-tile-info .sm-tile-title {
   text-align: center;
}

/* Hide the gallery name icon */
.sm-tiles-grid .sm-tiles-list .sm-tile-info .sm-tile-info-icon {
   display: none;
}

/* Move the gallery name text to the left, to replace where the icon was */
.sm-tiles-grid .sm-tile-info p {
  padding-left: 0px !important;
}

/* Remove the dog-ears from the folders block */
sm-tiles-info-over .sm-tile-info .sm-tile-info-icon{
  display:none;
}

/* Add a drop-shadow to the thumbnails in SmugMug Layout */
.sm-gallery-tilesnav .sm-tile .sm-tile-content .sm-tile-overlay {
  box-shadow: 7px 7px 5px #888;
}

/* Set the caption link color to orange */
.sm-tile-info a {
  color: #f36f21 !important;  
}

/* Set the caption hover color to white*/
.sm-tile-info a:hover {
  color: #FFFFFF !important;
}

/* Transition the links so they fade in and out */
a { 
  -webkit-transition:color 0.25s ease-in;
  -moz-transition:color 0.25s ease-in;
  transition:color 0.2s ease-in;
}

/* Set the buttons to transition to the hover color slowly */
.sm-user-ui .sm-button-skin-accent, 
.sm-user-ui .sm-button,
.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,
.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

/* Transition the links under the photo */
.sm-button .sm-fonticon-small, 
.sm-user-ui .sm-button-label,
.sm-fonticon {
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2 ease-in;
}

/* Change the font of the gallery description */
.sm-gallery-description {
  font-size: 12px;
  color: #b7bac4;
  font-face: Habibi;
}

/* Set the caption link color to blue */
.sm-gallery-info a {
  color: #f36f21 !important;  
}

/* ================================================
   = SWAP IMAGE AND THUMBNAILS IN SMUGMUG LAYOUT  =
   ================================================ */
/* In SmugMug Layout, swap the thumbnails and the image.
    The image moves to the left and the thumbnails on the right.
    This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
  -webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

/* Move the image to the left. This code is required for FireFox */
.sm-gallery-smugmug .sm-gallery-image-container {
  float: left !important;
}

/* Move the comments section left as well */
.sm-gallery-content .sm-gallery-footer .sm-gallery-comments-container {
  margin-left: 0% !important;
}

/* Move the thumbnails slightly to the right to give some space between image and thumbs */
.yui3-u .sm-gallery-tiles-container .sm-gallery-tilesnav {
  margin-left: 5px !important;
}

/* Move the main image left so it lines up properly with the left side of the area */
.sm-gallery {
  margin-left: 0px !important;
}

/* Move the thumbnails to the right side of the page */
.sm-gallery-tiles-container .sm-gallery-tiles-bar,
.sm-gallery-tiles-container .sm-gallery-tilesnav {
  float: right;
}

/* Move the thumbnail pagination drop-down menu slightly up */
.sm-gallery-smugmug .sm-gallery-tiles-pagination {
  margin-top: -10px;
}

/* Ensure the top of the selected photo is aligned with the thubmanils */
.sm-tile-single.sm-tiles-uncropped .sm-tile-wrapper {
  margin-top: -1px !important;
}

/* Reduce the thumbnail margins */
.sm-gallery-smugmug .sm-gallery-tiles .sm-tile {
   margin: 1px;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: #FFFFFF !important;
}