.tooltip {
    display:inline-block;
    position:relative;
    color:#8F94FF;
    text-align:left;
}

.tooltip .top {
    min-width:370px; 
    max-width:400px;
    top:0px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#66FFFF;
    background-color:#003366;
    font-weight:normal;
    font-size:11px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .top {
    visibility:visible; opacity:1;
}

.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#003366;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.tooltip .right {
    min-width:200px;
    max-width:400px;

    top:50%;
    left:100%;
    margin-left:10px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#66FFFF;
    background-color:#003366;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .right {
    visibility:visible; opacity:1;
}

.tooltip .right img {
    width:400px;
    border-radius:8px 8px 0 0;
}
.tooltip .text-content {
    padding:10px 20px;
}

.tooltip .right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}
.tooltip .right i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#003366;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.input-search {
	background-color: #1D4177;
	color: #87CDFF;
	font-size: 16px;
	padding:8px;
	display:block;
	border:none;
	border-top:2px solid orange !important;
	width:100%;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: none;
  background-color: transparent;
  color: #87CDFF;
  width: 600px;
  margin: auto;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #1D4177;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 6px;
  transition: 0.3s;
  font-size: 16px;
  color: #87CDFF;
width: 100px;
border-radius: 3px 15px 5px 30px;  
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #6C88B2;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #2D63B5;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: none;
  border-top: none;
  width: 650px;
}
table.itemtable {
	padding: 0px;
	border-spacing: 0px 0px;
	border-collapse: collapse;
	border: 1px solid #004A7F;
}
table.itemtable tr {
	border: 1px solid #004A7F;
}
table.itemtable td {
	border: 1px solid #004A7F;
	
}
table.itemtable input[type=text] {
background: #004A7F;
color:#11BCD5;
font-size: 11px;
border: none;
padding: 0px 10px;
text-align: right;
width: 100%;
box-sizing: border-box;
}
table.itemtable input:focus {
background-color: #005C9E;
color:#13D8F2;
}


table.itemtable select{
background: #004A7F;
color:#11BCD5;
font-size: 11px;
border: none;
padding: 0px 10px;
}
.id {
	font-size: 11px;
	text-align: right;
}
.farbe {
	font-size: 11px;
	text-align: right;
}
.wert {
	font-size: 11px;
	text-align: right;

}
.art {
	font-size: 11px;
	text-align: right;
}
.user {
	font-size: 11px;
	text-align: center;
}
.datum {
	  font-size: 11px;
	  text-align: center;
}
.shop {
	color: #C63D3D;
	font-size: 11px;
}
.maha {
	color: #339966;
	font-size: 11px;
}
.rare {
	color: #B642FF;
	font-size: 11px;
}
.luxus {
	color: #FFA866;
	font-size: 11px;
}
#items_footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #00355B;
   color: #11BCD5;
   font-size: 16px;
   text-align: center;   
}

.Items_info {
  opacity:0;
	animation:werbungWeg 6s;
	}

@keyframes werbungWeg {
  0%{opacity:1}
  50%{opacity:1}
	100%{opacity:0}
  }
  
#div1 {
    float: left; /* Commenting this out results in another weird result*/
    width: 33%;
    padding: 10px;
    display: inline-block;
    background: blue;
    box-sizing: border-box;
}

#div2 {
	text-align: center;
    width:33%;
    padding:10px;
    float: left;
    background: red;
    box-sizing: border-box;
}

#div3 {
	text-align: right;
    width: 33%;
    padding: 10px;
    box-sizing: border-box;
    background: green;
    float: left;
}