@import "compass";
@import "vars";
@import "grid";


// Message on Plugins page. NEEDS TO BE CLEANED UP.
#banneralert {
	margin-bottom: 10px;
	.clr {
		clear: both;
		margin: 0;
		height: 0;
		font-size: 0;
	}
	&.lift-colorized {font-family:arial,sans-serif;padding:12px;border:1px #8bcce4 solid;background:#b3e2f3;/* Old browsers */
		background:-moz-linear-gradient(top,#b3e2f3 59%,#ffffff 94%);/* FF3.6+ */
		background:-webkit-gradient(linear,left top,left bottom,color-stop(59%,#b3e2f3),color-stop(94%,#ffffff));/* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top,#b3e2f3 59%,#ffffff 94%);/* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top,#b3e2f3 59%,#ffffff 94%);/* Opera 11.10+ */
		background:-ms-linear-gradient(top,#b3e2f3 59%,#ffffff 94%);/* IE10+ */
		background:linear-gradient(to bottom,#b3e2f3 59%,#ffffff 94%);/* W3C */
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3e2f3',endColorstr='#ffffff',GradientType=0 );/* IE6-9 */
		/* radii */
		-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
	}
	.lift-message{
		width:75%;
		font-weight:normal;
		text-shadow:rgba(0,0,0,0.10) 0px 1px 0px;
		color:#056d94;
		font-size:18px;
		line-height:24px;
	}

	.lift-balloon{
		float:right;
	}


}


.form-block {
	label {
		display: block;
	}
	input[type="text"],
	input[type="search"] {
		width: 100%;
	}
}
.form-row {
	margin-bottom: $pad;
}
.button-row {
	text-align: center;
	margin-top: $pad*2;
}
#lift-ajax-loader p {
	background-image: url($imgLoc+'loader.gif');
	background-repeat: no-repeat;
	background-size: 24px 24px;
	display: inline-block;
	height: 24px;
	line-height: 24px;
	padding-left: 29px;
}


// Lift admin page.
.lift-admin {
	h1,h2 {
		font-weight: normal;
		line-height: 1.2;
		margin-top: 0;
	}
	h2 {
		font-size: 18px;
	}
	.button-primary {
		background: $buttonBlue;
	}
	.liftBanner {
		height: 140px;
		width: 100%;
		position: relative;
		margin-bottom: $pad;
		@include filter-gradient(#0075a8, #00a5e5);
		background-color: #00a5e5;
		@include background-image(linear-gradient(#0075a8, #00a5e5));
		h1 {
			@include hide-text;
			position: absolute;
			top: 16px;
			left: 16px;
			width: 102px;
			height: 56px;
			background: transparent url($imgLoc+'logo-102x56.png') no-repeat;
		}
		&:before,&:after {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
		}
		&:before {
			background: transparent url($imgLoc+'cloud1.png') no-repeat bottom left;
			width: 591px;
			height: 119px;
			left: -1px;
		}
		&:after {
			background: transparent url($imgLoc+'cloud2.png') no-repeat bottom right;
			width: 514px;
			height: 117px;
			right: -1px;
		}
	}
	.progressCircle {
		display: inline-block;
		width: 40px;
		height: 40px;
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 44px;
		background-color: #ccc;
		border-radius: 50%;
		margin: 0 0 0 $pad;
		&.active {
			background-color: $liftBlue;
		}
	}
	.progressIndicator {
		display: table;
		width: 100%;
		margin: $pad 0;
		ul {
			display: table-row;
		}
		li {
			display: table-cell;
			height: 46px;
			vertical-align: middle;
			background-color: $lightGray;
			text-align: center;
			span {
				padding: 0 5px;
				position: relative;
				z-index: 3;
			}
			&.completed {
				background-color: $completedBlue;
				color: #fff;
			}
			&.active {
				background-color: $liftBlue;
				color: #fff;
				overflow: hidden;
				span {
					display: block;
					padding: 0 23px;
					z-index: 2;
					&:before, &:after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border: 46px solid transparent;
						position: absolute;
						top: 50%;
						margin-top: -46px;
					}
					&:before {
						border-left-color: $completedBlue;
						left: 0;
						margin-left: -23px
					}
					&:after {
						border-top-color: $lightGray;
						border-bottom-color: $lightGray;
						margin-right: -46px;
						right: 0;
					}
				}
			}
		}
	}
	select {
		vertical-align: middle;
	}
	.aside {
		background: #f2f2f2;
		padding: $pad/2 $pad;
	}
	ul.instructions {
		list-style: none;
		margin: $pad 0;
		padding: 0;
		li {
			padding: 0 0 0 80px;
			background: transparent none no-repeat left top;
			margin: 0 0 $pad;
		}
		.webServices {
			background-image: url($imgLoc+'blue-box.png');
			min-height: 60px;
		}
		.documentation {
			background-image: url($imgLoc+'documentation.png');
			min-height: 90px;
		}
		.cloudSearch {
			background-image: url($imgLoc+'amazon-cloud-search.png');
			min-height: 80px;
		}
		.a-z {
			background-image: url($imgLoc+'a-z.png');
		}
		.numerals {
			background-image: url($imgLoc+'0-9.png');
		}
		.hyphen {
			background-image: url($imgLoc+'hyphen.png');
		}
		.a-z, .numerals, .hyphen {
			min-height: 60px;
			line-height: 60px;
		}
	}
	.dashboard-box {
		@include box-sizing(border-box);
		display: table;
		width: 100%;
		border: 1px solid $lightGray;
		border-radius: 5px;
		margin: $pad 0;
		padding: $pad/2;
		.grid {
			display: table-row;
			[class*='col-'] {
				display: table-cell;
				float: none;
				vertical-align: middle;
				[class*='col-'] {
					display: block;
					float: left;
				}
			}
		}
		.lift-status {
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #fff;
			border-radius: 50%;
			background-color: #666;
			&.good {
				background-color: $green;
			}
			&.bad {
				background-color: $red;
			}
		}
	}
	// A lot of this nesting is required for overwriting default WordPress styles.
	table {
		border: 0px none;
		background: #fff;
		thead {
			tr {
				th {
					background: $tableBlue;
					color: #fff;
					font-family: Arial, Helvetica, sans-serif;
					text-shadow: none;
					&:first-of-type {
						border-top-left-radius: 5px;
					}
					&:last-of-type {
						border-top-right-radius: 5px;
					}
				}
			}
		}
		tbody {
			tr {
				&:nth-of-type(even) {
					background-color: #f2f2f2;
				}
				&:last-of-type {
					td {
						border-bottom: 1px solid #e6e6e6;
						&:first-of-type {
							border-bottom-left-radius: 5px;
						}
						&:last-of-type {
							border-bottom-right-radius: 5px;
						}
					}
				}
				td {
					border: 0px none;
					padding: 6px 7px 4px;
					&:first-of-type {
						border-left: 1px solid #e6e6e6;
					}
					&:last-of-type {
						border-right: 1px solid #e6e6e6;
					}
					&.column-title {
						font-style: italic;
						color: #999;
						strong,p {
							font-style: normal;
							color: #555;
						}
						hr {
							border: 0px none;
							height: 1px;
							background: #aaa;
						}
					}
				}
			}
		}
	}
	.toggle {
		display: inline-block;
		margin: 0 20px;
	}
	.multiplebgs & .toggle {
		$toggleWidth: 6em;
		$toggleHeight: 2em;
		@include box-sizing(border-box);
		width: $toggleWidth;
		height: $toggleHeight;
		position: relative;
		@include border-radius(5px);
		box-shadow: 0 0 7px rgba(0,0,0,.5);
		vertical-align: middle;
		&:before, &:after {
			position: absolute;
			top: 0;
			width: 50%;
			height: 100%;
			line-height: $toggleHeight;
			text-align: center;
			color: #fff;
			font-weight: bold;
			text-shadow: 0 1px 0 rgba(0,0,0,.25);
			box-shadow: inset 0 0 1px rgba(0,0,0,.75);
			z-index: 0;
		}
		&:before {
			content: 'off';
			left: 0;
			background: $red;
			@include border-radius(5px 0 0 5px);
		}
		&:after {
			content: 'on';
			right: 0;
			background: $green;
			@include border-radius(0 5px 5px 0);
		}
		.switch {
			@include box-sizing(border-box);
			position: absolute;
			cursor: pointer;
			top: -10%;
			right: -2%;
			width: 54%;
			height: 120%;
			background: #f2f2f2;
			box-shadow: inset 0 0 1px rgba(0,0,0,.5);
			z-index: 1;
			border-radius: 5px;
			@include transition-property(right);
			@include transition-duration(.3s);
			@include background-image(linear-gradient(rgba(255,255,255,.35)0%, rgba(255,255,255,0) 20%), linear-gradient(rgba(0,0,0,0) 80%, rgba(0,0,0,.35) 100%));
		}
		input[type="checkbox"] {
			@include opacity(0);
			cursor: pointer;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			&:checked + .switch {
			   right: 48%;
			}
		}
	}
}
#error_log {
	margin-top: $pad*2;
}

// Lift Modals
div.lift_modal {
	display:none;
	z-index: 1000;
	position:fixed;
	top: 0;
	left: 0;
	.modal_overlay {
		position:fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: .5;
		z-index: 1000;
	}
	.modal_wrapper {
		position: fixed;
		top: 25%;
		width: 100%;
		z-index: 1001;
	}
	.modal_content{
		width: 500px;
		position: relative;
		margin: 0 auto;
		padding: $pad;
		background-color: #f2f2f2;
	}
}