// Load Bootstrap
@import "bootstrap.less";

// Boostrap Overrides

@linkColor:             rgb(255,200,0);
@linkColorExperience:   #f4620b;
@linkColorHover:        @textColor; //darken(@linkColor, 15%);

@textColor:             white;

.btn-dreamcar-kontakt {
	width: 280px;
	height: 30px;
	line-height: 30px;
}

.btn-dreamcar-kontakt:hover {
  color: @grayDark;
  text-decoration: none;
  background-color: rgb(255,200,0);
  background-position: 0 -40px;

  // transition is only when going to hover, otherwise the background
  // behind the gradient (there for IE<=9 fallback) gets mismatched
  .transition(none);
}

.experience .btn-dreamcar-kontakt:hover {
	background-color: @linkColorExperience;
}

@baseFontFamily:        "Signika Negative", Helvetica, Arial, sans-serif;

.lead {
	//margin-bottom: @baseLineHeight;
	font-size: 17px;
	//font-weight: 200;
	line-height: @baseLineHeight * 1.2;
}

// Dreamcar Stylez

// Dream Car Experience overridez

.experience {
	a {
		color: @linkColorExperience;
	}
	header {
		#logo {
			background-position: -701px -30px;
		}
		nav {
			ul {
				li {
					a {
						color: white;
						&:hover {
							color: @linkColorExperience;
						}
					}
					&.active {
						a {
							color: @linkColorExperience;
						}
					}
				}
			}
		}
	}
	.backButton {
		&:before {
			background: url(../img/spriteexperience.png) -468px -107px no-repeat;
		}
		&:hover:before {
			background: url(../img/spriteexperience.png) -468px -96px no-repeat;
		}
	}
	.success {
		color: @linkColorExperience;
	}
	.slideshowContainer {
		&:after {
			background: url(../img/spriteexperience.png) 0 -390px no-repeat;
		}
		&:before {
			background: url(../img/spriteexperience.png) 0 -354px no-repeat;
		}
		#smallSlideshowPrev {
			background: url(../img/spriteexperience.png) 0 0 no-repeat;
			&:hover {
				background: url(../img/spriteexperience.png) 0 -80px no-repeat;
			}
		}
		#smallSlideshowNext {
			background: url(../img/spriteexperience.png) -80px 0 no-repeat;
			&:hover {
				background: url(../img/spriteexperience.png) -80px -80px no-repeat;
			}
		}
		#smallSlideshowPager {
			li {
				background: url(../img/spriteexperience.png) 0 -190px no-repeat;
				&.activeSlide,
				&:hover {
					background: url(../img/spriteexperience.png) -18px -190px no-repeat;
				}
			}
		}
	}
	.gallery {
		ul {
			li {
				&:after {
					background: url(../img/spriteexperience.png) 0 -221px no-repeat;
				}
				&:hover:after {
					background: url(../img/spriteexperience.png) -16px -221px no-repeat;
				}
			}
		}
	}
	footer {
		.footerContent {
			.col4 {
				a {
					&.facebook {
						background: rgb(20,21,23) url(../img/spriteexperience.png) 0 -247px no-repeat;
						&:hover {
							background: rgb(20,21,23) url(../img/spriteexperience.png) 0 -284px no-repeat;
						}
					}
					&.twitter {
						background: rgb(20,21,23) url(../img/spriteexperience.png) -43px -247px no-repeat;
						&:hover {
							background: rgb(20,21,23) url(../img/spriteexperience.png) -43px -284px no-repeat;
						}
					}
				}
			}
		}
	}
}

body {
	background: rgb(20,20,20);
}

label {
	color: white;
}

.backButton {
	position: relative;
	left: 25px;
	&:before {
		content: "";
		display: block;
		.size(10px,11px);
		position: absolute;
		left: -20px;
		top: 3px;
		background: url(../img/sprite.png) -468px -107px no-repeat;
	}
	&:hover:before {
		background: url(../img/sprite.png) -468px -96px no-repeat;
	}
}

// FORM

.error {
	color: red;
}

.success {
	color: @linkColor;
}


// HEADER

header {
	position: relative;
	.center-block;
	width: @gridRowWidth; //940px
	z-index: @zindexFixedNavbar;
	height: 90px;
	#logo {
		display: block;
		.size(128px,128px);
		position: absolute;
		top: 20px;
		background: url(../img/sprite.png) -564px -30px no-repeat;
	}
	nav {
		@height: 30px;
		height: @height;
		position: absolute;
		left: 140px;
		top: 55px;
		ul {
			height: @height;
			list-style: none;
			margin: 0;
			li {
				float: left;
				height: @height;
				margin: 0 10px;
				a {
					display: block;
					height: @height;
					line-height: @height;
					text-transform: uppercase;
					color: white;
					font-weight: bold;
					&:hover {
						text-decoration: none;
						color: @linkColor;
					}
				}
				&.active a {
					color: @linkColor;
				}
			}
		}
	}
}

.slideshowContainer {
	position: relative;
	width: 1200px;
	.center-block;
	&:after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: -180px;
		.size(180px,1200px);
		background: url(../img/sprite.png) 0 -390px no-repeat;
	}
	&:before {
		content: "";
		display: block;
		position: absolute;
		left: 130px;
		bottom: -7px;
		.size(7px,940px);
		background: url(../img/sprite.png) 0 -354px no-repeat;
		z-index: 1;
	}
	.bigSlideshow {
		.center-block;
		width: 1200px;
		height: 450px;
		&:after {
			content: "";
			display: block;
			position: absolute;
			right: 100px;
			bottom: 20px;
			.size(192px,191px);
			background: url(../../images/DreamCarRental_Plup.png) 0 0 no-repeat;
		}
		.slide {
			width: 1200px;
			height: 450px;
			position: relative;
			.slideText {
				padding: 10px 30px 10px 130px;
				position: absolute;
				bottom: 20px;
				left: 0;
				background: url(../img/slideshowBoxBg.png) repeat-y;
			}
		}
	}
	.smallSlideshow {
		.center-block;
		width: 940px;
		height: 430px;
		position: absolute;
		left: 130px;
		bottom: 10px;
		box-shadow: 0 0 6px 2px black;
		z-index: 100;
		.slide {
			width: 940px;
			height: 430px;
		}
	}
	#smallSlideshowPrev,
	#smallSlideshowNext {
		position: absolute;
		.size(80px,80px);
		//background: rgb(0,0,0);
		//background: rgba(0,0,0,.6);
		z-index: @zindexFixedNavbar;
		//border-radius: 5px;
		//box-shadow: 0 0 5px 2px black;
		display: none;
		cursor: pointer;
		top: 180px;
	}
	#smallSlideshowPrev {
		left: 185px;
		background: url(../img/sprite.png) 0 0 no-repeat;
		&:hover {
			background: url(../img/sprite.png) 0 -80px no-repeat;
		}
	}
	#smallSlideshowNext {
		right: 185px;
		background: url(../img/sprite.png) -80px 0 no-repeat;
		&:hover {
			background: url(../img/sprite.png) -80px -80px no-repeat;
		}
	}
	&:hover #smallSlideshowPrev,
	&:hover #smallSlideshowNext,
	&:hover #smallSlideshowPager {
		display: block;
	}
	#smallSlideshowPager {
		list-style: none;
		margin: 0;
		z-index: @zindexFixedNavbar;
		position: absolute;
		bottom: 42px;
		width: 1200px;
		text-align: center;
		display: none;
		li {
			display: inline-block;
			.size(18px,18px);
			background: url(../img/sprite.png) 0 -190px no-repeat;
			margin: 0 5px;
			cursor: pointer;
			&.activeSlide,
			&:hover {
				background: url(../img/sprite.png) -18px -190px no-repeat;
			}
		}
	}
}

.contentContainer {
	background: rgb(29,29,29);
	.content {
		//background: @grayLight;
		.center-block;
		width: @gridRowWidth; //940px
		padding: 30px 0;
		position: relative;
		z-index: 1;
		.contentBox {
			padding: 25px 30px;
			margin: 25px 0 0 0;
			background: rgb(20,21,23);
		}
		.contentBoxHalf {
			width: 470px;
			float: left;
			margin: 0 0 25px 0;
			.imageBox {
				position: relative;
				padding: 3px;
				border: 1px solid rgb(42,42,42);
				width: 440px;
				span {
					position: absolute;
					bottom: 10px;
					left: 0;
					padding: 10px 15px 10px 10px;
					max-width: 200px;
					background: rgba(20,20,20,.9);
				}
			}
		}
		.contentImageBox65 {
			width: 549px;
			height: 200px;
			margin: 25px 0 25px 0;
			padding: 25px 30px;
			float: left;
			border: 1px solid rgb(42,42,42);
		}
		.contentImageBox35 {
			width: 328px;
			height: 250px;
			margin: 25px 0 25px 0;
			float: left;
			border: 1px solid rgb(42,42,42);
			border-left: none;
		}
		.contentBox65 {
			width: 545px;
			padding: 0 65px 0 0;
			float: left;
		}
		.contentBox35 {
			width: 330px;
			float: left;
		}
	}
	.bottomBoxContainer {
		.center-block;
		width: 945px;
		.bottomBox {
			position: relative;
			float: left;
			width: 295px;
			margin: 0 15px 25px 0;
			&.right {
				margin: 0;
			}
			.innerBox {
				.size(165px,290px);
				padding: 3px;
				border: 1px solid rgb(42,42,42);
				position: relative;
				span {
					position: absolute;
					bottom: 10px;
					left: 0;
					padding: 10px 15px 10px 10px;
					max-width: 200px;
					background: rgba(20,20,20,.9);
				}
			}
		}
	}
}

.gallery {
	ul {
		list-style: none;
		margin: 0;
		padding: 10px 44px;
		li {
			position: relative;
			float: left;
			padding: 3px;
			border: 1px solid rgb(42,42,42);
			margin: 10px;
			&:after {
				content: "";
				.size(16px,16px);
				position: absolute;
				bottom: 3px;
				right: 3px;
				background: url(../img/sprite.png) 0 -221px no-repeat;
			}
			&:hover:after {
				background: url(../img/sprite.png) -16px -221px no-repeat;
			}
		}
	}
}

.bottomLogos {
	background: rgb(20,21,23);
	border-top: 1px solid rgb(12,12,13);
	border-bottom: 1px solid rgb(26,26,27);
	padding: 30px 0;
	.bottomLogosSlideshow {
		margin: 0 auto;
	}
}

#contactForm {
	.left,
	.right {
		float: left;
		width: 265px;
	}
	textarea {
		width: 475px;
	}
}

footer {
	padding: 20px 0 0 0;
	background: rgb(14,14,14);
	.footerContent {
		width: @gridRowWidth - 100px;
		margin: 0 auto;
		h4 {
			margin: 0 0 15px 0;
			color: rgb(221,221,221);
		}
		p {
			color: rgb(140,137,137);
			font-size: 12px;
		}
		.col {
			width: @gridRowWidth / 4 - 25px;
			float: left;
		}
		.col1 {
			ul {
				list-style: none;
				margin: 0;
				li {
					font-size: 12px;
					a {
						color: rgb(140,137,137);
					}
				}
			}
		}
		.col2 {
			a {
				color: rgb(140,137,137);
			}
		}
		.col3 {
			.uc {
				.size(87px,77px);
				background: url(../img/sprite.png) -846px -62px no-repeat;
				margin: 25px 0 0 20px;
			}
		}
		.col4 {
			a {
				.size(37px,44px);
				background: rgb(20,21,23);
				float: left;
				margin: 0 10px 0 0;
				border-top: 1px solid rgb(12,12,14);
				border-bottom: 1px solid rgb(28,28,28);
				&.facebook {
					background: rgb(20,21,23) url(../img/sprite.png) 0 -247px no-repeat;
					&:hover {
						background: rgb(20,21,23) url(../img/sprite.png) 0 -284px no-repeat;
					}
				}
				&.twitter {
					background: rgb(20,21,23) url(../img/sprite.png) -43px -247px no-repeat;
					&:hover {
						background: rgb(20,21,23) url(../img/sprite.png) -43px -284px no-repeat;
					}
				}
			}
		}
	}
	.copyright {
		padding: 20px 0;
		text-align: center;
		background: black;
		color: rgb(86,89,99);
		margin: 20px 0 0 0;
		font-size: 11px;
		a {
			color: rgb(86,89,99);
			&:hover {
				color: white;
				text-decoration: none;
			}
		}
	}
}