/*
   Automated Resume Page (Style Sheet) - Currently Written for Dustin Jablonski
   Filename: styles.css

   Author: Dustin Jablonski
   Date: 8/1/18
   "Your Own Page" Assignment for CS125 CCC Summer'18 - Week 5
*/

/*set font size*/
html {
   font-size: 14px;
}

/*reset styles*/
article, body, div, footer, header, h1, h2, h3, h4, h5, p {
   border: 0;
   padding: 0;
   margin: 0;
}

/*page background, container, and font family*/
body {
   background-color: rgb(255, 255, 240);
   text-align: left;
   font-family: 'Noto Serif', "Times New Roman", Times, serif;
}

#container {
   background-color: rgb(247, 218, 212);
   max-width: 960px;
   margin: 0 auto;
   border: 2px solid rgba(0, 0, 0, 0.5);
   box-shadow: 10px 10px 7px rgba(128, 128, 128, 1); /*container shadow*/
}

/*page content*/
header {
   background-color: rgba(185, 103, 85, .75);
   /* text-decoration: underline; */ /*suggestion from week 4 feedback*/
   font-style: italic;
   border: 0.5em rgba(128, 128, 128, 1);
   border-style: none none double none;
   padding: 1em 3em; /*suggestion from week 4 feedback*/
}

h1 {
   text-shadow: 2px 2px 1px rgba(128, 128, 128, 1); /*header shadows*/
}

h2 {
   padding: 0.5em 0;
   font-size: 1.7em;
}

h3 {
   font-size: 1.5em;
   padding: 0.3em;
}

h4 {
   font-size: 1.2em;
   font-style: italic;
   text-decoration: underline;
   margin: 0 0.25em;
}

h5 {
   margin: 0.5em 0;
   font-size: 1em;
}

/*suggestion from week 4 feedback*/
#aboutme p {
   padding: 0.2em;
}

.space {
   line-height: 2em;
}

.entry {
   margin: 1em 0 1em 1em;
}

/*pesudu selector*/
.entry h5:first-letter {
   font-size: 1.5em;
}

#aboutme {
   padding: 1em 0;
   width: 90%;
   max-width: 864px;
   margin: 0 auto;
}

/*column height fix based on w3c guide*/
#column-container {
   display: table;
   width: 90%;
   max-width: 864px;
   margin: auto;
   margin-bottom: 1em;
   box-shadow: 5px 5px 3px rgba(128, 128, 128, 1);
}

#ehistory, #whistory {
   width: 50%;
   display: table-cell;
   border-color: rgba(128, 128, 128, 1);
   border-style: solid;
   padding: 0.5em;
}

.placeholder {
   font-style: italic;
   color: rgba(128, 128, 128, 1);/*grey*/
}

footer {
   clear: both;
   text-align: right;
   font-style: italic;
   background-color: rgba(102, 102, 153, 1);
   color: rgba(211, 211, 211, 1);
   border: 0.5em rgba(128, 128, 128, 1);
   border-style: double none double none;
   padding: 1em; /*suggestion from week 4 feedback*/
}

/*print style rules*/
@media print {
   article, body, div, footer, header, h1, h2, h3, h4, h5, p {
      color: rgb(0, 0, 0);
      background-color: rgb(255, 255, 255);
      text-shadow: 0 0 0 rgba(255, 255, 255, 1); /*remove shadows from print*/
   }

   body, #container, header, footer, article, #ehistory, #whistory{
      max-width: 100%;
      border: none;
      box-shadow: 0 0 0 rgba(255, 255, 255, 1); /*remove shadows from print*/
   }

   #ehistory, #whistory {
      width: 100%;
      float: none;
   }
}

/*mobile & small display style rules*/
@media only screen and (max-width: 600px) {
    #ehistory, #whistory { 
        display: block;
        width: 100%;
    }
}