@charset "UTF-8";

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

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


a{
text-decoration:underline;
}

/* Indent paragraphs so paragraph text doesn't bump into other elements */
p{
margin-left:5px;
}

/* Add spacing around images */
img{
margin:5px;
}

/* Define the columns that will display in full-sized browser windows */
article{
width:1060px;
background-color:white;
color:brown;
min-height:600px; /* Org=600px Controls the ht of the article on large viewport */ 
margin-right:auto;
margin-left:auto;
}

section{
padding:1%;
margin:1%;
min-height:600px; /* Org=500px Controls the ht of the section on large viewport */
float:left;
}

footer{
clear: both;
width:100%;
padding:1%;
margin:1%;
background-color: silver;
color: white;
float: ;
border-radius: 15px 15px 15px 15px;
}


#a{
width:30%;
background-color:#737373;
color:white;
float: left;
border-radius: 15px 15px 15px 15px;
}

#a img{
    float:none; /*changed this from center to allow the graphics to align left*/
    }

#a a{
 text-decoration:none;   
 color:white;   
}
#b{
width:65%;
background-color:white;
color:black;
float: left;
}

#b2{
width:65%;
background-color:white;
color:black;
}

#b img{
float: left;
margin:3%;
height:;
}

#b div{
float:right;
}


#b2 img{
float: ;
margin:3%;
height:;
}


em{
background-color:silver;
color:red;
padding: 8px;
}

.sig{
font-family:cursive;
font-size:2.5rem;
}

.plaque {
  background-color:#ffcc00;
  width: 320px;
  padding: 10px;
  border: 1px #000000;
  margin: 0; 
}


#c{
width:50%;
background-color:white;
}

.carousel{
    background: #ffffff;
    margin-top: 10px;
}
.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */
    height:px;
}
.bs-example{
	margin: 10px;
}

.carousel-caption h2{
color: #000000;    
}

.carousel-caption p{
color: #000000;    
}

.q{
color: #000000;
font-size:1.5rem;
}

.a{
color: #737373;
font-size: 1.5rem;    
}
/*---- Style for store ----*/
.text{
	
	font-size: 12px; 
 	padding: 2px; 
	margin: 20px;
 	vertical-align: top;
	text-align: left;
}


/*---- TABLET CODE----*/

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

header{
background: #ffffff url("logo475.jpg") no-repeat left top;
margin-left:auto;
margin-right:auto;
text-align:center;
height:100px;
}

    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:white; /*We are changing the background color of column b to yellow for tablet viewports*/
    float:left; 
    width:94%; /*We are sizing the width to be about half the width of section a*/
    }

    #b img{
    width: 50%;
    }

    #c{
    float:right;
    width:95%; /*We are sizing the width to be about half the width of section a*/
    }
}

/*---- SMARTPHONE CODE ----*/

@media (max-width:480px){

header{
background: #ffffff url("hwwlogo150.jpg") no-repeat left top;
margin-left:1%;
margin-right:1%;
margin-bottom:2%;
margin-top:1%;
text-align:center;
height:160px;
} 
 
   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*/
   height: px;
   }

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

   #b img{
   width: 95%; 
   }
 
   
   
   
   #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:1040px;
      padding:5px;
      background-color:silver;
      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:black;
      text-decoration:none;
      }

      #navbar a:hover{    
      color:white;             /*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: silver; /* color of bg of hovered link */
      }

      #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: white;
      background: black;
      text-decoration: none;
      border-radius: 5px 5px 5px 5px;
      }

      #navbar a:hover{
      color: white;   /*text color on hover*/
      text-decoration:none;
      }

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

      #navbar li:hover a{
      text-decoration: none;
      background-color: gray;
      border-radius: 5px 25px 25px 5px;
      border-bottom: thin white solid;
      width:75%;
      }
}

/*END MEDIA QUERY 2*/
/*End NAVBAR */