/********************************************************
    technical implementation and changes
    c4it.at|oby(oburny)|pfh(peter f. hall)
    http://c4it.at  //  peter.hall@c4it.at
     settings aditional to assets/main.css

    created: 11.2015
    changed: 09.2016 - Änderungen an Webseite
    changed: 03.2018 - Alles auf css Regeln umgestellt und versch. Anzeigen nachgebessert
    changed: 03.2019 - css IMPORT für die 'InfoBox'   - der Übersichtlichkeit wegen
**********************************************************/

/* nachträglich eingebaute zusätzliche Bereiche */
@import url(c4waap.css);
@import url(c4cookie.css);
@import url(c4sticky.css);
@import url(c4InfoBox.css);


/* all @media screen */

    /* body & main wrapper  */
        #main-wrapper { padding: 7% 0 0 0; }

    /* Header - statischer hg wg Menü und Sticky am Handy -> oby 20.3.18 */
    	#header {
            z-index: 1;
            width: 100%;
            padding: 0 0 0 15%;
            position: absolute;
            background: rgba(222, 222, 222, 1); /* lightgray */
    	}

        /* wechselnde HG Bilder Seite Index */
        	#header-bg {
        	    padding: 25em 0 0 0;
                background-repeat: no-repeat;
                background-position: top;
                background-size: 100%;
	        }

    /* 'box' mit Logo für ursprüngliche Seiten ... */
        #logoimg img {
            /*position: absolute*/
            width: 10em;
            margin: 0 1em 0 1em;
    	    z-index: 3;
        }
        /* #logoimg{
           background-color: rgba(255, 0, 0, 1);
        }*/

    /* Navigation  */
    	#nav {
    	    z-index: 3;
            position: fixed;
    	    padding: 0.5em 5em 0 0;
    	}
    		#nav ul li a, #nav ul li span {
                background-color: rgba(214, 214, 214, 0.2);
                color: rgba(41, 41, 41, 1);
    		}
                #nav ul li:hover a, #nav ul li:hover span { background: rgba(143, 143, 143, 1); }
                #nav ul li.current a {
                    background-color: rgba(102, 102, 102, 0.5);
                    color: #fff;
                }

            /* Sidemenu - (in personalberatung.php) */
            #sidemenu ul { text-align: center; }
            #sidemenu li {
                    padding: 0.6em 0 0.6em 0;
                    margin: 0.5em 0 0 0;
                    background: rgba(64, 64, 64, 0.3)
            }

    /* für Fußzeile, Networking, ... */
        #footer { font-size: 0.9em; }
    	#network {
    		position: absolute;
    		margin: -3em 0 0 65%;
    		font-size: 0.9em;
    	}
    		#network ul li {
    			float: left;
    			line-height: 0.5em;
    			padding-left: 1em;
    		}
        /*  Telefon, Email, Social Network Icons, ... */
            .fa-facebook { color: rgba(0, 61, 184, 1.0); }
            .fa-xing { color: rgba(0, 122, 122, 1); }

    /* sonstige Bereiche für einzelne Seiten */
        /* für ci - rechtlicher Hinweis fb Button */
            #fb {
                line-height: 1.1em;
                font-size: 0.8em;
            }

        /* Seite Jobs aus DB */
        	.jobsdiv {
        	    width: 60%;
                overflow: auto;
                height: 30em;
        	}
            	.jobsdiv img {
            	    width: 6em;
            	}

        /* boxen für Bereiche Mitarbeitersuche (index und personalberatung*/
            .box.feature {background: rgba(240, 240, 240, 1);}
                .box.feature p {text-align: center;}
                .box.feature img {width: 100%;}
                .box.feature h1 {    /* h3 -> h1 oby 26.8.18 */
            	    font-size: 1.2em;
                    text-align: center;
                    color: rgba(0, 0, 0, 1);
                    line-height: 1em;
            	}
                .box.feature a {text-decoration: none;}

        /* boxen für Bereiche Mitarbeitersuche (personalberatung 5x) */
            article ul {
                margin-left: 4em;
                list-style-type: disc;
                line-height: 1.4em;
            }
            article p {
                line-height: 1.2em;
                color:#696969;
            }
            article h1 { text-align: left; } /* h3 -> h1 oby 26.8.18 */

        /* Sidebars für Bereiche Mitarbeitersuche (personalberatung 5x) */
            #sidebar section, h1 { text-align: center; }  /* h3 -> h1 oby 26.8.18 */
            #sidebar img {
                width: 100%;
                text-align: center;
            }

        /* Container & Content werden auf faste allen Seiten für Inhalt verwendet */
        	.container h1 { text-align: center; }
        	.container p { text-align: justify; }
        	.container img { width: 70%; }
            #content p { color: rgba(38, 38, 38, 1); }
            #content { margin: 0 5% 0 5%; }

        /* Anzeige der Jobs in Liste */
            .jobliste { line-height: 120%; }
            .joblistem { line-height: 100%; } /* mobile Anzeige */

        /* Für Onlinebewerbung Eingabeseite */
            input[type=checkbox] {
                /* Double-sized Checkboxes */
                -ms-transform: scale(2); /* IE */
                -moz-transform: scale(2); /* FF */
                -webkit-transform: scale(2); /* Safari and Chrome */
                -o-transform: scale(2); /* Opera */
                transform: scale(2); /* IE */
                padding: 10px;
            }

            .checkboxtext {
                font-size: 105%;
                display: inline-block;
                line-height: 20px;
            }

@media screen and (max-width: 1680px) {
    /* wechselnde HG Bilder Seite Index */
	#header-bg { padding: 30em 0 0 0; }

    /* 'box' mit Logo für ursprüngliche Seiten ... */
    #logoimg img { width: 10em; }

    /* sonstige Bereiche für einzelne Seiten */
        /* Seite Jobs aus DB */
    	.jobsdiv { width: 60%; }

        /* boxen für Bereiche Mitarbeitersuche (index und personalberatung*/
        .box.feature h1 {  /* h3 -> h1 oby 26.8.18 */
    	    font-size: 1.1em;
            line-height: 1.3em;
        }

    /* für Fußzeile, Networking, ... */
    #footer{ font-size: 0.8em; }

}

@media screen and (max-width: 1280px) {

    /* wechselnde HG Bilder Seite Index */
    #header-bg { padding: 25em 0 0 0; }

    /* 'box' mit Logo für ursprüngliche Seiten ... */
    #logoimg img { width: 8em; }

    /* sonstige Bereiche für einzelne Seiten */
        /* Seite Jobs aus DB */
    	.jobsdiv { width: 80%; }

    /* für Fußzeile, Networking, ... */
    #footer{ font-size: 0.75em; }
	#network {
		margin: -3em 0 0 60%;
        text-align: center;
		font-size: 1em;
	}

}

@media screen and (max-width: 980px) {

    /* wechselnde HG Bilder Seite Index */
    #header-bg { padding: 19em 0 0 0; }

    /* 'box' mit Logo für ursprüngliche Seiten ... */
    #logoimg img { width: 7em; }

    /* sonstige Bereiche für einzelne Seiten */
        /* Seite Jobs aus DB */
        .jobsdiv {
            width: 90%;
            margin: 0 0 0 3.3em;  /* 2017-11-28 */
        }

        /* boxen für Bereiche Mitarbeitersuche (index und personalberatung*/
        .box.feature h1 {  /* h3 -> h1 oby 26.8.18 */
    	    font-size: 1.4em;
            line-height: 1.5em;
        }

        /* Für Onlinebewerbung Eingabeseite */
        #textbox {
            margin: 0 0 0 3.3em;  /* 2017-11-28 */
        }

    /* für Fußzeile, Networking, ... */
    #footer{ font-size: 1em; }
    #network {
        margin: -5em 0 0 20%;
    }

}

@media screen and (max-width: 736px) {
	.jobsdiv
    {
	    width: 100%;
	}

    #logoimg img {
        width: 35%;
        padding-top: 0em;
        padding-right: 1em;
    }

	#header-bg {
	    padding: 30em 0 0 0;
	}

	#header {
	    text-align: left;
        position: fixed;
        margin: 0 0 20% 0;
    }

    #main-wrapper {
        padding: 1% 0 0 0;
     }

	#network {
		margin: -6em 0 0 0;
        text-align: center;
		font-size: 1em;
	}

    .box.feature h1 { /* h3 -> h1 oby 26.8.18 */
	    font-size: 1.4em;
        line-height: 1.5em;
    }

    #footer{
        font-size: 1.1em;
    }

	.row {
		margin: 15em 0 0 0;
	}

}

@media screen and (max-width: 480px) {

    #logoimg img {
        width: 35%;
    }

	.row {
		margin: 10em 0 0 0;
	}

}

@media screen and (max-width: 360px) {

    #logoimg img {
        width: 30%;
    }

	.row {
		margin: 11em 0 0 0;
	}

}