BODY {
	margin-top: 0px;
	margin-left: 0px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11pt;
        #background: url(images/background1.jpg) no-repeat center center fixed; 
        #-webkit-background-size: cover;
        #-moz-background-size: cover;
        #-o-background-size: cover;
        #background-size: cover;
	}

        
    .navigation
    {
        background: #333A56 !important;
    }
    
    .navigationRow
    {
        background: #333A56 !important;
    }
    
    .navigationRow2
    {
        background: #52658F !important;
        height: 75px;
    }
    
    .navigationRow2 .navigation
    {
        background: #52658F !important;
        height: 75px;
    }
    
    
    .tagline
    {
        background: #E8E8E8;
        color: #333A56;
        text-align: center;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    
    .banner
    {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        width:100%;
        height:100%;
        min-height:300px;
        background-image: url('images/banner1.jpg');
        background-size:cover;
        
    }
    
    .indexBannerText
    {
        color: #E8E8E8; 
        font-size: 16px;
    }
    
    .indexBannerTextBG
    {
        padding: 15px; 
        margin: 20px; 
        background: rgb(82, 101, 143); 
        background: rgba(82, 101, 143, 0.5);
    }
    
    
    .footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 1rem;
        background-color: #52658F;
        text-align: center;
        color:#FFFFFF;
        font-size: 11px;
        height: 60px;
    }
    
    
    .nav-menu > li:hover > a, .nav-menu > li.active > a, .nav-menu > li.focus > a {
        color: #FFFFFF !important;
    }
    .nav-menu > li > a {
        color: #FFFFFF !important;
    }
    
    .megamenu-list > li > a:hover
    {
        background: #7194dd !important;
    }
    
    .megamenu-panel
    {
        box-shadow: 5px 5px 2px #888888 !important;
    }
        
        
.main {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333
	}
	
.main_lg {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #333333
	}


	
	
.toolbar {
	background: #000080;
	color: #FFFFFF;
	font-weight: bold;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	align: center;
	}




td.attendance_data {
	font-size: 12px;
	font-weight: normal;
	}

td.reportdata {
	font-size: 9px;
	font-weight: normal;
	}

td.reportdataheader {
	font-size: 9pt;
	font-weight: bold;
	background: #CCCCCC;
	}


td.trainingdata {
	font-size: 8pt;
	font-weight: normal;
	}
td.trainingdataheader {
	font-size: 8pt;
	font-weight: bold;
	background: #cccccc;
	}

.abouttext {
	font-size: 11pt;
	}

   


.inserviceClassRowHeaderName
{
	float: left;
	width: 60px;
	font-weight: bold;
	font-size: 10px;
	border-bottom: solid 1px #000000;
        border-top: solid 1px #000000;
	padding-bottom: 4px;
}

        


.inserviceClassRowHeaderDescription
{
	float: left;
	width: 180px;
	font-weight: bold;
	font-size: 10px;
	border-bottom: solid 1px #000000;
        border-top: solid 1px #000000;
	padding-bottom: 4px;
}

.inserviceClassRowHeaderHours
{
	float: left;
	font-weight: bold;
	font-size: 10px;
	width: 31px;
	border-bottom: solid 1px #000000;
        border-top: solid 1px #000000;
	padding-bottom: 4px;
}

.inserviceClassRowHeaderBestMonth
{
	float: left;
	font-weight: bold;
	font-size: 10px;
	width: 71px;
	border-bottom: solid 1px #000000;
        border-top: solid 1px #000000;
	padding-bottom: 4px;
}

.inserviceClassRowHeaderTools
{
	float: left;
	font-size: 10px;
	border-bottom: solid 1px #000000;
        border-top: solid 1px #000000;
	width: 60px;
	padding-bottom: 4px;
	font-weight: bold;
}

.inserviceClassRowHeaderStatus
{
	float: left;
	font-size: 10px;
	border-bottom: solid 1px #000000;
        border-top: solid 1px #000000;
	width: 45px;
	padding-bottom: 4px;
	font-weight: bold;
}

.inserviceClassRowStatus
{
	float: left;
	width: 45px;
	font-size: 10px;
	padding-bottom: 4px;
	border-bottom: solid 1px #000000;
}

.inserviceClassRowBestMonth
{
	float: left;
	width: 71px;
	font-size: 10px;
	padding-bottom: 4px;
	border-bottom: solid 1px #000000;
}

.inserviceClassRowName
{
	float: left;
	width: 60px;
	font-size: 10px;
	padding-bottom: 4px;
	border-bottom: solid 1px #000000;
}

.inserviceClassRowDescription
{
	float: left;
	width: 180px;
	font-size: 10px;
	padding-bottom: 4px;
	border-bottom: solid 1px #000000;
}

.inserviceClassRowHours
{
	float: left;
	font-size: 10px;
	width: 31px;
	padding-bottom: 4px;
	border-bottom: solid 1px #000000;
}

.inserviceClassRowTools
{
	float: left;
	font-size: 10px;
	width: 60px;
	padding-bottom: 4px;
	border-bottom: solid 1px #000000;
}

.separator
{
	clear: both;
}


.scoreLeft
{
	float: left;
	width: 250px;
}

.scoreRight
{
	float: left;
	width: 250px;
}

.scoreTitle
{
	font-weight: bold;
	font-size: 14px;
}

.inserviceEmployeeName
{
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 14px;
	width: 100%;
	text-align: center;
}

/** Training class manager **/

.notes
{
    margin-top: 3px;
    margin-bottom: 3px;
}

/** END: Training class manager **/

/** Message Manager **/

  .autocompleteItem
        {
            border: solid 1px #dfdfdf;
            font-size: 10px;
            font-weight: bold;
            height: 19px;
            width: 148px; 
            padding: 3px;
            margin-right: 2px;
            margin-bottom: 2px;
            float: left;
        }
        
        .autocompleteContainer
        {
            margin-top: 5px;
            margin-bottom: 5px;
            height: 0px; 
            width: 350px; 
            overflow: auto; 
            border: 0px;
        }
        
        .formLabel
        {
            float: left;
            font-size: 12px;
            font-weight: bold;
            width: 175px;
        }
        
        .formField
        {
            float: left;
            width: 350px;
        }
        
        .formNote
        {
            font-size: 10px;
            color: #bbbbbb;
        }
        
        .pageTitle
        {
            font-weight: bold;
            font-size: 16px;
            border-bottom: solid 1px #000000;
            margin-bottom: 5px;
        }
        .tableCell
        {
            float: left;
            font-size: 12px;
            margin: 4px;
        }

        .tableCellTitle
        {
            float: left;
            font-size: 12px;
            margin: 4px;
            font-weight: bold;
            border-bottom: solid 1px #000000;
        }
        
        .sentToTitle
        {
            margin-top: 5px;
            border-bottom: solid 1px #000000;
            font-weight: bold;
            margin-bottom: 4px;
        }
        
        .messageContainer{
            position: relative;
            width: 650px;
            height: 250 px;
            
        }
        
        .messagePrevious
        {
            position: absolute;
            width: 35px;
            height: 35px;
            left: 0px;
            top: 107px;
            z-index: 3;
        }
        
        .messageNext
        {
            position: absolute;
            width: 35px;
            height: 35px;
            right: 0px;
            top: 107px; 
            z-index: 3;
        }
        
        .messageBody
        {
            position: absolute;
            width: 600px;
            height: 240px;
            left: 20px;
            top: 0px;
            border: solid 1px #333333;
            padding: 5px;
        }
        
        .messageDate{
            font-weight: bold;
            margin-bottom: 3px;
        }
        
        .messageSubject{
            font-weight: bold;
            margin-bottom: 3px;
        }
        
        .messageSender{
            font-weight: bold;
            margin-bottom: 3px;
        }
/** END: Message Manager **/


/** Toolbars **/
.toolMenu
{
    margin-left: auto;
    margin-right: auto;
    
}

.toolMenuItem
{
    float: left;
    margin-right: 4px;
    margin-bottom: 4px;
}

.toolSubMenu
{
    font-size: 24px;
}


/** END: Toolbars  **/


.red 
{
    color: #FF0000;
}


/** BEGIN: Test Display **/

.testContainer
{
	width: 80%;
	float: left;
}


.resizeButtons
{
	width: 20%;
	text-align: right;
	float: left;
}

.resize1
{
	font-size: 12px;
	margin-bottom: 5px;
	cursor: pointer; 
}

.resize2
{
	font-size: 16px;
	margin-bottom: 5px;
	cursor: pointer; 
}
.resize3
{
	font-size: 20px;
	margin-bottom: 5px;
	cursor: pointer; 
}
.resize4
{
	font-size: 24px;
	margin-bottom: 5px;
	cursor: pointer; 
}


.resizeText
{
	font-size: 12px;
	margin-left: 5px;
}


/** END: Test Display **/


.indexRouterButton
{
    margin: 15px;
    border-radius: 20px;
    border: solid 1px #FFFFFF;
    background: #1904cb;
    width: 300px;
    height: 40px;
    text-align: center;
    color: #FFFFFF;
    font-size: 16px;
    padding-top: 10px;
}


.info2-banner
    {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        width:100%;
        height:100%;
        min-height:300px;
        background-image: url('images/beach.jpg');
        background-size:cover;
        
    }