css-lint_css_lint_demo.php


Quell Code


Css lint demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSSLint Demo</title>
    <style>
        html { font: 14px sans-serif; }
        .error { color: #D9534F; font-weight: bold; }
        .warning { color: #F0AD4E; }
    </style>
    <script>
  (function() {
    "use strict";

    window.onload = function() {
        document.body.onclick = function(event) {
            event = event || window.event;
            var target = event.target || event.srcElement,
                results,
                messages,
                i,
                len;

            function log(value, level) {
                var output = document.getElementById("output");
                output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
            }

            if (target.id === "lint-btn") {
                document.getElementById("output").innerHTML = "";
                results = CSSLint.verify(document.getElementById("input").value);
                messages = results.messages;
                for (i = 0, len = messages.length; i < len; i++) {
                    log(messages[i].message + " (line " + messages[i].line + ", col " + messages[i].col + ")", messages[i].type);
                }

            }

        };
    };
})();
  </script>
</head>
<body>
    <h1>CSSLint Demo</h1>
    <textarea rows="30" cols="100" id="input">
@charset "UTF-8";

@import url("booya.css") print, screen;
@import "whatup.css" screen;
@import "wicked.css";

/*Error*/
@charset "UTF-8";


@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";

/*Warning: empty ruleset */
.foo {
}

h1 {
    font-weight: bold;
}

/*Warning: qualified heading */
.foo h1 {
    font-weight: bold;
}

/*Warning: adjoining classes */
.foo.bar {
    zoom: 1;
}

li.inline {
    width: 100%;  /*Warning: 100% can be problematic*/
}

li.last {
  display: inline;
  padding-left: 3px !important;
  padding-right: 3px;
  border-right: 0px;
}

@media print {
    li.inline {
      color: black;
    }
}

@page {
  margin: 10%;
  counter-increment: page;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
      
     
*{
	padding:0;
	margin:0;
}

html { 

    margin: 0em; 
	height:100vh;
    overflow:auto;
	width:100%;
    padding-bottom:30px;
}

a {
	outline:none;
}

body { 
	font-family: sans-serif,'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica,sans-serif;
	font-size:15px;
	width:100%;
	height:100%;
}

input:focus, select:focus, textarea:focus, button:focus {
	outline:0;
}

img {
	border:0px;
}

h2 {
	font-size:1.5em;
	margin-bottom:5px;
}

ul {

	list-style:none;

}

li {
list-style:none;
}

button { 
	border:none;
    outline: none !important; 

}

textarea, input{
	font-size:14px;
	font-family:sans-serif,"trebuchet ms","lucida grande","lucida sans unicode",arial,helvetica,sans-serif;
}

#wrap_login {
	width:100%;
	height:100%;
}

.fa {
	cursor:pointer;
}

.icon_bottom_out {
	margin-top:5px;
}

.icon_priv {
	margin-right:10px;
	font-size:1.8em;
	margin-top:2px;
}

.icon_bar {

	margin-left:5px;

	margin-top:3px;

}

.icon_smile {

	font-size:1.2em;

	margin-top:1px;

	margin-left:3px;

}

#private_close {

	float:right;

}

#private_count{

	width:20px;

	height:20px;

	background:red;

	display:none;

	position:absolute;

	text-align:center;

	font-size:13px;

	font-weight:bold;

	border-radius:10px;

	border:1px solid #fff;

	top:35%;

}

#chat_theme {

	height:100%;

	width:100px;

	float:left;

}

.option_list {

	clear:both;

	width:100%;

	display:none;

}

.option_list li {

	width:96% !important;

	padding:6px 2%;

	cursor:pointer;

}

.option_list ul {

	height:auto !important;

	clear:both;

	width:100% !important;

	margin:5px 0;

	border-radius:6px;

}

.option_list ul p {

	padding-left:5px;

}

.username {

	cursor:pointer;

}

.user_option_separator:last-child { 

	border-bottom:none; 

}

.open_user {
    display: flex;
overflow:hidden;

height:30px;

width:100%;

cursor:pointer;

width:98%;

padding:4px 0;

padding-left:2%;

border-radius:6px;

}

.open_user p {

 

	padding-top:6px;

 

	padding-bottom:5px;

}

.addon_button, .addon_button a, #submit_button, .pv_name, #user_list li , .roombutton {

	cursor:pointer;

}

#external_wrap {

	width:100%;
    height: calc(100% - 0px);
 

}

.clear {

	width:100%;

	height:1px;

	clear:both;

}

#header {

	width:100%;

	height:60px;

	margin:0 auto;

	position:relative;

	top:0;

	padding:10px 0;

}

#inner_header {

	width:100%;

	margin:0 auto;

	height:100%;

	padding:0 8px;

}

#inner_header img {

	height:100%;

	display:block;

	width:auto;

	float:left;

}

#asking {

	float:right;

	width:150px;

}

#asking p {

	padding-top:15px;

	padding-left:10px;

}

#room_topic {

	width:100%;

	font-size:17px;

	padding: 10px 0 5px;

	

}

.topic {

	margin-top:5px;

	font-weight:bold;

}

#main_error {

	height:15px;

	width:50%;

	float:right;

	margin-top:-26px;

	margin-bottom:3px;

	z-index:2000;

	display:none;

	text-align:right;

}

#main_input {

	height:38px;

	width:100%;

    margin: 4px 0 6px 0;

}

#content {

	width:98%;

	height:100%;

	padding:0;

	padding: 0 1%;

	float:left;

	font-size:16px;

}

#inside_group , #input_table, #td_group {

	width:100%;

	height:100%;

}

#inside_group , #input_table, #td_group, #inputt_left, #inputt_right, #td_input {

	border-collapse: collapse;	

	padding:0;

}

#inputt_left {

	width:85%;

	height:100%;

}

#inputt_right {

	width:15%;

	height:100%;

}

#emo_item, #send_image {

	width:38px;

	height:100%;

	text-align:center;

	font-size:24px;

	z-index:1;

	position:relative;

}

#send_image {

	border-radius:0px;

}

#emo_item i , #send_image i{

	opacity:0.4;

}

#td_input {

	height:100%;

}



.myButton:hover {

	background-color:#5cbf2a;

}

.myButton:active {

	position:relative;

	top:1px;

}

#container_input_top{

	padding:10px 10px 0px 10px;

}

#submit_button {

	width:100%;

	float:right;

	height:100% !important;

	font-weight:bold;

	box-shadow:none !important;

	padding:0;

	border:none !important;

	font-size:18px;

	border-radius:0 5px 5px 0;

}

#container_chat {

	margin:0 auto;

	padding:8px;

	border-radius:10px;

}

#inside_wrap_chat {

	height:100%;

	overflow:hidden;

}

#chat_left {

	width:100%;

	float:left;

}

#container_show_chat {

	width: 100%;

	height: 100%;

	position:relative;

}

#show_chat {

	width:100%;

	height:100%;

	overflow:auto;

	overflow-x: hidden;

}

#wrap_chat {

	height:100%;

	width:100%;

}

#warp_show_chat {

	height:73%;

	overflow:hidden;

}

#show_chat ul {

	width:100%;

	z-index:1;

	position:relative;

}

.ch_logs {

    padding: 5px 1%;

    word-wrap: break-word;

}

.avatar_chat {

	display:block;

	height:40px;

	width:auto;

	-moz-border-radius:20px;

	-webkit-border-radius:20px;

	border-radius:20px;

	overflow:hidden;

}

.my_avatar {

	float:left;

	width:50px;

}



.my_text {

    padding-left: 43px;

	padding-right:2%;

    padding-top: 6px;

	line-height:24px;

}

#menu_container_inside {

	margin:0 auto;

}

.delete_log {

font-weight:bold;

float:right;

cursor:pointer;

padding:0;

padding:0 4px 0 4px;

}

.my_notice {

	padding:3px;

}

.advice {

	font-size:12px;

}

.system, .usystem {

	width:98%;

	font-size:12px;

	font-weight:normal !important;

}

#chat_error {

	width:98%;

	min-height:20px;

	margin-bottom:-30px;

	z-index:300;

	position:relative;

	padding:5px 1%;

	display:none;

}

.chat_emoticon {

	cursor:pointer;

}

.public {

	font-size:15px;

}

.admin, .sadmin, .modo, .user, .vip, .away, .guest{

	font-weight:bold;

}

.bold {

	font-weight:bold;

}

.datechat2 {

font-size:13px;

}

.datechat {

font-weight:bold;

}

.roombutton  p {

	text-decoration:none;

	margin-top:10px;

	outline:0;

	font-size:14px;

}

.addon_button, .test_button, .other_panels {

	float:left;

	margin-left:5px;

}

.private_reply {

	float:right;

	cursor:pointer;

	padding:0 20px;

	-moz-border-radius:10px;

	-webkit-border-radius:10px;

	border-radius:10px;

	font-weight:bold;

	margin-bottom:-8px;

}

#full_form_submit {

	width:100%;

	height:auto;

	clear:both;

}

#fsubmit_control {

	width:46%;

	float:right;

	min-width:210px;

	max-width:320px;

}

#fsubmit_rules {

	width:46%;

	float:left;

	min-width:210px;

	max-width:320px;

}

.agree_rules {

	margin-top:30px;

	float:left;

	margin-bottom:10px;

}

.agree_normal {

	margin-top:14px;

	margin-bottom:0;

}

.rules_p {

	float:left;

	margin-top:26px;

	font-size:16px;

	margin-left:5px;

	margin-bottom:10px;

}

.rules_p_normal {

	margin-top:12px;

	margin-bottom:0;

}

.rules_link {

	text-decoration:none;

	cursor:pointer;

}

#rules_box {



}

#rules_box h4{

 font-size:16px;

}

#rules_box ul {

	padding:0 10px;

}

#rules_box ul li {

	list-style:decimal;

	margin-bottom:10px;

}

#rules_box strong {

	font-size:15px;

	font-weight:bold;

}

#rules_box p {

	font-size:14px;

}

#menu img {

	width:40px;

	height:auto;

}

#menu {

	width:100%;

	height:100%;

}
/*
#container_login {

     position:absolute;

     max-width:620px;

	 width:620px;

     height:auto;

     z-index:15;

     top:50%;

     left:50%;

	 padding:20px 20px 30px 20px;

     margin:-200px 0 0 -330px;

	 border-radius:10px;

}
*/
#container_kicked {

     position:absolute;

     width:320px;

     height:auto;

     z-index:15;

     top:50%;

     left:50%;

	 padding:20px;

     margin:-165px 0 0 -180px;

	 border-radius:10px;

}

#header_login {

	width:95%;

	height:60px;

	margin:0 auto;

	padding-bottom:6px;

}

#header_login img {

	height:100%;

	width:auto;

}

#content_login {

	max-width:95%;

	height:auto;

	margin:0 auto;

	padding-top:5px;

}

#content_login_left {

	width:46%;

	float:left;

	min-width:210px;

	max-width:320px;

}

#content_login_right {

	width:46%;

	float:right;

	height:auto;

	min-width:210px;

	max-width:320px;

}

#login_member_online {

	padding-top:10px;

}

.member_login {

	padding-top:5px;

}

#login_welcome {

	margin-top:10px;

	padding-bottom:10px;

}

#login_gage {

	height:30px;

}

.login_select {

	width:100%;

	padding:9px;

}

.login_select option {

	width:100%;

	border:none;

	padding-left:0;

	padding-right:0;

}

.login_label {

	padding:6px 0 2px 0;

	font-size:16px;

	clear:both;

}

#login_welcome  p {

	margin:5px 0;

}

#login_sexe {

	width:48%;

	float:left;

}

#login_age {

	width:48%;

	float:right;

}

#login_control {

	width:100%;

	height:auto;

}

#content_kicked {

	width:95%;

	height:auto;

	margin:0 auto;

	padding-top:5px;

	text-align:center;

}

#content_kicked h1 {

	margin-top:30px;

}

#content_kicked h2 {

	margin-top:20px;

}

#kicked_button, #activate_button, #resend_button {

	width:50%;

	margin:0 auto;

	height:40px;

	font-size:20px;

	margin-top:20px;

	-moz-border-radius:20px;

	-webkit-border-radius:20px;

	border-radius:5px;

	cursor:pointer;

}

#activate_button {

	width:48%;

	float:left;

}

#resend_button {

	width:48%;

	float:right;

}

#kicked_button p, #activate_button p, #resend_button p {

	padding-top:8px;

}

.email_verification {

	padding:5px 0;

}

.reason {

	font-size:18px;

	margin-top:5px;

}

.login_form {

	width:100%;

	height:auto;

	margin:0 auto;

}

.input_data {

	width:94%;

	padding:5px 3%;

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	border-radius:5px;

	border:none;

	font-size:22px;

}

.forgot {

	padding-top:5px;

	padding-bottom:5px;

}

#login_button, #register_button, #recovery_button, #newpass_button, .bridge_button, .bridge_button2 {

	margin-top:18px;

	height:40px;

	width:100%;

	text-align:center;

	font-weight:bold;

	font-size:18px;

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	border-radius:5px;

	cursor:pointer;

}

.bridge_button2 {

	margin-top:25px;

}

.bridge_button {

	margin-top:8px;

}

#back_login, #guest_button, #guest_ok {

	margin-top:43px;

	height:40px;

	width:100%;

	text-align:center;

	font-weight:bold;

	font-size:18px;

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	border-radius:5px;

	cursor:pointer;

	clear:both;

}

#login_register, #login_login{

	margin-top:8px;

	height:40px;

	width:100%;

	text-align:center;

	font-weight:bold;

	font-size:18px;

	float:right;

	border-radius:5px;

	cursor:pointer;

}

#login_guest {

	margin-top:10px;

	height:30px;

	width:100%;

	text-align:center;

	font-weight:bold;

	font-size:16px;

	cursor:pointer;

}

#login_button, #register_button, #recovery_button, #newpass_button  {

	float:left;

}

#login_button p, #register_button p, #recovery_button p, #back_login p, #newpass_button p, #guest_button p, #guest_ok p, .bridge_button p, .bridge_button2 p, #login_register p, #login_login p{

	padding-top:9px;

}

#guest_button, #guest_ok {

	margin-top:8px;

	clear:both;

}

#login_error {

	width:100%;

	margin:0 auto;

	height:auto;

}

#login_error_inside {

	font-size:16px;

}

.recover_ok {

	text-align:center;

}

.open_smilies {

	float:none;

	width:auto;

	height:20px;

}

.tooltip {

    display: inline;

    position: relative;

}

.tooltip:hover:after {

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	border-radius:5px;

    bottom: 50px;

    content: attr(title);

    left: 20%;

    padding: 5px 15px;

    position: absolute;

    width: auto;

    z-index: 98;

}

.tooltip:hover:before {

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    border-image: none;

    border-style: solid;

    border-width: 6px 6px 0;

    bottom: 44px;

    content: "";

    left: 50%;

    position: absolute;

    z-index: 99;

}

.tooltip2 {

    display: inline;

    position: relative;

}

.tooltip2:hover:after {

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	border-radius:5px;

    bottom: -26px;

    content: attr(title);

    right: 20%;

    padding: 5px 15px;

    position: absolute;

    width: auto;

    z-index: 98;

}

.tooltip2:hover:before {

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    border-image: none;

    border-style: solid;

    border-width: 0 6px 6px;

    bottom: 0px;

    content: "";

    left: 50%;

    position: absolute;

    z-index: 99;

}

.tooltip3 {

    display: inline;

    position: relative;

}

.tooltip3:hover:after {

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	border-radius:5px;

    bottom: -26px;

    color: #fff;

    content: attr(title);

    left: 20%;

    padding: 5px 15px;

    position: absolute;

    width: auto;

    z-index: 98;

}

.tooltip3:hover:before {

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    border-image: none;

    border-style: solid;

    border-width: 0 6px 6px;

    bottom: 0px;

    content: "";

    left: 50%;

    position: absolute;

    z-index: 99;

}

.forgot_password {

	cursor:pointer;

}

#show_chat_ads {

	width:100%;

	height:auto;

	z-index:2;

	position:absolute;

	display:none;

	overflow:hidden;

}

#show_chat_ads img {

	display:block;

	margin:0 auto;

	max-width:100%;

	height:auto;

	width:auto;

	max-height:70px;

}

 .ads2, .ads3 {

	display:none;

}

.avatar_userlist {

	display:block;

	height:30px;

	width:30px;

	float:left;

	-moz-border-radius:15px;

	-webkit-border-radius:15px;

	border-radius:15px;

	overflow:hidden;

	cursor:pointer;

}

.chat_avatar_wrap {

	cursor:pointer;

}

#logout_box {

	width:280px;

	height:auto;

	border-radius:10px;

	position:absolute;

	top:50%;

	left:50%;

	margin-top:-150px;

	margin-left:-150px;

	z-index:11000;

	padding:10px 10px 20px 10px;

	display:none;

}

.close_logout {

	display:block;

	float:right;

	margin-right:5px;

	margin-top:5px;

}

.logout_h2 {

	padding-top:5px;

	margin-bottom:15px;

}

.logout_text {

	padding-top:10px;

}

.out_button {

	font-size:18px;

}

.box_menu {

	float:left;

	font-size:32px;

	width:48px;

	height:48px;

	display:table-row;

	vertical-align:middle;

	position:relative;

	margin-left:0px;

}

#menu_container {

	height:33px;

}

#wrap_footer {

    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 200;
}

#my_menu{

	width:100%;

	height:33px;

    display:flex;

}







#my_menu > #callhelp {

    padding: 2px 10px 2px 10px;

    font-size: 20px;

    height: 33px;

    margin-top: 3px;

    margin-left: 30px;

   cursor:pointer;

}











.menu_header, .notify_chat, .menu_options {

	padding:8px 6px;

}

.menu_options2 {

	padding:10px 6px;

	font-size:28px;

}

.menu_drop {
	position:absolute;
	width:200px;
	height:80vh;
	bottom:100%;
	z-index:100000;
	border-radius:8px;
	overflow:auto;
	display:none;
}
li#nichtdas {
    width: 120px;
}

.head_li {
	text-decoration:none;
	font-size:18px;
	padding:8px 0 8px 8px;
	width:192px;
	display:block;
	height:auto;
	cursor:pointer;
}

.head_li a {

	color:inherit;

	text-decoration:none;

	display:block;

	width:100%;

	height:100%;

}

.login_facebook {

	width:100%;

	height:auto;

	margin-top:20px;

}

.fbl_button {

	background:#3b5998;

	color:#fff;

	font-size:17px;

	height:40px;

	width:100%;

	border-radius:5px;

	margin-top:25px;

	cursor:pointer;

}

.fbl_button2 {

	background:#3b5998;

	color:#fff;

	font-size:17px;

	padding:8px 0px;

	width:100%;

	border-radius:5px;

	margin-top:8px;

	cursor:pointer;

}

.fbl_button:hover {

	background:#1f3a72;

}

.ficon_login {

	width:25px;

	background:none !important;

	color:#fff !important;

}

.hover_element:hover, button:hover {

	transition: all 0.5s;

}

#upload_box {

	width:280px;

	height:auto;

	position:absolute;

	top:50%;

	left:50%;

	margin-left:-150px;

	margin-top:-160px;

	z-index:100000;

	border-radius:8px;

	padding:5px;

	display:none;

}

#upload_header {

	height:25px;

	width:100%;

	padding-bottom:20px;

}

.close_upload {

	font-size:25px;

	float:right;

}

#upload_control {

	width:100%;

	height:auto;

	padding-bottom:8px;

}

#upload_content {

	width:100%;

	height:auto;;

}



.fileUpload {

    position: relative;

    overflow: hidden;

	text-align:center;

	height:auto;

	width:100%;

	font-size:25px;

	font-weight:bold;

	padding:8px 0;

	border-radius:8px;

}

.fileUpload input.upload {

    position: absolute;

    top: 0;

    right: 0;

    margin: 0;

    padding: 0;

    font-size: 20px;

    cursor: pointer;

    opacity: 0;

    filter: alpha(opacity=0);

}

#upload_span {

	width:100%;

	height:50px;

}



#warnupload {

	height:20px;

	width:100%;

	font-size:18px;

	display:none;

	text-align:center;

}



.progress {

    background-color: #f5f5f5;

    border-radius: 4px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;

    height: 20px;

    overflow: hidden;

	width:100%;

	display:none;

	margin-top:4px;

}

.bar {

    background-color: #5cb85c;

    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;

    color: #fff;

    float: left;

    font-size: 12px;

    height: 100%;

    line-height: 20px;

    text-align: center;

    transition: width 0.6s ease 0s;

    width: 0;

}

.progress_mobile {

	font-size:40px;

	text-align:center;

	display:none;

}

#element_progress {

	height:22px;

	width:100%;

}

#display_file {

	text-align:center;

}

#private_input {

	margin-bottom:5px;

}

#private_content {

	width:96%;

	float:left;

	border:none;

	height:100%;

	padding:0 2% 0 2%;

}

#p_input {

	height:100%;

}

#private_left {

	width:75%;

	height:100%;

}

#priv_inside, #submit_private, #input_private, #private_input {

	width:100%;

	height:100%;

	min-height:35px;

}

#priv_inside, #private_left, #private_right, #p_input, #input_private, #p_image {

	border-collapse:collapse;

	padding:0;

}

#p_image {

	width:35px;

	height:35px;

	text-align:center;

	font-size:24px;

}

#input_private {

	border-radius:5px;

	overflow:hidden;

}

#p_image i {

	opacity:0.4;

}

#private_input_wrap {

	width:100%;

	height:35px;

}

#private_right {

	width:25%;

}

#player_content {

	width:120px;

	height:auto;

	float:left;

}

.nofb {

	margin-top:25px !important;

}

.option_list ul {

	overflow:hidden;

}

.a_ico { color:#999 !important; }

.sa_ico { color:yellow !important; }

.m_ico { color:#888 !important; }

.v_ico { color:#888 !important; }



.boy { color:#0066ff; }

.girl { color:#ff66ff;}



.girl, .boy, .sa_ico, .m_ico, .v_ico, .a_ico {

	float:right;

	margin-right:10px;

	font-size:18px;

}



















.keyboard{

  height:45px;

  width:35px;

  font-size:28px;

  animation:blink 2s linear infinite;

}

.userafk{

     height:45px;

  width:35px;

  font-size:28px; 

    

    

}

@keyframes blink{

  0%,49.9%{

    color:black;

  }

  50%,100%{

      color:white;

    }

  }



 





#mmoption{

  height:200px;

  border:1px solid red;

  display:flex;

 justify-content:center;

  align-items:center;

  flex-direction:column;

  font-size:20px;

}



#mmoption >h2{



}

#meineeinstellungenspeichern{

 width:60%;

}

 [type=checkbox]{

  height:20px;

   width:20px

}





#klingelan{

   color:red; 

  animation:5s bellring linear infinite;

}



@keyframes bellring{0%{transform:rotate(-15deg)}2%{transform:rotate(15deg)}4%{transform:rotate(-18deg)}6%{transform:rotate(18deg)}8%{transform:rotate(-22deg)}10%{transform:rotate(22deg)}12%{transform:rotate(-18deg)}14%{transform:rotate(18deg)}16%{transform:rotate(-12deg)}18%{transform:rotate(12deg)}20%,100%{transform:rotate(0deg)}}





#klingelaus{

    color:green;

}

.normalbutton{

    background:white;

    color:black;

   transform:rotate(0deg);

}



.girl1{

    border:2px solid #ff99ff;

}

.boy1{

    border:2px solid #007399;

}

























.container {

    background:red;

    border-radius: 50%;

    width: 40px;

    height: 40px;



}

.control{

    background:blue;

    border-radius: 50%;

  position:absolute;

  z-index:1;

  margin:5px;

    width: 30px;

    height: 30px;

}



.fa-microphone{

  color:white;

  font-size:25px !important;

    position: absolute;

    top: 2px;

  left:7px;

    z-index: 1;

    transform: scale(0.9);



    cursor: pointer;

    transition: background-color 750ms;

}



#run{

 

  width:200px;

  height:30px;



  background:none;

  border:1px solid black;

}

 

#pro{

  width:0px;

  height:30px;

  color:black;

background:green;

  position:relative;

  display:inline-block;

  top:0;

  left:0;

}

.speech{

    animation: pulse 2.2s linear 33;

}

@keyframes pulse {

    0% {

       border:5px solid white;

    }

    25%{

       background:white;

    }

    75%{

       border:5px solid red;

    }

    100% {

       border:5px solid white;

       background:red;

    }

}



#prozent{

    position:relative;

    left:70px;

    z-index:3;

}

 



canvas { 

    	display: inline-block; 

		background: #202020; 

		box-shadow: 0px 0px 10px blue;



        margin:5px;



}

#record { height: 15vh; }

#record.recording { 

		background: red;

		background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 

		background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 

		background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 	}

#save, #save img { height: 10vh; }

#save { opacity: 0.25;}

#save[download] { opacity: 1;}



#viz{

        display:flex;

		flex-direction:row;

		justify-content: space-around;

		align-items: center;

}

 



#server{

        position:relative;

        height:300px;

        overflow:auto;

        width:100%;

        border:2px solid black;

}























/*  Voice einstellungs panel*/







#page-wrapper {

  width: 240px;

    font-size: 80%;

  background: #000;

  padding: 4px;

  margin: 4px auto;

  border-top: 1px solid #69c773;

  box-shadow: 0 2px 10px rgba(0,0,0,0.8);

}



h1 {

 font-size:100%;

}





input[type="text"] {

  width: 90%;

  padding:5%;

  font-size:80%;

  border-radius: 3px;

  border: 1px solid #D9D9D9;

}



input[type="range"] {

  width: 130px;

}



label {

  display: inline-block;

  float: left;

  width: 50px;

}



.option ,select{

font-size:80%;

}



button {

  display: inline-block;

  border-radius: 3px;

  border: none;

  font-size:100%;

  background: #69c773;

  border: 1px solid #498b50;

  color: white;

  font-weight: bold;

  margin: 0;

  width: 100%;

  text-align: center;

}



button:hover, button:focus {

  opacity: 0.75;

  cursor: pointer;

}



button:active {

  opacity: 1;

  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;

}











span.rss {

    font-size: 20px;

    text-align: center;

}







.fa-rss{

    width:30px;

    height:30px;

    border-radius:50%;

    background:orange;

    border:1px solid black;

    cursor:poiter;

    margin:0;

    line-height: 30px;

    padding:0;

    display:block;

}



















button.chat_zitate {
    width: 15px;
    height: 15px;
    margin-top: 4px;
    line-height: 0px;
    font-size: 12px;
    float: left;
    border-radius: 50%;
    color: white;
    background:black;
}
/*
.chat_zitate:after{
  content:'kompletten Text makieren für Zitat';
  display:none;
  width:200px;
  color:red;
  background:black;
  top:-20px;
  position:relative;
}

.chat_zitate:hover:after{
  display:block;
}
*/


.chat_zitate:hover{
    cursor:pointer;
}

.zit{
  background:grey;
  border:2px solid orange;
  display:block;
  width: 70%;
    margin-left: 130px;
    margin-top: -20px;
}}

.messages_text::selection{
  background:blue;
}










 
      
      
      
      
      
    </textarea>
    <br>
    <button id="lint-btn">Run CSSLint</button>
    <p>(You may want to keep the CSS kinda small, this could take a while.)</p>
    <div id="output"></div>
</body>
</html>

Error: No site found with the domain 'test.basti1012.bplaced.net' (Learn more)