/* HPK2 Selector */

#hpk2selector_spacer {  
  padding-bottom: 10px;
}

#hpk2selector_umschlag {
  background-color: white;
  position: fixed;
  width: 100%;
  z-index: 30000;
  border-bottom: 1px solid #aeaeae;  
  height: 10px;
}

#hpk2selector select.input_select_selector,
#hpk2selector input.button_selector {
  float: left;
  background-color: rgb(200, 200, 200);
  border: 1px solid rgb(115, 127, 145);
  background: none repeat scroll 0% 0% rgb(73, 73, 73);
  padding: 0px 0px 2px;
  line-height: 20px;
  margin: 10px 0px 10px 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px; 
  color: #ececec;    
  width: 46%;
  margin-right: 1%;
  cursor: pointer;
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
  background-color:#f9f9f9;
  -webkit-border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:arial;
  font-size:15px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
  display: none;
}

#hpk2selector input.button_selector {
  text-align: center;
}

#hpk2selector input.button_selector:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
  background-color:#e9e9e9;    
}

#hpk2selector .selectortext {
  font-size: 150%;
  position: absolute;
  top: 10px;
  left: 30px;
  background-color: white;
  padding: 8px 15px 8px 15px;
  cursor: pointer;
  -moz-border-radius: 0 0 6px 6px;
  -webkit-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+9,eaeaea+65 */
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 9%, #eaeaea 65%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #ffffff 9%,#eaeaea 65%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #ffffff 9%,#eaeaea 65%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */ 
  border-bottom: 1px solid #aeaeae;
  border-right: 1px solid #aeaeae;
  border-left: 1px solid #aeaeae;
}

#hpk2selector .selectortext:hover {
  color: #E0011E;
}

#hpk2selector .selectortext:before{
  content: "\f18e";
  font-family: FontAwesome;
  padding-right: 10px;
}

#hpk2selector .selectortext:hover:before{
  content: "\f01a";  
}

#hpk2selector_umschlag.open {
  height: auto;
  padding: 15px;
}

#hpk2selector select.input_select_selector.open,
#hpk2selector input.button_selector.open {
  display: block;
}

#hpk2selector .selectortext.open {
  font-size: 150%;
  position: static;
  background: none;
  padding: 0;
  border: 0;
}

#hpk2selector .selectortext.open:hover:before{
  content: "\f01b";  
}


@media only screen and (max-width: 640px) {
#hpk2selector_spacer {  
  padding-bottom: initial;
}

#hpk2selector_umschlag {
  border-top: 1px solid #aeaeae;  
  border-bottom: 0;  
  height: 10px;
  bottom: 0;
}

#hpk2selector .selectortext {
  font-size: 120%;
  position: absolute;
  top: auto;
  bottom: 10px;
    -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;  
  background: #ffffff;
  background: -moz-linear-gradient(top,  #ffffff 9%, #eaeaea 65%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #ffffff 9%,#eaeaea 65%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #ffffff 9%,#eaeaea 65%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */ 
  border-bottom: 0;
  border-right: 1px solid #aeaeae;
  border-left: 1px solid #aeaeae;
  border-top: 1px solid #aeaeae;
}

}