@font-face {
    font-family: 'Liberation Serif';
    font-weight: normal;
    font-style: normal;
    src: local('Liberation Serif'), local('LiberationSerif'), local('LiberationSerifRegular'), url('LiberationSerif-Regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Liberation Serif';
    font-weight: normal;
    font-style: italic;
    src: local('Liberation Serif Italic'), local('LiberationSerif-Italic'), local('LiberationSerifItalic'), url('LiberationSerif-Italic-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Liberation Serif';
    font-weight: bold;
    font-style: normal;
    src: local('Liberation Serif Bold'), local('LiberationSerif-Bold'), local('LiberationSerifBold'), url('LiberationSerif-Bold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Liberation Serif';
    font-weight: bold;
    font-style: italic;
    src: local('Liberation Serif Bold Italic'), local('LiberationSerif-BoldItalic'), local('LiberationSerifBoldItalic'), url('LiberationSerif-BoldItalic-webfont.woff') format('woff');
}

@media all
{
    body {
	    margin:0;
	    padding:1em;
	    background-color:#f9f9f6;
	    font-family: "Liberation Serif", Cambria, "Hoefler Text", Utopia, "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
	    font-weight:normal;
	    font-size:1em;
	    line-height:1.5;
	    color:#222;
    }

    /* LAYOUT */

    div.sitecontainer
    {
	    min-width:50em;
	    width:95%;
	    max-width:70em;
	    margin:auto;
    }

    div.section
    {
        overflow:hidden;
        clear:both;
    }

    hr
    {
        border-color:#ccc;
        border-width:1px;
        border-style:solid none none none;
        padding:0; margin:2em 0 2em 0;
        clear:both;
    }

    .columnleft
    {
	    width:57%;
	    float:left;
    }

    .columnright
    {
	    width:35%;
        float:right;
    }


    /* TYPO */

    h1,h2,h3,h4,
    fieldset legend,
    fieldset fieldset legend,
    fieldset fieldset fieldset legend
    {
        font-weight:normal;
        margin:0; padding:0;
        color:#000;
    }

    h1 {font-size:2em;}
    fieldset legend,
    h2 {font-size:2em; line-height:1.5; font-weight:500; margin:0.75em 0; }
    fieldset fieldset legend,
    h3 {font-size:1em; line-height:1.5; font-weight:bold; margin:1.5em 0 0 0; color:#333; }

    p,ul,ol,dl
    {
        padding:0;
        margin:0 0 1.5em 0;
    }
    
    .no-bullets ul
    {
        list-style: none;
        margin-left: 0;
    }

    .tagline
    {
        font-size:2.5em; line-height:1.2;
        color:#666;
        padding:0; margin:0;
    }
    
    #kunden .tagline
    {
        font-size:2em; line-height:1.5; font-weight:500; margin:0.75em 0;
    }

    .tagline a
    {
        color:#000;
        text-decoration:none;
        font-weight:inherit;
    }

    .tagline strong
    {
        font-weight:500;
    }

    .tagline em
    {
        font-style:normal;
        color:#000;
    }

    acronym, abbr {
	    border-bottom:dotted 1px #666;
    }

    a {
	    color:#111;
	    font-weight:normal;
	    text-decoration:underline;
    }

    a:visited { color:#333; }

    a:focus, a:hover, a:active
    {
        color:#fff;
        background-color:#111;
    }

    /* a:visited:hover, a:visited:focus { background-color:#555; } */

    /* FORMULAR */

    fieldset { border-style:none; }

    form, fieldset {
	    margin:0;
	    padding:0;
	    margin:0;
    }

    label {
	    display:block;
    }

    textarea, input {
	    font-size:1.5em;
	    font-family:sans-serif;
	    display:block;
	    width:90%;
	    line-height:1;
	    background-color:#f6f6f6;
	    color:#333;
	    border-color:#aaa;
	    border-width:1px;
    }

    textarea
    {
        font-size:1em;
        width:99%;
        height:15em;
        margin-bottom:1.5em;
    }

    textarea:hover, input:hover
    {
        border-style:solid; border-color:#000;
    }

    textarea:focus, input:focus
    {
        background-color:#fff; color:#000;
    }

    button {
	    font-weight:normal;
        padding:0.75em;
	    font-size:1em;
	    line-height:1;
    }

    /* LISTEN */

    ul {
	    list-style:square;
        margin-left:1em;
        padding-left:0;
    }

    ul.blocklinks
    {
        list-style:none;
        margin-left:0;
    }

    dt {
	    font-weight:bold;
    }

    dd
    {
        display:list-item;
        list-style:square;
        margin-left:1em;
        padding-left:0;
    }

    /* EXTRA */

    #kontaktzeile p
    {
        font-style:italic;
        margin:0;
        text-align:center;
    }
    
    #msgerror, #msgpositive {
	    padding:0 1em;
	    margin-top:0.25em;
	    background-color:#ffb;
	    color:#c00;
	    border-color:#eea;
    }

    #msgpositive {
	    color:#0c0;
    }

    h1#eye48logo {
        font-size:1em;
        height:75px;
        margin:3em 0 2em 0;
        padding:0;
    }

    h1#eye48logo img {
        vertical-align:bottom;
    }

    .onlyaural
    {
        position:absolute;
        left:-5000em;
    }
    .hideme { position: absolute; left: -5000em; }
    .nowrap { white-space: nowrap; }


 /**
  * @section subtemplates
  * @see     http://www.yaml.de/en/documentation/practice/subtemplates.html
  */
  .subcolumns { display:table; width:100%; table-layout:fixed; }
  .subcolumns_oldgecko { width: 100%; float:left; }

  .c25l, .c33l, .c50l { float:left; }
  .c25r, .c33r, .c50r { float:right; margin-left:-5px; }

  .c25l, .c25r, .c25 { width:25%; }
  .c33l, .c33r, .c33 { width:33.333%; }
  .c50l, .c50r, .c33 { width:50%; }

  .subcl  { padding:0 2em 0 0; }
  .subc   { padding:0 1em; }
  .subcr  { padding:0 0 0 2em; }

}

@media screen and (max-width: 35em)
{
    div.sitecontainer
    {
	    min-width:0;
	    width:auto;
	    max-width:none;
	    margin:auto;
    }

    .tagline, #kunden .tagline
    {
        color:#444;
        font-size:1.5em; line-height:2; font-weight:normal; margin:1em 0;
    }
    
  .c25l, .c25r, .c25,
  .c33l, .c33r, .c33,
  .c50l, .c50r, .c33,
  .subcl, .subc, .subcr,
  .columnleft, .columnright
  {
    float: none;
    clear: both;
    width: auto;
    margin: 0;
    padding: 0;
  }
    

}

@media screen and (min-width: 82em) and (min-height: 50em)
{
    body
    {
        padding: 3em;
        background-color: #eee;
    }

    div.sitecontainer
    {
	    padding: 0 3em;
	    background-color:#f9f9f6;
	    box-shadow: 0px 0px 2em rgba(0, 0, 0, 0.125), 0px 0px 0.5em rgba(0, 0, 0, 0.05) inset;
	    position: relative;
    }
}


@media print
{
    .tagline, #kunden .tagline, h2
    {
        font-size:1.5em; line-height:2; font-weight:normal; margin:1em 0;
    }
    
    h2
    {
        font-size:1.25em; line-height:1.2; font-weight:bold; margin:1.2em 0;
    }
    
    hr { margin: 1.5em 0; }

    .noprint { display:none; }

}
