/*#billing_method_selector {
	display: none;
}
*/

.activity {
	display: none;
}

#bd {
	box-sizing: border-box;
	margin: 35px auto;
	max-width: 900px;
}

#bd * {
	box-sizing: inherit;
}

/* ----------------------------------------------------------------
   Overall layout for order summary and shipping/CC container boxes
   ---------------------------------------------------------------- */

#bd .order_summary_container_left {
	float: left;
	width: 35%;
	/*background-color: #fff0f0;*/

	/* mobile view is default */
	display: none; 
}

#bd .order_summary_container_left section {
	/*background-color: #d7e7f3;*/
	background-color: #eee;
	border: solid 1px rgb(204, 204, 204);
	border-radius: 5px;
}

#bd .order_summary_container_bottom {
	background-color: #d0d0ff;
}

#bd .order_summary_container_bottom section {
	/*background-color: #d7e7f3;*/
	background-color: #eee;
	border: solid 1px rgb(204, 204, 204);
	margin-left: 0px;
	margin-right: 0px;
	border-radius: 5px;
}

#bd .order_form_container {
	float: left;
	width: 100%;
	/*background-color: #f0fff0;*/
}

/* Coupon fields inside summary */
.coupon_applied {
	display: none; /* enabled from JavaScript */
}

.coupon_line_item {
	display: none; /* enabled from JavaScript */
}

/* -----------------------------
   Subsections within order form 
   ----------------------------- */

#bd .order_form_container section {
	margin-bottom: 25px;
	/*background-color: #dbf7f6;*/
	background-color: #eee;
	margin-left: 0px;
	margin-right: 0px;
	border-radius: 5px;
	border: solid 1px rgb(204, 204, 204);
}

#bd .order_form_container section[id=subscribe] {
	padding: 0;
	margin: 0 0 30px 0;
	border: none;
	background: none;
}

/* Credit card -related sections are shown from JavaScript if necessary */
#bd .hide_for_paypal {
	display: none;
}

/* Adjust paddings, works thanks to border-box */
section {
	padding: 25px;
}

/* -----------------------------------------------------------------------
   Rearrange boxes when space is tight (aka on mobile). Since rearranging
   divs is actually hard (impossible?) from just CSS, the order summary
   box appears twice and only the correct one is shown depending on space.
   ----------------------------------------------------------------------- */
@media (min-width: 800px) { /* switch to desktop view when enough space */
	#bd .order_summary_container_left {
		display: block;
		padding-right: 25px;
		padding-left: 0;
	}
	#bd .order_form_container {
		width: 65%;
		padding-right: 0;
		padding-left: 25px;
	}
	#bd .order_form_container section {
	}
	#bd .order_summary_container_bottom {
		display: none;
	}
}

/* ------------
   Form styling
   ------------ */
label {
	display: block;
	color: #666;
}
input, .card_container {
	background-color: white;
	width: 100%;
	border: 1px solid #dedede;
	height: 50px;
	line-height: 50px;
	padding: 10px;
}
#billing_method_selector input[type=radio] {
	display: inline-block;
	width: 30px;
	vertical-align: middle;
	height: 50px;
}
#billing_method_selector label {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	height: 50px;
}
select {
	border: 1px solid #dedede;
	height: 50px;
	width: 100%;
	background-color: white;
}
input, select, .card_container {
	border-radius: 4px;
}
.row {
	margin-bottom: 20px;
}

.first_name_container {
	float: left;
	padding-right: 15px;
	width: 50%;
}
.last_name_container {
	float: left;
	/*padding-right: 15px;*/
	width: 50%;
}
.address1_container {
	float: left;
	padding-right: 15px;
	width: 60%;
}
.address2_container {
	float: left;
	/*padding-right: 15px;*/
	width: 40%;
}
.city_container {
	float: left;
	padding-right: 15px;
	width: 34%;
}
.state_container {
	float: left;
	padding-right: 15px;
	width: 33%;
}
.zip_container {
	float: left;
	/*padding-right: 15px;*/
	width: 33%;
}
.country_container {
	float: left;
	/*padding-right: 15px;*/
	width: 100%;
}

.number_container {
	float: left;
	padding-right: 15px;
	width: 66%;
}
.cvv_container {
	float: left;
	width: 34%;
}
.month_container {
	clear: both;
	float: left;
	padding-right: 15px;
	width: 33%;
}
.year_container {
	float: left;
	padding-right: 15px;
	width: 33%;
}
.postal_code_container {
	float: left;
	width: 34%;
}

/* Fonts */
select, input, .card_container {
	font-family: sans-serif;
	font-size: 110%;
}

/* Bill */
.order_summary_container_left table {
	width: 100%;
}
.order_summary_container_left td {
	text-align: right;
	padding: 0;
	margin: 0;
}
.order_summary_container_left td:first-child {
	text-align: left;
}
.order_summary_container_left tr:last-child td:last-child {
	border: solid 1px #ccc;
	border-width: 1px 0px 0px 0px;
	padding-top: 5px;
}
.order_summary_container_left tr:nth-child(2) td {
	padding-bottom: 15px;
}
.order_summary_container_bottom tr:last-child td:last-child {
	border: solid 1px #ccc;
	border-width: 1px 0px 0px 0px;
	padding-top: 5px;
}
.order_summary_container_bottom tr:nth-child(2) td {
	padding-bottom: 15px;
}
.order_summary_container_left p, .order_summary_container_bottom p {
	font-size: 80%;
}
.order_summary_container_bottom tr td:last-child {
	padding-left: 50px;
}

/* Make submit button take full width and shine when mouse is on top */
.subscribeSubmit2 {
	width: 100%;
}
.subscribeSubmit2:hover {
	opacity: 0.8;
}

/* Starting PayPal subscription submits a hidden form */
form[id=pp] {
	display: none;
}

/* No errors initially. */
.error {
	display: none;
}