/*	
	======================================================================

	public/house-plans/detail.css

	======================================================================
*/

/* ----------------------------------------------------
   main columns
   ---------------------------------------------------- */

	#house_plans_left_column {

		width: 43%;
		float: left;
		margin-right: 3%;
	}

	#house_plans_right_column {
	
		width: 54%;
		float: left;
	}

/* ----------------------------------------------------
   main divs
   ---------------------------------------------------- */

	#planDiv {

		margin-top: 40px;
	}

	#photoDiv {
	
		margin-top: 40px;
	}
	

/* ----------------------------------------------------
   plan type details
   ---------------------------------------------------- */

	#planDetailBackgroundDimmer {

		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;
		z-index: 100;
		background-color: black;	
		opacity: 0.8;
		filter: alpha(opacity=80); /* For IE8 and earlier */
	}
	
	#planDetailClickCatcher {
	
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;
		z-index: 300;
	}
	
	.planTypeDiv {
	
		display: none;
		position: absolute;
		margin: 0 auto;
		padding: 30px;
		top: 10%;
		left: 20%;
		width: 60%;
		background-color: #EEE;
		z-index: 200;
	}
	
	.planTypeDetailDivCloseInstructions {

		margin-bottom: 20px;
		text-align: right;
	}
	
/* ----------------------------------------------------
   favorite icon
   ---------------------------------------------------- */

	#favoriteIcon {
	
		position: relative;
		top: 5px;
		float: left;
		margin-right: 8px;
	}

/* ----------------------------------------------------
   prev next
   ---------------------------------------------------- */

	.planImageFlipLink {

		text-align: right;
		padding: 10px;	
	}
	
	.planImageFlipLinkHidden {
	
		display: none;
	}
	
/* ----------------------------------------------------
   prev next
   ---------------------------------------------------- */

	#prevNextDiv {
	
		margin-bottom: 10px;
	}
	
/* ----------------------------------------------------
   plan pricing
   ---------------------------------------------------- */

	#pricingDiv {
	
		margin-bottom: 15px;
		padding: 15px;
		border: 3px solid #8CA;
		border-radius: 5px;
		display: none;
		background-color: #EEE;
	}
	
	.planPrice {
	
		margin-top: 10px;
	}
	
	.planPriceButtons {
	
		position: relative;
		float: left;
		top: -3px;
		margin-right: 10px;
	}
	
	.planPricePrice {
	
		float: left;
		text-align: right;
		width: 60px;
		margin-right: 10px;
	}
	
	.planPriceName {
	
		color: #400011;
		font-size: 110%;
		font-weight: 800;
		float: left;
	}
	
	.planPriceDescription {
	
		display: none;
		margin-top: 8px;
		border: 3px solid #B399A0;
		border-radius: 10px;
		background-color: white;
		padding: 20px;
	}
	
	#pricingDivTitle {
	
		color: #400011;
		font-size: 130%;
		font-weight: 800;
		margin-bottom: 20px;
	}
	
/* ----------------------------------------------------
   plan info
   ---------------------------------------------------- */
	
	#planDescription {
	
		display: none;
	}
	
	#moreButton {
	
		position: relative;
		top: 3px;
	}
		
/* ----------------------------------------------------
   images
   ---------------------------------------------------- */
	
	.sunPlansImageDrawingDiv, .sunPlansImageDrawing {  
	
		width: 100%;
		max-width: 600px;
		height: auto;
	}
	
	.sunPlansImagePhotoDiv, .sunPlansImagePhoto {  
	
		width: 100%;
		max-width: 400px;
		height: auto;
	}
	
/*	.sunPlansImageDrawingDiv {  background-color: white;  }   */
	
	.sunPlansImageDrawingDiv, .sunPlansImagePhotoDiv {
	
		margin-bottom: 25px;
	}
	
	.sunPlansImageDrawingDiv img, .sunPlansImagePhotoDiv img {
	
		border: 1px solid #888;
	}
	
	.sunPlansImagePhotoDiv {
	
		float: left;
		max-width: 45%;
		margin-left: 5%;
	}

	/* for narrow screens */
		
	@media screen and (max-width: 650px) {
	
		#house_plans_left_column {

			width: 100%;
			float: none;
			margin-right: 0;
		}

		#house_plans_right_column {
	
			width: 100%;
			float: none;
			margin-right: 0;
		}

		.photo {  float: none;  }
		
		#specs {
		
			float: none !important;
			margin: 0 auto !important;
		}
	}


/* ----------------------------------------------------
   specs
   ---------------------------------------------------- */

	#specs {
	
		float: right;
		width: 225px;
		border: 1px solid #400011;
		background-color: white;
		border-radius: 10px;
	}
	
	#specsTitle {
	
		background-color: #400011;
		color: white;
		text-align: center;
		font-size: 115%;
		padding-top: 2px;
		padding-bottom: 2px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}
	
	#specBody {

		padding: 5px;	
	}
	
	.specLabel {
	
		float: left;
		width: 60%;
		margin-right: 5%;
		text-align: right;
		color: #888;
		font-weight: 400;
	}
	
	.specData {
	
		float: left;
		width: 35%;
		color: #400011;
		font-weight: 800;
	}