/* 

	SB Prototype Tools
	Provides simple classes to make prototyping easy.

*/

.pt-img {
	width:100%;
	border:1px SOLID #000;
	position:relative;
	background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

.pt-img.white {
	border:1px SOLID #fff;
	background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(255,255,255,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(255,255,255,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

.pt-img.inline {
	display:inline-block;
}

.pt-img.middle {
	vertical-align:middle;
}

.pt-img.ar-16-9 {
	padding-bottom: 56.25%;
}

.pt-img.ar-1-1 {
	padding-bottom: 100%;
}

.pt-img.ar-2-1 {
	padding-bottom: 50%;
}

.pt-img.ar-4-3 {
	padding-bottom: 75%;
}

.pt-img.ar-3-4 {
	padding-bottom: 125%;
}

.pt-img .pt-label {
	position:absolute;
	border:1px SOLID #000;
	color:#000;
	top:16px;
	left:16px;
	padding:8px 16px;
	max-width:calc(100% - 32px);
}

.pt-img.white .pt-label {
	border:1px SOLID #fff;
	color:#fff;
	background-color:#000;
}