.plugin{background:#f0f0f0;border:1px dashed;padding:20px;}

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

.fbtitle{font-size:2em;font-family:Times New Roman;font-style:italic; clear:both; display:block;padding:10px 0;}
.skfield{font-weight:bold;}
.skf{float:left; width:30%; text-align:right; font-weight:bold;}
.ski{/*float:left; width:65%; text-align:left; padding-left:20px;*/}
.fbclear{clear:both; height:25px;}

a.fblink, a:visited.fblink{color:#FF6600;}
a:hover.fblink{color:#CCC;}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabber .tabberLoad{
	clear:both;
display:block;
font-family:Times New Roman;
font-size:3em;
font-style:italic;
padding:20px 0;
 color:#FF6600; 
 text-decoration: blink;
}
.tabbertab {
background:#FFF;
}
.tabberlive {
 margin-top:10px;

}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 0 0 30px 15px;
 border-bottom: 1px solid #AAAAAA;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 /*list-style: none;
 margin: 0;
 display: inline;*/
 	background:transparent url(../img/tab-left.gif) no-repeat scroll left top;
	float:left;
	margin:0 5px 0 0;
	padding:0 0 0 9px;
	border-bottom:1px solid #AAA;
}


ul.tabbernav li a, ul.tabbernav li a:visited 
{
 /*padding: 4px;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #efefef;
 text-decoration: none;*/
 	background:transparent url(../img/tab-right.gif) no-repeat scroll right top;
	color:#c9c9c9;
	display:block;
	float:left;
	padding:7px 15px 6px 6px;
	text-decoration:none;
}

ul.tabbernav li a:link {  }

ul.tabbernav li a:hover
{
 /*color: #333;
 background: #222;
 border-color: #227;*/
 background:transparent url(../img/tab-active-right.gif) no-repeat scroll right top;
 color:#333;
}
ul.tabbernav li:hover{
  	background:transparent url(../img/tab-active-left.gif) no-repeat scroll left top;
	border-bottom:1px solid #FFF;
}
ul.tabbernav li.tabberactive{
  	background:transparent url(../img/tab-active-left.gif) no-repeat scroll left top;
	border-bottom:1px solid #FFF;
}
ul.tabbernav li.tabberactive a
{
 /*background-color: #9E0808;
 color:#FFF;
 border-bottom: 1px solid #fff;*/
 background:transparent url(../img/tab-active-right.gif) no-repeat scroll right top;
 color:#333;
}

ul.tabbernav li.tabberactive a:hover
{
 /*color:#000;*/
 /*color: #000;
 background: white;
 border-bottom: 1px solid white;*/
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:10px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}
.tabberlive .tabberLoad{
 display:none;
 }

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}


/* -------------------- Box module -------------------- */

div.module { 
	/*background: url('../img/module-body-left-bg.gif') no-repeat scroll bottom left; */
	float: left; 
	width: 100%; 
	margin-bottom: 20px; 
	}

div.module div.module-body { 
	background: url('../img/module-body-right-bg.gif') no-repeat scroll bottom right; 
	padding: 20px 3% 20px 3%; float: left; width: 94%;
	}

/* Percentage padding in the module dependant on the cell width */
.grid_1 div.module div.module-body  { padding: 20px 8% 20px 8%; float: left; width: 84%; }
.grid_2 div.module div.module-body  { padding: 20px 7% 20px 7%; float: left; width: 86%; }
.grid_3 div.module div.module-body  { padding: 20px 6% 20px 6%; float: left; width: 88%; }
.grid_4 div.module div.module-body  { padding: 20px 5% 20px 5%; float: left; width: 90%; }
.grid_5 div.module div.module-body  { padding: 20px 4% 20px 4%; float: left; width: 92%; }
.grid_6 div.module div.module-body  { padding: 20px 3% 20px 3%; float: left; width: 94%; }
.grid_7 div.module div.module-body  { padding: 20px 2.75% 20px  2.75%; float: left; width: 94.5%; }
.grid_8 div.module div.module-body  { padding: 20px 2.5% 20px 2.5%; float: left; width: 95%; }
.grid_9 div.module div.module-body  { padding: 20px 2.25% 20px 2.25%; float: left; width: 95.5%; }
.grid_10 div.module div.module-body { padding: 20px 2% 20px 2%; float: left; width: 96%; }
.grid_11 div.module div.module-body { padding: 20px 1.75% 20px 1.75%; float: left; width: 96.5%; }
.grid_12 div.module div.module-body { padding: 20px 1.5% 20px 1.5%; float: left; width: 97%; }


	
div.module div.module-table-body { 
	background: url('../img/module-body-right-bg.gif') no-repeat scroll bottom right; 
	padding: 0; 
	float: left; 
	width: 100%; 
	}

div.module h4 { 
    /* Sliding right image */
    /*background: url('../img/module-header-left-bg.gif') no-repeat scroll top left; */
	display: block;
	float: left;
	height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding-right: 0px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	/* FONT PROPERTIES */
	text-decoration: none;
	color: #444444;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	width: 100%;
	letter-spacing: normal;
	margin: 0;
	}

div.module h4 span { 
	/* Background left image */ 
	/*background: url('../img/module-header-right-bg.gif') no-repeat top right; */
	display: block;
	line-height: 20px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 7px 0 5px 18px;

	}

div.module table {
	width: 100%; 
	margin: 0 0 10px 0;
	border-left: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	}

div.module table.tr {
	border-collapse: separate;
	border-right: 1px solid #aaaaaa;
	border-left: 1px solid #aaaaaa;
	}

div.module table th {
	background-color: #eeeeee;
	color: #444444;
	padding: 5px;
	text-align: left;
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	}
	
div.module table td {
	background-color: #ffffff;
	padding: 5px;;
	border-right: 1px solid #d9d9d9;
	}

div.module table tr.odd td { /* You can use this style if you want to do zebra-colored tables with other technique than Table Sorter script used here */
	background-color: #f1f5fa;
	}
	
.table-apply {
	width: 40%; float: right; text-align: right; margin-right: 10px;
	}
	
.layout{/*background:#f0f0f0;*/ margin-bottom:10px;}
.layout img{border:1px solid #CCC;}

.layout_checked{ background:#F0F0F0; font-weight:bold; margin-bottom:10px;}
.layout_checked img{border:1px solid #FF6600;}

div.module .label{display:block;
float:left;
padding:0 5px 0 0;
text-align:right;
width:80px;
}

select.slct1{
	width:220px;
}
select.slct2{
	width:120px;
}
input.inp1{
 	width:220px;
}
input.inp2{
 	width:120px;
}
/* simple css-based tooltip */
div.tooltip {
	background-color:#efefef;
	border:1px solid #333;
	padding:10px 15px;
	width:200px;
	display:none;
	color:#333;
	text-align:left;
	font-size:12px;
	z-index:100000;

	/* outline radius for mozilla/firefox only */
	/*-moz-box-shadow:0 0 10px #000;
	-webkit-box-shadow:0 0 10px #000;*/
}

/* root element for tabs  */
ul.tabs {  
	margin:0 !important; 
	padding:0;
	height:30px;
	border-bottom:1px solid #666;	 	
}

/* single tab */
ul.tabs li {  
	float:left;	 
	padding:0; 
	margin:0;  
	list-style-type:none;	
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	float:left;
	font-size:13px;
	display:block;
	padding:5px 30px;	
	text-decoration:none;
	border:1px solid #666;	
	border-bottom:0px;
	height:18px;
	background-color:#efefef;
	color:#777;
	margin-right:2px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright:4px;
	position:relative;
	top:1px;	
}

ul.tabs a:hover {
	background-color:#F7F7F7;
	color:#333;
}
	
/* selected tab */
ul.tabs a.current {
	background-color:#ddd;
	border-bottom:2px solid #ddd;	
	color:#000;	
	cursor:default;
}

	
/* tab pane */
div.panes div {
	display:none;
	border:1px solid #666;
	border-width:0 1px 1px 1px;
	min-height:150px;
	padding:15px 20px;
	background-color:#ddd;	
}


/* alternate colors: skin2 */ 
ul.skin2 a { 
    background-color:#89a;         
    color:#fff !important; 
} 
 
/* mouseover state */ 
ul.skin2 a:hover { 
    background-color:#678; 
} 
 
/* active tab */ 
ul.skin2 a.current { 
    background-color:#4F5C6A; 
    border-bottom:2px solid #4F5C6A;     
} 
 
/* tab pane with background gradient */ 
div.skin2 div { 
    min-height:200px; 
    color:#fff;     
    background:#234 url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x scroll 0 -50px; 
     
    /* IE6 does not support PNG24 images natively */ 
    _background:#4F5C6A; 
}



div.wrap {
	width:700px;
	margin-bottom:40px;
}

div.wrap .pane  {	
	background:#fff url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 20px;
	display:none;		
	padding:20px;
	border:1px solid #999;
	border-top:0;
	font-size:14px;	 
	font-size:18px;
	color:#456;	
	
	_background-image:none;
}

div.wrap .pane p {
	font-size:38px;	
	margin:-10px 0 -20px 0;	
	text-align:right;
	color:#578;
}

img.color{border:none; padding:0 0 0 5px; position:relative; top:3px; }
textarea, input, select {
margin:1px 1px 3px 1px;
}