/* TEMPLATE OVERRIDES */
/* 
 * https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template
 * 
 * Grid:
 * https://www.linelab.org/tutorials/joomla-4-cassiopeia-template-customization-child-template
 */
 
.header, .footer {
    background-color: #bdbb93; 
    background-image: none;
    color: #000000;
}

.container-header .navbar-brand a {
    color: #000000;
}

a, a:not([class]) {
    text-decoration: none;
}

.site-grid {
    background-color: #efedbb; 
}
 
body {
  background-color: #efedbb; 
}

/* Search and menu */
.card {
    background-color: #f5f5f5;
}

input[type="search"] {
    border-radius: 15px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
    padding: 4px 14px 4px 14px;
}

.btn-primary {
    background-color: #0088cc;
    border: 1px solid #bbbbbb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    padding: 4px 10px 4px;
}

ul.nav li {
  text-indent: -2em;
  margin-left: 2em;
}

.footer a, .item-page a, .navigation a, .nav a {
  color: #4A7BE6 !important;
}

/* MISC STYLES */
.dc-clear {
    clear:both;
}

.dc-thumbnail {
    max-width: 25% !important;
}

/* MEDIA-SPECIFIC STYLES */

@media ( max-width: 800px ) {
    
    .dc-66-men-col1 {
        width: 40%;
    }
    
    .dc-image-col {
        width: 20%;
    }

    
    img {
        max-width: 100%;
        max-height: 100%;
    }
}

@media ( min-width: 800px ) {
    /* .dc-left, .dc-right {
        max-width:  60%;
    } */
    
    .dc-66-men-col1 {
        width: 176px;
    }
    
    .dc-66-men td:first-child img {
        padding: 3px 3px 0 3px;
        width: 150px;
    }
    
    img {
        max-width: 100%;
        max-height: 100%;
    } 
    
    .dc-left {
        max-width: 55%;
    }
    
    .dc-image-col {
        width: 155px;
    }
    
     
    .dc-contents td img {
        width: 150px;
    }
}

/* LOCAL HISTORY */


.dc-contents td {
    vertical-align: middle;
    padding-bottom: 1.5em;
    padding-right: 1em;
}

.dc-contents a {
    display: block;
    padding-right: 1.5em;
}


.dc-66-men {
    border-collapse: collapse; 
    margin-top: 1em; 
    table-layout: fixed; /* this is the key to the browser honouring the percentage column widths */
    width: 100%;
}


.dc-66-men td {
    border: 1px solid #000000;
    padding: 10px;
    vertical-align: top;
}



h2.dc-66-men-name, p.dc-66-men-name  {
    color: #df1616; 
}

p.dc-66-men-name {
    font-size: medium;
    font-weight: bold;
    text-align: center; 
}



.dc-66-men-poppy {
    display: inline !important;
    width: 40px !important;
}


.dc-localhist-image-wrapper {
    display: table;
}


.dc-localhist-image {
    display:      block;
}

.dc-localhist-image-caption {
    caption-side:       bottom;
    color:              #666666;
    display:            table-caption;
    font-family:        Verdana, sans-serif;
    font-size:          x-small;
    line-height:        normal;   
    padding-top:        0.5em;
}

.dc-localhist-image-wrapper .dc-localhist-image-caption {
    margin-bottom: 0; /* override defauly 9px margin in Joomla protostar template */
}

.dc-localhist-image-caption a {
    color:              #666666;
}

table.dc-66-men .dc-localhist-image-caption {
    display:            block !important;
}

.dc-localhist-main {
	margin-left: 320px;
}

ul.dc-localhist-links {
/*    clear: both;*/
    list-style-type: none;
    overflow: hidden;
    padding-left: 1.2em;
    text-indent: -1.2em;
}
ul.dc-localhist-links li {
    margin-bottom: 1.2em;
}
ul.dc-localhist-links li:before {
    content:            "➢ "; 
    display: block;
    float: left;
    width: 1.2em;
}

/*  IMAGES  */


.dc-image-right, .dc-right {
    float:              right;   
    margin-left:         10px;
    margin-bottom:       10px;
}
.dc-image-left, .dc-left {
    float:              left;   
    margin-right:         10px;
    margin-bottom:       10px;
}





/* LIGHTBOX */
/* 
 * Example:
 * https://southoxfordhistory.org.uk/interesting-buildings-in-grandpont-and-south-oxford/paper-roofed-houses-on-weirs-lane
 */
.dc-lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
  overflow:scroll;
}

.dc-lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  /*max-height: 80%;*/
  margin-top: 2%;
}

.dc-lightbox p {
    background-color: #EFEDBB;
    margin-left: 5%;
    margin-right: 5%;
    max-width: 90%;
    padding: .5em 1em .5em 1em;
  text-align: left;
}

.dc-lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

.dc-lightbox img:hover {
    cursor: pointer;
}