@import "common.less";


// STANDARD PAGE

.standardPage {
	.txt {
		float: left;
		width: 370px;
	}
}



// RELATED

.relatedBox {
	float: right;
	width: 65px;
	padding-left: 12px;
	border-left: 1px solid @brown-sky;
	font-size: 11px;
	
	.socialMedia {
		span:first-child {
			margin-top: 0;
		}
		span {
			display: block;
			margin-top: 6px;
		}
	}
}



// NEWS ENTRY 

.entry.news {
	.txt {
		float: left;
		width: 370px;
	}
}

// NEWS OVERVIEW 
/*
.overview.news {
	.entry:first-child {
		margin-top: 0;
	}
	.entry {
		margin-top: 12px;
		padding-bottom: 2px;
		border-bottom: 1px solid @brown-smoke;
		.date {
			margin-bottom: 2px;
		}
	}
}
*/

// NEWS FEED

.feed.news {
	.entry {
		position: relative;
		padding: 4px 0;
		margin-bottom: 6px;
	}

	.date {
		position: absolute;
		top: 4px;
		left: 0;
		text-align: right;
		width: 38px;
		line-height: 11px;

		span:first-child {
			font-size: 12px;
			color: @brown-sand;
		}
		span {
			font-size: 10px;
			font-weight: bold;
			color: @brown-smoke;
		}
	}
	
	.info {
		margin-left: 46px;
		padding-left: 8px;
		border-left: 1px solid @brown-smoke;
	}
}


// SUPPORT WIDGET 

.widget.support {
	position: relative;

	.preamble {
		padding-right: 75px; 
	}
	
	.image {
		float: right;
		display: block;
		width: 70px;
		height: 85px;
		background: url('../gfx/sprite/common.png') -10px -10px;
	} 
}


// DEAL 

.dealReview {
	.topbar {
		margin-bottom: 10px;
	}
	.screens {
		border-top: 1px solid @brown-smoke;
		height: 140px;
		padding-top: 14px;
		margin-bottom: 20px;
		.entry {
			display: block;
			float: left;
			width: 220px;
			height: 140px;
			background: url('../gfx/sprite/common.png') -90px -10px;
			margin-left: 20px;
			outline: none;
			&:first-child {
				margin-left: 0;
			}
			img {
				margin: 4px;
			}
		}
	}
}

.dealDetails {
	margin-bottom: 24px; 

	tr:hover th,
	tr:hover td {
		background: @brown-dust;
	}
	
	th, td {
		border-bottom: 1px solid @brown-sky;
		padding: 4px 0;
		line-height: 15px;
	}
	
	th {
		white-space: nowrap;
		padding-right: 20px;
		font-size: 11px;
		color: @brown-sand;
		text-transform: uppercase;
		font-weight: bold;
	}
	td {
		font-size: 12px;
	}
}

.dealActivate {
	.inputWrapper {
		margin: 10px 0 12px;
	}
}

.dealType {
	a {
		margin-top: 10px;
		position: relative;
		display: block;
		height: 75px;
		background: url('../gfx/sprite/common.png') -320px -10px;
		text-decoration: none;
		color: @blue-smoke;
		.text-shadow(0, 0, 3px, @blue-ocean);
		
		&:hover {
			color: #fff;
			background-position: -320px -90px;
		}
		span:first-child {
			top: 7px;
			font-size: 26px;
		}
		span {
			position: absolute;
			top: 48px;
			text-align: center;
			display: block;
			width: 100%;
		}
	}
}



// PROMOTIONS FEED

.promo_carousel {
	position: relative;
	display: block;
	height: 140px;
	background: url(../gfx/bg/promo_carousel.png) no-repeat;
	.stats {
		display: none;
	}
	.nav {
		position: absolute;
		right: 5px;
		bottom: -2px;
		text-align: left;
		.button {
			float: left;
			display: block;
			width: 12px;
			height: 12px;
			background: url('../gfx/sprite/icons.png') -170px -90px;
			&.current,
			&.current:hover {
				background: url('../gfx/sprite/icons.png') -130px -90px;
			}
			&:hover {
				cursor: pointer;
				background: url('../gfx/sprite/icons.png') -150px -90px;
			}
		}
	}
	
	.entry {
		position: absolute;
		top: 4px;
		left: 4px;
		display: block;
		width: 452px;
		height: 120px;
		background: center center no-repeat;
		text-decoration: none;
		.headline {
			z-index: 30;
			position: absolute;
			top: 16px;
			left: 15px;
			color: @brown-sand;
		}
		.preamble {
			z-index: 30;
			position: absolute;
			top: 46px;
			left: 15px;
			color: @brown-sand;
			line-height: 20px;
			.text-shadow(0,0,3px,@brown-dust);
			.arrow {
				line-height: normal;
				position: relative;
				display: inline-block;
				padding-left: 18px;
				color: @blue-ocean;
				span {
					position: absolute;
					top: 3px;
					left: 6px;
					display: block;
					width: 10px;
					height: 16px;
					background: url('../gfx/sprite/icons.png') -100px -60px;
				}
			}
		}
		.arrowLink {
			position: absolute;
			top: 96px;
			left: 15px;
		}
		&:hover .headline,
		&:hover .preamble {
			color: @brown-shine;
			span {
				color: @brown-shine;
			}
		}
	}
}



// PROMOTIONS FEED

.feed.promotions {
	padding-top: 6px;
	.promoThumb {
		position: relative;
		display: inline-block;
		width: 220px;
		height: 110px;
		background: url(../gfx/bg/promo_thumb.png) no-repeat;
		text-decoration: none;
		margin: 0 10px 4px;
		float: left;
		.image {
			position: absolute;
			top: 4px;
			left: 4px;
			display: block;
			width: 212px;
			height: 88px;
			background: bottom center no-repeat;
		}
		.headline {
			z-index: 30;
			position: absolute;
			top: 16px;
			left: 15px;
			color: @brown-sand;
			line-height: 23px;
		}
		.arrowLink {
			position: absolute;
			top: 72px;
			left: 15px;
		}
		&:hover .headline {
			color: @brown-shine;
			span {
				color: @brown-shine;
			}
		}
	}
}

.toplist {
	.entry {
		position: relative;
		.review {
			display: block;
			height: 60px;
			border-bottom: 1px solid @brown-smoke;
			position: relative;
			text-decoration: none;
		}
	}
}
	

.toplist {
	&.rakeback {
		.logo {
			position: absolute;
			top: 8px;
		}
		.btn {
			position: absolute;
			top: 15px;
			right: 0;
			z-index: 300;
		}
		.name {
			position: absolute;
			top: 22px;
			left: 68px;
			font-size: 15px;
			font-weight: bold;
			color: @blue-ocean;
		}
		.network {
			position: absolute;
			top: 22px;
			left: 215px;
			font-size: 13px;
			font-weight: bold;
			color: #555;
		}
		.bonus {
			position: absolute;
			top: 16px;
			left: 350px;
			display: block;
			width: 120px;
			padding: 5px 0;
			text-align: center;
			background: @brown-dust;
			font-size: 11px;
			color: @brown-sand;
			border: 1px solid @brown-smoke;
			.radius();
			.label {
				font-size: 14px;
				font-weight: bold;
			}
		}
		.deal {
			position: absolute;
			top: 12px;
			left: 510px;
			span:first-child {
				font-size: 26px;
				line-height: 26px;
				font-weight: bold;
				color: @brown-gold;
				letter-spacing: -1px;
			}
			span {
				width: 70px;
				display: block;
				text-align: center;
				font-size: 11px;
				line-height: 12px;
				color: #666;
			}
		}
		// HOVER
		.entry:hover {
			background: @brown-dust;
			* { 
				cursor: pointer; 
			}
			.logo {
				.hoverLogoThumb;
			}
			.name {
				color: @blue-sky;
			}
			.network {
				color: #333;
			}
			.bonus {
				background: #fff;
				border-color: @brown-sand;
				color: #444;
			}
			.deal span:first-child {
				color: @brown-shine;
			}
			.deal span {
				color: #222;
			}
		}
	}
	
	&.rakeback.tight {
		.name {
			top: 12px;
		}
		.network {
			top: 32px;
			left: 68px;
		}
		.bonus {
			left: 180px;
		}
		.deal {
			left: 306px;
		}
	}	
}

.toplist {
	&.vip {
		.entry {
			display: block;
			position: relative;
			padding: 6px 0 0 38px;
			border-bottom: 1px solid @brown-smoke;
			text-decoration: none;
			.logo {
				position: absolute;
				top: 6px;
				left: 0;
			}
			.name {
				color: @blue-ocean;
				font-size: 14px;
				font-weight: bold;
			}
			.bonus {
				position: absolute;
				top: 6px;
				right: 0;
				display: block;
				text-align: center;
				color: @brown-sand;
				font-size: 14px;
				font-weight: bold;
				border: 1px solid @brown-smoke;
				padding: 3px 6px;
				background: @brown-dust;
				.nw;
				.radius(3px);
			}
			.network {
				display: block;
				color: #555;
				font-size: 13px;
				font-weight: bold;
				padding: 2px 0 4px;
				margin-bottom: 4px;
				border-bottom: 1px solid @brown-smoke;
			}
			.details {
				display: block;
				font-size: 11px;
				color: #555;
				padding-bottom: 4px;
				span {
					display: block;
					padding: 2px 0;
				}
				.label {
					color: #888;
					font-weight: bold;
				}
			}
			// HOVER
			&:hover {
				background: @brown-dust;
				* { 
					cursor: pointer; 
				}
				.logo {
					.hoverLogoIcon;
				}
				.name {
					color: @blue-sky;
				}
				.bonus {
					color: #333;
					border-color: @brown-sand;
					background: #fff;
				}
				.network {
					color: #333;
				}
				.details span {
					color: #333;
				}
			}
		}	
	}
}

.toplist {
	&.bonus {
		.entry {
			display: block;
			position: relative;
			padding: 6px 0 0 38px;
			border-bottom: 1px solid @brown-smoke;
			text-decoration: none;
			.logo {
				position: absolute;
				top: 6px;
				left: 0;
			}
			.name {
				display: block;
				color: @blue-ocean;
				font-size: 14px;
				font-weight: bold;
				border-bottom: 1px solid @brown-smoke;
				padding: 4px 0 6px;
				margin-bottom: 6px;
			}
			.network {
				display: block;
				color: #555;
				font-size: 13px;
				font-weight: bold;
				padding-top: 4px;
				.fltR;
			}
			.details {
				display: block;
				text-align: center;
				padding-bottom: 5px;
				background-position: right bottom;
				.bonus {
					display: block;
					font-size: 12px;
					color: @brown-sand;
					margin-bottom: 2px;
					.label {
						font-size: 16px;
						font-weight: bold;
					}
				}
				.type {
					display: block;
					font-size: 11px;
					color: #aaa;
				}
				.btn {
					margin: 6px auto 0;
					display: block;
					width: 120px;
				}
			}
			// HOVER
			&:hover {
				background: @brown-dust;
				* { 
					cursor: pointer; 
				}
				.logo {
					.hoverLogoIcon;
				}
				.name {
					color: @blue-sky;
				}
				.bonus {
					color: #333;
				}
				.network {
					color: #333;
				}
				.details {
					color: #333;
				}
				.type {
					color: #555;
				}
			}
		}	
	}
}


.rakebackCalc {
	
	.settings {
		.control {
			width: 312px;
			border: 1px solid @brown-smoke;
			margin-bottom: 20px;
			padding: 10px 14px 14px;
			.radius();
			.h4 {
				margin-bottom: 8px;
			}
			.optionsBox {
				
				.option {
					position: relative;
					cursor: pointer;
					display: block;
					float: left;
					width: 146px;
					height: 78px;
					margin-left: 14px;
					background: @brown-dust;
					border: 1px solid @brown-sky;
					.radius();
					&:first-child {
						margin-left: 0;
					}
					&:hover,
					&.active {
						border-color: @brown-smoke;
						.label {
							color: #333;
						}
					}
					&.active {
						background: @brown-dust-2;
						.label {
							font-weight: bold;
						}
					}
					.label {
						position: absolute;
						left: 0;
						bottom: 6px;
						display: block;
						width: 100%;
						text-align: center;
						font-size: 13px;
						color: #aaa;
					}
					input {
						position: absolute;
						visibility: hidden;
					}
				}
				
				.option {
					.gfx {
						margin: 0 auto;
						display: block;
						background-image: url('../gfx/sprite/icons.png');
					}
					
					&.radio {
						.gfx {
							margin-top: 18px;
							width: 30px;
							height: 30px;
							background-position: -90px -90px;
						}
						&:hover .gfx {
							background-position: -50px -90px;
							background-position: -10px -90px;
						}
						&.active:hover .gfx,
						&.active .gfx {
							background-position: -10px -90px;
						}
					}
					
					&.full,
					&.short {
						.gfx {
							margin-top: 4px;
							width: 80px;
							height: 50px;
						}
					}
					&.full {
						.gfx {
							background-position: -100px -130px;
						}
					}
					&.active.full,
					&:hover.full {
						.gfx {
							background-position: -10px -130px;
						}
					}
					&.short {
						.gfx {
							background-position: -100px -190px;
						}
					}
					&.active.short,
					&:hover.short {
						.gfx {
							background-position: -10px -190px;
						}
					}
				}
			}			
		}
	}
	
}

.rakebackCalcRespons {
	width: 460px;
	
	.valueBox {
		padding: 10px 0;
		.value {
			display: block;
			float: left;
			margin-left: 20px;
			width: 138px;
			background: @brown-dust;
			border: 1px solid @brown-smoke;
			text-align: center;
			padding: 14px 0;
			.radius();
			
			&:first-child {
				margin-left: 0;
			}
			span:first-child {
				font-size: 30px;
				line-height: 30px;
				color: @brown-sand;
				padding-bottom: 6px;
				letter-spacing: -1px;
			}
			span {
				display: block;	
				font-weight: bold;
				font-size: 15px;
				color: #555;
			}
		}
	}
}


.lightbox.loginForm {
	.txtInput {
		margin: 4px 0 8px;
	}
}


.lightbox.forgotPasswordForm {
	.txtInput {
		margin: 4px 0 8px;
	}
}

.lightbox.registerForm {
	.txtInput {
		margin: 4px 0 8px;
	}	
}


.feed.partners {
	border-bottom: 1px solid @brown-sky;
	.entry:hover {
		background: @brown-dust;
		.bonus {
			color: @brown-sand;
		}
	}
	.entry:first-child {
		border-top: 0;
	}
	.entry {
		position: relative;
		display: block;
		padding: 6px 0;
		font-size: 12px;
		font-weight: bold;
		color: #333;
		text-decoration: none;
		border-top: 1px solid @brown-sky;
		.bonus {
			display: block;
			float: right;
			color: @brown-mist;
			font-weight: normal;
		}
	}
} 

.widget.stepByStep {
	.feedback {
		margin: 4px 0;
	}
	.steps {
		.entry {
			position: relative;
			padding-left: 40px;
			margin: 8px 0;			
			.details {
				position: absolute;
				top: 0; 
				left: 0;
				border-right: 1px solid @brown-smoke;
				width: 32px;
				text-align: center;
				span:first-child {
					color: @brown-gravel;
					font-size: 21px;
				}
				span {
					display: block;
					color: @brown-smoke;
					font-size: 10px;
					font-weight: bold;
				}
			}
		}
	}
}


.widget.calculator {
	background: @blue-deep url('../gfx/bg/blue_transition.png') repeat-x;
	min-height: 90px;
	border: 1px solid @blue-sky;
	padding: 10px 12px;
	font-size: 11px;
	.radius();
	.gfx {
		display: block;
		width: 44px;
		height: 42px;
		float: left;
		margin: 0 4px 0 -6px;
		background: url('../gfx/sprite/icons.png') -190px -130px;
	}
	.hl a,
	p a {
		text-decoration: none;
		color: #fff;
	}
	.hl {
		font-size: 20px;
		line-height: 19px;
		margin-bottom: 6px;
		padding-right: 10px;
	}
	p {
		clear: both;
		font-weight: bold;
		line-height: 14px;
		margin-bottom: 0;
	}
	.divider {
		border-top: 1px solid @blue-deep;
		background: #399dc1;
		display: block;
		height: 1px;
		margin: 5px 0;
	}
}


.widget.becomeMember {
	.btn {
		margin: 8px 0;
	}
}


.widget.createAnAccount {
	border: 1px solid @brown-smoke;
	padding: 14px;
	background: @brown-sky url('../gfx/bg/white_fade.png') repeat-x;
	.radius();
	.preamble {
		padding-right: 60px;
	}
	.form {
		padding-top: 4px;
		position: relative;
		.submitBtn {
			position: absolute;
			right: 0;
			bottom: -2px;
			display: block;
			width: 50px;
			height: 34px;
			cursor: pointer;
			background: url('../gfx/sprite/common.png') -190px -170px;
			&:hover {
				background-position: -250px -170px;
			}
		}
		.txtInput {
			width: 163px;
		}
		.passwordInput {
			margin-top: 8px;
			display: none;
		}
		.inputWrapper {
			float: left;
			width: 175px;
			&.password {
				clear: both;
			}
		}
	}
}


.user {
	&.register {
		.registerForm {
			
		}	
	}
}

.support {
	.feedback.success {
		display: none;
		margin-bottom: 16px;
	}
}



.profile {
	.stats {
		width: 100%;
		border-collapse: collapse;
		.monthly,
		.allTime {
			display: none;
		}
		.entry {
			border-bottom: 1px solid @brown-smoke;
		}
		th {
			height: auto;
			padding: 5px 0;
			background: @brown-dust !important;
			font-weight: bold;
			color: @brown-mist;
			&.room,
			&.username {
				text-align: left
			}
			&.room {
				text-indent: 5px;
			}
		}
		td {
			height: 43px;
			padding: 7px 0 5px;
			&.logoWrapper {
				width: 70px;
			}
			&.room {
				font-size: 18px;
				line-height: 17px;
				font-weight: bold;
				color: @blue-ocean;
				.network {
					color: @brown-mist;
				}
				.bonus {
					font-size: 11px;
					color: @brown-mist;
				}
			}
			&.username, 
			&.rakeback_deal {
				font-size: 18px;
				font-weight: bold;
				color: #555;
			}
			&.rakeback {
				text-align: center;
				font-weight: bold;
				color: #555;
				font-size: 16px;
				span {	
					color: @brown-gravel;
					font-weight: normal;
					display: block;
					font-size: 11px;
					line-height: 14px;
				}
			}
			&.rakeback_deal,
			&.status,
			&.edit {
				text-align: center;
				width: 70px;
			}
			&.status {
				span {
					width: 100%;
					height: 30px;
					display: block;
				}
			}
			
		}
		.edit {
			cursor: pointer;
			background: url('../gfx/sprite/icons.png') -190px -360px;
			&:hover {
				background-position: -270px -360px;
			}
		}
		.approved {
			.status {
				background: url('../gfx/sprite/icons.png') -190px -180px;
			}
		}
		.pending {
			background: url('../gfx/bg/deal_pending.png');
			.username,
			.rakeback_deal, 
			.rakeback {
				color: #94c5cf;
			}
			.status {
				background: url('../gfx/sprite/icons.png') -190px -300px;
			}
		}
		.denied {
			background: #fffbf5; 
			.username,
			.rakeback_deal, 
			.rakeback {
				color: #e9caa4;
			}
			.status {
				background: url('../gfx/sprite/icons.png') -190px -240px;
			}
		}
	}
}