@charset "UTF-8";

/* CSS Document */

/* First we are just defining some global styling using the body element -- font, and line height */

body{
font-family:Verdana, Geneva, sans-serif;
line-height:1.5;
}

/* We are turning off underlining for links */

a{
text-decoration:none;
}

/* We are indenting paragraphs so paragraph text doesn't bump into other elements */

p{
margin-left:5px;
}

/* We are adding a bit of spacing around images */

img{
margin:5px;
}

header{
background:  #ffffff url("bp_logo200x760.png") no-repeat left top;    
margin-left:auto;
margin-right:auto;
text-align:center;
height:200px;
color:;
}

footer{
clear: both;      
}

/* Now we begin defining the columns that will display in full-sized browser windows */

article{
width:960px;
background-color:#ffffff;
color:brown;
min-height:500px;
margin-right:auto;
margin-left:auto;
}

section{
padding:1%;
margin:1%;
min-height:500px;
float:left;
}



#a{
width:30%;
background-color:#fef200;
color:#8900fe;
border-radius: 15px 15px 15px 15px;
float: ;
}

#a img{
padding:5px;
float:left;
}

#a li{
font-weight: bold;    
}

#b{
width:60%;
background-color:#ffffff;
color:#000000;
font-size:1.0rem;
font-style: italic;
}

#b img{
float:center;
}
#c{
width:22%;
background-color:white;
}



/*---- For two-column collapse----*/

@media (min-width:481px) and (max-width:959px){

header{
background:  #ffffff url("bp_logo150a.png") no-repeat left top;    
margin-left:auto;
margin-right:auto;
text-align:center;
height:150px;
color:#8900fe;
}

    article{
    position:relative;
    height:1000px; /*We are defining a height of 1000px*/
    width:95%; /*We are changing the width from a pixel value to a relative value to resize in different tablets*/
    }

    section{
    min-height:320px; /*We are reducing the minimum height*/
    }

    section img{
    float:left; /*We are floating images in sections for a more compact tablet design*/
    padding:10px;
    }
  
    #a{
    float:none; /*We are removing the float*/ 
    width:94%; /*We are defining the width with a relative value */ 
    }

    #b{
    background-color:#3a9e22; /*We are changing the background color of column b to yellow for tablet viewports*/
    float:left; 
    width:45%; /*We are sizing the width to be about half the width of section a*/
    }
    #c{
    float:left;
    width:45%; /*We are sizing the width to be about half the width of section a*/
    }

}





/*---- This collapses everything for mobile users ----*/

@media (max-width:480px){

header{
background:  #ffffff url("bp_logo150a.png") no-repeat left top;    
margin-left:auto;
margin-right:auto;
text-align:center;
height:150px;
color:#8900fe;
}



   article{
   width:100%; /*We are allowing the device to define the width -- the <article> will fill the entire width of the device*/
   margin:0px;
   padding:0px;
   }

   section{
   min-height:300px; /*We are removing constraints on width and reducing minimum height*/
   }
   
   section img{
   float:left; /*We are floating images in sections for a more compact smartphone design*/
   padding:10px;
   }

   #a{
   float:none; /*We are removing the float*/
   width:95%; /*We are defining the width with a relative value*/
   }

   #b{
   float:none; /*We are removing the float*/
   width:95%; /*We are defining the width with a relative value*/
   }

   #b img{
       width: 50%;
    height: auto;
   }
   
   #c{
   float:none; /*We are removing the float*/
   width:95%; /*We are defining the width with a relative value*/
   }

}

/*--- NAVBAR ----*/
/*DESKTOPS => 960px*/
@media (min-width: 960px) {
    
      #navbar{
      list-style:none;
      margin-bottom:10px;
      float:left;
      width:940px;
      padding:5px;
      background-color:#3a9e22;
      border-radius: 5px 5px 5px 5px;
      }

      #navbar li{
      font-size:1.2rem;
      font-weight:600;
      float:left;
      margin-right:5px;
      margin-left:5px;
      position:relative;
      }

      #navbar a{
      display:block;
      padding:5px;
      color:white;
      background:#004fe0;
      text-decoration:none;
      }

      #navbar a:hover{
      color:#fef200;  /*text color */
      text-decoration:none;
      }
      
      /*Dropdown styling*/
      #navbar ul{
      list-style: none;
      position: absolute;
      left: -9999px; /*Hide off-screen when not hovered over*/
      }

      #navbar ul li{
      padding-top:5px; /*Between the li items for spacing*/
      float:none;
      margin-left:-25px;
      }

      #navbar ul a{
      white-space:nowrap; /*Stop text wrapping*/
      }

      #navbar li:hover ul{ /*Display the dropdown on hover*/
      left:0; /*Bring back on-screen when needed*/
      }

      #navbar li:hover a{ /*The top link display when a user hovers over sub-menu items*/
      text-decoration: none;
      background-color: #ff5500;
      }

      #nav li:hover ul a{ /*The hover state defined a global style for links even before they're hovered over. Here we undo these effects.*/
      text-decoration:none;
      }

      #navbar li:hover ul li a:hover{ /*Defines the most explicit hover states when a user hovers over an individual link.*/
      background-color:black;
      }
} /*END MEDIA QUERY ONE*/

/*MEDIA QUERY 2 -viewports <=959px*/
@media (max-width: 959px) {  

      #navbar{
      list-style:none;
      margin-bottom:10px;
      }

      #navbar li{
      position:relative;
      margin-left:-40px;
      }

      #navbar a{
      font-size:1.25rem;
      display: block;
      width: 66%;
      padding: 10px;
      margin-bottom: 5px;
      color: #ffffff;
      background: #3a9e22;
      text-decoration: none;
      border-radius: 5px 5px 1px 1px;
      }

      #navbar a:hover{
      color:#fef200;
      text-decoration:none;
      }

      /* hide submenus in mobile devices */
      #navbar ul li{
      display:none;
      }

      #navbar li:hover a{
      text-decoration: none;
      background-color: #ff5500;
      border-radius: 5px 25px 25px 5px;
      border-bottom: thin white solid;
      width:75%;
      }
} /*END MEDIA QUERY 2*/
/*End NAVBAR */