/* 
Styles for Mauricio Esguerra's Homepage
Author: Mauricio Esguerra Neira (PhD)
Date:   May 17, 2019
Update: Saturday, October 1, 2022
*/


/* body */
body {
    font:  1.0em Helvetica, sans-serif, "Lucida Grande", "Lucida Sans", arial,
    serif, courier;
    background: rgb(255,255,255);
    color:  rgb(30,30,30); /* This is the foreground letters color */
    padding-top:  4.5rem;
    padding-left: 0.1rem;
    float: none;
}

/* Images */
img {
    border: 0pt;
    margin: 0% 0% 0% 0%;
    max-width:  100%;
    max-height: 100%;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 480px;
}

aside{
    float: left;
    width: 100px;
}

aside li {
    /*      color: rgba(000,000,000, 0.9); */
    /*      list-style: none; */
    /*      font-size: 0.9em; */
    /*      margin:10px 2px 10px 2px; */
}

aside li a:link, aside li a:visited {
    color: rgba(000,000,000,0.9);
    border:none;
    text-transform: none;
}

article {
    /*    float: right; */
    margin-left: 120px;
}

/* Code Boxes */
pre{
    display:block;
    border:1px solid #000;
    border-radius: 5px;
    padding:2em;
    /*background-color:#ddd;*/
    background-color: #f7f8ff; /* ccf any colour's okay,
        so long as it's different to the page-background
        (for ease of recognition) and contrast to the text */
    color: #000; /* likewise the background-color comment */
    /*color:black;*/
    margin: 4px 20px 4px 20px;
}

code  {font-family: consolas, courier, monospace;
    font-size: 1em;
    line-height: 1.2em;
    white-space: pre;
    background-color: #fff8dc; /* ccf any colour's okay,
       so long as it's different to the page-background
       (for ease of recognition) and contrast to the text */
    color: #000; /* likewise the background-color comment */
    /*       border: 1px solid #666; */
    border: 1px none #666;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em; /* just in case */
    padding: 1em;
    margin: 1em 1em;
    width: 90%; /* or whatever you prefer */
    float: left;
}



/*------------
  LINKS
-------------*/
a:link,
a:visited {
    color:rgb(10,128,225);
    color: rgba(10,128,225,.9);
    /*    border-bottom: 2px dotted #EAE7E7;  */
    /*    border-bottom: 2px dotted rgba(255,255,255,.4);  */
    padding: 1px;
    text-decoration: none;
    -webkit-transition: background-color .3s linear;
}
a:focus {
    color: orange;
}
a:hover {
    background-color: rgb(40,40,40);
    background-color: rgba(10,128,225,.7);
    color: #f6eef4;
}


/*---------------------------------------------
        ADDITIONAL STYLES FOR PORTFOLIO
-----------------------------------------------*/
#imagegallery section figure {
    position:relative;
    float:left;
    margin:5px;
    width:240px; 
    height:240px;
    border:1px solid #333;
    overflow:hidden;
    background: #fff;
    padding: 0px;
}
#imagegallery section figure figcaption {
    position:absolute;
    bottom:0;
    left:0;
    opacity: .55;
    margin-bottom:-120px;
    -webkit-transition: margin-bottom;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: margin-bottom;
    -moz-transition-duration: 400ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: margin-bottom;
    -o-transition-duration: 400ms;
}
#imagegallery section figure:hover figcaption {
    margin-bottom:0px;
}
#imagegallery section figcaption {
/*    width:200px; */
    height:100px;
    background:#111;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
}
#imagegallery section figcaption h3 {
    margin: 1px 1px 1px 1px;
    text-shadow: #000 0px 2px 0px;
}
#imagegallery section figcaption p {
    margin: 0 1px;
    color: #ddd;
    line-height: 18px;
    font-size: 14px;
    text-shadow: #000 0px 2px 0px;
}
/* CSS animated Tabs */
#imagegallery section {
    -webkit-transition: opacity;
    -webkit-transition-duration: 800ms;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: opacity;
    -moz-transition-duration: 800ms;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: opacity;
    -o-transition-duration: 800ms;
    opacity:0;
    z-index: 9;
}
#imagegallery :target {
    opacity:1;
    z-index: 10;
}
#gallery1, #gallery2, #gallery3, #gallery4, #gallery5 {
    position: absolute;
}
#imagegallery nav {
    width: 100%;
}
#imagegallery nav ul {
    padding: 11px 20px;
}
#imagegallery nav li {
    display: inline;
    margin-right: 7px;
}
#imagegallery nav li a {
    font-size: 16px;
    border-radius: 0px;
    padding: 1px 7px;
}
#imagegallery  nav li a:hover {
    border:1px solid #aaa;
}
#imagegallery nav li a:active {
    background:#ccc;
    border:1px solid #888;
}



/* The grid: Four equal columns that float next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
  }
  
  /* Style the images inside the grid */
  .column img {
    opacity: 0.8; 
    cursor: pointer; 
  }
  
  .column img:hover {
    opacity: 1;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The expanding image container */
  .container {
    position: relative;
    display: none;
  }
  
  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }
  
  /* Closable button inside the expanded image */
  .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: rgb(0, 0, 206);
    font-size: 35px;
    cursor: pointer;
  }