/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 13, 2020, 2:40:48 PM
    Author     : Antho
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

/**********************************************/
/******************* ALL **********************/
/**********************************************/
* {
    font-family: "Open Sans", sans-serif;
}


/**********************************************/
/******************* HEADER *******************/
/**********************************************/
.header {  
    background-color: #FDA50F;
    margin: 0px;
    padding: 16px 0px 32px 0px;
}

.header > h1 {
    text-align: center;
    color: #FFFFFF;
}

.header > h2 {
    font-style: italic;
    text-align: center;
    font-size: 80%;
    color: #FFFFFF;
}


/******************************************************/
/******************* NAVIGATION BAR *******************/
/******************************************************/
.navigation_bar > ul {
    background-color: #3C3744; 
    color: #FFFFFF;
    list-style-type: none; 
    text-align: center; 
    margin: 0px;
    padding: 20px 0 20px 0;
    
}

.navigation_bar > ul > li {
    display: inline-block;
    padding: 0 20px 0 20px;
}

.navigation_bar > ul > li > a {
    text-decoration: none; 
    color: #FFFFFF;
}

.navigation_bar > ul > li > a:hover {
    color: #4D5359;
}


/********************************************/
/******************* MAIN *******************/
/********************************************/
main {
    margin: 0px 128px 0px 128px;
}

/***** HOME *****/
/* SECTION #1: SAVE THE ENVIRONMENT */
#figure_powerplant {
    float: left; 
    max-width: 100%;
}

#figure_powerplant > figcaption {
    text-align: center;
    max-width: 500px;
}

#figure_powerplant > img {
    max-width: 500px;
}

.emissions_data {
    margin: auto;
}
.emissions_data, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

/* SECTION #2: SAVE MONEY */
#figure_solarpanelsonroof {
    float: right;
    max-width: 100%;
}

/***** FORM *****/
.main_form > h2 {
    text-align: center;
}

.main_form > h3 {
    text-align: center;
}

/***** GOING SOLAR? *****/
.main_gosolar > h2 {
    text-align: center;
}

#figure_communitysolarvideo {
    display: block;
    margin: auto;
    text-align: center;
    max-width: 500px;
}

#figure_communitysolarvideo > video {
    max-width: 500px;
}

/**********************************************/
/******************* FOOTER *******************/
/**********************************************/
.footer {
    background-color: #3C3744;
    text-align: center;
    position: relative;
    bottom: 0px;
    margin: 64px 0px 0px 0px;
    padding: 20px 0px 20px 0px;
}

.footer > p {
    font-style: italic;
    text-decoration: none;
    color: #FFFFFF;
}


/**********************************************/
/******************** FORM ********************/
/**********************************************/
.frmJoin {
 display: block;
 margin: auto;
 max-width: 40em;
}

.frmJoin > fieldset  {
    border: 0.2em solid;
}

#btnSubmit {    
    display: block;
    margin: 2em auto;
    background-color: #FDA50F;
    border: 0.2em solid;
}

#fldSubmit {
    border: none;
}

#ranSliderField {
    text-align: center;
}

#ranInterest {
    width: 20em;
}