/*** pwplayground main.css File ***/

@import url(reset.css);

/* General Styles */
html {
	font-size: 16px;
}
body {
	margin: 0;
	padding: 0;
}

body, input, textarea, table {
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 14px;
	color: #2f4248; 
}

h1 {
	font-size: 2rem;
    color: #0881ae;
    margin: 20px 0;
}

a {
	text-decoration: none;
	color: #000;
}

/* General Styles */
.title-box {
	margin-bottom: 20px;
}

/* BEGIN SMS STYLES */
.sms_send_form_container {

}

	.sms_form_row {

	}

		.sms_form_row text {

		}

		.sms_form_row textarea {

		}

		.sms_send {

		}

.sms_numbers_list_container {

}

	.display {

	}

		.display tr td {

		}

			.display tr td a {

			}

.sms-conversation-container {

}

	.sms-date-stamp {
		font-size: 0.8rem;
		color: #666;
	}

	.sms-message-in-box {
		font-size: 1.1rem;
		color: green;
		background: #ddd;
		border-radius: 10px;
		padding: 5px;
		margin-top: 5px;
		display: table;
	}

	.sms-message-out-box {
		font-size: 1.1rem;
		color: blue;
		background: #ddd;
		border-radius: 10px;
		padding: 5px;
		margin: 5px 0 0 30px;
		display: table;
	}
/* END SMS STYLES */

/* BEGIN STRIPE STYLES */
/* Header Cart Display */
.header-cart-box {
	border: 1px solid green;
	padding: 10px;
	font-size: 1.1rem;
	height: 20px;
}

	.header-cart-box a {
	}

/* Stripe Product Pages */
.stripe-products-listing-container {
	display: flex;
	gap: 50px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 50px;
}

	.stripe-product-box {
		width: 300px;
		border: 1px solid #000;
		background: #ccc;
		padding: 10px;
	}

		.stripe-product-photo-box {
			width: 100%;
		}

			.stripe-product-photo-box img {
				max-width: 100%;
			}

		.stripe-product-title-box {
			font-size: 1.5rem;
			font-weight: bold;
			margin-bottom: 15px;
			text-align: center;
		}

		.stripe-product-intro-text-box {
			font-size: 0.85rem;
			font-style: italic;
			margin-bottom: 15px;
		}

		.stripe-product-single-box {
			text-align: center;
		}

		.stripe-product-variations-container {
			display: flex;
			gap: 20px;
			flex-wrap: wrap;
			justify-content: space-around;
		}

			.stripe-product-variation-box {
				text-align: center;
			}

				.shopping-cart-action-box {
					margin-top: 5px;
				}

/* Stripe Shopping Cart */
.shopping-cart-already-in-button {
	background: #f6f6f6;
	padding: 3px;
	color: green;
}

.add-to-cart-button {
	border: none;
	padding: 3px;
	background: #f6f6f6;
	color: green;
	cursor: pointer;
}

.shopping-cart-items-container {
	border: 1px solid #ccc;
    padding: 20px 25px 10px 20px;
	width: fit-content;
}

	.shopping-cart-items-container h1 {
		margin-bottom: 25px;
	}

	.shopping-cart-line-item {
		margin-bottom: 10px;
	}

		.shopping-cart-line-item form {
			display: flex;
			align-items: center;
		}

			.shopping-cart-product-line {
				font-size: 1.5rem;
				margin-right: 5px;
			}

			.shopping-cart-quantity-field {
				width: 45px;
				font-size: 1.3rem;
				margin-left: 10px;
				height: 25px;
				padding: 3px 0 5px 3px;
			}

			.shopping-cart-quantity-button {
				border: none;
				padding: 3px;
				font-size: 1.1rem;
				margin-right: 10px;
				cursor: pointer;
			}

			.shopping-cart-delete-button {
				margin: 5px 0 0 20px;
			}

				.cart-delete-icon {
					height: 25px;
				}

	.shopping-cart-total-box {
		margin: 40px 0;
		font-size: 1.6rem;
	}

	.shopping-cart-continue-shopping-box {
		margin-top: 20px;
	}

		.shopping-cart-continue-shopping-box a {
			background: #666;
			font-size: 1.1rem;
			padding: 5px;
			color: #fff;
		}

	.stripe-checkout-box {
	}

		.stripe-checkout-button {
			background: green;
			color: #fff;
			border: none;
			padding: 10px;
			cursor: pointer;
			font-size: 1.2rem;
		}

	.shopping-cart-items-empty-container {
		font-size: 1.75rem;
		text-align: center;
	}

	.shopping-cart-continue-shopping-empty-box {
		font-size: 1.5rem;
		text-align: center;
	}

		.shopping-cart-continue-shopping-empty-box a {
			background: #666;
			font-size: 1.3rem;
			padding: 5px;
			color: #fff;
		}

/* Stripe Success Page */
.stripe-shopping-cart-success-message {
	text-align: center;
    width: fit-content;
    margin: 70px auto 0 auto;
    border: 2px solid green;
    padding: 30px;
    background: #f6f6f6;
}

	.stripe-shopping-cart-success-message p {
		font-size: 1.5rem;
		font-style: italic;
		margin-bottom: 50px;
		text-transform: uppercase;
	}

	.stripe-shopping-cart-success-message a {
		background: green;
		color: #fff;
		padding: 5px;
	}

.stripe-shopping-cart-success-additional-box {
}

/* Stripe Purchase Page */
.stripe-purchase-container {
	margin-left: 25px;
}

	.stripe-purchase-title-box {
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.stripe-purchase-details-box {
		margin-bottom: 30px;
		border: 1px solid #000;
		padding: 10px;
		width:fit-content;	
	}

		.stripe-purchase-detail-head {
			font-size: 1.2rem;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.stripe-purchase-detail-line {
			margin-bottom: 10px;
		}

			.stripe-purchase-detail-lead {
				font-weight: bold;
			}

		.stripe-purchase-detail-line-technical {
			font-size: 0.85rem;
			margin-bottom: 10px;
		}

			.stripe-purchase-detail-lead-technical {
				font-size: 0.85rem;
				font-weight: bold;
			}
/* END STRIPE STYLES */


/* Experiments Pages */

/* Walk-Through Gallery */
.header,
.content,
#footer {
	padding-right: 20px;
	padding-left: 20px;
}

.container {
	width: 85%;
	min-width: 920px; 
	max-width: 1200px;
	margin: 0 auto;
}

.header {
    margin-bottom: 10px;
	padding: 30px;
    border-bottom: 2px solid #ccc;
    background: #f6f6f6;
    text-align: center;
}

	.header-top-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

		.header-left {
		}

			.logo-box {
			}

			.page-identifier {
			}

				.header p {
					font-size: 1.1rem;
					margin-bottom: 10px;
				}

	.main-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: center;
	}

		.main-nav a {
			font-size: 1.2rem;
			color: darkblue;
		}

#title {
	font-size: 37px;
	color: #003051; 
}

.content {
	font-size: 14px; 
	line-height: 1.7em; 
	color: #333; 
	padding-top: 0;
	padding-bottom: 4em;
}
	.content p,
	.content ul,
	.content ol {
		margin: 1em 0 1.5em 0;
	}

	.content em {
		font-style: italic;
	}

	.content strong {
		font-family: "Helvetica Neue", Arial, sans-serif; 
		font-weight: bold; 
		color: #555; 
	}

	.content h2,
	.content h3,
	.content h4 {
		margin-top: 1.5em; 
		line-height: 1.3em;
	}

	.content h2 {
		color: #006fbb; 
		font-size: 23px; 
		margin-bottom: 0.5em; 
	}

	.content h3 {
		color: #690033; 
		font-size: 18px; 
		border-bottom: 1px dotted #ccc; 
		margin-bottom: -0.5em; 
		padding-bottom: 0.25em; 
	}
		.content h2 + h3 {
			margin-top: 0;
		}

		.content h3 + ul,
		.content h3 + ol {
			margin-top: 1.5em; 
		}

	.content h4 {
		font-size: 1em; 
		font-weight: bold; 
		text-transform: uppercase; 
	}

	.content ol li {
		margin: 0 0 0 3em; 
	}

	.content ul li {
		margin: 0 0 0 3em;
		display: list-item; 
		list-style: disc; 
	}

	.content ol li {
		margin: 0 0 0 3em; 
		display: list-item;
		list-style: decimal;
	}

	.content ul.nav { }

		.content ul.nav li {
			display: block;
			list-style: none; 
			margin: 0;
			border-bottom: 1px dotted #ccc; 
		}
			.content ul.nav li a {
				font-family: "Helvetica Neue", Arial, sans-serif; 
				font-weight: bold; 
				margin: 0;
			}

			.content ul.nav li p {
				margin: 1em 0;
			}

	.content .disclaimer {
		font-size: 11px;
		line-height: 17px; 
		color: #777; 
	}


#footer {
	clear: both; 
	border: none;
	font-size: 11px; 
	padding: 2em 0;
}
	#footer p,
	#footer a {
		color: #85aaba; 
	}

	#footer p {
		text-align: center; 
	}

	#footer a:hover {
		text-decoration: underline; 
		color: #db1174; 
	}

/**
 * Alignment styles that are used by the InputfieldTinyMCE for 
 * positioning images in bodycopy. If you are using this field type, 
 * you may want to include these or similar styles in your site.
 *
 */
.align_left {
        float: left;
        margin: 0 1em 0.25em 0;
}

.align_right {
        float: right;
        margin: 0 0 0.25em 1em;
}

.align_center {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

/**
 * WireFatalError is a class that ProcessWire will use to output
 * fatal errors in the design, but only if debug mode is on, or if
 * you are logged in as a superuser. 
 *
 */
.WireFatalError {
	background: #a30000; 
	color: #fff; 
	padding: 1em; 
	position: relative;
	z-index: 9999;
}

/*** Styling for the Windsor Pages ***/
.other_options_box {
	margin-bottom: 25px;
}

.other_options_box a {
	background-color: #ccc;
	margin-right: 10px;
}

.other_options_box p {
	font-size: 150%;
}

.chart_form_box {    /* Styling for the container holding the chart-creation form. */
    border: 1px solid #333333;
    margin: 0 auto;
    padding: 15px;
    width: 20%;
}

.create_chart_field_label { /* Styling for the general label of the admin form fields. */
	font-size: 97%;
	color: #000;
}

.create_chart_long1 {   /* Styling for longer text fields (such as the title field) in the admin entry form. */
	width: 85%;
	margin-bottom: 15px;
}

.admin_submit {  /* Styling for admin "submit" button. */
	background-color: #355292;
	font-size: 1.1em;
	color: #fff;
	cursor: pointer;
	border: none;
	padding: 5px;
}

.admin_submit:hover {
	background-color: #559F3A;	
	color: #000;
}

#chart_container {   /* Container that is affected by the HighCharts plugin. */
	min-width: 310px;
	height: 400px;
	margin: 0 auto;
}

.raw_data_box {  /* Box containing the raw numerical values of the chart elements. */
	background-color: #ccc;
	margin: auto;
	text-align: center;
	width: 50%;
}