@import "foundation/components/block-grid";
@import "foundation/components/dropdown";

.title-heading {
	background: url("/img/subtle_zebra_3d.png") 0 0 repeat;
	padding: 5px 0 0;
	margin-bottom: rem-calc(15);
	border-bottom: 1px solid #ccc;
	h1 {
		font-size: rem-calc(28);
		text-align: center;
		line-height: 1;
	}
}

#app-container {
	padding: 0;

	.alert-box.serial-log {
		display: none;

		.serial-log & {
			display: block;
			background: #f9dede;
			border: 1px solid $alert-color;
			color: #222;
		}
	}

	[class*="block-grid-"] > li {
		clear: none !important;
		white-space: nowrap;
	}

	&.row {
		max-width: rem-calc(1000);
		margin: 0 auto;
	}
	h1 {
		font-size: rem-calc(18);
		text-align: center;
		text-overflow: ellipsis;
		overflow-x: hidden;
	}

	.app-image {
		position: relative;
		display: block;
		margin: 0 auto;
    max-width: 140px;

    &.tasks img{
      background: $orange;
      border-radius: $global-radius;
    }

    &.maintentance-menu img{
      background: $orange;
      border-radius: $global-radius;
    }
	}

	.overlay {
	    opacity:0;
	    -webkit-transition: opacity .25s ease;
		-moz-transition: opacity .25s ease;
		transition: opacity .25s ease;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width:140px;
		padding: 2px 4px;
		@include radius($global-radius);
		background: rgba(34, 34, 34, 0.6);
		.contain {
			position: relative;
  			max-width: 140px;
  			height: 75%;

			h4 {
					color: #fff;
					padding: 2px 5px;
					border: 3px solid #fff;
					text-align: center;
					font-size: rem-calc(18);
					position: absolute;
					bottom: 0;
					width: 100%;
				}
			}
	}

	.no-touch & {
		li:hover .overlay {
	       	opacity:1;
	    }
	}
}

.upload-btn {
	position: relative;

	.file-upload {
		opacity: 0;
		position: absolute;
		top:25px;
		bottom: 0;
		left: 0;
		width: 100%;
		cursor: pointer;
		margin: 0;
	}

	.progress,
	.failed {
		display: none;
	}

	&.failed {
		.overlay {
			display: none;
		}

		.failed {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			display: block;
			font-size: rem-calc(45);
			color: $alert-color;
			text-align: center;
			background: rgba(255,255,255,.8);

			i {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -31px;
				margin-top: -36px;
			}
		}
	}

	&.uploading {
		.overlay {
			display: none;
		}

		.progress {
			position: absolute;
			top: 0;
			height: 100%;
			left: 0;
			right: 0;
			display: block;
			font-size: 20px;
			color: white;
			text-align: center;
			padding-top: 6px;
			background: rgba(0,0,0,.7);

			span.bold {
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				text-align: center;
				margin-top: -10px;
				line-height: 20px;
			}
		}
	}
}

@media #{$xlarge-up} {
	.title-heading {
		border: 1px solid #ccc;
		border-top: none;
		border-radius: 0 0 $global-radius $global-radius;
	}
}
