// PAGELINES UTILITY CLASSES

// -----------
// Image Frame
// -----------
.pl-imageframe img,
img.pl-imageframe {
	padding: 4px;
	background: @baseLighter;
	border: 1px solid @baseLighterMore;
	.box-sizing(border-box);
	.box-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
	.border-radius(3px)
}

.pl-imageframe a:hover img{
	background: lighten(@baseContrast, 5%);
}

// -----------
// Zero Utility Class by BA
// Useful classes for specifying zero margin on top, or bottom of headings and paragraph elements
// -----------

.zmt {
	margin-top:0 !important; // We have to declare importance becuase we're overriding the 20px margin-top with a wildcard class
}

.zmb {
	margin-bottom:0 !important; // We have to declare importance becuase we're overriding the 20px margin-bottom with a wildcard class
}

.zb {
  border:none !important; // We have to declare importance
}

.tac {
  text-align:center !important; // We have to declare importance
}

// -----------
// Visibility Utility Class
// -----------
.hide {
  display: none;
}
.show {
  display: block;
}
.invisible {
  visibility: hidden;
}


// -----------
// Code typography styles for the <code> and <pre> elements
// -----------

// Inline and block code styles
code,
pre {
  padding: 0 3px 2px;
  #font > #family > .monospace;
  font-size: @baseFontSize - 1;
  color: @textColorAlt;
  .border-radius(3px);
}

// Inline code
code {
  padding: 2px 4px;
}

code,
.prettyprint{
	background-color: @baseContrastSlight;
	border: 1px solid @baseContrastDarkMore;
}


	.prettify-on .prettyprint.linenums {
	  -webkit-box-shadow: inset 40px 0 0 @dark-base, inset 41px 0 0 @baseContrastDarkMore;
	     -moz-box-shadow: inset 40px 0 0 @dark-base, inset 41px 0 0 @baseContrastDarkMore;
	          box-shadow: inset 40px 0 0 @dark-base, inset 41px 0 0 @baseContrastDarkMore;
	}

	ol.linenums li{
		color: #bebec5;
	}

// Blocks of code
pre {
  display: block;
  padding: (@baseLineHeight - 1) / 2;
  margin: 0 0 @baseLineHeight / 2;
  font-size: @baseFontSize * .925; // 13px to 12px
  line-height: @baseLineHeight;
  background-color: #f5f5f5;
  border: 1px solid #ccc; // fallback for IE7-8
  border: 1px solid rgba(0,0,0,.15);
  .border-radius(4px);
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;

  // Make prettyprint styles more spaced out for readability
  &.prettyprint {
    margin-bottom: @baseLineHeight;
  }

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    color: inherit;
    background-color: transparent;
    border: 0;
  }
}

// Enable scrollable blocks of code
.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

/* 11. Responsive Vids */
.pl-video {
	&.youtube {
	padding-top: 30px;
	}
	&.vimeo {
	padding-top: 10px;
	}
  position: relative;
  padding-bottom: 56.25%;

  height: 0;
  overflow: hidden;

  iframe, object, embed {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.fix {
.clearfix;
}


// -----------
// Image Styles
// styled images added from Bootstrap
// PageLines 2.3
// BA
// -----------

// Rounded corners
.img-rounded {
  .border-radius(6px);
}

// Add polaroid-esque trim
.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  .box-shadow(0 1px 3px rgba(0,0,0,.1));
}

// Perfect circle
.img-circle {
  .border-radius(500px); // crank the border-radius so it works with most reasonably sized images
}