/*
* Style Name: cf7s-ready
* Description: Default Ready Styles for CF7 Skins forms
* Version: 0.8
* Version Date: 2016-06-19
*/

/** Table of Contents
* singleline - displays enclosed elements on a single line
* side-by-side - displays multiple elements side by side [HOLD]
* box - displays enclosed elements in a surrounding box
* checkbox-horizontal - displays checkbox elements horizontally
* radio-horizontal - displays checkbox elements horizontally
* column – displays enclosed elements in a vertical column
* grid – implements a CSS form grid
*/

/* Ready Styles
NOTE: Ready Styles are provided ready to be used in all CF7 Skins forms
------------------------------------------------------------ */

/**
 * singleline Ready Style
 * Displays enclosed elements on a single line
 */
 
.wpcf7-form .singleline {  /* Consider changing all selectors to .wpcf7-form.cf7skins */
	overflow: hidden;  /* Clears after any floated items - may not be necessary */
}

.wpcf7-form .singleline li {
}

.wpcf7-form .singleline  label {
}

.wpcf7-form .singleline  input {
}

/**
 * side-by-side Ready Style
 * Displays multiple elements side by side.
 */
 
.wpcf7-form .side-by-side {
	float: left;  /* Allows multiple items on single line  */
}

/**
 * Checkbox & Radio Button Ready Styles
 * Horizontal Layout of Checkboxes & Radio Buttons
 */

.wpcf7-form.cf7skins .checkbox-horizontal .wpcf7-list-item,
.wpcf7-form.cf7skins .radio-horizontal .wpcf7-list-item {
	display: inline;
	margin: 0 5px 0 3px;
}

.wpcf7-form .checkbox-horizontal .wpcf7-checkbox {
	display: block;  /* Added so can remove from .wpcf7-form li label {} */
}

.wpcf7-form .checkbox-horizontal .wpcf7-checkbox label {
	display: inline;
}

.wpcf7-form .radio-horizontal .wpcf7-radio {
	display: block;  /* Added so can remove from .wpcf7-form li label {} */
}

.wpcf7-form .radio-horizontal .wpcf7-radio label {
	display: inline;
	font-weight: normal;
}

/**
 * box Ready Style
 * Displays enclosed elements in a surrounding box.
 */

 .wpcf7 .box {  /* Changed to shorter Ready Class name */
	border: 1px solid #c0c0c0;
	margin: 5px 0;
	padding: 5px;
}

/**
 * column Ready Style
 * Displays enclosed elements in a vertical column
 */
 
.wpcf7-form .column {
}
 
/**
 * grid Ready Style
 * Implements a CSS form grid
 */
 
.wpcf7  .wpcf7-form.cf7skins .grid [data-row-span] [data-field-span] { 
	padding-right: .625em;
}

	/* Problem occurs due to responsive resizing when only single item displayed within singleline class */
	@media only screen and (min-width: 0) and (max-width: 700px) { 
		.wpcf7  .wpcf7-form.cf7skins .grid [data-row-span] [data-field-span]  { 
		padding-right: 0;
		}
	}

.wpcf7  .wpcf7-form.cf7skins .grid [data-row-span] [data-field-span]:last-child { 
	padding-right: 0;
}

.wpcf7 .wpcf7-form.cf7skins .grid li {
	margin-bottom: 0;
}

/**
 * grid-lined Ready Style
 * Adds lines to a CSS form grid
 */

.wpcf7  .wpcf7-form.cf7skins .grid-lined { 
	border-top: 1px solid #333333; 
}

.wpcf7  .wpcf7-form.cf7skins .grid-lined [data-row-span] {
	border-bottom: 1px solid #333333;
}

.wpcf7  .wpcf7-form.cf7skins .grid-lined [data-row-span] [data-field-span] {
	border-right: 1px solid #333333;
}

.wpcf7  .wpcf7-form.cf7skins .grid-lined [data-row-span] [data-field-span]:first-child { 
	border-left: 1px solid #333333; 
}

.wpcf7  .wpcf7-form.cf7skins .grid.grid-lined [data-row-span] [data-field-span] { 
	padding: 8px;
}

@media only screen and (min-width: 0) and (max-width: 700px) { 
	.wpcf7  .wpcf7-form.cf7skins .grid-lined [data-row-span] [data-field-span] { 
		border-bottom: 1px solid #333333;
		border-left: 1px solid #333333; 
		}
	
	.wpcf7  .wpcf7-form.cf7skins .grid-lined [data-row-span] {
		border-bottom: none;
		}
}

/**
 * grid-focus Ready Style
 * Highlights fields in a CSS form grid
 */
 
.wpcf7  .wpcf7-form.cf7skins .grid-hover [data-row-span] [data-field-span].focus { 
	background: #fffad4; 
}

.wpcf7  .wpcf7-form.cf7skins .grid-hover [data-row-span] [data-field-span].focus label { 
	color: #262626; 
}

.wpcf7  .wpcf7-form.cf7skins .grid-hover [data-row-span] [data-field-span]:hover { 
	background: #fffded; 
	cursor: text;  /* May not be necessary */
}