/* clear all settings */

/* responsive design
/* content first
/* mobile first

/* --> basic definitions are for small displays (width less than 29em); 
   --> for larger displays properties are changed using media queries         */

/* --------------------------------------------------------------------
   - 29em is the width of the normal sized logo
   - for screens larger than this size, we can use the normal logo
   - for smaller screens a smaller loge ist used
   - space for logo is adapted in #contentarea
   - for screens smaller than this all blocks have full width of 100%
   - padding and margin for all blocks are reduced 
   - TODO
   - Style of text 
   --------------------------------------------------------------------*/

/*---------------------------------------- mainarea and fill areas left/right */
#mainarea 
{
  margin-left:  auto;
  margin-right: auto;
  width:        100%;
  max-width:    100em;
  /* background: #F00; */
  /* border: 1px solid #A00;*/ 
}

#leftfill
{
  position:   fixed;
  top:        0;
  left:       0;
  width:      calc(50% - 51em);
  height:     100%;
  background: #900;
  /*border: 1px solid #A00;  */
  display: none;
  overflow: hidden;
}

#rightfill
{
  position: fixed;
  top:        0;
  right:      0;
  width:      calc(50% - 51em);
  height:     100%;
  background: #900;
  /*border: 1px solid #A00;  */
  display: none;
  overflow: hidden;
  /*float: right;*/
}

@media screen and (min-width: 106em) {
  #mainarea{
    width:  100em;
  }
  #leftfill{
    display: inline-block;
  }
  #rightfill {
    display: inline-block; 
  }
}


/*---------------------------------------- contentarea, header und footer */
#contentarea
{
  margin-top: 3em;
  width: 100%;
  /*background: #0A0;*/
  /*border: 1px solid #0A0;*/ 
}

#header
{
  position: absolute;
  top: 0.5em;
  width: 100%;
  max-width:    100em;
  margin-left:  auto;
  margin-right: auto;
  height: auto:
  /*background: #0A0;*/
  /*border: 1px solid #F00;*/ 
}

#footer
{
  width: 100%;
  /*background: #AAA;*/
  /*border: 1px solid #0A0;*/ 
}


/*---------------------------------------- blocks fuer contentarea */
.row
{
  width:       100%;
  margin-top:  0.0em;
  clear:       both;
  font-family: 'Courier New',monospace;
  text-align: left;
  height: inherit;
}

.block1of1,.block1of2,
.block1of3,.block2of3,
.block1of4,.block3of4,
.block1of5,.block2of4,.block3of5,.block4of5
{
  border: .1em solid #000;
  -moz-border-radius: 0em 1.5em 0em 0em;
       border-radius: 0em 1.5em 0em 0em;

  width:      calc(100% - 2.5em - 2px);
  /*min-width:  22em;*/
  float:      left;
  margin:     0.1em 0.25em 0em 0.25em;
  padding:    0.1em 1em 0.1em 1em;
  display:    inline-block;
  background: #FFE;
  border:     1px solid #EEE;
  height: inherit;
}

.container1of1,.container1of2,
.container1of3,.container2of3,
.container1of4,.container3of4,
.container1of5,.container2of5,.container3of5,.container4of5
{
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  width:   100%;;
  float:      left;
  display:    inline-block;
  /*background: #AFA;*/

}

/*---------------------------------------------------------- header */
#header01           /* logo and slogan */
{
  float: left;
  width: 29em;
  min-width: 29em;
  height: 3.9em;
  /*border: 1px solid #00A;*/
  /*background: #FFA;*/
}

#header02           /* Menue in header bar */
{
  float: left;
  width: 34em;
  height: 3.9em;
  margin-left: 1em;
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: center;
  vertical-align: bottom;
  display: none;
  /*border: 1px solid #00A;*/
}

#header03            /* website and name */
{
  width: 15em;
  min-width: 15em;
  height: 3.9em;
  float: right;
  /*text-align: center;
  border: 0;
  padding: 0;
  margin: 0;*/
  display: none;
  /*border: 1px solid #AAA;*/
  /*background: #FFA;*/
}


/*---------------------------------------------------------- footer */
#footer1, #footer2, #footer3
{
  width: calc(100% - 2.5em - 2px);
  min-width:  20em;
  float:      left;
  margin: 0;
  padding: 0;
  border: 0;
  /*margin:     0.5em 0.25em 0em 0.25em;*/
  /*padding:    1em;*/
  display:    inline;
  /*kground: #AAE;*/
  /*border:     1px solid #EEE;*/
}

#footer1
{
  text-align: center;
}
#footer2
{
  text-align: center;
}
#footer3
{
  text-align: center;
}


/*-------------------------------=== Formating for Logo and Link ===*/
.logo1
{
  font: italic bold 1em/1em sans-serif;
  color: #000;
}
a:link    span.logo1 {color: #000; text-decoration: none;}
a:visited span.logo1 {color: #000; text-decoration: none;}
a:hover   span.logo1 {color: #900; text-decoration: none;}
a:active  span.logo1 {color: #900; text-decoration: none;}

.logo2
{
  font: italic bold 1em/1em sans-serif;
  color: #900;
}
a:link    span.logo2 {color: #900; text-decoration: none;}
a:visited span.logo2 {color: #900; text-decoration: none;}
a:hover   span.logo2 {color: #000; text-decoration: none;}
a:active  span.logo2 {color: #000; text-decoration: none;}

.slogan
{
  font: italic 0.7em/1em sans-serif;
  color: #000;
}
a:link    div.slogan {color: #000; text-decoration: none;}
a:visited div.slogan {color: #000; text-decoration: none;}
a:hover   div.slogan {color: #b11; text-decoration: none;}
a:active  div.slogan {color: #b11; text-decoration: none;}



/*------------------------------------------ footertext */
.footertext
{ 
  font:italic 1em/1.2em sans-serif;
  color: #000;
}

/*=== Head Menu Item ===*/
.headmenuitem
{
  border: .1em solid #000;
  -moz-border-radius: 0em 1.5em 0em 0em;
       border-radius: 0em 1.5em 0em 0em;
  background-color: #BBB;
  text-align: center;
  color: #FFF;
  padding: .3em .9em .3em .9em;
  margin: 0em .3em 0em .3em;
  width: 90px;
  display: inline-block;
  /*background: #AAF;
  font:italic 1.1em/1.0em sans-serif;
  -moz-border-radius: 0px 10px 0px 10px;
  border-radius: 0px 10px 0px 10px;
  border: 1px solid #AAA;
  border-bottom: 1px solid #0000F0;
  -moz-border-radius: 0px 0px 0px 20px;
  border-radius: 0px 0px 0px 20px;
  border-bottom: 1px solid #0000F0;
  padding 0px 0;
  margin-top: -1px;
  background-color: #D0D0F0;
  text-align: center;*/
}

/*a:link    span.headmenuitem {color: #AAA; text-decoration: none;}
a:visited span.headmenuitem {color: #FFF; text-decoration: none;}
a:hover   span.headmenuitem {color: #FFF; text-decoration: none;}
a:active  span.headmenuitem {color: #FFF; text-decoration: none;}
*/


/*--------------------------------------------------------- */
/*
.leftside
{
  text-align: left;
}*/

/*@media screen and (max-width:  23em) {
 .block1of4{
   display: inline;
   width: 100%;
  }
}*/


hr
{
  color: #900;
}

.deko01
{
  display: none;
}

/*@media screen and (min-width:  40em) {
  .deko01{
    display: inline-block;
  }
}*/

p
{
  font: italic 1em/1.2em sans-serif;
}

a:link    {color: #900; text-decoration: none;}
a:visited {color: #900; text-decoration: none;}
a:hover   {color: #f94; text-decoration: underline;}
a:active  {color: #f94; text-decoration: none;}





/*
  color: #E01010;
#header01 a:link    span.logo1 {color: #000; text-decoration: none;}
#header01 a:visited span.logo1 {color: #000; text-decoration: none;}
#header01 a:hover   span.logo1 {color: #900; text-decoration: none;}
#header01 a:active  span.logo1 {color: #900; text-decoration: none;}
#header01 a:link    span.logo2 {color: #900; text-decoration: none;}
#header01 a:visited span.logo2 {color: #900; text-decoration: none;}
#header01 a:hover   span.logo2 {color: #000; text-decoration: none;}
#header01 a:active  span.logo2 {color: #000; text-decoration: none;}
*/


/*------------------------------- mediaq queries to change styles */

/* --------------------------------------------------------------------
   - 29em is the width of the normal sized logo
   - for screens larger than 30em, we can use the normal size logo
   - for smaller screens we use a smaller sized logo as default
   - vertical space for logo is adapted in #contentarea
   - TODO
   - Style of text 
   --------------------------------------------------------------------*/
@media screen and (min-width: 30em) {
  #contentarea {
    margin-top: 5em;
  }

  .logo1 {
    font: italic 3em/1em sans-serif;
  }
  .logo2 {
    font: italic bold 3em/1em sans-serif;
  }
  .slogan {
    font: italic bold 1em/1em sans-serif;
  }
}


/* --------------------------------------------------------------------
   - for screens larger than 46em we have space for a second header block
   - the second header shows text ineso.ch 
   - at 50em we start showing the second header and the deco image
   - for smaller screens all blocks are full width of 100%
   - at 50em we start with 2 columns: every thing that is not full width
   - is split in 2 columns at 50% width
   - padding and margin for all blocks are increased to full value
   --------------------------------------------------------------------*/
@media screen and (min-width: 50em) { 
  #header01 {
    text-align: center;
  }
  #header03 {
    display: block ;
  }
  .deko01{
    display: inline-block;
  }

  .block1of1,.block1of2,
  .block1of3,.block2of3,
  .block1of4,.block3of4,
  .block1of5,.block2of4,.block3of5,.block4of5
  {  
    margin:     0.5em 0.25em 0em 0.25em;
    padding:    1em;
/*    text-align:  center;*/
  }

  .block1of1
  {
    width:  calc(100% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block1of2
  {
    width: calc(50% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block1of3
  {
    width: calc(50% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block2of3
  {
    width: calc(50% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block1of4
  {
    width: calc(50% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block3of4
  {
    width: calc(50% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }


}

/* --------------------------------------------------------------------
   - for screens larger than 65em we can show the third column
   - 4 column layouts are still 2 rows of 2 columns
   - we can show one line footer 
   --------------------------------------------------------------------*/
@media screen and (min-width: 65em) { 
  .container1of3
  {
    width: 33.33% ;
    min-width:  20em ; 
  }
  .container2of3
  {
    width: 66.65% ;
    min-width:  20em ; 
  }
  .block1of3
  {
    width: calc(33.33% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block2of3
  {
    width: calc(66.65% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block1of4
  {
    width: calc(50% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block3of4
  {
    width: calc(50% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
#footer1
{
  width: calc(33.33% - 2.5em - 2px);
  text-align: left;
}
#footer2
{
  width: calc(33.33% - 2.5em - 2px);
  text-align: center;
}
#footer3
{
  width: calc(33.33% - 2.5em - 2px);
  float: right;
  text-align: right;
}
}

/* --------------------------------------------------------------------
   - for screens larger than 85em we can show the complete header
   - we can also show 4 column layouts
   --------------------------------------------------------------------*/
@media screen and (min-width: 85em) { 
/*  #header01 {
    text-align: center;
  }*/
  #header02 {
    display: inline-block;
  }
/*  #header03 {
    display: block ;
  }*/
  .block1of4
  {
    width: calc(25% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
  .block3of4
  {
    width: calc(75% - 2.5em - 2px);
    min-width:  calc(20em - 2.5em - 2px); 
  }
}






/* --------------------------------------------------------------------
   --------------------------------------------------------------------*/
/*@media screen and (min-width: 106em) { */


/*@media screen and (max-width:  23em) { */
/* --------------------------------------------------------------------
   --------------------------------------------------------------------*/

/* --------------------------------------------------------------------
   --------------------------------------------------------------------*/
/*@media screen and (min-width:  40em) { */