@charset "utf-8";

/* Author: 	Klaus-Peter Watzlawek			 	*/
/* Desc: 	Ultra Responsive CSS Code for Stellenangebote 	*/
/* Version: 	1.0 						*/
#stellenmarkt {
  float: left; 
  width: 99%; 
}

#stellenmarkt .kopf { 
  float: left; 
  width: 100%; 
  background: #FFFFFF; 
  color: #000000; 
  font-weight: bold; 
  text-align: center; 
  font-family: Arial;  
  padding: 2px 0px;
  height: 20px;
}

#stellenmarkt .fuss { 
  float: left; 
  width: 100%; 
  background: #FFFFFF; 
  color: #ffffff; 
  font-weight: bold; 
  text-align: center; 
  font-family: Arial;  
  padding: 2px 0px;
  height: 20px; 
}

#stellenmarkt .hervorgehoben-oben {
  background: #FF8100; 
  color: #FFFFFF;  
  border: 2px solid #BBBBBB;
  border-bottom: none;
}

#stellenmarkt .hervorgehoben-unten {
  background: #FF8100; 
  color: #FFFFFF;  
  border: 2px solid #BBBBBB;
}

#stellenmarkt .normal-oben {
  background: #FFFFFF;  
  color: #000000; 
  border: none;
}

#stellenmarkt .normal-unten {
  background: #FFFFFF;  
  color: #000000; 
  border: 2px solid #FFFFFF;
  border-top: 2px solid #BBBBBB;
}

#stellenmarkt .weiss {
  background: #FFFFFF; 
  color: #000000;
}

#stellenmarkt .gelb {
  background: #ffffac; 
  color: #000000;
}

#stellenmarkt .stellenelement {
  text-align:left;
  float:left;
  width: 100%;  
  border: 2px solid #BBBBBB;
  border-bottom: 0px;
}

/* Spalte Anbieterlogo */

#stellenmarkt .anbieterlogo  {
  text-align:left;
  padding: 5px 5px;
  float: left;
  width: 45px;
  height: 45px;
  padding-right: 1%;  
  float:left;
}

#stellenmarkt .anbieterlogo img  {
  height: 45px;
  width: 45px;
}


/* Spalte Anbieter */

#stellenmarkt .anbieter  {
  text-align:left;
  padding: 5px 5px;
  float: left;
  padding-right: 5%;  
  width: 30%;
}

#stellenmarkt .anbieter .beruf  {
  font-weight: bold; 
  padding-bottom: 5px;  
}

#stellenmarkt .anbieter .firma  {
  font-weight: normal; 

}

/* Spalte Stelle */

#stellenmarkt .stelle {
  text-align:left;
  padding: 5px 5px;
  float: left;
  padding-right: 5%;
  width: 15%;

}

#stellenmarkt .stelle .pdf{
  font-weight: bold;
  padding-bottom: 5px;
}

#stellenmarkt .stelle .misc{
}

/* Spalte Ort */

#stellenmarkt .ort {
  text-align:left;
  padding: 5px 5px;
  float: left;
  padding-right: 5%;
  width: 15%;
}

#stellenmarkt .ort .stadt {
  padding-bottom: 5px;
}

#stellenmarkt .ort .region {  
}

/* Spalte Status */

#stellenmarkt .status {
  text-align:left;
  padding: 5px 5px;
  float: right;  
  width: 15%;
}

#stellenmarkt .status .arbeitszeit {
  padding-bottom: 5px;
  
}

#stellenmarkt .status .vollzeit {
  background: url("../../../uploads/2015/03/Vollzeit.jpg");
  height: 19px;  
  width: 100px;
}

#stellenmarkt .status .teilzeit {
  background: url("../../../uploads/2015/03/Teilzeit.jpg");
  height: 19px;  
  width: 100px;
}

#stellenmarkt .status .zeitraum {

}

/* Responsive Part */

@media only screen and (min-width: 100px) and (max-width: 460px)  {
  
  #stellenmarkt .anbieterlogo  {    
    padding: 5px 5px;
    float:left;    
  }

  #stellenmarkt .anbieter {
    float:right;
    width: 80%;
    font-size: 0.8em;
    padding: 10px 0px;
  }
 
  #stellenmarkt .stelle {
    clear:left;
    width: 100%;
    text-align:center;
  }
  
  #stellenmarkt .ort {
    clear:left;
    width: 40%;
  }
 
  #stellenmarkt .status {
    float: right;
    width: 38%;
  }
}

@media only screen and (min-width: 461px) and (max-width: 640px)  {

  #stellenmarkt .anbieterlogo  {    
    padding-right: 5%;  
    float:left;    
  }

  #stellenmarkt .anbieter {
    float:right;
    width: 80%;
    font-size: 1.0em;
    padding: 5px 0px;
  }
 
  #stellenmarkt .stelle {
    clear:left;
    width: 100%;
    text-align:center;
  }
  
  #stellenmarkt .ort {
    clear:left;
    width: 40%;
  }
 
  #stellenmarkt .status {
    float: right;
    width: 25%;
  }

}

@media only screen and (min-width: 641px) and (max-width: 980px)  {
  #stellenmarkt .anbieterlogo  {    
    padding-right: 5%;  
    float:left;    
  }
  
  #stellenmarkt .anbieter {
     width: 40%;
  }
 
  #stellenmarkt .stelle {
    width: 10%;
  }
  
  #stellenmarkt .ort {
    width: 10%;
  }
 
  #stellenmarkt .status {
    width: 17%;
  }
}

/* @media only screen and (min-width: 769px) and (max-width: 980px) {}  --> bereits optimal wie oben 
   @media only screen and (min-width: 1420px){} --> nativ OK*/