/*
      Halloween Ideas site 
      Styles page
      Individual Case Project

      Author: Tracy Christenson
      Date: 2-4-2018
      Updated: 5-14-2019
      
      Recent Updates:
      1. Added style resets
      2. Changed navigation styles
      3. Added responsiveness to the styles
      4. Added new site heading and heading font.
      5. Adde new h4 heading styles

      Filename: HalloweenStyles.css
*/

/* RESET STYLES */

html, body, h1, form, fieldset, legend, ol, ul, li, div {
  margin: 0;
  padding: 0;
  border: 0;
}
header, nav, main, footer {
  display: block;
}
/* Makes HTML5 elements display as block elements in order to make pages compatible with older browsers. */

* {
  box-sizing: border-box;
}
/* Universal selector to tell browsers to include border and padding values when calculating size of elements. */

/* BODY STYLES */

body {
	font-family: Verdana, Arial, Garamond, sans-serif;
	font-size: 1.15em;
	background-color: #000000;
	color: #ffffff;
}
/* body text is white and slightly bigger than normal */

/* HEADER STYLES */

header {
  position: relative;
	width: 75%;
	margin: 20px auto;
	box-shadow: 10px 10px 12px  #ff8429, -10px -10px 12px #ffff10;
	text-align: center;
}

header img {
  height: 100%;
  width: 100%;
  }

header h1 {
  font-family: 'Permanent Marker', cursive;
  text-shadow: 1px 1px 0px #666;
  font-size: 5em;
  color: #94d639;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* NAVIGATION STYLES */	
nav ul {
  font-family: 'Gill Sans', 'Arial Black', 'Lucida Grande', sans-serif;
  font-size: 1.15em;
  letter-spacing: 1px;
	text-align: center;
	margin: 20px auto;
}

nav ul li {
  display: inline-block;
	width: 120px;
	height: 50px;
	background-color: #000;
	margin: 5px;
	box-shadow: -2px -2px 12px #94d639;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

nav ul li a:link {
  display: block;
  width: 120px;
	height: 50px;
  margin: 10px auto;
	color: #ff8429;
	text-decoration: none;
	font-weight: bold;
}
/*Link text is orange.  It doesn't appear on the buttons because I'm using images for link buttons.*/

nav ul li a:visited {
	color: #94d639;
	}
/*Link text is neon green after it's been visited.  It doesn't appear on buttons because I'm using images for link buttons.*/

nav ul li a:hover {
	color: #ffff10;
}
/*Link text is yellow when users point to it.  It doesn't appear because I'm using images for link buttons.  The shadow on the links is light blue when they point to it.  I tried a yellow shadow, but it didn't look very different from the orange one.  This stands out more.  This only appears on the lower part.  The upper shadow is covered by the image shadow.*/

nav ul li:hover {
	box-shadow: -2px -2px 12px #94d639, 0px 5px 12px  #ff8429;
	-ms-transform: translate(2px, 2px);
	-webkit-transform: translate(2px, 2px);
	transform: translate(2px, 2px);
}

/* MAIN CONTENT STYLES */

main {
	width: 80%;
	margin: auto;
}

section {
  overflow: hidden;
  }

article {
	padding: 10px;
	margin: auto;
}

article h1 {
  font-family: 'Permanent Marker', cursive;
  text-shadow: 1px 1px 0px #666;
  font-size: 3em;
  text-align: center;
	color: #94d639;
}
/* Heading text is neon green */

article h2 {
	text-align: center;
	color: #94d639;
}
/* Heading text is neon green and centered */

article h3 {
  text-align: center;
	color: #ff8429;
}
/* Small heading text is orange and centered, added 9-13-2019 */

article h4 {
	color: #94d639;
}
/* Small heading text is neon green and not centered, added 5-14-2019 */

article a {
	text-decoration: none;
}

/* Additional navigation styles, controls appearance of in-text links. */
article a:link {
	color: #ff8429;
}
/*Link text is orange.  It doesn't appear on the buttons because I'm using images for link buttons.*/

article a:visited {
	color: #94d639;
	}
/*Link text is neon green after it's been visited.  It doesn't appear on buttons because I'm using images for link buttons.*/

article a:hover {
	color: #ffff10;
}
/*Link text is yellow when users point to it.  It doesn't appear because I'm using images for link buttons.  The shadow on the links is light blue when they point to it.  I tried a yellow shadow, but it didn't look very different from the orange one.  This stands out more.  This only appears on the lower part.  The upper shadow is covered by the image shadow.*/

article a:active {
	text-decoration: underline;
}

.toplinks {
  font-weight: bold;
  }

article ul, article ol {
  margin-left: 40px;
}

article ul li, article ol li {
  padding-top: 10px;
}

article dl ol {
  margin-left: 80px;
  margin-top: 20px;
}

dt {
  font-weight: bold;
  color: #ff8b33;
  padding-top: 10px;
  padding-bottom: 10px;
  }
/* Styles for terms in a definition list - bold and orange, Added 9-25-19 */

.beginning {
	color: #ffff10;
	text-align: center;
}
/* Beginning quote text is yellow */

.headings { 
	font-weight: bold;
}

.slogan {
	text-align: center;
}

#locationMap {
  height: 400px;
  width: 600px;
  border: 1px solid #ffffff;
  margin: auto;
}
/* Container for map on web security page. */

hr {
	height: 8px; 
	background-color: #94d639; 
	width: 50%;
}
/*Horizontal rule is neon green */

/* IMAGE STYLES */

figure {
  margin: 20px;
  }

figcaption {
	color: #ffff10;
	text-align: center;
	font-size: 0.9em;
}
/* Figure caption text is yellow */

.centeredimg, iframe {
	display: block;
	margin: auto;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

/* FORM STYLES */

form {
  border: 1px solid #fff;
  margin: 20px auto; 
  padding: 2%;
  }
/* Adds border, padding, and margins to form. */

fieldset, label {
  margin: 5px;
}
/* Adds margins to fieldsets and labels. */

.expansion {
  overflow: hidden;
}
/* Makes form recognize floated elements. */

.questions {
  float: left;
  width: 50%;
}
/* Places questions on left. */

.feedback {
  float: right;
  width: 45%;
}
/* Places feedback on right. */

.letter {
  background-color: #fff;
  color: #000;
}
/* Makes form letter white with black writing. */

#curDay:invalid {
   background: #ffcccc;
}
/* Adds pink background to day field when the contents are invalid. */

#curYear:invalid {
   background: #ffcccc;
}
/* Adds pink background to year field when the contents are invalid. */

/* TABLE STYLES */

table {
	width: 90%;
	margin: auto;
	border: 1px solid #ffffff;
}
/* Table is centered horizontally and has a white border. */

td {
	padding: 5px;
	text-align: left;
	border: 1px solid #ffffff;
}
/* Table data aligns left and has a white border. */

th {
	padding: 5px;
	text-align: center;
	color: #94d639;
	border: 1px solid #ffffff;
}
/* Table headings are centered and green and have a white border. */

/* FOOTER STYLES */

footer {
	text-align: center;
	font-style: italic;
}

footer a:link {
	color: #ff8429;
}
/*Link text is orange.  It doesn't appear on the buttons because I'm using images for link buttons.*/

footer a:visited {
	color: #94d639;
	}
/*Link text is neon green after it's been visited.  It doesn't appear on buttons because I'm using images for link buttons.*/

footer a:hover {
	color: #ffff10;
}
/*Link text is yellow when users point to it.  It doesn't appear because I'm using images for link buttons.  The shadow on the links is light blue when they point to it.  I tried a yellow shadow, but it didn't look very different from the orange one.  This stands out more.  This only appears on the lower part.  The upper shadow is covered by the image shadow.*/

footer a:active {
	text-decoration: underline;
}

/* STYLES FOR DIFFERENT SCREEN SIZES */

/* DESKTOP AND LAPTOP SCREENS */

@media only screen and (max-width: 1350px) {
  header h1 {
  font-size: 4em;
  }
}


/* SMART PHONE SCREENS */

@media only screen and (max-width: 1080px) {
  header h1 {
  font-size: 3em;
  }
}

/* SMART PHONE SCREENS */

@media only screen and (max-width: 800px) {
  header h1 {
  font-size: 2em;
  }
}