body 
{
    margin:0px; padding:0px; font-family:Arial; color:#4B4B4B; overflow:scroll; overflow-x:hidden;
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
    font-size:10px;
    background-color:#4B535F;
    min-width:32em;
    text-align:center;

    scrollbar-arrow-color:#232323;
	scrollbar-base-color:#D4D2D3;
	scrollbar-darkshadow-color:#D4D2D3;
	scrollbar-face-color:#EDEAEA;
	scrollbar-highlight-color:#ffffff;
	scrollbar-shadow-color:#D4D2D3;	

    background-size: cover;
    background-position:center center;
    background-attachment: fixed;

    background-image:url(http://www.ospelts.li/files/medienarchiv/bg_2eben_verschwommen_01.jpg);

    height:100%;
    min-height:100%;
  
}

html, form, body { height:100%; min-height:100%; font-size:10px; }

a       { text-decoration:none; color:#B4D8F2; }
a img   { border-width:0px; }
p       { font-size:1.4em; }
span    { font-size:1.4em; }
td a    { font-size:1.4em; }
br.clearing { clear:both; font-size:1px; }

.text p { color:white; font-size:1.6em; line-height:1.6em; }


/* master */

.page       { width:95%; max-width:160rem; margin:0em auto 0em auto; padding:0em; text-align:left; position:relative; top:0em; left:0em; height:inherit;  min-width:30em; }
.navcolumn  { background-color:#3B4451; text-align:right; width:34em; padding:3em; position:fixed; top:0px;  opacity:0.9; height:auto; }
.content    { background-color:#3B4451; min-height:100%; padding:1.5em 3em 3em 3em;  margin:0px;  opacity:0.9; margin-left:35em;  }
.headline   { color: #192939; font-size: 3em; font-weight:normal; margin-bottom: 3.5em; font-family: 'FrutigerLTW01-45Light'; text-transform:uppercase; cursor:pointer; }

.navcolumn .logo                { width:29.1em; max-width:100%; }
.navcolumn ul                   { margin:4em 0em 0em 0em; }
.navcolumn li                   { list-style-type:none; line-height:4.4em; }
.navcolumn li a                 { font-family: 'FrutigerLTW01-45Light'; text-transform:uppercase; font-size:3em; color:#a1a4b1; text-decoration:none; }
.navcolumn li.sel > a             { color:#b0d8f4; }
.navcolumn li:last-child a      { font-size:1.8em; text-transform:none; }
.navcolumn li .sublinks         { display:none; }
.navcolumn li.sel .sublinks     { display:block; line-height:1em; padding:0em 0em 1em 0em; }
.navcolumn li.sel .sublinks a   { font-size:1.6em; line-height:1.6em; }
.navcolumn a.sel                { color:#b0d8f4; }
.navcolumn .menutrigger         { display:none; cursor:pointer; }


/* default.aspx */

.logos      { position:relative; top:0em; padding:2em 2em 0em 0em;  }
.logos div  { width:100%; text-align:right; }

#default .swiper-container { width:110em; }
#default .slide             { cursor:pointer; float:left; width:25em; height:16em; background-repeat:no-repeat; background-size:cover; border: 2px solid #A8CBE7;  margin-right:0.5em; position:relative; top:0em; left:0em; }
#default .swiper-slide      {  }
#default .swiper-slide img { width:100%; }

#default .swiper            { margin-top:50em; position:relative; top:0em; left:0em; width:116em; padding:0 0em 0em 4em; }
#default .swipe             { color: white; position:absolute; z-index:9999; width:6.7em; height:17em; display:block; }
#default .swipe-left        { background-image:url(/images/btn-pfeil_links_off.png); background-repeat:no-repeat;  left:-2em; }
#default .swipe-right       { background-image:url(/images/btn-pfeil_rechts_off.png); background-repeat:no-repeat;  right:2em; }
#default .swipe-left:hover  { background-image:url(/images/btn-pfeil_links_on.png); background-repeat:no-repeat;   }
#default .swipe-right:hover { background-image:url(/images/btn-pfeil_rechts_on.png); background-repeat:no-repeat;  }
#default .slide .caption    { height:5.7em; position:absolute; bottom:0em; width:100%; padding:1.8em 0em 0.2em 0.6em; color:white; line-height:1.2em; font-size:1.5em;  background-image:url(/images/rep_fotoalben_kleines_bild_verlauf.png); background-repeat:no-repeat;  }
#default .slide .caption span { clear:both; font-size:0.8em; line-height:0.8em; }


/* links.aspx */

#links table                    { width:100%; }
#links tr:nth-child(2n+1) td    { background-color: #616974; opacity:0.9}
#links tr:nth-child(2n+2) td    { background-color: transparent; opacity:0.9}
#links td                       { padding:1em; vertical-align:text-top; }
#links td:first-child           { color:white; }
#links td:nth-child(2)          { text-align:right; }
#links td:last-child            { text-align:right; }
#links td:last-child a          { position:relative; top:0.3em; }

.fotoinfo { font-size:17px; line-height:26px; color:skyblue; padding-top: 0.5em; display:block; text-align: right;}


/* fotoalben.aspx */

#fotoalben .filter                  { width:100%; clear:both; margin-bottom:2em; text-align:right; }
#fotoalben .folder                  { width:49%; margin-bottom:1em; float:left; display:block; position:relative; top:0em; left:0em; }
#fotoalben .folder:nth-child(2n+1)  { margin-right:2%; }
#fotoalben .folder:hover            { position:relative; top:-0.2em; left:-0.2em; -webkit-box-shadow: 4px 4px 12px -1px rgba(0,0,0,0.36);-moz-box-shadow: 4px 4px 12px -1px rgba(0,0,0,0.36); box-shadow: 4px 4px 12px -1px rgba(0,0,0,0.36); }

#fotoalben .folder > img            { width:100%; max-width:100%; }
#fotoalben .folder > span           { display:block; min-height:9em; position:absolute; bottom:0em; left:0em; font-size:1em; width:100%; padding:0em 0em 0em 0em; background-image:url(/images/rep_fotoalben_kleines_bild_verlauf.png); background-size:cover; background-position:center bottom; background-repeat:no-repeat; }
#fotoalben .folder > span > span    { font-size:1.4em; line-height:1.4em; color:white; position:absolute; bottom:0.6em; left:0.6em; }

#fotoalben .folder:first-child  > span > span {  font-size:1.6em; line-height:1.6em; color:white; position:absolute; bottom:1em; left:1em; }


/* photogallery.aspx */

#photogallery           { position:relative; top:0em; left:0em; }
.back                   { position:absolute; top:4em; right:4em; }
.back i                 {  font-size:2.6em;  }

#photogallery h2        { color:white; font-size:2.5em; font-weight:normal; margin:0em; margin-top:-0.2em; }
#photogallery h2 span   { color:inherit; font-size:0.6em; margin-bottom:0.5em; }
#photogallery h2  + div { margin-top:2em; }
#photogallery .subfolders           { width:30%; float:left; padding-right:3%; }
#photogallery .thumbs               { width:70%; float:left; }

#photogallery .subfolders li        { list-style-type:none; background-color:#555962; margin-bottom:0.2em; padding:1em; }
#photogallery .subfolders li.sel    {  background-color:#B0D7F4; }
#photogallery .subfolders li > a    { color:white; font-size:1.4em; }
#photogallery .subfolders li:hover  { opacity:0.9; }

#photogallery .thumbs .pic          { float:left; width:24%; margin-right:1%; margin-bottom:0.5em; cursor:pointer; }
#photogallery .thumbs .pic > img    { max-width:100%; }
#photogallery .ddsubfolders         { display:none;  width: 100%; margin-bottom:1em;  }
#photogallery .thumbs .pic:nth-child(2n) {  }

/* styles */

/* textbox mit icon */
input.styled-textbox         { font-size:1.5em; display:inline-block; padding:0.8em 3em 0.7em 1em; position:relative; top:-0.1em; border: 1px solid #333333; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);  background-color:white;  background-image:url(/images/suche.png);  background-position:center right 0.5em;  background-repeat: no-repeat;  outline-width: 0; outline:none; background-size:2em; }
input.styled-textbox:hover   { background-image:url(/images/suche.png); box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);  -moz-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);  }

/* dropdown */
.styled-select               { color:#4a4a4a; /* remove standard-styles --> */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; outline-width: 0; outline:none; /* styling --> */   min-width:8em; font-size:1.5em; border: 1px solid #E8E8E8; padding:.7em 2.5em .6em 1em;  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);  background-color:white; background-size:1em;  background-image:url(/images/dropdown.png);  background-position: right 0.5em center;  background-repeat: no-repeat;  } 
.styled-select:hover         { box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2); background-image:url(/images/dropdown.png); -moz-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);  }
.styled-select::-ms-expand   { display:none; }

/* checkbox */
.checkbox                   { }
.checkbox label             { font-size:1.4em; position:relative; top:-0.1em; left:0.7em; }

/* buttons */
.button             { background-color:white;  padding:0.9em 1.6em 0.8em 1.6em; text-align:center; display:inline-block; font-weight:bold; color:black; text-transform:uppercase; font-size:1.4em; }
.button:hover       { background-color:#cfcfcf; }


/* formulare */
.form .field                    { clear:both; font-size:10px; margin-bottom:0.3em; color:white; }

.form .field span.label         { font-size:1.4em; padding:0.4em 0.8em 0.2em 0em; min-width:25%; display:block; color:white; }
.form .field > label            { font-size:1.4em; padding:0.4em 0.8em 0.2em 0em; min-width:25%; display:block;  }
.form .field .control           { max-width:75%; }

.form .field.headline           { font-size:1em; margin:1.5em 0px 0.6em 0px; clear:both; }
.form .field.headline h2        { font-size:1.4em; color:white; font-weight:bold; line-height: 1.4em; }
.form .field.text span          { display:block; float:none; clear:both; line-height:1.4em; }

.form .field.textbox input      { width:100%; padding:0.4em 0.6em 0.4em 0.6em; font-size:1.3em;  border:solid 2px white; background-color:transparent; }

.form .field.textarea textarea  { width:100%; padding:0.6em; min-height:15em; font-size:1.3em;  border:solid 2px white; background-color:transparent; }

.form .field.checkbox               { padding:0em 0px 0px 0px; min-height:2.1em; line-height:2em; }
.form .field.checkbox input         { float: left; }
.form .field.checkbox label         { display: block; margin-left: 15px; top:-0.3em; }
.form .field.checkbox  + .checkbox  { padding:0px; }

.form .field.radiobuttonlist td { padding:0em 0em 0.2em 0em; }
.form .field.radiobuttonlist td input { margin-right:1em; }
.form .field.radiobuttonlist td label { font-size:1.4em; position:relative; top:-0.1em; }

.form .field.inline                 { clear:none; width:30%; float:left; }
.form .field.inline input           { }
.form .field.inline span.label      { }
.form .field.inline + .inline       { width:70%; padding-left:5%; }

.form .error                    {  color:white; }
.form .error a                  { color:white; }
.form .finish                   { font-size:12px; clear:both; }
.form .mandatory .label:after   { content:" *"; color:white;  } 
.form .send                     { float:right; margin:0.5em 0em 2em 0px; }

.form .field input:focus    { border:solid 2px #FEE101; }
.form .field textarea:focus { border:solid 2px #FEE101; }
.form .field input.error    { border:solid 2px red; }
.form .field textarea.error { border:solid 2px red; }
.form .field table.error    { border:solid 2px red; }

.field.text + .field.checkbox {  padding-top:0.5em; }


@media screen and (max-width: 1580px) {
    .page { width: 95%; max-width: 140rem; }
}

    /* NOTEBOOK */

    @media screen and (max-width: 1400px) {
        #photogallery .thumbs .pic { float: left; width: 32%; }
    }

    @media screen and (max-width: 1140px) {
        .page { padding: 0em 2em 2em 2em; }
    }


    @media screen and (max-width: 1024px) {
        .navcolumn { width: 24em; }

        .content { margin-left: 26em; }

        #photogallery .thumbs .pic { float: left; width: 49%; }
    }


    @media screen and (min-width:777px) and (max-width: 1023px) {
        #photogallery .subfolders { display: none; }
        #photogallery .ddsubfolders { display: block; }
        #photogallery .thumbs { width: 100%; }
    }



    /* TABLET */

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


        a { text-decoration: none; }
        body { background-image: none; }
        .page { padding: 1em; }
        .navcolumn { position: fixed; top: 0em; left: 0em; width: 100%; height: 7em; padding: 0em; min-width: 27em; opacity: 1; z-index: 999; }
        .navcolumn .logo { width: 18em; float: left; margin: 2em 0em 0em 2em; }

        .navcolumn .menutrigger { display: block; margin: 2em 2em 0em 0em; }
        .navcolumn .menutrigger img { max-width: 4em; }

        .navcolumn > ul { display: none; opacity: 1; position: fixed; width: 100%; height: 100%; background-color: inherit; margin-top: 7em; padding: 2em 0em 0em 2em; z-index: 999; border: solid 2px white; }
        .navcolumn > ul > li { text-align: left; padding: 0em 0em 0em 2em; }

        .content { margin-top: 8em; margin-left: 0em; padding: 1em; opacity: 1; background-color: transparent; }
        .headline { margin-bottom: 1em; margin-top: 0em; }

        .text p { font-size: 1.6em; line-height: 1.6em; }

        /* photogallery.aspx */
        .back { position: absolute; top: 10.4em; right: 4em; }
        #photogallery h2 { }
        #photogallery .thumbs .pic img { border: solid 1px #555962; }

        /* links.aspx */
        #links table { width: 100%; }
        #links tr:nth-child(2n+1) td { background-color: transparent; opacity: 1; }
        #links tr:nth-child(2n+2) td { background-color: transparent; opacity: 1; }
        #links td { padding: 1em; vertical-align: text-top; }
            #links td:first-child { font-weight: bold; }
            #links td:nth-child(2) { text-align: right; }
            #links td:last-child { text-align: right; }
                #links td:last-child a { position: relative; top: 0.3em; }
    }


    /* SMARTPHONE */

    @media screen and (max-width: 620px) {
        #photogallery .subfolders { display: none; }
        #photogallery .thumbs { width: 100%; }
        #photogallery .ddsubfolders { display: block; }

        /* links.aspx */
        #links tr { display: block; width: 100%; clear: both; }
        #links td { display: block; width: 100%; clear: both; padding: 0.3em; }
            #links td:first-child { font-weight: bold; }
            #links td:nth-child(2) { text-align: left; }
            #links td:last-child { text-align: left; padding-bottom: 3em; }
                #links td:last-child a { display: none; }
    }

    @media screen and (max-width: 425px) {
        #fotoalben .folder { width: 100%; margin-right: 0em; }
            #fotoalben .folder:nth-child(2n+2) { margin-right: 0em; }
        #fotoalben .filter input { width: 100%; max-width: 100%; }
    }