.soil_activity {
	width      : 100%;
	height     : 100%;
	position   : relative;
	overflow   : hidden;
	font-size  : 1.3em;
	background : #fff;
	box-shadow : inset 0 0 30px #f2f2f2;
}

.soil_activity, .soil_activity * {
	position : relative;
	margin   : 0;
	padding  : 0;
}

.soil_activity .nextBtn{
	display  : none;
	position : absolute;
	bottom   : 0%;
	right    : 0%;
	width    : 7%;
	height   : 10%;	
}

.soil_activity .prevBtn{
	display  : none;
	position : absolute;
	bottom   : 0%;
	left     : 0%;
	width    : 7%;
	height   : 10%;	
}

/*=========================================
=            common css styles            =
=========================================*/
.vertical-center{
	position          : relative;	
	top               : 50%;
	transform         : translateY(-50%);
	-moz-transform    : translateY(-50%);
	-webkit-transform : translateY(-50%);
	text-align        : center;
}

.vertical-horizontal-center{
	position          : relative;	
	top               : 50%;
	left              : 50%;
	transform         : translate(-50%, -50%);
	-moz-transform    : translate(-50%, -50%);
	-webkit-transform : translate(-50%, -50%);
	text-align        : center;
}

.cover-board-full{
	position   : relative;	
	top        : 0%;
	left       : 0%;
	width      : 100%;
	height     : 100%;
	text-align : center;
}

/*----------  notification pulse style  ----------*/
	/**
		TODO:
		- To enable notification pulse add 'data-usernotification="notifyuser"'
		  attribute to the html element inside board div
	 */

	@keyframes pulse {
	 0% { transform   : scale(0); opacity: 0.0; }
	 25% { transform  : scale(0); opacity: 0.6; }
	 50% { transform  : scale(0.1); opacity: 0.8; }
	 75% { transform  : scale(0.5); opacity: 1; }
	 100% { transform : scale(1); opacity: 0.0; }
	}

	@-moz-keyframes pulse {
	 0% { -moz-transform   : scale(0); opacity: 0.0; }
	 25% { -moz-transform  : scale(0); opacity: 0.6; }
	 50% { -moz-transform  : scale(0.1); opacity: 0.8; }
	 75% { -moz-transform  : scale(0.5); opacity: 1; }
	 100% { -moz-transform : scale(1); opacity: 0.0; }
	}

	@-webkit-keyframes pulse {
	 0% { -webkit-transform   : scale(0); opacity: 0.0; }
	 25% { -webkit-transform  : scale(0); opacity: 0.6; }
	 50% { -webkit-transform  : scale(0.1); opacity: 0.8; }
	 75% { -webkit-transform  : scale(0.5); opacity: 1; }
	 100% { -webkit-transform : scale(1); opacity: 0.0; }
	}

	/*for all element inside board*/
	.board *[data-usernotification*="notifyuser"]{
		cursor  : pointer;
		display : inline-block;
	}

	.board *[data-usernotification*="notifyuser"]::after{
		content          : "";
		position         : absolute;
		top              : 0;
		left             : 0;
		width            : 2em;
		height           : 2em;
		background-color : white;
		border           : 2px solid black;
		border-radius    : 50%;

		-webkit-animation : pulse 1.2s ease-out infinite;
		-moz-animation    : pulse 1.2s ease-out infinite;
		animation         : pulse 1.2s ease-out infinite;
	}

	.board div[data-usernotification*="notifyuser"]::after{		
		top  : 50%;
		left : 50%;
	}
/*=====  End of common css styles  ======*/


.board{
	position   : relative;
	top        : 0%;
	left       : 0%;
	width      : 100%;
	height     : 100%;
	text-align : center;
}

/*==============================================
=            soilerosion Layout            =
==============================================*/
div.layoutsoilerosion img.actbgimage{
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}

div.layoutsoilerosion .whitesuperhighlight{
	position         : relative;
	padding          : 3%;
	margin           : 0 0 3% 0;
	background-color : rgba(255, 255, 255,0.5);
	color            : black;
	font-size        : 1.4em;
	font-weight      : bold;
}

div.layoutsoilerosion .simpletextstyle{
	position   : relative;
	padding    : 1% 3%;
	color      : black;
	text-align : left;
	font-size  : 1.2em;
}

div.layoutsoilerosion div.sidebarblockwrapper{
	position   : absolute;
	top        : 3%;
	left       : 0%;
	width      : 50%;
	height     : 94%;
	color      : black;
	text-align : left;
	font-size  : 1.2em;
}

div.layoutsoilerosion div.sidebarblockwhite{
	position         : absolute;
	top              : 0%;
	left             : 3%;
	width            : 94%;
	height           : 100%;
	background-color : rgba(255,255,255,0.6);
}

div.layoutsoilerosion div.sidebarblockwrapper p{
	position   : relative;
	top        : 0%;
	left       : 0%;
	padding    : 3% 2%;
	margin-top : 2%;
	font-size  : 1em;
}

div.layoutsoilerosion div.sidebarblockwrapper p.sidebarorangehighlight{	
	border-left      : 0.8em solid rgb(255, 153, 0);
	border-right     : 0.8em solid rgb(255, 153, 0);
	background-color : rgb(255, 225, 180);
}

div.layoutsoilerosion div.sidebarblockwrapper p.sidebarsimplehighlight{
	left             : 3%;
	width            : 94%;
	background-color : rgba(255,255,255,0.9);
	border-radius    : 2px;
}

/*-----  End of soilerosion Layout  ------*/