.clear_box{
	width: 360px;
	height: 80px;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}

/* Coloured Boxes ***********************************************************************************************************************/

/* dark red cell box */
#flipBox .red_cell{
	background: #E53C37;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .red_cell:hover>div {
    display: none;
}
#flipBox .red_cell:hover>span {
    display: block;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}

/* black cell box */
#flipBox .black_cell{
	background:  #000000;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .black_cell:hover>div {
    display: none;
}
#flipBox .black_cell:hover>span {
    display: block;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}

/* brown cell box */
#flipBox .brown_cell{
	background: #E53C37;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .brown_cell:hover>div {
    display: none;
}
#flipBox .brown_cell:hover>span {
    display: block;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}

/* grey cell box */
#flipBox .grey_cell{
	background: #cdcdcd;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .grey_cell:hover>div {
    display: none;
}
#flipBox .grey_cell:hover>span {
    display: block;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}

/* blue cell box */
#flipBox .blue_cell{
	background: #07A9EE;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .blue_cell:hover>div {
    display: none;
}
#flipBox .blue_cell:hover>span {
    display: block;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}
/* orange cell box */
#flipBox .orange_cell{
	background: #FF6633;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .orange_cell:hover>div {
    display: none;
}
#flipBox .orange_cell:hover>span {
    display: block;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}
/* green cell box */
#flipBox .green_cell{
	background: #006600;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .green_cell:hover>div {
    display: none;
}
#flipBox .green_cell:hover>span {
    display: block;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}

/* white cell box */
#flipBox .white_cell{
	background: #ffffff;
	width: 180px;
	height: 180px;
	color: #000000;
	font-size: 16px;
	text-align: center;
	display: block;
}
#flipBox span, .white_cell:hover>div {
    display: none;
}
#flipBox .white_cell:hover>span {
    display: block;
	color: #000000;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}
/* yellow cell box */
#flipBox .yellow_cell{
	background: #ECB946;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}

#flipBox span, .yellow_cell:hover>div {
    display: none;
}
#flipBox .yellow_cell:hover>span {
    display: block;
	color: #000000;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}
/* blue violet cell box */
#flipBox .blue_violet_cell{
	background: #21004F;
	width: 180px;
	height: 180px;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	display: block;
}

#flipBox span, .blue_violet_cell:hover>div {
    display: none;
}
#flipBox .blue_violet_cell:hover>span {
    display: block;
	color: #000000;
	background: #000000;
	font-size: 13px;
	width: 180px;
	height: 180px;
}

/* Allow content to be displayed only on hover ********************************************************************************************/
div.cell_text ul {
	display:none; 
	color: #ffffff;
	font-size: 13px;
	text-align: left;
}

div.cell_text:hover ul{
	display:block; 
	color: #ffffff;
	font-size: 13px;
	list-style: none;
	float: left;
}

.cell_headerXX{
	background: #07A9EE;
	height: 30px;
	width: auto;
	color: #ffffff;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	padding: 10px 5px 10px 5px; /* top, rig, bot, lef */
}

/* Coloured Retangular Boxes ***********************************************************************************************************************/
.cell_header2{
	background: #E53C37;
	height: 40px;
	width: auto;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	padding: 0px 4px 0px 5px; /* top, rig, bot, lef */
}

.red_cell2{
	background: #E53C37;
	width: 360px;
	height: 180px;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}
.red_cell2:hover{
	background: #000000;
}
.black_cell2{
	background:  #07A9EE;
	width: 360px;
	height: 180px;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}
.black_cell2:hover{
	background: #000000;
}
.brown_cell2{
	background:  #E53C37 no-repeat;
	width: 360px;
	height: 180px;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}
.brown_cell2:hover{
	background: #000000;
}
.grey_cell2{
	background:  #ababab;
	width: 360px;
	height: 180px;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}
.grey_cell2:hover{
	background: #000000;
}

.black_cell_no_height{
	background:  #000000;
	width: 360px;
	height: auto;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}
.black_cell_no_wh{
	background:  #000000;
	width: auto;
	height: auto;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}