.tabs { position: relative; margin: 40px auto; width: 750px; } .tabs input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .tabs input#tab-2{ top: 40px; } .tabs input#tab-3{ top: 80px; } .tabs input#tab-4{ top: 120px; } .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; display: block; width: 80px; color: #385c5b; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: right; float: left; clear: both; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 0 0 3px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1); } .tabs label:after { content: ''; background: #fff; position: absolute; right: -2px; top: 0; width: 2px; height: 100%; } .tabs input:hover + label { background: #5ba4a4; } .tabs label:first-of-type { z-index: 4; } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked + label { background: #fff; z-index: 6; } .clear-shadow { clear: both; } .content { background: #fff; position: relative; width: auto; margin: -175px 0 0 120px; height: 400px; z-index: 5; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); border-radius: 3px; } .content div { position: absolute; top: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: all linear 0.5s; -moz-transition: all linear 0.5s; -o-transition: all linear 0.5s; -ms-transition: all linear 0.5s; transition: all linear 0.5s; } .content div{ -webkit-transform: translateY(-450px); -moz-transform: translateY(-450px); -o-transform: translateY(-450px); -ms-transform: translateY(-450px); transform: translateY(-450px); } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { -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; -webkit-transition: all ease-out 0.3s 0.3s; -moz-transition: all ease-out 0.3s 0.3s; -o-transition: all ease-out 0.3s 0.3s; -ms-transition: all ease-out 0.3s 0.3s; transition: all ease-out 0.3s 0.3s; } .content div h2, .content div h3{ color: #398080; } .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); }