body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #3b3b3b;	
}

p strong {
	font-weight: bold;
}

.grayOut {
	color: #ccc;
}

#container {
	position: relative;
}

#loading {
	position: absolute;
	left: 50%;
	top: 200px;
	margin-left: -50px;
	z-index: 100;
	width: 100px;
	height: 100px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;	
    opacity: 0.7;
    filter: alpha(opacity = 70);
	background: #333 url(/img/loading.gif) no-repeat 35px 35px;
}

#footer {
	clear: both;
	width: 100%;
	height: 80px;
	padding: 0;
	background-color: #f9f9f9;
	bottom: 0;
	border-top: 1px solid #f0f0f0;
}

	#footer div.footerContent {
		width: 900px;
		margin: 0 auto;
		padding: 22px 10px 18px;
	}
	
		#footer div.footerContent div.footerNavi {
		
		}
		
			#footer div.footerContent div.footerNavi span.separator {
				margin: 0 10px;
				color: #c1c1c1;
			}
	
			#footer div.footerContent div.footerNavi a {
				text-decoration: none;
				color: #777;
			}
			
		#footer div.notes {
			margin-top: 10px;
			font-size: 12px;
			color: #c1c1c1;
		}
	
		#footer div.footerContent div.sponsors {
			margin-top: 4px;
			float: right;
		}
		
a#bigLogo {
	display: block;
	position: absolute;
	width: 509px;
	height: 142px;
	left: 50%;
	margin-left: -260px;
	top: 60px;
	background: url(/img/name-cover.png) no-repeat left top;
}

div#header {
	background-color: #ffba00;
	height: 190px;
	overflow: hidden;
}

	div#header a#smallLogo {
		position: absolute;
		left: 20px;
		top: 20px;
		display: none;
		width: 211px;
		height: 45px;
		background: url(/img/name-hdr.png) no-repeat left top;
	}
	
	div#header #backToBrowsing {
		position: absolute;
		left: 255px;
		top: 25px;
		border: none;
		background: url(/img/buttons/back-bg.png) no-repeat left top;
		padding-left: 35px;
	}
	
		div#header #backToBrowsing:hover {
			background: url(/img/buttons/back-bg-hover.png) no-repeat left top;
		}

div#shortList {
	display: none;
	overflow: hidden;
	line-height: 80px;
	background: #eeeeee url(/img/shortlist-icon.png) no-repeat 30px 15px;
}

* html div#shortList {
	height: 80px;
}

	div#shortList div.title {
		color: #888;
		font-size: 18px;
		padding-left: 80px;
		float: left;
		margin-right: 20px;
		line-height: 80px;
	}
	
	div#shortList div.nameStack {
		padding-top: 23px;
		float: left;
	}
	
		div#shortList div.nameStack div.badge,
		div#matchingNameStack div.badge {
			position: relative;
			padding-right: 18px;
		}
	
	div#shortList div.actionStack {
		float: left;
		padding-top: 23px;
	}
	
		div#shortList div.actionStack div.badge,
		div.badge.action {
			margin-top: 1px;
			border: 0;
			color: #fff;
			background-color: #555;
		}
		
			div#shortList div.actionStack div.badge span.name,
			div.badge.action span.name {
				padding-left: 5px;
				padding-right: 5px;
			}
			
			div.badge.action span.delete {
				display: block;
				width: 20px;
				height: 20px;
				margin-right: 7px;
				background: url(/img/buttons/x.png) no-repeat center center;
			}
		
		div#shortList div.actionStack div.badge:hover,
		div.badge.action:hover {
			background-color: #333;
			border-color: #fff;
		}
		
#content {
	width: 900px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
}
	
	#content h2 {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
		padding-top: 20px;
		color: #999;
	}
	
	#content h2:first-child {
		padding-top: 0;
	}
	
	#content img.namefyTeam {
		float: right;
		margin-top: -45px;
		margin-left: 30px;
		height: 231px;
		width: 649px;
	}
	
	#content p {
		margin: 0 0 10px 0;
		line-height: 22px;
	}
	
	#content a {
		color: #2177c8;
	}
	
	#content div.frontPagePromo  p {
		text-align: center;
	}
	
	#content div#names {
		margin-top: 40px;
		width: 590px;
		float: right;
	}
	
		#content div#names div.badge {
			position: relative;
			margin: 0 5px 5px 0;
			padding-right: 40px;
		}
	
	#content div.horStack {

	}
	
		#content div.horStack div.stackItem {
			float: left;
		}
		
		#content div.horStack div.stackItem:first-child {
			margin-left: 0;
		}
		
		#content div.horStack div.stackItem.last {
			margin-right: 0;
		}

/* Content columns */
		
	#content div.columns {
		clear: both;
		height: 100%;
		overflow: hidden;
	}
	
	#content div.columns.formers {
		padding-top: 40px;
	}
	
		#content div.columns.formers a {
			text-decoration: none;
			color: #333;
		}
	
		#content div.columns div.leftColumn {
			width: 400px;
			float: left;
		}

		#content div.columns div.rightColumn {
			width: 400px;
			float: right;
		}
		
				
div.firstView {
	height: 100%;
	overflow: hidden;
	width: 650px;
	margin: 0 auto;
}	

	div.firstView div.horStack {
		width: 510px;
		height: 80px;
		margin: 0 auto;
	}
	
	div.firstView div.stackItem {
		font-size: 18px;
		line-height: 40px;
		height: 40px;
	}
	
	div.firstView div.languageBlock {
		float: left;
		width: 380px;
	}
	
		div.firstView div.languageBlock label {
			cursor: pointer;
			float: left;
			width: 180px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	
	div.firstView div.genderBlock {
		margin-right: 20px;
		float: right;
		width: 240px;
	}
	
		div.firstView div.genderBlock a.genderBox {
			display: block;
			float: left;
			width: 112px;
			height: 103px;
			margin-bottom: 20px;
		}
		
		div.firstView div.genderBlock a.genderBox.boy {
			background: url(/img/g-boy.png) no-repeat top left;
		}
		
			div.firstView div.genderBlock a.genderBox.boy:hover {
				background: url(/img/g-boy.png) no-repeat 0 -117px;
			}
		
		div.firstView div.genderBlock a.genderBox.girl {
			margin-right: 10px;
			background: url(/img/g-girl.png) no-repeat top left;
		}
		
			div.firstView div.genderBlock a.genderBox.girl:hover {
				background: url(/img/g-girl.png) no-repeat 0 -117px;
			}
	
	div.firstView div.stackItem.inputBlock {
		margin-right: 10px;
	}
	
	input.genericTextbox {
		width: 200px;
		height: 18px;
		font-size: 18px;
		line-height: 24px;
		padding: 4px;
	}


#content .specificView,
#container .specificView {
	display: none;
}

#filters {
	padding-right: 20px;
	margin-top: 40px;
	float: left;
	width: 260px;
	min-height: 200px;
	margin-right: 20px;
}

	#filters #matchingName {
		width: 170px;
	}
	
	#filters div.row {
		padding: 10px 0;
		clear: both;
	}
	
	#filters div.row.textFields {
		line-height: 40px;
	}
	
	#filters div.row:first-child {
		padding-top: 0;
	}
	
		#filters div.row div.innerRow {
			padding: 5px 0;
			line-height: 20px;
		}
		
			#filters div.row div.innerRow label {
				cursor: pointer;
			}
				
	#filters div.row div.badge {
		clear: both;
	}
	
#moreNames {
	position: absolute;
	top: 25px;
	right: 25px;
}

div.badge {
	display: block;
	cursor: pointer;
	float: left;
	margin: 0 5px 5px 0;
	padding: 6px 0 6px 8px;
	border: 1px solid #e2e7e0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	line-height: 20px;
	background-color: #fff;
	zoom: 1;
}

	div.badge:hover {
		border-color: #9dcb8b;
	}
	
	div.nameStack div.badge:hover,
	#filters div.badge:hover {
		border-color: #999;
	}

	div.badge span.name {
		margin-right: 6px;
	}

	div.badge span.up,
	div.badge span.down,
	div.badge span.remove {
		display: block;
		cursor: pointer;
		width: 20px;
		height: 20px;
	}
	
	div.badge span.remove {
		position: absolute;
		top: 7px;
		right: 0;
	}
	
	div.badge span.up {
		position: absolute;
		top: 7px;
		right: 20px;
	}
	
	div.badge span.down {
		position: absolute;
		top: 7px;
		right: 0px;
	}

	div.badge span.up {
		background: url(/img/thumbs-up.png) no-repeat left top;
	}

		div.badge span.up.active,
		div.badge span.up:hover {
			background: url(/img/thumbs-up.png) no-repeat left -30px;
		}
		
	div.badge span.remove {
		background: url(/img/shortlist-remove.png) no-repeat -3px top;
	}

		div.badge span.remove.active,
		div.badge span.remove:hover {
			background: url(/img/shortlist-remove.png) no-repeat -3px -20px;
		}

	div.badge span.down {
		background: url(/img/thumbs-down.png) no-repeat left top;
	}

		div.badge span.down.active,
		div.badge span.down:hover {
			background: url(/img/thumbs-down.png) no-repeat left -30px;
		}
		
div.compareView {
	display: none;
}
		
div.compareView div.pickedNames {
	float: left;
	width: 600px;
}

	div.compareView div.pickedNames div.nameBlock {
		line-height: 32px;
		height: 100%;
		overflow: hidden;
		margin-bottom: 5px;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #f2f2f2;
		padding: 10px;
	}
	
	div.compareView div.pickedNames div.nameBlock.dummy {
		display: none;
	}
	
	div.compareView div.pickedNames div.nameBlock:hover {
		border: 1px solid #eedcac;
		background-color: #ffeec0;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.10);
		-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.10);
		box-shadow: inset 0 0 8px rgba(0,0,0, 0.10);
	}
	
		div.compareView div.pickedNames div.nameBlock span.categories {
			float: left;
			color: #888;
			margin: 0 10px;
			font-size: 14px;
		}
	
		div.compareView div.pickedNames div.nameBlock strong.name {
			float: left;
			font-size: 30px;
			font-weight: bold;
			margin-right: 10px;
		}
		
		div.compareView div.pickedNames div.nameBlock div.actions {
			float: right;
		}
		
			div.compareView div.pickedNames div.nameBlock div.actions div.badge {
				margin: 0 0 0 5px;
				border: none;
			}
		
div.compareView div.shareBlock {
	padding-top: 7px;
	float: right;
	width: 250px;
}

div.compareView div.shareBlock div.shareButtons {
	overflow: hidden;
	height: 100%;
}

	div.compareView div.shareBlock div.shareButtons a.shareButton {
		display: block;
		float: left;
		height: 32px;
		width: 32px;
		margin-right: 8px;
	}
		
	div.compareView div.shareBlock div.shareButtons a.facebook {
		background: url(/img/icons/facebook-32x32.png) no-repeat top left;
	}
	
	div.compareView div.shareBlock div.shareButtons a.twitter {
		background: url(/img/icons/twitter-32x32.png) no-repeat top left;
	}

	div.compareView div.shareBlock div.shareButtons a.stumble {
		background: url(/img/icons/su-32x32.png) no-repeat top left;
	}
	
	div.compareView div.shareBlock div.shareButtons a.email {
		background: url(/img/icons/email-32x32.png) no-repeat top left;
	}