/* THIS FILE MAKES PEARHAVEN BEAUTIFUL  */

/* HERE ARE SOME GLOBAL THINGS */
html {
	background: #edeee0 url('/visuals/neimg/bkg.jpg') 0 0 repeat;
	font: 82.5%/1.5 'Helvetica', sans-serif;
	color: #5e5e5e;
}

.contained {
	width: 960px;
	margin: 0 auto;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

br.clear {
	clear: both;
	height: 0;
	display: block;
}

/* This fixes things in Firefox */
header, section, footer, aside, nav { display: block; }

.header-bar {
	border: 1px solid #98aa3a;
	background-color: #cfe075; 
	.gradient(#cfe075, #bacd54);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
	
	color: #697625;
	padding: 0.32em 0;
	text-align: center;
	.font-arvo(1.22em);
	.letterpress();
}

.light-button {
	border: 1px solid #d0da9c;
	border-radius: 4px;
	background-color: #f6fbd2;
	.gradient(#f6fbd2, #e9f5aa);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
	color: #a0ad64;
	
	&:hover {
		background-color: #e9f5aa;
		.gradient(#e9f5aa, #f6fbd2);
		text-decoration: none;
		color: #76804a;
		cursor: pointer;
	}
	
	&.selected {
		background-color: #d6e784;
		.gradient(#d6e784, #c0d460);
		color: #6b7b1f;
	}
}

.closeable-notification {
	position: relative;
	padding: 0.2em 0.65em;
	
	.x-out {
		position: absolute;
		right: 5px;
		font-weight: bold;
		
		&:hover { text-decoration: none; }
	}
}

a {
	color: #fda24f;
	&:hover { text-decoration: underline; }
}

/* FORMS */
.default-field {
	outline: none;
	border: 1px solid #ddd;
	padding: 6px;
	font: 1em 'Helvetica', sans-serif;
	color: #5e5e5e;
	background-color: #fff;
	
	&:focus {
		outline: 2px solid #ecf2b0;
		border-color: #ecf2b0;
		color: #111;
	}
}

/* HERE ARE SOME STYLISH MIXINS */
.border-radius(@size: 7px) {
	-webkit-border-radius: @size;
	-moz-border-radius: @size;
	-o-border-radius: @size;
	border-radius: @size;
}

.gradient(@color1, @color2) {
	background: @color1;
	background: -webkit-gradient(linear, center top, center bottom, from(@color1), to(@color2));
	background: -webkit-linear-gradient(top, @color1, @color2);
	background: -moz-linear-gradient(top, @color1, @color2);
	background: -o-linear-gradient(top, @color1, @color2);
	background: -ms-linear-gradient(top, @color1, @color2);
	background: linear-gradient(top, #e9f5aa, #f6fbd2);
}

.transition {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.box-shadow(@opacity:0.25) {
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,@opacity);
	-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,@opacity);
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,@opacity);
}

/* COLORS */
@secondary-green: #e9f5aa;

/* HERE ARE SOME TYPOGRAPHY THINGS */
.font-template(@family: 'Arvo', @size: 1em, @weight: 400) { font: @size @family, sans-serif; font-weight: @weight; }
.font-arvo(@size) { .font-template('Arvo', @size, 400); }
.font-arvobold(@size) { .font-template('Arvo', @size, 700); }

.letterpress() { text-shadow: 1px 1px 0px rgba(255,255,255,0.7); }

/* THESE ARE GLOBAL FORMATTING MODULES */
.icon_default         { background-image: url('/visuals/categoryIcons/icon_default.png'); }
.icon_entertainment     { background-image: url('/visuals/categoryIcons/icon_entertainment.png'); }
.icon_food-and-drink    { background-image: url('/visuals/categoryIcons/icon_food-and-drink.png'); }
.icon_landmark        { background-image: url('/visuals/categoryIcons/icon_landmark.png'); }
.icon_music         { background-image: url('/visuals/categoryIcons/icon_music.png'); }
.icon_physical-feature    { background-image: url('/visuals/categoryIcons/icon_physical-feature.png'); }
.icon_shopping        { background-image: url('/visuals/categoryIcons/icon_shopping.png'); }
.icon_sports-and-exercise   { background-image: url('/visuals/categoryIcons/icon_sports-and-exercise.png'); }
.icon_travel        { background-image: url('/visuals/categoryIcons/icon_travel.png'); }

/* Factual Categories   These commented out items should be added when the icon is available.
.icon_automotive  { background-image: url('/visuals/categoryIcons/icon_automotive.png'); }
.icon_business-and-professional-services  { background-image: url('/visuals/categoryIcons/icon_business-and-professional-services.png'); }
.icon_education   { background-image: url('/visuals/categoryIcons/icon_education.png'); }
.icon_health-and-medicine { background-image: url('/visuals/categoryIcons/icon_health-and-medicine.png'); }
.icon_legal-and-financial { background-image: url('/visuals/categoryIcons/icon_legal-and-financial.png'); }
.icon_personal-care-and-services  { background-image: url('/visuals/categoryIcons/icon_personal-care-and-services.png'); }
.icon_real-estate-and-home-improvement  { background-image: url('/visuals/categoryIcons/icon_real-estate-and-home-improvement.png'); } 
 */ 
 
.icon_arts-entertainment-and-nightlife  { background-image: url('/visuals/categoryIcons/icon_arts-entertainment-and-nightlife.png'); }
.icon_community-and-government { background-image: url('/visuals/categoryIcons/icon_community-and-government.png'); }
.icon_food-and-beverage   { background-image: url('/visuals/categoryIcons/icon_food-and-beverage.png'); }
.icon_shopping        { background-image: url('/visuals/categoryIcons/icon_shopping.png'); }
.icon_sports-and-recreation   { background-image: url('/visuals/categoryIcons/icon_sports-and-recreation.png'); }
.icon_travel-and-tourism  { background-image: url('/visuals/categoryIcons/icon_travel-and-tourism.png'); }
.icon_outdoor-recreation  { background-image: url('/visuals/categoryIcons/icon_outdoor-recreation.png'); } 

#fancybox-content {
	padding: 1em;
	input[type=text], textarea { .default-field; }
	form { 
		input[type=submit] {
			.light-button;
			padding: 0.3em 1em;
			margin: 0.5em 0 0 0;
			.font-arvo(1em);
		}
	}
}

.notification-block {
	background-color: @secondary-green;
	color: #7e8d41;
	text-align: center;
	font-size: 0.9em;
	display: block;
	
	a {
		color: #5c6730;
		
		&:hover { color: darken(#5c6730, 10%); }
	}
}

.empty {
	.font-arvo(1.6em);
	text-align: center;
	padding: 1em;
	color: #888;
}

.props {
	background-color: @secondary-green;
	.border-radius(4px);
	color: #94a34d;
	text-align: center;
	margin: 5px 0;
	position: relative;
	height: 33px;
	width: 60px;
	display: block;
	
	.arrow {
		display: block;
		position: absolute;
		left: 8px;
		width: 12px;
		height: 8px;
		margin: 3px;
		text-indent: -9999px;
		overflow: hidden;
	
		&:hover {
			cursor: pointer;
		}
	}
	
	.upArrow {
		top: 4px;
		background: url('/visuals/neimg/props.png') 0 0 no-repeat;

		&.upArrowClicked.clicked { background: url('/visuals/neimg/props.png') 0 -16px; }
	}
	
	.downArrow {
		top: 18px;
		background: url('/visuals/neimg/props.png') 0 -8px no-repeat;

		&.downArrowClicked.clicked { background: url('/visuals/neimg/props.png') 0 -24px; }
	}
	
	.propValue {
		position: absolute;
		top: 6px;
		right: 10px;
		font-size: 1.15em;
		
		&.ownItem {
			right: 26px;
		}
	}
}

.place-review {
	margin: 0;
	padding: 1.5em 0 2.3em;
	display: block;
	
	.meta {
		width: 60px; /* 10.0x% */
		float: left;
		padding-left: 20px;
		
		.author {
			width: 50px;
			height: 50px;
			display: block;
			padding-top: 3px;
		}
	}
	
	.content {
		width: 67%;
		height: 100%;
		float: left;
		margin-left: 3%;	
		background-color: #fff;
		border: 1px solid #dadbcc;
		.border-radius(5px);
		padding: 0.5em;
		display: block;
		
		h1 {
			.font-arvo(1.2em);
		}
		
		p {
			font-size: 0.9em;
			color: #888;
			margin-top: 0.3em;
		}
	}
	
	.stats {
		clear: both;
		font-size: 0.85em;
		text-align: right;
		display: block;
		padding-top: 0.1em;
		div {
			display: inline-block;
		}
	}

}
#rating { 
	display: inline-block;
	width: 61px;
	height: 13px;

	.pear {
		background: transparent url('/visuals/neimg/rating_pear.png') center top no-repeat;
		display: inline-block;
		width: 9px;
		height: 15px;
		padding: 0px;

		&.eaten { background-image: url('/visuals/neimg/rating_eatenpear.png'); }
	}
 }

.global-date-builder {
	text-align: center;
	
	.explanation {
		padding: 10px;
		background-color: @secondary-green;
		color: #7e8d41;
	}
	
	.date-builder-selection {
		margin: 0 0 1em;
		padding-top: 1.5em;
		a {
			.light-button;
			padding: 0.2em 2em;
			margin: 0;
		}
		
		.new {
			-moz-border-radius-topleft: 4px;
			-moz-border-radius-topright: 0;
			-moz-border-radius-bottomright: 0;
			-moz-border-radius-bottomleft: 4px;
			-webkit-border-radius: 4px 0 0 4px;
			border-radius: 4px 0 0 4px;
		}
		
		.current {
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
			border-left: 0;
			border-right: 0;
		}
		
		.saved {
			-moz-border-radius-topleft: 0;
			-moz-border-radius-topright: 4px;
			-moz-border-radius-bottomright: 4px;
			-moz-border-radius-bottomleft: 0;
			-webkit-border-radius: 0 4px 4px 0;
			border-radius: 0 4px 4px 0;
		}
	}
	
	.date-list {
		text-align: left;
		padding: 0 1.6em;
		
		.place {
			padding-left: 2.8em;
			margin-bottom: 0.75em;
			background-position: 0.7em center;
			background-repeat: no-repeat;
			
			.place-name { .font-arvo(1.05em); }
			.address { font-size: 0.85em; color: #828282; }
			
			.placeBuildPosition {
				font-size: 0.85em;
				color: #828282;
				padding-right: 4px;
			}
		}
	}
	
	.button {
		margin: 1.5em 0;
		.light-button;
		padding: 0.2em;
		width: 8em;
		.font-arvo(1em);
		display: inline-block;
	}
	
	#dateBuilderButtons {
		text-align: center;
	}
}

.builder { .global-date-builder }

#creationPrompt {
	form {
		padding: 2em;

		input {
			.default-field;
		}
	}

	button {
		.light-button;
		.font-arvo(1em);
		padding: 0.3em 1.2em;
		&:hover { cursor: pointer; }
	}
}

#inviteByEmailForm,
#inviteFriendByEmailForm {
	text-align: center;
	min-width: 150px;
	h2 {
		.font-arvo(1.3em);
		margin-bottom: 12px;
	}
}

/* PEAR STAMP */
.pear-stamp(@bgColor: #FAFBEF) {
	background: darken(@bgColor, 10%);
	border: 1px solid #DADBCC;
	padding: 8px 6px 3px 8px;
	display: block;
	cursor: pointer;
	.transition;
	text-decoration: none;
	color: #5E5E5E;
	img {
		width: 35px;
		display: inline-block;
	}
	.name {
		display: inline-block;
		margin-left: 6px;
		vertical-align: 14px;
	}
	&:hover {
		.box-shadow(0.1);
	}
}

/* SHARE MODULE */
.share-module {
	//.light-button;
	padding: 4px 3px;
	min-width: 88px;
	min-height: 19px;
	.text {
		.font-arvo(1em);
		padding: 0 4px;
		min-width: 20px;
	}
}

/* DATE FORMATTING */
.dateView.listing { .place-review; }

.searchResults.listing {
	.place-review;
	
	width: 100%;
	clear: both;
	display: block;
	margin-bottom: 0;
	padding-bottom: 1em;
	margin-top: 0;
	padding-top: 0;

	.content { border: none; }
}

/* PLACE FORMATTING */
.placeView.listing { 
	margin: 2em;
	padding: 1em 1em 1em 2.5em;
	background-position: 1em 1.25em;
	background-repeat: no-repeat;
	
	h1 {
		.font-arvo(1.25em);
		margin-bottom: 0.3em;
	}
	
	.stats {
		
	}
}			

/* THE HEADER */
.banner {
	background: #5f4219 url('/visuals/neimg/headerbar.jpg') 0 0 repeat;
	height: 43px;
	
	header {
		.contained;
		text-align: right;
		position: relative;
		
		h1, nav, form {
			display: inline-block;
		}
		
		h1 {
			position: absolute;
			left: 0;
			top: 4px;
		}
		
		.main-nav {
			margin-top: 1em;
			a {
				color: #fff;
				text-transform: uppercase;
				.font-arvo(0.9em);
				padding: 0.6em 2.0em 0.6em 1.8em;
				
				&:hover {
					color: @secondary-green;
					text-decoration: none;
				}

				&.home, 
				&.profile, 
				&.dates { 
					background: url('/visuals/neimg/divider.png') right center no-repeat; 
				}
				&.profile {
					position: relative;
          			.profile-notification {
            			.notification-pill;
            			position: absolute;
            			right: 12px;
          			}
	          		&.with-notifications { padding-right: 3em; }
	          	}
			}
		}
		
		.sub-nav {
			margin-top: 1em;
			margin-right: 5px;
			
			a {
				color: #fff;
				text-transform: uppercase;
				.font-arvo(0.9em);
				&.account {
					height: 10px;
					width: 10px;
					background: url('/visuals/neimg/gear.sprite.png') 0 -21px no-repeat; 
					padding: 6px 14px 0 14px;
					vertical-align: -2px;
					&:hover {
						background: url('/visuals/neimg/gear.sprite.png') 0 1px no-repeat; 
					}
				}
			}
		}
		
		form {
			//margin-top: 1em;
			input {
				padding: 6px 5px 5px 5px;
				.border-radius(5px);
				background: url('/visuals/neimg/searchbar.png');
				width: 200px;
				margin-right: 1.9em;
				font: 85% 'Helvetica', sans-serif;
				border: none;

				&:focus {
					color: #fff;
					outline: none;
				}
					
			}
		}
		
		.notification-pill {
			.gradient(#d4dc87, #aeba4e);
			.border-radius(300px);
			color: darken(#848238, 10%);
			line-height: 9px;
			font-size: 9px;
			font-weight: bold;
			padding: 4px;
			text-align: center;
			min-width: 7px;
			&:hover {
				text-decoration: none;
				color: darken(darken(#848238, 10%), 15%);
			}
		}

		.notification-count {
			.notification-pill;
			position: absolute;
			left: 185px;
			top: 5px;
		}
		
	}
	
}

/* THE FOOTER */
footer {
	.contained;
	margin-top: 0.5em;
	margin-bottom: 3em;
	color: #8f8f8d;
	position: relative;
	
	.copyright {
		font-size: 1.1em;
	}
	
	.footer-nav {
		font-size: 0.9em;
		a {
			color: #666;
			&:hover { color: #222; }
		}
	}
	
	.social-links {
		position: absolute;
		right: 0;
		top: 2px;
		
		a {
			opacity: 0.8;
			.transition;
			&:hover {
				opacity: 1.0;
				.transition;
			}
		}
	}
}

/* THE HOME PAGE & GENERAL PAGE OUTLINE */
.page {
	.contained;
	background: #fff;
	border: 1px solid #d8d9d2;
	border-top: 0;
	.box-shadow(0.05);
	
	.module {
		background-color: #fafbef;
		margin: 2em;
		
		.body { border: 1px solid #dadbcc; border-top: none; }
		
		h1.module-title { .header-bar; }
		
	}
	
	.main-content {
		width: 60%;
		float: left;
		
		/* UPCOMING DATES MODULE */
		.upcoming-dates {
		
			.date-notification-block {
				background-color: @secondary-green;
				color: #7e8d41;
				text-align: center;
				font-size: 0.9em;
				display: block;
				
				a {
					color: #75c673;
					
					&:hover { color: darken(#75c673, 15%); text-decoration: none; }
				}
			}
			
			.date {
				padding: 1.5em 1em;
				border-bottom: 1px solid #d9dbcd;
				position: relative;
				
				h2 {
					.font-arvo(1.4em);
					a { color: #5e5e5e; &:hover { color: #444; } }
					display: inline;
				}
				
				.passed {
					color: #888;
					display: inline;
					margin-left: 0.5em;
				}
				
				p.date-sub {
					font-size: 0.85em;
				}
				
				.meta {
					position: absolute;
					top: 1.5em;
					right: 1em;
					text-align: right;
					
					time { display: block; }
				}

				&:last-child { border-bottom: none; }
			}
		}
		
		/* DATE BUILDER MODULE */
		.date-builder.module {
			.explanation {
				background-color: @secondary-green;
				color: #7e8d41;
				width: 40%;
				height: 100%;
				float: left; 
				
				p { 
					padding: 1.5em; 
					text-align: center;
					font-size: 0.9em;
					
					a {
						color: #464d25;
					}
					
				}
			}
			
			.builder {
				width: 60%;
				float: right;
				.global-date-builder;
			}
		}
		
		/* SUGGESTIONS MODULE */
		.suggestions {
			
			.body { padding: 1em; }
			
			article.listing {
				.place-review;
				.body { }
			}
		}
			
	}
	
	/* SIDEBAR */
	.sidebar {
		width: 35%;
		float: right;
		padding-right: 2em;
		
		.main-action {
			text-align: center;
			margin: 1em auto;
			padding-top: 12px;
			.font-arvo(1.5em);
			width: 336px;
			height: 34px;
			background: transparent url('/visuals/neimg/mainbutton.jpg') 0 0 no-repeat;
			color: lighten(@secondary-green, 15%); 
			display: block;
			text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
			opacity: 0.9;
			
			&:hover {
				//background-position: 0 -46px;
				text-decoration: none;
				opacity: 1.0;
				color: #fff;
			}
				
			
			&.record { display: none; }
		}
		
		.closeable-notification {
			text-align: left;
			background-color: #ffebd9;
			color: #da8e4e;
			border: 1px solid #fda24f;
			padding: 1.35em;
			font-size: 0.95em;
			
			.x-out { top: 3px; right: 5px; color: #da8e4e; }
		}
		
		.sidebox {
			text-align: left;
			background-color: #c2d36f;
			.body { border: 1px solid #dadbcc; border-top: none; }
			h1 { .header-bar; }
			
			&.stream {
				margin: 1em 0 2em 0;
				.stream-item {
					padding: 1em;
					/*background-color: #f6fbd2;
					border-bottom: 1px solid #dadbcc;*/
					
					.what {
						float: right;
						display: block;
						width: 80%;
					}
					
					.who {
						float: left;
						img {
							width: 50px;
							height: 50px;
							display: inline-block;
						}
					}
					
					.pictures {
						clear: both;

						img {
							padding: 3px;
							background-color: #fff;
							.box-shadow;
							margin-right: 8px;
							width: 130px;
							height: 100px;
						}
					}
					
					&.odd { background-color: #f6fbd2; border-bottom: none; }
					&.even { background-color: #e9f6a9; border-bottom: none; } 
					
				}
			}
			
			
		}
	}
}

/* HELP TOOLTIPS */
.help {
	//font-weight: bold;
	//color: #888;
	//color: #8c8c8c;
	//color: #9e9e9e;
	color: #b8b8b8;
	padding: 0 3px;
	cursor: pointer;
}
 
/* ADVERTISEMENTS */
.ad-container {
	position: absolute;
	margin-top: -1px;
	//bottom: 40px;
	top: 43px;
	//top: 65px;
	//width: 160px;
	//height: 300px;
	//padding: 3px;
	//padding-bottom: 0;
	//border: 1px solid #D8D9D2;
	//background: #FFF;
	//background: #5F4219;
	//z-index: -5;
	padding-top: 16px;
	padding-bottom: 16px;
	//padding-right: 16px;
	padding-left: 18px;
	//border-right: 2px solid #5F4219;
	//border-bottom: 2px solid #5F4219;
	.ad-listing {
		display: block;
		margin-bottom: 16px;
		img {
			width: 120px;			
		}
	}
}
.page {
	//border: 2px solid #5F4219;
	//border-top: none;
}

/* PROFILE PAGE */
.profile-page {

	.welcome-banner {
		background: #FAFBEF;
		border-bottom: 1px solid #DADBCC;
		margin-bottom: 0.2em;
		padding: 1em;
		.font-arvo(1em);
		a {
			//color: #888;
			float: right;
			margin-left: 30px;
		}
	}
	
	.main-action {
			text-align: center;
			margin: 1em auto;
			padding-top: 12px;
			.font-arvo(1.5em);
			width: 336px;
			height: 34px;
			background: transparent url('/visuals/neimg/mainbutton.jpg') 0 0 no-repeat;
			color: lighten(@secondary-green, 15%); 
			display: block;
			text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
			opacity: 0.9;
			
			&:hover {
				//background-position: 0 -46px;
				text-decoration: none;
				opacity: 1.0;
				color: #fff;
			}
				
			
			&.record { display: none; }
		}

	.profile-pic {
		width: 45%;
		float: left;
		position: relative;
		img {
			margin: 2em;
			padding: 0.3em;
			background: #fff;
			border: 1px solid #ddd;
			.box-shadow;	
		}
		
		.more-photos-link {
			position: absolute;
			display: block;
			background: transparent url('/visuals/neimg/photobutton.png') 0 0 no-repeat;
			width: 105px;
			height: 22px;
			padding: 12px 0 0 14px;
			right: 40px;
			bottom: 75px;
			font-size: 0.9em;
			color: #757575;
			
			&:hover {
				text-decoration: none;
				color: #333;
			}
		}
	}
	
	.profile-info {
		width: 55%;
		float: right;
		position: relative;
		
		h1.pear-name {
			padding: 0;
			margin: 4% 3% 0 1%;
			.font-arvo(2.75em);
			max-width: 334px; 
		}
		
		.pear-location {
			margin: 0 3% 1.5em 1%;
			padding: 0;
			font-size: 0.85em;
			color: #999;
		}
		
		.stage, .pear-description {
			margin: 0 3%;
			padding: 0.75em 2.8em;
			background: transparent url('/visuals/neimg/profileicon_data.png') left center no-repeat;
		}
		
		.dating { background-image: url('/visuals/neimg/profileicon_anniversary.jpg'); }
		.married { background-image: url('/visuals/neimg/profileicon_married.png'); }
		.engaged { background-image: url('/visuals/neimg/profileicon_engaged.png'); }
		
		.edit-profile-link {
			.light-button;
			padding: 0.2em 1.5em;
			.font-arvo(1em);
			position: absolute;
			top: 30px;
			right: 20px;
		}
		.friend-request-options {
			.font-arvo(1em);
			position: absolute;
			top: 30px;
			right: 20px;
			.friend-request-link {
				.light-button;
				padding: 0.2em 1.5em;
			}			
		}
	}
	
	.achievements {
		img {
			padding: 15px;
		}
		
		a.achievements-link {
			clear: both;
			.light-button;
			text-align: right;
			padding: 0.4em 1.8em;
		}
	}

	.favorites {
		width: 60%;
		float: left;
		
		.placeView.listing {
			background-color: #fff;
			border: 1px solid #dadbcc;
			.border-radius(5px);
			margin-top: 0;
		}

		.favorite-places .body { padding-top: 2em; }
	}
	
	.friends {
		.body {
			padding: 1em;
			padding-bottom: 0.6em;
			min-height: 60px;
			position: relative;
			.add-friends {
			    text-align: center;
			    position: absolute;
			    top: 10px;
			    width: 95%;
			    form {
			    	display: inline;
			    }
			    a {
			   		padding: 4px 30px;
			    	.light-button;
			    	margin-left: 5px;
			    	.font-arvo(1em);
			    }
			    input[type=text] {
			    	.default-field;
			    	//font-size: 12px;
			    	//padding: 4px 3px;
			    }
			    .or {
			    	.font-arvo(0.8em);
			    	color: #888;
			    	padding: 0 1em;
			    }
			}
			.friend-controls {
				position: absolute;
				top: 10px;
				right: 10px;
				z-index: 10;
				a {
					padding: 3px 8px;
					.light-button;
					margin-left: 5px;
					//.font-arvo(0.8em);
					.font-arvo(1em);
				}
			}
			.friend-requests {
				//border-bottom: 1px solid #DADBCC;
				h2 {
					position: relative;
					max-width: 150px;
					.font-arvo(1em);
					z-index: 10;
				}
				.request-list {
					//padding: 10px 10px;
					margin-top: 8px;
					margin-bottom: 8px;
					max-width: 80%;
					li {
						display: inline-block;
						//margin-right: 1px;
						img {
							float: left;
							width: 50px;
						}
						.request-right {
							float: left;
							width: 315px;
							padding-left: 10px;
							font-size: smaller;
							.controls {
								padding-top: 5px;
								a {
									.light-button;
									padding: 2px 4px;
									.font-arvo(0.9em);
									cursor: pointer;
								}
							}
						}
					}
				}
			}
			.current-friends {
				position: relative;
				padding-top: 8px;
				/*
				.line {
					position: absolute;
					top: 9px;
					border-top: 1px dotted #888;
					width: 250px;
					z-index: 5;
				}
				*/


				h2 {
					position: relative;
					max-width: 150px;
					.font-arvo(1em);
					//background: #FAFBEF;
					//padding: 8px 16px;
					z-index: 10;
				}
				.friend-list {
					//padding: 10px 10px;
					margin-top: 8px;
					max-width: 80%;
					li {
						display: inline-block;
						position: relative;
						//margin-right: 1px;
						img {
							width: 50px;
						}
					}
				}
			}
			.activity {
				position: relative;
				margin: 10px 0;
				h2 {
					.font-arvo(1em);
					position: relative;
					z-index: 10;
					background: #FAFBEF;
					padding-right: 6px;
					display: inline-block;
				}
				.line {
					height: 1px;
					border-top: 1px solid #DADBCC;
					position: absolute;
					top: 10px;
					width: 100%;
					z-index: 5;
				}
				ul {
					li {
						min-height: 42px;
						border-bottom: 1px solid #DADBCC;
						padding: 12px 0;
						&:last-child {
							border-bottom: none;
							padding-bottom: 0;
						}
						.pics {
							//display: inline-block;
							float: left;
						}
						.names {
							font-size: small;
							margin-left: 8px;
							vertical-align: middle;
							float: left;
							max-width: 290px;
							.pear-link {
								a {
									color: #5E5E5E;
								}
							}
						}
						.pic-sample {
							margin-top: 10px;
							img {
								margin-right: 10px;
								padding: 3px;
								background-color: #fff;
								.box-shadow;
								margin-right: 8px;
								width: 130px;
								height: 100px;
							}
						}
					}
				}
			}
		}
	}
	
	.wishes-statistics {
		width: 40%;
		float: right;
		
		.upcoming-dates {
			.body {
				//padding: 1em 0;
				//padding: 0 0 1em 0;
				padding: 0;
			}
			.hit-record {
				padding: 4px 0;
			}
			.warning {
			padding: 0.5em 0.5em;
			background-color: #ffebd9;
			border-bottom: 1px solid #fda24f;
			color: #da8e4e;
			text-align: center;
			margin-bottom: 5px;
			}
			ul {
				li {
					//margin-top: 10px;
					//border-top: 1px solid #fda24f;
					border-bottom: 1px solid #DADBCC;
					padding: 10px 1em;
					min-height: 35px;
					clear: both;
					&:last-child {
						border-bottom: none;
						//padding-bottom: 0;
					}
					h2 {
						.font-arvo(1em);
						text-align: left;
						max-width: 64%;
						a {
							color: #5E5E5E;
						}
					}
					.meta,
					.controls {
						float: right;
						text-align: right;
						a {
							font-size: smaller;
						}
					}
				}
			}
		}

		.statistics {
			.controls {
				position: relative;
				//width: 140px;
				//margin-left: auto;
				//margin-right: 0.8em;
				z-index: 5;
				// Shadow test
				//.box-shadow;
//				box-shadow: 0 4px 4px -2px #000000;
//-moz-box-shadow: 0 4px 4px -2px #000000;
//-webkit-box-shadow: 0 4px 4px -2px #000000;
				-webkit-box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.15);
				-moz-box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.15);
				box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.15);

				//background: #E9F5AA;
				//background: #F6FCD0;
				background: #FFF;
			    padding: 0.5em 1em;
			    //text-align: right;
			    text-align: left;			
			    border: 1px solid #DADBCC;
			    border-top: none;
			    .orders {
			    	//position: absolute;
			    	//right: 8px;
			    	//top: 5px;
			    	a {
			    		//color: black;
			    		color: #404817;
			    		padding: 0 5px;
			    		&.selected {
			    		font-weight: bold;
			    		}
			    	}
			    }
			}
			.stat-places {
				padding: 1em 3em;
				//margin: 0;
				list-style: decimal;
				list-style-position: outside;
				.place {
					padding: 0.4em 2em;
					background-position: 0.2em center;
					background-repeat: no-repeat;
					a { 
						color: #757575; 
					}
				}
			}
		}
		
		.upcoming-dates-two {
			margin: 2em;
			padding: 0.5em 0.5em;
			background-color: #ffebd9;
			border: 1px solid #fda24f;
			color: #da8e4e;
			font-size: 0.95em;
			h1 {
				.font-arvo(1em);
				text-align: center;
				margin-bottom: 10px;
			}
			ul {
				li {
					padding-top: 6px;
					margin-top: 10px;
					border-top: 1px solid #fda24f;
					min-height: 35px;
					h2 {
						text-align: left;
						max-width: 64%;
					}
					.meta,
					.controls {
						float: right;
						text-align: right;
						a {
							font-size: smaller;
						}
					}
				}
			}
		}
		
		.wishlist {
			.idea-wishes { background-color: #f6fbd2; margin: 0; }
			.place-wishes { 
				background-color: #e5f49b;
				//background-color: #f6fbd2;
				margin: 0;
				//p {
				//	&:nth-child(odd) {
				//		background-color: #f6fbd2;
				//	}
				//	&:nth-child(even) {
				//		background-color: #e5f49b; 	
				//	}
				//}
			}
			
			.wish {
				padding: 0.5em 1.5em;
				a { color: #757575; }
				
				.remove-wish-item-link { 
					margin-left: 10px;
					font-size: 0.85em; 
					a { color: #fda24f; }
					visibility: hidden;
				}
				
				&:hover {
					.remove-wish-item-link {
						visibility: visible;
					}
				}
				
				&.place-wish {
					padding-left: 3.5em;
					background-position: 1.5em center;
					background-repeat: no-repeat;
				}
			}
		}
	}

	.module {
		
		/* STATISTICS */
		.statistics-list {
			padding: 1.5em;
			font: 1.15em 'Helvetica', sans-serif;
			line-height: 1.6em;
			font-weight: normal;
			color: #777;
			
			strong {
				font-weight: bold;
				color: #111;
			}
		}
	}

	#timeline {
		position: relative;
		height: 120px;
		overflow: hidden;
		margin: 40px 16px 16px;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		border-top: 1px solid #9aa851;
		border-bottom: 1px solid #9aa851;
		background-color: #f6fcd0;
		/*.border-radius(5px);*/

		.innerBox {
			position: relative;
			height: 118px;
			width: 615px;
			margin-left: 27px;
			background: transparent;
			zoom: 1;
		}

		.button {
			background-image: none;
			background-color: #c1d45e;
			.gradient(#bbce5a, #cede7c);
			z-index: 20;
			width: 40px;
			height: 120px;
			border: 1px solid #9aa851;
			border-top: none;
			border-bottom: none;
			/*.border-radius(5px);*/
			position: absolute;
			top: 0;

			&:active { 
				background-color: #b9cd54; 
				.gradient(#b9cd54, #b9cd54);
			}
			&.leftButton { left: 0; }
			&.rightButton { right: 0; }
			
			#arrow-left, #arrow-right {
				background-color: transparent;
				background-position: 0 0;
				background-repeat: no-repeat;
				width: 12px;
				height: 17px;
				position: absolute;
				border: 3px solid transparent;
				top: 50px;
				left: 10px;
			}

			#arrow-left {
				background-image: url('/visuals/neimg/arrow_left.png');
			}

			#arrow-right {
				background-image: url('/visuals/neimg/arrow_right.png');
			}
		}

		.dateContainer {
			z-index: 10;
			max-height: 120px;
			overflow: hidden;
			position: absolute;
			zoom: 1;
			white-space: nowrap;
		}

		.crop {
			margin: 0;
			padding: 0;
			height: 120px;
		}

		.dateBox {
			display: inline-block;
			border: none;
			background-color: #f6fcd0;
			margin: 0;
			height: 100px;
			width: 250px;
			padding: 10px 20px;
			position: relative;
			margin: 0;
			zoom: 1;
			display: inline-block;

			img {
				float: left;
				padding: 3px;
				background-color: #fff;
				border: 1px solid #eee;
				margin-top: 15px;
				.box-shadow(0.1);
			}
			
			.date-info {
				display: block;
				float: right;
				width: 170px;
				white-space: normal;
				
				p {
					font-size: 0.85em;
					color: #777;
					padding-top: 0.8em;
				}

				h2 { padding-top: 7px; }

				p.places { color: #858d52; }
			}



			h2 {
				.font-arvo(1.2em);
				a { color: #666; }
			}

			&.odd { background-color: #e5f39b; }
		}
	}
	
	&.unpaired {
		//padding: 3em;
		.top {
			text-align: center;
			h1 {
				margin-top: 1.5em;
				font: 2.5em 'Lobster Two', sans-serif; 
				font-weight: 400; 
				font-style: italic;
			}
			h2 {
				margin-top: 15px;
				.font-arvo(1.4em);
			}
			.request-methods {
				margin-top: 15px;
				form {
					position: relative;
					display: inline-block;
					input {
						.default-field;
					}
					.tip {
						font-size: smaller;
						position: absolute;
						top: 30px;
					}
				}
				.or {
					margin: 0 15px;
				}
				.email-link {
					.light-button;
					padding: 6px 32px;
				}
			}
		}
		.bottom {
			border-top: 1px solid #DADBCC;
			margin: 70px 80px 1em 80px;
			.left {
				//width: 65%;
				width: 69.4%;
				display: inline-block;
				vertical-align: top;
				//padding-left: 25px;
				margin-right: 0;
				margin-left: auto;
				ul {
					li {
						padding: 1em 1em 1em 2em;
						border-bottom: 1px solid #DADBCC;
						min-height: 48px;
						.content {
							.alert {
								.font-arvo(1em);
							}
							.message {
								padding: 10px 0 0 10px;
								color: #888;
							}
						}
						.buttons {
							//float: right;
							//width: 15%;
							//margin-left: 15px;
							margin-top: 10px;
							a {
								.light-button;
								text-align: center;
								//margin-bottom: 5px;
								padding: 3px 6px;
								//display: block;
							}
						}
						&.no-problem {
							.font-arvo(1em);
							h3 {
								margin-bottom: 7px;
							}
						}
					}
				}
			}
			.right {
				width: 30%;
				display: inline-block;
				vertical-align: top;
				border-left: 1px solid #DADBCC;
				ul {
					a {
						color: #5E5E5E;
						text-decoration: none;
						cursor: pointer;
						display: block;
						//opacity: 0.8;
						border-bottom: 1px solid #DADBCC;
						overflow-x: hidden;
						z-index: 5;
						&:hover {
						//	opacity: 1.0;
							.box-shadow();
							z-index: 10;
							position: relative;
						}
						&:last-child {
							border-bottom: none;
						}
					}
					li {
						background: #FAFBEF;
						padding: 0.8em 1em 1em 1em;
						border-bottom: 1px solid #DADBCC;
						//border-right: 1px solid #DADBCC;
						h3 {
							//.font-arvo(1.3em);
							text-align: center;
							a {
							//	color: #5E5E5E;
								//text-decoration: underline;
							}
						
						}
						&:last-child {
							border-bottom: none;	
						}
					}
				}
			}
		}
	}
	
	&.unpaired-two {
		padding: 3em;

		h1.warning {
			.font-arvobold(1.8em);
			text-align: center;
			margin-bottom: 1.6em;
			color: #a1b144;
		}

		p {
			font-size: 1.2em;
			margin-bottom: 0.6em;
		}

		h2 {
			.font-arvo(1.5em);
			margin: 0.6em 0;
			padding-top: 0.6em; 
		}

		ul {
			list-style-type: square;
			padding-left: 40px;
			margin-left: 1.2em;
		}

		li {
			margin-bottom: 0.2em;
		}

		.requests {
			h2 {
				.font-arvo(1.1em);
				padding: 0.5em 0;
			}

			p { font-size: 1em; }

			.request {
				padding-left: 20px;
				border-left: 4px solid @secondary-green;
				margin: 1em 0;
	
				.button {
					padding: 0.5em;
					text-transform: uppercase;
					font-size: 0.85em; 
					a {
						.light-button;
						padding: 0.3em 1.2em;
					}
				}
			}
		}
	}
}

.planned-date-day-change {
	min-width: 260px;
	min-height: 320px;
	text-align: center;
	padding-top: 10px;
	p {
		margin-top: 10px;
		.font-arvo(1em);
	}
	.google-cal-link {
		.font-arvo(1em);
		.light-button;
		padding: 4px 8px;
	}
	.planned-date-cal-div {
		margin-left: 4px;
		margin-top: 10px;
	}
}

.ui-tooltip-content {
	.friend-name-and-delete {
	    //padding: 0 10px 0 5px;
	    //display: inline-block;
	    //vertical-align: top;
	    
	    //padding: 3px 5px;
	    text-align: center;
	    a {
	    	color: #757575;
	    	&.delete {
	    		//padding: 2px 5px;
	    		//margin-left: 15px;
	    		cursor: pointer;
	    		display: block;
	    		font-size: smaller;
	    		//.light-button;
	    	}
	    }
	}
}

.pear-request {
	p { padding: 1em 2em; } 
	form {
		padding: 0 2em 2em;
		textarea {
			.default-field;
			margin: 0;
			width: 95%;
			height: 4em;
		}
		p { margin: 0 0.2em; padding:0; }
		button, input[type=submit] { 
			.light-button; 
			padding: 0.3em 1em; 
			margin: 0.2em 0; 
		}
	}
}

/* PLACE SUMMARY PAGE */
.place-page {
	position: relative;
	.place-header {
		width: 400px;
		min-height: 290px;
		float: left;
		padding: 2em;
		
		h1 { 
			.font-arvo(2.5em);
			
		}
		.business-info {
			margin: 1em 0 1.5em;
			
			p {
				font-size: 1.15em;
				color: #666;
				&.distance { 
					font-size: 0.95em;
					font-style: italic;
				}
				&.phone,
				&.web {
					font-size: 0.90em;
				}
			}
		}
		
		.user-interactivity {
			margin-bottom: 1.5em;
		}
		
		.statistics {
			margin-bottom: 1.5em;
		}
	}
	
	.mapCanvasWrapper {
		position: absolute;
		top: 2em;
		right: 2em;
		width: 460px;
		border: 1px solid #ccc;
	}
	
	.pointers-ideas {
		width: 60%;
		float: left;

		.pointers {
			.body {
				min-height: 90px;
				.empty {
					vertical-align: middle;
				}
			}
			.pointerListing {
				padding-left: 3.5em;

				.pointerInfo {
					width: 85%;
					border: 1px solid #f0f0f0;
					.border-radius(5px);
					background-color: #fff;
				}
			}
		}
	}
	
	.builder-column {
		width: 40%;
		float: right;
		.builder { .global-date-builder; }
	}
}

/* POINTERS */
.pointerOrders {
	margin: 2em;
	font-size: 0.9em;
	color: #858585;
	a.selected { color: #444; }
}

.pointerListing {
	padding: 0.6em;
	
	.pointerDelete {
	
	}
	
	.pointerInfo {
		float: left;
		display: block;
		width: 70%;
		margin-left: 2%;
		padding: 0.9em;
		
		.pointer-content {
			
		}
		
		.place-name {
			display: block;
			font-size: 0.85em;
		}
		
		.meta {
			font-size: 0.85em;
			color: #828282;
			
			.timestamp {
			
			}
		}
	}

	.props {
		padding-top: 0;
		margin-top: 15px;
		width: 60px;
		float: left;
	}
}

/* SEARCH PAGE */
.search-page {
	padding: 2em;

	#fullSearchField {
		text-align: center;
	
		input[type=text] {
			.default-field;
			width: 400px;
			font-size: 1.25em;
			text-align: left;
			margin-top: 1px;
		}
		
		input[type=submit] {
			.light-button;
			.font-arvo(1.1em);
			padding: 7px 2em;
		}
	}
	
	.result-section {
		h1.section-title { 
			.font-arvo(1.5em); 
			margin: 1.1em 0 0 0;
			border-bottom: 1px solid #e9e9e9;
			clear: both;
		}
		
		&.users, &.pears {
			.result {
				margin: 1em;
				//display: inline-block;
				background-color: #fafbef;
				text-align: center;
				padding: 1em 0;
				display: inline-block;
				width: 16%;
				min-height: 100px;
				vertical-align: top;
				border: 1px solid #dadbcc;
				
				img {
				
				}
				
				.pear-name {
					font-weight: bold;
				}
				
				.person-name {
				
				}
			}
		}

		&.pears .result { height: auto; }
		
		&.dates {
			clear: both;
		}
		
		&.places {
			clear: both;
		}
	}
}

/* ACCOUNT SETTINGS PAGE */
.account-settings-page {
	padding: 2em;
	
	.account-settings-tabs {
		text-align: center;
		margin: 0 0 2em;
		a {
			.light-button;
			margin: 0;
			padding: 0.3em 1.4em;
			
			&.user-settings {
				border-right: none;
				-moz-border-radius-topleft: 4px;
				-moz-border-radius-topright: 0;
				-moz-border-radius-bottomright: 0;
				-moz-border-radius-bottomleft: 4px;
				-webkit-border-radius: 4px 0 0 4px;
				border-radius: 4px 0 0 4px;
			}
			
			&.date-preferences, &.pear-settings {
				-moz-border-radius-topleft: 0;
				-moz-border-radius-topright: 0;
				-moz-border-radius-bottomright: 0;
				-moz-border-radius-bottomleft: 0;
				-webkit-border-radius: 0;
				border-radius: 0;
			}
			
			&.logout {
				border-left: none;
				-moz-border-radius-topleft: 0;
				-moz-border-radius-topright: 4px;
				-moz-border-radius-bottomright: 4px;
				-moz-border-radius-bottomleft: 0;
				-webkit-border-radius: 0 4px 4px 0;
				border-radius: 0 4px 4px 0;
			}
		}
	}
	
	h1 {
		.font-arvo(2em);
		padding: 0.75em 0 0.3em;
	}
	
	h2 {
		.header-bar;
		text-align: left;
		padding-left	: 0.5em;
		.border-radius(5px);
		margin: 2em 0 1em;
	}
	
	input[type=text], input[type=password], textarea {
		.default-field;
		margin: 0.7em 0 0.7em 0.45em;
	}
	
	input[type=submit],
	.setting-button {
		.light-button;
		.font-arvo(1em);
		padding: 0.6em 1.4em;
	}
	
	label {
		font-weight: bold;
		display: inline;
	}
	
	.uploadbutton {
		margin-top: 1.2em;
	}
	
	.user-info {
		.name {
			.last-name { padding-left: 0.75em; }
		}
		
		.birthday {
			padding-top: 1em;
			.heading { font-weight: bold; }
			label { font-weight: normal; }
			
		}
		
		.primary-information-submit {
			margin-top: 0.8em;
		}
		
		.gender {
			padding-top: 1em;
			.female { padding-left: 0.75em; }
		}
		
		.change-password {
			div {
				margin-top: 0.6em;
			}
			
			.forgot-password {
				display: block;
				font-size: 0.9em;
			}
		}
	}

	.your-pears {
		padding-top: 1.2em;

		h3 {
			padding-top: 2em;
		}

		.pearbox {
			display: block;
			width: 160px;
			text-align: center;
			padding: 1.5em;
			margin: 1.1em;
			border: 1px solid #ddd;
			.transition;

			&:hover { border-color: #bbb; .transition; }

			.breakup-link {
				font-size: 0.85em;
				a { color: #888; text-decoration: underline; }
				a:hover { color: #555; cursor: pointer; }
			}
		}
	}

}
input[name=birthMonth], input[name=birthDay], input[name=month], input[name=day] {
	width: 2em;
	text-align: center;
	margin-right: 1.2em;
}
input[name=birthYear], input[name=year] {
	width: 4em;
	text-align: center;
}

.date-preferences {
	h3 { margin-bottom: 1em; }	

	label {
		float: right;
		text-align: left;
		vertical-align: middle;
		padding: 0 0 0 10px;
		width: 180px;
		font-weight: normal;
	}

	input[type=submit] { margin-top: 1em; }
}

.email-confirm {
	padding: 2em;

	h2 {
		.font-arvo(1.2em);
		padding-bottom: 1em;
	}

	p { padding-bottom: 1em; }

	input[type=text], input[type=password] {
		.default-field;
		margin-left: 15px;
	}

	input[type=submit], button {
		margin-left: 10px;
		.light-button;
		.font-arvo(1em);
		padding: 0.3em 1.2em;
	}
}

/* PLACE EDIT PAGE */
.place-edit-page {
	padding: 2em;	
	h1 {
		.font-arvo(2em);
		padding: 0.75em 0 0.3em;
	}
	
	h2 {
		.header-bar;
		text-align: left;
		padding-left	: 0.5em;
		.border-radius(5px);
		margin: 2em 0 1em;
	}
	
	input[type=submit] {
		.light-button;
		.font-arvo(1em);
		padding: 0.6em 1.4em;
	}
	
	.marker-edit {
		min-height: 300px;
	}
	
	.marker-edit-form {
		.info {
			margin-bottom: 15px;
		}
		max-width: 380px;
		.marker-edit-response {
			padding-left: 5px;
		}
	}
	
	.mapCanvasWrapper {
		float: right;
		border: 1px solid #ccc;
	}
	
/* ================================ */
 
	.module.place-edit {
		border-top: solid 1px #DADBCC;	
		float: left;
		//display: inline;
		width: 55%;
		margin-top: 0;
		margin-right: 0;
		p.field {
			padding:0 0.6em 1em;
			
			input[type=text] { .default-field; }
			
			input[type=submit] {
				.light-button;
				.font-arvo(1em);
				padding: 0.3em 1em;	
			}
			
			label {
				width: 100px;
				float: left;
				text-align: right;
				padding: 5px 5px 0 0;
			}
			.currentValue {
				font-size: 12px;
				width: 150px;
				display:inline-block;
			}
			
		}
		
		.body { 
			padding: 1em;
		}
		
		
		#submitButton {
			.light-button;
			clear: both;
			.font-arvo(1.15em);
			padding: 0.45em 1.4em;
			margin: 0.3em auto;
			width: 150px;
			text-align: center;
		}
		#divSubmitButton {  
			text-align:right; 
			padding-right:50px;
		}
		#spanEditItems {  
			text-align:right; 
			padding-right:50px;
		}
	}
	.category-change {
		min-height: 470px;
	}
	.category-body {
		padding: 20px;
		display: block;
	}
	.category-module {
		float: right;
		border-top: solid 1px #DADBCC;	
		max-width: 320px;
		margin-left: 0;
		margin-top: 0;
		padding-top: 0;
		h3 {
			margin-bottom: 10px;
			margin-top: -10px;
		}
	}
	//#divEditPlaceInfo {
	//	display: inline-block;
	//}
}


/* DATE EDIT PAGE */
.date-edit-page {
	padding: 2em;	
	h1 {
		.font-arvo(2em);
		padding: 0.75em 0 0.3em;
	}
	
	.back-to-summary {
		.light-button;
		padding: 0.3em 1em;
		float: right;
	}
	
	h2 {
		.header-bar;
		text-align: left;
		padding-left	: 0.5em;
		.border-radius(5px);
		margin: 2em 0 1em;
	}
	
	input[type=text], textarea {
		.default-field;
		.border-radius(0);
		margin: 0;
	}
	
	input[name=title] {
		width: 250px;
	}
	
	input[type=submit], button {
		.light-button;
		.font-arvo(1em);
		padding: 0.4em 1em;

		&.private {
			.gradient(#eee, #eee);
			border-color: #ccc;
			color: #aaa;
			.transition;
		}
	}
	
	.story-form {
		margin-bottom: 15px;
	}
	
	textarea {
		display: block;
		width: 296px;
		max-width: 296px;
		height: 50px;
		margin-top: 5px;
	}
	
	.non-creator {
		float: right;
		margin-right: 320px;
		max-width: 200px;
		text-align: justify;
		text-align: left;
		background-color: #ffebd9;
		color: #da8e4e;
		border: 1px solid #fda24f;
		padding: 1.35em;
		font-size: 0.95em;
	}
	
	.input-section {
		margin-bottom: 10px;
	}
	
	label {
		font-weight: bold;
		padding-right: 10px;
	}
	
	button#isPublic {
	    .light-button;
	    text-align: center;
	    padding: 0.4em 0;
	    width: 80px;
	    font-family: 'Helvetica', sans-serif;
	    font-size: 10px;
	    text-transform: uppercase;
	    position: relative;
	    //top: -1.5em;
	    //right: 0;
	    .transition;
	    &.private {
	    	.gradient(#eee, #eee);
	    	border-color: #ccc;
	    	color: #aaa;
	    	.transition;
	    }
	}
}

/* NOTIFICATIONS PAGE */
h1.notification-header {
	.font-arvo(1.5em);
	padding: 26px 0 15px 26px;
}

ul.notifications {
	list-style-type: square;
	margin: 0;
	padding-left: 15px;
	
	li {
		margin-left: 38px;
		&.empty {
			font: 1em 'Helvetica', sans-serif;
			text-align: left;
			
		}
		&.unseen { font-weight: bold; }
		&.seen {
			opacity: 0.6;
			.transition;
			&:hover { opacity: 1; .transition; }
		}
		
	}
}

/* PICTURES */
.picture-page {
	padding: 2em; 
	position: relative;
	
	h1 { .font-arvo(2em); }

	.album {
		width: 180px;
		padding: 10px;
		background: #fff;
		border: 1px solid #e2e2e2;
		margin: 20px 10px;
		//float: left;
		display: inline-block;
		vertical-align: top;
		-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.2);
		box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.2);
		.transition;
		
		&:hover {
			-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
			-moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
			box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
		}

		img { margin-bottom: 0.5em; }	
	}
	
	.back-to-album {
		.light-button;
		padding: 0.3em 1em;
		position: absolute;
		top: 4em;
		right: 2em;
	}
	
	h1.album-info-head {
		margin: 1em 0 1.5em;
	
		.album-title {
			margin: -0.6em 0 0 0.6em;
		}
		
		.thumbnail {
		
		}
	}
	
	#albumPics { margin: 1.5em 0 0 3.25em; }
	
	.album-picture {
		margin: 2px;
		border: 1px solid #ddd;
		display: inline-block;
		height: 146px;
		img { margin: 3px; }
			
		&:hover { border-color: #76804a; }
	}
}

.pic-options {
	padding: 1em 0;
	a {
		.light-button;
		margin-right: 0.6em;
		padding: 0.4em 1.2em;
		font: 0.85em 'Helvetica', sans-serif;
		text-transform: uppercase;
	}
}

/* DATE WIZARD PAGE */
.date-wizard-page {
	padding: 2em;
	position: relative;
	h1, 
	.step-info,
	.area-form {
		text-align: center;
	}
	h1 {
		.font-arvo(3em);
		color: #888;
		&.left {
			text-align: left;
			font-size: 1.5em;
		}
	}
	.area-form {
		margin: 2px auto 25px auto;
		label {
			font-weight: bold;
			padding-right: 5px;
		}
		input[type=text] {
			.default-field;
			width: 100px;
		}
		.area-response {
			color: #888;
			display: block;
			padding: 5px;
		}
		&.left {
			display: none;
		}
	}

	.step-info {
		.font-arvo(1.2em);
		max-width: 475px;
		margin: 0 auto;
		// Test
		max-width: 430px;
		line-height: 1.5em;
	}
	
	.back {
		.light-button;
		padding: 0.4em 1.2em;
		position: absolute;
		top: 25px;
		right: 25px;
	}
	
	.wizard-tip {
		//float: left; 
		position: absolute;
		top: 23px;
		left: 23px;
		max-width: 244px;
		text-align: justify;
		//text-align: left;
		background-color: #ffebd9;			
		color: #da8e4e;
		border: 1px solid #fda24f;
		padding: 0.8em;
		font-size: 0.95em;
	}
	
	.step-1 {
		ul {
			width: 815px;
			margin: 15px auto 0 auto;
			li {
				display: inline-block;
				margin: 0 20px;
			}
		}
		input[type=checkbox] {
			display: inline-block;
			margin-right: 5px;
		}
		label.big-label {
			text-align: center;
			margin: 1em auto;
			padding-top: 12px;
			.font-arvo(1.5em);
			width: 336px;
			height: 34px;
			background: transparent url('/visuals/neimg/mainbutton.jpg') 0 0 no-repeat;
			color: lighten(@secondary-green, 15%);
			text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
			opacity: 0.9;
			display: inline-block;
			&.more {
				margin-left: 21px;
			}
			&:hover {
				text-decoration: none;
				opacity: 1.0;
				color: #fff;
				cursor: pointer;
			}
		}
		.more-li {
			position: relative;
			label {
				position: relative;
				z-index: 40;
			}
			.more-types {
				position:absolute;
				border: 1px solid #869054;
				top: 63px;
				left: 21px;
				z-index: 5;
				border-top: none;
				-moz-border-radius-bottomright: 5px;
				-moz-border-radius-bottomleft: 5px;
				-webkit-border-radius: 0 0 5px 5px;
				border-radius: 0 0 5px 5px;
				background: #FAFBEF;
				//background: #e9f6a9;
				// This is for bottom and top shading.  Would look good if the label button was a png.
				//-moz-box-shadow:    inset 0  8px 8px -8px #696868;
		        //-moz-box-shadow:                inset 0 -8px 8px -8px #696868;
			    //-webkit-box-shadow: inset 0  8px 8px -8px #696868;
			    //-webkit-box-shadow:                        inset 0 -8px 8px -8px #696868;
			    //box-shadow:        inset 0  8px 8px -8px #696868; 
			   	//box-shadow:   inset 0 -8px 8px -8px #696868;
				ul {
					width: 334px;
					padding-top: 3px;
					padding-bottom: 7px;
					li {
						width: 145px;
						margin: 0 10px;
						padding: 5px 0;
						cursor: pointer;
						label {
							cursor: pointer;
						}
					}
				}
			}
		}
		input[type=submit] {
			display: block;
			.light-button;
			font-size: 20px;
			padding: 0.4em 1.2em;
			width: 200px;
			margin: 20px auto;
		}
		.response {
			color: #888;
			display: block;
			padding: 5px;
			text-align: center;
		}
	}
	
	.step-2 {
		h2 {
			.font-arvo(1.8em);
		}
		
		.cats {
			margin: 15px 0 0 30px;
			padding-bottom: 20px;
			li {
				display: inline-block;
				line-height: 1.6em;
				width: 250px;
				label {
					padding-left: 3px;
					padding: 3px;
					cursor: pointer;
				}
			}
		}
		
		input[type=submit] {
			display: block;
			.light-button;
			font-size: 20px;
			padding: 0.4em 1.2em;
			width: 200px;
			margin: 20px auto 0 auto;
		}
		
		.theatre-container {
			margin: 10px 0 20px 30px;
			.theatres,
			.movies {
				display: inline-block;
				border: 1px solid #dadbcc;
				height: 300px;
				vertical-align: top;
				line-height: 1.6em;
				overflow-y: auto;
			}
			.theatres {
				max-width: 300px;
				//background-color: #f6fbd2;
				z-index: 20;
				li {
					label {
						display: inline-block;
						padding: 2px 8px 2px 4px;
						cursor: pointer;
					}
					input[type=checkbox] {
						margin-left: 6px;
						opacity: 0;
					}
					&.selected {
						//font-weight: bold;
						//background-color: #e9f6a9;
						background-color: #f6fbd2;
						input[type=checkbox] {
							opacity: 1;
						}
					}
					&:hover {
						background-color: #f6fbd2;
						//background-color: #e9f6a9;
						cursor: pointer;
					}
				}
			}
			.movies {
				height: 300px;
				border-left: none;
				//background-color: #e9f6a9;
				background-color: #f6fbd2;
				max-width: 500px;
				font-size: 12px;
				li {
					padding: 3px 8px;
					border-bottom: 1px solid #dadbcc;
					&:hover {
						a {
							opacity: 1;
						}
					}
				}
				a {
					//display: block;
					//float: right;
					padding-left: 15px;
					color: #888;
					font-size: 10px;
					text-decoration: underline;
					opacity: 0.0;
					.transition;
				}
			}
		}
		.response {
			color: #888;
			display: block;
			padding: 5px;
			text-align: center;
		}
	}
	
	.step-3 {
		position:relative;
		.results {
			position: relative;
			z-index: 100;
			display: inline;
			top: 25px;
			left: 38px;
			li.result {
				position: relative;
				display: inline-block;
				vertical-align: top;
				width: 360px;
				background-color: #fafbef;
				margin: 2em;
				//left: 10em;
				//right: em;
				//top: 2em;
				//bottom: 2em;
				border: 1px solid #dadbcc;
				-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
				-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
				box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
				.bottom-controls{
					a {
						opacity: 1;
					}
				}					
				&:hover {
					.transition;
					-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
					-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
					box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
				}
				h1 {
					font-size: 1.0em;
					margin-top: 10px;
				}
				.bottom-controls {
					text-align: center;
					padding: 6px;
					padding-bottom: 9px;
					a {
						.light-button;
						.transition;
						padding: 2px 8px;
						margin-left: 3px;
						&.display-on-map,
						&.undo-display-on-map {
							font-size: 14px;
							padding: 5px 20px;
							vertical-align: 3px;
							.font-arvo(14px);
						}
					}
				}
			}
		}
		.bottom-fill {
			height: 25px;
		}
		.map-wrapper {
			position: absolute;
			top: 25px;
			bottom: 0;
			right: 0;
			left: 0;
			//border: 1px solid #dadbcc;
			z-index: 0;
			.map {
				height: 100%;
				width: 100%;
				//opacity: 0.5;
				opacity: 0.4;
				border: 1px solid #dadbcc;
			}
		}
	}
	.pagination {
		width: 330px;
		margin: 20px auto 0 auto;
	}
}
// For non Date Wizard page usage
.wizard-result {
	width: 360px;
	background-color: #fafbef;
	margin: 2em;
	background-color: #fafbef;
	margin: 2em;
	//left: 10em;
	//right: em;
	//top: 2em;
	//bottom: 2em;
	border: 1px solid #dadbcc;
}
.wizard-listing {
    position: relative;
    background-color: #fff;
    background-repeat: no-repeat;
    border: 1px solid #dadbcc;
    .border-radius(5px);
    margin: 15px;
    padding: 10px 10px 10px 32px;
    background-position: 9px 13px;
    color: #676767;
    h2.name {
    	.font-arvo(1.2em);
    	max-width: 230px;
    	padding: 0;
    }
    .controls {
    	position: absolute;
    	font-size: smaller;
    	vertical-align: top;
    	right: 8px;
    	top: 8px;
    	a {
    		display: block;
    		text-align: right;
    	}
    }
    .address {
    	max-width: 230px;
    }
    .stats {
    	padding: 3px 0;
    	.checkins {
    		padding-left: 12px;
    		font-size: 0.8em;
    		vertical-align: 3px;
    	}
    }
    .selected-for {
    	font-style: italic;
    	font-size: smaller;
    	color: #888;
    }
    .swap-div {
    	position: absolute;
    	right: 0;
    	top: 22px;
    	margin-right: -100px;
    	z-index: 60;
    	-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
    	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
    	padding: 7px;
    	.swap-cancel {
    		float: right;
    		font-size: smaller;
    	}
    	h2 {
    		.font-arvo(1.1em);
    		margin-bottom: 10px;
    	}
    	border: 1px solid #dadbcc;
    	.border-radius(5px);
    	width: 200px;
    	background: #FFF;
    	min-height: 200px;
    	max-height: 550px;
    	li.swap-place {
    		border-bottom: 1px solid #dadbcc;
    		padding: 5px;
    		cursor: pointer;
    		.address {
    			font-size: smaller;
    			color: #888;
    		}
    		&.selected {
    			background-color: #f6fbd2;
    		}
    		&:hover {
    			background-color: #f6fbd2;
    		}
    		&:last-child {
    			border-bottom: none;
    		}
    	}
    }
}

/* DATES PAGE */
.dates-page {
	padding: 2em;
	#searchBar {
		background-color: #fafbef;
		border: 1px solid #dadbcc;
		border-top: none;
		border-bottom: none;
		padding: 0;
		margin: 0;
		width: 905px;
		
		.searchTitle {
			.header-bar;
			text-align: left;
			padding-left: 10px;
		}
	
		#typeSection {
			width: 181px;
			float: left;
			display: block;
			select { margin: 1em; }	
			#searchType {
				font-size: 1.3em;
			
				a {
					padding: 4px 13px 0;
					color: #777;
					
					&:hover {
						color: #444;
					}
				}
			}
			
			.searchTitle { border-right: none; border-left: none; }
		}
		
		#citySection {
			width: 181px;
			float: left;
			display: block;
			
			.searchTitle { border-right: none; }
		
			#cityChangeForm {
				input {
					margin: 1em;
					.default-field;
					width: 150px;
					position: relative;
				}
			}
			
			#cityDisplayPlace {
				margin: 1em;
				.default-field;
				width: 150px;
				position: relative;
				display: block;
			}
		}
		
		#querySection {
			width: 543px;
			float: left;
			display: block;
			
			.searchClear {
				a {
					.light-button;
					font: 1em 'Helvetica', sans-serif;
					padding: 0.6em 1em;
					margin-left: 0.7em;
				}
			}
			
			input[type=text] {
				margin: 1em;
				.default-field;
				width: 200px;
			}
			
			input[type=submit] {
				.light-button;
				font: 1em 'Helvetica', sans-serif;
				padding: 0.6em 1em;
			}
			
			.searchTitle { border-right: none; }
		}
	}
	
	#dateFilters {
		.header-bar;
		border-left: none;
		border-right: none;
		text-align: left;
		text-shadow: none;
		font: 0.95em 'Helvetica', sans-serif;
		
		.order-by {	
			width: 78%;
			float: right;
			display: block;
			text-align: right;
			padding-right: 2%;
				
			#optionLabel {
				padding-right: 0.3em;
			}
			
			a {
				padding: 0 0.7em 0 0;
				color: #404817;
				&.selected { font-weight: bold; }
			}
		}
		
		#advancedOptionButton {
			width: 15%;
			float: left;
			display: block;
			padding-left: 2%;
			background: transparent url('/visuals/neimg/search_moreoptions_arrow.png') right -1px no-repeat;

			&.selected { font-weight: bold; background-position: right -24px;}
			&:hover {
				cursor: pointer;
			}
		}
	}
	
	#advancedSearch {
		background-color: #fafbef;
		border-bottom: 1px solid #dadbcc;
		clear: both;
		margin: 0;
	
		.advancedBox {
			display: block;
			float: left;
			padding: 1% 1% 0 1%;
			
			&.restrict { width: 18%; }
			&.price-box, &.rating-box, &.props-section, &.page-size { width: 13%; }
			&.completions { width: 13%; }
			
		}
	}
	
	.results-deals {
		width: 40%;
		float: left;
		padding-top: 2em;
		.listing.selected, .listing:hover {
			background-color: #f9f9f9;
			.content { background-color: #f9f9f9; }
		}
		.placeView.listing { 
			.place-review;
			background-position: 3px 12px; 
			padding: 0.75em 0 0.75em;
			.stats {
				text-align: left;
				font-weight: bold;
			}
			.ratingWrapper { margin-left: 10px; }
			h1, .stats {
				margin-bottom: 0;
				padding-bottom: 0;
				padding-left: 26px;
			}
		}
		.searchResults.listing {
			.meta { padding-top: 6px; }
		}

		.yipit-info {
			font-size: 0.85em;
			display: block;
			width: 100px;
			padding-bottom: 2em;

			img {
				width: 60px;
				display: block;
			}
		}

		.yipit-link {
			font-size: 0.85em;
			color: #888;
			text-decoration: underline;
			&:hover { color: #555; }
		}

		.deal-listing {
			padding: 0.75em 0.75em 0.75em 5em;
			background: transparent url('/visuals/neimg/search_deal.png') 4px 10px no-repeat;

			h2 {
				.font-arvo(1.1em);
				padding-bottom: 5px;
			}

			p {
				font-size: 0.9em;
				color: #888;
			}

			p.deal-details { text-align: right; }

			&:hover { background-color: #f9f9f9; }
		}
		
	}
	
	.map-builder {
		width: 60%;
		float: right;
			
		#mapWrapper {
			margin: 2em 0 2em 2em;
			max-width: 515px;
			#map_canvas { border: 1px solid #dadbcc; border-top: none; }

			h1 {
				.header-bar;
			}
		}
		
		.date-builder {
			max-width: 515px;
			width: 515px;
			.module { margin-right: 0; padding-right:0; }
			.explanation {
				padding: 10px;
				background-color: @secondary-green;
				color: #7e8d41;
			}
		}
	}
}

.pageNum {
	white-space:nowrap;
	margin-left:50px;
	
	div { display: inline-block; padding: 10px; }
	
	a {
		padding: 4px 10px;
		border: 1px solid #eee;
		&:hover {
			background-color: #fafbef;
			text-decoration: none;
		}
		
		&#batchNext, &#batchPrev {
			font-weight: bold;
		}
	}
}

.pageNumSelect {
	color: #555;
	font-weight: bold;
}
.tooltip {
	padding-left: 1.7em;
	background-position: 0 0.2em;
	background-repeat: no-repeat;

	h2 {
		.font-arvo(1.3em);
		margin-bottom: 0.5em;
	}

	.actions, .source, .pointer-meta  {
		font-size: 0.85em;
		span { padding-right: 1em; }
		margin-bottom: 0.5em;
	}

	&.date, &.pointer { padding-left: 0; }
	&.deal {
		padding-left: 1.7em;
		background: url('/visuals/neimg/icon_deal.png') 0 0.2em no-repeat;
	}
	
}

/* LOGIN PAGE */
.login-page {
	padding: 2em;
	
	p.field {
		width: 300px;
		margin: 0 auto;
		text-align: center;
	}

	input[type=text], input[type=password] {
		.default-field;
		text-align: left;
	}
	
	input { margin: 0.5em 0; }	
	
	input[type=submit], #facebookButton {
		.light-button;
		.font-arvo(1em);
		padding: 0.2em 0.9em;
	}
	
	label {
		width: 90px;
		text-align: right;
		padding: 10px 5px 0 0;
		float: left;
	}
	
	h1 { 
		.font-arvo(2em); 
		text-align: center;
		margin-bottom: 0.8em;
	}
}

/* PLACE CREATION PAGE */
.place-creation-page {
	padding: 2em;
	
	.module.place-creation {
		float: left;
		width: 45%;
		margin-bottom: 0;
		p.field {
			padding:0 0.6em 1em;
			
			input[type=text] { .default-field; }
			
			input[type=submit] {
				.light-button;
				.font-arvo(1em);
				padding: 0.3em 1em;	
				margin-top:40px;
			}
			
			label {
				width: 100px;
				float: left;
				text-align: right;
				padding: 5px 5px 0 0;
			}
			.example {
				font-size: 11px; 
			}
			    .website{
				   float:right;
				   margin-top:-15px;
				}
			
		}
		
		.body {
			padding: 1.5em;
		}
		
		
	}
		.requiredField { 
			color:red; 
		}
	
	.map {
		width: 45%;
		float: right;
	}
	
	#submitButton {
		.light-button;
		clear: both;
		.font-arvo(1.15em);
		padding: 0.45em 1.4em;
		margin: 0.3em auto;
		width: 200px;
		text-align: center;
	}
}
 
	.category-add {
		padding: 20px;
		display: block;
	}
	.categoryAdd {
		float: left;
		border-top: solid 1px #DADBCC;	
		 width: 410px;
		margin-left: 0;
		margin-top: 0;
		padding-top: 0;
		h3 {
			margin-bottom: 10px;
			margin-top: -10px;
		}
	}

/* DATE IDEA SUMMARY */
.date-idea-summary {
	padding: 2em;
	
	.date-idea-header {
		position: relative;
		
		h1 {
			.font-arvo(2.5em);
		}
		
		#creationInfo, .edit-idea {
			font-size: 0.85em;
			padding-bottom: 1.75em;
			opacity: 0.7;
			.transition;
			
			&:hover { opacity: 1.0; .transition; }
		}
		
		.edit-idea {
			position: absolute;
			text-align: right;
			top: 68px;
			right: 0;
		}
		
		#description {
			display: block;
			padding: 2em 0 1.5em 0;
			width: 600px;
			padding-right: 308px;
			border-bottom: 1px dotted #cfcfcf;
			margin-bottom: 1em;
		}

		
		.share-module {
			float: right;
			margin-top: -4px;
		}
		
		#stats {
			clear: left;
			p { padding-bottom: 0.5em; }
			
			.props { 
				float: left; 
			}
			
			.completion-wishlist {
				float: left;
				padding: 12px 0 0 1.5em;
			}

			.priceBackground { margin-left: 1px; }
		}
		
		
	}
	
	#mapWrapper {
		#datePathButtons {
			text-align: center;
			padding: 0.35em 0;
			
			button {
				.light-button;
				.font-arvo(1em);
				padding: 0.3em 1em;
			}
		}
	}
	
	#placeSynopsis {
		.body {
			padding: 1em;
		}
		
		.listing {
			margin: 0;
		}
	}
	
	.right {
		width: 40%;
		float: right;
		display: block;

		.module { margin-right: 0; }
	}
	
	.left {
		width: 60%;
		float: left;
		display: block;
		
		.module { margin-left: 0; }
	}
}

.edit-date-idea-form {
	width: 380px;
	h1 {
		font-size: 22px;
	}
	label, 
	input[type=text], 
	textarea {
		display: block;
		margin-top: 10px;
		width: 350px;
		max-width: 350px;
	}
	textarea {
		height: 100px;
	}
	input[type=submit] {
		margin-top: 20px;
	}
}

.plan-or-record {
	position: absolute;
	display: block;
	top: 1em;
	right: 0;

	a {
		.light-button;
		.font-arvo(1.4em);
		padding: 0.4em 1.5em;
	
		&.plan { 
			border-right: none;
			-moz-border-radius-topleft: 4px;
			-moz-border-radius-topright: 0;
			-moz-border-radius-bottomright: 0;
			-moz-border-radius-bottomleft: 4px;
			-webkit-border-radius: 4px 0 0 4px;
			border-radius: 4px 0 0 4px;
		}
		&.record { 
			-moz-border-radius-topleft: 0;
			-moz-border-radius-topright: 4px;
			-moz-border-radius-bottomright: 4px;
			-moz-border-radius-bottomleft: 0;
			-webkit-border-radius: 0 4px 4px 0;
			border-radius: 0 4px 4px 0;
		}
	}

	&.also-suggest {
		a.suggest { border-right: none; .border-radius(0); }
	}
}

.date-creation-page {
	position: relative;
	padding-top: 2.5em;

	.plan-or-record {
		top: 2em;
		left: 2em;
	}
	
	#creationWhereInfo {
		background-color: lighten(@secondary-green, 10%);
		.border-radius(5px);
		padding: 1em;
	}

	.type-title {
		.font-arvo(0.8em);
		color: #555;
		text-transform: uppercase;
		padding-top: 1.5em;
	}

	h2 {
		padding: 0 0 1em 0;
		.font-arvo(1.3em);
		color: #888;
	}

	form {
		position: relative;
		padding-bottom: 2em;

		p { font-weight: bold; }

		input[type=text], textarea {
			.default-field;
			.border-radius(0);
			margin: 0;
		}

		textarea { margin-top: 1em}

		#creationDescription { margin-top: 1.5em; }
		
		#creationMore {
			margin-top: 1.5em;
			p {
				display: inline;
				margin-right: 10px;
			}
			a {
				margin-left: 6px;
			}
		}

		input[type=submit], 
		button, 
		#creationAddPhotos, 
		#creationAddStory,
		#creationTagFriends {
			.light-button;
			.font-arvo(1em);
			padding: 0.4em 1em;

			&.private {
				.gradient(#eee, #eee);
				border-color: #ccc;
				color: #aaa;
				.transition;
			}
				
		}
		
		#creationWhen p, #creationHow p { font-weight: bold; }
		#creationSubmit { padding-top: 1.5em; }

		#privacyButton {
			position: absolute;
			top: 0;
			right: 3em;
		}
	}
}

#creationFriendTagger {
	padding: 1em;
	h1 {
		.font-arvo(1.4em);
		margin: 0 0 10px 0;
	}
	.body {
		width: 530px;
		height: 250px;
		border: 1px solid #999999;
		.border-radius();
		margin-bottom: 15px;
		.left {
			float: left;
			width: 48%;
			padding: 10px;
			height: 230px;
			border-right: 1px solid #999999;
			overflow-x: hidden;
			overflow-y: auto;
			#friendSearchInput {
				display: block;
				width: 90%;
				margin: 0 auto;
			}
		}
		.right {
			float: right;
			padding: 10px;
			width: 43%;
			height: 230px;
			overflow-x: hidden;
			overflow-y: auto;
			h2 {
				.font-arvo(1.1em);
				text-align: center;
			}
		}
		#friendSearchResults,
		#taggedFriends {
		    ul {
		    	margin-top: 10px;
		    	li {
		    		padding-bottom: 5px;
		    		input[type=checkbox] {
		    			vertical-align: middle;
		    			margin-right: 5px;
		    		}
		    		label {
		    			cursor: pointer;
		    			img {
		    				width: 45px;
		    				vertical-align: middle;
		    			}
		    			.name {
		    				vertical-align: middle;
		    				padding: 20px 6px;
		    			}
		    		}
		    	}
		    }
		}
	}
	a[name=done] {
		.light-button;
		padding: 0.3em 1.5em;
		.font-arvo(1.0em);
		cursor: pointer;
	}
}

textarea#creationStory {
	width: 90%;
	height: 100px;
}

#creationStoryUpload { height: 160px; width: 260px; }

#addStoryButton { .light-button; padding: 0.3em 1.5em; .font-arvo(1em); } 

/* DATE SUMMARY */
.date-summary {
	padding: 2em;
	
	header {
		position: relative;
		
		h1 {
			.font-arvo(2.75em);
			margin: 0.25em 0 0;
		}
		
		a.date-control {
			position: absolute;
			right: 0;
			padding: 0.3em 1.2em;
			.font-arvo(1em);
			min-width: 64px;
			z-index: 200;
		}
		a.edit-info {
			.light-button;
			text-align: center;
		}
		.share-module {
			float:right;
			margin-top: 29px;
		}
		
		.meta {
			margin: 0;
			padding: 0 0 1.5em;
			opacity: 0.7;
			font-size: 0.85em;
			.transition;
			
			&:hover { opacity: 1.0; .transition; }
		}
		
		button#isPublic {
			.light-button;
			text-align: center;
			padding: 0.4em 0;
			width: 80px;
			font-family: 'Helvetica', sans-serif;
			font-size: 10px;
			text-transform: uppercase;
			position: absolute;
			top: -1.5em;
			right: 0;
			.transition;

			&.private {
				.gradient(#eee, #eee);
				border-color: #ccc;
				color: #aaa;
				.transition;
			}
		}
		
		.edit-ratings-link {
			visibility: hidden;
			margin-left: 0;
			padding-left: 10px;
			vertical-align: 3px;
		}

		.author {
			position: absolute;
			
			top: 0;
			right: 6em;
			display: block;
			width: 225px;
			
			img {
				float: left;
				width: 60px;
				display: block;
			}
			
			p {
				float: right;
				width: 175px;
				padding-left: 15px;
				
				&.pear {
					padding-top: 8px;
					max-width: 130px;
					float: left;
				}
				
				&.date {
					font-size: 0.85em;
					max-width: 130px;
					float: left;
					a { color: #555; }
				}
			}
		}
	}
	
	h2 {
		padding-bottom: 1em;
		.font-arvo(1.25em);
	}
	
	.story {
		display: block;
		width: 100%;
		padding: 1.6em 0 2em;
	}
	
	.places {
		float: left;
		display: block;
		width: 35%;
		
		.placeView.listing {
			margin: 0;
		}
	}
	
	.photos {
		float: right;
		display: block;
		position: relative;
		width: 64%;
		padding-left: 1%;
		padding-bottom: 2em;
		img {
		
		}
		
		.add-photos {
			position: absolute;
			//top: 5px;
			top: 0;
			//right: 9.5em;
			right: 3em;
			
			a#dateAddPhotos {
				.light-button;
				padding: 0.3em 1.2em;
				.font-arvo(1em);
			}
		}
	}
}

.edit-ratings {
	width: 300px;
	h1 {
		font-size: 22px;
	}
	#quality,
	#pricey {
		margin-left: 15px;
	}
}

/* FEEDBACK BUTTON */
#floatFeedback {
	position: fixed;
	display: block;
	bottom: 70%;
	left: 0;
	font-size: 1.2em;
	z-index: 100;
	
	-moz-transform: translate(-40px, 0) rotate(90deg);
	-webkit-transform: translate(-40px, 0) rotate(90deg);
	-o-transform: translate(-40px, 0) rotate(90deg);
	-ms-transform: translate(-40px, 0) rotate(90deg);
	transform: translate(-40px, 0) rotate(90deg);

	#feedbackButton {
		padding: 14px 17px 6px;
		margin-bottom: 4px;
		display: block;
		border: 1px solid #ddd;
		background-color: #fff;
		.border-radius(4px);

		&:hover {
			text-decoration: none;
			color: #777;
		}
	}
}

#feedbackForm {
	padding: 1em;

	h2 {
		.font-arvo(1.25em);
		margin-bottom: 1em;
	}

	.form-field {
		clear: both;
		padding-bottom: 1em;

		label {
			width: 100px;
			float: left;
			text-align: right;
			padding-right: 10px;
		}

		select, textarea, input {
			
		}
		input[type=submit] {
			.light-button;
			.font-arvo(1em);
			padding: 0.3em 1em;
			margin-left: 112px;
		}
	}
}


/* ACHIEVEMENTS PAGE */
.achievements-page {
	padding: 2em;
	h1 {
		.font-arvo(2em);
		margin: 1em 0;
	}

	.badge {
		display: block;
		position: relative;
		float: left;
		width: 16%;
		margin: 10px 0.7%;
		padding: 15px 1%;
		height: 195px;
		text-align: center;
		border: 1px solid @secondary-green;
		outline: 2px solid @secondary-green;

		h2 {
			.font-arvo(1.1em);
			margin: 0.3em 0 0.5em;
		}

		p { text-align: left; }

		&.unattained { 
			opacity: 0.4; 
			border-color: #ddd;
			outline: none;
			.transition;
			&:hover { opacity: 1.0; .transition; }
		}
	}
	
	.share-module {
		opacity: 0.3;
		width: 88px;	// To force min-width
		position: absolute;
		bottom: 5px;
		right: 50%;
		margin-right: -44px;
		.transition;
		&:hover {
			opacity: 1;
		}
	}
}

.achievementWrapper {
	padding: 1em;
	text-align: center;
	h3 {
		.font-arvo(1.1em);
		margin: 0.3em 0 0.6em;
	}
	
	.share-module {
		margin-top: 25px;
		opacity: 0.5;
		.transition;
		&:hover {
			opacity: 1;
		}
		
	}
}

/* UPLOAD VIEW */
.photo-uploader {
	padding: 1.5em;

	h1 {
		.font-arvo(1.25em);
		margin-bottom: 1em;
	}

	p {
		margin-bottom: 1.2em;
	}

	.done {
		.light-button;
		padding: 0.3em 1em;
		.font-arvo(1em);
		margin: 1em 0;
		display: block;
		width: 10%;
		text-align: center;
	}
}

/* ACCOUNT CREATION */
.account-creation {
	padding: 2em;
	position: relative;

	h1 {
		.font-arvo(2em);
		margin: 0 0 0.8em;
	}

	h2 {
		.font-arvo(1.2em);
		margin: 0 0 2.3em;
		color: #777;
	}
	
	#facebookButton {
		font-size: 1.25em;
		position: absolute;
		top: 26px;
		right: 26px;
	}

	p {
		margin: 0.3em 0;
	}
	
	.form-field { padding: 0.3em 0; }
	
	.birthday span { padding-right: 1em; }

	.gender {
		p {
			float: left;
			display: block;
			width: 100px;

			label { 
				float: none; 
				padding: 0 0 0 1em; 
				display: inline; 
				text-align: left; 
			}
		}
	}

	label {
		width: 100px;
		float: left;
		text-align: right;
		padding-right: 2em;
	}
	.date-preferences label {
		float: right;
		text-align: left;
		width: 180px;
		padding-right: 0;
	}
	.date-preferences {
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	input[type=password], input[type=text] { 
		.default-field; 
		&[name=fName], &[name=lName], &[name=email], &[name=password] { width: 215px; }
	}

	input[type=submit], button {
		.light-button;
		.font-arvo(1em);
		padding: 0.4em 1.2em;
	}

	input[type=submit] {
		margin-left: 126px;
		margin-top: 0.9em;
	}

	&.step2 {
		h2 {
			margin-bottom: 0.5em;
		}

		.congrats {
			margin-bottom: 1.5em;
		}

		#sigOtherForm {
			margin-bottom: 2.5em;
		}

		input[type=submit] {
			margin: 10px 0 0 10px;
		}

		
		
		.done-link { margin-top: 1.2em; }

		a.done {
			font-size: 0.85em;
			text-transform: uppercase;
			color: #777;
			text-decoration: underline;
			&:hover { color: #444; }
		}
	}
}

/* COMBINED DATE PAGE */
.combined-date-page {
	padding: 2em;
	
	.date-idea-header {
		position: relative;
		margin-bottom: 15px;
		
		.stats,
		.title-and-description {
			vertical-align: top;
		}
		
		.stats {
			display: inline-block;
			//margin-top: -5px;
			vertical-align: top;
			.ratingWrapper {
				display: block;
				margin: 5px 0;
			}
		}
		
		.primary-info {
			display: inline-block;
			margin-left: 20px;
			max-width: 650px;
			h1 {
				.font-arvo(2.5em);
				margin-bottom: 3px;
			}			
			.day {
				//.font-arvo(1.2em);
				font-style: italic;
				color: #888;
				//margin-top: 5px;
			}
		}
		
		.controls {
			float: right;
			text-align: right;

			.share-module {
				margin: 5px 0 8px 0;
				position: static;
				display: block;
			}
			.edit {
				.light-button;
				padding: 0.3em 1.2em;
				.font-arvo(1em);
				text-align: center;
			}
		}
	}
	
	#mapWrapper {
		#datePathButtons {
			text-align: center;
			padding: 0.35em 0;
			
			button {
				.light-button;
				.font-arvo(1em);
				padding: 0.3em 1em;
			}
		}
	}
	
	#placeSynopsis {
		.body {
			padding: 1em;
		}
		
		.listing {
			margin: 0;
		}
	}
	
	.people {
		.body {
			//padding: 1.5em;
			.division {
				padding: 1em;
				border-bottom: 1px dotted #DADBCC;
				&:last-child {
					border-bottom: none;
				}
				//background: #E5F39B;
				//&:nth-child(odd) {
				//  	//background: #E5F39B;
				//  	background: #F6FCD0;
				//  	background: #FAFBEF;
				//}
				//&:nth-child(even) {
				//  	//background: #E5F39B;
				//  	//background: #F6FCD0;
				//  	background: #FAFBEF;
				//  	background: #F6FCD0;
				//}
			}
			h2 {
				.font-arvo(1.2em)
			}
			.people-sub-content {
				padding: 1em;
				//margin-left: 10px;
			}
			.pear-header {
				float: left;
				margin: 0 5px 5px 0;
				a {
					//.pear-stamp(#FAFBEF);
					.name {
						display:none;
					}
					img {
						//width: 75px;
					}
				}
			}
			.story-author {
				margin-left: 30px;
				font-style: italic;
			}
			.add-photos {
				float: right;
				a#dateAddPhotos {
					.light-button;
					padding: 0.3em 1.2em;
					.font-arvo(1em);
				}
			}
			.see-more {
				display: block;
				width: 50px;
				margin-left: auto;
				//margin-right: auto;
				//margin-top: 5px;
				.light-button;
				padding: 0.3em 1.2em;
				.font-arvo(1em);	
				text-align: center;				
				//float: right;
				//.light-button;
				//display: block;
				//text-align: right;
				////text-align: center;
				//padding-right: 6px;
				////margin-left: auto;
				////padding-right: 6px;
				//cursor: pointer;
			}
			.albums {
			padding-bottom: 0.5em;
				.album-picture {
					img {
						width: 147px;
					}
				}
				
			}
		}
	}
	
	.right {
		width: 40%;
		float: right;
		display: block;

		.module { margin-right: 0; }
	}
	
	.left {
		width: 60%;
		float: left;
		display: block;
		
		.module { margin-left: 0; }
	}
}