/* Unibern
 * LAYOUT.CSS
 * 
 * Author: Nicolas Cusan
 * Arillo - Design & Development
 * http://www.arillo.net
 * 
 * IDs are written in #CamelCase beginning with a uppercase letter
 * class are also written in .camelCase beginning with a lowercase letter
 * (makes it much easier to distinguish, gives you a cleaner structure, can of course be changed)  
 * 
 */


/* =====================================
 * Reset
 * ===================================== */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}ol li,ul li{display:list-item}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left}blockquote:before,blockquote:after,q:before,q:after{content:""}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}


/* =====================================
 * Defaults
 * ===================================== */

html{
  height: 100%;
  overflow-y: scroll; /* always force a scrollbar in non-IE -- to avoid the the page jumping when changeing from short to long content */
}

body{
  color: #333;
  font: 62.5%/1.45 Verdana, Arial, sans-serif;  /*-- Remap 16px (Base fontsize in most browsers to equal 10px) --*/
  width: 100%;
  min-height: 100%;
  position: relative;
  zoom: 1;
  background: url(../images/general/bg.gif) 0 0 repeat-y #fff;
}

body.centerLayout{
  background: #fff;
}


/* clearfix because of floating sidebar */
body:before,
body:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

body:after {
  clear: both;
}

a:link,
a:visited{
  color: #e3003d;
  text-decoration: none;
}
a:focus,
a:hover{
  text-decoration: underline;
}
a:active {
  color: #9c1136;
  text-decoration: underline;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6{
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1{
  font-size: 2.2em;
  line-height: 1.1;
  margin-bottom: 0.8181em;
}

h2{
  font-size: 1.6em;
  line-height: 1.1;
  margin-bottom: 1.125em;
}

h3{
  font-size: 1.4em;
  line-height: 1.1;
  margin-bottom: 1.2857em;
}

h4{
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 1.6666em;
}

h5{
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 1.6666em;
}

h6{
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 1.6666em;
}

ul,
ol,
p{
  margin-bottom: 1.5em;
}

b,
strong,
th{
  font-weight: bold;
}

i,
em{
  font-style: italic;
}

small{
  font-size:85%;
}

hr {
  display:block;
  height:1px; 
  border:0;
  border-top:1px solid #ccc;
  margin: 1.8em 0;
  padding:0;
  clear: both;
}


/* =====================================
 * Skiplinks
 * ===================================== */

.skipLinks{
  position: absolute;
  left: -1000px;
  top: -1000px;
}

/* =====================================
 * Sidebar
 * ===================================== */

#Sidebar{
  float: left;
  width: 28em;
  padding-right: 1.2em;
  padding-bottom: 18em;
}

.centerContainer #Sidebar {
  width: 24em;
  float: left;
  padding: 5em 3em 0em 0em;
  position: relative;
  bottom: auto;
  top: auto;
  float: left;
  background-color: #fff;
}

/* Sidebar title NEW!
 * ===================================== */

#Sidebar h1{
  font-size: 3em;
  padding: 1em;
  margin: 0;
}

/* Sidebar addons NEW!!
 * ===================================== */

/* Anouncement */
.sidebarNotification{
  background-color: #f6e798;
}

.sidebarNotification p{
  font-size: 1.2em;
  padding: 2.5em;
  margin: 0;
}

/* Back arrow */
.sidebarBack{
  background-color: #21272e;
}

.sidebarBack a{
  font-size: 1.2em;
  padding: 2.5em;
  color: #fff;
  display: block;
  margin: 0;
}

/* Navigation
 * ===================================== */

#Navigation{
  border-top: 0.1em solid #ccc;
}

  #Navigation li{
    border-bottom: 0.1em solid #ccc;
    position: relative;
    width: 100%;
  }

    #Navigation li a{
      padding: 1.25em 0;
      padding-left: 2.5em;
      display: block;
      color: #444;
      font-size: 1.3em;
      background: #fff;
      clear: both;
    }

    .centerContainer #Navigation li a{
      padding: 0.85em 0;
      padding-left: 2.5em;
      display: block;
      color: #444;
      font-size: 1.2em;
      background: #fff;
      clear: both;
    }

    #Navigation li a.current{
      color: #fff;
      background: url(../images/general/formSteps_arrow.png) right center no-repeat #e3003d;
    }

    #Wrap #Navigation li a.current{
      background: #f2f2f2;
      color: #e3003d;
    }

    #Navigation li a.section{
      color: #e3003d;
    }

    #Navigation li a:hover{
      text-decoration: underline;
    }

    #Navigation li ul{
      margin-bottom: 0;
    }

      #Navigation li ul li{
        border-top: 0.1em solid #ccc;
        border-bottom: none;
      }

        #Navigation li ul li a{
          padding-left: 3.75em
        }

        #Navigation li ul li ul{
          margin-bottom: 0;
        }

          #Navigation li ul li ul li{
            border-top: 0.1em solid #ccc;
            border-bottom: none;
          }

            #Navigation li ul li ul li a{
              padding-left: 5em;
            }

/* Sidebar Logo
 * ===================================== */

#Unibern {
  overflow: hidden;
  position: absolute;
  bottom: 2em;
  height: 15em;
}
  #Unibern img {
    padding: 2em 0 2em 4em;
  }

/* Form steps
 * ===================================== */

#FormSteps{
}
  #FormSteps li{
    background-color: #fff;
    border-bottom: 0.1em solid #ccc;
    position: relative; 
    font-size: 1.1em;
  }
  #FormSteps li.current{
    background-color: #e3003d;
    background-position: left bottom;
  }
    #FormSteps li a{
      display: block;
      padding: 0.8em 3.5em 0.8em 1em;
      position: relative;
    }
    #FormSteps li a:hover{
      text-decoration: none;
    }
      #FormSteps li a span{
        display: block;
      }
      #FormSteps li a span.stepTitle{
        font-size: 1.2em;
        /* font-weight: bold; */
        color: #333;
      }
      #FormSteps li a span.stepIconWrap{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 5em;
      }
      #FormSteps li.current a span.stepIconWrap{
        background-color: #21272e;
      }
      #FormSteps li.current a span.stepTitle{
        color: #fff;
      }
      #FormSteps li a span.obligationStatus{
        font-size: 1.1em;
        color: #878b8e;
      }
      #FormSteps li.current a span.obligationStatus{ /* MEB: wird nicht gebraucht, da das mit dem "current" als Klasse nicht funktioniert */
        color: #fff;
      }
      #FormSteps li a:hover span.stepTitle,
      #FormSteps li a:hover span.obligationStatus{
        text-decoration: underline;
      }
      #FormSteps li a img.stepIcon{
        position: absolute;
        top: 50%;
        margin-top: -10px;
        right: 1.5em;
        width: 20px;
        height: 20px;
      }
      #FormSteps li a img.stepArrow{
        position: absolute;
        top: 50%;
        margin-top: -7px;
        right: 5em;
        width: 8px;
        height: 16px;
      }
      .lt7 #FormSteps li a img.stepIcon {
        top: 1.7em;
        margin: 0;
      }

/* =====================================
 * Wrap
 * ===================================== */

#Wrap{
  min-width: 102em;
  margin-left: 29.2em;
}

.centerLayout #Wrap{
  margin-left: 0;
}

/* center Layout
 * ===================================== */

.centerContainer{
  max-width: 102.4em;
  margin: 0 auto;
  width: 100%;
  zoom: 1;
}

.centerContainer:before,
.centerContainer:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.centerContainer:after {
  clear: both;
}

/* =====================================
 * Header
 * ===================================== */

#HeaderWrap{
  width: 100%;
  color: #4d4d4d;
  position: relative;
  min-width: 102em;
}

#Header{
  height: 4em;
  width: auto;
  margin: 0 auto;
  position: relative;
}

/* Language
 * ===================================== */

#Language{
  float: left;
  height: 4em;
  width: 22em;
  margin-bottom: 0;
}

  #Language li{
    line-height: 1;
    float: left;
    border-right: 0.1em solid #cccccc;
  }

  .centerContainer #Language li:first-child{
    line-height: 1;
    float: left;
    border-right: 0.1em solid #cccccc;
    border-left: 0.1em solid #cccccc;
  }

    #Language li a{
      padding: 1.1em 1em 1.3em 1em;
      border-top: 0.3em solid white;
      display: block;
      font-size: 1.1em;
      color: #4d4d4d;
    }

    #Language li a.current{
      border-top: 0.3em solid #e3003d;
    }

    #Language li a:hover{
      color: #e3003d;
      text-decoration: none;
    }

/* Meta
 * ===================================== */

#Meta{
  width: auto;
  height: 4em;
  float: right;
}

  #Meta ul{
    margin-bottom: 0;
    float: right;
  }

    #Meta ul li{
      border-right: 0.1em solid #cccccc;
      line-height: 1;
      float: left;
      height: 4em;
      display: inline;
    }

    #Meta ul li span{
      font-size: 1.1em;
      display: inline-block;
      padding: 1.4em 0em 1.3em 0.5em;
    }

    #Meta ul li img{
      padding: 1.3em 0em 1.3em 1em;
      vertical-align: middle;
    }

    .lt8 #Meta ul li img{
      padding-top: 0;
      margin-top: -1.3em;
    }

    #Meta ul li a{
      font-size: 1.1em;
      display: inline-block;
      padding: 1.4em 1em 1.3em 1em;
      color: #4d4d4d;
    }

    #Meta ul li a:hover{
      color: #e3003d;
      text-decoration: none;
    }

    #Meta #Version span{
      color: #b3b3b3;
      display: block;
      padding: 1.4em 1em 1.3em 1em;
    }

	/* warum sollte der user verlinkt sein?! und wohin??? */ 
    #Meta #User a{
      padding: 1.4em 1em 1.3em 0.6em;
      color: #e3003d;
    }

    .centerContainer #Meta #User {
      border-left: 0.1em solid #cccccc;
    }

    #Meta #User a:hover{
      text-decoration: underline;
    }

/* Site Title
 * ===================================== */

#SiteTitle{
  padding-top: 2.5em;
  padding-bottom: 1em;
}

#SiteTitle a {
  font-size: 2.6em;
  line-height: 1.1666;
  font-weight: bold;
  color: #6d7272;
}

#SiteTitle img {
  vertical-align: middle;
  margin-right: 0.5em;
}

/* Submenu
 * ===================================== */

#SubMenuHolder{
  background-color: #dae3e3;
  overflow: hidden;
  min-width: 102em;
}

#SubMenu{
  float: right;
}

  #SubMenu ul{
    margin-bottom: 0;
    float: left;
  } 
    #SubMenu li{
      float: left;
      margin-left: 0.4em;
    } 
      #SubMenu li a{
        float: left;
        color: #fff;
        background: #e3003d;
        font-size: 1.1em;
        line-height: 1.6363em;
        padding: 0.8454em 1.5757em;
        height: 1.6363em;
      }
      #SubMenu li a.current,
      #SubMenu li a:hover{
        background: #fff;
        color: #333;
        text-decoration: none;
      }
      #SubMenu li a.current{
        border-color: #fff;
      }


/* =====================================
 * Breadcrubs
 * ===================================== */

#BreadcrumbsWrap{
  width: 100%;
  overflow: hidden;
  margin-top: -0.1em;
  border-top: 0.1em solid #cccccc;
  border-bottom: 0.1em solid #cccccc;
}

  #Breadcrumbs{
    width: auto;
    float: left;
    margin: 0 auto;
    font-size: 1.1em;
    padding: 2.1em 0.9090em;
  }

    #Breadcrumbs a{
      background-color: transparent;
      padding: 0.71em;
      float: left;
      border: 0.1em solid #ccc;
      border-left: none;
      color: #666;
      border-left: none;
      border-right: none;
      padding-left: 3em;
      margin-left: -1.8em;
    }

    #Breadcrumbs img{
      float: left;
    }

/* passt nicht zur Struktur des Breadcrumbs
    #Breadcrumbs a:first-child{
      margin-left: 4em;
      padding-left: 1em;
      border-left: 1px solid #ccc;
    }
*/
    .centerContainer #Breadcrumbs {
      padding: 0.5em;

    }
    .centerContainer #Breadcrumbs a,
    .centerContainer #Breadcrumbs span,
    .centerContainer #Breadcrumbs a:first-child{
      background-color: transparent;
      padding: 0.5em;
      margin-left: 0em;
      border: none;
      float: left;
    }

/* =====================================
 * Content
 * ===================================== */

#Content{
  padding: 3em 6em;
  margin-bottom: 5em;
  position: relative;
}

.centerContainer #Content {
  width: 75em;
  float: left;
  padding: 5em 0em 0em 0em;
}

/* we do this here and in % to make it em size independent */
#Content .contentColLeft{
  float: left;
  width: 48.5%;
}
#Content .contentColRight{
  float: right;
  width: 48.5%;
}

/* Content Help Icon
 * ===================================== */

#ContentHelp{
  float: right;
  margin-top: -4em;
}

  #ContentHelp a{
    color: #4d4d4d;
    font-size: 1.1em;
    line-height: 1.4em;
  }

  #ContentHelp img{
    margin-right: 0.3em;
    vertical-align: middle;
  }

/* Typography styles
 * ===================================== */

.subTitle{
  color: #63788e;
}

.typography{
  font-size: 1.2em;
  line-height: 1.45;
}
  .typography table,
  .typography blockquote,
  .typography p,
  .typography dl,
  .typography ol,
  .typography ul{
    margin-bottom: 1.45em;
  }
  .typography ol,
  .typography ul{
    list-style-position: outside;
  }
    .typography ul li{
      padding-left: 2em;
    }
    .typography ol li{
      margin-left: 2em;
      padding: 0;
      background: none;
    }
    .typography ul li{
      background: url('../images/general/bull_1.gif') no-repeat 0.4em 0.4em; 
    }
    .typography ol li{
      list-style: decimal;
    }
      .typography ol li ul,
      .typography ol li ol,
      .typography ul li ol,
      .typography ul li ul{
        margin-bottom: 0;
      }
        .typography ol li ul li,
        .typography ul li ul li{
          background: url('../images/general/bull_2.gif') no-repeat 0.4em 0.4em;
          padding-left: 2em;
          margin: 0;
          list-style: none;       
        }
        .typography ol li ol li,
        .typography ul li ol li{
          background: none;
          list-style: decimal;
          padding: 0;
          margin-left: 2em;
        }
          .typography ol li ul li ul,
          .typography ol li ul li ol,
          .typography ol li ol li ol,
          .typography ul li ol li ol,
          .typography ul li ul li ol,
          .typography ul li ul li ul{
            margin-bottom: 0;
          }
            .typography ol li ul li ul li,
            .typography ol li ol li ul li,
            .typography ul li ul li ul li{
              background: url('../images/general/bull_3.gif') no-repeat 0.4em 0.4em;
              padding-left: 2em;
              margin: 0;
              list-style: none;       
            }
            .typography ol li ul li ol li,
            .typography ul li ol li ol li{
              background: none;
              list-style: decimal;
              padding: 0;
              margin-left: 2em;
            }
  .typography hr{
    margin-bottom: 1.45em;
  }
  .typography p.highlighted_1{
    background: #dae3e3;
    padding: 1.45em;
  }
  .typography p.highlighted_2{
    border: 0.16666em solid #dae3e3;
    padding: 1.5em;
  }

/* =====================================
 * StepStatus (Alert boxes)
 * ===================================== */

#StepStatus{
  font-size: 1.1818em;
  padding: 1.8384em;
  padding-left: 8.5384em;
  margin-bottom: 1.923em;
  line-height: 1.5384;
  min-height: 3em;
  margin-top: -0.1em;
  background-color: #e0ebf7;
}

#StepStatus.confirm{
  background: #e0ebf7 url('../images/general/ico_confirm_big.png') no-repeat 1.5384em 1.5384em;
  border: 0.1em solid #9bbcdf;
  border-left: none;
  border-right: none;
}

#StepStatus.ok{
  background: #e8f7c9 url('../images/general/ico_ok_big.png') no-repeat 1.5384em 1.5384em;
  border: 0.1em solid #92cd1d;
  border-left: none;
  border-right: none;
}

#StepStatus.todo{
  background: #fcfdc8 url('../images/general/ico_todo_big.png') no-repeat 1.5384em 1.5384em;
  border: 0.1em solid #f39200;
  border-left: none;
  border-right: none;
}

#StepStatus.warning{
  background: #efa69d url('../images/general/ico_warning_big.png') no-repeat 1.5384em 1.5384em;
  border: 0.1em solid #e3003d;
  border-left: none;
  border-right: none;
}

#StepStatus p {
  margin-bottom: 0;
}


/* =====================================
 * Helpers (last to overwrite)
 * ===================================== */

/* Clearfixing
 * ===================================== */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

/* Dimensions
 * ===================================== */

.flushBottom {
  margin-bottom: 0 !important;
}