/* Html selectors */
h1
{ 
	font-size: 20pt;    
}  	

h2
{ 
	font-size: 15pt;
}	 	

.authError{
            color : red;
}
body
{
	margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
	font-family: Arial;
  	background-color: #F0F0F0;
  	line-height: 22px;
	font-size: 10pt;
}

/* # element id's, can only be used once in html doc, refer to by using html 'id' attribute  */

#header 
{
    padding: 1px 0px 0px 0px;
    text-align: center;
    background-color: #D3D3D3;
    color: Black;
}

#content
{
 	padding: 3px 3px 3px 3px;   /* top right bottom left */
	margin:  3px 3px 3px 3px;   /* top right bottom left */ 
}

#right
{
    float: right;
    text-align: left;
    width: 100%;
    position:absolute;
    overflow-x: auto;
 }


#tblsel 
{
    border: solid 1px Black;
    padding: 0px;
    box-shadow: 2px 2px 48px -6px rgba(0,0,0,0.75);
    /*overflow-x: scroll;*/
    width:800px;
} 

#tblsel td 
{
    border-style: none;
    empty-cells: hide;
    padding: 0px 2px 0px 2px;
}

    #tblsel th {
        background-color: #00A9E0;
        color: #FFF;
        border: 1px solid #FFF;
        padding: 0 9px 0 4px;
    }


#tblopt, td tr
{
    empty-cells:hide;
    border:0px;
    padding:2px;
}

/* Classes, can be uses to identify more than one element, refer to by using html 'class' attribute */


.label100pct {
    clear: left;
    float: left;
}


.label72
{
	clear: left;
	float: left;
	width: 72px;
}

.label90
{
	clear: left;
	float: left;
	width: 90px;
}

.hidden
{
 visibility:hidden;	
	}

.mGrid
{   
 width: 60%;   
 background-color: White;   
 margin: 5px 0 10px 0;   
 border: solid 1px black;   
 border-collapse: collapse;   
}  

.mGrid td 
{   
 padding: 4px;   
 border: solid 1px #c1c1c1;   
 color: black;  
 line-height: 14px; 
}  

.mGrid th
{   
 padding: 4px 2px;   
 color: Black;   
 background: #A9A9A9 repeat-x top;   
 border-left: solid 1px #525252;   
 font-size: 0.9em;  
 line-height: 14px; 
}  

.mGrid .alt { background: Gainsboro repeat-x top; }  
.mGrid .pgr { background: #A9A9A9 repeat-x top; }  
.mGrid .pgr table { margin: 5px 0; }  

.mGrid .pgr td 
{   
border-width: 0;   
padding: 0 6px;   
border-left: solid 1px #666;   
font-weight: bold;   
color: Black;   
line-height: 12px;   
}     

.mGrid .pgr a { color: #666; text-decoration: none; }  
.mGrid .pgr a:hover { color: White; text-decoration: none; }


/*New blue white grid*/
.mGrid_blue {
    width: 60%;
    background-color: White;
    margin: 5px 0 10px 0;
    /*border: solid 1px black;*/
    border-collapse: collapse;
}

    .mGrid_blue td {
        padding: 4px;
        border: solid 1px #fff !important;
        color: black;
        line-height: 14px;
    }

    .mGrid_blue th {
        padding: 4px 2px;
        color: #fff;
        background: #00A9E0 repeat-x top;
        /*border-left: solid 1px #525252;*/
        font-size: 0.9em;
        line-height: 14px;
    }

    .mGrid_blue .alt {
        background: Gainsboro repeat-x top;
    }

    .mGrid_blue .pgr {
        background: #0ba3d5 repeat-x top;
    }

        .mGrid_blue .pgr table {
            margin: 5px 0;
        }

        .mGrid_blue .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: Black;
            line-height: 12px;
        }

        .mGrid_blue .pgr a {
            color: #FFF;
            text-decoration: none;
        }

            .mGrid_blue .pgr a:hover {
                color: #A9A9A9;
                text-decoration: none;
            }  


.progress
{
 position: absolute;
 top: 50px;	
 left: 10px;
}

input[type=text]:focus {
    background-color: lightyellow;
    border-color: #00A9E0;
}



.outerDiv {
    border: 1px solid #00A9E0;
    padding: 40px;
    margin: 10px;
}