PHB style should be fully scoped

client/homebrew/phbStyle/phb.depricated.less

@@ -1,33 +0,0 @@
-.brewRendererOld {
-	.phb_old{
-		//Double hr for full width elements
-		hr+hr+blockquote{
-			column-span         : all;
-			-webkit-column-span : all;
-			-moz-column-span    : all;
-		}
-
-		//*****************************
-		// *      CLASS TABLE
-		// *****************************/
-		hr+table{
-			margin-top          : -5px;
-			margin-bottom       : 50px;
-			padding-top         : 10px;
-			border-collapse     : separate;
-			background-color    : white;
-			border              : initial;
-			border-style        : solid;
-			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;
-		}
-	}
-}

shared/depricated/brewRendererOld/brewRendererOld.jsx

@@ -100,13 +100,13 @@ const OLD_BrewRenderer = React.createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb old' id={`p${index + 1}`} key={index}>
+		return <div className='phb v1' id={`p${index + 1}`} key={index}>
 			<i className='fa fa-spinner fa-spin' />
 		</div>
 	},
 
 	renderPage : function(pageText, index){
-		return <div className='phb_old' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
+		return <div className='phb v1' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
 	},
 
 	renderPages : function(){

shared/homebrewery/brewRenderer/brewRenderer.jsx

@@ -107,13 +107,13 @@ const BrewRenderer = React.createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb' id={`p${index + 1}`} key={index}>
+		return <div className='phb v1' id={`p${index + 1}`} key={index}>
 			<i className='fa fa-spinner fa-spin' />
 		</div>
 	},
 
 	renderPage : function(pageText, index){
-		return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
+		return <div className='phb v1' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
 	},
 
 	renderPages : function(){

shared/homebrewery/brewRenderer/brewRenderer.less

@@ -1,5 +1,5 @@
 
-@import (less) './client/homebrew/phbStyle/phb.style.less';
+@import (less) './shared/homebrewery/phb_style/phb.style.less';
 .pane{
 	position : relative;
 }

shared/homebrewery/phb_style/phb.style.less

@@ -1,47 +1,54 @@
 
 @import (less) 'shared/naturalcrit/styles/reset.less';
-@import (less) './client/homebrew/phbStyle/phb.fonts.css';
+@import (less) './phb.fonts.css';
-@import (less) './client/homebrew/phbStyle/phb.assets.less';
+@import (less) './phb.assets.less';
-@import (less) './client/homebrew/phbStyle/phb.depricated.less';
-//Colors
-@background            : #EEE5CE;
-@noteGreen             : #e0e5c1;
-@headerUnderline       : #c9ad6a;
-@horizontalRule        : #9c2b1b;
-@headerText            : #58180D;
-@monsterStatBackground : #FDF1DC;
 
-@page { margin: 0; }
 
-//TODO: Change
+@media print {
-.brewRenderer {
+	.phb.v1{
-	counter-reset : phb-page-numbers;
+		.descriptive, blockquote{
+			box-shadow : none;
+		}
+	}
 }
-.useSansSerif(){
+
-	font-family : ScalySans;
+.phb.v1{
-	em{
+
+	//Colors
+	@background            : #EEE5CE;
+	@noteGreen             : #e0e5c1;
+	@headerUnderline       : #c9ad6a;
+	@horizontalRule        : #9c2b1b;
+	@headerText            : #58180D;
+	@monsterStatBackground : #FDF1DC;
+
+	@page { margin: 0; }
+
+
+	.useSansSerif(){
 		font-family : ScalySans;
-		font-style  : italic;
+		em{
+			font-family : ScalySans;
+			font-style  : italic;
+		}
+		strong{
+			font-family    : ScalySans;
+			font-weight    : 800;
+			letter-spacing : -0.02em;
+		}
 	}
-	strong{
+	.useColumns(@multiplier : 1){
-		font-family    : ScalySans;
+		column-count         : 2;
-		font-weight    : 800;
+		column-fill          : auto;
-		letter-spacing : -0.02em;
+		column-gap           : 1cm;
+		column-width         : 8cm * @multiplier;
+		-webkit-column-count : 2;
+		-moz-column-count    : 2;
+		-webkit-column-width : 8cm * @multiplier;
+		-moz-column-width    : 8cm * @multiplier;
+		-webkit-column-gap   : 1cm;
+		-moz-column-gap      : 1cm;
 	}
-}
-.useColumns(@multiplier : 1){
-	column-count         : 2;
-	column-fill          : auto;
-	column-gap           : 1cm;
-	column-width         : 8cm * @multiplier;
-	-webkit-column-count : 2;
-	-moz-column-count    : 2;
-	-webkit-column-width : 8cm * @multiplier;
-	-moz-column-width    : 8cm * @multiplier;
-	-webkit-column-gap   : 1cm;
-	-moz-column-gap      : 1cm;
-}
-.phb{
 	& *{
 		-webkit-print-color-adjust : exact;
 	}
@@ -361,124 +368,157 @@
 		-webkit-column-break-inside : avoid;
 		column-break-inside         : avoid;
 	}
-}
+
-//*****************************
+	//*****************************
-// *         SPELL LIST
+	// *         SPELL LIST
-// *****************************/
+	// *****************************/
-.phb .spellList{
+	.spellList{
-	.useSansSerif();
+		.useSansSerif();
-	column-count        : 4;
+		column-count        : 4;
-	column-span         : all;
+		column-span         : all;
-	-webkit-column-span : all;
+		-webkit-column-span : all;
-	-moz-column-span    : all;
+		-moz-column-span    : all;
-	ul+h5{
+		ul+h5{
-		margin-top : 15px;
+			margin-top : 15px;
-	}
+		}
-	p, ul{
+		p, ul{
-		font-size   : 0.352cm;
+			font-size   : 0.352cm;
-		line-height : 1.3em;
+			line-height : 1.3em;
-	}
+		}
-	ul{
+		ul{
-		margin-bottom               : 0.5em;
+			margin-bottom               : 0.5em;
-		padding-left                : 1em;
+			padding-left                : 1em;
-		text-indent                 : -1em;
+			text-indent                 : -1em;
-		list-style-type             : none;
+			list-style-type             : none;
-		-webkit-column-break-inside : auto;
+			-webkit-column-break-inside : auto;
-		column-break-inside         : auto;
+			column-break-inside         : auto;
-	}
-}
-//*****************************
-// *         PRINT
-// *****************************/
-.phb.print{
-	blockquote{
-		box-shadow : none;
-	}
-}
-@media print {
-	.phb .descriptive, .phb blockquote{
-		box-shadow : none;
-	}
-}
-//*****************************
-// *         WIDE
-// *****************************/
-.phb .wide{
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
-}
-//*****************************
-// *       CLASS TABLE
-// *****************************/
-.phb .classTable{
-	margin-top          : 25px;
-	margin-bottom       : 40px;
-	border-collapse     : separate;
-	background-color    : white;
-	border              : initial;
-	border-style        : solid;
-	border-image-outset : 25px 17px;
-	border-image-repeat : round;
-	border-image-slice  : 150 200 150 200;
-	border-image-source : @frameBorderImage;
-	border-image-width  : 47px;
-	h5{
-		margin-bottom : 10px;
-	}
-}
-//*****************************
-// *       CLASS TABLE
-// *****************************/
-.phb .descriptive{
-	display             : block-inline;
-	margin-bottom       : 1em;
-	background-color    : #faf7ea;
-	font-family         : ScalySans;
-	border-style        : solid;
-	border-width        : 7px;
-	border-image        : @descriptiveBoxImage 12 round;
-	border-image-outset : 4px;
-	box-shadow          : 0px 0px 6px #faf7ea;
-	p{
-		display        : block;
-		padding-bottom : 0px;
-		line-height    : 1.5em;
-	}
-	p + p {
-		padding-top : .8em;
-	}
-	em {
-		font-family : ScalySans;
-		font-style  : italic;
-	}
-	strong {
-		font-family    : ScalySans;
-		font-weight    : 800;
-		letter-spacing : -0.02em;
-	}
-}
-.phb pre+.descriptive{
-	margin-top : 8px;
-}
-//*****************************
-// *      TABLE OF CONTENTS
-// *****************************/
-.phb .toc{
-	-webkit-column-break-inside : avoid;
-	column-break-inside         : avoid;
-	a{
-		color           : black;
-		text-decoration : none;
-		&:hover{
-			text-decoration : underline;
 		}
 	}
-	ul{
+	//*****************************
-		padding-left    : 0;
+	// *         PRINT
-		list-style-type : none;
+	// *****************************/
+	&.print{
+		blockquote{
+			box-shadow : none;
+		}
 	}
-	&>ul>li{
+
-		margin-bottom : 10px;
+	//*****************************
+	// *         WIDE
+	// *****************************/
+	.wide{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+	}
+	//*****************************
+	// *       CLASS TABLE
+	// *****************************/
+	.classTable{
+		margin-top          : 25px;
+		margin-bottom       : 40px;
+		border-collapse     : separate;
+		background-color    : white;
+		border              : initial;
+		border-style        : solid;
+		border-image-outset : 25px 17px;
+		border-image-repeat : round;
+		border-image-slice  : 150 200 150 200;
+		border-image-source : @frameBorderImage;
+		border-image-width  : 47px;
+		h5{
+			margin-bottom : 10px;
+		}
+	}
+	//*****************************
+	// *       CLASS TABLE
+	// *****************************/
+	.descriptive{
+		display             : block-inline;
+		margin-bottom       : 1em;
+		background-color    : #faf7ea;
+		font-family         : ScalySans;
+		border-style        : solid;
+		border-width        : 7px;
+		border-image        : @descriptiveBoxImage 12 round;
+		border-image-outset : 4px;
+		box-shadow          : 0px 0px 6px #faf7ea;
+		p{
+			display        : block;
+			padding-bottom : 0px;
+			line-height    : 1.5em;
+		}
+		p + p {
+			padding-top : .8em;
+		}
+		em {
+			font-family : ScalySans;
+			font-style  : italic;
+		}
+		strong {
+			font-family    : ScalySans;
+			font-weight    : 800;
+			letter-spacing : -0.02em;
+		}
+	}
+	pre+.descriptive{
+		margin-top : 8px;
+	}
+	//*****************************
+	// *      TABLE OF CONTENTS
+	// *****************************/
+	.toc{
+		-webkit-column-break-inside : avoid;
+		column-break-inside         : avoid;
+		a{
+			color           : black;
+			text-decoration : none;
+			&:hover{
+				text-decoration : underline;
+			}
+		}
+		ul{
+			padding-left    : 0;
+			list-style-type : none;
+		}
+		&>ul>li{
+			margin-bottom : 10px;
+		}
+	}
+
+
+
+	//*****************************
+	// *      Old Stuff
+	// *****************************/
+
+	//Double hr for full width elements
+	hr+hr+blockquote{
+		column-span         : all;
+		-webkit-column-span : all;
+		-moz-column-span    : all;
+	}
+
+	//*****************************
+	// *      CLASS TABLE
+	// *****************************/
+	hr+table{
+		margin-top          : -5px;
+		margin-bottom       : 50px;
+		padding-top         : 10px;
+		border-collapse     : separate;
+		background-color    : white;
+		border              : initial;
+		border-style        : solid;
+		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;
 	}
 }