recaptcha.scss

// Compass imports
@import "compass/reset";
@import "compass/css3";

// Settings
$recaptcha-base-color: #AF1500 !default;
$recaptcha-border-radius: 4px !default;
$recaptcha-border-radius-inner: 2px !default;
$recaptcha-input-background: #FFDC73 !default;
$recaptcha-icons-color: white !default;
$recaptcha-icons-shadow: 0 1px 1px black !default;

// reCAPTCHA container
.recaptcha_widget {
	@include box-sizing('border-box');
	max-width: 300px;
	border: 4px solid $recaptcha-base-color;
	@include border-radius( $recaptcha-border-radius );
	background: $recaptcha-base-color;
	margin: 0 0 10px;
}

// Showing an image...
#recaptcha_image {
	width: 100% !important;
	height: auto !important;

	img {
		@include box-sizing('border-box');
		width: 100%;
		height: auto;
		@include border-radius( $recaptcha-border-radius-inner );
		border: 3px solid #FFF;
	}
}

// Showing audio...
.recaptcha_is_showing_audio {
	embed {
		height: 0;
		width: 0;
		overflow: hidden;
	}

	#recaptcha_image {
		@include box-sizing('border-box');
		width: 100%;
		height: 60px;
		background: #FFF;
		@include border-radius( $recaptcha-border-radius-inner );
		border: 3px solid #FFF;

		br {
			display: none;
		}

		#recaptcha_audio_download {
			display: block;
		}
	}
}

// Input area container
.recaptcha_input {
	background: $recaptcha-input-background;
	color: #000;
	font: 13px/1.5 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
	margin: 4px 0 0;
	padding: 0 4px 4px;
	border: 4px solid $recaptcha-input-background;
	@include border-radius( $recaptcha-border-radius-inner );

	label {
		margin: 0 0 6px;
		@include box-sizing('border-box');
	}

	input {
		width: 100%;
	}
}

// Icon options
.recaptcha_options {
	list-style: none;
	margin: 4px 0 0;
	height: 18px;

	li {
		float: left;
		margin: 0 4px 0 0;

		a {
			text-decoration: none;
			@include text-shadow( $recaptcha-icons-shadow );
			font-size: 16px;
			color: $recaptcha-icons-color;
			display: block;
			width: 20px;
			height: 18px;

			&:active {
				position: relative;
				top: 1px;
				@include text-shadow(none);
			}
		}
	}
}

// Hide icon labels
.captcha_hide {
	display: none;
}