@import "../../../assets/css/_structure.less";


// conference specific styles here
@turquoise: #009c8b;
@darker-grey:   #262626;
@dark-grey:     lighten(@darker-grey, 20%);
@light-grey:    lighten(@darker-grey, 30%);
@lighter-grey:  lighten(@darker-grey, 40%);

@turquoise-dot: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURQCciwDkomQAAAALSURBVAjXY2AAAQAABgABZvTJbAAAAABJRU5ErkJggg==";

// often configured values (and their defaults):
//
@brand-primary:         #f19224;
@text-color:            white;

@link-color:            white;
@link-hover-color:      @lighter-grey;

@navbar-height:         70px;

@navbar-default-color:  white;
@navbar-default-bg:     #000;

@navbar-default-border: white;

@navbar-default-link-color:       white;
//@navbar-default-link-hover-color: @link-hover-color;

body {
	background-color: black;
	padding: @navbar-height 0
}

h1, h2, body.overview .room a.title, body.overview .panel-primary a, .navbar-brand {
	font-family: sans-serif;
}

.overview {
	h2 {
		text-align: center;
		background-image: url(@turquoise-dot);
		background-repeat: repeat-x;
		background-position: 0 50%;

		text-transform: uppercase;
		font-weight: bold;

		margin: 100px 0 30px 0;

		span {
			background-color: black;
			padding: 0 15px;
		}
	}

	.room {
		a, a:hover {
			text-decoration: none;
			color: white;
		}

		.panel {
			background: none;
			border: none;

			&:hover {
				text-decoration: none;

				.panel-body {
					border-top: 1px solid white;
					border-bottom: 1px solid white;
				}

				.panel-body .program-schedule .next-talk {
					border-bottom: 1px solid white;
				}
			}

			.panel-title {
				color: white;
			}

			.panel-primary {
				background-color: @light-grey;
				border-color: @light-grey;
				color: white;
				a {
					color: white;
				}
			}

			.panel-heading {
				background: none;
				border: none;

				display: block !important;

				text-transform: uppercase;
				font-weight: bold;

				padding: 8px 15px;

				a {
					color: white;
				}
			}

			.panel-body {
				padding: 0;
				border-top: 1px solid @darker-grey;
				border-bottom: 1px solid @darker-grey;

				position: relative;
				margin-bottom: 48px + 16px;

				.program-schedule {
					padding: 15px 10px;
					overflow: hidden;
					font-size: 18px;

					.current-talk strong {
						display: none;
					}
					.next-talk {
						display: block;
						position: absolute;

						overflow: hidden;

						bottom: -48px;
						left: 0;
						right: 0;
						height: 48px;
						margin: 0;

						line-height: 48px;
						padding-left: 16px;

						border-bottom: 1px solid @darker-grey;
					}
				}
			}
		}
	}

	.recordings {
		.panel {
			background: none;
			border: 1px solid @dark-grey;
			border-radius: 0;

			&:hover {
				border-color: white;
			}

			a {
				color: white;
			}
		}
	}
}

.navbar-brand {
	font-size: 20px;
}

.well {
	color: @dark-grey;
}

.banner {
	margin-top: 40px;
	background: url(logo.gif) no-repeat center;
	height: 170px;
	text-indent: -9999em;
}

@media (max-width: 480px) {
	.banner {
		margin-top: 60px;
	}
}

.player-wrap {
	background-color: @darker-grey;
}

.nav-tabs > li > a {
	border-color: @dark-grey;
}

nav .navbar-form {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

nav .button-wrapper > .btn {
	width: 70px;
	height: 70px;
	margin-left: -1px;
	border-color: white;
	border-top: 0;
	border-bottom: 0;
	border-radius: 0;
	background: url(icons.png) no-repeat left top;
	text-indent: -9999px;
	display: block;
	float: left;
}

nav .button-wrapper > .btn-ssl {
	background-position: -72px top;
}

nav .button-wrapper > .btn-ssl.btn-success {
	background-position: left top;
}

nav .button-wrapper > .feedback {
	background-position: -216px top;
}

nav .button-wrapper > .releases {
	background-position: -144px top;
}

nav .button-wrapper > .about {
	background-position: -288px top;
}

.well a {
	color: @dark-grey;
	text-decoration: underline;
}
.alert {
	a {
		text-decoration: underline;
	}
	&.alert-success a {
		color: @state-success-text;
	}
	&.alert-info a {
		color: @state-info-text;
	}
	&.alert-warning a {
		color: @state-warning-text;
	}
	&.alert-danger a {
		color: @state-danger-text;
	}
}

body.multiview .cell {
	color: black;
}

.closed .about a {
	text-decoration: underline;
	color: @brand-primary;
}

.schedule .block.pause {
	color: black !important;
}