/*
 * Button div definition.
 ************************/
.hlbutton {
	box-shadow:3px 3px 5px #dbdbdb;
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#dbdbdb')";
	progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#dbdbdb');
	-moz-box-shadow:3px 3px 5px #dbdbdb;
	-webkit-box-shadow:3px 3px 5px #dbdbdb;
}
.hlbutton:hover {
	box-shadow:none;
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=0)"; /* IE 8 */
	-ms-transform:translate(1px,1px); /* IE 9 */
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	-webkit-transform:translate(1px,1px); /* Safari */
	transform:translate(1px,1px);
}


/*
 * Hightlight boxes
 ********************/
#hlboxesdiv { text-align:left; margin-left:-15px; margin-right:-15px; height:100%; }
#hlboxestable { display:table; border-spacing:15px 5px; width:100%; table-layout:fixed; }
/* Highlight boxes cells table row */
#hlboxesrow { display:table-row; min-height:50px; height:100%; }
/* Red bar row and definition. Note that there has to also be a red bar between each box cell for mobile friendly mode */
#hlboxesredrow { display:table-row; }
.redbar { display:none; }
.hlredbar .redbar { display:table-cell; width:100%; border-top:10px solid #aa332f; border-right:1px solid #aa332f; font-size:0px; height:0px; margin-bottom:5px;}
/* red bar between box cells in mobile friendly mode. */
.redbar.smallscreen { display:none; }

/* Highlight box cell definition. */
.hlboxcell {
	display:table-cell;
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
	background-color:#f4f4f4;
	border:1px solid #dbdbdb;
	border-bottom-right-radius:7px;
	border-bottom-left-radius:7px;
}

#hlboxestable .hlboxcell a { text-decoration:none; border-bottom:none; }

/* inner div of cell */
.hlboxdiv { display:inline-block; vertical-align:text-top; width:100%; height:100%; }

/* Upper section of the box - when visible eg. boxtype1 */
.hlboxupper { display:block; }
.hlboxupperdiv {
	display:block;
	position:relative;
	top:0px;
	left:0px;
	height:65px;
	width:100%;
	overflow:hidden;
	margin:0px;
	padding:0px;
	background-repeat:no-repeat;
	background-color:#d1d1d1;
}
.hlboxuppertext {
	position:absolute;
	bottom:0px;
	width:100%;
	color:#aa332f;
	background:#ffffff; /* IE8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	background-color:rgba(255,255,255,0.6);
	padding:3px;
	padding-left:10px;
	font-weight:bold;
	font-size:14.4px;
	font-size:0.9rem;
	border-top:1px solid white;
	height:25px;
}

/* Lower section of the box - when visible eg. boxtype2 and boxtype3 */
.hlboxlower {
	display:block;
	border-spacing:0px;
	font-size:12.8px;
	font-size:0.8rem;
	table-layout:fixed;
	height:100%;
	padding:0px;
}

.hlboxleft { display:inline-block; height:100%;}

.hlboxright { display:inline-block; height:100%; padding:20px }
.hlboxright .title {
	display:block;
	font-size:16px;
	font-size:1rem;
	font-weight:500;
	text-decoration:none;
	border-bottom:none;
	line-height:90%;
	color:#aa332f;
}
.hlboxright .date {
	display:block;
	font-size:12.8px;
	font-size:0.8rem;
	margin-bottom:7px;
	color:#928F8F;
}
.hlboxright .text {
	display:block;
	color:black;
	line-height:120%;
	margin-bottom:7px;
}
.hlboxright ul.boxlist { font-size:12.8px; font-size:0.8rem; }
.hlboxright ul.boxlist { margin:0px; padding: 0px; }
.hlboxright ul.boxlist li { list-style:none outside none; background:url(/img/bullet_point_red.gif) 0 0.55em no-repeat; 100%; padding-left:15px; margin-bottom:5px; }

.hlboxverticalspace { display:none; }

/* how many boxes to show/hide */
#hlboxestable.hlboxes1 .col2, #hlboxestable.hlboxes1 .col3 { display:none; }
#hlboxestable.hlboxes2 .redbar, .hlboxes2 .hlboxcell { width:50%; }
#hlboxestable.hlboxes2 .col3 { display:none; }
#hlboxestable.hlboxes3 .redbar, .hlboxes3 .hlboxcell { width:33%; }

/* Box1 specific */
/*****************/
.hlboxtype1 .hlboxleft { display:none; }
.hlboxtype1 .hlboxright { padding:7px 10px 10px 10px; }
.hlboxtype1 .hlboxright .title { font-size:16px; font-size:1rem; font-weight:500; }
/* Since this is a button box, make the background white. */
.hlboxtype1.hlboxcell { background-color:white; }


/* Box2 specific */
/*****************/
.hlboxtype2 .hlboxupper { display:none; }
.hlboxtype2 .hlboxleft {
	display:inline-block;
	position:absolute;
	top:0px;
	left:0px;
	width:120px;
	height:400px;
	background-color:#f4f4f4;
	background-repeat:no-repeat;
	background-image:url(/img/highlight/defaultbox2.jpg); /* default picture/icon for boxtype 2 */
}
.hlboxtype2 .hlboxright { margin-left:120px; }
.hlboxtype2 .hlboxlower .title { font-size:14.4px; font-size:0.9rem; font-weight:bold; padding-bottom:15px; }
.hlboxtype2 .hlboxlower .date { display:none; }


/* Box3 specific */
/*****************/
.hlboxtype3 .hlboxupper { display:none; }
.hlboxtype3 .hlboxlower { background-color:#f4f4f4; }
.hlboxtype3 .hlboxleft { display:none; }
.hlboxtype3 .hlboxlower .title { font-size:14.4px; font-size:0.9rem; font-weight:bold; padding-bottom:15px; }
.hlboxtype3 .hlboxlower .date { display:none; }


@media only screen and (max-width:750px) {
	#hlboxestable .hlboxcell { display:block; width:100%; }
	#hlboxesrow, #hlboxesredrow { display:block; width:100%; }

	/* Box type highlight */
	.hlboxtype1 .hlboxupperdiv { height:auto; }
	.hlboxtype1 .hlboxuppertext { position:relative; top:0px; }

	/* Box 2 media css */
	.hlboxtype2 .hlboxleft { display:none; }
	.hlboxtype2 .hlboxright { margin-left:0px; }

	/* mobile friendly vertical spacer between cells. */
	.hlboxverticalspace { display:block; height:25px; }

	/* Redbar */
	.hlredbar .redbar.smallscreen { display:block; }
	#hlboxestable.hlredbar .redbar.smallscreen { width:100%; }
	#hlboxesredrow { display:none;}
}