body{
  height: auto;
  margin: 0;
}
.tmfHolder{
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
}
.tmfHolder .ui-tabs .ui-tabs-panel{
  position: relative;
}
.tmfTheatre{
  margin: auto;
}
.tmfControlsHolder{
  margin: auto;
  border: 0px!important;
  border-radius: 0px!important;
  padding: 0px!important;
}
.minHoeheHolder, .maxHoeheHolder, .breiteHolder, .breiteHolder, .hoeheHolder{
  color: #fff;
}
.entfernungHolder, .minHoeheHolder, .maxHoeheHolder, .breiteHolderMinMax{
  color: #fff;
  display: none;
}
.breiteHolderMinMax li, .breiteHolder li{
  display: inline;
}
.tmfHolder ul.tabsContainer.ui-widget-header{
  background-color: #030303;
  background-image: linear-gradient(to bottom, #303030 0%, #000 100%);
  border: none;
}
.tmfHolder ul.tabsContainer.ui-widget-header li{
  width: 40%;
  background: #e74c3c none;
  display: inline-block;
  text-indent: 1em;
  height: 2.4em;
  opacity: 0.5;
  border-radius: 0px;
}

.tmfHolder ul.tabsContainer.ui-widget-header li.ui-state-active {
  opacity: 1;
}
.tmfHolder ul.tabsContainer .ui-state-default a, .tmfHolder ul.tabsContainer .ui-state-default a:link, .tmfHolder ul.tabsContainer .ui-state-default a:visited
{
  color: #EEE;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  display: inline-block;
  padding-top: 0.5em;
}
.tmfHolder ul.tabsContainer .ui-state-active a, .tmfHolder ul.tabsContainer .ui-state-active a:link, .tmfHolder ul.tabsContainer .ui-state-active a:visited
{
  color: #000;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  display: inline-block;
  padding-top: 0.5em;
}
.tmfHolder .ui-state-default, .tmfHolder .ui-widget-content .ui-state-default, .tmfHolder .ui-widget-header .ui-state-default, .tmfHolder .ui-button, html .tmfHolder .ui-button.ui-state-disabled:hover, html .tmfHolder .ui-button.ui-state-disabled:active{
  border: 0;
}
.tmfHolder .ui-state-active, .tmfHolder .ui-widget-content .ui-state-active, .tmfHolder .ui-widget-header .ui-state-active, a.tmfHolder .ui-button:active, .tmfHolder .ui-button:active, .tmfHolder .ui-button.ui-state-active:hover{
  border: 0;
}
.tmfHolder .ui-state-default, .tmfHolder .ui-widget-content .ui-state-default, .tmfHolder .ui-widget-header .ui-state-default, .tmfHolder .ui-button, html .tmfHolder .ui-button.ui-state-disabled:hover, html .tmfHolder .ui-button.ui-state-disabled:active
.tmfHolder .ui-state-default, .tmfHolder .ui-widget-content .ui-state-default, .tmfHolder .ui-widget-header .ui-state-default, .tmfHolder .ui-button, html .tmfHolder .ui-button.ui-state-disabled:hover, html .tmfHolder .ui-button.ui-state-disabled:hover
{
    border: 1px solid #666;
    background: #555 url(images/ui-bg_glass_20_555555_1x400.png) 50% 50% repeat-x;
    outline:0;
}
#tabs:focus, #tabs li:focus, #tabs li a:focus{
  outline:0;
}
.clear{
  clear: both;
}
input[name="breite"], input[name="entfernung"]{
  width: 60px;
}
#tmfInfo, #tmfEntfernutmfInfo{
  background-color: #E8E8E8;
  padding: 0.2em;
  border: solid 0.1em #766c61;
  color: #000;
}

.format_field {
  color: #fff;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .tmfTheatre{
    position: relative;
    background-image: url(../cinema_filled_lane.png);
    background-size: cover;
    width: 100%;
    height: 218px;
    background-repeat: no-repeat;
  }
  .tmfControlsHolder .ui-tabs-panel  li{
    list-style-type: none;
    width: 100%;
    font-weight: 600;
    font-size: small;
  }
  .tmfMovie{
    position: absolute;
    background-image: url('../logoBeamer24.png');
    top: 23%;
    left: 41%;
    width: 104px;
    height: 44px;
    background-size: 104px 44px;
    z-index: -3;
  }
  .tmfBeamer{
    position: absolute;
    width: 15%;
    height: 21%;
    background-image: url('../beamer_whith_shadow.png');
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 12%;
    left: 46.5%;
  }
  #tmfControls, #tmfInfo, #tmfEntfernutmfControls, #tmfEntfernutmfInfo{
    width: 98%;
    position: relative;
    margin: 0.5em 0.2em;
    padding: 5px;
    float: left;
    height: 120px;
    margin-top: 20px;
  }
  #tmfControls li, #tmfInfo li, #tmfEntfernutmfControls li, #tmfEntfernutmfInfo li, .minDistance li, .maxDistance li{
    list-style-type: none;
    margin: 0.1em 0.2em;
    width: 45%;
  }
  #tmfControls li:nth-child(even),
  #tmfInfo li:nth-child(even),
  #tmfEntfernutmfControls li:nth-child(even),
  #tmfEntfernutmfInfo li:nth-child(even){
    float:right;
  }
  #tmfControls li:nth-child(odd),
  #tmfInfo li:nth-child(odd),
  #tmfEntfernutmfControls li:nth-child(odd),
  #tmfEntfernutmfInfo li:nth-child(odd){
    float:left;
  }
  .minDistanzHolder, .maxDistanzHolder, .minHoeheHolder, .maxHoeheHolder, .breiteHolder, .breiteHolderMinMax, .entfernungHolder, .hoeheHolder{
    position: absolute;
    list-style-type: none;
    width: 0,2em;
    height: 0,2em;
    font-size: larger;
    font-weight: 600;
    font-size: smaller;
    text-align: center;
  }
  .minHoeheHolder{
    left: 9%;
    top: 15%;
  }
  .hoeheHolder{
    left: 9%;
    top: 15%;
  }
  .maxHoeheHolder{
    right: 13%;
    top: 15%;
  }
  .breiteHolder{
    left: 35%;
    top: 54%;
  }
  .breiteHolderMinMax{
    left: 15%;
    top: 54%;
    width: 55%;
  }
  .entfernungHolder{
    color: #000;
    left: 18%;
    top: 63%;
  }
  .minDistanzHolder{
    left: 18%;
    top: 63%;
  }
  .maxDistanzHolder{
    right: 18%;
    top: 63%;
  }
  #BildgroesseSlider,
  #EntfernutmfSlider { 
    margin: 10px;
  }
  #tmfControls li.heading,
  #tmfInfo li.heading,
  #tmfEntfernutmfControls li.heading,
  #tmfEntfernutmfInfo li.heading{
    width: 100%;
    float: left;
    font-weight: 900;
    font-size: medium;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {



  #tmfControls > li:nth-child(3){
    margin-bottom: 6px;
  }
  #tmfControls > li:nth-child(5) {
    margin-bottom: 3px;
  }
  .tmfTheatre{
    position: relative;
    background-image: url('../cinema_filled_lane.png');
    background-size: 600px 366px;
    width: 600px;
    height: 366px;
  }
  .tmfControlsHolder{
    position: relative;
    width: 600px;
  }
  .tmfMovie{
    position: absolute;
    background-image: url('../logoBeamer24.png');
    top: 17%;
    left: 36%;
    width: 209px;
    height: 87px;
    z-index: -3;
  }
  .tmfBeamer{
    position: absolute;
    width: 15%;
    height: 21%;
    background-image: url('../beamer_whith_shadow.png');
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 12%;
    left: 46.5%;
  }
  #tmfControls, #tmfInfo, #tmfEntfernutmfControls, #tmfEntfernutmfInfo{
    width: 48%;
    position: relative;
    margin: 0.5em 0.2em;
    padding: 1px;
    float: left;
    height: 150px;
  }
  #tmfControls li, #tmfInfo li, #tmfEntfernutmfControls li, #tmfEntfernutmfInfo li, .minDistance li, .maxDistance li{
    list-style-type: none;
    margin: 0.1em 0.2em;
    width: 45%;
  }
  #tmfControls li:nth-child(even),
  #tmfInfo li:nth-child(even),
  #tmfEntfernutmfControls li:nth-child(even),
  #tmfEntfernutmfInfo li:nth-child(even){
    float:right;
  }
  #tmfControls li:nth-child(odd),
  #tmfInfo li:nth-child(odd),
  #tmfEntfernutmfControls li:nth-child(odd),
  #tmfEntfernutmfInfo li:nth-child(odd){
    float:left;
  }
  .minDistanzHolder, .maxDistanzHolder, .minHoeheHolder, .maxHoeheHolder, .breiteHolder, .breiteHolderMinMax, .entfernungHolder, .hoeheHolder{
    position: absolute;
    list-style-type: none;
    width: 0,2em;
    height: 0,2em;
    font-size: normal;
    font-weight: 900;
    text-align: center;
  }
  .minHoeheHolder{
    left: 17%;
    top: 19%;
  }
  .hoeheHolder{
    left: 17%;
    top: 19%;
  }
  .maxHoeheHolder{
    right: 16%;
    top: 19%;
  }
  .breiteHolder{
    left: 42%;
    top: 51%;
  }
  .breiteHolderMinMax{
    left: 24%;
    top: 51%;
    width: 50%;
  }
  .entfernungHolder{
  color: #000;
  left: 25%;
  top: 70%;
  }
  .minDistanzHolder{
    left: 25%;
    top: 70%;
  }
  .maxDistanzHolder{
    right: 25%;
    top: 70%;
  }
  #BildgroesseSlider,
  #EntfernutmfSlider { 
    margin: 10px;
  }
  #tmfControls li.heading,
  #tmfInfo li.heading,
  #tmfEntfernutmfControls li.heading,
  #tmfEntfernutmfInfo li.heading{
    width: 100%;
    float: left;
    font-weight: 900;
    font-size: medium;
  }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .tmfTheatre{
    position: relative;
    background-image: url('../cinema_filled_lane.png');
    background-size: 768px 468px;
    width: 768px;
    height: 468px;
  }
  .tmfControlsHolder{
    position: relative;
    width: 768px;
  }
  .tmfMovie{
    position: absolute;
    background-image: url('../logoBeamer24.png');
    top: 19%;
    left: 41%;
    width: 209px;
    height: 87px;
    z-index: -3;
  }
  .tmfBeamer{
    position: absolute;
    width: 15%;
    height: 21%;
    background-image: url('../beamer_whith_shadow.png');
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 12%;
    left: 46.5%;
  }
  #tmfControls, #tmfInfo, #tmfEntfernutmfControls, #tmfEntfernutmfInfo{
    width: 45%;
    position: relative;
    margin: 0.5em 0.2em;
    padding: 5px;
    float: left;
    height: 150px;
  }
  #tmfControls li, #tmfInfo li, #tmfEntfernutmfControls li, #tmfEntfernutmfInfo li, .minDistance li, .maxDistance li{
    list-style-type: none;
    margin: 0.1em 0.2em;
    width: 45%;
  }
  #tmfControls li:nth-child(even),
  #tmfInfo li:nth-child(even),
  #tmfEntfernutmfControls li:nth-child(even),
  #tmfEntfernutmfInfo li:nth-child(even){
    float:right;
  }
  #tmfControls li:nth-child(odd),
  #tmfInfo li:nth-child(odd),
  #tmfEntfernutmfControls li:nth-child(odd),
  #tmfEntfernutmfInfo li:nth-child(odd){
    float:left;
  }
  .minDistanzHolder, .maxDistanzHolder, .minHoeheHolder, .maxHoeheHolder, .breiteHolder, .breiteHolderMinMax, .entfernungHolder, .hoeheHolder{
    position: absolute;
    list-style-type: none;
    width: 0,2em;
    height: 0,2em;
    font-size: larger;
    font-weight: 900;
    text-align: center;
  }
  .minHoeheHolder{
    left: 19%;
    top: 19%;
  }
  .hoeheHolder{
    left: 19%;
    top: 19%;
  }
  .maxHoeheHolder{
    right: 17%;
    top: 19%;
  }
  .breiteHolder{
    left: 42%;
    top: 51%;
  }
  .breiteHolderMinMax{
    left: 24%;
    top: 51%;
    width: 50%;
  }
  .entfernungHolder{
  color: #000;
  left: 25%;
  top: 70%;
  }
  .minDistanzHolder{
    left: 25%;
    top: 70%;
  }
  .maxDistanzHolder{
    right: 25%;
    top: 70%;
  }
  #BildgroesseSlider,
  #EntfernutmfSlider { 
    margin: 10px;
  }
  #tmfControls li.heading,
  #tmfInfo li.heading,
  #tmfEntfernutmfControls li.heading,
  #tmfEntfernutmfInfo li.heading{
    width: 100%;
    float: left;
    font-weight: 900;
    font-size: medium;
  }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .tmfTheatre{
    position: relative;
    background-image: url(../cinema_filled_lane.png);
    background-size: 992px 605px;
    width: 992px;
    height: 605px;
    /* left: -3px; */
    padding: 0px;
    border: 0px;
    background-repeat: no-repeat;
  }
  .tmfControlsHolder{
    position: relative;
    width: 992px;
  }
  .tmfMovie{
    position: absolute;
    background-image: url('../logoBeamer24.png');
    top: 25%;
    left: 43%;
    width: 209px;
    height: 87px;
    z-index: -3;
  }
  .tmfBeamer{
    position: absolute;
    width: 15%;
    height: 21%;
    background-image: url('../beamer_whith_shadow.png');
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 12%;
    left: 46.5%;
  }
  #tmfControls, #tmfInfo, #tmfEntfernutmfControls, #tmfEntfernutmfInfo{
    width: 45%;
    position: relative;
    margin: 0.5em 0.2em;
    padding: 5px;
    float: left;
    height: 150px ;
  }
  #tmfControls li, #tmfInfo li, #tmfEntfernutmfControls li, #tmfEntfernutmfInfo li, .minDistance li, .maxDistance li{
    list-style-type: none;
    margin: 0.1em 0.2em;
    width: 45%;
  }
  #tmfControls li:nth-child(even),
  #tmfInfo li:nth-child(even),
  #tmfEntfernutmfControls li:nth-child(even),
  #tmfEntfernutmfInfo li:nth-child(even){
    float:right;
  }
  #tmfControls li:nth-child(odd),
  #tmfInfo li:nth-child(odd),
  #tmfEntfernutmfControls li:nth-child(odd),
  #tmfEntfernutmfInfo li:nth-child(odd){
    float:left;
  }
  .minDistanzHolder, .maxDistanzHolder, .minHoeheHolder, .maxHoeheHolder, .breiteHolder, .breiteHolderMinMax, .entfernungHolder, .hoeheHolder{
    position: absolute;
    list-style-type: none;
    width: 0,2em;
    height: 0,2em;
    font-size: larger;
    font-weight: 900;
    text-align: center;
  }
  .minHoeheHolder{
    left: 21%;
    top: 22%;
  }
  .hoeheHolder{
    left: 21%;
    top: 22%;
  }
  .maxHoeheHolder{
    right: 18%;
    top: 22%;
  }
  .breiteHolder{
    left: 46%;
    top: 53%;
  }
  .breiteHolderMinMax{
    left: 25%;
    top: 53%;
    width: 50%;
  }
  .entfernungHolder{
  color: #000;
  left: 25%;
  top: 70%;
  }
  .minDistanzHolder{
    left: 25%;
    top: 70%;
  }
  .maxDistanzHolder{
    right: 25%;
    top: 70%;
  }
  #BildgroesseSlider,
  #EntfernutmfSlider { 
    margin: 10px;
  }
  #tmfControls li.heading,
  #tmfInfo li.heading,
  #tmfEntfernutmfControls li.heading,
  #tmfEntfernutmfInfo li.heading{
    width: 100%;
    float: left;
    font-weight: 900;
    font-size: medium;
  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .tmfTheatre{
    position: relative;
    background-image: url('../cinema_filled_lane.png');
    background-size: 1200px 732px;
    width: 1200px;
    height: 732px;
  }
  .tmfControlsHolder{
    position: relative;
    width: 1200px;
  }
  .tmfMovie{
    position: absolute;
    background-image: url('../logoBeamer24.png');
    top: 24%;
    left: 45%;
    width: 209px;
    height: 87px;
    z-index: -3;
  }
  .tmfBeamer{
    position: absolute;
    width: 15%;
    height: 21%;
    background-image: url('../beamer_whith_shadow.png');
    background-size: cover;
    background-repeat: no-repeat;
    bottom: 12%;
    left: 46.5%;
  }
  #tmfControls, #tmfInfo, #tmfEntfernutmfControls, #tmfEntfernutmfInfo{
    width: 39%;
    position: relative;
    margin: 0.5em 0.2em;
    padding: 0;
    float: left;
  }
  #tmfControls li, #tmfInfo li, #tmfEntfernutmfControls li, #tmfEntfernutmfInfo li, .minDistance li, .maxDistance li{
    list-style-type: none;
    margin: 0.1em 0.2em;
    width: 45%;
  }
  #tmfControls li:nth-child(even),
  #tmfInfo li:nth-child(even),
  #tmfEntfernutmfControls li:nth-child(even),
  #tmfEntfernutmfInfo li:nth-child(even){
    float:right;
  }
  #tmfControls li:nth-child(odd),
  #tmfInfo li:nth-child(odd),
  #tmfEntfernutmfControls li:nth-child(odd),
  #tmfEntfernutmfInfo li:nth-child(odd){
    float:left;
  }
  .minDistanzHolder, .maxDistanzHolder, .minHoeheHolder, .maxHoeheHolder, .breiteHolder, .breiteHolderMinMax, .entfernungHolder, .hoeheHolder{
    position: absolute;
    list-style-type: none;
    width: 0,2em;
    height: 0,2em;
    font-size: larger;
    font-weight: 900;
    text-align: center;
  }
  .minHoeheHolder{
    left: 23%;
    top: 22%;
  }
  .hoeheHolder{
    left: 23%;
    top: 22%;
  }
  .maxHoeheHolder{
    right: 19%;
    top: 22%;
  }
  .breiteHolder{
    left: 46%;
    top: 54%;
  }
  .breiteHolderMinMax{
    left: 25%;
    top: 54%;
    width: 50%;
  }
  .entfernungHolder{
  color: #000;
  left: 25%;
  top: 70%;
  }
  .minDistanzHolder{
    left: 25%;
    top: 70%;
  }
  .maxDistanzHolder{
    right: 25%;
    top: 70%;
  }
  #BildgroesseSlider,
  #EntfernutmfSlider { 
    margin: 10px;
  }
  #tmfControls li.heading,
  #tmfInfo li.heading,
  #tmfEntfernutmfControls li.heading,
  #tmfEntfernutmfInfo li.heading{
    width: 100%;
    float: left;
    font-weight: 900;
    font-size: medium;
  }
}