/** * PWS Tabs jQuery Plugin * Author: Alex Chizhov * Author Website: http://alexchizhov.com/pwstabs * GitHub: https://github.com/alexchizhovcom/pwstabs * Version: 1.4.0 * Version from: 06.03.2016 * Licensed under the MIT license */ .pws_tabs_container, .pws_tabs_controll a { font-size: 16px; } @media only screen and (max-width: 60em) { .pws_tabs_container.pws_tabs_responsive { width: 100% !important; } .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll { width: 100%; } .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li { vertical-align: top; text-align: center; } .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li a { margin: 0; font-size: 1em; line-height: 1.125em; overflow: hidden; } .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll li a i { display: block; margin: 0 0 5px 0; } .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical { display: block; position: relative; } .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical:after { display: block; content: ''; clear: both; } .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll { width: 100%; position: relative; float: none; } .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll li { display: inline-block; } .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical ul.pws_tabs_controll li a { margin: 0; } .pws_tabs_container.pws_tabs_responsive.pws_tabs_vertical .pws_tabs_list { position: relative; float: none; } } @media only screen and (max-width: 37.5em) { .pws_tabs_container.pws_tabs_responsive { width: 100% !important; position: relative; } .pws_tabs_container.pws_tabs_responsive .pws_responsive_small_menu { width: 100%; height: 40px; background-color: #9bd7d5; display: block; } .pws_tabs_container.pws_tabs_responsive .pws_responsive_small_menu a { width: 40px; height: 40px; display: block; overflow: hidden; color: #fff; font-size: 32px; font-size: 2em; text-align: center; padding: 3px 0 0 0; cursor: pointer; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .pws_tabs_container.pws_tabs_responsive .pws_responsive_small_menu a:hover { background-color: #70c5c2; } .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll.pws_tabs_menu_popup { display: block; position: absolute; overflow: hidden; top: 40px; left: 0; z-index: 99; margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll.pws_tabs_menu_popup li { display: block; float: none; } .pws_tabs_container.pws_tabs_responsive ul.pws_tabs_controll.pws_tabs_menu_popup li a i { display: inline-block; margin: 0 3px 0 0; margin: 0 0.1875em 0 0; } .pws_tabs_container.pws_tabs_responsive.pws_tabs_rtl ul.pws_tabs_controll.pws_tabs_menu_popup li a i { display: inline-block; margin: 0 0 0 3px; margin: 0 0 0 0.1875em; } } .pws_tabs_container { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pws_tabs_container ul.pws_tabs_controll { list-style: none; margin: 0; padding: 0; } .pws_tabs_container ul.pws_tabs_controll li { display: inline-block; } .pws_tabs_container ul.pws_tabs_controll li a { display: block; background-color: #9bd7d5; padding: 15px 20px; padding: 0.9375em 1.25em; text-decoration: none; color: #fff; margin-right: 3px; cursor: pointer; } .pws_tabs_container ul.pws_tabs_controll li a:hover { background-color: #70c5c2; } .pws_tabs_container ul.pws_tabs_controll li a i { margin-right: 8px; } .pws_tabs_container ul.pws_tabs_controll li a.pws_tab_noname i { margin-right: 0; margin-left: 0; } .pws_tabs_container ul.pws_tabs_controll li a.pws_tab_active { background-color: white; color: #505050; } .pws_tabs_list { display: block; background-color: #fff; height: auto; padding: 20px; padding: 1.25em; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; overflow: hidden; position: relative; } .pws_tab_single { /*position: absolute;*/ /*top: 20px;*/ /*padding-right: 20px;*/ /*padding-right: 1.25em; // @1.2.0*/ display: block; -webkit-transition: all .3s ease-in-out .0; -moz-transition: all .3s ease-in-out .0; -o-transition: all .3s ease-in-out .0; transition: all .3s ease-in-out .0; } /** * ###################################################### * Right To Left Styles * ###################################################### */ .pws_tabs_container.pws_tabs_rtl { text-align: right; direction: rtl; } .pws_tabs_container.pws_tabs_rtl ul.pws_tabs_controll li a { margin-right: 0; margin-left: 3px; } .pws_tabs_container.pws_tabs_rtl ul.pws_tabs_controll li a i { margin-left: 8px; margin-right: 0; } .pws_tabs_container.pws_tabs_rtl .pws_tab_single { /*padding-right: 0;*/ /*padding-left: 20px;*/ /*padding-left: 1.25em; // @1.2.0*/ } /** * ###################################################### * Vertical Position * ###################################################### */ .pws_tabs_container.pws_tabs_vertical { display: block; position: relative; } .pws_tabs_container.pws_tabs_vertical:after { display: block; content: ''; clear: both; } .pws_tabs_container.pws_tabs_vertical > ul.pws_tabs_controll { width: auto; position: relative; float: left; } .pws_tabs_container.pws_tabs_vertical > ul.pws_tabs_controll li { display: block; } .pws_tabs_container.pws_tabs_vertical > ul.pws_tabs_controll li a { margin-right: 0; margin-left: 0; margin-bottom: 3px; } .pws_tabs_container.pws_tabs_vertical > .pws_tabs_list { position: relative; float: left; } /** * ###################################################### * Colors - Themes @1.2.0 * ###################################################### */ /** * ########################### * violet * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_violet .pws_responsive_small_menu { background-color: #c72c66; } .pws_tabs_container.pws_tabs_responsive.pws_theme_violet .pws_responsive_small_menu a:hover { background-color: #a6164c; } .pws_tabs_container.pws_theme_violet ul.pws_tabs_controll li a { background-color: #c72c66; } .pws_tabs_container.pws_theme_violet ul.pws_tabs_controll li a:hover { background-color: #a6164c; } .pws_tabs_container.pws_theme_violet ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * green * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_green .pws_responsive_small_menu { background-color: #86c447; } .pws_tabs_container.pws_tabs_responsive.pws_theme_green .pws_responsive_small_menu a:hover { background-color: #539312; } .pws_tabs_container.pws_theme_green ul.pws_tabs_controll li a { background-color: #86c447; } .pws_tabs_container.pws_theme_green ul.pws_tabs_controll li a:hover { background-color: #539312; } .pws_tabs_container.pws_theme_green ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * yellow * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_yellow .pws_responsive_small_menu { background-color: #fdb813; } .pws_tabs_container.pws_tabs_responsive.pws_theme_yellow .pws_responsive_small_menu a:hover { background-color: #ffa500; } .pws_tabs_container.pws_theme_yellow ul.pws_tabs_controll li a { background-color: #fdb813; } .pws_tabs_container.pws_theme_yellow ul.pws_tabs_controll li a:hover { background-color: #ffa500; } .pws_tabs_container.pws_theme_yellow ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * gold * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_gold .pws_responsive_small_menu { background-color: #f89827; } .pws_tabs_container.pws_tabs_responsive.pws_theme_gold .pws_responsive_small_menu a:hover { background-color: #fa7b00; } .pws_tabs_container.pws_theme_gold ul.pws_tabs_controll li a { background-color: #f89827; } .pws_tabs_container.pws_theme_gold ul.pws_tabs_controll li a:hover { background-color: #fa7b00; } .pws_tabs_container.pws_theme_gold ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * orange * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_orange .pws_responsive_small_menu { background-color: #f15b42; } .pws_tabs_container.pws_tabs_responsive.pws_theme_orange .pws_responsive_small_menu a:hover { background-color: #fd2e0b; } .pws_tabs_container.pws_theme_orange ul.pws_tabs_controll li a { background-color: #f15b42; } .pws_tabs_container.pws_theme_orange ul.pws_tabs_controll li a:hover { background-color: #fd2e0b; } .pws_tabs_container.pws_theme_orange ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * red * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_red .pws_responsive_small_menu { background-color: #e41937; } .pws_tabs_container.pws_tabs_responsive.pws_theme_red .pws_responsive_small_menu a:hover { background-color: #d70726; } .pws_tabs_container.pws_theme_red ul.pws_tabs_controll li a { background-color: #e41937; } .pws_tabs_container.pws_theme_red ul.pws_tabs_controll li a:hover { background-color: #d70726; } .pws_tabs_container.pws_theme_red ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * purple * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_purple .pws_responsive_small_menu { background-color: #672e8d; } .pws_tabs_container.pws_tabs_responsive.pws_theme_purple .pws_responsive_small_menu a:hover { background-color: #470871; } .pws_tabs_container.pws_theme_purple ul.pws_tabs_controll li a { background-color: #672e8d; } .pws_tabs_container.pws_theme_purple ul.pws_tabs_controll li a:hover { background-color: #470871; } .pws_tabs_container.pws_theme_purple ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * grey * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_grey .pws_responsive_small_menu { background-color: #4d4d4f; } .pws_tabs_container.pws_tabs_responsive.pws_theme_grey .pws_responsive_small_menu a:hover { background-color: #000000; } .pws_tabs_container.pws_theme_grey ul.pws_tabs_controll li a { background-color: #4d4d4f; } .pws_tabs_container.pws_theme_grey ul.pws_tabs_controll li a:hover { background-color: #000000; } .pws_tabs_container.pws_theme_grey ul.pws_tabs_controll li a.pws_tab_active { background-color: #fff; } /** * ########################### * violet * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_violet .pws_responsive_small_menu { background-color: #c72c66; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_violet .pws_responsive_small_menu a:hover { background-color: #a6164c; } .pws_tabs_container.pws_theme_dark_violet .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_violet ul.pws_tabs_controll li a { background-color: #c72c66; } .pws_tabs_container.pws_theme_dark_violet ul.pws_tabs_controll li a:hover { background-color: #a6164c; } .pws_tabs_container.pws_theme_dark_violet ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * green * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_green .pws_responsive_small_menu { background-color: #86c447; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_green .pws_responsive_small_menu a:hover { background-color: #539312; } .pws_tabs_container.pws_theme_dark_green .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_green ul.pws_tabs_controll li a { background-color: #86c447; } .pws_tabs_container.pws_theme_dark_green ul.pws_tabs_controll li a:hover { background-color: #539312; } .pws_tabs_container.pws_theme_dark_green ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * yellow * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_yellow .pws_responsive_small_menu { background-color: #fdb813; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_yellow .pws_responsive_small_menu a:hover { background-color: #ffa500; } .pws_tabs_container.pws_theme_dark_yellow .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_yellow ul.pws_tabs_controll li a { background-color: #fdb813; } .pws_tabs_container.pws_theme_dark_yellow ul.pws_tabs_controll li a:hover { background-color: #ffa500; } .pws_tabs_container.pws_theme_dark_yellow ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * gold * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_gold .pws_responsive_small_menu { background-color: #f89827; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_gold .pws_responsive_small_menu a:hover { background-color: #fa7b00; } .pws_tabs_container.pws_theme_dark_gold .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_gold ul.pws_tabs_controll li a { background-color: #f89827; } .pws_tabs_container.pws_theme_dark_gold ul.pws_tabs_controll li a:hover { background-color: #fa7b00; } .pws_tabs_container.pws_theme_dark_gold ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * orange * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_orange .pws_responsive_small_menu { background-color: #f15b42; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_orange .pws_responsive_small_menu a:hover { background-color: #fd2e0b; } .pws_tabs_container.pws_theme_dark_orange .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_orange ul.pws_tabs_controll li a { background-color: #f15b42; } .pws_tabs_container.pws_theme_dark_orange ul.pws_tabs_controll li a:hover { background-color: #fd2e0b; } .pws_tabs_container.pws_theme_dark_orange ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * red * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_red .pws_responsive_small_menu { background-color: #e41937; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_red .pws_responsive_small_menu a:hover { background-color: #d70726; } .pws_tabs_container.pws_theme_dark_red .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_red ul.pws_tabs_controll li a { background-color: #e41937; } .pws_tabs_container.pws_theme_dark_red ul.pws_tabs_controll li a:hover { background-color: #d70726; } .pws_tabs_container.pws_theme_dark_red ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * purple * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_purple .pws_responsive_small_menu { background-color: #672e8d; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_purple .pws_responsive_small_menu a:hover { background-color: #470871; } .pws_tabs_container.pws_theme_dark_purple .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_purple ul.pws_tabs_controll li a { background-color: #672e8d; } .pws_tabs_container.pws_theme_dark_purple ul.pws_tabs_controll li a:hover { background-color: #470871; } .pws_tabs_container.pws_theme_dark_purple ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * grey * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_grey .pws_responsive_small_menu { background-color: #4d4d4f; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_grey .pws_responsive_small_menu a:hover { background-color: #000000; } .pws_tabs_container.pws_theme_dark_grey .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_grey ul.pws_tabs_controll li a { background-color: #4d4d4f; } .pws_tabs_container.pws_theme_dark_grey ul.pws_tabs_controll li a:hover { background-color: #000000; } .pws_tabs_container.pws_theme_dark_grey ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ########################### * cyan * ########################### */ .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_cyan .pws_responsive_small_menu { background-color: #9bd7d5; } .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_cyan .pws_responsive_small_menu a:hover { background-color: #70c5c2; } .pws_tabs_container.pws_theme_dark_cyan .pws_tabs_list { background-color: #fafafa; } .pws_tabs_container.pws_theme_dark_cyan ul.pws_tabs_controll li a { background-color: #9bd7d5; } .pws_tabs_container.pws_theme_dark_cyan ul.pws_tabs_controll li a:hover { background-color: #70c5c2; } .pws_tabs_container.pws_theme_dark_cyan ul.pws_tabs_controll li a.pws_tab_active { background-color: #fafafa; } /** * ###################################################### * Effect: none * ###################################################### */ .pws_tabs_noeffect .pws_tabs_list { -webkit-transition: all .1s ease-in-out 0; -moz-transition: all .1s ease-in-out 0; -o-transition: all .1s ease-in-out 0; transition: all .1s ease-in-out 0; } .pws_tabs_noeffect .pws_tab_single { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .pws_tabs_container.pws_none .pws_hide { display: none; } .pws_tabs_container.pws_none .pws_show { display: block; } /** * ###################################################### * Effect: scale * ###################################################### */ .pws_tabs_container.pws_scale .pws_hide { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } .pws_tabs_container.pws_scale .pws_show { z-index: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } /** * ###################################################### * Effect: slideleft * ###################################################### */ .pws_tabs_container.pws_slideleft .pws_hide { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } .pws_tabs_container.pws_slideleft .pws_show { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } /** * ###################################################### * Effect: slideright * ###################################################### */ .pws_tabs_container.pws_slideright .pws_hide { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -o-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } .pws_tabs_container.pws_slideright .pws_show { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } /** * ###################################################### * Effect: slidetop * ###################################################### */ .pws_tabs_container.pws_slidetop .pws_hide { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } .pws_tabs_container.pws_slidetop .pws_show { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } /** * ###################################################### * Effect: slidedown * ###################################################### */ .pws_tabs_container.pws_slidedown .pws_hide { -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -o-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; } .pws_tabs_container.pws_slidedown .pws_show { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; -webkit-transition: all .3s ease-in-out .3s; -moz-transition: all .3s ease-in-out .3s; -o-transition: all .3s ease-in-out .3s; transition: all .3s ease-in-out .3s; }