/* -- minislide end -- */ /*------------------------------------------------------------------- WIDGET 4 - SLIDE OUT BOX - BEGIN -------------------------------------------------------------------*/ .sidr { display:none; position:absolute; position:fixed; top:0; height:100%; z-index:56; width:300px; overflow-x:hidden; overflow-y:auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 10px; } .sidr.right { left:auto; right:-300px; } .sidr.left { left:-300px; right:auto; } /*--------Your Left Slide Out Box---------*/ #sidr{ display: none; width: 300px; min-height: 500px; background: #f1f1f1; /*- background of the left side slide -*/ padding: 20px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid #ddd; /*- border right on the left slide -*/ } #icontent #sidr{ display:block; margin-top: 50px; float: left; position: relative } /*--------Your Right Slide Out Box---------*/ #sidr-right{ display: none; width: 300px; min-height: 500px; padding: 20px 10px; z-index:100; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #f1f1f1; /*- background of the right side slide -*/ border-left: 1px solid #ddd; /* border left of the right slide -*/ } #icontent #sidr-right{ display:block; margin-top: 50px; float: right; position: relative; } /*-- button to open left slide --*/ #simple-menu{ position: relative; font-weight: normal; border: 1px solid #218167; /* border of button */ text-decoration: none; padding: 5px 25px; /* padding top/bottom and padding lef/right */ background: #64c7ab; /* background of button */ color: #fff; /* text color of button */ font-weight: 300; font-size: 17px; /* font size */ display: inline-block; margin: 5px 0; /* margin top/bottom and margin left/right*/ text-transform: uppercase; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } /*-- hover effects opening/toggle buttons --*/ #simple-menu:hover{ color: #218167; } /* fixed button to open right slide */ #right-menu{ position: fixed; right: 0; /* positioned on the right */ top: 180px; /* position from top */ width: 126px; height: 35px; background:black url(/files/theme/negro.png) repeat-x bottom left; border: 1px solid #1A1A1A; /* border of the button */ border-right: 0; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } /* hover right button */ #right-menu:hover{ opacity: .8; color:white!important; } /*-- closing button right and left --*/ #close-right, #close-left{ background: #fff; border-radius: 50%; line-height: 30px; position: absolute; color: #e96153; border: 1px solid #ddd; width: 30px; height: 30px; text-align: center; line-height: 30px; } #close-right{ left: 5px; } #close-left{ right: 5px; } /*-- hover effect for closing buttons --*/ #close-right:hover, #close-left:hover{ background: #fff; border: 1px solid #e96153; color: #e96153; } .inbtn{ margin-bottom: 50px; /*-- margin bottom under the closing button --*/ } .Rotate-90 { -webkit-transform:translateX(50px) rotate(90deg); -moz-transform: translateX(50px) rotate(90deg); -ms-transform: translateX(50px) rotate(90deg); -o-transform:translateX(50px) rotate(90deg); transform:translateX(50px) rotate(90deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; height: 33px; padding: 5px 8px 2px 8px; font-size: 16px; text-shadow: #3895B4 0px 0px 0px; color: white; width: 135px; text-align: center; text-transform: uppercase; word-spacing: 7px; } /*------------------------------------------------------------------- WIDGETt 4 - end -------------------------------------------------------------------*/