select{
    /*Remove borders on all select!!*/
    outline:0;  
    border:0;  
}

/* This is for removing the default arrow in IE*/
select::-ms-expand {
    display: none;
}

/* This will make dropdowns show that they have focus - except for FF & IE wich have their own :o/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select:focus{
        outline:solid 2px #a5c7fe;
    }
}

option{
    outline:0;
}


.black_dropdown{
   
   width: 220px;
   height: 32px;
   overflow: hidden;  
   border-radius:4px;
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #666666), color-stop(100%, #333333));   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #666666 0%, #333333 100%);   

   filter: url(../Images/white_arrow_down.png) no-repeat 190px center, progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333', GradientType=0 );
}

.black_dropdown:hover {
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #1a1a1a), color-stop(100%, #4d4d4d)); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #1a1a1a 0%, #4d4d4d 100%); 
   filter: url(../Images/white_arrow_down.png) no-repeat 190px center, progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#4d4d4d', GradientType=0 );
}

.black_dropdown select {
   /*background: #fbbe78;*/
   background: transparent;
   
   width: 220px;
   
   padding-left: 4px;
   padding-bottom: 5px;
   padding-right: 30px;
   padding-top: 5px;


   font-size: 16px;
  
   border: 0;
   border-radius: 0;
   height: 32px;
   -webkit-appearance: none;
   font-family: 'Open Sans', 'Arial';
   color:white;
   }


.black_dropdown option{  
    background: #333333;
    border-radius:4px;
}


.white_dropdown{
   
   width: 210px;
   height: 32px;
   overflow: hidden;  
   border-radius:4px;
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -moz-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-gradient(left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e9e8e3)) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -o-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -ms-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, linear-gradient(to bottom, #f5f5f5 0%, #e9e8e3 100%) ;   
}

.white_dropdown:hover {
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -moz-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%) ; 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-gradient(left top, left bottom, color-stop(0%, #dbdbd9), color-stop(100%, #c2c1bd)); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -o-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -ms-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, linear-gradient(to bottom, #dbdbd9 0%, #c2c1bd 100%); 
}

.white_dropdown select {
   /*background: #fbbe78;*/
  
   width: 210px;
    background: transparent;
   padding-left: 4px;
   padding-bottom: 5px;
   padding-right: 30px;
   padding-top: 5px;
   border-radius: 0;
   -webkit-appearance: none;

   font-size: 16px; 
   
   height: 32px;
   
   font-family: 'Open Sans', 'Arial';

}

.white_dropdown option{  
    background: #e9e8e3;
    border-radius:4px;
}

.dropdown_text_color_white{
    color:white;
    border:none;
}


.orange_dropdown{  
   width: 220px;
   height: 32px;
   overflow: hidden;  
   border-radius:4px;
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #fbbe78), color-stop(100%, #fbac3b)) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #fbbe78 0%, #fbac3b 100%) ;   
   border:none;
}

.orange_dropdown:hover {
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #e0aa6b), color-stop(100%, #e08e35)) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #e0aa6b 0%, #e08e35 100%) ;   
   border:none;
}


.orange_dropdown select {
   /*background: #fbbe78;*/
   background: transparent;
   width: 220px;
   padding-left: 4px;
   padding-bottom: 5px;
   padding-right: 30px;
   padding-top: 5px;
   
   
   font-size: 16px;
   border-radius: 0;
   height: 32px;
   -webkit-appearance: none;
   font-family: 'Open Sans', Arial;
   color:white;
   }

.orange_dropdown option{  
    background: #fbbe78;
    border: none;
    border-radius:4px;    
}



/************************************************************************/
/************************************************************************/
/***  Really ugly hacks to get rid of the arrow in dropdowns in firefox */
/************************************************************************/
/************************************************************************/



.firefox-div {
  position: absolute; /* AFAIK works only in absolute/fixed positioned container. */
  margin-top:-16px;
}

.firefox-div select {
  display: flex; /* I actually don't know how this works, but arrow is not visible. */
  height: 32px; 
   width: 210px;
  font-family: 'Open Sans', 'Arial';
   font-size: 16px;
   padding-left: 4px;
   padding-right: 30px;
   overflow: hidden;  
   border-radius:4px;
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -moz-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-gradient(left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e9e8e3)) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -o-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, -ms-linear-gradient(top, #f5f5f5 0%, #e9e8e3 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 180px center, linear-gradient(to bottom, #f5f5f5 0%, #e9e8e3 100%) ;   
}

.firefox-div select:hover {
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -moz-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%) ; 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-gradient(left top, left bottom, color-stop(0%, #dbdbd9), color-stop(100%, #c2c1bd)); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -webkit-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -o-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, -ms-linear-gradient(top, #dbdbd9 0%, #c2c1bd 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 180px center, linear-gradient(to bottom, #dbdbd9 0%, #c2c1bd 100%); 
}


.firefox-orange-div {
  position: absolute; /* AFAIK works only in absolute/fixed positioned container. */
}

.firefox-orange-div select{  
   display: flex; /* I actually don't know how this works, but arrow is not visible. */
   font-family: 'Open Sans', 'Arial';
   font-size: 16px;
   padding-left: 4px;
   padding-right: 30px;
   color:white;
   width: 220px;
   height: 32px;
   overflow: hidden;  
   border-radius:4px;
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #fbbe78), color-stop(100%, #fbac3b)) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #fbbe78 0%, #fbac3b 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #fbbe78 0%, #fbac3b 100%) ;   
   border:none;
}

.firefox-orange-div option{  
    background: #fbbe78;
    border: none;
}

.firefox-orange-div select:hover {
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #e0aa6b), color-stop(100%, #e08e35)) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #e0aa6b 0%, #e08e35 100%) ;   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #e0aa6b 0%, #e08e35 100%) ;   
   border:none;
}


.firefox-black-div {
    position: absolute; /*AFAIK works only in absolute/fixed positioned container. */
   margin-top:-16px;
   
}

.firefox-black-div select{  
   display: flex; /* I actually don't know how this works, but arrow is not visible. */
   font-family: 'Open Sans', 'Arial';
   font-size: 16px;
   padding-left: 4px;
   padding-right: 30px;
   color:white;
  
   width: 220px;
   height: 32px;
   overflow: hidden;  
   border-radius:4px;
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #666666), color-stop(100%, #333333));   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #666666 0%, #333333 100%);   
   background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #666666 0%, #333333 100%);   
}

.firefox-black-div option{  
    background: #333333;
    
    border:none;
     text-align:left;
}

.firefox-black-div select:hover {
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -moz-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-gradient(left top, left bottom, color-stop(0%, #1a1a1a), color-stop(100%, #4d4d4d)); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -webkit-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -o-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, -ms-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); 
    background: url(../Images/white_arrow_down.png) no-repeat 190px center, linear-gradient(to bottom, #1a1a1a 0%, #4d4d4d 100%); 
}