/*****************************************
		CUSTOM CSS
******************************************/
p.dropcap {overflow: hidden;}
span.dropcap {font-family:arial;font-size: 500%;
margin: 0 5px 0 0;line-height: 100%;float: left;
display: block;color:grey;
text-shadow: grey 1px 1px 1px;}


#ex4 {
  width: 200px;
  margin: 0 auto;
}
 
#ex4 img {
  margin-bottom: -8px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
 
#ex4 img:hover {
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
}

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /* Главная часть кода, определяющая содержимое всплывающей подсказки */
    margin-top: -24px;
    opacity: 0; /* Наш элемент прозрачен... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...и скрыт. */
    z-index: 10;  
    transition: all 0.4s ease-in-out; /* Добавить плавности по вкусу */
}
        
.tooltip:hover::after {
    opacity: 1; /* Показываем его */
    visibility: visible;
}

.vertical_menu ul li a {
    color: #444;
    font-size: 100%;
    font-weight: normal;
}

.vertical_menu ul li {
    background-image: none !important;
    border-bottom: 1px solid #e6e6e6;
    list-style: outside none none;
    margin: 0 !important;
    padding: 3px 0 3px 5px !important;
}

h1, .componentheading {    
    font-size: 160%;
}