Current Path :
/
home
/
develito
/
www
/
modules
/
mod_bm_articles_tab
/
assets
/
css
/
Or
Select Your Path :
Upload File :
New :
File
Dir
/home/develito/www/modules/mod_bm_articles_tab/assets/css/styles.css
/** BM module style **/ .bm-tabs { position: relative; margin: 40px auto; width: 100%; } .bm-tabs input { position: absolute; z-index: 1000; width: auto; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .bm-tabs input#tab-2{ left: 120px; } .bm-tabs input#tab-3{ left: 240px; } .bm-tabs input#tab-4{ left: 360px; } .bm-tabs label { background: #5ba4a4; background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a)); background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%); font-size: 15px; line-height: 40px; height: 40px; position: relative; padding: 0 20px; float: left; display: block; color: #385c5b; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 3px 0 0; -webkit-box-shadow: 0px -4px 7px #e6e6e6; -moz-box-shadow: 0px -4px 7px #e6e6e6; box-shadow: 0px -4px 7px #e6e6e6; margin-bottom:0px; overflow:hidden; margin-right:1px; } .bm-tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block; } .bm-tabs input:hover + label { background: #5ba4a4; } .bm-tabs label:first-of-type { z-index: 4; -webkit-box-shadow: 0px -4px 7px #e6e6e6; -moz-box-shadow: 0px -4px 7px #e6e6e6; box-shadow: 0px -4px 7px #e6e6e6; } .bm-tabs .tab-label-2 { z-index: 3; } .bm-tabs .tab-label-3 { z-index: 2; } .bm-tabs .tab-label-4 { z-index: 1; } .bm-tabs input:checked + label { background: #fff; z-index: 6; } .clear-shadow { clear: both; } .bm-tabs .bm-content { background: #fff; position: relative; width: 100%; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; overflow:hidden; } .bm-tabs .bm-content > div{ position: relative; } .bm-tabs .bm-content > div > div { padding: 10px 20px; position: relative; } .bm-tabs input ~ .bm-content > div { top: 0; left: 0; z-index: 1; opacity: 0; height:0px; -webkit-transition: all linear 0.1s; -moz-transition: all linear 0.1s; -o-transition: all linear 0.1s; -ms-transition: all linear 0.1s; transition: all linear 0.1s; } .bm-tabs .bm-content .bm-tab-desc{ margin-top: 5px;} /* for effect 1 */ .bm-tabs-fade input.tab-selector-1:checked ~ .bm-content .bm-content-1, .bm-tabs-fade input.tab-selector-2:checked ~ .bm-content .bm-content-2, .bm-tabs-fade input.tab-selector-3:checked ~ .bm-content .bm-content-3, .bm-tabs-fade input.tab-selector-4:checked ~ .bm-content .bm-content-4, .bm-tabs-fade input.tab-selector-5:checked ~ .bm-content .bm-content-5, .bm-tabs-fade input.tab-selector-6:checked ~ .bm-content .bm-content-6, .bm-tabs-fade input.tab-selector-7:checked ~ .bm-content .bm-content-7, .bm-tabs-fade input.tab-selector-8:checked ~ .bm-content .bm-content-8, .bm-tabs-fade input.tab-selector-9:checked ~ .bm-content .bm-content-9, .bm-tabs-fade input.tab-selector-10:checked ~ .bm-content .bm-content-10, .bm-tabs-fade input.tab-selector-11:checked ~ .bm-content .bm-content-11 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; height:auto; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } /* end for effect 1 */ /* for effect 2 */ .bm-tabs-slide-x .bm-content-1, .bm-tabs-slide-x .bm-content-3, .bm-tabs-slide-x .bm-content-5, .bm-tabs-slide-x .bm-content-7, .bm-tabs-slide-x .bm-content-9, .bm-tabs-slide-x .bm-content-11 { -webkit-transform: translateX(-250px); -moz-transform: translateX(-250px); -o-transform: translateX(-250px); -ms-transform: translateX(-250px); transform: translateX(-250px); } .bm-tabs-slide-x .bm-content-2, .bm-tabs-slide-x .bm-content-4, .bm-tabs-slide-x .bm-content-6, .bm-tabs-slide-x .bm-content-8, .bm-tabs-slide-x .bm-content-10, .bm-tabs-slide-x .bm-content-12 { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -o-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } .bm-tabs-slide-x input.tab-selector-1:checked ~ .bm-content .bm-content-1, .bm-tabs-slide-x input.tab-selector-2:checked ~ .bm-content .bm-content-2, .bm-tabs-slide-x input.tab-selector-3:checked ~ .bm-content .bm-content-3, .bm-tabs-slide-x input.tab-selector-4:checked ~ .bm-content .bm-content-4, .bm-tabs-slide-x input.tab-selector-5:checked ~ .bm-content .bm-content-5, .bm-tabs-slide-x input.tab-selector-6:checked ~ .bm-content .bm-content-6, .bm-tabs-slide-x input.tab-selector-7:checked ~ .bm-content .bm-content-7, .bm-tabs-slide-x input.tab-selector-8:checked ~ .bm-content .bm-content-8, .bm-tabs-slide-x input.tab-selector-9:checked ~ .bm-content .bm-content-9, .bm-tabs-slide-x input.tab-selector-10:checked ~ .bm-content .bm-content-10, .bm-tabs-slide-x input.tab-selector-11:checked ~ .bm-content .bm-content-11 { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; height:auto; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } /* end for effect 2 */ /* for effect 3 */ .bm-tabs-slide-y .bm-content-1, .bm-tabs-slide-y .bm-content-3, .bm-tabs-slide-y .bm-content-5, .bm-tabs-slide-y .bm-content-7, .bm-tabs-slide-y .bm-content-9, .bm-tabs-slide-y .bm-content-11 { -webkit-transform: translateY(-250px); -moz-transform: translateY(-250px); -o-transform: translateY(-250px); -ms-transform: translateY(-250px); transform: translateY(-250px); } .bm-tabs-slide-y .bm-content-2, .bm-tabs-slide-y .bm-content-4, .bm-tabs-slide-y .bm-content-6, .bm-tabs-slide-y .bm-content-8, .bm-tabs-slide-y .bm-content-10, .bm-tabs-slide-y .bm-content-12 { -webkit-transform: translateY(250px); -moz-transform: translateY(250px); -o-transform: translateY(250px); -ms-transform: translateY(250px); transform: translateY(250px); } .bm-tabs-slide-y input.tab-selector-1:checked ~ .bm-content .bm-content-1, .bm-tabs-slide-y input.tab-selector-2:checked ~ .bm-content .bm-content-2, .bm-tabs-slide-y input.tab-selector-3:checked ~ .bm-content .bm-content-3, .bm-tabs-slide-y input.tab-selector-4:checked ~ .bm-content .bm-content-4, .bm-tabs-slide-y input.tab-selector-5:checked ~ .bm-content .bm-content-5, .bm-tabs-slide-y input.tab-selector-6:checked ~ .bm-content .bm-content-6, .bm-tabs-slide-y input.tab-selector-7:checked ~ .bm-content .bm-content-7, .bm-tabs-slide-y input.tab-selector-8:checked ~ .bm-content .bm-content-8, .bm-tabs-slide-y input.tab-selector-9:checked ~ .bm-content .bm-content-9, .bm-tabs-slide-y input.tab-selector-10:checked ~ .bm-content .bm-content-10, .bm-tabs-slide-y input.tab-selector-11:checked ~ .bm-content .bm-content-11 { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; height:auto; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } /* end for effect 3 */ /* for effect 4 */ .bm-tabs-fade-slide .bm-content > div { -webkit-transform: translateY(-450px); -moz-transform: translateY(-450px); -o-transform: translateY(-450px); -ms-transform: translateY(-450px); transform: translateY(-450px); } .bm-tabs-fade-slide input.tab-selector-1:checked ~ .bm-content .bm-content-1, .bm-tabs-fade-slide input.tab-selector-2:checked ~ .bm-content .bm-content-2, .bm-tabs-fade-slide input.tab-selector-3:checked ~ .bm-content .bm-content-3, .bm-tabs-fade-slide input.tab-selector-4:checked ~ .bm-content .bm-content-4, .bm-tabs-fade-slide input.tab-selector-5:checked ~ .bm-content .bm-content-5, .bm-tabs-fade-slide input.tab-selector-6:checked ~ .bm-content .bm-content-6, .bm-tabs-fade-slide input.tab-selector-7:checked ~ .bm-content .bm-content-7, .bm-tabs-fade-slide input.tab-selector-8:checked ~ .bm-content .bm-content-8, .bm-tabs-fade-slide input.tab-selector-9:checked ~ .bm-content .bm-content-9, .bm-tabs-fade-slide input.tab-selector-10:checked ~ .bm-content .bm-content-10, .bm-tabs-fade-slide input.tab-selector-11:checked ~ .bm-content .bm-content-11 { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; height:auto; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } /* end for effect 3 */ .bm-content div h2, .bm-content div h3{ color: #398080; } .bm-content div p { font-size: 14px; line-height: 22px; font-style: italic; text-align: left; margin: 0; color: #777; padding-left: 15px; font-family: Cambria, Georgia, serif; border-left: 8px solid rgba(63,148,148, 0.1); } @media all and (max-width: 480px) { .bm-tabs label { float: none; margin-top:1px; } }