@import "../../less/mixins";

/* Header colors */
@header_color: #65707f;
@featured_header_color: lighten(#65707f, 5%);

/* Button colors */
@button_color: #41a9d5;
@button_text_color: #FFFFFF;
@featured_button_color: lighten(#41a9d5, 5%);
@featured_button_text_color: #FFFFFF;

.ow-pt-columns-flat {
	.clearfix();
	padding-top: 20px;

	.ow-pt-column {
		float: left;
		.ow-pt-title {
			
			background: @header_color;
			padding: 20px 0;
			text-align: center;
			color: #FFFFFF;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
			border: 1px solid darken(@header_color, 20%);
			border-bottom: 0;
			.border-radius(5px, 0, 0, 5px);
			.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.5)");
			font-size: 1.1em;

			.ow-pt-subtitle {
				font-size: 0.9em;
				color: #F0F0F0;
			}
		}

		.ow-pt-details {
			background: lighten(@header_color, 10%);
			position: relative;
			padding: 15px 25px;

			border-width: 1px;
			border-style: solid;
			border-color: darken(@header_color, 2%);
			border-top-color: darken(@header_color, 20%);
			border-right-width: 0;

			.box-shadow(~"inset 0px -15px 25px rgba(0,0,0,0.05)");

			text-align: center;

			.ow-pt-price {
				color: #FFFFFF;
				font-size: 2.5em;
				line-height: 1.25em;
				font-weight: 300;
				text-shadow: 0 1px 1px rgba(0,0,0,0.25);
			}

			.ow-pt-per {
				color: #fff;
			}
		}

		.ow-pt-image {
			line-height: 0;

			img {
				display: block;
				max-width: 100%;
				height: auto;
				.rounded(0);
			}
		}

		.ow-pt-features {
			font-size: 0.925em;
			color: #5f6062;

			.ow-pt-feature {
				padding: 15px 20px;
				background: #ffffff;


				&.ow-pt-feature-odd {
					background #eeeeee;
				}

				text-shadow: 0 1px 0 #FFFFFF;

				strong {
					font-weight: 500;
				}

				p {
					margin: 0;
				  	display: inline-block;
				}

				[class^="sow-icon-"] {
					display: inline-block;
					margin-right: 0.5em;
				}

				&:last-child {
					border-bottom-width: 0;
				}
			}
		}

		&.ow-pt-even {

			.ow-pt-features .ow-pt-feature {
				background: #f9f9f9;

				&.ow-pt-feature-odd {
					background: #eee;
				}
			}

		}

		&.ow-pt-last {
			.ow-pt-details {
				border-right-width: 1px;
			}

			.ow-pt-features .ow-pt-feature {
				border-right-width: 1px;
			}
		}

		.ow-pt-button {

			display: block;
			padding: 15px;
			text-align: center;

			background: e8e8e8;

			border-top: 1px solid #E0E0E0;
			border-bottom: 1px solid #cfcfcf;

			a.ow-pt-link {
				display: inline-block;
				.rounded(3px);
				font-size: 0.9em;
				padding: 0.675em 1.25em;
				text-decoration: none;
				color: @button_text_color;
				background: @button_color;
				border: 1px solid darken(@button_color, 20%);
				.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)");
				text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
				margin: 0;

				&:hover {
					@button_color_hover: lighten(@button_color, 3%);
					background: @button_color_hover;
					border: 1px solid darken(@button_color_hover, 20%);
				}
			}

		}

		&.ow-pt-featured {
			margin-top: -20px;
			.ow-pt-title {
				padding: 30px 0;
				border-color: darken(@featured_header_color, 20%);
				background: @featured_header_color;
			}

			.ow-pt-details {
				border-color: darken(@featured_header_color, 2%);
				border-top-color: darken(@featured_header_color, 20%);
				background: lighten(@featured_header_color, 10%)
			}

			.ow-pt-button a.ow-pt-link {
				color: @featured_button_text_color;
				background: @featured_button_color;
				border: 1px solid darken(@featured_button_color, 20%);

				&:hover {
					@featured_button_color_hover: lighten(@featured_button_color, 3%);
					background: @featured_button_color_hover;
					border: 1px solid darken(@featured_button_color_hover, 20%);
				}
			}
		}
	}
}

@media (max-width:680px) {
	.ow-pt-columns-flat {

		padding-top: 0;

		.ow-pt-column {
			float: none;
			width: auto !important;
			margin-bottom: 20px;

			&.ow-pt-featured {
				margin-top: 0;
			}

			.ow-pt-details {
				border-right-width: 1px;
			}

			.ow-pt-features {
				.ow-pt-feature {
					border-width: 0 1px 1px 1px;
				}
			}
		}
	}
}