/**
 * Styles for our plugin.
 *
 * @package WordPress
 * @subpackage cnfaic-obs
 * @since CNFAIC Obs 0.1
 */

/**
 * Table of Contents
 * 
 * I.  Styles for both front and back end
 *     1. Helper classes
 *     2. Form inputs
 *     3. Modules
 *         i. Embeds
 *         ii. Toggles
 *     4. Icons
 *     
 * II.  Styles for just the front end
 *    1. Form inputs
 *    2. Form Validation
 *    3. Modules
 *        i. Terms list
 *        ii. Obs table
 *        iii. Obs Map
 *        iV. Obs Slideshow
 *    4. Single Post
 *    5. Satellite Avy Centers
 */

/**
 * I. Both front and back end.
 */

	/* 1. Helper classes */

		/* Hide text from the browser but still have it readable for screen-readers and bots. */
		.cnfaic_obs-hide {
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 0;
			height: 0;
			margin: 0;
			box-shadow: none;
			border: none;
			outline: none;
			z-index: -999;
		}

		/* Unicode chars, helps older IE. */
		.cnfaic_unicode {
			font-family: 'Lucida Sans Unicode', 'lucida-sans-unicode';
		}

	/*  2. Form inputs */

		/* The fieldsets. */
		.cnfaic_obs-content-fieldset {
			margin-bottom: 20px;
		}

		#poststuff h3.cnfaic_obs-content-fieldset-title,
		.cnfaic_obs-content-fieldset-title {
			margin-left: 0;
			padding-left: 0;
		}

		/* Form labels. */
		.cnfaic_obs-opt-label,
		.cnfaic_obs-label {
			cursor: pointer;
			font-weight: 600;
		}

		/* Sub-labels for radio options. */
		.cnfaic_obs-opt-label {
			font-weight: 400;
		}

		/* Labels and form fields. */
		.cnfaic_obs-label,
		.cnfaic_obs-input  {
			display: block;
			width: 100%;
		}

		/* Radios & checkboxes. */
		.cnfaic_obs-input-radio,
		.cnfaic_obs-input-checkbox {
		    display: inline-block;
		    padding: 0;
		    text-align: left;
		    width: auto;
		}

		/* Just checkboxes. */
		.cnfaic_obs-label-checkbox {
			display: inline;
		}

		/* The input/label/notes/wrapper group. */
		.cnfaic_obs-canvas,
		.cnfaic_obs-input-map,
		.cnfaic_obs-field {
			padding-bottom: 20px;
		}

		.cnfaic_obs-input-map:last-child,
		.cnfaic_obs-field:last-child {
			padding-bottom: 0;
		}

		/* The empty option in a select dropdown. */
		.cnfaic_obs-empty-option {
			font-style: italic;
		}

		/* Notes to explain a field. */
		.cnfaic_obs-input-notes {
			font-style: italic;
		}

	/* 3. Modules */

		/* i. Embeds */

			/* Wraps a youtube embed or similar. */
			.cnfaic_obs-embed {
				padding: 10px 0px;
			}

			/* A youtube embed or similar. */
			.cnfaic_obs-embed iframe {
				max-width: 100vw; /* Leave room on the sides for vertical swiping. */
				display: block;		
			}

		/* ii. Toggles */
			
			/* The dashicon arrow inside a toggle handle looks crappy when it has text-decoration. */
			a:hover .cnfaic_obs-toggle-handle-dashicon,
			a .cnfaic_obs-toggle-handle-dashicon {
				text-decoration: none;
				vertical-align: middle;
			}

			/* We don't want an ugly margin transition when we slideIn and slideOut */
			.cnfaic_obs-toggle,
			.cnfaic_obs-toggle > *,
			.cnfaic_obs-toggle-hide .cnfaic_obs-content-field-title {
				margin-top: 0;
				margin-bottom: 0;
			}

/**
 * II. Front end only.
 */

	/* 1. Form inputs */

		/* Wrap all the fields. */
		.cnfaic_obs-form .cnfaic_obs-fields {
			margin-bottom: 20px;
		}

		/* File inputs. */
		.cnfaic_obs-input-caption,
		.cnfaic_obs-input-file {
			margin-bottom: 5px;
		}

		.cnfaic_obs-input-file-caption-group {
			margin-bottom: 20px;
		}

		.cnfaic_obs-input-file-caption-group:last-child {
			margin-bottom: 0;
		}
		
		/* The trigger to add more file inputs. */
		.cnfaic_obs-add {
			font-weight: 600;
			display: block;
			cursor: pointer;
		}

		.cnfaic_obs-add .dashicons {
			vertical-align: text-bottom;
		}
		
		/* Captions for fike inputs */
		.cnfaic_obs-input-caption {
			font-style: italic;
		}

		/* A honeypot field to thwart spam. */
		.cnfaic_obs-hp {
			position: absolute;
			display: block;
			height: 1px;
			overflow: hidden;
			width: 1px;
			text-indent: 1px;
			white-space: nowrap;
		}

	/* 2. Form validation */

		/* The text that denotes a field as required. */
		.cnfaic_obs-label-required {
			font-style: italic;
		}

		.cnfaic_obs-label-required:after {
			content: " \002A "; /* An asterisk */
			color: red;
		}

		/* Set the structre and default color pallette for feedback on form fields and the form itself. */
		label.cnfaic_obs-error,
		.cnfaic_obs-feedback {
			background: #FFFFD3;
			border: 3px solid yellow;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 0 5px 0 rgba(0,0,0,.25);
			margin: 0 0 20px 0;
			display: block;
		}

		/* Errors get colored red-ish */
		.cnfaic_obs-feedback-errors,
		label.cnfaic_obs-error,
		.cnfaic_obs-feedback-error {
			background: #FFAAAA;
			border-color: red;
		}

		/* Success is green-ish */
		.cnfaic_obs-feedback-success {
			background: #AAFFAA;
			border-color: green;
		}

		/* Feedback on one form item gets less padding than the form-level box. */
		label.cnfaic_obs-error {
			padding: 5px;
		}

		/* The contents of the feedback box. */
		.cnfaic_obs-feedback-header {
			margin: 0 0 10px 0;
		}

		.cnfaic_obs-feedback-note {
			margin: 0 0 10px 0;
		}

		.cnfaic_obs-feedback-note:last-child {
			margin-bottom: 0;
		}

	/* 3. Modules */

		/* i. Terms list */

		/* ii. Obs table */

			.cnfaic_obs-table-th,
			.cnfaic_obs-table-td {
				padding: 5px;
			}

			.cnfaic_obs-table-td {
				vertical-align: top;
			}

			/* The nav links above the table. */
			.cnfaic_obs-table-nav {
				display: block;
			}

			.cnfaic_obs-table-nav .cnfaic_obs-terms-list-item {
				padding: 0 5px;
			}

			.cnfaic_obs-table-nav .cnfaic_obs-terms-list-item:first-child {
				padding-left: 0;
			}

			/* Zebra stripes. */
			.cnfaic_obs-table tr:nth-child( even ) {
				background: #efefef;
			}

			/* Byline text. */
			.cnfaic_obs-table-td-byline {
				font-weight: 600;
			}

			/* Denote the observer as professional. */
			.cnfaic_obs-professional {
				font-style: italic;
				font-weight: 400;
				text-transform: uppercase;
				font-size: 85%;
			}

			/* Links to submit an obs. */
			.cnfaic_obs-submit-observation-link-table-top,
			.cnfaic_obs-submit-observation-link-table-bottom {
				display: block;
			}

			/* Yes/No values get shown as checkmarks. */
			.dashicons.cnfaic_obs-checkmark,
			.cnfaic_obs-checkmark {
				font-size: 300%;
				text-shadow: 1px 1px 1px rgba(0,0,0,.25);
			}

		/* iii. Obs Map */
			
			/* The little box that open when you click a marker. */
			.cnfaic_obs-info-window {
				overflow: hidden;
			}

			.cnfaic_obs-info-window-title {
				font-size: 18px;
				font-weight: 400;
				margin: 0;
			}

			.cnfaic_obs-info-window .cnfaic_obs-table-browse-observations-byline {
				display: block;
			}

			.cnfaic_obs-info-window .cnfaic_obs-gallery-image {
				max-width: 100%;
				display: block;
				margin: 0 auto;
			}

			/* Map nav links. */
			.cnfaic_obs-month-nav,
			.cnfaic_obs-year-nav,
			.cnfaic_obs-map-legend {
				text-align: center;
				margin: 0 auto 10px;
			}

			.cnfaic_obs-map-legend-item {
				padding: 0 15px;
				white-space: nowrap;
			}

			.cnfaic_obs-year-nav-item {
				padding: 0 7px;
			}

			.cnfaic_obs-month-nav-item {
				padding: 0 4px;	
			}

		/* iv. Obs Slideshow */

			/* The caption is overlayed at the bottom of the image. */
			.single-observations #cboxTitle {
				position: absolute;
				left: 0;
				color: #000;
				background: #fff;
				background: rgba( 255, 255, 255, .75 );
				top: auto;
				bottom: 0;
				float: none;
				padding: 10px;
			}

	/* 4. Single Post */

	.cnfaic_obs-content-fieldset-title {
		padding-bottom: 0.25rem;
		padding-top: 0.25rem;
		margin: 0 !important;

	}

	.cnfaic_obs-content-field-title {
		padding-bottom: 10px;
	}

	.cnfaic_obs-embed iframe {
		max-width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	/*  5. Satellite Avy Centers */
	html body.cnfaic_obs-is_satellite,
	html body.cnfaic_obs-is_satellite div#container,
	html body.cnfaic_obs-is_satellite #contentleft  {
		background-color: #fff !important;
		background-image: none !important; 
		bottom: 0 !important;
		clear: both !important;
		float: none !important;
		font-family: Arial, Helvetica,  sans-serif !important;
		height:100% !important;
		left: 0 !important;
		margin:0 !important;
		max-width: 100% !important;
		padding:0 !important;
		position: relative !important;
		right: 0 !important;
		top: 0 !important;
		width: 99% !important;
		
	}

	.cnfaic_obs-is_satellite.cnfaic_obs-is_form form,
	.cnfaic_obs-is_satellite .cnfaic_obs-table-browse-observations {
		background: #fff;
		margin: 0;
	}

	.cnfaic_obs-is_satellite.cnfaic_obs-is_satellite-single_obs {}