File: /var/www/nowruzgan.com/oil-timeline/styles/data.css
#data-container {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
#data-container .item {
float: left;
height: 100%;
width: 1000px;
position: relative;
}
#data-container .item .text {
position: absolute;
height: 290px;
bottom: 165px;
left: 50%;
width: 395px;
margin-left: -455px;
background-color: rgba(0, 0, 0, 0.85);
padding: 25px 20px 20px 15px;
overflow: hidden;
-webkit-transition: height 1s cubic-bezier(0.75, 0, 0.25, 1);
-moz-transition: height 1s cubic-bezier(0.75, 0, 0.25, 1);
-ms-transition: height 1s cubic-bezier(0.75, 0, 0.25, 1);
-o-transition: height 1s cubic-bezier(0.75, 0, 0.25, 1);
transition: height 1s cubic-bezier(0.75, 0, 0.25, 1);
}
#data-container .item .text.collapsed {
height: 25px;
}
#data-container .switches {
position: absolute;
bottom: 165px;
left: 50%;
margin-left: -20px;
}
#data-container .switches .switch {
width: 0px;
height: 20px;
margin-top: 5px;
padding-left: 20px;
background-color: #00cdcb;
cursor: pointer;
overflow: hidden;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-ms-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}
#data-container .switches .switch.selected,
#data-container .switches .switch:hover {
width: 150px;
}
#data-container .switches .switch .desc {
background: black;
color: white;
border: 1px solid #00cdcb;
border-left: none;
padding: 1px 5px 0 0;
height: 17px;
width: 144px;
direction: rtl;
}
#data-container .text .body {
height: 250px;
/*height: 100%;*/
overflow: auto;
}
#data-container .text h2 {
height: 17px;
direction: rtl;
border-right: 20px solid #00CDCB;
padding-right: 5px;
padding-top: 3px;
color: white;
margin-right: 15px;
margin-bottom: 25px;
}
#data-container .text .body p {
margin-bottom: 15px;
direction: rtl;
text-align: justify;
line-height: 150%;
text-indent: 15px;
color: #aaa;
}
#data-container .text .text-close {
width: 20px;
height: 20px;
float: left;
/*background-color: white;*/
background-image: url(../images/collapse.png);
background-repeat: no-repeat;
background-position: 0 0;
opacity: 0.7;
cursor: pointer;
-webkit-transition: background-position 1s ease-in-out;
-moz-transition: background-position 1s ease-in-out;
-ms-transition: background-position 1s ease-in-out;
-o-transition: background-position 1s ease-in-out;
transition: background-position 1s ease-in-out;
}
#data-container .text.collapsed .text-close {
background-position: 0 100%;
}
#data-container .text .text-close:hover {
opacity: 1;
}