/*
'**********************************************************
'	TOPCALL International 2003 - All rights reserved
'
'	Page: Brand_Style.css
'---------------------------------------------------------   
'	This page controls the colors and font styles for the application.
'**********************************************************
*/



/*
	General colors and fonts ******************************
*/
body, td, th, p, div, ul, ol,h1,h2,h3	{font-family:Verdana, Arial, Helvetica; font-size: 11px}

BODY{
	background-color : White;
	margin-bottom : 0;
	margin-left : 0;
	margin-right : 0;
	margin-top : 0;
}


select{
	font-size: 8pt;
}
input{
	font-size: 8pt;
}
input.simpleframe{
	border: 1px solid Gray;
}

input.readonly{	
	background-color:#DDDDDD;
}

body.standard, td.standard, table.standard{
	background-color : White;}

body.header, td.header, table.header {
	background-color : White;
}

table.mainMenu{background-color : #DDDDDD;}

table.header{
	background-color:#ffffff;
}

table.columnHeader{
	background-color:#ffffff;
}



/*
	Title and headers  ******************************
*/
.title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #6B7F8D; 
	font-weight: 800;
}

.titleApplication {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #6B7F8D; 
	font-weight: 800;
}

.header1{
	font-weight : bold;
}

table.logEntryDetailTable { 
  table-layout: fixed;
  width: 100%;
}

td.logEntryDetailTitle{
	
	font-size: 18px;
	width: 200px;
}

td.logEntryDetailTypeColumn{
	
	width: 200px;
}

td.logEntryDetailValueColumn
{
	width: auto;
	
	
}

.ProcessingMsg{
   	border-bottom-width: 0px;
	border-bottom-style: none;
	width : 200px;
}

.documentConvertingSendingMsg {
	border-bottom-width: 0px;
	border-bottom-style: none;
	
	color: green;
	font-weight: bold;
}
.documentConvertingSendingError {
	border-bottom-width: 0px;
	border-bottom-style: none;

	color: red;
	font-weight: bold;
}
/*
	Forms, Lines and Borders   ******************************
*/
td.tabSpace {
	background-color: #FFFFFF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	width: 1px;
}
td.tabActive{
	background-color: #FFFFFF;
	border-bottom-width: 0px;
	border: 1px solid #878787;
	border-bottom-style: none;
	padding: 5;
	background-color: #F7F9F8;
	
}
td.tabInactive{
	background-color: #FFFFFF; border-bottom-width: 0px; border: 1px solid #878787;  padding: 5;
}


table.tabFormBottom{
	border: 1px solid #666666; border-top-width: 0px; border-top-style: none;background-color: #F7F9F8; 
}

table.form{
	background-color:#F6F6F6;
}
table.message{
	background-color:#F6F6F6;
}
table.loginbox{
	background-color : #F7F9F8;
}
td.loginbox{
	background-color : #F7F9F8;
}



table.formBorder{
	background-color:#666666;
}


td.headerLine1{
	background-color:#ffffff;
}

td.headerLine2{
	background-color:#666666;
}

td.leftPaneLine{
	background-color:#ffffff;
}

table.mainMenuBorder{
	background-color:#999999;
}

table.columnHeaderBorder{
	background-color:#999999;
}

table.columnHeaderBackground{
	background-color:#eeeeee;
}

table.viewListBorder{
	background-color:#DDDDDD;
}






/*
	Buttons   ******************************
*/


input.button   {
	background-color : #ffffff;
	border-top: 1px #cce3ff solid;
	border-left: 1px #cce3ff solid;
	border-bottom: 1px #31557f solid;
	border-right: 1px #31557f solid;
	font-size : 10px;
	cursor : pointer;
}

input.buttonHilight   {
	background-color : #C7DAE4;
	border-top: 1px #cce3ff solid;
	border-left: 1px #cce3ff solid;
	border-bottom: 1px #31557f solid;
	border-right: 1px #31557f solid;
	font-size : 10px;
	cursor : pointer;
}

/* "All Lists", buttons that are in the list rows. */
td.directoryButton {
    overflow: hidden;
    background-color: #ffffff;
    border-top: 1px #cce3ff solid;
    border-left: 1px #cce3ff solid;
    border-bottom: 1px #31557f solid;
    border-right: 1px #31557f solid;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 2px 2px 2px;
    height: 18px;
}

.directoryButtonHilightA {
    background-color: #C7DAE4;

}
.directoryButtonA {
    background-color: #ffffff;
}




td.MainMenuTd {
    vertical-align: top;
}
/* Buttons on mainMenu Navigation. */
td.mainMenuButton {
    border-top: 1px #cce3ff solid;
    border-left: 1px #cce3ff solid;
    border-bottom: 1px #31557f solid;
    border-right: 1px #31557f solid;
}

tr.mainMenuButtonHilight   {
	background-color : #C7DAE4;
}
tr.mainMenuButtonSelect   {
	background-color : #BBBBBB;
}
tr.mainMenuButtonNormal   {
	background-color : #FFFFFF;
}

/*List hilighting*/
tr.listRowNormal   {
	background-color : #FFFFFF;
}
tr.listRowAlternate   {
	background-color : #fefefe;
}
tr.listRowHilight   {
	background-color : #C7DAE4;
}
	
	
	


/*
	Links   ****************************************************
*/	


A {	color: #6B7F8D;
	text-decoration: none; 
 }

A:link{		text-decoration: none
}
A:visited{	text-decoration: none
}
A:hover{
	color: #444466;
	text-decoration: underline;

}

.toolTip {
		color: #6B7F8D;
	text-decoration: none; 
}

.toolTip:hover{
	color: #444466;
	background-color : #C7DAE4;
}


.dataText A {
	color: #444466;
	text-decoration: none;
}
.dataText A:hover {
	color: #444466;
	text-decoration: none;
}
.dataText A:active {
	color: #444466;
	text-decoration: none;
}

.mainMenu A {
	color: #000000;
	text-decoration: none;
	font-weight : bold;
}
.mainMenu A:hover {
	color: #000000;
	text-decoration: none;
	font-weight : bold ;
}
.mainMenu A:active {
	color: #000000;
	text-decoration: none;
	font-weight : bold ;
}

.button A {
    color: #000000;
    text-decoration: none;
    font-size: 10px;
    /*following 3 lines are a trick to place the <a> element into the whole area of parent <td> element  along with overflow: hidden in DirectoryButton class*/
    /*https://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height*/
    display: block;
    margin: -10px;
    padding: 10px;
}
    .button A:hover {
        color: #000000;
        font-size: 10px;
        text-decoration: none;
 
        display: block;
        margin: -10px;
        padding: 10px;
    }
.button A:active {
    color: #000000;
    font-size: 10px;
    text-decoration: none;

    display: block;
    margin: -10px;
    padding: 10px;
}

.buttonBox A {
	font-size: 8pt;
	color: #000000;
	border: 1px solid #666666; 
	background-color: #E3E3E3; 
	padding: 4px;
	text-decoration: none;
	
}

.buttonBox A:hover {
	color: #000000;
	text-decoration: none;
	background-color: #99FFFF; 
}
.buttonBox A:active {
	color: #000000;
	text-decoration: none;
	background-color: #00CCFF; 
}






/*
	Specifics   ****************************************************
*/

tcAttachmentMessage{
/*	font : italic; */
	font-style : italic;
}

.breadcrumb {text-transform : uppercase;}

.columnHeader {
	color: #333333;
	font-size : 10px;
}

.headerText{
	color: #333333;
	font-size : 10px;
}

.small{
	font-size : 10px;
}

.filter{
	font-size : 10px;
}
.datapage{
	font-size : 10px;
	background-color : #dddddd;
}

.problem{
	color : #aa0000;
	font-weight : bold;
}

.error{
	color : #aa0000;
	font-weight : bold;
	font-size : 12px;
}

.notification{
	color : #008800;
	font-weight : bold;
	font-size : 12px;
}



td.messageFieldCaption{
	background-color : #CCCCCC;
	border-top : 1px solid #FFFFFF;
}

td.messageFieldData{
}





td.optionsSettingsHeader{

}
select.viewOptionsNotif{
	width:100; 
	font-size: 10px;
}
input.viewOptionsNotifAddress{
	width:150;
	font-size: 10px;
}
input.viewOptionsNotifAttention{
	width:150;
	font-size: 10px;
}

/*
	Rendering of view list row based on the message status (read, unread, cancelled, ...)
	The name of the class consisrts of the messagestate + 'Message'
	For example the message state "unread" would beklong to class "unreadMessage"
*/


.readMessage {
}

.unreadMessage {
	font-weight : bold ;
}

.forwardedMessage {
	
}
.readreceptionerrorMessage 
{	color: red;
	font-weight : bold ;
}

.unreadreceptionerrorMessage 
{
	color: red;
	font-weight : bold ;
}
.completedreceptionerrorMessage 
{
	color: red;
	font-weight : bold ;
}

.problemsMessage 
{
	color: red;
	font-weight : bold ;
}

.completedMessage {
	
}

.activeMessage {
	font-weight : bold ;
}

.unknownMessage {
	color: red;
}

.active-forwardedMessage {
	
}

.cancelledMessage {
	color: red;
	font-weight : bold ;
}

.sentokMessage {
	
}

.postedMessage {
	
}

.scheduledMessage {
	
}

.sendingMessage {
	
}

.waitsendMessage {
	
}

.waitingMessage {
	
}
/* empty text of grid - also apply same style for 'emptyText' css below*/ 
.viewListGrid .x-grid-empty  { 
   font-weight : bold ;
   font-size : 14px;
   color: black;
}

.emptyText  /*used when emptyText property is overrided dynamically*/
{
	font-weight : bold ;
	font-size : 14px;
	color: black;
	
}
 
/* alternate rows*/ 
.viewListGrid .x-grid-row-alt .x-grid-cell { 
    background-color : #fefefe;
}
/* Grid cells when the mouse cursor is over the row */ 
.viewListGrid  .x-grid-row-over .x-grid-cell { 
       background-color : #C7DAE4;
} 
/* refer class 'directoryButton' for box layout above*/
.viewMenuLayout .x-menu-item
{
	background-color : #ffffff;
	border-top: 1px #cce3ff solid;
	border-left: 1px #cce3ff solid;
	border-bottom: 1px #31557f solid;
	border-right: 1px #31557f solid;
	font-size : 10px;
	cursor : pointer;
  
}
/* sizing of rows in Grid*/ 
.viewListGrid .x-grid-cell-inner {
    overflow: hidden;
    padding: 2px 5px;
    white-space: nowrap; 
    color: #6F7285 ; /*default font style*/
}


.mainHeaderRoles  {
 background-color : White;
 margin: 20px 0px 0px 5px; 
 
}

/* sizing of roles combo box  */ 
.mainHeaderRoles .x-form-item-label,   .x-form-field, .x-boundlist-item
{
	color: #000000;
	text-decoration: none;
	font-weight : bold;
  
	font-size : 10px;
	word-wrap : break-word;
}

/* disable eye symbol for password text box of login form in IE10 +*/

input[type=password]::-ms-reveal{
    display:none;
}

.logoHeader {
    margin-top: 10px;
    margin-bottom: 7px;
    margin-right: 50px;
}