/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

* {
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
}



      body {
         background: #fff;
         color: #222;
         font: 12px/20px 'Helvetica Neue', Arial, sans-serif;
         margin: 0;
         padding: 0;
         margin-bottom: 20px;
      }

      h1 {
         margin-top: 25px;
         margin-left: 20px;
      }

      /*SYLING FOR HEADER*/

      #header {
         position: relative;
      }

      #headline {
         width: 75%;
         height: auto;
         position: absolute;
         top: 20%;
         left: 12%;
         background-color: rgba(202,235,242,0.8);
         font-size: 30px;
         line-height: 1.2;
         text-align: center;
         padding: 15px;
      }

      #subhead {
         width: 60%;
         height: auto;
         position: absolute;
         top: 50%;
         left: 20%;
         background-color: rgba(202,235,242,0.8);
         font-size: 24px;
         line-height: 1.1;
         padding: 10px;
         text-align: center;
      }

      /*SYLING FOR TEXT*/

      .story {
         background-color: #f8f8f8;
         color: #505050;
         padding: 20px;
         margin-top: 20px;
         width: 75%;
         margin-left: auto;
         margin-right: auto;
         box-shadow: 5px 5px #caebf2;
      }

      #byline {
         margin-top: 20px;
         margin-left: 157px;
         margin-bottom: 50px;
         font-size: 18px;
      }

      .paragraph {
         margin: 0px 157px 20px;
         font-size: 18px;
      }

      /*STYLING FOR VIDEO*/
      #video {
         width: 50%;
         background-color: #f8f8f8;
         margin-left: auto;
         margin-right: auto;
         box-shadow: 5px 5px #caebf2;
         text-align: center;
         margin-top: 15px;
      }

      .block-quote-right {
         width: 40%;
         height: auto;
         float: right;
         font-size: 30px;
         line-height: 1.2;
         margin-left: 10px;
         border-left: 2px solid #ff3b3f;
         border-bottom: 2px solid #ff3b3f;
         padding: 5px;
         color: #ff3b3f;
      }

      .block-quote-left {
         width: 40%;
         height: auto;
         float: left;
         font-size: 30px;
         line-height: 1.2;
         margin-right: 10px;
         border-right: 2px solid #ff3b3f;
         border-bottom: 2px solid #ff3b3f;
         padding: 5px;
         color: #ff3b3f;
      }


      /*STYLING FOR GRAPH*/

      #voter_reg_graph {
         margin-top: 15px;
         background-color: #f8f8f8;
         box-shadow: 5px 5px #caebf2;
         height: 850px;
         padding: 15px;
         width: 98%;
         margin-left: auto;
         margin-right: auto;
      }

      #bar_graph {
         margin-left: 100px;
         height: 750px;
         width: 1000px;
         border-left: 2px solid #ccc;
         border-bottom: 2px solid #ccc;
         position: relative;
         float: left;
      }

      .bar {
         position: absolute;
         bottom: 0;
         width: 25px;
         opacity: 1;
      }

      /*STYLING FOR BARS*/

      .gop {
         background-color: #d22525;
      }

      .dem {
         background-color: #002dce;
      }

      .indep {
         background-color: #6f2da8;
      }

      /*STYLING FOR INDIVIDUAL BARS*/

      #gop_2000 {
         height: 452px;
         margin-left: 10px;
      }

      #dem_2000 {
         height: 398px;
         margin-left: 35px;
      }

      #indep_2000 {
         height: 161px;
         margin-left: 60px;
      }

      #gop_2002 {
         height: 465px;
         margin-left: 95px;
      }

      #dem_2002 {
         height: 399px;
         margin-left: 120px;
      }

      #indep_2002 {
         height: 232px;
         margin-left: 145px;
      }

      #gop_2004 {
         height: 488px;
         margin-left: 180px;
      }

      #dem_2004 {
         height: 428px;
         margin-left: 205px;
      }

      #indep_2004 {
         height: 295px;
         margin-left: 230px;
      }

      #gop_2006 {
         height: 501px;
         margin-left: 265px;
      }

      #dem_2006 {
         height: 428px;
         margin-left: 290px;
      }

      #indep_2006 {
         height: 332px;
         margin-left: 315px;
      }

      #gop_2008 {
         height: 530px;
         margin-left: 350px;
      }

      #dem_2008 {
         height: 478px;
         margin-left: 375px;
      }

      #indep_2008 {
         height: 379px;
         margin-left: 400px;
      }

      #gop_2010 {
         height: 559px;
         margin-left: 435px;
      }

      #dem_2010 {
         height: 500px;
         margin-left: 460px;
      }

      #indep_2010 {
         height: 476px;
         margin-left: 485px;
      }

      #gop_2012 {
         height: 556px;
         margin-left: 520px;
      }

      #dem_2012 {
         height: 467px;
         margin-left: 545px;
      }

      #indep_2012 {
         height: 512px;
         margin-left: 570px;
      }

      #gop_2014 {
         height: 561px;
         margin-left: 605px;
      }

      #dem_2014 {
         height: 472px;
         margin-left: 630px;
      }

      #indep_2014 {
         height: 576px;
         margin-left: 655px;
      }

      #gop_2016 {
         height: 592px;
         margin-left: 690px;
      }

      #dem_2016 {
         height: 509px;
         margin-left: 715px;
      }

      #indep_2016 {
         height: 582px;
         margin-left: 740px;
      }

      #gop_2018 {
         height: 632px;
         margin-left: 775px;
      }

      #dem_2018 {
         height: 555px;
         margin-left: 800px;
      }

      #indep_2018 {
         height: 609px;
         margin-left: 825px;
      }

      #gop_2020 {
         height: 685px;
         margin-left: 860px;
      }

      #dem_2020 {
         height: 638px;
         margin-left: 885px;
      }

      #indep_2020 {
         height: 624px;
         margin-left: 910px;
      }

      /* STYLING FOR DATES*/

      #dates {
         margin-left: 100px;
         height: 20px;
         width: 1000px;
         border: 1px solid #ccc;
         position: relative;
         float: left;
      }

      .year {
         position: relative;
      }

      #zero {
         left: 40px;
      }

      #two {
         left: 100px;
      }

      #four {
         left: 150px;
      }

      #six {
         left: 200px;
      }

      #eight {
         left: 260px;
      }

      #ten {
         left: 310px;
      }

      #twelve {
         left: 370px;
      }

      #fourteen {
         left: 420px;
      }

      #sixteen {
         left: 480px;
      }

      #eightteen {
         left: 530px;
      }

      #twenty {
         left: 585px;
      }

      /*STYLING FOR DATA */

      #data {
         width: 300px;
         height: auto;
         float: left;
         background-color: #D0D0D0;
         color: #101010;
         padding: 10px;
         margin-left: 15px;
      }

      .data_year, .data_party, .data_voters, .data_percent {
         display: none;
      }









/*media query for responsive design */

@media only screen and (max-width: 640px) {


}