@font-face {
    font-family: "Roboto Condensed";
    src: url("images/RobotoCondensed-Regular.ttf");
}

@font-face {
    font-family: "Roboto Condensed";
    src: url("images/RobotoCondensed-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Inconsolata";
    src: url("images/Inconsolata-Regular.ttf");
}


body {
  font-family:                "Roboto Condensed", arial, helvetica;
  background:                 #B1B6D1 url('images/layout/background.jpg') fixed;
  background-size:            cover;
  font-size:                  1em;
  line-height:                150%;
}

html {
  overflow-y:                 scroll; /* always show y scrollbar */
}

p {
  margin:                     0 0 10px 0;
}

p.firstpara {
  font-weight:                bold;
}

pre {
  font-family:                'Inconsolata', 'courier', 'courier new';
  line-height:                100%;
  margin:                     20px;
}

p.indented {
  margin:                     0 15px;
}

p.quote {
  margin:                     0 15px;
}

div.panellink {
  display:                    inline-block;
  text-align:                 left;
  width:                      200px;
}

a:link {
  color:                      #D34141;
  text-decoration:            none;
}

a:visited {
  color:                      #D34141;
}

a:active {
  color:                      #FFFFFF;
  background-color:           #800000;
}

ul {
  margin:                     5px 0;
}

h1 {
  font-size:                  2em;
  line-height:                100%;
  margin:                     0px;
}

div.header {
  height:                     80px;
  padding:                    0px;
  margin:                     0px;
}

div.subheader {
  height:                     20px;
  padding:                    0px;
  margin:                     0px;
}

h1.header {
  font-size:                  2.5em;
  line-height:                80px;
  margin:                     0 20px;
  text-shadow:                2px 2px 6px #888888;
  color:                      #224;
}

h2 {
  font-size:                  1.5em;
  font-weight:                bold;
  margin:                     0px;
}

h2.headline {
  font-size:                  2.0em;
  color:                      #224;
  font-weight:                normal;
  margin:                     10px 0;
  padding:                    10px 10px 10px 0px;
  text-shadow:                2px 2px 4px rgba(0,0,0,0.4);
}

h3 {
  font-size:                  1.4em;
  color:                      #224;
  font-weight:                normal;
  text-shadow:                2px 2px 4px rgba(0,0,0,0.4);
}


h3.subheader {
  font-size:                  1.2em;
  font-weight:                bold;
  line-height:                20px;
  margin:                     0 20px;
  text-shadow:                2px 2px 6px #888888;
  color:                      #224;
}

h4 {
  font-size:                  1em;
  font-weight:                bold;
}

h5 {
  color:                      #FFFFFF;
}

table {
  margin:                     0 0 10px 0;
}

th.table_top {
  text-shadow:                1px 1px 4px #666666;
  font-weight:                normal;
  text-align:                 left;
  padding:                    0px 5px;
  border-bottom:              1px solid #525284;
  line-height:                30px;
}

td {
  font-size:                  0.9em;
  padding:                    0px 5px;
  border-bottom:              #DCDDF2 1px solid;
}

td.feld {
  background-color:           #F2F2FA;
  border-bottom:              #DCDDF2 1px solid;
}

th.headline {
  font-size:                  1em;
  font-weight:                normal;
  text-align:                 left;
  padding:                    0px 10px;
  line-height:                30px;
  text-shadow:                1px 1px 3px rgba(0,0,0,0.4);
  border-bottom:                 1px solid #525284;
}

td.code {
  font-family:                'courier', 'courier new';
  font-size:                  1em;
}

div.image_left {
  float:                      left;
  text-align:                 center;
  margin:                     10px;
  padding:                    0px;
}

div.image_right {
  float:                      right;
  text-align:                 center;
  margin:                     10px;
}

img.image_middle {
  max-width:                  850px;
  width:                      auto;
  height:                     auto;
  display: block;
  margin-left: auto;
  margin-right: auto
}

img.image_right {
  max-width:                  850px;
  width:                      auto;
  height:                     auto;
  float:                      right;
}

img.image_left {
  max-width:                  850px;
  width:                      auto;
  height:                     auto;
  float:                      left;
}

div.thumbnail_left {
  width:                      430px;
  margin:                     10px 10px 10px 0px;
  float:                      left;
  position:                   relative;
  border:                     1px solid #525284;
  box-shadow:                 3px 3px 3px rgba(0,0,0,0.2);
  z-index:                    20;
}

div.thumbnail_right {
  width:                      430px;
  margin:                     10px 0px 10px 10px;
  float:                      right;
  position:                   relative;
  border:                     1px solid #525284;
  box-shadow:                 3px 3px 3px rgba(0,0,0,0.2);
  z-index:                    20;
}

div.thumbnail_center {
  margin:                     0px;
  display:                    inline-block;
  text-align:                 center;
  font-size:                  0.8em;
  width:                      180px;
}

.thumbnail_left p,.thumbnail_right p {
  position:                   absolute;
  bottom:                     0px;
  left:                       0px;
  width:                      100%;
  text-align:                 center;
  line-height:                30px;
  margin:                     0px;
  background-color:           rgba(82, 82, 132, 0.7);
  color:                      white;
}

img.border {
  width:                      100%;
  height:                     auto;
  display:                    block;
}

div.banner {
  background:                 url("images/layout/banner_big.png") no-repeat center;
  height:                     100px;
  margin-top:                 50px;
}

div.mainfull {
  margin:                     0px 20px;
}

div.footer {
  text-align:                 center;
  margin:                     20px 0px;
}

img.gallery-image {
  box-sizing:                 border-box;
  width:                      120px;
}

img.imagegallery {
  border:                     1px solid #525284;
  margin:                     5px;
  box-shadow:                 3px 3px 3px rgba(0,0,0,0.2);
}

div.gallery-image {
  background-color:           #fff;
  display:                    inline-block;
  margin:                     5px;
  padding:                    5px;
}

nav {
  width:                      900px;
  font-size:                  1em;
  border-bottom:              1px solid #525284;
  border-left:                1px solid #525284;
  border-right:               1px solid #525284;
  margin:                     0px auto;
  position:                   fixed;
  top:                        0;
  left:                       0;
  right:                      0;
  z-index:                    1000;
}

nav ul {
  padding:                    0px;
  margin:                     0px;
}

nav ul:after {
  clear:                      both;
  content:                    " ";
  display:                    block;
  font-size:                  0;
  height:                     0;
  visibility:                 hidden;
}

nav ul,nav ul li{
  background-image:           url("images/layout/nav_bg.png");
}

/* makes nav horizontal */
nav ul li {
  list-style:                 none;
  float:                      left;
  position:                   relative;
}

/* nav link element */
nav ul li span, nav ul li a {
  text-decoration:            none;
  font-weight:                bold;
  display:                    block;
  line-height:                40px;
  padding-left:               10px;
  padding-right:              10px;
  font-size:                  1.2em;
  text-shadow:                0 0 3px #ffffff, 0 0 3px #ffffff;
  cursor:                     pointer;
}

span.cat {
  color:                      #D34141;
}

nav ul li:hover > ul {
  visibility:                 visible;
  color:                      #f00;
  background-color:           #525284;  
  cursor: pointer;
}

nav ul li.cat:hover span,nav ul li.cat:hover a {
  background:                 #ffffff url("images/layout/nav_bg_sel.png") repeat-x;
  color:                      #113;
  text-shadow:                1px 1px 4px rgba(0,0,0,0.5);
  cursor: pointer;
}

nav ul li.cat:hover > ul li a  {
  background-image:           none;
}

nav ul li ul{
  display:                    inline;
  visibility:                 hidden;
  position:                   absolute;
  padding:                    0px;
  border-bottom:              1px solid #525284;
  border-left:                1px solid #525284;
  border-right:               1px solid #525284;
  background-image:           none;
  z-index:                    50;
  left:                       -1px;
}

nav ul li ul li{
  float:                      none;
  border:                     0px;
  background-color:           #ffffff;
  background-image:           none;
  position:                   relative;
  
}

nav ul li ul li a{
  color:                      #224;
  font-weight:                normal;
  line-height:                30px;
  font-size:                  1em;
}

nav ul li ul li a:hover{
  color:                      #224;
  background-color:           #FFD5D5 !important;
  text-shadow:                1px 1px 4px rgba(0,0,0,0.5);
}

div.panel {
  width:                      100%;
  margin:                     0px 0px 10px 0px;

  float:                      left;
}

div.panel_title {
  font-size:                  1em;
  line-height:                30px;
  padding-left:               5px;
  border-bottom:              1px solid #525284;
  text-shadow:                1px 1px 4px #666666;
}

div.panel_lines {
  margin:                     0px;
  padding:                    3px 10px;
}

div.block {
  width: 500px;
  display: block;
  float:left;
}

div.imggal {
  position:                   relative;
  right:                      20px;
	width:                      900px;
	margin:                     20px 0px;
	background:                 #E2E2F0;
}

div.imggal_box {
	text-align:                  center;
}

div.imggal_header {
  height:                     30px;
  background:                 url('../images/layout/nav_bg.png');
  overflow:                   hidden;
  padding:                    5px 0px;
  font-size:                  1.2em;
  text-shadow:                0 0 3px #ffffff, 0 0 3px #ffffff;
  text-align:                 center;
}

/* ----------------------------------------------------------------------------- */
/* -- Default Size -- */
/* ----------------------------------------------------------------------------- */
div.container {
  width:                      900px;
  min-height:                 500px;
  margin:                     10px auto;
  border:                     1px solid #525284;
  background:                 #fff;
  overflow:                   auto;
}

div.panel {
  width:                      100%;
}

div.panel_lines {
  width:                      100%;
}

/* ----------------------------------------------------------------------------- */
/* -- Small size -- */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width: 999px) and (min-width: 751px)
{
  nav {
    width:                      700px;
  }

  div.thumbnail_left {
    width:                      340px;
  }

  div.thumbnail_right {
    width:                      340px;
  }

  div.container {
    width:                      700px;
  }
  
  img.image_middle {
    max-width:                  650px;
  }
  
  div.imggal {
	  width:                      700px;
	}
	
img.imagegallery {
  width: 120px;
  height: auto; 
}
}

/* ----------------------------------------------------------------------------- */
/* -- Tiny size -- */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width: 750px)
{
  nav {
    width:                      550px;
  }

  div.banner {
    margin-top:                 50px;
    background:                 url("images/layout/banner_small.png") no-repeat center;
    height:                     50px;
  }

  div.header {
    background-position:        50% top;
  }

  h1.header {
    font-size:                  1.8em;
  }

  div.thumbnail_left, div.thumbnail_right {
    width:                      500px;
    float:                      none;
    margin:                     0px 4px;
  }

  nav ul li span, nav ul li a {
    line-height:                40px;
    padding-left:               6px;
    padding-right:              6px;
    font-size:                  1em;
  }

  div.container {
    width:                      550px;
  }
  
  img.image_middle {
    max-width:                  500px;
  }

  nav ul li ul li a{
    line-height:                40px;
  }
  
  div.imggal {
	  width:                      550px;
	}
}