/**                                          
 *   reponsive style rules for mobile devices. 
 *   Author: Djoulako vicky                    
 *   Company : Zinger Systems
 *
 **/

   

   body{
      min-width: 320px;
   }
   
   
   .wrapper{
      margin: 0px auto;
      max-width: 960px;
      width: 100%;
   }
 
   #banner #header {
      border: medium none;
   }
   
   #container #left .c3.banners{
      display: none;
   }
	
	#main.c6{
		height: 725px;
	}

   #container #left .banner_title.center h3{
      font-size: 22px;
   }
   
   #container #left #banner-clicks li a{
      background: none;
   }
   
   #banner #container #show_job_contents {
      /*width: 78%;*/
      width: 100%;
   }
   .text_field{
      display: block;
      position: relative;
   }
   
   .text_field .dropdown-suche-spezial{
      margin-top: -10px;
   }
   
   .text_field .dropdown-suche-spezial .group{
      padding: 5px 0;
   }
   
   .text_field .dropdown-suche-spezial label{
      display: inline-block;
   }
   
   .text_field .dropdown-suche-spezial input{
      float: left;
   }
   
   
   #banner #container #show_job_contents iframe#job_frame{
      width: 100%;
   }
 
   #search input.firmensearch.firmenSearchInput{
      width: 100%;
   }
   
   .btn-bewerben{
      display: none;
   }

   /*****************Mail Modal Box*******************/
    #formBloc{
        border: 1px solid #ccc;
        display: none;
        width: 100%;
    }

    #formBloc h3{
        margin: 0;
        padding: 10px;
        background-color: #5186d4;
        color: #fff;
    }

    .mailBoxForm{
        margin: 10px;
    }

   .mailBoxForm p label{
       display: block;
       margin-bottom: 5px;
       width: 100%;
   }

    .mailBoxForm p input{
        /*border: 1px solid #ccc;
        border-radius: 0;
        display: block;
        height: 28px;
        width: 97%;
        padding-left: 10px;*/

        background: url("/images/bg-ip2.gif") repeat-x scroll left top #F4F4F4;
        border: 1px solid #A8ACAD;
        font: 14px Arial,Helvetica,sans-serif,"Trebuchet MS";
        height: 16px;
        margin: 4px 0;
        padding: 7px 5px;
        width: 97%;

    }

    .mailBoxForm p .note {
        color: #787878;
        font-size: 11px;
    }

    .mailBoxForm p textarea{
        background: url("/images/bg-ip2.gif") repeat-x scroll left top #F4F4F4;
        border: 1px solid #ccc;
        border-radius: 0;
        display: block;
        height: 267px;
        padding: 5px 10px;
        width: 95%;
    }


    .MailBox{
        -moz-border-radius: 0 !important;;
        -webkit-border-radius: 0 !important;;
        border-radius: 0 !important;;
        padding: 0 !important;;
    }

    .MailBox.ui-dialog .ui-dialog-titlebar-close{
        display: none !important;;
    }

    .MailBox .ui-dialog-titlebar{
        background: #6e90d5 !important;;
        -moz-border-radius: 0 !important;;
        -webkit-border-radius: 0 !important;;
        border-radius: 0 !important;
    }

    .MailBox .ui-dialog-title{
        color: #fff;
        height: 25px;
        padding-top: 7px
    }

    .MailBox.ui-dialog .ui-dialog-buttonpane button{
        float: right;
        padding: 8px;
    }

    .actions button{
        cursor: pointer;
    }

    .actions .send{
        background: rgba(0, 0, 0, 0) url("/images/button_green.png") no-repeat scroll 0 0;
        border: medium none;
        color: white;
        height: 30px;
        margin: 0;
        width: 80px;
    }

    .actions .close{
        background-color: #888585;
        border-radius: 5px;
        border: medium none;
        color: white;
        font-weight: bold;
        height: 30px;
        margin: 0;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        width: 80px;
    }


/*********** social buttons ***************/

.socials{
    margin-top: 15px;
    position: relative;
    width: 100%;
}

.btn-social{
    display: inline-block;
    text-decoration: none;
    text-indent: -10000px;
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
}

.flike{
    background-image: url("../images/flike.png");
    width: 48%;
    height: 40px
}

.tlike{
    background-image: url("../images/tlike.png");
    width: 46%;
    height: 40px;
}


.btn-social:hover{
    text-decoration: none;
}


/********************** header style *********************************/

	

	#body #user_bar .main-menu > li a, #body #user_bar .main-menu > li a:hover {
		color: #111;
	}

	#container{
	   margin-top: 30px;
    }

	#hwrap{
        /*background-image: url(../images/header-bg.png);*/
        background-color: #fff;
        background-image: url(../images/Fraufading.png);
        background-position: 80% 70px;
        background-repeat: no-repeat;
        width: 100%;
	}

    #header .slogan {
        font-size: 17px;
        color: #6B6B68;
        text-align: left;
        margin: 15px 0 0 20px;
    }

	#footer-wrapper {
		background: #6e90d5 none repeat scroll 0 0;
	}

	#footer-wrapper p{
		color: #222;
	}

	#footer-wrapper p a{
		text-decoration: none;
	}

  	#search_box, #header, #tabs {
  		background: transparent;
  	}
	
	#search_type a{
		font-size: 20px;
		height: 34px;
		padding-top: 15px;
		text-align: center;
		text-decoration: none;
		text-indent: 0;
	}

	
	#search_box #search_type a.active {
		background-color: #6f8ee0;
		background-position: left -98px;
	}

	#search_type a.stellen{
		background: transparent;
		background-color: #afbff2;
		color: #fff;
	}
	
	#search_type a.detail{
		background: linear-gradient( to right, #6e90d5 5%, rgba(129, 155, 243, 0.3) 100%);
		color: #fff;
	}

	#search_options{
		/*background: #6e90d5 none repeat scroll 0 0;*/
		background: linear-gradient( to right, #6e90d5 45%, rgba(129, 155, 243, 0.3) 100%);
	}
   
   #header {
     color: #444;
     margin: 0;
     padding: 0;
     position: relative;
     text-align: center;
     width: 100%;
   }

   #header h1 {
        margin: 0 0 0 -22px;
		text-align: left;
		text-indent: -10000px;
		width: 100%;
   }

   #header h1 a{ 
     	background: url("/images/img-logo.png") 20px 0 no-repeat;
        display: block;
		height: 102px;
		margin: 0px 0 0 0;
		width: 100%;
		max-width: 264px;
	   	background-size: contain;
   }

   #banner_wrapper{
      margin: 0px; width: 100%;
   }
   
   #banner_wrapper p{
      margin: 0;
   }


   #high_impact_banners{
       height: 250px;
   }

   #banner_wrapper .right, #banner_wrapper .left{
      height: auto;
      margin: 0 0.5%;
      margin-top: 108px !important;
      max-width: 140px;
      width: auto;
   }
   
   #banner_wrapper .left img{
      width: 100%;
   }
   
   #spruche{
      display: none;
   }
 
   #search_options_wrapper{
      padding: 0px;
   }
 
   #search_options #searchSimpleTable .field{
      display: inline;
   }
   #search_options #searchSimpleTable .field > label{
      color: #FFF;
      display: inline-block;
      float: none;
      font-size: 22px;
      font-weight: normal;
	  margin: 0;
      width: 13%;
   }
 
   #search_options #searchSimpleTable input[type="text"] {
      margin-left: 1.1%;
      margin-right: 6px;
      max-width: 675px;
      width: 65%;
   }
 
   #search_options input.search, #search input.firmsearch {
      background: url("/images/bg-ipTxt.gif") repeat-x scroll left top #fff;
      border: 1px solid #426b0c;
      color: #000;
      font-size: 16px;
      height: 25px;
      margin-top: 6px;
      padding: 4px 8px;
      width: 95%;
   }
 
	#searchDetailsTable #search_options input.search{
		font-size: 13px;
	}

   #search_box .dropdown-wohnort, #search_box .dropdown-schnellSuche, #search_box .dropdown, #search_box .dropdown-suche-spezial, .text_field .dropdown-suche-spezial{
      border: 1px solid #1b1b1b;
   }
 
   #search_options input#search_submit {
      background-image: url(/images/btn-search.png);
       background-repeat: no-repeat;
       -webkit-background-size: 100%;
       background-size: 100%;
       background-position: 0;
       background-color: #FF7C01;
      border: medium none;
      cursor: pointer;
      height: 35px;
      width: 147px;
   }
   
   #search_options #searchDetailsTable {
      margin: 0px;
   }
   
   #search_options #searchDetailsTable .field > label {
      color: #FFF;
      font-weight: normal;
      text-align: left;
      font-size: 12px;
      margin: 0px 3px;
      padding: 0px;
   }
 
   #search_options #searchDetailsTable .field{
      display: inline-block;
      margin: 0 6px;
      width: 11%;
   }
 
   #search_options #searchDetailsTable .field.field-button{
      width: 15.3%;
   }
 
 
   #container {
      background: none ;
      margin: 0;
      overflow: hidden;
      padding: 0;
      width: auto;
   }
 
	.bxslider{
		margin-top: 7px;
	}

    #container #left #bigButtons a.publizieren {
        background: #FF9530  url(/images/btn-Infos-suchende.png) no-repeat scroll 0 ;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    #container #left #bigButtons a.detailsuche{
        background: #FF9530  url(/images/btn-Infos-firmen.png) no-repeat scroll 0 ;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    #container #left #bigButtons a.kontakt {
        background: #FF9530  url("/images/btn-inserieren.png") no-repeat scroll 0;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    #aktuelle{
        margin: 0 auto 25px;
        text-align: center;
        width: 100%;
    }

    h5.aktiv-links{
        line-height: 20px;
    }

    .aktiv-links a{
        color: #096CFF;
        text-decoration: none;
        font-size: 15px ;
    }

    .aktiv-links a:hover{
        text-decoration: underline;
    }

    #container #right{
        margin-top: 0;
    }

    ul#jobs.spy{
        margin: 30px 0 0;
    }
	
	#firmen_info.firma .details{
		margin-top: 0px;
	}
	
	#firmen_info.firma{
		margin-top: -35px;
	}
	
	#firmen_info.firma .details h2{
		color: #7CA709;
		font-size: 23px;
	}
  /*************** BANNER RIGHT ************************/
	.banner_title h2{
		background-color: #fff;
		margin: 0;
		padding: 10px 0 0;
	}

	.banners h2{
		color: #096CFF;
		font-size: 20px;
		text-align: center;
	}
	#container  .banners .banner_wrapper{
		background-color: rgba(129, 155, 243, 0.3);
		border: 1px solid rgb(148, 195, 223);
		padding: 30px 2px 25px;
		margin-bottom: 20px;
	}
	
	#container .banners li{
		width: 74px;
	}
	#container .banners .banner-head{
		background-color: #fff;
    	padding: 10px 15px 20px 16px;
		margin: 0;
	}

	#container .banners #old-banners{
		background-color: #fff;
		padding: 10px 0px 20px 0px;
		margin: 0;
	}

	#container .banners #old-banners .last-item{
		float: none;
	}

	#container .banners .banner-head li {
		width: 95%;
		height: auto;
		overflow: hidden;
		float: none;
		margin: 0 5px 5px 0;
		text-align: center;
	}

	#container .banners .banner-head li a{
		display: block;
		float: none;
		width: auto;
		height: auto;
		background-color: transparent;
		
	}

	#container .banners .banner-head li a img{
		display: block;
		margin: 5px auto;
		width: 100%;
	}

 /*************************/
 
   #header{
      
   }
   
   #search_options_wrapper{
      width: 100%;
   }
   
   #banner_wrapper {
      margin: 0 auto;
   }
   
   #container {
      margin: 30px 0 0;
   }
   
   
   .bookmark_buttons .button{
      float: left;
      margin-right: 12px;
   }
   
   .bookmark_buttons .button.zuruck{
      margin-right: 0;
   }
   
   .clearfix{
      clear: both;
   }
   
   @media (max-width: 980px) {
      .bookmark_buttons .button{
         margin-right: 0.5%;
      }      
   }
   
   
   @media all and (max-width: 956px){
      #container #left, #container #right{
         margin: 2px;
      }
      
      #container #main {
         float: left; width: 56%;
      }
      ul#jobs li div.jobs #job-info{
         width: 64%;
         margin-bottom: 0px;
      }
      
      ul#jobs li div.jobs #logo-ort{
         width: 22%;
         float: left;
      }
      
      ul#jobs li div.jobs .job-ort{
         float: left;
         width: auto;
      }
      
      .button.zuruck{
         display: none;   
      }
      
   }
  
   @media all and (max-width: 928px){
      #search_options #searchSimpleTable input[type="text"]{
         width: 54%;
      }
      #search_options .wrapper{
         width: 90%;
      }
      
      #banner #container #show_job_contents {
         width: 100%;
      }
      
   }
   
   @media all and (max-width: 872px){
      #container #main {
         float: right;
         width: 74.5%;
      }
      
      #container #right{
         display: none;
         float: left;
      }
      #container #left .c3.banners{
         display: block;
      }
      
   }
  
  
   @media handheld, only screen and (max-width: 780px), only screen and (max-device-width: 780px) {
      
      #header h1{
         width: 100%;
      }
      
      #header h1 a{
         background: url("/images/img-logo.png") no-repeat scroll 20px 0 / 80% rgba(0, 0, 0, 0);
         display: block;
         height: 103px;
         margin: 0 auto;
         width: 28%;
      }
      
      #high_impact_banners {
         height: 140px;
      }
      
      #high_impact_banners #banner_wrapper p{
         display: none;
      }
      
      #container #right, #container #left, #show_job_buttons{
         display: none;
      }
      
      .btn-bewerben{
         display: block;
         margin-left: 10px;
      }
      
      #search_box{
         border: medium none;
      }
      
      #search_options .wrapper {
         margin: 0 15px;
      }
      
      #container #main{
         width: 100%;
         margin: auto 5px;
      }
      
      ul#jobs li div.jobs h4 a {
         /*font-size: 120%;*/
      }
      
      h1#aktuelle{
         margin-left: 2%;
      }
      
      #container #main #search_results h2{
         /*font-size: 140%;*/
         margin-left: 1%;
      }
      
      
      #content #search_results p#results{
         margin-left: 1%;
      }
      
      ul#jobs li div.jobs #job-info{
         width: 100%;
      }
      
      ul#jobs li div.jobs #logo-ort{
         display: none;
      }
      
      ul#jobs li div.jobs #job-info{
         width: 100%;
      }
      
      ul#jobs li {
        /* min-height: 60px;
         height: auto !important;*/
      }
      
      ul#jobs li div.jobs #job-info {
         /*margin-bottom: 4px;
         margin-top: 7px;*/
      }
      
      #banner #container #show_job_contents {
         width: 100%;
      }
      
      #applied-notice{
         margin: 5px 15px;
      }
     
   }



    @media handheld, only screen and (max-width: 624px), only screen and (max-device-width: 624px) {
        #header h1 a{
            background: url("/images/img-logo.png") no-repeat scroll 20px 0 / 80% rgba(0, 0, 0, 0);
            display: block;
            height: 125px;
            margin: 0 auto;
            width: 28%;
        }
    }

  /* =Media query for iPad and tablets
  -------------------------------------------------------------- */
   @media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px){
      
      #container #right, #container #left, .google_banner_left{
         display: none;
      }
      #banner #container #show_job_contents {
         width: 100%;
      }
      
   }
 
   @media handheld, only screen and (max-width: 736px), only screen and (max-device-width: 736px) {
      
      
      #apply_content, #daten-formula, .flash_message {
         margin: 0;
         width: 97%;
      }
            
      #apply_content h2, #apply_content > div{
         margin-left: 15px;
      }
      
      form#apply_mailer textarea#apply_body{
         width: 96%;
      }
      
      #daten-formula .entry{
         width: 96% !important;
      }
      
      #daten-formula .entry.mail input{
         width: 100%;
      }
      
      #daten-formula .entry p{
         margin-top: 0px;
      }
      
      
      #daten-formula.captcha {
          width: 98% !important;
      }
      
      #daten-formula .entry p{
         margin-top: 20px;
         margin-left: 0;
      }
      
      #daten-formula .entry.send-me p{
         margin-top: 0;
      }
      
      #daten-formula .entry-row .emtry.name.send-me{
         width: 96%;
      }
      #apply_content #daten-formula{
         width: 94.5%;
      }
      form#apply_mailer a.cancel{
         margin: 25px 5px;
      }
   }
 
   
   @media handheld, only screen and (max-width: 704px), only screen and (max-device-width: 704px) {
      
      #header h1 a{
         width: 30%;
      }
     
      #search_options{
         height: auto; 
      }
      #search_type{
         width: calc();
      }
      
      
      #search_type a.detail, #search_type a.stellen{
         width: 49%;
      }
      
      #search_options .wrapper {
         margin: 0 auto;
         max-width: 960px;
         width: 94%;
      }
      
      #search_options #searchDetailsTable .field{
         margin: 0px;
      }
      
      #search_options #searchDetailsTable .field{
         width: 100%;
      }
     
      #search_options #searchDetailsTable .field.field-button{
         float: left;
         margin-top: 10px;
      }
      
      #search_options #searchSimpleTable .field input#search_submit{
         margin-top: 10px;
         width: calc();
      }
      
      #search_box .dropdown-wohnort{
         margin-left: 7px;
      }
      
      #search_options #searchDetailsTable .field > label{
         font-size: 20px;
         margin: 1% 0 0 0;
      }
            
      #search_options #searchSimpleTable .field > label{
         display: block;
         font-size: 20px;
         text-align: left;
         width: 100%;
      }
      
      #search_options #searchSimpleTable .field{
         width: 100%;
      }
      #search_options #searchSimpleTable input[type="text"]{
         margin-left: 0;
         width: 98%;
      }
      #search_box form .dropdown, #search_box .dropdown-wohnort{
         margin-left: 6px;
         margin-top: 20px;
      }
      #search_box .dropdown-schnellSuche{
         margin-left: 0;
         margin-top: 16px;
      }
      
      #content {
         padding: 14px 3% 0;
      }
      .pagination{
         margin-left: 10px;
      }
      
      #search_box .dropdown-schnellSuche{
         left: 0;
         top: 18px;
      }
   }
 
   @media handheld, only screen and (max-width: 624px), only screen and (max-device-width: 624px) {
      #header h1 a{
         width: 44%;
      }
      #search_options #searchSimpleTable input[type="text"] {
         margin-left: 0;
         width: 95%;
      }
      #search_type {
         width: auto;
      }
      
      #search_type a.detail, #search_type a.stellen{
         width: 44%;
      }
      #search_box .dropdown-schnellSuche{
         left: 0;
         top: 18px;
      }
      
      #search_box .dropdown-schnellSuche{
         left: 0;
         top: 18px;
      }
      
   }
  
  
   @media handheld, only screen and (max-width: 590px), only screen and (max-device-width: 590px) {

      h5.aktiv-links{
          text-align: center;
      }

      #header h1 a{
         width: 46%;
      }
      
      #content {
         padding: 14px 5px 0;
      }
      
      #search_type{
         width: auto;
      }
      
      
      #search_type a.stellen.active, #search_type a.detail.active{
         display: none;
      }
      
      #search_type a.stellen, #search_type a.detail{
         display: block;
         width: 251px;
      }
      
      #content #search_results p#results, #container #main #search_results h2{
         margin-left: 3%;
      }
      
      #search_box .dropdown-schnellSuche{
         left: 0;
         top: 18px;
      }
   }
  
   @media handheld, only screen and (max-width: 428px), only screen and (max-device-width: 428px) {
      .pagination a, .pagination .gap{
         display: none;
      }
      .pagination a.next_page, .pagination a.prev_page{
         display: inline;
      }
      
      #apply_content h2, #apply_content > div, form#apply_mailer textarea#apply_body{
         margin-left: 5px;
      }
      
   }
 
   @media handheld, only screen and (max-width: 426px), only screen and (max-device-width: 426px) {
      #header h1 a{
         width: 50%;
      }
      
      
      #search_type{
         width: auto;
      }
      
      #search_options #searchSimpleTable input[type="text"] {
         margin-left: 0;
         width: 92%;
      }
      
      #search_options #searchDetailsTable .field {
         width: 95%;
      }
      
      #content #search_results p#results, #container #main #search_results h2{
         margin-left: 3%;
      }
      #search_box .dropdown-schnellSuche{
         left: 0;
         top: 18px;
      }
   }
   
   @media handheld, only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
      #header h1 a{
         width: 50%;
      }
      
      ul#jobs li div.jobs h4 a{
         /*font-size: 110%;*/
      }
      
      h1#aktuelle{
         /*font-size: 130%;*/
      }
      
      
      #content #search_results p#results, #container #main #search_results h2{
         margin-left: 3%;
      }
      
      form#apply_mailer #apply_submit {
         background: url("/images/send.png") no-repeat scroll left top / 88% auto transparent;
         height: 122px !important;
      }
      
      #search_box .dropdown-schnellSuche{
         left: 0;
         top: 18px;
      }
   }
   
   
   
   
   body {
      overflow-x: hidden;
    }
    
    /* wrapper styles */
    #main_wrapper {
      position: relative;
      min-height: 100vh;
    }
    
    /* small screens styles */
    @media (max-width: 780px) {
      .sidebar {
        position: absolute;
        top: 0;
        width: 30vw;
        min-height: auto;
      }
      #main_wrapper {
        transform: translateX(0) translateZ(0);
        transition: transform .2s;
        will-change: transform;
      }
    
      /* Button deco */
      [class^="nav-button"] {
        display: block;
        z-index: 1;
        height: 2rem; width: 2rem;
        background-color: transparent;
        background-image: linear-gradient(to right, #333, #333),
          linear-gradient(to right, #333, #333),
          linear-gradient(to right, #333, #333);
        background-position: center top, center, center bottom;
        background-repeat: no-repeat;
        background-size: 2.5rem .4rem;
        padding: 0;
        outline: 0;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
      }
      
      /* here's goes the push left effect */
      body:target #main_wrapper {
        transform: translateX(30vw);
      }
      .nav-button-close,
      body:target .nav-button-open {
        display: none;
      }
      .nav-button-open,
      body:target .nav-button-close {
        display: block;
      }
      
      .sidebar {
         display: block !important;
         background-color: #7BA708;
      }
      
    } /* end of small screen media query */

/* Global deco */
*   
   #main_wrapper {
   }
   .sidebar {
      padding-top: 1em;
      color: #ddd;
      display: none;
   }
   
    nav a {
      display: block;
      padding: .7em;
      margin-bottom: 2px;
      text-decoration: none;
      color: #fff;
      font-weight: bold;
    }


   .nav-button-open, .nav-button-close{
      position: absolute;
      margin: 15px 10px;
       background-image: linear-gradient(to right, #7BA708, #7BA708),
          linear-gradient(to right, #7BA708, #7BA708),
          linear-gradient(to right, #7BA708, #7BA708);
   }
   
   .sidebar nav a{
      font-size: 1.4em;
      border-bottom: 2px solid;
      text-decoration: none;
   }
   
   
   .sidebar nav a:first-child{
      padding-top: 0;
   }
   
   
   .content_buttons a{
      box-shadow: 0.5px 3px 4.5px #aaa;
      background-color: #00DAF8;
      border: 1px solid #fcfcfc;
      color: #000;
      display: inline-block;
      float: left;
      font-size: 16px;
      padding: 10px 12px;
      text-align: center;
      width: 167px;
      border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      font-weight: 700;
      text-decoration: none;
      margin: 0 10px;
      margin-bottom: 10px;
   }
   .application-text-contents > div{
      display: none;
   }