/*

	+-------------------------------------------------------------------+
	|	home.css														|
	|	Part of CSS template for Haelvoet								|
	|	Specific styles for the homepage								|
	|																	|
	|	Created by Wouter Samyn on 2013-07-23.							|
	|	Copyright (c) 2013 Well Communications. All rights reserved.	|
	+-------------------------------------------------------------------+

	COPY-PASTE VARIABLES
	--------------------
	text grey			999389
	dark grey			2a1f06
	medium grey			534c3a
	border grey			e3e3e3

*/
/*
	+-------------------------------------------------------------------------------------------+
	|											GENERAL											|
	+-------------------------------------------------------------------------------------------+
*/
/*	ELEMENTS	*/
h1 {
  border: none;
}
h2 {
  border-bottom: 1px solid #2a2422;
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
h3 {
  text-transform: none;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}
/*	CLASSES		*/
.distributors .locations {
  width: 255px;
  float: left;
  text-transform: uppercase;
  font-family: 'Khand', Arial, sans-serif;
  font-size: 14px;
  padding-left: 20px;
}
.distributors .locations li {
  padding: 10px 13px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.distributors .locations li.active {
  font-weight: bold;
  background-color: #f5f5f1;
}
.distributors .locations li a {
  display: block;
}
.distributors .locations li:hover {
  background-color: #f5f5f1;
}
.distributors .results {
  float: right;
  width: 600px;
}
.distributors .results li {
  margin-bottom: 20px;
}
#map {
  background: transparent url("../img/distributors/1280/map_bg.png") center no-repeat;
  text-align: right;
}
#interactiveMap {
  margin-right: 100px;
}
object#interactiveMap {
  width: 425px;
  position: relative;
  z-index: 90;
  background: none;
  float: right;
}
#glboalMap #interactiveMap {
  background: transparent url("../img/distributors/1024/map_global.png") right center no-repeat;
  min-height: 360px;
  position: relative;
}
#globalMap {
  position: relative;
}
#globalMap form {
  background-color: #392f2b;
  width: 215px;
  margin-left: 20px;
  padding: 20px;
  position: absolute;
  bottom: 0px;
  text-align: left;
}
#globalMap h3 {
  color: #fff;
  font-family: 'Khand', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#globalMap object#interactiveMap {
  width: 650px;
  background: none;
}
#globalResults {
  background: transparent url("../img/distributors/sidebar_seperator.png") 310px top repeat-y;
}
#globalResults.noBorder {
  background: none;
}
#belgiumMap #interactiveMap {
  position: relative;
  margin-right: 200px;
}
#belgiumMap {
  position: relative;
}
#belgiumMap form {
  background-color: #392f2b;
  width: 215px;
  margin-left: 20px;
  padding: 20px;
  position: absolute;
  bottom: 0px;
  text-align: left;
  float: left;
}
#belgiumMap h3 {
  color: #fff;
  font-family: 'Khand', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#belgiumResults {
  background: transparent url("../img/distributors/sidebar_seperator.png") 310px top repeat-y;
}
#belgiumResults.noBorder {
  background: none;
}
/*
	+-------------------------------------------------------------------------------------------+
	|										MEDIA QUERIES										|
	+-------------------------------------------------------------------------------------------+
*/
/* ========================= */
/* = SMARTPHONE - PORTRAIT = */
/* ========================= */
@media only screen and (min-width: 0px) and (max-width: 767px) {
  #globalResults,
  #belgiumResults {
    background: none;
  }
  .distributors .locations {
    width: auto;
    float: none;
    padding: 0px;
    margin-bottom: 40px;
  }
  .distributors .results {
    width: auto;
    float: none;
  }
  #interactiveMap {
    display: none;
  }
  #globalMap form#frmMap,
  #belgiumMap form#frmMap {
    position: static;
    width: auto;
    float: none;
    margin: 0px;
  }
  div#map,
  section#globalMap {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
  }
}
/* ========================== */
/* = SMARTPHONE - LANDSCAPE = */
/* ========================== */
/* ===================== */
/* = TABLET - PORTRAIT = */
/* ===================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .distributors .results {
    float: right;
    width: 460px;
  }
  .distributors .locations {
    width: 200px;
  }
  #globalResults {
    background-position: 250px 0px;
  }
  #belgiumResults {
    background-position: 250px 0px;
  }
  #globalMap object#interactiveMap {
    margin-right: 20px;
    width: 550px;
  }
  #globalMap #interactiveMap {
    margin-right: 0px;
  }
  #belgiumMap #interactiveMap {
    margin-right: 50px;
  }
}
/* ================================ */
/* = TABLET - LANDSCAPE + DESKTOP = */
/* ================================ */
/* =================== */
/* = DESKTOP VERSION = */
/* =================== */
@media only screen and (min-width: 1280px) {
  object#interactiveMap {
    margin-right: 250px;
  }
  #globalMap object#interactiveMap {
    margin-right: 150px;
  }
  #globalMap #interactiveMap img {
    margin-right: 50px;
  }
  .distributors .results {
    float: right;
    width: 760px;
  }
}