/*  
 三种必备样式为：  
 paneClass:    "ui-layout-pane" 窗格样式  
 resizerClass: "ui-layout-resizer" 拉动条样式  
 togglerClass: "ui-layout-toggler" 拉动条上按钮样式  
 */  
   
 /*  
  所有窗格应用的样式,也是必备样式  
 ui-layout-pane   
 ui-layout-pane-[PANE-NAME]（东南西北中，如：ui-layout-pane-west。这个样式放入基本样式下方，可覆盖原样式。 ）   
 ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打开时的样式）  
 ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定东南西北中一个窗格在某状态下的样式。）  
 */  
 .ui-layout-pane {   
     background: #FFFFFF;  /* #dfe8f6; */ 
     padding:    2px;   
     overflow:   auto;  
 }  
/*非必备样式，描述窗格中的内容*/  
.ui-layout-content {  
         padding:    10px;  
         position:   relative;   
         overflow:   auto;  
}
   
 /*  
  *  所有拉动条的样式  
  */  
 .ui-layout-resizer  {   
     background:     #BBB;  
     border:         1px solid #BBB;  
     border-width:   0;  
}
/*  
      * 拉动条拉动时，保持不动的拉动条样式，不明白修改背景测试。  
      */  
.ui-layout-resizer-drag {  
}
       
/*鼠标移动到拉动条时的样式*/  
.ui-layout-resizer-hover{  
}
/*   
      *拖动拉动条时，拉动条的样式，据说是设置“打开悬停”和“拖动”为同一样式。  
      */  
/*.ui-layout-resizer-open-hover ,   */  
.ui-layout-resizer-dragging {     
         background:#aaaaaa;  
}
   
/*拖动拉动条时，到最大或最小边缘时的样式*/  
.ui-layout-resizer-dragging-limit {  
         background: #E1A4A4; /* red */  
}
   
/*拉动条关闭时，的样式。*/  
.ui-layout-resizer-closed-hover {   
         background: #FFCC00;  
}
       
/*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时拉动条的样式*/  
.ui-layout-resizer-sliding {      
    opacity: .10;   
    filter:  alpha(opacity=10);  
}  
/*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时，鼠标悬停在拉动条上的样式*/  
.ui-layout-resizer-sliding-hover {  
    opacity: 1.00;   
    filter:  alpha(opacity=100);  
}  
   
   
   
       
   
/*  
  *  拖动杆上的按钮  
*/  
.ui-layout-toggler {  
     border: 1px solid #CCCCCC;   
     background-color: #bcd2ef;  
     opacity: .60;  
     filter:  alpha(opacity=60);  
}
       
 /*  
     鼠标悬停在拉动条时的样式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。  
.ui-layout-resizer-hover  
*/  
       
       
/*鼠标悬停在拖动条上按钮的样式*/  
.ui-layout-toggler-hover {  
         background-color: #0099FF；  
         opacity: 1.00;  
         filter:  alpha(opacity=100);  
}
       
/*窗格关闭后，半打开状态的拉动条是隐藏的*/  
.ui-layout-resizer-sliding  ui-layout-toggler {  
         display: none;  
}
   
   
 /*貌似是按钮上的文字内容*/  
.ui-layout-toggler .content {
     background:#FFFF00;  
     color: #66FFCC;  
     font-size:      12px;  
     font-weight:    bold;  
     width:          100%;  
     padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */  
 } 
 
 
 .ui-layout-toggler-north-open, .ui-layout-toggler-south-closed {
    background: url("img/toggle-up.gif") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    border: 0px;
}
.ui-layout-toggler-north-closed, .ui-layout-toggler-south-open {
    background: url("img/toggle-dn.gif") no-repeat scroll center top rgba(0, 0, 0, 0);
    border: 0px;
}
.ui-layout-toggler-east-closed, .ui-layout-toggler-west-open {
    background: url("img/toggle-lt.gif") no-repeat scroll right center rgba(0, 0, 0, 0);
    border: 0px;
}
.ui-layout-toggler-east-open {
    background: url("img/toggle-rt.gif") no-repeat scroll left center rgba(0, 0, 0, 0);
    border: 0px;
}