﻿/** Headers & Content Areas **/

/*Clear Square with Clear borders*/
div.headerSquareClear {
    width: 100%;
    font-weight: bold;
	font-size: 24px;
	color: #000000;  
}
div.headerSquareClear div {
    padding: 4px 0px 4px 0px;
}
div.contentSquareClear {
    width: 100%;
    padding-bottom: 4px;
}
div.contentSquareClear .special{
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}

/*Blue Round with Clear borders and Black Text */
.headerRoundLtBlue {
    width: 100%;
    background-color: #63cbe7;
    font-weight: bold;
	font-size: 14px;
	font-family: Arial;
	color: #FFFFFF; 
	height: 28px;
}

.tdheaderRoundLtBlue {
    padding: 4px 0px 4px 6px;
    vertical-align: middle;
}

div.contentRoundLtBlue {
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 4px;
}
div.contentRoundLtBlue .special{
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}

/*Blue Square with Clear borders and Black Text */
div.headerSquareLtBlue {
    width: 100%;
    background-color: #63cbe7;
    font-weight: bold;
	font-size: 16px;
	color: #FFFFFF; 
	vertical-align: middle;
}

div.headerSquareLtBlue div {
    padding: 4px 0px 4px 6px;
}

div.contentSquareLtBlue {
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 4px;
}
div.contentSquareLtBlue .special{
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}

/*Yellow Square with Grey borders and Black Text*/
/* Change to blue square headers with white text */
div.headerSquareYellow_Grey_Black {
    width: 100%;
    background-color: #63cbe7;
	font-size: 14px;
	font-family: Arial;
	font-weight: bold;
	color: #FFFFFF;  
}
div.headerSquareYellow_Grey_Black div {
    padding: 4px 0px 4px 6px;
}
div.contentSquareYellow_Grey_Black {
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 4px;
}
div.contentSquareYellow_Grey_Black .special{
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}

/*Yellow Square with Grey borders and White Text*/
div.headerSquareYellow_Grey_White {
    width: 100%;
    background-color: #F4BC1E;
	font-weight: bold;
	font-size: 16px;
	color: #FFFFFF;  
}
div.headerSquareYellow_Grey_White div 
{
    padding: 4px 0px 4px 6px;
    border: solid 1px #CCCCCC;
}
div.contentSquareYellow_Grey_White {
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 4px;
}
div.contentSquareYellow_Grey_White .special
{
    border-left: solid 1px #CCCCCC;
    border-right: solid 1px #CCCCCC;
    border-bottom: solid 1px #CCCCCC;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}

/*Yellow Square with Grey borders and Grey Text*/
div.headerSquareYellow_Grey_Grey {
    width: 100%;
    background-color: #F4BC1E;
	font-weight: bold;
	font-size: 16px;
	color: #7B7A78;  
}
div.headerSquareYellow_Grey_Grey div 
{
    padding: 4px 0px 4px 6px;
    border: solid 1px #CCCCCC;
}
div.contentSquareYellow_Grey_Grey {
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 4px;
}
div.contentSquareYellow_Grey_Grey .special
{
    border-left: solid 1px #CCCCCC;
    border-right: solid 1px #CCCCCC;
    border-bottom: solid 1px #CCCCCC;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}

/*Yellow Content Background with Black Text*/
div.contentBackgroundYellowTextBlk 
{
    background-color: #F4BC1E;
    padding: 10px 10px 10px 10px;
    color: #000000;
    overflow: hidden;
    border: solid 1px #CCCCCC;
}


/*Content Images*/
div.contentImageLeft 
{
    float: left;
    margin: 0px 8px 0px 2px;
    display: inline;
    clear: left;
}
div.contentImageRight 
{
    float: right;
    margin: 0px 2px 3px 8px;
    display: inline;
    clear: right;
}