/*
##########  INTRODUCTION ####################################### 

This currently isn't being used in NE Tracker but is put here as part of a move to restructuring to
make it easier to use this as a template for setting up a new project


This css is related to the php in ICW_Utils which builds forms and tables in a semi-automated way.
Elements of the forms and tables are given classes and are always built in the same way so we can 
change the look by edting the css

*/




/* ################# related to forms ########################################  

A form is typically a number of lines each consisting of
A label followed by an input followed by an error message (if there is an error) 


  */

/*  a mandatory input is given this class */
.mandatory  {
/*	background-color: #E8FFD2; */ 
/*	background-color: #EA8F8F; */

/*background-color: #F9C7C7; */
border: 1px solid #D10808; 
	 
	}
	
.mandatoryAsterix
{
	color:red;
}
	
/*  a read-only input is given this class */
.readonly  {
	border: none;
	background-color: #FFF7DF;
	}


/* when an input hasn't been filled, or has been filled incorrectly we put a message in a span given the class notFilled
 by colouring it we can make the message stand out*/
span.notFilled  {
	color: red;
	border-style: hidden
	}

/* this is to line up form elements without using a table */
form p {
	clear: left;
	}
	
form p label
{
	float:left;
	width: 20%;
	 word-wrap:break-word;
	}

form   textarea {

  width:  60%;
  height:10%;
  
  margin-bottom: 5px;
   }
 

  
form fieldset select {
 
  width:  35%;
  margin-bottom: 5px;
}

 /*  IE7 may not recognise this*/ 
form fieldset input[type=text] {
 
	  width:  35%;

   } 

form fieldset input[type=password] {
 
	  width:  35%;
	   text-align: left;

   }

form fieldset input[type=file] {
 
	  width:  35%;

   }    
 
/* an input within a table should mostly fill the cell */ 
form fieldset table input[type=text] {
 
	  width:  95%;
	  margin:1%;

   } 
   
  /* 

form   fieldset {
  margin: 20px 0 10px 0;
  border: 1px solid #a5aabd;
  padding: 5px 10px 10px 10px;
   }

form  legend {
  padding: 2px 5px 2px 5px;
  margin-bottom: 10px;
  margin-left: 1em; 
  font-weight: bold;
  border: 1px solid #a5aabd;
  background-color: #eceef4;
   
  color: #212073;

	}
*/
fieldset {
  margin: 20px 5px 10px 0; 
 
  padding: 5px 10px 10px 10px; 
  
   border: 1px solid #a5aabd;
   
   width:100%;
   
   }
legend {
  padding: 2px 5px 2px 5px;
  margin-bottom: 10px;
  margin-left: 1em; /* 0 */
  font-weight: bold;
  border: 1px solid #a5aabd;
  background-color: #eceef4;
   width:40%;
  color: #212073;

	}

/* make text on a label for a checkbox align to the right */
.checkboxLabel
{
	text-align:right;
}


/* ################# related to tables ########################################  

There are 4 types tables that can be generated.

The first has class "list" and is used when a list of data is displayed, normally about data in tables such as a list of users
The table will typically have links to  view/edit the form.

The other tables are 3 tables that appear on forms containing inputs

They have classes "TableOfInputs", "checkboxTable", and ""

Table of inputs is a table each cell of which can contan either text or an input



*/


/* ################# related to table class "list" */


table.list {
  border-collapse: collapse;
  margin-left: 6px;
  width: 100%; 

  
  
  table-layout:fixed; /* this keep width to whatever is specified - ignoring column width etc*/
  word-wrap:break-word; /* words will split over different lines - so cells will get higher to fit in when width is small*/
}

table.list th {
	
  padding: 0 5px 5px ;
  
}

table.list td {
   border: 1px solid #a5aabd;
  padding: 3px;

 
}



/*  tables that are generated using ICW_Table class give alternate rows class row1 and row2 so we can colour them */
.list .row1 {
  padding: 5px;

   background-color:#EDEBE8; 

 
}

.list .row2 {
  padding: 5px;
 
  background-color:#FCFAF7; 
   
}

/* inputs in a list table are fields for search criteria */


table.list td input ,table.list td select,table.list td select{
  
		width : 95%; /* input fills cell */
		margin:1%;
   }
 
 
 form table select,form table textarea
 {
   width : 95%; /* input fills cell */
		margin:1%;
}
   
table.list td a {
  	width : 95%;
  
	 
   }    




/*   search button  on search form - not sure this actually does much*/
#tableSearchButtonColumnHeading{
	
	 background-color: #FFF9EF; 
	 width: 95%; 
/*	 height: 50px;*/
	 /* border-width 0 or border-nonemeans it doesn't appear as a button */
	/*  border-width:0px; */
	border:none; 
	/* white-space: normal; makes wrapping work for firefox */
	white-space: normal;
	/*word-wrap: break-word; */
	
	
	}


/* ################# related to checkboxTable */

/*  if checkboxes are in a table then have no lines around them */

.checkboxTable 
{
	border-collapse: collapse;
	width: 50%;
}

.checkboxTableCell 
{
	border:1px solid black; 
	/*border-style: none; */
	text-align:center;
	width : 100px;
}

.checkboxTableLabelCell 
{
	border-style: none; 
	text-align:left;
	
}



/* ################# related to TableOfInputs */

.TableOfInputs
{
	border-collapse: collapse;
	width: 60%;
}


.TableOfInputsCell 
{
	border:1px solid black;
	text-align:center;
	
}


.TableOfInputsCell select { 
	
  width: 95%;
}



.TableOfInputsCell_TextArea textarea { 

  width: 95%;
 
}


.TableOfInputsCell_TextArea 
{
	border:1px solid black;
	text-align:center;
	width:50%;
}

.TableOfInputsLabel
{
	float:left;
	width: 20%;
}

/*  ########################### used in favourite reports tables? */

.tableHeaderCellText
{
	font-weight:bold;
}



.tableCell 
{
	border:1px solid black;
	text-align:center;
	width : 350px; 
	
}

.tableCell select { 
  width: 90%;
 
}

.tableHeaderCell 
{
	border:1px solid black;
	text-align:center;
	height : 40px;
	/*width : 30px; */
	
}

.extraWideTableCell	
{
	
	 width: 300px;
	}
	

.myTable { 
  border-collapse: collapse;
 
}


.warning {
 color: red;
}

	
/* ################# javascript builder table */


.JavascriptBuilderHeaderRow
{	
	 background-color: #B4DCED; 
}

.JavascriptBuilderNameCell
{	
	 background-color: #B4DCED; 
}

.JavascriptBuilderNewCell
{	
	 background-color: #AAEA8F; 
}

.JavascriptBuilderExistingCell
{	
	 background-color: #F4C264; 
}



.JavascriptBuilderTable { 
  border-collapse: collapse;
 
}

.JavascriptBuilderTable td  { 
 
 border: 1px solid black;
 padding: 5px;
 
}

/* ################# other */

/* we don't want borders around images */
img {
  border: none;
    outline: none;
}

input[type=image] 
      {
   border: none;
    outline: none;
     border-width: 0px;
    border-style: none;
    
}

/*  In this particluar case there is css related to #innercontent that we want to override */
#innercontent  input[type=image] 
     {
       border: 0px;
    outline: 0px;
     
     } 
     

a img {border: none; }
   
.extraWide  {
	width: 50%;

}

.extraextraWide  {
	width: 100%;

}

/***************************************************************************/
/* form builder allows us to mark a field as no longer needed. It then only appears in field edit mode
we give the div containing it a class so we can colour it if we want*/
.formBuilder_edit_div_field_no_longer_needed
{
	background-color: #C1BDBD;
	padding-top: 10px;	
	padding-left: 10px;	
}

.formBuilder_edit_div_normal_field
{
	background-color: #FFDF80;
	padding-top: 10px;	
	padding-left: 10px;

	border-style:solid;
   border-width: 1px 1px 1px 1px;	
     border-color:#9F9F9F;
}

.formBuilder_edit_div_normal_field p
{
	

	 display:inline-block;
	 padding-left:5px;
	
}

.formBuilder_edit_div_normal_field p  label
{
	
	 display:inline-block;
	 width:150px !important;
	 float:none;
	
	
}

.formBuilder_edit_div_normal_field a
{
		
	margin-right:5px;
		
}

.formBuilderInputSpan input
{
	width:75px !important;
}

.formBuilderInputSpan select
{
	width:75px !important;
}

/*
.formBuilder_edit_div_normal_field input
{
	width:75px !important;
}

.formBuilder_edit_div_normal_field select
{
	width:75px !important;
}
*/



/***************************************************************************/


/* a tab group has a number of links  with tabLink or tabLinkClicked class
thsi styles them*/
.tabLink {
  background-color: #DFDFDF;
  color:black;
  
   padding: 10px 10px 10px 10px;
  text-decoration:none;
  border-style:solid;
   border-width: 1px 1px 0px 1px;
  border-radius:10px 10px 0px 0px;
  border-color:#9F9F9F;
}

.tabLinkClicked {
  background-color: #BFBFBF;
  color:black;
   padding: 10px 10px 10px 10px;
  text-decoration:none;
  border-style:solid;
 border-width: 1px 1px 0px 1px;
  border-radius:10px 10px 0px 0px;
}



.javascriptCreatedTable th
{
	width:100px;
} 


.label {
	float:left;
	width: 20%;
	}
	
	
/* this is styling for a file input button - as bootstrap doesn't have its own file input button for some strange reason*/
 .btn-file {
        position: relative;
        overflow: hidden;
    }
.btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

.repeatSearchSpan
{
	color:blue;
}

#is_a_robot_checkbox {
	display:none;
}

#rulesConditions .column9{
	width: 200px;
	
}

#rulesChanges .column9{
	width: 200px;
	
}