/*** Custom Dashboard ***/


/* DIMENSIONS */
@mobile-max		: 639px;
@mobile-min		: 320px;
/* COLORS */
@black				: #000000; 			/* Lines and Decorations */
@orange-red			: #e04421; 			/* Titles, Links, Lines and Decorations */
@white				: #ffffff; 			/* Lines and Decorations */


/* CSS CODE - BEGINS HERE */
.page-workamping-dashboard,
.page-employing-dashboard,
.page-admins-dashboard {
	
	.breadcrumb,
	#page-title {
		display: none;
	}

	.dashboard-title {
		clear: both;

		h1 {
			color: @black;
			font-weight: normal;
		}

		h1 span {
			font-weight: bold;
		}

		a {
			float: right;
			text-transform: uppercase;
			line-height: 22px;
		}
	}

	.messages.status:first-child,
	.messages.warning:first-child,
	.messages.error:first-child {
		margin-top: 0px;
	}
}

.page-workamping-dashboard #block-system-main,
.page-employing-dashboard #block-system-main,
.page-admins-dashboard #block-system-main {

	.dashboard-tools {
		clear: both;
		margin-top: 30px;

		&:after {
		    clear: both;
		    content: ".";
		    display: block;
		    height: 0;
		    visibility: hidden;
		}
	}

	.dashboard-tools:first-child {
		margin-top: 0px;
	}

	.dashboard {
		float: left;
		width: 205px;
		height: 85px;
		margin: 0px 38px 20px 0px;
		background-color: @orange-red;
                
		&.odd.eol {
			margin: 0px 0px 20px 0px;
		}

		.tool-wrapper {
			height: 85px;
			line-height: 85px;
		}

		img {
			display: block;
			float: left;
		}

		i.fa {
			display: block;
			float: left;
			width: 65px;
			height: 85px;
			line-height: 85px;
			text-align: center;
			font-size: 44px;
			background: white;
			color: #271d18;
		}

		h4 {
			display: inline-block;
			width: 115px;
			max-height: 60px;
			margin: 0px;
			padding: 0px 10px;
			overflow: hidden;
			color: @white;
			line-height: 20px;
			vertical-align: middle;
		}
                
                &:hover,
                &:active,
                &.active {
                    //color: @dark-brown;
                    background-color: #c83615;
                }
	}
	a.tooltip {outline:none; }
	a.tooltip strong {line-height:30px;}
	a.tooltip:hover {text-decoration:none;} 
	a.tooltip span {
	    z-index:10;display:none; padding:14px 20px;
	    margin-top:-30px; margin-left:28px;
	    width:300px; line-height:16px;
	}
	a.tooltip:hover span{
	    display:inline; position:absolute; color:#111;
	    border:1px solid #DCA; background:#fffAF0;}
	.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
	    
	/*CSS3 extras*/
	a.tooltip span
	{
	    border-radius:4px;
	    box-shadow: 5px 5px 8px #CCC;
	}
}



/* CSS CODE - ENDS HERE */

/*** Mobile - Cellphone ***/
@media only screen and (max-width: @mobile-max) {
	/* CSS CODE - BEGINS HERE */
	.section-dashboard .dashboard-title {
		
		a {
			display: block;
			float: none;
			text-align: left;
			margin: 10px 0px 0px 0px;
		}
	}
	
	.section-dashboard #block-system-main .dashboard {
		float: none;
		margin: 0px auto;
		margin-bottom: 20px;

		&.even.eol {
			margin: 0px auto;
			margin-bottom: 20px;
		}
	}
	/* CSS CODE - ENDS HERE */
}

/*** Fix Fluid Styles for Big Mobile Screens ***/
@media only screen and (min-width: @mobile-min + 155px) and (max-width: @mobile-max) { 
	/* CSS CODE - BEGINS HERE */
	.section-dashboard #block-system-main {
		
		.dashboard-tools {
			width: 430px;
			margin: 0px auto;
		}

		.dashboard {
			float: left;
			margin: 0px 20px 20px 0px;
			
			&.even.eol {
				margin: 0px 0px 20px 0px;
			}

			&.even {
				margin: 0px 0px 20px 0px;
			}
		}
	}
	/* CSS CODE - ENDS HERE */
}