/* Gesamt Kommentar Container  */
#vionlink_comments{
   
    max-width: 800px;
    margin: 2%;
    color: #222;

}

/* die Liste der Kommentare  */
#commentlist {
    list-style: outside none none;
    text-align:left;
    margin: 40px 0;
}

/* die Listen-Elemente der Kommentare  */
#commentlist li {
    clear:left;
    margin-bottom: 35px;
}


/* die Listen-Elemente der Kommentar-Antworten  */
#commentlist li.answer {
   margin-left: 95px;
    
	width:calc(97% - 95px);
}


/* die Box mit dem Gravatar Bild des Kommentar  */
#commentlist  .comment_img {
    float: left;
    padding-left:1%;
    padding-right:1%;
}


/* die Box, welche den Text des Kommentars und die Autoren-Datum-Zeile umfasst */
#commentlist .comment_box {
    display: inline;
    float: left;
    margin-bottom: 30px;
    width: 82%;
 }


/* der Text des Kommentar  */
#commentlist .comment_content {
    background: #444480;
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    padding: 14px;
}

/* ein rundes Gravatar-Bild  */
.comment_img img {border-radius: 50%;}

.clearer{clear:left;}




#formcontainer{

    width:80%;
    max-width: 800px;
    color: #222;
    border:1px solid #444;
    border-radius:4px;
    background-color: #eaeaea;
    margin: 2%;

    }


#vionlink_formular{
    margin: 0 auto;
    max-width: 500px;
	padding: 0 20px;
}


#vionlink_formular label {
    clear:left;
    text-align: left;
    width: 7em;
}


#vionlink_formular label, #vionlink_formular input,
#vionlink_formular select, #vionlink_formular textarea,
#vionlink_formular form div {
    margin-left:4px;
    margin-top: 8px;
    display: block;
    float: left;
}




.small {

    font-size:0.8em;
    line-height:1.5em;
}


.adminreply{
    font-style:italic;
    display:block;
}




#vionlink_formular input,  #vionlink_formular textarea{
    width:260px; max-width:100%;
}

#vionlink_formular select{
    width:265px; max-width:100%;
}

.pagination{text-align: center;}

.pagination table{
    width:280px;
    display:inline;
    text-align: center;}

#vionlink_formular input.small,
#vionlink_comments select{width:50px;}

.inputbutton{
    width:90px;
    margin-top:25px;
    padding:10px;
    background-color:#333;
    color:#fff;
}


#vionlink_comments a, #formcontainer a{color:#222;}


.scode{
    float:left;
    border:0;
    width:100px;
    height:30px;
    margin-left: 4px;
    margin-top: 8px;
    }


.fehler {
    display: block;
    width:80%;
    max-width: 800px;
    margin: 2%;
    border:1px solid #990000;
    border-radius:4px;
    color:#990000;
    padding:10px;
    box-sizing: border-box;
	background: #a9a5a5 none repeat scroll 0 0;
}


.danke {
    display: block;
    width:95%;
    max-width: 800px;
    margin: 2%;
    border:1px solid #009900;
    border-radius:4px;
    color:#008800;
    padding:10px;
    box-sizing: border-box;
    background-color: #a9a5a5;
}





/* wenn KLEINER als xx px */
@media screen and (max-width: 1200px) {

    #commentlist .answer .comment_img {
        display: none;
    }
    #commentlist .answer .comment_box {
        width: 100%;
    }
	
	#commentlist li.answer {
		margin-left: 135px;
		width: calc(99% - 135px);
	}
}


/* wenn KLEINER als xx px */
@media screen and (max-width: 1000px) {


	#commentlist .comment_img {
		display: none;
		}
		
	#commentlist .comment_box {
		width: 100%;
	 }

	 
 	#commentlist li.answer {
		margin-left: 95px;
		width: calc(99% - 95px);
	}

}


 /* wenn KLEINER als xx px */
@media screen and (max-width: 800px) {


	 
 	#commentlist li.answer {
		margin-left: 55px;
		width: calc(99% - 55px);
	}

}


}