@import (less) 'shared/naturalcrit/styles/reset.less';
@import (less) './client/homebrew/phbStyle/phb.fonts.css';
@import (less) './client/homebrew/phbStyle/phb.assets.less';
//Colors
@background            : #EEE5CE;
@noteGreen             : #e0e5c1;
@headerUnderline       : #c9ad6a;
@horizontalRule        : #9c2b1b;
@headerText            : #58180D;
@monsterStatBackground : #FDF1DC;
@page { margin: 0; }
.useSansSerif(){
	font-family : ScalySans;
	em{
		font-family : ScalySans;
		font-style  : italic;
	}
	strong{
		font-family    : ScalySans;
		font-weight    : 800;
		letter-spacing : -0.02em;
	}
}
.useColumns(){
	column-count         : 2;
	column-fill          : auto;
	column-gap           : 1cm;
	column-width         : 8cm;
	-webkit-column-count : 2;
	-moz-column-count    : 2;
	-webkit-column-width : 8cm;
	-moz-column-width    : 8cm;
	-webkit-column-gap   : 1cm;
	-moz-column-gap      : 1cm;
}
.phb{
	.useColumns();
	position          : relative;
	z-index           : 15;
	box-sizing        : border-box;
	overflow          : hidden;
	height            : 279.4mm;
	width             : 215.9mm;
	padding           : 1.0cm 1.7cm;
	padding-bottom    : 1.5cm;
	background-color  : @background;
	background-image  : @backgroundImage;
	font-family       : BookSanity;
	font-size         : 0.317cm;
	text-rendering    : optimizeLegibility;
	page-break-before : always;
	page-break-after  : always;
	//*****************************
	// *            BASE
	// *****************************/
	p{
		padding-bottom : 0.8em;
		line-height    : 1.3em;
		&+p{
			margin-top  : -0.8em;
			text-indent : 1em;
		}
	}
	ul{
		margin-bottom       : 0.8em;
		line-height         : 1.3em;
		list-style-position : inside;
		list-style-type     : disc;
	}
	ol{
		margin-bottom       : 0.8em;
		line-height         : 1.3em;
		list-style-position : inside;
		list-style-type     : decimal;
	}
	img{
		z-index : -1;
	}
	strong{
		font-weight    : bold;
		letter-spacing : 0.03em;
	}
	em{
		font-style : italic;
	}
	sup{
		vertical-align: super;
		font-size: smaller;
		line-height: 0;
	}
	sub{
		vertical-align: sub;
		font-size: smaller;
		line-height: 0;
	}

	//*****************************
	// *           HEADERS
	// *****************************/
	h1,h2,h3,h4{
		margin-top    : 0.2em;
		margin-bottom : 0.2em;
		font-family   : MrJeeves;
		font-weight   : 800;
		color         : @headerText;
	}
	h1{
		column-span         : all;
		font-size           : 0.987cm;
		-webkit-column-span : all;
		-moz-column-span    : all;
		&+p::first-letter{
			float       : left;
			font-family : Solberry;
			font-size   : 10em;
			color       : #222;
			line-height : 0.8em;
		}
	}
	h2{
		font-size : 0.705cm;
	}
	h3{
		font-size     : 0.529cm;
		border-bottom : 2px solid @headerUnderline;
	}
	h4{
		margin-bottom : 0.00em;
		font-size     : 0.458cm;
	}
	h5{
		margin-bottom : 0.2em;
		font-family   : ScalySansSmallCaps;
		font-size     : 0.423cm;
		font-weight   : 900;
	}
	//*****************************
	// *          TABLE
	// *****************************/
	table{
		.useSansSerif();
		width         : 100%;
		margin-bottom : 1em;
		font-size     : 10pt;
		thead{
			font-weight : 800;
			th{
				vertical-align : bottom;
				padding-bottom : 0.3em;
				padding-right  : 0.1em;
				padding-left   : 0.1em;
			}
		}
		tbody{
			tr{
				td{
					padding : 0.3em 0.1em;
				}
				&:nth-child(odd){
					background-color : @noteGreen;
				}
			}
		}
	}
	//*****************************
	// *            NOTE
	// *****************************/
	blockquote{
		.useSansSerif();
		box-sizing       : border-box;
		margin-bottom    : 1em;
		padding          : 5px 10px;
		background-color : @noteGreen;
		border-top       : 2px black solid;
		border-bottom    : 2px black solid;
		box-shadow       : 1px 4px 14px #888;
		p, ul{
			font-size         : 0.352cm;
			line-height : 1.1em;
		}
	}
	//*****************************
	// *    MONSTER STAT BLOCK
	// *****************************/
	hr+blockquote{
		position         : relative;
		background-color : @monsterStatBackground;
		border           : none;
		padding-top: 15px;
		h2{
			margin-top: -8px;
			margin-bottom : 0px;
			&+p{
				padding-bottom : 0px;
			}
		}
		h3{
			font-family   : ScalySans;
			font-weight   : 400;
			border-bottom : 1px solid @headerText;
		}
		ul{
			.useSansSerif();
			padding-left    : 1em;
			font-size         : 0.352cm;
			color           : @headerText;
			text-indent     : -1em;
			list-style-type : none;
		}
		// Monster Ability table
		hr+table{
			margin              : 0;
			column-span         : 1;
			background-color    : transparent;
			border-image        : none;
			-webkit-column-span : 1;
			tbody{
				tr:nth-child(odd), tr:nth-child(even){
					background-color : transparent;
				}
			}
		}
		table{
			color : @headerText;
		}
		p+p{
			margin-top     : 0em;
			padding-bottom : 0.5em;
			text-indent    : 0em;
		}
		//Triangle dividers
		hr{
			@height      : 3px;
			position     : relative;
			visibility   : visible;
			margin       : 8px 0px;
			border-color : transparent;
			&:after, &:before{
				content  : "";
				position : absolute;
				left     : 0px;
				height   : @height;
				width    : 100%;
			}
			&:before{
				top        : -@height;
				background : linear-gradient(to right top, @horizontalRule 40%, transparent 50%)
			}
			&:after{
				top        : 0px;
				background : linear-gradient(to right bottom, @horizontalRule 40%, transparent 50%)
			}
		}
		//Top and Bottom Borders
		&:after, &:before{
			content          : "";
			position         : absolute;
			height           : 4px;
			width            : 100%;
			padding          : 0px 3px;
			background-color : #E69A28;
			border           : 1px solid black;
		}
		&:before{
			top  : 0px;
			left : -3px;
		}
		&:after{
			bottom : 0px;
			left   : -3px;
		}
	}
	//Full Width
	hr+hr+blockquote{
		.useColumns();
	}
	//*****************************
	// *      CLASS TABLE
	// *****************************/
	hr+table{
		margin-top          : -5px;
		margin-bottom       : 50px;
		padding-top         : 10px;
		border-collapse     : separate;
		background-color    : white;
		border              : initial;
		border-image-outset : 37px 17px;
		border-image-repeat : round;
		border-image-slice  : 150 200 150 200;
		border-image-source : @frameBorderImage;
		border-image-width  : 47px;
	}
	h5+hr+table{
		column-span         : all;
		-webkit-column-span : all;
		-moz-column-span    : all;
	}


	//*****************************
	// *           FOOTER
	// *****************************/
	&:after{
		content          : "";
		position         : absolute;
		bottom           : 0px;
		left             : 0px;
		height           : 50px;
		width            : 100%;
		background-image : @footerAccentImage;
		background-size  : cover;
	}
	&:nth-child(even){
		&:after{
			transform : scaleX(-1);
		}
		.pageNumber{
			left : 2px;
		}
		.footnote{
			left       : 80px;
			text-align : left;
		}
	}
	.pageNumber{
		position   : absolute;
		right      : 2px;
		bottom     : 22px;
		width      : 50px;
		font-size  : 0.9em;
		color      : #c9ad6a;
		text-align : center;
	}
	.footnote{
		position   : absolute;
		right      : 80px;
		bottom     : 32px;
		width      : 200px;
		font-size  : 0.8em;
		color      : #c9ad6a;
		text-align : right;
	}
	//*****************************
	// *          EXTRAS
	// *****************************/
	hr{
		visibility : hidden;
		margin     : 0px;
	}
	//Modified unorder list, used in spells
	hr+ul{
		margin-bottom   : 0.5em;
		padding-left    : 1em;
		text-indent     : -1em;
		list-style-type : none;
	}
	//Double hr for full width elements
	hr+hr+blockquote{
		column-span         : all;
		-webkit-column-span : all;
		-moz-column-span    : all;
	}
	//Column Break
	pre{
		visibility                 : hidden;
		-webkit-column-break-after : always;
		break-after                : always;
		-moz-column-break-after    : always;
	}
	//Avoid breaking up
	p,ul,blockquote,table{
		z-index                     : 15;
		-webkit-column-break-inside : avoid;
		column-break-inside         : avoid;
		overflow: hidden; /* Firefox fix */
	}
	//Better spacing for spell blocks
	h4+p+hr+ul{
		margin-top : -0.5em
	}
	//Text indent right after table
	table+p{
		text-indent : 1em;
	}
	// Nested lists
	ul ul,ol ol,ul ol,ol ul{
		margin-left: 1.5em;
		margin-bottom : 0px;
	}
}