Wir lassen uns gern in die Karten schauen

Ihr Design - Unser Code. Beispielcode der Umsetzung eines Online Job Portals. 

	    <html>
	    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
	    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	        <head>
	            <meta charset="utf-8">
	            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	            <title>Stellenboard - Index</title>
	            <meta name="description" content="">
	            <meta name="viewport" content="width=device-width">
	            <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	            <link rel="stylesheet" href="css/normalize.css">
	            <link rel="stylesheet" href="css/main.css">
	            <link rel="stylesheet" href="css/uniform.default.css">
	            <link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,700italic,700" rel="stylesheet" type="text/css">
	            <script src="js/vendor/modernizr-2.6.2.min.js"></script>
	        </head>
	        <body class="home">
	            <!--[if lt IE 7]>
	                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
	            <![endif]-->
	            <header id="header">
	                <div>
	                    <a class="logo" href="#"><img src="gfx/logoStellenboard.png" alt="Stellenboard"/><strong>Stellenboard</strong></a>
	                    <nav class="nav-main">
	                        <ul>
	                            <li><a href="#">Start</a></li>
	                            <li><a href="#">(Lato, Bold)</a></li>
	                            <li><a href="#">(18px)</a></li>
	                        </ul>
	                    </nav>
	                    <nav class="nav-meta">
	                        <ul>
	                            <li><a href="#">Job einstellen</a></li>
	                            <li class="login"><a href="#">Login</a></li>
	                        </ul>
	                    </nav>
	                    <div class="box box-left">
	                        <div class="inner">
	                            <h2>Job sucheN</h2>
	                            <form method="get" action="#">
	                                <input type="text" class="text" value="was?"/>
	                                <input type="text" class="text" value="wo?"/>
	                                <input type="submit" value="" class="submit"/>
	                            </form>
	                        </div>
	                        <span class="ico"></span>
	                    </div>
	                    <div class="box box-right">
	                        <div class="inner">
	                            <h2>Job Anbieten</h2>
	                            <a href="#" class="universal-button block">Jobangebot einstellen</a>
	                        </div>
	                        <span class="ico"></span>
	                    </div>
	                </div>
	            </header>
	            <div id="page">
	                <div class="wrapper">
	                    <div class="col2-wrap cols-50-50 no-border-bottom clearfix">
	                        <div class="col col-left">
	                            <header class="page-title">
	                                <h2>Jobs der Woche (Lato, Bold, 24px)</h2>
	                            </header>
	                            <div class="content-shadow">
	                                <ul class="positions-list search-result">
	                                    <li>
	                                        <p>eingestellt am: 03.08.2014</p>
	                                        <h2>Junior Controller (m/w) (Lucida, Regular, 18px, #f45c00) </h2>
	                                        <h3>HUGO BOSS AG (Lucida, Reg, 12px, #17212b)</h3>
	                                        <h4>Switzerland,  Zug (CH)</h4>
	                                        <a href="#" class="detail bottom">zum Jobangebot</a>
	                                        <img src="gfx/logos/hugoboss.png" alt="">
	                                    </li>
	                                    <li>
	                                        <p>eingestellt am: 03.08.2014</p>
	                                        <h2><a href="#">Head of Collection (m/f)</a></h2>
	                                        <h3><a href="#">Hays AG</a></h3>
	                                        <h4><a href="#">United Kingdom, Vietnam</a></h4>
	                                        <a href="#" class="detail bottom">zum Jobangebot</a>
	                                        <img src="gfx/logos/hays.png" alt="">
	                                        <span class="topjob"></span>
	                                    </li>
	                                    <li>
	                                        <p>eingestellt am: 03.08.2014</p>
	                                        <h2>Investment Funds Customer Service Officer German speaking</h2>
	                                        <h3>Clearstream Services Lux</h3>
	                                        <h4>Luxembourg, Luxembourg</h4>
	                                        <a href="#" class="detail bottom">zum Jobangebot</a>
	                                        <img src="gfx/logos/clearstream.png" alt="">
	                                    </li>
	                                    <li>
	                                        <p>eingestellt am: 03.08.2014</p>
	                                        <h2>Kaufmann für internationale Bauprojekte</h2>
	                                        <h3>Julius Berger International</h3>
	                                        <h4>United Kingdom, Nigeria</h4>
	                                        <a href="#" class="detail bottom">zum Jobangebot</a>
	                                        <img src="gfx/logos/juliusberger.png" alt="">
	                                    </li>
	                                    <li>
	                                        <p>eingestellt am: 03.08.2014</p>
	                                        <h2>Head of Collection (m/f)</h2>
	                                        <h3>Hays AG</h3>
	                                        <h4>United Kingdom, Vietnam</h4>
	                                        <a href="#" class="detail bottom">zum Jobangebot</a>
	                                        <span class="topjob"></span>
	                                    </li>
	                                    <li>
	                                        <p>eingestellt am: 03.08.2014</p>
	                                        <h2>Investment Funds Customer Service Officer</h2>
	                                        <h3>Clearstream Services Lux</h3>
	                                        <h4>Luxembourg, Luxembourg</h4>
	                                        <a href="#" class="detail bottom">zum Jobangebot</a>
	                                        <img src="gfx/logos/clearstream.png" alt="">
	                                    </li>
	                                </ul>
	                                <a href="#" class="universal-button">alle Jobangebote (Lato, bold)</a>
	                            </div>
	                        </div>
	                        <div class="col col-right">
	                            <header class="page-title">
	                                <h2>Häufige Suchbegriffe</h2>
	                            </header>
	                            <div class="content-shadow">
	                                <div class="boxes-wrap clearfix">
	                                    <section class="orange">
	                                        <div class="list clearfix">
	                                            <ul>
	                                                <li class="ico-search"><a href="#">Online</a></li>
	                                                <li class="ico-search"><a href="#">Jobbörse</a></li>
	                                                <li class="ico-search"><a href="#">Business Jobs</a></li>
	                                                <li class="ico-search"><a href="#">Karriere</a></li>
	                                                <li class="ico-search"><a href="#">Jobs</a></li>
	                                            </ul>
	                                            <ul>
	                                                <li class="ico-search"><a href="#">Saisonjobs</a></li>
	                                                <li class="ico-search"><a href="#">Praktikum</a></li>
	                                                <li class="ico-search"><a href="#">Aushilfsjobs</a></li>
	                                                <li class="ico-book"><a href="#">Minijob</a></li>
	                                                <li class="ico-book"><a href="#">Gehaltsrechner</a></li>
	                                            </ul>
	                                        </div>
	                                    </section>
	                                    <section class="blue">
	                                        <h3>Regionen</h3>
	                                        <div class="list clearfix">
	                                            <ul>
	                                                <li class="ico-flag"><a href="#">Berlin</a></li>
	                                                <li class="ico-flag"><a href="#">Frankfurt</a></li>
	                                                <li class="ico-flag"><a href="#">Hamburg</a></li>
	                                                <li class="ico-flag"><a href="#">München</a></li>
	                                                <li class="ico-flag"><a href="#">Stuttgard</a></li>
	                                            </ul>
	                                            <ul>
	                                                <li class="ico-flag"><a href="#">Kassel</a></li>
	                                                <li class="ico-flag"><a href="#">Nürnberg</a></li>
	                                                <li class="ico-flag"><a href="#">Kiel</a></li>
	                                                <li class="ico-flag"><a href="#">Aachen</a></li>
	                                                <li class="ico-flag"><a href="#">Düsseldorf</a></li>
	                                            </ul>
	                                        </div>
	                                    </section>
	                                    <section class="green last">
	                                        <h3><a href="#">Karrierelevel</a></h3><!-- h3 can be link or normal text -->
	                                        <div class="list clearfix">
	                                            <ul>
	                                                <li class="ico-level"><a href="#">Praktikum</a></li>
	                                                <li class="ico-level"><a href="#">Trainee</a></li>
	                                                <li class="ico-level"><a href="#">Absolventen</a></li>
	                                                <li class="ico-level"><a href="#">Proffesionals</a></li>
	                                            </ul>
	                                        </div>
	                                    </section>
	                                </div>
	                            </div>
	                            <section class="box-jobangebot">
	                                <div>
	                                    <h2>Jobangebot Einstellen</h2>
	                                    <p>Lorem ipsum dolor sit amet, con-<br />sectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	                                    <a href="#" class="universal-button">Job einstellen (14px)</a>
	                                </div>
	                            </section>
	                        </div>
	                    </div>
	                    <section class="box-arbeitnehmer">
	                        <div>
	                            <h2>Finden sie den perfekten Arbeitnehmer (Lato, Bold, 24px, #17212b)</h2>
	                            <p>(Lato, Reg, 14px, #17212b) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	                            <a href="#" class="universal-button">mehr erfahren</a>
	                        </div>
	                    </section>
	                </div>
	            </div>
	            <footer id="footer">
	                <div>
	                    <nav>
	                        <ul>
	                            <li><a href="#">AGB</a></li>
	                            <li><a href="#">Impressum</a></li>
	                            <li><a href="#">Kontakt</a></li>
	                        </ul>
	                    </nav>
	                </div>
	            </footer>
	            <script src="js/vendor/jquery-1.11.1.min.js"></script>
	            <script src="js/plugins.js"></script>
	            <script src="js/main.js"></script>
	        </body>
	    </html>
	    
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #17212b;
    font-family: 'Lato', sans-serif;
}

button::-moz-focus-inner { padding:0; border:0; } /* FF Fix */

body {
    font-size: 14px;
    line-height: 22px;
    background: #ec8300;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #efecec;
    margin: 0 0 16px;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/* ==========================================================================
   Stellenboard styles
   ========================================================================== */
   
body {
    
}

a{
    color: #17212b;
    text-decoration: underline;
}

a:hover{
    text-decoration: underline;
}

h1 a,
h2 a,
h3 a,
h4 a{
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover{
    text-decoration: underline;
}

#page{
    background: #f1f1f1;
}

#header > div,
.wrapper,
#footer div,
.page-title{
    margin: 0 auto;
    width: 1000px;
    position: relative;
}

.wrapper{
    padding: 26px 0 1px;
}

.wrapper .content-shadow{
    padding: 19px 40px;
    background: #fff;
    -moz-box-shadow: -3px 2px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: -3px 2px 5px rgba(0,0,0,0.1);
    box-shadow: -3px 2px 5px rgba(0,0,0,0.1);
    margin: 0 0 20px;
}

.home .wrapper .col-right .content-shadow{
    padding: 0;
}

.home .wrapper .col-left .content-shadow{
    margin: 0;
}  

#header{
    width: 100%;
    height: 127px;
    background: url(../gfx/headerHintergrund.jpg) center top no-repeat;
    border-bottom: 5px solid #fff;
}

.home #header {
    height: 320px;
}

#header > div{
    height: 127px;
    background: url(../gfx/headerHintergrund.jpg) center top no-repeat;
}

#header .logo{
    left: 0;
    top: 18px;
    position: absolute;
}

#header .logo strong{
    top: -1000px;
    position: absolute;
}

#header nav.nav-main{
    position: absolute;
    left: 232px;
    top: 27px;
}

#header nav.nav-main ul{
    margin: 0;
    padding: 0;
}

#header nav.nav-main ul li{
    margin: 0 21px 0 0;
    padding: 0;
    float: left;
}

#header nav.nav-main ul li a{
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    line-height: 22px;
}

#header nav.nav-main ul li a:hover{
    text-decoration: underline;
}

#header nav.nav-meta{
    position: absolute;
    right: 0;
    top: 27px;
}

#header nav.nav-meta ul{
    margin: 0;
    padding: 0;
}

#header nav.nav-meta ul li{
    margin: 0 0 0 21px;
    padding: 0;
    float: left;
}

#header nav.nav-meta ul li a{
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    line-height: 22px;
}

#header nav.nav-meta ul li.login a{
    padding-right: 26px;
    background: url(../gfx/iconLogin.png) right 0 no-repeat;
}

#header nav.nav-meta ul li a:hover{
    text-decoration: underline;
}

#header .box{
    position: absolute;
    top: 152px;
    background: url(../gfx/bg-block.png);
    width: 490px;
    height: 120px;
}

#header .box.box-left{
    left: 0;
}

#header .box.box-right{
    right: 0;
}

#header .box span.ico{
    position: absolute;
    display: block;
}

#header .box.box-left span.ico{
    width: 52px;
    height: 57px;
    left: 40px;
    top: 29px;
    background: url(../gfx/iconSucheGross.png);
}

#header .box.box-right span.ico{
    width: 44px;
    height: 67px;
    left: 40px;
    top: 25px;
    background: url(../gfx/iconJobanbietenGross.png);
}

#header .box.box-left .inner{
    width: 335px;
    margin-left: 113px;
}

#header .box.box-left .inner form input.text{
    display: block;
    font-family: 'Lato';
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    margin: 0 10px 0 0;
    padding: 0 10px;
    line-height: 36px;
    height: 36px;
    width: 116px;
    border: 1px solid #685b4e;
    background: url(../gfx/bg-input.png);
    float: left;
}

#header .box.box-left .inner form input.submit{
    display: block;
    line-height: 38px;
    height: 38px;
    width: 38px;
    border: 0;
    background: url(../gfx/iconSucheKlein.png) center center no-repeat #17212b;
    float: left;
}

#header .box.box-right .inner{
    width: 287px;
    margin-left: 133px;
}

#header .box .inner h2{
    font-weight: bold;
    font-size: 24px;
    margin: 0;
    line-height: 27px;
    padding: 17px 0 13px;
    text-transform: uppercase;
}

#header .box.box-left .inner h2{
    text-align: left;
    color: #ec8300;
    text-indent: 68px;
}

#header .box.box-right .inner h2{
    text-align: center;
    color: #d8d820;
}

#header .box.box-right .inner .universal-button{
    margin: 0; 
}

.page-title{
    height: 57px;
    background: #17212b;
    position: absolute;
    top: -32px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.home .page-title{
    top: -57px;
}

.page-title h1,
.page-title h2{
    line-height: 54px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    margin: 0;
    padding: 0 0 0 37px;
    text-transform: uppercase;
}

#footer{
    width: 100%;
    height: 200px;
    background: url(../gfx/footerHintergrund.jpg) center top no-repeat;
    border-top: 5px solid #fff;
}

#footer > div{
    height: 200px;
    background: url(../gfx/footerHintergrund.jpg) center top no-repeat;
}

#footer ul{
    margin: 0;
    padding: 50px 0 0 0;
}

#footer ul li{
    margin: 0;
    padding: 0 10px 0 0;
    float: left;
}

#footer ul li a{
    color: #fff;
    text-decoration: none;
}

#footer ul li a:hover{
    color: #fff;
    text-decoration: underline;
}

#accordion{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #efecec;
}

#accordion dt{
    line-height: 51px;
    font-size: 18px;
    font-family: arial, sans-serif;
    font-weight: normal;
    color: #f45c00;
    background: url(../gfx/arrow-right.png) left center no-repeat;
    cursor: pointer;
    border-top: 1px solid #efecec;
    padding: 0 0 0 18px;
}

#accordion dt:first-child{
    border-top: 0;
}

#accordion dt.opened{
    background: url(../gfx/arrow-down.png) left center no-repeat;
}

#accordion dd{
    padding: 0 0 0 18px;
    margin: -5px 0 0;
    display: none;
}

#accordion dd p{
    margin: 0 0 21px;
}

#accordion dd p.last{
    margin: 0 0 17px;
}

.box-arbeitnehmer{
    width: 1000px;
    height: 254px;
    margin: 0 0 20px;
    background: url(../gfx/boxArbeitnehmerHintergrund.jpg) left top no-repeat;
}

.box-arbeitnehmer > div{
    padding: 33px 39px;
}

.box-arbeitnehmer h2{
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.box-arbeitnehmer p{
    line-height: 18px;
    margin: 0 450px 35px 0;
}

.box-jobangebot{
    width: 490px;
    height: 277px;
    margin: 0;
    background: url(../gfx/boxJobEinstellenHintergrund.jpg) left top no-repeat;
}

.box-jobangebot > div{
    padding: 33px 39px;
}

.box-jobangebot h2{
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.box-jobangebot p{
    line-height: 18px;
    margin: 0 200px 35px 0;
}

.universal-button{
    line-height: 38px;
    padding: 0;
    display: inline-block;
    background: #17212b;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    width: 205px;
    text-align: center;
    text-decoration: none;
}

.universal-button:hover{
    text-decoration: none;
}

.universal-button.green{
    line-height: 58px;
    background: #00bd9a;
    font-size: 18px;
}

.universal-button.block{
    padding: 0;
    display: block;
    text-align: center;
    margin-top: 40px;
    width: auto;
}

.boxes-wrap{
    margin: 0 0 20px;
}

.boxes-wrap section{
    float: left;
    width: 320px;
    background: #fff;
    -moz-box-shadow: -3px 2px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: -3px 2px 5px rgba(0,0,0,0.1);
    box-shadow: -3px 2px 5px rgba(0,0,0,0.1);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 38px 10px 35px 40px;
    margin-right: 20px;
}

.home .col-right .boxes-wrap section{
    margin-right: 0;
    border-bottom: 8px solid #17212b;
    width: auto;
    float: none;
    padding-top: 35px;
}

.boxes-wrap section.last{
    margin-right: 0;
    border: 0 !important;
}

.boxes-wrap section h3{
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    padding: 0;
}

.boxes-wrap section.blue h3,
.boxes-wrap section.blue h3 a{
    color: #00a284;
}

.boxes-wrap section.green h3,
.boxes-wrap section.green h3 a{
    color: #bfba1b;
}

.boxes-wrap section.orange h3,
.boxes-wrap section.orange h3 a{
    color: #ef7a22;
}

.home .col-right .boxes-wrap section h3,
.home .col-right .boxes-wrap section h3 a{
    color: #17212b !important;
}

.home .col-right .boxes-wrap section.blue {
    background: #00c0b5;
}

.home .col-right .boxes-wrap section.green {
    background: #c3c917;
}

.home .col-right .boxes-wrap section.orange {
    background: #ec8300;
}

.boxes-wrap section h3 a{
    text-decoration: none;
}

.boxes-wrap section h3 a:hover{
    text-decoration: underline;
}

.boxes-wrap section .list ul{
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.home .col-right .boxes-wrap section .list ul{
    width: 47%;
}

.boxes-wrap section .list ul li{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.boxes-wrap section .list ul li a{
    text-decoration: none;
    padding-left: 20px;
}

.home .col-right .boxes-wrap section .list ul li a{
    color: #fff;
}

.boxes-wrap section .list ul li a:hover{
    text-decoration: underline;
}

.boxes-wrap section .list ul li.ico-search a{
    background: url(../gfx/iconLupe.png) left 3px no-repeat;
}

.boxes-wrap section .list ul li.ico-book a{
    background: url(../gfx/iconBuch.png) left 3px no-repeat;
}

.boxes-wrap section .list ul li.ico-flag a{
    background: url(../gfx/iconRegionen.png) left 3px no-repeat;
}

.boxes-wrap section .list ul li.ico-level a{
    background: url(../gfx/iconKarriere.png) left 3px no-repeat;
}

.detail-headers{
    margin: 0 0 35px;
    padding: 13px 0 35px;
    border-bottom: 1px solid #efecec;
}

.detail-headers div.left{
    float: left;
    width: 480px;
}

.detail-headers div.left.long{
    width: 730px;
}

.detail-headers div.right{
    float: left;
    width: 250px;
}

.detail-headers img{
    float: right;
    margin-top: 6px;
}

.detail-headers div h1{
    text-transform: uppercase;
    color: #f45c00;
    font-size: 24px;
    font-weight: bold;
    line-height: 28px;
    margin: 0 0 3px;
}

.detail-headers div h2,
.detail-headers div h3{
    font-family: arial;
}

.detail-headers div h2{
    line-height: 24px;
    font-size: 18px;
    margin: 0 0 3px;
    font-weight: normal;
    text-transform: uppercase;
}

.detail-headers div h3{
    line-height: 18px;
    font-size: 16px;
    margin: 0;
    font-weight: normal;
    color: #009884;
}

.col2-wrap{
    margin: 0 0 20px;
    padding: 0 0 35px;
    border-bottom: 1px solid #efecec;
}

.col2-wrap.no-border-bottom{
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 0;
}

.col2-wrap .col-left{
    float: left;
}

.col2-wrap .col-right{
    float: right;
}

.col2-wrap.cols-50-50 .col-left,
.col2-wrap.cols-50-50 .col-right{
    width: 440px;
}

.home .col2-wrap.cols-50-50 .col-left,
.home .col2-wrap.cols-50-50 .col-right{
    width: 490px;
    position: relative;
}

.col2-wrap.cols-66-33 .col-left{
    width: 620px;
}

.col2-wrap.cols-66-33 .col-right{
    width: 300px;
}

.col2-wrap h4{
    font-family: arial;
}

.data-row {
    border-bottom: 1px solid #efecec;
    padding: 0 0 16px;
    margin: 0 0 16px;
}

.data-row h4{
    float: left;
    margin: 0;
    line-height: 18px;
}

.data-row p{
    float: right;
    margin: 0;
    line-height: 18px;
    max-width: 50%;
    text-align: right;
}

.positions-list {
    margin: 0 0 20px;
    padding: 0;
    list-style-type: none;
}

.positions-list li{
    border-bottom: 1px solid #efecec;
    padding: 14px 0 20px;
    margin: 0;
    position: relative;
}

.positions-list.search-result li{
    padding-right: 140px;
    padding-top: 18px;
}

.positions-list.search-result li img{
    position: absolute;
    top: 20px;
    right: 0;
}

.positions-list li.first{
    padding-top: 0;
}

.positions-list li.last{
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.positions-list li h2{
    font-size: 18px;
    color: #f45c00;
    font-weight: normal;
    line-height: 22px;
    margin: 0 0 1px;
    font-family: arial, sans-serif;
}

.positions-list li h2 a{
    color: #f45c00;
}

.positions-list li h3{
    font-size: 12px;
    color: #17212b;
    font-weight: 300;
    line-height: 14px;
    margin: 0 0 4px;
}

.positions-list li h3 a{
    color: #17212b;
}

.positions-list li h4{
    font-size: 14px;
    color: #00a79d;
    font-family: arial, sans-serif;
    font-weight: normal;
    line-height: 18px;
    margin: 0;
}

.positions-list li h4 a{
    color: #00a79d;
}

.positions-list li p{
    font-size: 12px;
    font-weight: 300;
    line-height: 14px;
    margin: 0 0 7px;
}

.positions-list li a.detail{
    font-size: 12px;
    position: absolute;
    right: 0;
    text-decoration: underline;
}

.positions-list li a.detail.top{
    top: 13px;
}

.positions-list li a.detail.bottom{
    bottom: 15px;
}

.positions-list li.first a.detail.top{
    top: 0;
}

.positions-list li span.topjob{
    position: absolute;
    top: 43px;
    left: -26px;
    background: url(../gfx/iconTopjob.png) 0 0 no-repeat;
    display: block;
    width: 14px;
    height: 13px;
}

.toolbar {
    border-bottom: 1px solid #efecec;
    padding: 0 0 15px;
    margin: -7px 0 0 0;
}

.toolbar > p{
    float: left;
    font-weight: bold;
    margin: 0;
    font-family: arial, sans-serif;
}

.toolbar > a{
    float: right;
    padding-right: 21px;
    background: url(../gfx/arrow-down.png) right 8px no-repeat;
    color: #00a299;
    text-decoration: none;
    font-weight: bold;
}

.form{
    padding: 12px 0 21px 0;
}

.form label{
    display: block;
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #17212b;
    margin: 0;
    padding: 0;
    line-height: 28px;
    font-weight: bold;
}

.form label.checkbox{
    font-weight: normal;
    line-height: 19px;
    margin: 20px 0 12px;
}

.form input.text,
.form textarea{
    display: block;
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #17212b;
    margin: 0 0 12px;
    padding: 0 10px;
    line-height: 40px;
    height: 40px;
    width: 420px;
    border: 0;
    background: #efecec;
}

.form textarea{
    padding: 5px 10px;
    line-height: 18px;
    height: 110px;
    overflow: auto;
}

.form input.submit{
    border: 0;
    height: 38px;
    width: 205px;
    text-align: center;
    background: #17212b;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Lato', arial, sans-serif;
    font-weight: bold;
    margin-top: 8px;
}

.form .col{
    width: 440px;
}

.form .col-left{
    float: left;
}

.form .col-right{
    float: right;
}

.profil-headers{
    margin: 0 0 21px;
    padding: 20px 0 38px;
    border-bottom: 1px solid #efecec;
}

.profil-headers img{
    float: left;
}

.profil-headers a.edit{
    float: right;
    margin-top: 61px;
}

.profil-data-wrap{
    border-bottom: 1px solid #efecec;
    padding: 14px 0 16px;
    position: relative;
}

.profil-data-wrap.ico{
    padding-left: 40px;
}

.profil-data-wrap.ico-standort{
    background: url(../gfx/iconStandort.png) 2px 14px no-repeat;
}

.profil-data-wrap.ico-mitarbeiter{
    background: url(../gfx/iconMitarbeiter.png) 2px 16px no-repeat;
}

.profil-data-wrap.ico-ansprechpartner{
    background: url(../gfx/iconAnsprechpartner.png) 1px 20px no-repeat;
}

.profil-data-wrap.ico-kontakt{
    background: url(../gfx/iconKontakt.png) 1px 22px no-repeat;
}

.profil-data-wrap.ico-method{
    background: url(../gfx/iconBewerbung.png) 1px 21px no-repeat;
}

.profil-data-wrap.last{
    border-bottom: 0;
}

.profil-data-wrap h2{
    font-size: 18px;
    color: #f45c00;
    font-weight: normal;
    line-height: 22px;
    margin: 0 0 6px;
    font-family: arial, sans-serif;
}

.profil-data-wrap p{
    margin: 0;
}

.profil-data-wrap > a{
    position: absolute;
    right: 0;
    top: 14px;
}

.profil-data-wrap .form{
    padding: 0;
    width: 400px;
}

.profil-data-wrap .form input.text,
.profil-data-wrap .form textarea{
    width: 380px;
}

.paging{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.paging li{
    margin: 0 2px 0 0;
    padding: 0;
    list-style-type: none;
    float: left;
}

.paging li.prev{
    margin-right: 10px;
}

.paging li.next{
    margin-right: 0;
    margin-left: 8px;
}

.paging li a{
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-decoration: none;
    text-align: center;
    color: #818181;
    font-weight: bold;
    background: #17212b;
}

.paging li.prev a{
    background: url(../gfx/PagerpfeilLinks.png) center center no-repeat #17212b;
}

.paging li.next a{
    background: url(../gfx/PagerpfeilRechts.png) center center no-repeat #17212b;
}

.paging li a:hover,
.paging li.active a{
    color: #fff;
}

.page-title span.ico-search {
    height: 22px;
    width: 21px;
    display: block;
    cursor: pointer;
    position: absolute;
    right: 39px;
    top: 17px;
    background: url(../gfx/iconLupeSucheKlein.png) 0 0 no-repeat;
}

.search-form-wrap{
    width: 1000px;
    margin: 0;
    padding: 0;
    background: #17212b;
    border-top: 1px solid #fff;
    left: 0;
    top: 57px;
    z-index: 10;
    position: absolute;
    display: none;
}

.search-form-wrap > span{
    height: 9px;
    width: 17px;
    display: block;
    background: url(../gfx/arrow-white.png) 0 0 no-repeat;
    position: absolute;
    right: 40px;
    top: -9px;
    z-index: 10;
}

.search-form-wrap form{
    margin: 0 40px;
    padding: 0 0 30px;
}

.search-form-wrap form fieldset.top{
    border: 0;
    border-bottom: 1px solid #424a52;
    padding: 0;
    margin: 0;
    position: relative;
    height: 80px;
}

.search-form-wrap form fieldset.top input.text{
    display: block;
    font-family: 'Lato', arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #17212b;
    margin: 0 0 12px;
    padding: 0 10px;
    line-height: 38px;
    border: 0;
    background: #efecec;
    position: absolute;
    left: 175px;
    top: 22px;
    width: 337px;
    height: 38px;
}

.search-form-wrap form fieldset.top input.submit{
    border: 0;
    height: 38px;
    width: 205px;
    text-align: center;
    background: #ec8300;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Lato', arial, sans-serif;
    font-weight: bold;
    left: 542px;
    top: 22px;
    position: absolute;
}

.search-form-wrap form fieldset.top > span {
    height: 51px;
    width: 46px;
    display: block;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 14px;
    background: url(../gfx/iconLupeSucheGross.png) 0 0 no-repeat;
}

.search-form-wrap form fieldset.checkboxes{
    width: 25%;
    float: left;
    position: relative;
    padding: 55px 0 0 0;
    margin: 0;
    border: 0;
}

.search-form-wrap form fieldset.checkboxes legend{
    border: 0;
    padding: 0;
    margin: 0;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 55px;
    font-family: arail, sans-serif;
    font-size: 18px;
}

.search-form-wrap form fieldset.checkboxes label{
    padding: 0;
    margin: 0 10px 10px 0;
    color: #fff;
    line-height: 19px;
    font-size: 14px;
    font-weight: 300;
    display: block;
}
	    
$(document).ready(function(){
    
    
    /* ACCORDION */
    $('#accordion dd').each(function(){
        $('p:last',this).addClass('last');
    })
    
    $('#accordion dt').click(function(){
        $(this).next().slideToggle(300);
        $(this).toggleClass('opened');
    })
    
    /* equalizeHeights */
    $('.boxes-wrap section .list').equalizeHeights();
    var rightHeight = $('.home .wrapper .col-right').height();
    var leftHeight = $('.home .wrapper .col-left .content-shadow').height();
    
    if(rightHeight>(leftHeight+38)){
        $('.home .wrapper .col-left .content-shadow').css({
            'height' : (rightHeight-38)+'px'
        })
    }
    
    
    /* UNIFORMJS - NICE FORMS */
    $('.form input[type=checkbox],.search-form-wrap input[type=checkbox]').uniform();
    $('.form input[type=file]').uniform({fileButtonHtml: 'hochladen'});
    
    
    /* INPUT DEFAULT VALUES */
    $('.search-form-wrap form fieldset.top input.text,#header .box.box-left .inner form input.text').defaultValues();
    
    
    /* SEARCH FORM */
    $('.page-title span.ico-search').click(function(){
        var formHeight = $('.search-form-wrap').height();
        var formWrap = $('.search-form-wrap');
        if(formWrap.hasClass('opened')){
            formWrap.stop().slideUp(500, function(){
                formWrap.removeClass('opened');
            })
            $('.wrapper .content-shadow').animate({
                'margin-top' : 0
            }, 500);
        }else{
            formWrap.stop().slideDown(500, function(){
                formWrap.addClass('opened');
            })
            $('.wrapper .content-shadow').animate({
                'margin-top' : formHeight+"px"
            }, 500);
        }
        
    })
    
    
    
})