* {
    margin: 0;
    padding:0;
}

/*CSS Tabs style*/
#cssTabs {
    position: relative;
   
   height:350px;
    margin: 0 auto;
}
.tabHead {
    font-weight: normal;
    padding: 5px;
    height: 30px;
    line-height: 10px;
    text-align: center;
    border: 1px solid #000;
    border-width: 1px 1px 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    width: 140px;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    cursor: pointer;
}
.tabContent {
    padding: 10px 20px;
    background: #fff;
  
    position: absolute;
    top: 20px;
    left: 0;
    height: 300px;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition : opacity 0.5s ease-in 0.218s;
    -moz-transition : opacity 0.5s ease-in 0.218s;
    -o-transition : opacity 0.5s ease-in 0.218s;
    -ms-transition : opacity 0.5s ease-in 0.218s;
    transition : opacity 0.5s ease-in 0.218s;
}
#tab1 .tabHead {
    z-index: 3;
}
#tab2 .tabHead {
    left: 155px;
    z-index: 1;
}
#tab3 .tabHead {
    left: 310px;
    z-index: 1;
}
#tab1 .tabContent {
    z-index: 2;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3, #tab2:hover h3, #tab2:focus h3, #tab2:active h3, #tab3:hover h3, #tab3:focus h3, #tab3:active h3 {
    z-index: 4;
    font-weight: bold;
}
#tab1:hover .tabContent, #tab1:focus .tabContent, #tab1:active .tabContent, #tab2:hover .tabContent, #tab2:focus .tabContent, #tab2:active .tabContent, #tab3:hover .tabContent, #tab3:focus .tabContent, #tab3:active .tabContent {
    z-index: 3;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}