/*
  STYLE GUIDE STYLING 
  Default styling for the style guide 
*/
body {
  font-family: helvetica;
  padding: 2rem;
}

section:not([id]) {
  margin: 1em 0;
  padding: 0.5em 0;
  border-top: 1px solid #333;
}

section h1 {
  font-size: 32px;
  margin-bottom: 0;
}

section h2 {
   font-size: 24px;
}

section h3 {
  margin-bottom: 0;
}

section p {
  margin-top: 0;
}

section code {
  background-color: #EEE;
  padding: 0.2em 0.75em;
}

.interativeElements {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #333;
  border: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.textElements {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #333;
  border: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.combinedElements {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #333;
  border: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.citation {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #333;
  border: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

img.productImage {
  width:800px;
  height: 533.5px;
}

/* 
  INTERACTIVE ELEMENTS -------------------
*/

/* Styling for the navigation button */
.button-nav {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #333;
  border: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.button-nav:hover, .button-nav:focus {
  background-color: #FF0F0F;
}

/* Styling for the In-text link */
.inText-link {
  color: #FF0F0F;
  
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.inText-link:hover, .button-nav:focus {
  color: #DBDBDB;
}

/* Styling for the submit/reset button */
.buttons-form {
  display: inline-block;

  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #FF7F7F;
  border: 0.25em;
  width: 100px;
  text-decoration: none;
  text-align: center;
  text-position: center;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

.buttons-form:hover, .button-nav:focus {
  background-color: #FF7F7F;
}

/* Styling for the input Text */
.formInput-name {
  
  text-decoration-color: grey;    
  color: #DBDBDB;
  background-color: white;


  /*border: 0.25em;*/

}

.buttons-form:hover, .button-nav:focus {
  background-color: #FF0F0F;;
}


/* 
  TEXT ELEMENTS -------------------
*/

/* Styling for headers */
.color1 {
  background-color: #FF0F0F;
  color: #FFF;
  text-align:center;
  height:20px; 
  width:100px;
  padding: 10px;
}

.color2 {
  background-color:#FF7F7F;;
  color: #FFF;
  text-align:center;
  height:20px;  
  width:100px;
  padding: 10px;
}

.color3 {
  background-color: #262524;
  color: #FFF;
  text-align:center;
  height:20px;  
  width:100px;
  padding: 10px;
}
.color4 {
  background-color:#DBDBDB;
  color: #FFF;
  text-align:center;
  height:20px;  
  width:100px;
  padding: 10px;
}






/* Styling for paragraphs */
.content{


}


/* Styling for listings */
.list{
  text-decoration-color: #FF0F0F;

}

.numberList{

}




/* 
  COMBINED ELEMENTS -------------------
*/
/* Styling for navigation */
nav.navigation {
  display: inline-block;

  /*padding: 0rem 1rem 0rem 1rem;*/
}

nav.navigation ul{
  background-color: #262524;
  text-align: center;
  /*background-color:  #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;*/   
  padding: 0rem;
  margin: 0rem;

}

nav.navigation ul li{
  background-color: #262524;
  list-style: none;
  float: left;
  height: 42px;
  width: 220px;
  padding: 0;
  margin: 0;

}

nav.navigation ul li a{
  text-decoration: none;
  text-align:center;
  display: block;
  padding: 12px 24px;
  background-color: #000000;
  text-shadow: 0px .2px 0px #fff;
  color: white;
  /*padding: 0.5em 0.75em;*/
  color: #FFF;
  background-color: #333;
  border: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

nav.navigation ul li a:hover{
  background-color: #FF0F0F;
  color: white;
  text-shadow: 0px 1px 0px #000;
}
.input-search{
  margin: 10px;

}