/* vera's boutique - responsive css styles 2015 */

html,body {
height: 100%;
padding: 0;
margin: 0;
background-color: #eaeaea;
color: black;
font-family: serif;
font-size: 100%; 
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
	padding: 0;
  	margin: 0;
  }

.container {
      margin: 0 auto;
      max-width: 1024px;
    }
    
#headline #blurb {
      float: left;
      font-weight: 200;
      width: 45%;
      font-size: 18px;
      box-sizing: border-box;
      padding: 10px;
     margin-top: 320px;
     opacity: .9;
    }

#headline #location {
      float:right;
      padding: 20px;
      width: 40%;
      box-sizing: border-box;
      /*font-weight: 300; */
      margin-top: -120px;
      opacity: .98;
    }

 #headline br {
      clear: both;
    }
    
#section1 #products {float: left; width: 70%; box-sizing: border-box;}
#section1 #brands {float: right; width: 30%; box-sizing: border-box;}
#section1 #register {float: right; width: 30%; box-sizing: border-box;}

#news { padding: 2em;}
#social {box-sizing: border-box; margin: 1em;}


#section2 {clear: both;}
#section3 {clear: both;}



#location iframe {
	width: 100%;
	/* height: 100%; beware of safari */
	}

.store {
	background-image: url(/pix/Veras-boutique-background-1024.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	/*background-size: 1024px 688px;*/
	}

.brand {
background-color: #d1d1d1;
color: #2cb2cc;
   padding: 5.5px 10px;
   /*-webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;*/
}

.logo {margin: 18px; vertical-align: middle;}

.tagline {font-family: serif; font-style: italic; font-weight: 400; font-size: 150%; margin: 0; color: #1da0ba;}

header h1 {margin: 0; padding: 0;}

h2 {font-family: "Trebuchet MS", sans-serif; color: #ff3399; line-height: 2;}
h3 {line-height: 1.5;}


#register h3 {font-family: "Trebuchet MS", sans-serif; margin: 0;}

#register p {margin: .5em 0em 1em 0em;}

p.copyright {padding: 20px;}

.fb-like-box {margin: 20px 0;}
 
.brand-list li {margin: 1em;}

.store-hours {margin: 0 auto; text-align: center; padding: 4%;}

.product-lists {margin:0; padding: 0;}
 
.product-lists li {list-style-type: none;}

.product-lists li.category {clear: both; margin: 1em 0;}

.product-list li {list-style-type: none; float: left;}

.product-list li div {text-align: center; border: 1px solid silver; margin: 0 0em 2em 2em}
 
.product-list li img {
	width: 100%; 
	height: auto; 
	min-width: 240px;
	max-width: 240px; 
	box-sizing: border-box;
	}

.product-list li span {display: block; color: #ff3399; line-height: 2;}

figure {text-align: center;}

.clear {clear: both;}
.center {text-align: center;}

.centered {
	margin: 0 auto;
	}

.blue-green {color: #00cccc;}
.pink {color: #ff3399;}
.aqua {color: #1da0ba;}
 
.whitebg {background-color: white;}
.wallbluebg {background-color: #6eb6c4; color: #fff;}

.pinkbg {background-color: #ff3399; color: white;}
.neutralbg {background-color: #e7e7e7;}

.button {
   border-top: 1px solid #99cccc;
   background: #66cccc;
   padding: 7.5px 15px;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   white-space:nowrap;
   }
   
.button:hover {
   border-top-color: #ff3399;
   background: #ff3399;
   color: #ffffff;
   }
   
.button:active {
   border-top-color: #99cccc;
   background: #66cccc;
   }

/* breakpoint */
@media (max-width: 768px) {
#headline #location {
	margin-top: 320px;
	clear: both; 
	width: 100%;
	font-size: 125%;
	}

#headline #blurb {
    margin-top: 10px;
    clear: both;
    width: 100%;
  }

#section1 #products {clear: both; width: 100%;}
#section1 #brands {clear: both; width: 100%;}
#section1 #register {clear: both; width: 100%;}

}