/* MCM's home page style sheet */

/*
** Some elements based on "Deviation" style sheet by Free CSS Templates
** http://www.freecsstemplates.org
** Released for free under a Creative Commons Attribution 2.5 License
*/

/* for overall style */

body {
   margin: 0;
   padding: 0;
   background: #FFFDEA; /* ivory */
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #464032; /* taupe */
}

figure{
    display: inline-block;
}

h1, h2, h3 {
   margin: 0;
   padding: 0;
   font-weight: normal;
   color: #A42903; /* sangria */
}

h1 {
   font-size: 2em;
}

h2 {
   font-size: 2.4em;
}

h3 {
   font-size: 1.6em;
}

p, ul, ol {
   margin-top: 0;
   line-height: 150%;
}

a, a:link, a:visited {
   text-decoration: none;
   color: #A7430F; /* rust */
   outline: none;
}

a:hover {
   text-decoration: underline;
   color: #8A8A8A; /* suva grey */
}

a:active {
   font-style: italic;
}

.code {
   font-family: Monospace;
}

/* wrapper (for the body of the page) */

#wrapper {
   width: 960px;
   margin: 0 100px; /* removed auto left/right (replaced with 100px) because page shifts if scrollbar appears/disappears */
   padding: 0;
}

/* header */

#header {
   width: 940px;
   height: 148px;
   margin: 0 auto;
}

/* logo */

#logo {
   height: 90px;
   padding-top: 50px;
   background: url('images/ColeMiller.JPG') no-repeat left 20px;
}

#logo h1 {
   margin-top: -20px;
   float: left;
   padding-left: 120px;
   letter-spacing: -1px;
   text-transform: lowercase;
   font-size: 3.8em;
}

#logo p {
   margin-top: -20px;
   float: left;
   padding: 26px 0 0 10px;
   font: normal 16px Georgia, "Times New Roman", Times, serif;
   font-style: italic;
   color: #5E4E38; /* brown derby */
}

#logo h2 {
   float: left;
   padding-left: 120px;
   font: normal 14px Georgia, "Times New Roman", Times, serif;
   color: #5E4E38; /* brown derby */
}

/* menu */

#menu {
   width: 940px;
   height: 36px;
   margin: 0 auto;
   padding: 0;
   background: url(images/menubar.jpg) no-repeat left top;
}

#menu ul {
   margin: 0px 0px 0px 10px;
   padding: 0;
   list-style: none;
   line-height: normal;
}

#menu li {
   float: left;
}

#menu a {
   display: block;
   height: 26px;
   margin-bottom: 10px;
   padding: 10px 20px 0px 20px;
   text-decoration: none;
   text-align: center;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   color: #FFFFFF; /* white */
   border: none;
}

#menu a:hover {
   background: #E0D3B3; /* coconut cream */
   text-decoration: none;
}

#menu .current_page_item a {
   background: #E0D3B3; /* coconut cream */
   color: #2A1F0B; /* baker's chocolate */
}

/* sidebar */

#sidebar {
   float: left;
   width: 280px;
   padding: 0px 0px 0px 10px;
   color: #787878; /* grey */
}

#sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

#sidebar li {
   margin: 0;
   padding: 0;
   border-right: 1px solid #E9E3CB; /* orange white */
}

#sidebar li li {
   line-height: 30px;
   border-bottom: 1px dotted #E5E0C6; /* half spanish white */
   margin: 0px 30px;
   border-right: none;
}

#sidebar li li span {
   display: block;
   margin-top: -20px;
   padding: 0;
   font-size: 11px;
   font-style: italic;
}

#sidebar h2 {
   padding-left: 30px;
   padding-top: 6px;
   padding-bottom: 6px;
   background: #E9E3CB; /* orange white */
   letter-spacing: -0.5px;
   font-size: 1.8em;
   color: #464032; /* taupe */
}

#sidebar p {
   margin: 0 0px;
   padding: 5px 30px 15px 30px;
   text-align: justify;
}

/* special font color exception for links in sidebar */

a.darklink:link, a.darklink:visited {
   color: #464032; /* taupe */
}

a.darklink:hover {
   text-decoration: underline;
   color: #8A8A8A; /* suva grey */
   }

/* main content */

#page {
   width: 940px;
   margin: 0 auto;
   padding: 0;
}

#content {
   float: right;
   width: 620px;
   padding: 0;
}

.post {
   margin-bottom: 15px;
}

.post .title {
   margin-bottom: 10px;
   letter-spacing: -0.5px;
   color: #A7430F; /* rust */
   border-bottom: 1px solid #E9E3CB; /* orange-white */
}

/* to make this work across all browsers, I had to resort to tables... */

.post table.blogtitle {
   border-bottom: 1px solid #E9E3CB;
   border-spacing: 0px;
   margin-bottom: 10px;
   width: 620px;
}

.post table.blogtitle td {
   padding: 0px;
   vertical-align: baseline;
}

.post td.btitle {
   color: #A7430F;
   font-size: 2.4em; /* like h2 */
   letter-spacing: -0.5px;
}

.post td.bdate {
   text-align: right;
   font-weight: bold;
}

.post .entry {
   padding: 0px 0px 20px 0px;
   padding-bottom: 20px;
   text-align: justify;
}

.post ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.post .bullets {
   list-style: disc;
   list-style-position: inside;
}

.post a:link, .post a:visited {
   color: #464032; /* taupe */
}

.post a:hover {
   text-decoration: underline;
   color: #8A8A8A; /* suva grey */
}

.post .date {
   font-weight: bold;
   /* text-decoration: underline; */
}

.post p {
   text-align: justify;
}

p.break { /* used in gallery.html to separate multiple elements in one entry */
	padding-top: 15px;
}

/* special font color exception for news items */

a.news:link, a.news:visited {
   color: #A7430F; /* rust */
}

a.news:hover {
   text-decoration: underline;
   color: #8A8A8A; /* suva grey */
   }

/* and boldface for papers */

a.paper:link, a.paper:visited {
   font-weight: bold;
   color: #A7430F; /* rust */
}

a.paper:hover {
   text-decoration: underline;
   color: #8A8A8A; /* suva grey */
}

.info {
   margin-bottom: 15px;
}

.info .title {
   margin-bottom: 10px;
   letter-spacing: -0.5px;
   color: #A7430F; /* rust */
   border-bottom: 1px solid #E9E3CB; /* orange-white */
}

.info p {
   text-align: justify;
}

.info a:link, .info a:visited {
   color: #A7430F; /* rust */
}

.info a:hover {
   text-decoration: underline;
   color: #8A8A8A; /* suva grey */
}

/* footer */

#footer {
   width: 940px;
   height: 50px;
   margin: 0 auto;
   padding: 0px 0 15px 0;
   border-top: 4px solid #EBE6D1; /* orange white */
   font-family: Arial, Helvetica, sans-serif;
}

#footer p {
   margin: 0;
   padding-top: 20px;
   line-height: normal;
   font-size: 10px;
   text-transform: uppercase;
   text-align: center;
   color: #444444; /* charcoal */
}

#footer a:link, #footer a:visited {
   color: #A7430F; /* rust */
}

#footer a:hover {
   text-decoration: underline;
   color: #8A8A8A; /* suva grey */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 5vw);
    grid-gap: 15px;
}

.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-list-small {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 auto;
  text-align: center;
  max-width: 640px;
  padding: 0;
}

.image-list-small li {
  display: inline-block;
  width: 181px;
  margin: 0 12px 30px;
}


/* Photo */

.image-list-small li > a {
  display: block;
  text-decoration: none;
  background-size: cover;
  background-repeat: no-repeat;
  height: 137px;
  margin: 0;
  padding: 0;
  border: 4px solid #ffffff;
  outline: 1px solid #d0d0d0;
  box-shadow: 0 2px 1px #DDD;
}

.image-list-small .details {
  margin-top: 13px;
}


/* Title */

.image-list-small .details h3 {
  display: block;
  font-size: 12px;
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-list-small .details h3 a {
  color: #303030;
  text-decoration: none;
}

.image-list-small .details .image-author {
  display: block;
  color: #717171;
  font-size: 11px;
  font-weight: normal;
  margin: 0;
}