@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

.data-network
{
	.project
	{
		width: 300px;
		height: 320px;
		border: 1px solid #ccc;
		display: inline-block;
		vertical-align: top;
		.margin-left-right(25px, 0);
		text-align: center;
		position: relative;

		html[dir='rtl'] &
		{
			.margin-left-right(0, 25px);
		}

		a.logo
		{
			display: block;
			width: inherit;
			height: 125px;
		}

		h3
		{
			font: bold 12.5pt @title-font;
			margin: 10px 5px 0 5px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			display: block;
		}

		span
		{
			font: 9.5pt @text-font;
			padding: 10px;
			text-align: left;
			display: block;

			&.pending
			{
				color: @accent-color;
				font: bold 10pt @title-font;
				text-align: center;
			}
		}

		div.action
		{
			position: absolute;
			bottom: 10px;
			left: 0;
			right: 0;
			text-align: center;

			a
			{
				border-radius: 3px;
				padding: 7px 15px;
				font: bold 9.5pt @title-font;
				margin: 5px 0 10px 0;
				text-decoration: none;
				color: #fff;
				background-color: @accent-color;
				display: inline-block;
			}
		}
	}

	&.landing
	{
		.get-started
		{
			border-top: 2px solid @accent-color;
			height: 300px;
			background: url(/img/v4/network/bg_shadow.png) repeat-x bottom;

			div.stat
			{
				width: 830px;
				height: 270px;
				margin: 0 auto;

				h1
				{
					font: bold 30pt @title-font;
					text-align: center;
					margin: 0;
					padding: 35px 0 10px 0;
				}

				ul
				{
					margin: 10px 0 20px 0;
					padding: 0;
					text-align: center;

					div.img
					{
						width: 66px;
						height: 66px;
						float: left;

						&.countries
						{
							.hires('/img/v4/network/icon_stat');
							background-position: 0 0;
						}


						&.locations
						{
							.hires('/img/v4/network/icon_stat');
							background-position: -66px 0;
						}

						&.collectors
						{
							.hires('/img/v4/network/icon_stat');
							background-position: -132px 0;
						}

						&.paid
						{
							.hires('/img/v4/network/icon_stat');
							background-position: -198px 0;
						}
					}

					div.value
					{
						display: inline-block;
						margin-left: 10px;
					}

					li
					{
						display: inline-block;
						list-style-type: none;
						font: bold 13pt @title-font;
						text-align: center;
						.margin-left-right(0, 50px);

						html[dir='rtl'] &
						{
							.margin-left-right(50px, 0);
						}

						&:last-child
						{
							margin-right: 0;
						}

						span
						{
							display: block;
							font: 30pt @title-font;
						}

						label
						{
							position: relative;
							top: -8px;
							color: #8D8D8D;
							font-weight: normal;
						}
					}
				}

				h2
				{
					font: 14pt @title-font;
					text-align: center;
					background: url(/img/v4/network/select_text.png) no-repeat right center;
					width: 560px;
					height: 58px;
					line-height: 50px;
					margin: auto;

					span
					{
						font-weight: bold;
					}
				}
			}
		}

		.projects
		{
			background: url(/img/v4/network/gray_gradient.png) repeat-x left bottom;
			padding: 30px 0;

			div.items
			{
				width: 680px;
				margin: auto;
			}
		}

		div.android-app
		{
			background: url(/img/v4/network/android_app.png) right top no-repeat;
			height: 283px;
			width: 1230px;
			margin: 30px auto 10px auto;

			html[dir='rtl'] &
			{
				background: url(/img/v4/network/android_app.png) left top no-repeat;
			}

			div
			{
				width: 250px;
				position: relative;
				top: 40px;
				left: 370px;

				html[dir='rtl'] &
				{
					right: 370px;
				}

				h2
				{
					font: bold 20pt @title-font;
					margin: 0;
				}

				span
				{
					background: url(/img/v4/network/android_googleplay_btn.png);
					width: 159px;
					height: 52px;
					display: block;
					margin-top: 20px;
				}
			}
		}
	}

	&.project-landing
	{
		min-height: 202px;
		margin-top: -10px;

		div.header.food-prices
		{
			background: url(/Img/v4/network/headpic_food.jpg) no-repeat;
			height: 202px;

			span
			{
				color: #24871D;
			}
		}

		div.header.health-services
		{
			background: url(/Img/v4/network/headpic_health.jpg) no-repeat;
			height: 202px;

			span
			{
				color: @accent-color;
			}
		}

		div.content
		{
			h2
			{
				font: bold 16pt @title-font;
				margin: 20px auto 0 auto;
				width: 630px;
				text-align: center;

				span
				{
					color: #24871D;
				}
			}

			h3
			{
				font: 12pt @title-font;
				text-align: center;

				span
				{
					font: bold 15pt @title-font;
				}
			}

			div.join
			{
				text-align: center;

				a.ui-button
				{
					padding: 8px 20px;
					font: bold 16pt @title-font;
					margin-top: 10px;
					padding: 7px 25px;
					border-radius: 3px;
				}

				span
				{
					font: bold 12pt @title-font;
				}
			}

			ul
			{
				width: 400px;
				padding: 0;
				margin: 20px auto;

				li
				{
					font: 11.5pt @title-font;
					padding: 5px;

					ul.services
					{
						margin-left: 30px;
					}
				}
			}
		}
	}

	div.join.bid
	{
		div.header
		{
			width: 100%;
			height: 202px;

			&.food-prices
			{
				background: url(/Img/v4/network/headpic_food.jpg) no-repeat;
			}

			&.health-services
			{
				background: url(/Img/v4/network/headpic_health.jpg) no-repeat;
			}
		}

		div.description
		{
			padding: 15px;

			h1
			{
				font: bold 14pt @title-font;
				width: 600px;
				margin: auto;
				text-align: center;
			}

			h2
			{
				font: bold 11pt @title-font;
				margin: 20px 0;

				&.food-list
				{
					color: @accent-color;
					text-align: center;
				}
			}

			div.call-to-action
			{
				font: bold 11.5pt @title-font;
				color: #0077ca;
				margin: 20px 0;
				text-align: center;
			}

			div.send-bid
			{
				padding: 0 0 25px 200px;
				border: 1px solid #eaeaea;
				background-color: #f9f9f9;

				div.callback
				{
					margin-top: 10px;
					font: bold 10pt @title-font;
				}
			}

			ul.items
			{
				display: inline-block;
				margin: 0 40px 20px 0;
				width: 270px;
				vertical-align: top;
				padding: 0;

				&.last
				{
					margin-right: 0;
				}

				li
				{
					list-style-type: none;
					padding: 3px;
					font: 10.5pt @title-font;
				}
			}

			p
			{
				font: 10.5pt @text-font;
			}

			div.project-comments div.comments
			{
				overflow-y: hidden;
				max-height: none;

				div.text
				{
					width: 730px;
				}
			}

			h3
			{
				font: bold 11pt @title-font;
				margin: 0;
				margin-top: 20px;
			}

			div.location
			{
				display: inline-block;
				margin-right: 25px;
				margin-top: 20px;

				label
				{
					font: bold 11pt @title-font;
					display: block;
				}
			}

			.location select
			{
				padding: 5px;
				width: 195px;
			}

			.chzn-container-single .chzn-single
			{
				border: 1px solid #9bd2fe;
				padding: 5px;
				width: 180px;
				background-color: white;

				&.required
				{
					border: 1px solid #c13a3f;
					outline-color: #c13a3f;
				}
			}

			input.price
			{
				display: block;
				font: bold 10.5pt @title-font;
				padding: 10px;
				border: 1px solid #9bd2fe;
				width: 400px;

				&.default
				{
					color: gray;
				}
			}

			textarea
			{
				display: block;
				padding: 10px;
				width: 400px;
				height: 100px;
				border: 1px solid #9bd2fe;
				font: 10.5pt @text-font;

				&.default
				{
					color: gray;
				}
			}

			.error-message
			{
				display: none;
				margin-top: 10px;
				color: @error-color;
				font-size: 10.5pt;
			}

			a.ui-button
			{
				padding: 8px 20px;
				font: bold 10.5pt @title-font;
				margin-top: 10px;
				border-radius: 2px;
			}

			input.required, textarea.required
			{
				border: 1px solid #c13a3f;
				outline-color: #c13a3f;
			}
		}
	}

	div.dashboard
	{
		div.approved
		{
			.info
			{
				display: inline-block;
				vertical-align: top;
				border-right: 1px solid #eaeaea;
				margin-top: 10px;
				.padding-left-right(0, 15px);
				.margin-left-right(0, 15px);
				padding-bottom: 30px;
				width: 125px;

				html[dir='rtl'] &
				{
					border-right: none;
					border-left: 1px solid #eaeaea;
					.margin-left-right(15px, 0);
					.padding-left-right(15px, 0);
				}

				label
				{
					font: bold 11pt @title-font;
					cursor: default;
				}

				div.balance
				{
					span
					{
						display: block;
						font: 26pt @title-font;
					}

					a
					{
						display: none;
						border-radius: 3px;
						padding: 7px 8px;
						font: bold 9pt @title-font;
						margin-top: 5px;
					}
				}

				div.rating
				{
					margin-bottom: 20px;

					a
					{
						color: @accent-color;
						font: 9pt @title-font;
						text-decoration: none;
					}
				}
			}

			.recent-submissions
			{
				display: inline-block;
				width: 750px;
			}

			.no-submissions
			{
				font: 10pt @title-font;
			}

			hr
			{
				margin-top: 40px;
			}

			h2
			{
				font: bold 12.5pt @title-font;
				margin: 15px 0;
				color: @accent-color;
			}

			table.submissions
			{
				width: 100%;

				tr
				{
					background-color: transparent;
				}

				th, td
				{
					font: 9.5pt @title-font;
					padding: 2px 5px;
					text-align: left;
					display: inline-block;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow-x: hidden;
					height: 25px;

					a
					{
						color: @accent-color;
						font-weight: bold;
					}

					&.time
					{
						width: 100px;
					}

					&.region
					{
						width: 185px;
					}

					&.proj
					{
						width: 110px;
					}

					&.status
					{
						width: 85px;
					}

					&.rating
					{
						width: 160px;
					}

					&.view
					{
						width: 30px;
					}
				}

				td
				{
					border-top: 1px solid #eaeaea;
				}

				th
				{
					font-weight: bold;
				}
			}

			a.browse-submissions
			{
				font: bold 10pt @title-font;
				color: @accent-color;
				text-decoration: none;
				border-bottom: 1px dotted;
				display: inline-block;
				margin-top: 15px;
			}

			.project
			{
				margin-bottom: 20px;
				.margin-left-right(0, 40px);
				width: 270px;

				html[dir='rtl'] &
				{
					.margin-left-right(40px, 0);
				}

				a.logo
				{
					display: block;
					.hires('/img/v4/network/icon_project_white');
					background-position: center center;
					background-repeat: no-repeat;
					width: inherit;
					height: 110px;
				}


				&:nth-child(3n+3)
				{
					margin-right: 0;

					html[dir='rtl'] &
					{
						margin-left: 0;
					}
				}
			}
		}

		div.pending
		{
			padding: 20px 0;

			h1
			{
				font: bold 14pt @title-font;
				background: url(/img/v4/network/select_text.png) no-repeat right center;
				margin: 0 auto;
				width: 240px;
				height: 58px;
				line-height: 50px;
				text-align: center;
			}

			h2
			{
				font: bold 25pt @title-font;
				color: black;
				text-align: center;
				margin: 30px 0;
				unicode-bidi: embed;

				span
				{
					color: #5EA90A;
				}
			}

			div.statistics
			{
				width: 660px;
				margin: auto;
				padding: 30px 0;
				border-radius: 5px;
				border: 1px solid #C8C8C8;
				background-color: #fff;

				h3
				{
					font: 18pt @title-font;
					text-align: center;
					margin: 0 0 25px 0;
				}

				ul
				{
					margin: 0;
					padding: 0;
					text-align: center;

					li
					{
						display: inline-block;
						list-style-type: none;
						font: bold 13pt @title-font;
						text-align: center;
						.margin-left-right(15px, 0);

						div.img
						{
							width: 66px;
							height: 66px;
							float: left;

							&.countries
							{
								.hires('/img/v4/network/icon_stat');
								background-position: 0 0;
							}


							&.locations
							{
								.hires('/img/v4/network/icon_stat');
								background-position: -66px 0;
							}

							&.collectors
							{
								.hires('/img/v4/network/icon_stat');
								background-position: -132px 0;
							}

							&.paid
							{
								.hires('/img/v4/network/icon_stat');
								background-position: -198px 0;
							}
						}

						div.value
						{
							display: inline-block;
							margin-left: 10px;
						}

						html[dir='rtl'] &
						{
							.margin-left-right(0, 15px);
						}

						span
						{
							display: block;
							font: 26pt @title-font;
							text-align: left;
						}

						label
						{
							font: 10.5pt @title-font;
							position: relative;
							top: -8px;
							color: #8D8D8D;
						}
					}
				}
			}

			.projects
			{
				margin-top: 50px;
				.margin-left-right(130px, 0);

				html[dir='rtl'] &
				{
					.margin-left-right(0, 130px);
				}
			}
		}
	}
}

div.how-improve-rating
{
	display: none;
	overflow: hidden;

	h2
	{
		font: bold 12.5pt @title-font;
		margin: 0;
	}

	h3
	{
		font: 10pt @title-font;
		color: #515151;
		margin: 5px 0 0 0;
	}

	div.slider
	{
		padding: 20px 0;
		position: relative;
		width: 2200px;

		div.slide
		{
			display: inline-block;
			width: 540px;

			div.icon
			{
				margin: 0 20px;
				display: inline-block;
				width: 211px;
				height: 222px;
				vertical-align: middle;
				background-repeat: no-repeat;
				background-position: center center;
			}

			div.desc
			{
				display: inline-block;
				font: 11pt @title-font;
				width: 250px;
				vertical-align: middle;
			}
		}

		div.smartphone
		{
			div.icon
			{
				.hires('/img/v4/network/ico_01');
				margin-right: 30px;
			}

			div.desc a
			{
				width: 159px;
				height: 52px;				
				background: url(/img/v4/network/android_googleplay_btn.png);
				display: block;
				margin-top: 20px;
			}
		}

		div.location div.icon
		{
			.hires('/img/v4/network/ico_02');
		}

		div.markets div.icon
		{
			.hires('/img/v4/network/ico_03');
		}

		div.schedule div.icon
		{
			.hires('/img/v4/network/ico_04');
		}
	}

	div.nav
	{
		text-align: center;

		a
		{
			font: bold 9.5pt @title-font;
			padding: 6px 20px;
			border-radius: 2px;
		}

		ul
		{
			padding: 0;
			margin: 0 0 15px 0;

			li
			{
				list-style-type: none;
				display: inline-block;
				.hires('/img/v4/network/paginator');
				width: 7px;
				height: 7px;
				background-position: -7px 0;
				margin-right: 7px;

				&.active
				{
					background-position: 0 0;
				}
			}
		}
	}
}

img#postback-tracking-pixel
{
	display: none;
}