style_example.css

@charset "UTF-8";
/**
 * Contact form with CAPTCHA
 *
 * This file is part of a module for pluck (http://www.pluck-cms.org/).
 * It provides an example for advanced form styles.
 *
 * @copyright 2012 Paul Voegler
 * @author Paul Voegler (http://www.voegler.eu/)
 * @version 1.0 (October 2012)
 * @license GPL Version 3, 29 June 2007
 * See docs/COPYING for the complete license.
 */


/* contactform_captcha common styles */

form {
	margin: 0;
	font-size: 100%;
	color: #333333;
}

fieldset {
	margin: 0;
	border: none;
	padding: 0;
}

form ul, form ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

form li {
	margin: 0;
	padding: 0;
}

input, textarea, select {
	margin: 0;
	border: 0.1em solid #c0c0c0;
	border-radius: 0.4em;
	padding: 0.2em;
	background: #f7f7f7;
	font: inherit;
	font-size: 100%;
	transition: all 0.1s linear 0s;
}

input:hover, textarea:hover, select:hover {
	border-color: #0088bf;
	transition: all 0.1s linear 0s;
}

input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
	border-color: #0088bf;
	background-color: #fefefe;
	box-shadow: 0 0 0.2em 0 #0088bf;
	transition: all 0.1s linear 0s;
}

button, input[type="submit"], input[type="reset"], input[type="button"] {
	border: 0.1em solid #a0a0a0;
	border-radius: 0.4em;
	padding: 0.2em 1em;
	background: #f0f0f0;
	box-shadow: inset 0 0.4em 0.4em -0.1em #c0c0c0;
	color: #333333;
	font-weight: bold;
	transition: all 0.1s linear 0s;
}

button:hover, button:active, button:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus {
	border-color: #0088bf;
	box-shadow: inset 0 0.4em 0.4em -0.1em #c0c0c0, 0 0 0.2em 0 #0088bf;
	color: #0088bf;
	cursor: pointer;
	transition: all 0.1s linear 0s;
}

/* contactform_captcha specific styles */

.module_contactform_captcha .error {
	color: #c40233;
}

.module_contactform_captcha .success {
	color: #00a368;
}

#contactform_captcha h2 {
	font-size: 115%;
}

#contactform_captcha fieldset {
	margin: 0.8em 0;
	width: 30em;
}

#contactform_captcha fieldset:after {
	content: " ";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

#contactform_captcha li {
	margin-bottom: 0.6em;
}

#contactform_captcha label {
	display: block;
	margin: 0 0 0.2em 0;
	font-weight: bold;
}

#contactform_captcha label .error {
	font-size: 80%;
	margin-left: 0.5em;
}

#contactform_captcha input.error, #contactform_captcha textarea.error {
	box-shadow: 0 0 0.2em 0.1em #ff0000;
	color: inherit;
}

#cfc_logo {
	float: right;
	margin-top: 1.2em;
	width: 10em;
	height: 6.5em;
}

#cfc_name, #cfc_email {
	width: 18.4em;
}

#cfc_subject {
	width: 29.4em;
}

#cfc_message {
	width: 29.4em;
	height: 14em;
}

#cfc_captcha {
	display: block;
	margin-bottom: 0.2em;
	width: 3.4em;
}

#cfc_submit {
	float: right;
}

#cfc_captcha_img {
	float: left;
	margin-right: 0.5em;
	border: 0.1em solid #7f7f7f;
	border-radius: 0.4em;
	height: 4em;
}

#contactform_captcha #cfc_captcha_update {
	float: left;
	width: 2em;
	height: 2em;
}

#contactform_captcha #cfc_captcha_play {
	float: left;
	width: 2em;
	height: 2em;
}