.table
{
    display:table;
    float:left;
    width: 100%;
    margin-bottom:20px;
    padding: 1px;
}

/* Not using.
.contact_table
{
	display:table;
	float:left;
    width: 90%;
    margin-bottom:20px;
    padding: 1px;
}
*/

.row
{
	display:table-row;
	width:100%;
}

.column
{
	display:table-cell;		/* Defines a table cell */
	/*padding:1px 0px;*/
	float:left;
}

.header_row
{
	width: 100%;
	/*background-color:Gray;*/
	font-weight: bold;
	color:white;
	padding-left: 4px;
	padding-top:2px;
	padding-bottom:2px;
}

.fees_tbl_header_row
{
    border-bottom: 1px solid black;
    font-weight:bold;    
    height: 40px;
}

.grayheading {color:#000000; font-weight:bold; background-color:#F0F0F0; border-bottom:1px solid black; padding-top:2px; padding-bottom:2px; margin-top:2px; margin-bottom:2px;}

.header2
{
	font-weight:bold;
	border-bottom: 1px solid black;
}

.width10
{
    width: 10%;
}

.width20
{
    width: 20%;
}

.width30
{
	width:30%;
}

.width40
{
    width: 40%;
}

.width50
{
    width: 50%;
}

.numeric
{
    text-align:right;
}

.bold
{
    font-weight:bold;
}

.contact_header_row
{
	width: 100%;
	background-color:Gray;
	padding-left:2px;
}

.contact_left
{    
    width: 46%;
	display:inline-block;
	padding-left:2px;
}

.contact_right
{
    width: 46%;	
	border-left: 1px solid lightblue;
	float:right;	
	padding-left: 2px;
}

#spacer
{
    height:10px;
}   

/** Branches & StatData Controls***/
.left_col
{
    font-weight:bold;
    width: 30%;
}

.right_col
{
    width: 70%;
	text-align:left;
}

/*
.short_lbl
{
    width: 30%;
    font-weight:bold;
}

.short_text
{
    width: 70%;
}*/
/** End Branches & StatData Controls **/


/*
.table_headings
{
    font-weight:bold;    
    border-bottom:1px solid black; 
}
*/
.f_col1
{
    width:25%;
}

.f_col_vals
{
    width:8%;
    text-align:right;
}

/** Performances Page Tables ****/
#tblLarge
{
    width:100%;
    padding:2px;
}

#tblSmall
{
    display:none;
}

@media screen and (max-width: 750px) {
    
    /** This makes the div table get small into a small 'block' when  screen gets lees than 750***/
  /*  .table
    {
        display:block;
    }
    */
	.column
	{
	    display: inline-block;	  
	}
	
/*
	.table,	.row .column:last-child{
		border-bottom:none;
	}
	*/
	.row
	{
		margin:20px 0;
	}
		
	.row .column:nth-child(1) not:(.contact_right){ /* first column of the row */
		border-left:none;
	}
	
	.row .column:last-child{ /* last column of the row */
		border-right:none;
	}	
	
	/*
    .contact_right
    {        	
	   border-left: 1px solid lightblue;
	   float:left;	
    }*/

}

@media screen and (max-width: 465px) {
    #tblLarge
    {
        display:none;
    } 
    
    #tblSmall
    {
        display:block;
    }
}

@media screen and (max-width: 465px) {
  
  
  /** Contact Details Control ***/
    .contact_left
    {    
        /*width: auto;*/
        width: 80%;
	    display:inline-block;
	    padding-left:2px;
	    margin-bottom:5px;
    }

    .contact_right
    {  
        width: auto;      	
	    border-left: none;
	    float:left;	
    }
    
    #spacer
    {
        height:5px;
    }
    
    .contact_inner_left
    {
        width: 85%; 
    }   
    
    .contact_inner_right
    {
        width: auto;
		float:left;
		margin-bottom:5px;
    }

	.con
	{
	    padding-bottom:4px;
	}
	
	/** Branches Control & StatData **/
	
	.left_col
	{
		font-weight:bold;
		width: 40%;  /* Make this % bigger so that it forces the right col (The Adress Field) to drop under the heading.*/
	}

	.right_col
	{
		width: 50%;
		text-align:left;
	}	

    /* These are used for like Tel: Fax: Email etc. ***/
    .short_lbl
    {
        width: 40%;
        font-weight:bold;
    }

    /** Then these are for the acutual value next to the label above ***/
    .short_text
    {
        width: 50%;
    }

    /** End Branches & StatData Controls **/

}

@media screen and (max-width: 368px) 
{
    /** Branches Control & StatData **/
	
	.left_col
	{
		font-weight:bold;
		width: 60%;  /* Make this % bigger so that it forces the right col (The Adress Field) to drop under the heading.*/
	}

	.right_col
	{
		width: 90%;
		text-align:left;
	}	

    /* These are used for like Tel: Fax: Email etc. ***/
    .short_lbl
    {
        width: 20%;
        font-weight:bold;
    }

    /** Then these are for the acutual value next to the label above ***/
    .short_text
    {
        width: 70%;
    }

    /** End Branches & StatData Controls **/

}