/*
Simple Responsive Template v 1.2


primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.



BASE (MOBILE) SIZE
	These are the mobile styles. It's what people see on their phones.
	Remember, keep it light: Speed is Important.
*/

.SLHWrapper {

   border: 0px solid red;
   background-color: #666666;
   padding: 7px 5px;
   margin-bottom: 15px;
}

.SLHWrapper img {
   border: 0px solid blue;
}

.SLHWrapper .checks {
  display: inline-block;
  border: 0px solid red;
  padding-top: 2px;
  margin: 8px 10px;
}

.SLHWrapper .dl {
     display: inline-block; margin-right: 20px;
   }

.SLHWrapper .checks label {
  border: 0px solid blue;
  color: #ffca00;
  margin-left: 5px;

}

.SLHWrapper input[type=text] {

   margin: 0px 20px;
   /*height: 35px;*/
}

.SLHWrapper select {
  border: 0px solid red;
  /*height: 35px;*/
}


.SLHWrapper .SearchButton {
  background-color: #ffcc00;
  color: white;
  font-weight: bold;
  border: 0px;
  background-image: url('/DesktopModules/StoreLocatorHome/images/searchBG1.jpg');
  background-position: right;
  padding: 10px 60px 11px 15px;
}


/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
}

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (max-width: 1120px) {
  .SLHWrapper img {
     border: 0px solid red;
     margin-right: 50px;
  }
}
@media only screen and (max-width: 960px) {
  .SLHWrapper input[type=text] {
     margin: 0px 5px;
   }
   
   .SLHWrapper .dl {
     display: inline-block; margin-right: 5px;
   }
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
    .mobile{ display: none; }
    .desktop{ display: block; }
} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
    .mobile{ display: none; }
    .desktop{ display: block; }
} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
}