.tabs 
{                           
  font:system;
  behavior:tabs; /*指定这是一个选项卡控件*/
  flow: horizontal; /*修改默认的垂直布局为横向布局,这样strip就跑左侧去了*/
  height:100%%;
  width:100%%;
  overflow:hidden;
}

.tabs > .strip /* 选项卡容器 */
{
  flow: vertical; /*选项卡按钮改成垂直布局*/
  margin-bottom:-1px;
  padding: 2px 0 2px 2px;
  width:60px; 
}

.tabs > .strip > [panel] /* 选项卡按钮默认样式 */
{
  padding: 3px 8px;
  margin-bottom:1px;
  height: 100%%;
  width:80px; 
  background-color:rgb(237,238,238);
}
.tabs > .strip > [panel]:hover /* 鼠标悬停选项卡样式*/
{
  background-color:rgb(223,236,249) rgb(223,236,249) rgb(201,256,221) rgb(201,256,221);
  transition:blend;
}
.tabs > .strip > [panel]:current  /*当前选项卡样式*/
{
  background-color:rgb(106,163,216) rgb(106,163,216) rgb(43,114,186) rgb(43,114,186); 
  padding: 4px 8px 5px 8px; 
  position:relative;
}
.tabs > .strip > [panel]:current:hover /*点击当前选项卡的样式*/
{
  background-image:url(theme:tab-item-selected);
  transition:none;
}

.tabs > .strip > [panel]:current:first-child,
.tabs > .strip > [panel]:current:hover:first-child
{
  background-image:url(theme:tab-item-leftmost-selected);
} 

.tabs:focus .strip [panel]:current 
{
  background-image:url(theme:tab-item-focused);
} 

//下面指定内容页样式
.tabs > .panel[name] { display:none; }

//框架页正在打开
.tabs > iframe.panel[name]:busy { 
  foreground-image:url(images/loading.png);
  foreground-repeat: no-repeat;
  foreground-position: 2px 2px;
}

.tabs > .panel[name]:expanded 
{ 
  background-image:url(theme:tab-panel);
  background-repeat:stretch;
  padding:7px;
  margin:2px;
  display:block; 
  height:100%%;
  width:100%%;//框架必须指定宽度
} 

//下面指定关闭按钮的样式
.tabs > .strip > [panel] .close-panel{
  display:none;
}
.tabs > .strip > [panel]:current .close-panel{ 
  display:block;  
  float:right;
  width:10px;
  height:10px;
  padding:1px;
  font-family:"Marlett"; 
  content:"r";
}
.tabs > .strip > [panel]:current .close-panel:hover{ 
  background:#999;
}
.tabs > .strip > [panel]:current .close-panel:active{ 
   background:red;
}