﻿body {
    /*font-family: Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif;*/
    font-family: Verdana,Geneva,sans-serif;
    font-size: 100%;
    background: #C29049;
    
}

table {
    width:100%;
}

.input-text {
    height: 180px;
    width: 99%;
    font-family:  Verdana,Geneva,sans-serif;
    font-size: 100%;
    background-color: antiquewhite;
}
.edit-textarea {
    height: 180px;
    width: 99%;
    font-family:  Courier New, Courier, monospace;
    font-size: 120%;
    background-color: antiquewhite;
}

.edit2-textarea {
    height: 100px;
    width: 90%;
    font-family: Courier New, Courier, monospace;
    font-size: 120%;
    background-color: antiquewhite;
}


.edit-text {
    font-family: Courier New, Courier, monospace;
    font-size: 120%;
    background-color: antiquewhite;
}

.webref-text {
    margin-top:4px;
    height: 40px;
    width: 99%;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 100%;
    background-color: antiquewhite;
}

.mp3-input-file {
    height: 25px;
    width: 60%;
}


.input-file {
    margin-top:20px;
    height: 25px;
    width: 99%;
}

.input-ref-panel {
    height:100px;
}
.input-img-panel {
    width:20%;
}

.input-send {
    width:100%;
}
.input-panel {
    height:200px;
}
.smile-panel {
    width:10%;
}
.target-panel {
    width:20%;
}


.panel {
    border: 2px solid white;
    box-shadow:#000 2px 2px 2px;
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 4px;
    overflow: auto;
    background-image: -moz-linear-gradient(left top, #DBBE95 0, #C2B849 100%);
    background-image: -webkit-linear-gradient(left top, #DBBE95 0, #C2B849 100%);
    background-image: -ms-linear-gradient(left top, #DBBE95 0, #C2B849 100%);
}

.left-panel {
    float: left;
    overflow:auto;
    margin-right: 4px;
}

.right-panel {
    float: right;
    overflow:auto;
    margin-left: 4px;
}

.invisible {
    display:none;
}

.center {
    text-align: center;
}

.title {
    border-radius:4px; 
    border: 1px solid white;
    padding: 3px;
    background-color:transparent;
}

.push-button {
    border-radius:4px; 
    border: 1px solid white;
    padding: 3px;
    margin-bottom:3px;
    background-color:transparent;
}

.push-button-active {
    border-radius:4px; 
    border: 1px solid darkred;
    padding: 3px;
    margin-bottom:3px;
    background-color:yellow;
}
.push-button-general {
    border-radius: 4px;
    border: 1px solid darkred;
    padding: 3px;
    margin-bottom: 3px;
    background-color: yellow;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 100%;
}

.push-button-waiting {
    border-radius:4px; 
    border: 1px solid darkred;
    padding: 3px;
    margin-bottom:3px;
    background-color:white;
}


.item {
    border-radius:4px; 
    border: 1px solid white;
    padding: 1px;
    margin-bottom:2px;
    background-color:transparent;
}

.item-selected {
    border-radius:4px;
    border: 1px solid darkred; 
    padding: 1px;
    margin-bottom:2px;
    background-color:antiquewhite;
}
.item:hover {
    background-color:yellow;
    border: 1px solid darkred; 
}

.icon {
    border: 3px solid white
}

.icon:hover {
    border: 3px solid red
}

.icon-selected {
    border: 3px solid darkred;
}

.search-text {
    width:90%;
    margin: 5px 5px 5px 5px ;
}

.login-text {
    width:90%;
    margin: 5px 5px 5px 5px ;
}

.item-box-selected {
        border-radius:4px;
    display: inline-block;
    border: 1px solid darkred; 
    padding: 5px;  
    background-color:antiquewhite;
    margin: 2px;  
    
}

.item-box {
        border-radius:4px;

    display: inline-block;
    border: 1px solid white;
    padding: 5px;
    margin: 2px;  
}

.item-box:hover {
    background-color:yellow;
    border: 1px solid darkred; 
}


.dropbtn {
    border-radius:4px; 
    border: 1px solid white;
    padding: 3px;

    background-color:transparent;
    margin: 3px;
    font-family: Verdana,Geneva,sans-serif;
    font-size:100%;

    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    text-align: left;
    display: none;
    position: absolute;
    background-color: #C29049;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding:4px;
}

.upper {
    text-transform: uppercase;
}

/* Change color of dropdown links on hover */
/*.dropdown-content a:hover {background-color: #f1f1f1}*/

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:yellow;
}


.tooltip {
    position: relative;
    display: inline-block;

}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
     background-color: blue;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
/*
        bottom: 100%;
    left: 50%; 
    margin-left: -60px; 


    Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#fanclub {
    text-transform: uppercase; 
    font-size: 160%;
    font-weight: bold;
    color: white;
    text-align: center;
    text-shadow:5px 4px 2px #000;
    padding-bottom: 10px;
}


.user-image-big {
    height:75px;
    width:100px;
    margin:5px;
}


.user-image-small {
    height:45px;
    width:60px;
}
.smile-image-small {
    height:40px;
    width:40px;
}
#footer {
    font-size:90%;
}