Pony.fm/public/styles/body.less

@import-once 'variables';
@import-once 'base/bootstrap/bootstrap';

.site-content{
  .box-sizing(border-box);
  padding: 10px;

  h1 {
	margin: 0px;
	margin-bottom: 5px;
	font-size: 15pt;
	color: #C2889C;
	line-height: normal;
	overflow: hidden;
	font-weight: normal;
  }
}

.revealable {
  font-size: 10pt;
  color: #222;
  position: relative;
  overflow: hidden;
  padding: 0px;
  margin: 0px;

  h2 {
  }

  .reveal {
	#gradient>.vertical(rgba(255,255,255,0), rgba(255,255,255,1));
	.box-sizing(border-box);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 400;
	border: 2px solid #fff;
	cursor: pointer;

	&:hover {
	  border: 2px solid @blue;
	}

	a {
	  .box-sizing(border-box);
	  display: block;
	  position: absolute;
	  bottom: 0px;
	  left: 0px;
	  width: 100%;
	  background: #eee;
	  padding: 3px;
	  z-index: 500;
	  text-decoration: none;
	  font-size: 10pt;
	}
  }
}

.details-columns {
  .left {
	margin-right: 310px;
	margin-left: 5px;
  }

  .right {
	float: right;
	width: 290px;
	height: 100%;
	padding-right: 10px;

	img.cover {
	  .img-polaroid();
	  padding: 2px;
	}

	.stats {
	  list-style: none;
	  padding: 0px;
	  margin: 0px;
	  font-size: 9pt;
	  color: #555;

	  li {
		padding: 5px 0px;
		margin: 0px;
		border-bottom: 1px solid #ddd;

		strong {
		  color: #111;
		}
	  }
	}
  }
}

.comments {
  form {
	margin: 0px;
	margin-bottom: 10px;

	.form-row {
	  margin: 0px;
	}

	input[type=text] {
	  margin: 0px;
	  padding: 5px;
	}
  }

  ul {
	list-style: none;
	margin: 0px;
	padding: 0px;

	li {
	  line-height: normal;
	  padding: 5px 0px;
	  margin: 0px;
	  overflow: hidden;

	  img {
		.img-polaroid();
		float: left;
		padding: 1px;
		height: 32px;
		width: 32px;
	  }

	  .meta {
		font-size: 8pt;
		padding: 5px 0px;
	  }

	  .content {
		margin-left: 42px;
	  }
	}
  }
}