@import 'mixins.less';

// Functions
.button() {
	.border_radius(100%);
	height:16px;
	width:16px;
	color: #666 !important;
	.vertical_gradient(#f6f6f6,#e8e8e8);
	border:1px solid #999;
	font-size:14px !important;
	font-family: verdana !important;
	text-shadow:0 1px 0 #fff;
	font-weight: bold !important;
	-webkit-box-shadow:
		inset 0 -1px 0 rgba(0,0,0,0.05),
		inset 0 1px 0 rgba(255,255,255,0.5),
		0 1px 2px rgba(0,0,0,0.075);
	box-shadow:
		inset 0 -1px 0 rgba(0,0,0,0.05),
		inset 0 1px 0 rgba(255,255,255,0.5),
		0 1px 2px rgba(0,0,0,0.075);
	&:hover {
		.vertical_gradient(#fff,#e8e8e8);
		color: #444 !important;
	}
}

// WooCommerce theme
div.pp_woocommerce {
	.pp_content_container {
		background: #fff;
		.border_radius(3px);
		.box_shadow(0,1px,30px,0,rgba(0,0,0,0.25));
		padding:20px 0;
		.clearfix;
	}
	.pp_loaderIcon {
		background: url(../images/ajax-loader.gif) center no-repeat;
	}
	div.ppt {
		color: black;
	}
	.pp_gallery {
		ul {
			li {
				a {
					border:1px solid rgba(0,0,0,0.5);
					background: #fff;
					.box_shadow(0,1px,2px,0,rgba(0,0,0,0.2));
					.border_radius(2px);
					display: block;
					&:hover {
						border-color:#000;
					}
				}
				&.selected {
					a {
						border-color:#000;
					}
				}
			}
		}
	}

	// Next / Previous
	.pp_arrow_previous, .pp_arrow_next, .pp_previous, .pp_next {
		&:before {
			line-height: 1.15;
		}
	}
	.pp_previous, .pp_next {
		&:before {
			.button;
			content: "\2039";
			text-indent: 0;
			display: none;
			position: absolute;
			top:50%;
			margin-top:-10px;
			text-align: center;
		}
		&:hover {
			&:before {
				display: block;
			}
		}
	}
	.pp_previous {
		&:before {
			left:1em;
		}
	}
	.pp_next {
		&:before {
			right:1em;
			content: "\203a";
		}
	}

	.pp_details {
		margin:0;
		padding-top:1em;
	}
	.pp_nav, .pp_description {
		font-size:14px;
	}
	.pp_nav, .pp_nav p, .pp_play, .pp_nav .pp_pause, .pp_arrow_previous, .pp_arrow_next {
		margin:0;
	}

	// Navigation
	.pp_nav {
		margin-right:1em;
		position: relative;
	}
	.pp_close {
		.button;
		width:21px;
		height:21px;
		top:-10px;
		right:-10px;
		&:before {
			content:"\00d7";
			display: block;
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			text-align: center;
			text-indent: 0;
			line-height: 1.45;
		}
	}
	// Buttons
	.pp_arrow_previous, .pp_arrow_next {
		.button;
		position: relative;
		margin-top:-1px;
		&:before {
			content:"\2039";
			display: block;
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			text-align: center;
			text-indent: 0;
		}
	}
	.pp_arrow_previous {
		margin-right:.5em;
	}
	.pp_arrow_next {
		margin-left:.5em;
		&:before {
			content: "\203a";
		}
	}
	a.pp_expand, a.pp_contract {
		.button;
		right:auto;
		left:-10px;
		top:-10px;
		height:21px;
		width:21px;
		&:before {
			content:"\2295";
			display: block;
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			text-align: center;
			text-indent: 0;
			line-height:0.9 !important;
			font-size:19px !important;
		}
	}
	a.pp_contract {
		&:before {
			content: "\2297";
		}
	}
	#respond {
		margin:0;
		width:100%;
		background: none;
		border:none;
		padding:0;
		.form-submit {
			margin-top:0;
			float:none;
		}
	}
	.pp_inline {
		padding:0!important;
	}
}

@media only screen and (max-width: 480px) {
	div.pp_woocommerce {
		left: 5% !important;
		right:5% !important;
		.borderbox;
		width: 90% !important;
		.pp_gallery, .pp_previous, .pp_next, .pp_expand, .pp_contract {
			display: none !important;
		}
		.pp_arrow_previous, .pp_arrow_next, .pp_close {
			height:44px;
			width:44px;
			&:before {
				font-size:2em;
			}
		}
		.pp_arrow_previous, .pp_arrow_next {
			&:before {
				line-height: 1.45;
			}
		}
		.pp_description {
			display: none !important;
		}
		.pp_details {
			width:100% !important;
		}
	}
	.pp_content {
		width:100% !important;
		img {
			width:100% !important;
			height:auto !important;
		}
	}
	.currentTextHolder {
		line-height: 3;
	}
}
/* ------------------------------------------------------------------------
	DO NOT CHANGE
------------------------------------------------------------------------- */

	div.pp_pic_holder a:focus { outline:none; }

	div.pp_overlay {
		background: #000;
		display: none;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9999;
	}

	div.pp_pic_holder {
		display: none;
		position: absolute;
		width: 100px;
		z-index: 10000;
	}


		.pp_top {
			height: 20px;
			position: relative;
		}
			* html .pp_top { padding: 0 20px; }

			.pp_top .pp_left {
				height: 20px;
				left: 0;
				position: absolute;
				width: 20px;
			}
			.pp_top .pp_middle {
				height: 20px;
				left: 20px;
				position: absolute;
				right: 20px;
			}
				* html .pp_top .pp_middle {
					left: 0;
					position: static;
				}

			.pp_top .pp_right {
				height: 20px;
				left: auto;
				position: absolute;
				right: 0;
				top: 0;
				width: 20px;
			}

		.pp_content { height: 40px; min-width: 40px; }
		* html .pp_content { width: 40px; }

		.pp_fade { display: none; }

		.pp_content_container {
			position: relative;
			text-align: left;
			width: 100%;
		}

			.pp_content_container .pp_left { padding-left: 20px; }
			.pp_content_container .pp_right { padding-right: 20px; }

			.pp_content_container .pp_details {
				float: left;
				margin: 10px 0 2px 0;
			}
				.pp_description {
					display: none;
					margin: 0;
				}

				.pp_social { float: left; margin: 0; }
				.pp_social .facebook { float: left; margin-left: 5px; width: 55px; overflow: hidden; }
				.pp_social .twitter { float: left; }

				.pp_nav {
					clear: right;
					float: left;
					margin: 3px 10px 0 0;
				}

					.pp_nav p {
						float: left;
						margin: 2px 4px;
						white-space: nowrap;
					}

					.pp_nav .pp_play,
					.pp_nav .pp_pause {
						float: left;
						margin-right: 4px;
						text-indent: -10000px;
					}

					a.pp_arrow_previous,
					a.pp_arrow_next {
						display: block;
						float: left;
						height: 15px;
						margin-top: 3px;
						overflow: hidden;
						text-indent: -10000px;
						width: 14px;
					}

		.pp_hoverContainer {
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 2000;
		}

		.pp_gallery {
			display: none;
			left: 50%;
			margin-top: -50px;
			position: absolute;
			z-index: 10000;
		}

			.pp_gallery div {
				float: left;
				overflow: hidden;
				position: relative;
			}

			.pp_gallery ul {
				float: left;
				height: 35px;
				margin: 0 0 0 5px;
				padding: 0;
				position: relative;
				white-space: nowrap;
			}

			.pp_gallery ul a {
				border: 1px #000 solid;
				border: 1px rgba(0,0,0,0.5) solid;
				display: block;
				float: left;
				height: 33px;
				overflow: hidden;
			}

			.pp_gallery ul a:hover,
			.pp_gallery li.selected a { border-color: #fff; }

			.pp_gallery ul a img { border: 0; }

			.pp_gallery li {
				display: block;
				float: left;
				margin: 0 5px 0 0;
				padding: 0;
			}

			.pp_gallery li.default a {
				display: block;
				height: 33px;
				width: 50px;
			}

			.pp_gallery li.default a img { display: none; }

			.pp_gallery .pp_arrow_previous,
			.pp_gallery .pp_arrow_next {
				margin-top: 7px !important;
			}

		a.pp_next {
			display: block;
			float: right;
			height: 100%;
			text-indent: -10000px;
			width: 49%;
		}

		a.pp_previous {
			display: block;
			float: left;
			height: 100%;
			text-indent: -10000px;
			width: 49%;
		}

		a.pp_expand,
		a.pp_contract {
			cursor: pointer;
			display: none;
			height: 20px;
			position: absolute;
			right: 30px;
			text-indent: -10000px;
			top: 10px;
			width: 20px;
			z-index: 20000;
		}

		a.pp_close {
			position: absolute; right: 0; top: 0;
			display: block;
			line-height:22px;
			text-indent: -10000px;
		}

		.pp_bottom {
			height: 20px;
			position: relative;
		}
			* html .pp_bottom { padding: 0 20px; }

			.pp_bottom .pp_left {
				height: 20px;
				left: 0;
				position: absolute;
				width: 20px;
			}
			.pp_bottom .pp_middle {
				height: 20px;
				left: 20px;
				position: absolute;
				right: 20px;
			}
				* html .pp_bottom .pp_middle {
					left: 0;
					position: static;
				}

			.pp_bottom .pp_right {
				height: 20px;
				left: auto;
				position: absolute;
				right: 0;
				top: 0;
				width: 20px;
			}

		.pp_loaderIcon {
			display: block;
			height: 24px;
			left: 50%;
			margin: -12px 0 0 -12px;
			position: absolute;
			top: 50%;
			width: 24px;
		}

			#pp_full_res .pp_inline {
				text-align: left;
			}

		div.ppt {
			color: #fff;
			display: none;
			font-size: 17px;
			margin: 0 0 5px 15px;
			z-index: 9999;
		}