ul.tabs
{
    padding: 5px 0;
    font-size: 0;
    margin:0;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the tabs as desired*/

}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right:3px; /*distance between tabs*/
}
        
ul.tabs li a
{
   /*  font: normal 12px Verdana; */
	font-size:14px;
    text-decoration: none;
    position: relative;
    padding: 5px 16px;
	padding-top: 10px ;
    border: 1px solid #b3b3b3;
    border-bottom-color:#b3b3b3;
    color: #000;
    background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
    border-radius: 5px 5px 0 0;
    outline:none;
/*	
   -moz-box-shadow: 0 0 5px 3px #888;
   -webkit-box-shadow: 0 0 3px 5px #888;
   box-shadow: -3px -4px 5px #B7B7B7 ;
   */
 
}
        
ul.tabs li a:visited
{
    color: #000;
}
        
ul.tabs li a:hover
{
    border: 1px solid #b3b3b3;
    background:#F0F0F0 url(tabbg.gif) 0 -36px repeat-x;
}
        
ul.tabs li.selected a, ul.tabs li.selected a:hover {
    position: relative;
    top: 0px;
    font-weight:bold;
	font-size:15px;
    background: #e6e6e6;
    border: 1px solid #b3b3b3;
    border-top : 4px solid #ff9900;
	border-bottom-color: #e6e6e6;
 z-index:3;
}
        
        
ul.tabs li.selected a:hover
{
    text-decoration: none;
 
}
     

div.tabcontents {
	height:70vh;
    border: 1px solid #b3b3b3; 
	padding:0px 0px 20px 0px;
	margin-bottom:00px;
	background-color: #e6e6e6;  
    border-radius: 0 3px 3px 3px;
 /*  box-shadow: 1px 1px 5px #e6e6e6 ;
 -moz-box-shadow: 0 2 5px 3px #888;
  -webkit-box-shadow: 0 2 3px 5px#888;
  box-shadow: 2px 2px 8px #707070 ;
  */
 box-shadow: -4px 4px 8px 0 rgba(0, 0, 0, 0.2);  
 width:99.5%;
 position:relative;
 width:99.5%; 
 height:65%;
}

.tabcontent {
  animation: fadeEffect 0.1s; /* Fading effect takes 1 second */
}

 
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}