/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */

.tm-headerbar .uk-panel {
    max-width: 620px;
    margin-right: 0;
    float: left;
}

.tm-container {
    margin: 5px auto;
}

.tm-headerbar .tm-logo {
    float: left;
    margin-right: 5px;
}

.tm-grid-block, .tm-block-bottom, .tm-grid-block + .tm-content, .tm-top-block + .tm-middle {
    margin-top: 0px;
}

.uk-navbar {
    background: #fff;   
    background-image: -webkit-linear-gradient(top, #fff, #f6f6f6);
    background-image: linear-gradient(to bottom, #fff, #f6f6f6);
}

.tm-sidebar-a {
  margin-top: 10px;
}

.uk-article:nth-child(n+2) {
    margin-top: 10px;
}

.tm-footer {
    margin-top: 10px;
}

.tm-sidebar-b {
  margin-top: 10px;
}

.tm-content {
   margin-top: 10px;
}

.uk-navbar-nav > li > a {
    color: rgba(0, 0, 0, 0.9);
}

.uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li.uk-open > a {
    background-color: #a15e56;
}

.uk-navbar-nav > li > a {
    padding: 0 10px;
    font-size: 12px;
}

.uk-navbar-toggle {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
}


body {
    background: url("../../images/bg-overlay.png") repeat scroll 0 0 #f0f0f0;
}
   
/* Styling for the container that allows text to wrap around */
.image-container {
    width: 300px; /* Explicitly set width to match image */
    float: right; /* Float the container itself to make text wrap around it */
    margin-left: 15px; /* Space between the image container and text to its left */
    margin-bottom: 15px; /* Space below the image container */
    position: relative; /* Needed if you want to perfectly align caption inside, though image-wrapper handles most */
}

/* New: Wrapper for the image and caption */
.image-wrapper {
    position: relative; /* This is key! It creates a positioning context for the absolute caption */
    overflow: hidden;   /* Hides any caption content that might overflow its bounds */
    /* Ensure the wrapper takes the exact dimensions of the image */
    width: 100%; /* Will be 300px because .image-container is 300px */
    height: 450px;
}

.caryn-maitland-img {
    display: block; /* Ensures no extra space below the image */
    width: 100%;    /* Makes the image fill its wrapper */
    height: auto;   /* Maintain aspect ratio */
    /* No float here, the .image-container is floated */
    /* No margin-left here, the .image-container handles it */
}

.image-caption {
    position: absolute; /* Take the caption out of normal flow to place it over the image */
    bottom: 0;          /* Position at the bottom of the image-wrapper */
    left: 0;            /* Align to the left of the image-wrapper */
    width: 100%;        /* Make it span the full width of the image-wrapper */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent dark background */
    color: white;       /* White text for readability */
    padding: 10px;      /* Padding inside the caption box */
    font-size: 0.9em;   /* Adjust font size */
    text-align: center; /* Center the text within the caption box */

    /* --- Hover effect properties --- */
    opacity: 0;         /* Initially hidden */
    visibility: hidden; /* Also hidden for accessibility */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

/* Show the caption when hovering over the image-wrapper */
.image-wrapper:hover .image-caption {
    opacity: 1;         /* Fully visible */
    visibility: visible; /* Make visible */
}

/* Optional: If the main content div that contains everything doesn't clear its floats at the end,
   you might need a clearfix on it or on its parent. */
/* Example (if your outer <div> had a class like 'main-content-wrapper'):
.main-content-wrapper::after {
    content: "";
    display: table;
    clear: both;
}
*/