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

/* dark red cell box */
#flipBox .red_cell{
	background: #328a8f;
	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: #4E433A;
	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;
}

/* 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;
}

/* 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;
}


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

.red_cell2{
	background: #328a8f;
	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:  #4E433A no-repeat;
	width: 360px;
	height: 180px;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	display: block;
}
.brown_cell2:hover{
	background: #000000;
}
.grey_cell2{
	background:  #CDCDCD;
	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;
}