@import "reset";
@import "isotope";
@base-url: "http://kissmeimpolish.com/wp-content/themes/kmip/";


.times { font-family: "Times New Roman", Times, serif; }
.helvetica { font-family: Helvetica, Arial, sans-serif; }
.arial { font-family: Arial, Helvetica, sans-serif; }


@gut: 30px;

.column (@n, @gut) {
	float: left;
	width: @n;
	margin-left: @gut;
	&:first-child { margin-left: 0; }
}

.pt(@pt) { padding-top: @pt; }
.mt(@mt) { margin-top: @mt; }
.pb(@pb) { padding-bottom: @pb; }
.mb(@mb) { margin-bottom: @mb; }


@red: #BF0006;
@light_red: #E5181E;
@dark_red: #660000;

@blue: #343449;
@light_blue: #27509D;

@green: #D5DBCC;
@cream: #FEFDF3;


.replace () { display: block; > span { display: none; } }

.clearfix () {
	&:before { content: ""; display: table; }
	&:after  { content: ""; display: table; clear: both; }
	zoom: 1;
}


html, body, .wrap { height: 100%; }

body { 
	.helvetica;
	letter-spacing: 0.6px;
	background: @green;
	text-rendering: optimizeLegibility;
}

.wrap { width: 980px; height: auto; min-height: 100%; margin: 0 auto; }

.wrap > .content { padding: 28px 0 250px; .clearfix; }


a { 
	cursor: pointer;
	text-decoration: none;
	outline: none;
	color: @red;
	&:hover { color: @dark_red; }
}

em, i, .italic { font-style: italic; }

b, strong, .bold { font-weight: bold; letter-spacing: 0; }

.uppercase { text-transform: uppercase; }

.center { text-align: center; }

.title { line-height: 1em; }

.thin-border (@color) { border-bottom: 1px solid @color; }
.thick-border (@color) { border-bottom: 3px solid @color; }
.dotted-border (@color) { border: 1px dotted @color; }

.arrow {
	display: block;
	.bold;
	line-height: 11px;
	padding-left: 10px; 
	background-image: url("@{base-url}/images/arrow-green.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	color: @red;
	&.read-more {
		display: inline-block;
		padding-left: 0;
		padding-right: 10px;
		background-position: right 0;
		&:hover { background-position: right -240px; }
	}
	&:hover { background-position: 0 -240px; color: @dark_red; }
}

.asterisk { padding-right: 9px; background: url("@{base-url}/images/asterisk.png") no-repeat top right; }

.thumb (@p) { padding: @p; border: 1px dotted @light_blue; }


.big-title { 
	.italic; .title; .times;
	font-size: 68px;
	letter-spacing: -3px;
	color: @light_red;
	margin: -12px 0 30px;
}
.small-title { .bold; .title; font-size: 18px; }
.x-small-title { .bold; .italic; .title; }

.big-text { font-size: 19px; line-height: 30px; color: @light_blue; }
.small-text { .arial; font-size: 11px; line-height: 20px; }
.x-small-text { .arial; font-size: 10px; line-height: 16px; }


.wwd { 
	.italic;
	.small-text;
	.pt(@gut);
	h3 { 
		.x-small-title;
		.thin-border(@light_blue);
		width: 502px;
		.pb(5px);
		.mb(5px);
		padding-left: 2px; margin-left: -2px;
	}
	ul li { list-style: disc; list-style-position: inside; }
}



header.main { position: relative; height: 42px; .mb(28px);
	> h1, > ul, > ul li { float: left; }
	> ul li {
		.mt(14px);
		margin-left: 36px;
		&:first-child { margin-left: 50px; }
		a { display: block; height: 8px; text-indent: -9999px; background: no-repeat 0 0;
			&.our-work { width: 74px; background-image: url("@{base-url}/images/nav_our-work.png"); }
			&.news-and-press { width: 96px; background-image: url("@{base-url}/images/nav_news-and-press.png"); }
			&.who-we-are { width: 89px; background-image: url("@{base-url}/images/nav_who-we-are.png"); }
			&.notes { width: 42px; background-image: url("@{base-url}/images/nav_notes.png"); }
			&:hover, &.current { background-position: 0 -8px; }
		}
	}
	.top-corner { position: absolute; top: -28px; right: 0; }
}


.paper { 
	position: relative;
	float: left;
	width: 815px;
	.paper-top { position: relative; height: 42px; background: url("@{base-url}/images/paper_top.png") 0 0 no-repeat; }
	.paper-body { 
		.clearfix;
		position: relative;
		background: url("@{base-url}/images/paper_body.png") 0 0 repeat-y;
		padding: 0 44px 0 41px;
		color: @light_blue;
		> h2 { .big-title; }
		.callout { .big-text; }
		&.has-pattern { padding-bottom: 180px; }
	}
	.paper-bottom { height: 66px; background: url("@{base-url}/images/paper_bottom.png") 0 0 no-repeat; color: @blue; }
	&.full { 
		width: 980px;
		margin-right: 0;
		.paper-top { background: url("@{base-url}/images/paper_top_full.png") 0 0 no-repeat; }
		.paper-body { background: url("@{base-url}/images/paper_body_full.png") 0 0 repeat-y; }
		.paper-bottom { background: url("@{base-url}/images/paper_bottom_full.png") 0 0 no-repeat; }
	}
	a { 
		color: @light_red;
		&:hover { color: @dark_red; }
		&.arrow {
			background-image: url("@{base-url}/images/arrow-cream.png");
		}
	}
	.lined {
		a {
			color: @light_blue;
			&:hover { color: @blue; }
			&.arrow { 
				color: @light_red;
				&:hover { color: @dark_red; }
			}
		}
	}
	.bottom-pattern { 
		z-index: 10;
		position: relative;
		margin: -180px 0 0 1px;
		height: 180px;
		img { display: block; }
	}
}

.big-graphic { position: absolute; top: 1px; right: 4px; width: 433px; height: 428px; vertical-align: middle; .center; }

.intro { 
	width: 500px;
	> h2 { .big-title; }
	.wwd {
		.x-small-text;
		.pb(20px);
		margin-right: @gut;
		h3 { .uppercase; }
	}
}

.cols {
	float: left;
	.mt(@gut);
	.small-text;
	color: @blue;
	> div { 
		.column(305px, @gut);
		h4 { .center; .uppercase; .small-title; .thick-border(@blue); font-size: 18px; .pb(10px); }
		.slideshow { 
			.mt(10px);
			width: 303px;
			height: 193px;
			.dotted-border(@blue);
			img { display: block; padding: 4px; width: 295px; height: 185px; }
			overflow: hidden;
		}
		&.joke {
			.small-text;
			height: 235px;
			.thin-border(@blue);
			div { 
				.italic;
				padding: 14px 14px 0;
				b { color: @red; }
				p {
					.mt(14px);
					&:first-child { .mt(0); }
				}
			}
		}
	}
}

.lined {
	.small-text;
	color: @blue;
	a {
		color: @blue;
		&:hover { color: @dark_red; }
		&.arrow {
			color: @red;
			&:hover { color: @dark_red; }
		}
	}
	&.recent-news, &.comments { 
		width: 100%;
		td {
			padding: 15px 0;
			&.date { 
				.italic;
				.pt(1px);
				width: 60px;
				vertical-align: top; 
				background: url("@{base-url}/images/lined-right_border.png") repeat-y top right;
			}
			&.title { line-height: 10px; }
			&.solid { border-bottom: 1px solid @blue; }
		}
		tr:first-child td { border-top: none; }
	}
	&.recent-news {
		td {
			border-top: 1px dotted @blue;
			&.title { padding-left: 8px; }
		}
	}
	&.feat-projects {
		.mt(40px);
		width: 151px;
		float: right;
		.italic;
		.x-small-text;
		td { 
			height: 36px;
			.pt(5px);
			border-top: 1px dotted @blue;
			vertical-align: top;
			&.solid { .bold; .small-text; border-top: 1px solid @blue; font-style: normal; vertical-align: middle; .pt(0); }
			&.current { 
				a { color: @red; }
			}
		}
		tr:first-child td { .center; .uppercase; border-top: 3px solid @blue; border-bottom: 1px solid @blue; }
	}
	&.comments {
		color: @light_blue;
		font-style: normal;
		td { border-top: 1px dotted @light_blue;
			&.date { font-style: normal; }
			&.comment { 
				font-style: italic;
				padding-left: 15px;
			}
			&.solid.title { .italic; .bold; border-bottom: 2px solid @light_blue; }
			&.solid { border-bottom: 1px solid @light_blue; }
		}
		tr:first-child td { line-height: 10px; }
	}
}

.links {
	.small-text;
	li { 
		.mt(10px);
		&:first-child { .mt(0); }
	}
	a { 
		.arrow;
		background-image: url("@{base-url}/images/arrow-cream.png");
		background-position: 0 2px;
		color: @light_red;
		font-weight: normal;
		line-height: 16px;
		letter-spacing: 0.6px;
		&:hover { background-position: 0 -238px; }
	}
}

.testimonial {
	padding-left: 10px;
	margin-left: -10px;
	background: url("@{base-url}/images/testimonial.png") no-repeat 0 6px;
	p {
		.mt(@gut/2);
		.small-text;
		&:first-child { .mt(0); .big-text; }
	}
}

.slideshow { 
	width: 730px;
	.rotator img { .thumb(5px); }
	.controls {
		min-height: 16px;
		.small-text;
		.mt(10px);
		text-align: right;
		span { 
			display: inline-block;
			height: 11px;
			line-height: 11px;
			margin-left: @gut;
			&:first-child { margin-left: 0; }
			&.prev, &.next { 
				color: @light_red;
				cursor: pointer;
				padding-left: 14px;
				background-position: 0 1px;
				background-repeat: no-repeat;
				&:hover { color: @dark_red; background-position: 0 -10px; }
			}
			&.prev { background-image: url("@{base-url}/images/box-arrow_left.png"); }
			&.next { background-image: url("@{base-url}/images/box-arrow_right.png"); }
		}
	}
	&.vertical { width: 440px; float: right; margin: 0 0 20px 20px; }
}


.sort { 
	position: absolute;
	right: 46px;
	width: 230px;
	.small-text;
	&.work {
		top: 24px;
		.order, .views { .center; padding: 5px 0; }
		.order a { 
			.italic;
			padding: 0 10px;
			&:hover { background-position: 0px -14px; }
		}
		.views { 
			.pt(0);
			border-bottom: 1px dotted @light_blue;
			a { 
				padding-left: 20px;
				background-repeat: no-repeat;
				background-position: 0px 0px;
				&.collage { margin: 0 20px 0 5px; background-image: url("@{base-url}/images/collage-view.png"); }
				&.grid { margin: 0 5px 0 20px; background-image: url("@{base-url}/images/grid-view.png"); }
				&:hover { background-position: 0px -14px; }
			}
		}
	}
	&.work.collage {
		.views a {
			&.collage {
				color: @light_blue;
				background-image: url("@{base-url}/images/collage-view-current.png");
				&:hover { color: @blue; }
			}
		}
	}
	&.work.grid {
		.views a { 
			&.grid { 
				color: @light_blue;
				background-image: url("@{base-url}/images/grid-view-current.png");
				&:hover { color: @blue; }
			} 
		}
	}
	&.category {
		width: 165px;
		padding: 0 10px 10px;
		top: 10px;
		background: @cream;
		.dropbox {
			display: block;
			float: right;
			.mt(6px);
			width: 9px;
			height: 9px;
			background: url("@{base-url}/images/box-arrow_bottom.png") no-repeat 0 0;
		}
		ul { display: none; border: 1px solid @light_blue; padding: 0 10px; }
		h3, li { .pt(5px); .pb(5px); }
		h3 {
			border-bottom: 1px dotted @light_blue; 
			&.hovered { border-bottom: none; }
		}
		li {
			border-top: 1px dotted @light_blue; 
			&:first-child { border-top: none; }
		}
		.view { display: inline-block; width: @gut+2; }
		.current, a { color: @light_red; }
		a { margin-left: (@gut/2)+4; }
		&:hover { 
			cursor: pointer;
			.dropbox { background-position: 0 -11px; }
		}
	}
	a {
		&.selected { 
			color: @light_blue;
			&:hover { color: @blue; }
		}
		&:hover { color: @dark_red; }
	}
}

.collage { 
	table { margin: -26px 0 0 -40px; }
	img { display: block; }
	.wwd {
		.mt(@gut);
		h3 { .uppercase; }
	}
}

#tooltip {
	z-index: 999;
	position: absolute;
	padding: 1.8em 2.3em 0.3em 1.4em;
	color: #333;
	display: none;
	background: transparent url("@{base-url}/images/tooltip.png") no-repeat -8px -8px;
	width: 115px;
	height: 105px;
	font-style: italic;
	font-size: 10px;
	line-height: 14px;
}

.post {
	.clearfix;
	.small-text;
	.pt(@gut);
	.pb(@gut);
	.wwd {
		.pt(0);
		h3, .info { float: left; }
		h3 { width: 440px; }
		.info { .mt(-24px); margin-left: 15px; }
	}
	.wp-post-image, .content { float: left; .mt(-6px); }
	.wp-post-image { .thumb(5px); }
	.content {
		margin: 0 @gut 0 20px;
		width: 358px;
		h2 { .pb(12px); .uppercase; .small-title; a { color: @light_blue; &:hover { color: @light_red; } } }
		p { .mt(@gut/2); &:first-child{ .mt(0); } }
		ul { .mt(@gut/2+10); }
		&.no-thumb { 
			width: auto;
			margin: 0 @gut*2 0 0;
		}
	}
	&.work {
		float: left;
		width: 220px;
		.mt(10px);
		.pt(0);
		margin-left: @gut;
		h3 { .bold; .uppercase; }
		.desc { line-height: 15px; }
		img { .thumb(3px); }
		h3, .desc { margin-left: 4px; }
		a { 
			color: @light_blue;
			&:hover { color: @light_red; }
		}
		&:first-child { .mt(10px); }
	}
	&.notes {
		.wwd {
			.date { 
				.mb(@gut);
				float: none;
				width: auto;
			}
			h3 { 
				span {
					font-weight: normal;
				}
			}
		}
		&.single {
			.content { margin: 0 0 0 @gut*2; }
			> img, .content { .mt(0); }
			> div {
				float: left; 
				&:first-child { width: 300px; }
				&:last-child { width: 362px; }
			}
			> img { float: none; padding: 0; border: none; }
			.content p:first-child img { .pb(15px); }
			.buttons { 
				.mb(@gut/2);
				text-align: right;
			}
			a {
				&.button { 
					display: inline-block;
					margin-left: 10px;
					background-repeat: no-repeat;
					background-position: 0 0;
					&:last-child { margin-left: 20px; }
				}
				&.twitter {
					width: 11px;
					height: 15px;
					background-image: url("@{base-url}/images/button-twitter.png");
					&:hover { background-position-y: -15px; }
				}
				&.facebook {
					width: 9px;
					height: 14px;
					background-image: url("@{base-url}/images/button-facebook.png");
					&:hover { background-position-y: -14px; }
				}
				&.mail {
					width: 18px;
					height: 13px;
					background-image: url("@{base-url}/images/button-mail.png");
					&:hover { background-position-y: -13px; }
				}
				&.comment {
					position: relative;
					width: 20px;
					height: 20px;
					.mb(-5px);
					background-image: url("@{base-url}/images/button-comment.png");
					text-align: center;
					color: @cream;
					span { 
						display: block; 
						position: absolute;
						top: 0;
						left: 0;
						width: 20px;
						height: 16px;
						line-height: 16px;
						text-align: center;
					}
					&:hover { background-position: 0 -20px; }
				}
			}
			#comments { 
				.pt(@gut*2);
				div:first-child { .mt(0); }
			}
			.addcomment {
				.mt(@gut*2);
				.wwd { 
					h3 { width: 300px; float: none; }
				}
				form > div { 
					z-index: 999;
					position: relative;
					margin-left: -2px;
				}
				input, textarea {
					display: block;
					width: 290px;
					padding: 5px;
					.mt(5px);
					border: 1px dotted @light_blue;
					background: none;
					.italic;
					color: #A0A1A7;
				}
				input { 
					&:first-child { .mt(9px); }
					&#submit {
						float: right;
						border: none !important;
						width: auto;
						padding: 0;
						margin: 9px 0 0;
						.bold;
						.uppercase;
						font-style: normal;
						.arrow;
						color: @light_red;
						background-image: url("@{base-url}/images/arrow-cream.png");
						background-position: 1px 1px;
						&:hover {
							background-position: 1px -239px;
						}
					}
				}
				textarea { height: 60px; background: @cream; }
			}
		}
	}
	&:first-child { .pt(0); }
	&.project {
		.pt(0);
		.content {
			margin: -12px 0 0 0;
			width: 540px;
			ul { 
				.mt(@gut);
				list-style: disc inside;
				&.links { list-style: none; }
			}
		}
		.testimonial { float: left; width: 540px; .mt(@gut*2); }
		&.vertical { 
			.mt(20px);
			.content { .mt(0); float: none; width: auto; }
		}
	}
}

.work.posts { margin-left: -@gut; }

.sidebar { position: absolute; top: 40px; }


.wwa {
	.content { 
		.mt(@gut);
		.small-text;
		width: 595px;
		p { 
			.mt(@gut/2);
			&:first-child { .mt(0); }
		}
	}
	.links { .mt(22px); }
	.wwd {
		.clearfix;
		.mt(@gut);
		h3 { width: 100%; }
		ul {
			font-style: normal;
			.mt(12px);
			.column(305px, @gut);
		}
	}
	.services {
		.mt(@gut*3);
		.mb(@gut);
		.clearfix;
		> div { .column(350px, @gut); }
		.wwd {
			.mt(0);
			.pt(0);
			h3 { .mb(0); border-bottom: 2px solid @light_blue; }
			.lined {
				color: @light_blue;
				font-style: normal;
				td { border-color: @light_blue; }
			}
			img { .mt(24px); }
		}
	}
}


.client-list {
	> div { .clearfix; }
	.wwd { 
		font-style: normal;
		.mt(0);
		.pt(0);
		.pb(@gut*2);
		.column(305px, 40px);
		h3 { width: 100%; }
		ul { .pt(10px); }
	}
}


.wp-pagenavi {
	position: relative;
	margin-top: @gut*2;
	height: 28px;
	border-top: 3px solid @light_blue;
	border-bottom: 1px dotted @light_blue;
	.center;
	.previouspostslink,
	.nextpostslink { 
		position: absolute;
		top: 0;
		width: 125px;
		height: 28px;
		background-repeat: no-repeat;
		text-indent: -9999px;
	}
	.previouspostslink { left: 0; background-image: url("@{base-url}/images/paginate_previous.png"); }
	.nextpostslink { right: 0; background-image: url("@{base-url}/images/paginate_next.png"); }
	.page, .current { 
		display: inline-block; 
		text-align: center; 
		width: 28px; 
		border-left: 1px solid @light_blue;
		border-right: 1px solid @light_blue; 
		line-height: 28px;
		margin-left: -1px;
	}
	.current { color: @light_blue; }
}


footer.main {
	.center;
	.small-text;
	.mt(-250px);
	.pt(40px);
	color: @blue;
	height: 210px;
	p { 
		.mt(1.25em);
		&:first-child { .mt(0); }
	}
	a.email { 
		color: @blue;
		&:hover { color: @red; }
	}
}