@import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300);
@-webkit-keyframes content-opacity {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-moz-keyframes content-opacity {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-o-keyframes content-opacity {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@keyframes content-opacity {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

html {
  webkit-font-smoothing: antialiased;
  font: 1em/1.5em "Raleway" !important;
  font-weight: normal; }

.tabs-wrapper {
   background: none repeat scroll 0 0 #e1ebf4;
    padding: 1em; }
  .tabs-wrapper input[type=radio] {
    display: none; }
  .tabs-wrapper label {
    transition: background 0.4s ease-in-out, height 0.2s linear;
    display: inline-block;
    cursor: pointer;
    color: #dbdbd3;
    padding: 0 1em;
    height: 3em;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #525252;
    text-align: center;
    line-height: 3em; }
    .tabs-wrapper label:last-of-type {
      border-bottom: none; }
    .tabs-wrapper label:hover {
      background: #667876;
      /*@include transform (translate(0,-0.2em));*/ }
    @media screen and (max-width: 1600px) {
      .tabs-wrapper label {
        width: 15%; } }
    @media screen and (max-width: 900px) {
      .tabs-wrapper label {
        width: 20%; } }
    @media screen and (max-width: 600px) {
      .tabs-wrapper label {
        width: 100%;
        display: block;
        border-bottom: 2px solid #4d4c47;
        border-radius: 0; } }
  @media screen and (max-width: 600px) {
    .tabs-wrapper {
      margin: 0; } }

#tab1:checked + label, #tab2:checked + label, #tab3:checked + label, #tab4:checked + label {
  background: #00a9e0;
  color: #fff; }

#tab-body-2, #tab-body-3 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
.tab-body {
  position: absolute;
  top: -9999px;
  opacity: 0;
  padding: 10px; }

.tab-body-wrapper {
  background: #fff;
  border-top: #00a9e0 5px solid;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-name: show;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-delay: 0.2s;
  -moz-animation-duration: 1.5s;
  -moz-animation-name: show;
  -moz-animation-fill-mode: forwards;
  -o-animation-delay: 0.2s;
  -o-animation-duration: 1.5s;
  -o-animation-name: show;
  -o-animation-fill-mode: forwards;
  animation-delay: 0.2s;
  animation-duration: 1.5s;
  animation-name: show;
  animation-fill-mode: forwards; }
  @media screen and (max-width: 600px) {
    .tab-body-wrapper {
      border: none;
      border-radius: 0; } }

#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2, #tab3:checked ~ .tab-body-wrapper #tab-body-3, #tab4:checked ~ .tab-body-wrapper #tab-body-4 {
  position: relative;
  top: 0px;
  /* Choose one */
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: content-opacity;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-delay: 0.2s;
  -moz-animation-duration: 0.8s;
  -moz-animation-name: content-opacity;
  -moz-animation-fill-mode: forwards;
  -o-animation-delay: 0.2s;
  -o-animation-duration: 0.8s;
  -o-animation-name: content-opacity;
  -o-animation-fill-mode: forwards;
  animation-delay: 0.2s;
  animation-duration: 0.8s;
  animation-name: content-opacity;
  animation-fill-mode: forwards;
  /* @include animation(0.2s,0.8s,content-rotate-x); */
  /* @include animation(0.2s,0.8s,content-rotate-y); */
  /* @include animation(0.2s,0.8s,content-rotate-both); */
  /* @include animation(0.2s,0.8s,content-pop-in); */
  /* @include animation(0.2s,0.8s,content-pop-out); */
  /* @include animation(0.1s,1s,content-slide-bot); */
  /*@include animation(0.1s,1s,content-slide-top);*/ }
  /*-----------------Bilder-------------------------------------
----------------------------------------------------------------*/
.stage {
	border-right: 1px dotted #7db113;
    color: #666;
    font-style: normal;
    margin: 0;
    overflow: visible;
    text-align: left;
    text-decoration: none;
    width: 55%;
    }

    .info_image_box img{
	width: 330px;
	border-radius: 6px 6px 6px 6px;
	}
	

 .info_image_box img:hover {
     -moz-border-radius: 10px 10px 10px 10px;
    -moz-transition: all 400ms ease-out 0s;
    -webkit-transition: all 400ms ease-out 0s;
    -o-transition:  all 400ms ease-out 0s;
     transition: all 400ms ease-out 0s;
    -webkit-box-shadow:0 0 50px #7DB113; 
    -moz-box-shadow:0 0 50px #7DB113; 
    -o-box-shadow:0 0 50px #7DB113;
    -moz-transform: scale(2.00);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 50px #7DB113;
    position: absolute;
	z-index:9999;
}

.inside {
	
		}
.thumbnails{
	margin-left: 5px;
	
}

.thumbnail {
	float: left;
   	max-height: 45px;
   	margin: 8px 14px 8px 0;
	overflow: hidden;
	width: 55px;
	cursor:defat;
}

.thumbnail img {
    background: none repeat scroll 0 0 white;
    text-align: center;
    text-decoration: none;
    width: 100%;
	}

.thumbnail img:hover{
     padding: 25spx;	
    -moz-border-radius: 10px 10px 10px 10px;
    border: 5px solid #7DB113;
    cursor: defat;
    left: 20%;
    max-width: 670px;
    position: absolute;
    top: 170px;
    width: auto;
    padding: 25px;
    -moz-transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    -o-transition:  all 1s ease-out 0s;
    -webkit-box-shadow:0 0 50px #7DB113; 
    -moz-box-shadow: 0 0 50px #7DB113;
    -o-box-shadow: 0 0 50px #7DB113;
transition: all 1s ease-out 0s;
box-shadow:0 0 50px #7DB113; 
}


#imagecontainer {
    border-radius: 5px 5px 5px 5px;
    height: auto;
    margin: 20px auto;
    width: 365px;
}
#window {
 height: 300px;
    overflow: hidden;
    width: 360px;
}
#all {

    width: 3450px;
	 -webkit-animation-name: all;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: all;
    -moz-animation-duration: 30s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}
#all div {
    float: left;
    padding: 5px 10px;
    width: 345px;
}
#all div img:hover {
-webkit-transition: all 400ms ease-in 100ms;
 -o-transition:  all 400ms ease-in 100ms;
  transition: all 400ms ease-in 100ms;
 -moz-transition: all 400ms ease-in 100ms;
 position: absolute;
-webkit-transform: scale(2);
 -o-transform: scale(2);
  transform:  scale(2);
 -moz-transform: scale(2);
  border-radius: 6px 6px 6px 6px;
  background: none repeat scroll 0 0 transparent;
  overflow:visible;
  z-index:9999;


}

#all div.ls img {
    display: block;
    margin: 0 auto;
    width: 350px;
	border-radius: 6px 6px 6px 6px;
}
#all div.pt img{
    display: block;
    width: 350px;
    margin: 0 auto;
	border-radius: 6px 6px 6px 6px;
}
#imagecontainer  {
    list-style: none outside none;
    padding: 0;
}
#imagecontainer li {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#imagecontainer a {
	-moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    border-radius: 3px 3px 3px 3px;
    display: block;
    margin: 5px;
    text-decoration: none;
    width: 70px;
}

#imagecontainer a img {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 70px;
}
#t01:target ~  #imagecontainer #all {
    margin-left: 0px;
	transition: all 1s ease 0s;
}
#t02:target ~  #imagecontainer #all {
    margin-left: -369px;
    transition: all 1s ease 0s;
}
#t03:target ~  #imagecontainer #all {
    margin-left: -734px;
	 transition: all 1s ease 0s;
}
#t04:target ~  #imagecontainer #all {
    margin-left: -1100px;
	 transition: all 1s ease 0s;
}
#t05:target ~  #imagecontainer #all {
    margin-left: -1464px;
	 transition: all 1s ease 0s;
}
#t06:target ~  #imagecontainer #all {
    margin-left: -1829px;
	 transition: all 1s ease 0s;
}
#t07:target ~  #imagecontainer #all {
    margin-left: -2193px;
	 transition: all 1s ease 0s;
}
#t08:target ~ #imagecontainer #all {
    margin-left: -2561px;
	 transition: all 1s ease 0s;
}
#t09:target ~  #imagecontainer #all {
    margin-left: -2925px;
	 transition: all 1s ease 0s;
}

.top {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}
/*-----------------//Bilder-Ende------------------------------------
----------------------------------------------------------------*/

/*-----------------Zustand-------------------------------------
----------------------------------------------------------------*/
#zustandfield {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #00a9e0 -moz-use-text-color;
    border-image: none;
    border-style: solid none;
    border-width: 4px medium;
    font-size: 25px;
    line-height: 1.5;
    padding: 5px 10px 20px !important;
    text-align: center;
}


.Zustand {
    float: right;
    margin-top: 3%;
    width: 40%;
}

#condition {
    background: url("http://www.noteboox.de/templates/JTL-Shop3-Tiny/themes/base/images/box_info.png") no-repeat scroll right center transparent;
    font-size: 1.25em;
    margin: 0 auto;
}

/*-----------------Zustand-Ende------------------------------------
----------------------------------------------------------------*/
legend {
    font-size: 1.45em;
    margin-left: 2em !important;
    padding: 0 5px !important;
}
/*-----------------TABELLE-------------------------------------
----------------------------------------------------------------*/
.bridges, .b {
	/*background: #F8F8EC;*/
	
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	border-collapse: collapse;
	padding: 5px;
	width: 100%;
    margin-top: 15px;
    box-shadow: 0 0 5px black inset;
    border-radius: 5px;
	font-size: 1em;
    line-height: 1.2;
}

.bridges , bridges li, .b , .b li {
	list-style-type:none;
}

.bridges td, .bridges th,.b td, .b th {
    border: 2px solid #fff;
    padding: 8px;
    text-align: left;
    vertical-align: top;

}
.bridges th, .b th {
background: #cedbe9; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 91%, #cedbe9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cedbe9), color-stop(17%,#aac5de), color-stop(50%,#6199c7), color-stop(51%,#3a84c3), color-stop(59%,#419ad6), color-stop(71%,#4bb8f0), color-stop(91%,#3a8bc2), color-stop(100%,#cedbe9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 91%,#cedbe9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 91%,#cedbe9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 91%,#cedbe9 100%); /* IE10+ */
background: linear-gradient(-45deg,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 91%,#cedbe9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#cedbe9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    color: #504F4F;
    font-style: italic;
    font-weight: bolder;
    padding-left: 10px;
    text-align: left;
    text-shadow: 0 2px 1px #BBBABA;
	border-radius: 6px 6px 0 0;
}
/*.bridges tr.a{
background: #e2e7ed;
}*/

.bridges tbody tr:nth-child(even), .b tbody tr:nth-child(even) {
	background: #e2e7ed;
}
	
.bridges tbody tr:nth-child(2n):hover, .bridges tr:hover,.b tbody tr:nth-child(2n):hover, .b tr:hover {
 font-weight: 400;
 -webkit-transition: all ease-in 200ms;
 -o-transition:  all ease-in 200ms;
  transition: all ease-in 200ms;
 -moz-transition: all 200ms ease-in 0s;
background: none repeat scroll 0 0 #9ACD32;
   border-radius: 3px 3px 3px 3px;
   box-shadow: 0 0 3px black;
  
}

.bridges  td,.b td {
width:50%;
}
.b tr:last-child {
    font-weight: 600;
}
/*-----------------//TABELLE-Ende------------------------------------
----------------------------------------------------------------*/
.box_info, .info_box {
    background: url("http://www.noteboox.de/templates/JTL-Shop3-Tiny/themes/base/images/box_error.png") no-repeat scroll right center #F2DEDE;
    border: 1px solid #C24A48;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 5px #B94A48;
    margin: 0 0 1em;
    /*min-width: 360px;*/
    padding: 0.5em 30px 0.5em 0.5em;
}
.box_notice {
    background: #ecf6c2 url("http://www.noteboox.de/templates/Evo-Child/themes/base/images/originalwindows.png") no-repeat scroll right center;
    border-radius: 5px;
    box-shadow: 0 0 7px 0 rgba(164, 182, 96, 1);
    color: #5e791a;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 auto 1em;
    padding: 0.7em;
    text-align: center;
    text-transform: uppercase;
    width: 97%;
}

#Beschreibung {
  -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #00a9e0 -moz-use-text-color -moz-use-text-color;
    border-image: none;
    border-right: medium none;
    border-style: solid none none;
    border-width: 0.2em medium medium;
    font-size: 1.25em;
    line-height: 1.2;
    margin-top: 2em;
    padding: 15px 8px;
}

.cleary {
		clear:both;
		font-size:0px;
}