/*--------- Created on : 12.07.2015, 15:22:51 Author: grT -----------*/
/********* akustoskopie neu ********/
*{
    margin:0;
    padding:0;
}
body{
    color: #ccc;
    font-family:courier;
    background:black;
}
a{
    color:#ccc;
    text-decoration:none;
}
a:hover{
    font-weight:bold;
    color:#00f;
}
/**************************************/
/*--- nur startseite ---*/
#startwrapper{
    position:relative;
    width:996px;
    height:630px;
    margin:auto;
    border:solid 1px black;
    background:url(../img/bild_div/backGND0.jpg) no-repeat center;
}
#linkfeld {
    margin-top:-27px;
    margin-left:765px;
}
#linkfeld a{
    font-size:87%;
    letter-spacing:0.3em;
}
#counter {
    margin-top:50px;
    margin-left:597px;
    width:127px;
}	
#counter p {
    font-family:courier new;
    font-size:75%;
    letter-spacing:0.2em;
}
/*---------- start ende ----------------*/
#wrapper{
    position:relative;
    width:996px;
    height:630px;
    margin:auto;
    border:solid 1px black;
}
#headline {
    width:640px;
    margin-top:101px;
    margin-left:-10px;
    font-size:150%;
    font-weight:900;
    letter-spacing:0.27em;
    color:#999;
}
/*---------------------------------------------*/
#titelfeld {
    height:273px;
    margin-top:-25px;
}
#titelbild{
    float:left;
    width:270px;
    height:203px;
    margin-top:50px;
    margin-left:117px;
}
#titeltext{
    margin-left:701px;
}
.frame{
    height:320px;
    margin-top:23px;
}
.textfeld {
    float:left;
    height:203px;
}
.textfeld p{
    margin-top:17px;
    margin-left:23px;
}
.textbild{
    float:left;
    margin-top:7px;
}
#vortext{
    margin-top:11px;
    margin-left:117px;
}
#bottom{
    width:100px;
    height:50px;
    margin-top:11px;
}
/*########### video skizzen klein #############################*/
.vidContain {
    float:left;
    width:320px;
    height:283px;
    margin:2% 0 0 117px;
}
.vid{
    width:320px;
}
.vidControl{
    position:relative;
    width:320px;
    height:23px;
    background:rgba(43,43,43,0.5);
    opacity:1;
    transition:all 0.5s ease-in;
    -webkit-transition:all 0.5s ease-in;
}
.playCtrl{
    float:left;
    width:49px;
    height:23px;
    padding-left:5px;
    cursor:pointer;
}
.btn{
    float:left;
    margin:3px 7px 0 0;
    width:17px;
    height:17px;
    cursor:pointer;
}
.play{
   background:url(../img/bild_div/play.png) center no-repeat;
}
.stopp{
   background:url(../img/bild_div/stop.png) center no-repeat;
}
.playhead{
    position:absolute;
    left:3px;
    top:3px;
    height:7px;
    background:rgba(255,255,255,0.7);
}
.headBg{
    position:relative;
    float:left;
    width:206px;
    height:13px;
    margin:5px 0;
    background:rgba(255,255,255,0.33);
    cursor:pointer;
}
.volctrl{
    float:right;
    width:49px;
    height:23px;
    padding-left:5px;
    cursor:pointer;
    background:url(../img/bild_div/volBG.png) top no-repeat;
}
.plus{
   background:url(../img/bild_div/plus.png) center no-repeat;
}
.minus{
   background:url(../img/bild_div/minus.png) center no-repeat;
}
.volbtn{
    float:left;
    margin:3px 7px 0 0;
    width:17px;
    height:17px;
    cursor:pointer;
}
/******************* video gross *************************/
#videotitel {
    margin-left:761px;
    margin-top:-25px;
}
#vidContain {
    width:770px;
    height:597px;
    margin:auto;
    margin-top:7px;
}
#vidControl{
    position:relative;
    width:768px;
    height:31px;
    margin-top:-37px;
    background:rgba(43,43,43,0.5);
    opacity:1;
    transition:all 0.5s ease-in;
    -webkit-transition:all 0.5s ease-in;
}
#playCtrl{
    float:left;
    width:63px;
    height:31px;
    _padding-left:5px;
    cursor:pointer;
}
.btn2{
    float:left;
    margin:3px 7px 0 0;
    width:24px;
    height:24px;
    cursor:pointer;
}
#play{
   background:url(../img/bild_div/play.png) center no-repeat;
}
#stopp{
   background:url(../img/bild_div/stop.png) center no-repeat;
}
#playhead{
    position:absolute;
    left:3px;
    top:3px;
    width:0px;
    height:7px;
    background:rgba(255,255,255,0.7);
}
#headBg{
    position:relative;
    float:left;
    width:586px;
    height:13px;
    margin:9px 0 0 19px;
    background:rgba(255,255,255,0.33);
    cursor:pointer;
}
#vol{
    float:right;
    width:73px;
    height:25px;
    cursor:pointer;
    background:url(../img/bild_div/volBG.png) right no-repeat;
}
#plus{
   background:url(../img/bild_div/plus.png) center no-repeat;
}
#minus{
   background:url(../img/bild_div/minus.png) center no-repeat;
}
.volbtn2{
    float:left;
    margin:7px 11px 0 0;
    width:17px;
    height:17px;
    cursor:pointer;
}
/*############### mobile ################################*/
@media screen and (max-width:1024px){
    #wrapper{
        width:99%;
    }
    #startwrapper{
        width:99%;
        background:url(../img/bild_div/backGND1.jpg) no-repeat top;
    }
    #headline{
        margin-left:2px;
        margin-top:73px;
        font-size:137%;
    }
    #linkfeld{
        font-size:84%;
        margin-top:-25px;
        margin-left:75%;
    }
    #titeltext {
        width:32%;
        margin-left:67%;
    }
    #counter {
        margin-top:43px;
        margin-left:59%;
    }
    #videotitel {
        margin-left:79%;
    }
}
@media screen and (max-width:900px){
    #titelfeld {
        height:auto;
    }
    #titeltext {
        clear:both;
        width:270px;
        margin-left:270px;
        text-align:right;
    }
    #titelbild{
        clear:both;
        height:auto;
        padding-top:17px;
        margin-top:11px;
        margin-left:270px;
    }
    #titelbild img{
        margin-top:-17px;
    }
    #vortext{
        margin-top:11px;
        margin-left:270px;
    }
    .textfeld {
        width:41%;
    }
}
@media screen and (max-width:780px){
    #startwrapper{
        background:url(../img/bild_div/backGND2.jpg) no-repeat top;
    }
    #headline{
        margin-left:2px;
        margin-top:63px;
        font-size:133%;
    }
    .frame{
        height:auto;
    }
    .textfeld {
        clear:both;
        width:320px;
        height:auto;
        margin-left:117px;
    }
    .textfeld p{
        margin-top:0;
    }
    .textbild{
        clear:both;
    }
    .vidContain{
        clear:both;
    }
    #linkfeld{
        margin-top:43px;
        margin-left:15%;
    }
    #linkfeld a{
        margin-top:11px;
        background:rgba(0,0,0,0.7);
    }
    #videotitel {
        margin-top:11px;
    }
    #vidContain{
        margin:auto;
        margin-top:29px;
        width:642px;
        height:512px;
    }
    #vidControl{
        width:640px;
    }
    #headBg{
        width:456px;
    }
    #vid{
        width:640px;
    }
}
@media screen and (max-width:680px){
    #startwrapper{
        background:url(../img/bild_div/backGND3.jpg) no-repeat top;
    }
    #headline{
        width:100%;
        margin-top:31px;
    }
    #linkfeld{
        margin-top:37px;
        margin-left:15%;
    }
    #videotitel {
        margin-left:73%;
    }
    #vidContain{
        width:480px;
        height:427px;
    }
    #vidControl{
        width:480px;
        margin-top:2px;
    }
    #headBg{
        width:311px;
    }
    #playhead{
        position:absolute;
        left:2px;
        top:2px;
        width:0px;
        height:8px;
    }
    #vid{
        width:480px;
    }
}
@media screen and (max-width:600px){
    #titelbild,#titeltext,#vortext{
        margin-left:37%;
    }    
}
@media screen and (max-width:500px){
    body{
        font-size:1.2em;
    }
    .frame{
        width:320px;
        margin:auto;
    }
    .textfeld {
        margin-left:0%;
    }
    .textfeld p{
        font-size:100%;
    }
    .vidContain{
        margin-left:0;
        margin-top:17px;
    }
    #linkfeld{
        margin-top:31px;
        margin-left:5%;
    }
    #titelbild,#titeltext,#vortext{
        margin-left:19%;
    }
    #videotitel {
        margin-left:57%;
    }
    .vid_gross{
        display:none;
    }
    #vidContain{
        width:322px;
        height:300px;
    }
    #vidControl{
        width:320px;
        margin-top:2px;
    }
    #headBg{
        width:204px;
        margin:9px 0;
    }
    #vid{
        width:320px;
    }
    #vol{
        width:53px;
        padding:6px 0 0 0;
        font-size:0.8em;
        letter-spacing:0em;
    }
    .volbtn2{
        margin:0px 4px;
    }
}
/*schriften*/
	.bold { 
            font-weight:bolder;
        }
	.verd {
            font-family:Verdana, Arial, Helvetica, sans-serif;
        }
	.courgrr {
            font-family:Courier New;
            font-size:large;
            font-weight:bold;
            letter-spacing:4pt;
        }
	.courW {
            font-size:87%;
            font-weight:bold;
            letter-spacing:0.2em;
        }	
	.cour {
            font-family:courier new;
        }
	.klein {
            font-family:courier new;
            font-size:small;
        }
	.kleiner {
            font-size:x-small;
        }