lubuntu.me/plugins/so-widgets-bundle/widgets/price-table/styles/atom.less

@import "../../../base/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-atom {
	.clearfix();
	padding-top: 20px;

	.ow-pt-column {
		float: left;

		.ow-pt-title {
			.gradient(@header_color, darken(@header_color, 10%), @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 {
			.gradient(lighten(@header_color, 5%), lighten(@header_color, 1%), lighten(@header_color, 5%));
			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: lighten(@header_color, 50%);
			}
		}

		.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;

				.sow-feature-icon {
					display: table-cell;
					vertical-align: middle;
					padding-right: 10px;
				}

				.sow-feature-icon + .sow-feature-text {
					display: table-cell;
					vertical-align: middle;
				}

				.gradient(#FFFFFF, #fcfcfc, #FFFFFF);

				&.ow-pt-feature-odd {
					.gradient(#f1f1f1, #eeeeee, #f1f1f1);
				}

				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 {
				.gradient(#f9f9f9, #f6f6f6, #f9f9f9);

				&.ow-pt-feature-odd {
					.gradient(#eeeeee, #ebebeb, #eeeeee);
				}
			}

		}

		&.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;

			.gradient(#e8e8e8, #dadada, #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;
				.gradient(@button_color, darken(@button_color, 10%), @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%);
					.gradient(@button_color_hover, darken(@button_color_hover, 10%), @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%);
				.gradient(@featured_header_color, darken(@featured_header_color, 10%), @featured_header_color);
			}

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

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

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

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

		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;
				}
			}
		}
	}
}