@import "compass";

.query-recorder {
	.query-recorder-container {
		position: relative;
	}

	.query-recorder-main {
		margin-right: 320px;
		min-height: 775px;
	}

	.query-recorder-intro {
		font-size: 14px;
		width: 100%;
		max-width: 750px;
	}

	#exclude-queries {
		width: 100%;
		max-width: 530px;
		height: 215px;
	}

	#saved-queries-file-path {
		width: 100%;
		max-width: 530px;
	}

	#query-recorder-sidebar {
		position: absolute;
		top: 0;
		right: 0;
		width: 292px;

		.inside {
			padding: 20px;
			border: 1px solid #ccc;
			border-bottom: none;
		}

		.author {
			padding-bottom: 20px;
			margin-bottom: 20px;
			border-bottom: 1px solid #ccc;
			overflow: hidden;

			img {
				float: left;
				margin-right: 20px;
			}

			.desc {
				float: left;
			}

			h3 {
				font-size: 12px;
				margin: 0;
			}

			h2 {
				font-size: 18px;
				margin: 0;
				padding: 0;

				a {
					color: #464646;
					text-decoration: none;

					&:hover {
						color: #000;
					}
				}
			}

			p {
				margin: 0;
			}
		}

		.subscribe {
			h2 {
				padding: 0;
				margin: 0;
				margin-bottom: 0.5em;
				color: #666;
				font-size: 20px;
				line-height: 1.2em;
			}

			h3 {
				font-size: 16px;
				margin: 0;
			}

			p {
				margin: 0;
			}

			p.interesting {
				margin-bottom: 1em;
			}

			.links {
				margin-bottom: 2em;

				a {
					text-decoration: none;
				}
			}

			.promise {
				color: #999;
				font-size: 12px;
				line-height: 1.4em;
			}

			.field {
				margin-bottom: 0.5em;

				p {
					margin-bottom: 0.3em;
				}

				&.submit-button {
					margin-bottom: 1em;
				}
			}
		}

		@media (min--moz-device-pixel-ratio: 1.3),
			(-o-min-device-pixel-ratio: 2.6/2),
			(-webkit-min-device-pixel-ratio: 1.3),
			(min-device-pixel-ratio: 1.3),
			(min-resolution: 1.3dppx) {

			.wpmdb-banner {
				background-image: url(../img/wp-migrate-db-pro@2x.jpg);
				background-size: 292px 292px;
				width: 292px;
				height: 292px;
				display: block;

				img {
					display: none;
				}
			}
		}
	}

	@media screen and (max-width: 1080px) {
		.form-table {
			th, td {
				display: block;
				width: auto;
				vertical-align: middle;
				padding: 10px 0 0 0;
				border-bottom: 0;
			}

			td {
				input[type=text], textarea {
					font-size: 16px;
					line-height: 1.5;
					padding: 7px 10px;
					display: block;					
				}
			}
		}
	}

}