css datei

/*Patrick Edit*/

*{

    box-sizing: border-box;

}



/* $Responsive */

.section {

    clear: both;

    padding: auto;

    margin: -2% 0;

    float:bottom;

}

.group:before, .group:after {

    content: "";

    display: table;

}

.group:after { clear: both; }

.group { zoom: 0; }

.col {

    display: block;

    float: left;

    margin: 0;

}

/*Boxen*/

.boxneu {
    background-color:#fffcd6;
    border: solid 1px #dbdbdb;
    color: #7b7b7b;
    text-shadow: #ffffff 1px 1px 1px;
    position: relative;
    width: 90%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.span_1_of_12 { width: 8.33%; }

.span_1_of_11 { width: 9.09%; }

.span_1_of_10 { width: 10%; }

.span_1_of_9 { width: 11.11%; }

.span_own_test { width: 11.11%; }

.span_1_of_8 { width: 12.5%; }

.span_1_of_7 { width: 14.28%; }

.span_1_of_6,

.span_2_of_12 { width: 16.66%; }

.span_2_of_11 { width: 18.18%; }

.span_1_of_5,

.span_2_of_10 { width: 20%; }

.span_2_of_9 { width: 22.22%; }

.span_1_of_4,

.span_2_of_8,

.span_3_of_12 { width: 25%; }

.span_3_of_11 { width: 27.27%; }

.span_2_of_7 { width: 28.57%; }

.span_3_of_10 { width: 30%; }

.span_1_of_3,

.span_2_of_6,

.span_3_of_9,

.span_4_of_12 { width: 33.33%; }

.span_4_of_11 { width: 36.36%; }

.span_3_of_8 { width: 37.5%; }

.span_2_of_5,

.span_4_of_10 { width: 40%; }

.span_5_of_12 { width: 41.66%; }

.span_3_of_7 { width: 42.85%; }

.span_4_of_9 { width: 44.44%; }

.span_5_of_11 { width: 45.45%; }

.span_1_of_2,

.span_2_of_4,

.span_3_of_6,

.span_4_of_8,

.span_5_of_10,

.span_6_of_12 { width: 50%; }

.span_6_of_11 { width: 54.54%; }

.span_5_of_9 { width: 55.55%; }

.span_4_of_7 { width: 57.14%; }

.span_7_of_12 { width: 58.33%; }

.span_3_of_5,

.span_6_of_10 { width: 60%; }

.span_5_of_8 { width: 62.5%; }

.span_7_of_11 { width: 63.63%; }

.span_2_of_3,

.span_4_of_6,

.span_6_of_9,

.span_8_of_12 { width: 66.66%; }

.span_7_of_10 { width: 70%; }

.span_5_of_7 { width: 71.42%; }

.span_8_of_11 { width: 72.72%; }

.span_3_of_4,

.span_6_of_8,

.span_9_of_12 { width: 75%; }

.span_7_of_9 { width: 77.77%; }

.span_4_of_5,

.span_8_of_10 { width: 80%; }

.span_9_of_11 { width: 81.81%; }

.span_5_of_6,

.span_10_of_12 { width: 83.33%; }

.span_6_of_7 { width: 85.71%; }

.span_7_of_8 { width: 87.5%; }

.span_8_of_9 { width: 88.88%; }

.span_9_of_10 { width: 90%; }

.span_10_of_11 { width: 90.90%; }

.span_11_of_12 { width: 91.66%; }

.span_1_of_1 { width: 100%; }



@media only screen and (min-width:1440px) { header, #maincontent, .maincontent, footer { width: 70%; } }

@media only screen and (max-width:1024px) and (min-width:800px) { header, #maincontent, .maincontent, footer { width: 93.75%; } }

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

    header, #maincontent, .maincontent, footer { width: 93.75%;}

    .span_1_of_2, .span_1_of_2, .span_2_of_2, .span_1_of_3, .span_2_of_3, .span_3_of_3, .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4, .span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5, .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6, .span_1_of_7, .span_2_of_7, .span_3_of_7, .span_4_of_7, .span_5_of_7, .span_6_of_7, .span_7_of_7, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8, .span_1_of_9, .span_2_of_9, .span_3_of_9, .span_4_of_9, .span_5_of_9, .span_6_of_9, .span_7_of_9, .span_8_of_9, .span_9_of_9, .span_1_of_10, .span_2_of_10, .span_3_of_10, .span_4_of_10, .span_5_of_10, .span_6_of_10, .span_7_of_10, .span_8_of_10, .span_9_of_10, .span_10_of_10, .span_1_of_11, .span_2_of_11, .span_3_of_11, .span_4_of_11, .span_5_of_11, .span_6_of_11, .span_7_of_11, .span_8_of_11, .span_9_of_11, .span_10_of_11, .span_11_of_11, .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 { width: 100%; }

    .span_1_of_8 { width: 25%; }

    .span_2_of_8 { width: 50%; }

    .span_3_of_8 { width: 75%; }

    .span_1_of_8:nth-child(4n+1) {

        clear: both;

        margin-left: 0;

    }

}

/* $Global */

body {

    margin: 0 auto;

    padding: 0;

    font: normal 1em/1.4 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;

    color: #333333;

    text-align: center;

    background: #f9f9f9;

}

html {

    -webkit-overflow-scrolling: touch;

    -webkit-tap-highlight-color: #2980b9;

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%; }

::-webkit-selection, ::-moz-selection, ::selection {

    background: #2980b9;

    color: #ffffff;

    text-shadow: none;

}

#skiptomain { display: none; }

#headcontainer,

#maincontentcontainer,

}

#footercontainer {

    width: 100%;

}

#headcontainer { background: #e0e0e0; }

#footercontainer {

    background: #222;

    position:bottom;

    position:relative;

    bottom:0;

    left:0;

    width:100%;

}

header,

#maincontent

/*patrick*/

/*footer */{

    clear: both;

    width: 80%;

    max-width: 92.3em;

    margin: 0 auto !important;

}

header {

    padding: 2% 0 3%;

    position: relative;

    color: #000;

    text-align: center;

}

#maincontent {

    padding: 3% 0 7%;

    color: #333;

    line-height: 1.5em;

    position: relative;

}

.sidebarleft {

    left:auto;

    top:auto;

    bottom: -10;

    padding: 3% 0% 3%;

    width: 300px;

    float: left;

    border: solid 3px #dbdbdb;

    position: relative;
}

footer {

    margin: 0 !important;

    padding: 1% !important;

    color: #999;

    float:bottom;

    /*Patrick Edit*/

    position: bottom;

    bottom: 0;

    left: 0;

    width: 100%;

    background: #222;


}


footer a:link, footer a:visited { color: #ccc; }

footer a:hover { color: #fff; }

footer ul { list-style: none; }

/* $Fonts */

h1, h2, h3, h4, h5, h6 { margin: 0; }

h1 {

    font: 300 3em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;

    color: #111;

}

h2 {

    font: 400 2em/1.6 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;

    color: #222;

}

h3 {

    font: 400 1.8em/1.6 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;

    color: #333;

}

h4 {

    font: 400 1.2em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;

    color: #444;

}

h5 {

    font: 400 1.2em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;

    color: #555;

}

h6 {

    font: 400 1em/2 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;

    color: #666;

}

a {

    text-decoration: none;

    color: #2980b9;

    -webkit-transition: all 300ms ease-in-out;

    -moz-transition: all 300ms ease-in-out;

    -ms-transition: all 300ms ease-in-out;

    -o-transition: all 300ms ease-in-out;

    transition: all 300ms ease-in-out;

}

a:hover, a:active, a:focus {

    color: #3498db;

    -webkit-transition: all 300ms ease-in-out;

    -moz-transition: all 300ms ease-in-out;

    -ms-transition: all 300ms ease-in-out;

    -o-transition: all 300ms ease-in-out;

    transition: all 300ms ease-in-out;

}

h1 a { color: #222; }

h1 a:hover { color: #111; }

h2 a { color: #333; }

h2 a:hover { color: #222; }

b, strong { font-weight: 700; }

p {

    -webkit-hyphens: auto;

    -webkit-hyphenate-character: "\2010";

    -webkit-hyphenate-limit-after: 1;

    -webkit-hyphenate-limit-before: 3;

    -moz-hyphens: auto;

    hyphens: auto;

    text-align: left;

}

sub, sup {

    font-size: .75em;

    line-height: 0;

    position: relative;

    vertical-align: baseline;

}

sup { top: -.5em; }

sub { bottom: -.25em; }

small { font-size: .9em; }

/* $Classes */

.ie7 img, .iem7 img { -ms-interpolation-mode: bicubic; }

img {

    border: 0;

    max-width: 100%; }



.clearfix { zoom: 1; }



.right { text-align: right; }

.center { text-align: center; }

.left { text-align: left; }



.clear { clear: both; }

.clearleft { clear: left; }

.clearright { clear: right; }



.floatnone { float: none; }

.floatleft { float: left; }

.floatright { float: right; }



.breaker { margin: 3% 0; padding: 1px; height: 1px; }



.faded {

    opacity: .7;

    filter: alpha(opacity=70);

}

.box {

    padding: 2% 3%;

    margin: 2% 3%;

    border-radius: 3px;

    text-align: center;

}

h3.box, h4.box { color: #ffffff !important; }

h6.box { color: #000000 !important; }

.red { color: #c0392b !important; }

.up { background: #2ecc71; }

.down { background: #e74c3c; }

.level { background: #e67e22; }

.none { background: #95a5a6; }



.highlight, .highlight:hover {

    background: #4B98FF !important;

    color: #fefefe;

    font-weight: 400;

}

.highlight a, .highlight a:hover { color: #ffffff; }