/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    ul.tabs-hide, ul.tabs2-hide { display: none; }
}

/* Hide useless elements in print layouts... */
@media print { ul.tabs, ul.tabs2 { display: none; }
}


/* JQuery Primeiro Painel*/





/*Caixa Especiais*/
#Especiais { float:right; background-color: #AAA; color:#666; margin: 0px 0 10px 0px; text-align:left; font-size: .9em;  overflow: auto; width: 260px; min-height: 100px;}
#Especiais img { height: 50px; float:left; padding: 4px; margin-right: 5px; }
#Especiais a { color:white; }





ul.tabs { margin: 0 0 0 0px; padding: 0 0 0 0px; float: left; list-style: none; height: 25px; /*--Set height of tabs--*/
	border-bottom: 1px solid #666; /*border-left: 1px solid #999; */
	width: 100%; background-color:#888; 
}
ul.tabs li { float: left; overflow: hidden; position: relative; margin: 0 0 0 1px; padding: 0; height: 25px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 25px; /*--Vertically aligns the text within the tab--*/
	/*border: 1px solid #999; */
	border-left: none; margin-bottom: 1px; /*--Pull the list item down 1px--*/
}
ul.tabs li a { text-decoration: none; color: #555; display: block; padding: 0 0 0 0px; width: 70px; text-align:center; /*border: 1px solid #333; */
	/*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none; font-size:90%; }
ul.tabs li a:hover { background: #AAA; }
ul.tabs .segundo { width: 100px; padding-left: 5px; text-align:center; }
ul.tabs li.segundo a:hover { width: 100px;text-align:left;  }

html ul.tabs li.active  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #AAA;  border: 1px solid #666; border-bottom:none; /*--Makes the active tab look like it's connected with its content--*/
}
html ul.tabs li.active a:hover {}
html ul.tabs li.active a { color:#AAA; }
.tab_container { /*border: 1px solid #999; */
	border-top: none; overflow: hidden; clear: both; float: left; width: 100%; /*background: #fff; */
}
.tab_content { padding: 10px; background-color:#AAA;  }






/* JQuery Segundo Painel*/




/*Caixa Especiais*/
#OpcoesIndex { float:right; background-color: #AAA; color:#555; margin: 0px 0 10px 0px; text-align:left; font-size: .9em;  overflow: auto; width: 260px; min-height: 200px;}
#OpcoesIndex img { height: 50px; float:left; padding: 4px; margin-right: 5px; }
#OpcoesIndex ul li a { color:white; }



ul.tabs2 { margin: 0 0 0 0px; padding: 0 0 0 0px; float: left; list-style: none; height: 25px; /*--Set height of tabs--*/
	border-bottom: 1px solid #666; /*border-left: 1px solid #999; */
	width: 100%; background-color:#888; 
}
ul.tabs2 li { float: left; overflow: hidden; position: relative; margin: 0 0 0 1px; padding: 0; height: 25px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 25px; /*--Vertically aligns the text within the tab--*/
	/*border: 1px solid #999; */
	border-left: none; margin-bottom: 1px; /*--Pull the list item down 1px--*/
}
ul.tabs2 li a { text-decoration: none; color: #666; display: block; padding: 0 0 0 0px; width: 100px; text-align:center; /*border: 1px solid #333; */
	/*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none; font-size:90%; }
ul.tabs2 li a:hover { background: #AAA; }
html ul.tabs2 li.active  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #AAA;  border: 1px solid #666; border-bottom:none; /*--Makes the active tab look like it's connected with its content--*/
}
html ul.tabs2 li.active a:hover {}
html ul.tabs2 li.active a { color:#AAA; }
.tab_container2 { /*border: 1px solid #999; */
	border-top: none; overflow: hidden; clear: both; float: left; width: 100%; /*background: #fff; */
}
.tab_content2 { padding: 10px; background-color:#AAA;  }