@import "/css/web/colours-functions.less";

html {
	background: #000 url(../../images/web/html.png) repeat-x center 0;
}

body {
	background: url(../../images/web/body.png) repeat-x center bottom;
	font-family: 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
	font-size: 14px;
	line-height: 18px;
	margin: 0;
	padding: 0;
	text-align: left;
}

a, a:visited {
	color: @color-link;
	cursor: pointer;
	text-decoration: none;

	&:hover { color: @color-link-hover; }
}

p { margin: 0 0 20px 0; }

h1, h2, h3, h4 {
	color: #fff;
	font-weight: normal;
	line-height: 1.1;
	margin: 30px 0 20px 0;
}

h1 { color: #970409; font-size: 30px; margin-top: 0; text-transform: uppercase; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h4 { font-size: 14px; }

#fancybox-content h2 {
	color: #970409;
	margin-top: 5px;
}

.w16{ width: 16px; }
.w30{ width: 30px; }
.w81{ width: 81px; }
.w150{ width: 150px; }
.w300{ width: 300px; }

.flash{
	.border-radius(4px);
	.box-shadow(0 0 5px #ddd);
	border-width: 1px;
	border-style: solid;
	margin-bottom: 10px;
	padding: 5px 30px;
	position: relative;
	text-align: center;

	&.flash-success{
		background: #e6fbdf;
		border-color: #79d05d;
		color: #33811a;
	}

	&.flash-error{
		background: #ffe6f3;
		border-color: #e06ca8;
		color: #b92772;
	}

	&.flash-warning{
		background: #faf9d4;
		border-color: #dcd068;
		color: #b8a81e;
	}

	&.flash-info{
		background: #ddf0f6;
		border-color: #6ccfef;
		color: #129bc8;
	}

	.close{
		.opacity(0.5);
		background: url(../../images/web/close.png) no-repeat 0 0;
		height: 8px;
		opacity: 0.5;
		position: absolute;
		right: 5px;
		top: 5px;
		width: 8px;

		&:hover{
			.opacity(1);
		}
	}
}

.header {
	background: url(../../images/web/header.jpg) no-repeat center 0;

	header {
		height: 314px;
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
		width: 960px
	}

	.logo {
		height: 252px;
		left: 10px;
		position: absolute;
		top: 0px;
		width: 570px;
	}

	.menu {
		bottom: 0;
		font-size: 21px;
		left: 0;
		line-height: 60px;
		list-style-type: none;
		margin: 0;
		padding: 0;
		position: absolute;
		text-align: center;
		width: 100%;

		li {
			.inline-block;
			padding: 0 20px;
		}

		a {
			color: #fff;

			&:hover { color: #bbb; }

			&.active { color: #f00; }
		}
	}
}

.main-holder {
	background: url(../../images/web/bgs/1.jpg) no-repeat center top;
	min-height: 834px;

	.main {
		margin: 0 auto;
		padding: 20px 0;
		position: relative;
		width: 960px;
	}
}

.sidebar {
	.bg-black;
	.border-radius (4px);
	.box-shadow(0, 0, 15px);
	float: left;
	min-height: 754px;
	padding: 20px;
	width: 160px;

	h2 {
		margin: 25px 0 15px 0;
		text-transform: uppercase;
	}

	ul {
		color: #fff;
		font-size: 18px;
		padding: 0;
		line-height: 24px;
		list-style-type: none;

		ul { margin: 10px 0 0 0; }

		li {
			background: url(../../images/web/sidebar-li.png) no-repeat 0 bottom;
			padding: 10px 0 12px 0;

			li {
				background: none;
				padding: 8px 0 4px 20px;
			}
		}

		span { color: #666; }

		a {
			color: #f00;

			&:hover { color: #bbb; }

			&.active { color: #fff; }
		}
	}
}

.content {
	float: right;
	padding-top: 20px;
	width: 720px;

	.article {
		.bg-white;
		margin-bottom: 30px;
		padding: 20px;
	}

	table {
		border-collapse: separate;
		border-spacing: 2px;
		margin-bottom: 20px;
		width: 100%;

		th, td {
			.bg-white;
			padding: 4px 8px;
			vertical-align: middle;

			&.date { width: 100px; }
			&.place { width: 200px; }
		}

		th { text-align: right; }
	}

	.form table {
		th, td {
			background: none;
			color: #fff;
			vertical-align: top;
		}

		input[type="text"], input[type="email"] {
			background: #fff;
		}

		.form-error-message {
			color: #f00;
			display: block;
		}

		textarea {
			background: #fff
		}
	}

	.book textarea {
		height: 80px;
	}

	.posts {
		padding: 20px 0;

		.post {
			border-top: 1px dotted #fff;
			padding: 10px 0;

			.info {
				color: #A90006;
				float: left;
				line-height: 22px;
				width: 100px;

				span {
					color: #BBB;
					display: block;
				}
			}

			.text {
				float: right;
				width: 360px;
			}
		}
	}
}

.social {
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;

	a {
		.border-radius (3px);
		.opacity(0.7);
		background: url(../../images/web/social.jpg) no-repeat center 0;
		display: block;
		height: 40px;
		margin: 0 0 5px 0;
		width: 190px;

		&:hover { .opacity(1); }

		&.youtube{ background-position: center 0; }
		&.bandzone{ background-position: center -42px; }
		&.twitter{ background-position: center -78px; }
		&.myspace{ background-position: center -122px; }
	}
}

.small-gallery {
	margin-right: -9px;

	img {
		.border-radius (4px);
		height: 62px;
		width: 62px;
	}

	span{
		.border-radius (4px);
		border: 1px solid #444;
		display: block;
		float: left;
		height: 62px;
		margin: 0 5px 5px 0;
		overflow: hidden;
		width: 62px;
	}

	span {
		.bg-white;

		&:hover {
			.box-shadow(0, 0, 5px, #fff);
		}
	}

	img {
		width: auto;
	}
}

.homepage {

	.boj-poster {
		.border-radius (4px);
		bottom: 20px;
		left: 0;
		position: absolute;
	}

	.left-sidebar {
		float: left;
		padding-bottom: 330px;
		width: 210px;

		h2 { margin: 20px 0 10px 0; }

		ul {
			.bg-gray;
			.border-radius (4px);
			color: #fff;
			font-size: 12px;
			padding: 10px 20px;
			line-height: 18px;
			list-style-type: none;

			strong {
				color: #ccc;
				display: block;
				font-size: 14px;
			}

			li {
				background: url(../../images/web/sidebar-li.png) no-repeat 0 bottom;
				padding: 10px 0 12px 0;

				&.last {
					background: none;
				}
			}

			a {
				color: #f00;

				&:hover { color: #bbb; }

				&.active { color: #fff; }
			}
		}
	}

	.content {
		.bg-black;
		.border-radius (4px);
		.box-shadow(0, 0, 15px);
		float: left;
		margin-left: 20px;
		padding: 20px 20px 10px 20px;
		width: 480px;

		&.wide {
			margin-left: 200px;
			width: 510px;
		}
	}

	.news {
		h2 {
			a {
				color: #fff;
				text-decoration: underline;

				&:hover { text-decoration: none; }
			}
		}

		.info {
			border-top: 1px dotted #999;
			clear: both;
			margin-top: 8px;
			padding-top: 8px;
		}

		img {
			float: left;
			margin: 0 20px 10px 0;
		}
	}

	.right-sidebar {
		float: right;
		width: 190px;

		.partners {
			padding-top: 10px;

			a {
				.opacity(0.7);
				display: block;
				padding: 5px 0;
				text-align: center;

				&:hover{ .opacity(1); }
			}
		}

		.facebook .title{
			background: url(../../images/web/social.jpg) no-repeat center -182px;
			display: block;
			height: 40px;
		}
	}
}

.g-button {
	float: left;
	width: 110px;
}

.f-button {
	float: right;
	width: 370px;
}

.concert {
	header {
		height: 290px;

		p {
			float: left;
			width: 250px;
		}

		h1 {
			float: right;
			width: 430px;
		}

		table {
			float: right;
			margin-bottom: 40px;
			width: 430px;
		}
	}
}

.contact {
	line-height: 24px;

	span {
		.inline-block;
		width: 35px;
	}

	.magma {
		background: url(../../images/web/magma.jpg) no-repeat 0 0;
		display: block;
		height: 135px;
		margin: 10px auto;
		width: 290px;

		&:hover{ .opacity(0.7); }
	}
}

#concert-map-holder {
	background: #000;
	margin-bottom: 20px;

	#concert-map {
		height: 400px;
		.opacity(.8);
		width: 720px;
	}
}

.member {
	float: left;
	width: 330px;

	&.right { float: right; }

	h3 a {
		.border-radius (0 0 10px 10px);
		background: #666;
		display: block;
		padding: 10px 0;
	}

	&:hover a, h3 a:hover, h3 a:visited:hover {
		color: #B3B3B3;
		background: #333;
	}

	p { margin: 0; }

	img { .border-radius (10px 10px 0 0); }

	h3 {
		margin: 0 0 20px 0;
		padding: 0;
		text-align: center;
	}
}

.multimedia {
	margin-right: -20px;

	.box {
		.bg-white;
		.border-radius (6px);
		.box-shadow(0, 0, 10px, rgba(0,0,0,.4));
		float: left;
		margin: 0 20px 20px 0;
		width: 220px;

		.image {
			height: 180px;
			margin: 0;
			overflow: hidden;
			width: 220px;

			img, span {
				.border-radius (6px 6px 0 0);
			}

			span {
				.bg-black;
			}
		}

		h3 {
			margin: 0;
			text-align: center;

			a {
				color: #000;
				display: block;
				padding: 10px 0;

				&:hover {
					color: #A90006;
				}
			}
		}

		&:hover h3 a { color: #A90006; }
	}
}

.gallery {
	a {
		.border-radius;
		.inline-block;
		margin: 0 15px 15px 0;

		&:hover { .box-shadow (0, 0, 10px, #fff); }

		img {
			.border-radius;
		}
	}
}

.videos {
	margin-right: -20px;

	.box {
		float: left;
		height: 165px;
		margin: 0 20px 20px 0;
		overflow: hidden;
		position: relative;
		width: 220px;

		.holder {
			height: 0;
			left: 0;
			overflow: hidden;
			position: absolute;
			top: 0;
			width: 0;
		}

		.thumb {
			height: 165px;
			position: relative;
			width: 220px;

			span {
				.bg-black;
				display: block;
				left: 0;
				line-height: 15px;
				padding: 10px 0;
				position: absolute;
				text-align: center;
				top: 65px;
				width: 100%;
			}

			:hover span {
				.bg-white;
			}

			img {
				width: 220px;
			}
		}
	}
}

footer {
	height: 62px;
	margin: 0 auto;
	position: relative;
	width: 960px;

	a, a:visited {
		color: #eee;
		text-decoration: underline;

		&:hover { text-decoration: none; }
	}

	p {
		color: #eee;
		margin: 23px 0 0 0;
	}

	img {
		vertical-align: bottom;
	}
}




































a.button, input.button, button.button {
	.border-radius(5px);
	.box-shadow-inset(0, 1px, 0, rgba(255,255,255,0.2));
	.inline-block;
	.linear-gradient(#ffffff,#eeeeee);
	border: 1px solid #ddd;
	color: #444;
	cursor: pointer;
	font-size: 12px;
	line-height: 16px;
	padding: 5px 8px;
	text-decoration: none;
	text-shadow: 0 -1px 0 #ddd;
	vertical-align: middle;
	white-space: nowrap;

	&:hover, &:active, &:focus {
		.linear-gradient(#f5f5f5,#e5e5e5);
		border-color: #ccc;
		color: #444;
		text-decoration: none;
		text-shadow: 0 -1px 0 #ccc;
	}

	&:active{ .linear-gradient(#e5e5e5,#f5f5f5); }

	&.large {
		font-size: 15px;
		line-height: 22px;
		padding: 5px 12px;
	}

	&.small {
		font-size: 11px;
		line-height: 14px;
	}

	&.red {
		.linear-gradient(#fe1818,#ce0000);
		border-color: #c00000;
		color: #fff;
		text-shadow: 0 -1px 0 #c00000;

		&:hover, &:active, &:focus {
			.linear-gradient(#e8000e,#960017);
			border-color: #840014;
			color: #fff;
			text-shadow: 0 -1px 0 #840014;
		}

		&:active{ .linear-gradient(#960017,#e8000e); }
	}

	&.green {
		.linear-gradient(#97d397,#62bc62);
		border-color: #46a546;
		color: #fff;
		text-shadow: 0 -1px 0 #46a546;

		&:hover, &:active, &:focus {
			.linear-gradient(#69c769,#47aa47);
			border-color: #2f8e2f;
			color: #fff;
			text-shadow: 0 -1px 0 #2f8e2f;
		}

		&:active{ .linear-gradient(#47aa47,#69c769); }
	}

	&.yellow {
		.linear-gradient(#ffce36,#fdc416);
		border-color: #efb400;
		color: #fff;
		text-shadow: 0 -1px 0 #efb400;

		&:hover, &:active, &:focus {
			.linear-gradient(#ebb409,#dfa800);
			border-color: #c59502;
			color: #fff;
			text-shadow: 0 -1px 0 #c59502;
		}

		&:active{ .linear-gradient(#dfa800,#ebb409); }
	}

	&.blue {
		.linear-gradient(#64b6db,#309dcf);
		border-color: #2195ca;
		color: #fff;
		text-shadow: 0 -1px 0 #2195ca;

		&:hover, &:active, &:focus {
			.linear-gradient(#54acd3,#1c8ec3);
			border-color: #0b7fb5;
			color: #fff;
			text-shadow: 0 -1px 0 #0b7fb5;
		}

		&:active{ .linear-gradient(#1c8ec3,#54acd3); }
	}

	&.black {
		.linear-gradient(#444444,#000000);
		border-color: #000;
		color: #fff;
		text-shadow: 0 -1px 0 #000;

		&:hover, &:active, &:focus {
			.linear-gradient(#666666,#222222);
			border-color: #222222;
			color: #fff;
			text-shadow: 0 -1px 0 #222222;
		}

		&:active{ .linear-gradient(#222222,#666666); }
	}

	&.disabled {
		.linear-gradient(#ededed,#c2c2c2);
		border-color: #c2c2c2;
		color: #888;
		cursor: default;
		text-shadow: 0 -1px 0 #c2c2c2;

		&:hover, &:active, &:focus {
			.linear-gradient(#ededed,#c2c2c2);
			border-color: #c2c2c2;
			color: #888;
			text-shadow: 0 -1px 0 #c2c2c2;
		}
	}
}

.flash-message {
	.border-radius;
	.linear-gradient(#e6e6e6,#c2c2c2);
	border-bottom: 1px solid #aaa;
	color: #fff;
	margin-bottom: 18px;
	padding: 8px 15px;
	text-shadow: 0 -1px 0 #aaa;

	p, ul {
		color: #fff;
		margin: 0;
	}

	p + p, p + ul { margin-top: 5px; }

	&.block strong{
		display: block;
	}

	.close {
		.opacity(0.2);
		color: #000;
		float: right;
		margin: 0 0 10px 10px;
		font-size: 20px;
		font-weight: bold;
		text-shadow: 0 1px 0 #fff;

		&:hover {
			.opacity(0.4);
			color: #000;
		}
	}

	&.error{
		.linear-gradient(#fe1818,#ce0000);
		border-bottom-color: #c00000;
		text-shadow: 0 -1px 0 #c00000;

		&.block{
			background: #f8dcda;
			border: 1px solid #f4c8c5;
			text-shadow: 0 1px 0 #bbb;
		}
	}

	&.warning{
		.linear-gradient(#ffce36,#fdc416);
		border-bottom-color: #efb400;
		text-shadow: 0 -1px 0 #efb400;

		&.block{
			background: #fff0c0;
			border: 1px solid #ffe38d;
			text-shadow: 0 1px 0 #bbb;
		}
	}

	&.success{
		.linear-gradient(#97d397,#62bc62);
		border-bottom-color: #46a546;
		text-shadow: 0 -1px 0 #46a546;

		&.block{
			background: #dff1df;
			border: 1px solid #bbe2bb;
			text-shadow: 0 1px 0 #bbb;
		}
	}

	&.info{
		.linear-gradient(#64b6db,#309dcf);
		border-bottom-color: #2195ca;
		text-shadow: 0 -1px 0 #2195ca;

		&.block{
			background: #c7eefe;
			border: 1px solid #ade6fe;
			text-shadow: 0 1px 0 #bbb;
		}
	}

	&.block{
		color: #404040;
		padding: 14px;
		text-shadow: 0 1px 0 #bbb;

		p, ul{
			color: #404040;
			margin-right: 30px;
		}

		&.error{
			background: #f8dcda;
			border: 1px solid #f4c8c5;
			text-shadow: 0 1px 0 #bbb;
		}

		&.warning{
			background: #fff0c0;
			border: 1px solid #ffe38d;
			text-shadow: 0 1px 0 #bbb;
		}

		&.success{
			background: #dff1df;
			border: 1px solid #bbe2bb;
			text-shadow: 0 1px 0 #bbb;
		}

		&.info{
			background: #c7eefe;
			border: 1px solid #ade6fe;
			text-shadow: 0 1px 0 #bbb;
		}
	}
}

.ie6, .ie7 {
	table {
		border-collapse: collapse;

		td {
			border: 1px solid #666;
		}
	}
}