/* Site design and programming by Michael LaFleur (michael at mlafleur.dev) */

.contact                {   padding: 10px;
                        }

.contact td             {   padding: 5px;
                        }

.img-portfolio          {   vertical-align: top;
                        }

.nav-small              {   font-family: Arial, Helvetica, sans-serif;
                            font-size: smaller;
                            text-align: right;
                            text-transform: uppercase;
                            vertical-align: middle;
                            width: 100%;
                        }

.sitemap                {   font-family: Helvetica, Arial, sans-serif;
                            padding: 10px;
                        }

.sitemap td             {   padding: 2px;
                        }

.sitemap-label          {   display: block;
                            padding-right: 5px;
                            text-align: right;
                            vertical-align: top;
                        }

/* Flex container code source: https://www.w3schools.com/cssref/css3_pr_flex.php */

.about-flex-container   {   display: flex;
                            flex-wrap: wrap;
                            margin: 0px auto;
                        }

.about-flex-col-left    {   flex: 70%;
                        }

.about-flex-col-right   {   flex: 30%;
                        }

.contact-flex-container {   display: flex;
                            flex-wrap: wrap;
                            margin: 0px auto;
                        }

.index-flex-container   {   display: flex;
                            flex-wrap: wrap;
                            margin: 0px auto;
                        }

.index-flex-col-all     {   background-color: #CCCCCC;
                            border: 1px solid black;
                            color: white;
                            flex: 100%;
                            font-weight: bold;
                            letter-spacing: 2.5em;
                            text-align: center;
                            text-transform: uppercase;
                        }

.index-flex-col-left    {   border: 1px solid black;
                            flex: 33%;
                            padding: 0px;
                        }

.index-flex-col-center  {   border: 1px solid black;
                            flex: 33%;
                            padding: 0px;
                        }

.index-flex-col-right   {   border: 1px solid black;
                            flex: 33%;
                            padding: 0px;
                        }

.index-flex-col-header  {   background-image: linear-gradient(to bottom, rgba(51,51,51,1), rgba(51,51,51,0));
                            color: #333333;
                            font-family: Arial, Helvetica, sans-serif;
                            font-weight: bold;
                            letter-spacing: 1em;
                            padding: 1px !important;
                            text-align: center;
                            text-transform: uppercase;
                        }

.index-flex-col-content {   background-color: white;
                            padding: 0px 20px !important;
                        }

.sitemap-flex-container {   display: flex;
                            flex-wrap: wrap;
                            margin: 0px auto;
                        }

.sitemap-flex-col-left  {   flex: 60%;
                        }

.sitemap-flex-col-right {   flex: 40%;
                        }

/* Responsive layout - makes a one column-layout instead of a three-column layout */
@media (max-width: 750px) {
  .about-flex-col-left, .about-flex-col-right, .index-flex-col-left, .index-flex-col-center, .index-flex-col-right, .sitemap-flex-col-left, .sitemap-flex-col-right {
    flex: 100%;
  }
  
  .index-flex-col-all {
      letter-spacing: 1em;
  }
  
  .profile_header {
      font-size: small !important;
      letter-spacing: normal !important;
  }
}

@media (max-width: 1068px) {
  .index-flex-col-header {
      letter-spacing: normal;
  }
}

*                       {   box-sizing: border-box;
                        }

body                    {   background-image: url("images/index/topo.png");
                        }
                        
#wrapper                {   background: white;
                            border-radius: 20px;
                            margin: 60px auto;
                            padding: 40px;
                            width: 90%;
                        }
                        
header                  {
                        }

nav                     {
                        }

main                    {
                        }

aside                   {   background-color: #F7F5EB;
                            border: 4px solid #ECE8DD;
                            border-radius: 20px;
                            display: block;
                            float: right;
                            font-family: Arial, Helvetica, sans-serif;
                            font-size: 0.875em;
                            margin: 10px;
                            max-width: 360px;
                            padding: 20px;
                            text-align: center;
                        }

footer                  {   clear: both;
                            text-align: center;
                        }

#map_pin                {   margin: 0px 10px 0px 0px;
                            vertical-align: middle;
                        }

#avatar                 {   border: 1px solid black;
                            border-radius: 20px;
                        }

#featured_table         {   border: 4px solid #F7F5EB;
                            border-radius: 20px;
                            padding: 20px;
                        }

#featured_image         {   border: 1px solid black;
                            float: left;
                            margin: 0px 20px 20px 0px;
                        }

.aed_image              {   display: block;
                            border: 4px solid #f9f3cf;
                            margin-left: auto;
                            margin-right: auto;
                            height: auto;
                            max-width: 80%;
                        }

.fs_image               {   display: block;
                            border: 4px solid #f9f3cf;
                            margin-left: auto;
                            margin-right: auto;
                            height: auto;
                            max-width: 100%;
                        }

.gis_image              {   display: block;
                            border: 4px solid #f9f3cf;
                            margin-left: auto;
                            margin-right: auto;
                            height: auto;
                            max-width: 100%;
                        }

.grid_image             {   display: block;
                            background-color: black;
                            border: 4px solid #f9f3cf;
                            margin-left: auto;
                            margin-right: auto;
                            height: auto;
                            max-width: 80%;
                            padding: 10px 40px;
                        }

.trails_image           {   display: block;
                            border: 4px solid #f9f3cf;
                            margin-left: auto;
                            margin-right: auto;
                            height: auto;
                            max-width: 100%;
                        }

.polaroid               {   /* Box shadow code source: https://www.w3schools.com/css/css3_shadows_box.asp */
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            background-color: white;
                            border: 2px solid #F7F5EB;
                            max-width: 500px;
                            padding: 20px;
                            text-align: center;
                        }

.polaroid_left          {   /* Box shadow code source: https://www.w3schools.com/css/css3_shadows_box.asp */
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            background-color: white;
                            border: 2px solid #F7F5EB;
                            display: inline;
                            float: left;
                            margin: 40px;
                            max-width: 500px;
                            padding: 20px;
                            text-align: center;
                        }

.clear                  {   clear: both;
                        }

.profile_header         {   color: #C8C6A7;
                            font-family: "Times New Roman", Times, serif;
                            font-weight: bold;
                            letter-spacing: 2px;
                            text-transform: uppercase;
                            white-space: nowrap;
                        }
                            
.course_category        {   background-color: #435560;
                            border: 1px solid #435560;
                            color: white;
                            font-family: "Times New Roman", Times, serif;
                            letter-spacing: 4px;
                            margin: 60px 0px 0px 0px;
                            padding: 20px;
                            text-transform: uppercase;
                            width: 100%;
                        }

.course_title           {   background-color: #C8C6A7;
                            border: 1px solid black;
                            color: black;
                            font-family: Arial, Helvetica, sans-serif;
                            font-weight: bold;
                            margin: 0px;
                            padding: 10px 20px 10px 40px;
                            width: 100%;
                        }

.course_description     {   background-color: #F7F7E8;
                            border: 1px solid black;
                            color: black;
                            font-family: Arial, Helvetica, sans-serif;
                            font-size: 0.875em;
                            margin: -1px 0px -1px 0px;
                            overflow: hidden;
                            padding: 10px 20px 10px 60px;
                            width: 100%;
                        }

.gt                     {   color: #888888;
                            font-weight: bold;
                        }

a:link,
a:visited               {   color: #CC6600;
                            text-decoration: none;
                        }

a:hover                 {   color: #FF9900;
                            text-decoration: none;
                        }

/* Blockquote code source: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
blockquote {
  color: #AAAAAA;
  font-size: 1.5em;
  font-style: italic;
  margin: 10px;
  padding: 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #CDC7BE;
  content: open-quote;
  font-weight: bold;
}

blockquote:after {
  color: #CDC7BE;
  content: close-quote;
  font-weight: bold;
}

blockquote p {
  display: inline;
}

.code {
  background-color: #f9f3cf;
  border: 4px solid #f9f3cf;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-width: 80%;
  padding: 10px 40px;
}

figcaption              {   font-style: italic;
                            padding-top: 10px;
                        }

figure                  {   display: table;
                            max-width: 100%;
                            text-align: center;
                        }

img                     {
                            border: 0px;
                            height: auto;
                            max-width: 100%;
                        }

input[type="checkbox"]  {   vertical-align: middle;
                        }
                        
input[type="email"],
input[type="text"]      {   width: 100%;
                        }

label                   {   vertical-align: middle;
                        }

li                      {   padding-bottom: 3px;
                            padding-top: 3px;
                        }

p                       {   font-family: Helvetica, Arial, sans-serif;
                            font-size: 1rem;
                            font-weight: normal;
                            line-height: 1.5;
                        }

pre                     {   overflow-x:auto;
                            white-space:pre-wrap;
                        }

td label                {   display: block;
                            padding-right: 5px;
                            text-align: right;
                            vertical-align: top;
                        }

ul                      {   font-family: Helvetica, Arial, sans-serif;
                            list-style-type: circle;
                            padding: 5px 0px 5px 25px;
                        }

ul ul                   {   list-style-type: circle;
                        }

ul ul ul                {   list-style-type: disc;
                        }

/* Media resize code source: https://www.experts-exchange.com/questions/27778680/HTML5-and-CSS3-question-positioning-aside-on-resize.html */
@media all and (max-width:900px) { 
    aside {
      clear: both;
      display: block;
      float: none;
      width: 100%;
    }
    
    #featured_image {
      float: none;
    }
}

@media all and (max-width:1350px) { 
    .polaroid_left {
      display: block;
      float: none;
    }
 } 

/* Accordion code source: https://www.w3schools.com/howto/howto_js_accordion.asp */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  font-weight: bold;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}