yay for waindows pathing

shared/naturalcrit2/codeEditor/codeEditor.jsx

@@ -0,0 +1,73 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+
+var CodeMirror;
+if(typeof navigator !== 'undefined'){
+	var CodeMirror = require('codemirror');
+
+	//Language Modes
+	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
+	require('codemirror/mode/javascript/javascript.js');
+}
+
+
+var CodeEditor = React.createClass({
+	getDefaultProps: function() {
+		return {
+			language : '',
+			value : '',
+			wrap : false,
+			onChange : function(){},
+			onCursorActivity : function(){},
+		};
+	},
+
+	componentDidMount: function() {
+		this.codeMirror = CodeMirror(this.refs.editor,{
+			value : this.props.value,
+			lineNumbers: true,
+			lineWrapping : this.props.wrap,
+			mode : this.props.language
+		});
+
+		this.codeMirror.on('change', this.handleChange);
+		this.codeMirror.on('cursorActivity', this.handleCursorActivity);
+		this.updateSize();
+	},
+
+	componentWillReceiveProps: function(nextProps){
+		if(this.codeMirror && nextProps.value !== undefined && this.codeMirror.getValue() != nextProps.value) {
+			this.codeMirror.setValue(nextProps.value);
+		}
+	},
+
+	shouldComponentUpdate: function(nextProps, nextState) {
+		return false;
+	},
+
+	setCursorPosition : function(line, char){
+		setTimeout(()=>{
+			this.codeMirror.focus();
+			this.codeMirror.doc.setCursor(line, char);
+		}, 10);
+	},
+
+	updateSize : function(){
+		this.codeMirror.refresh();
+	},
+
+	handleChange : function(editor){
+		this.props.onChange(editor.getValue());
+	},
+	handleCursorActivity : function(){
+		this.props.onCursorActivity(this.codeMirror.doc.getCursor());
+	},
+
+	render : function(){
+		return <div className='codeEditor' ref='editor' />
+	}
+});
+
+module.exports = CodeEditor;

shared/naturalcrit2/codeEditor/codeEditor.less

@@ -0,0 +1,5 @@
+@import (less) 'codemirror/lib/codemirror.css';
+
+.codeEditor{
+
+}

shared/naturalcrit2/combat/combat.actions.js

@@ -0,0 +1,23 @@
+var dispatch = require('pico-flux').dispatch;
+
+module.exports = {
+	updateMonsterManual : function(json){
+		dispatch('UDPATE_MONSTER_MANUAL', json);
+	},
+	addEncounter : function(){
+		dispatch('ADD_ENCOUNTER');
+	},
+	updateEncounter : function(index, json){
+		dispatch('UPDATE_ENCOUNTER', index, json);
+	},
+	removeEncounter : function(index){
+		dispatch('REMOVE_ENCOUNTER', index);
+	},
+	updatePlayers : function(text){
+		dispatch('UPDATE_PLAYERS', text);
+	},
+	selectEncounter : function(index){
+		dispatch('SELECT_ENCOUNTER', index);
+	},
+
+}

shared/naturalcrit2/combat/combat.store.js

@@ -0,0 +1,69 @@
+var flux = require('pico-flux');
+var _ = require('lodash');
+
+var defaultMonsterManual = require('naturalcrit/defaultMonsterManual.js');
+var GetRandomEncounter = require('naturalcrit/randomEncounter.js');
+
+var Store = {
+	selectedEncounterIndex : 0,
+	encounters : JSON.parse(localStorage.getItem('encounters')) || [GetRandomEncounter()],
+	monsterManual : JSON.parse(localStorage.getItem('monsterManual')) || defaultMonsterManual,
+	players : localStorage.getItem('players') || 'jasper 13\nzatch 19',
+};
+
+
+module.exports = flux.createStore({
+	UDPATE_MONSTER_MANUAL : function(json){
+		Store.monsterManual = json;
+		return true;
+	},
+	ADD_ENCOUNTER : function(){
+		Store.encounters.push(GetRandomEncounter());
+		return true;
+	},
+	UPDATE_ENCOUNTER : function(index, json){
+		Store.encounters[index] = json;
+		return true;
+	},
+	REMOVE_ENCOUNTER : function(index){
+		Store.encounters.splice(index, 1);
+		return true;
+	},
+	UPDATE_PLAYERS : function(text){
+		Store.players = text;
+		return true;
+	},
+	SELECT_ENCOUNTER : function(index){
+		Store.selectedEncounterIndex = index;
+		return true;
+	},
+
+},{
+	getMonsterManual : function(){
+		return Store.monsterManual;
+	},
+	getSelectedEncounterIndex : function(){
+		return Store.selectedEncounterIndex;
+	},
+	getSelectedEncounter : function(){
+		return Store.encounters[Store.selectedEncounterIndex];
+	},
+	getEncounter : function(index){
+		return Store.encounters[index];
+	},
+	getEncounters : function(index){
+		return Store.encounters;
+	},
+	getPlayersText : function(){
+		return Store.players;
+	},
+	getPlayers : function(){
+		return _.reduce(Store.players.split('\n'), function(r, line){
+			var idx = line.lastIndexOf(' ');
+			if(idx !== -1){
+				r[line.substring(0, idx)] = line.substring(idx)*1;
+			}
+			return r;
+		}, {})
+	},
+})

shared/naturalcrit2/combat/defaultMonsterManual.js

@@ -0,0 +1,140 @@
+module.exports = {
+	goblin : {
+		size : 'small',
+		type : 'beast',
+		alignment : 'unaligned',
+		stats : {
+			hp : 40,
+			mov: 30,
+			ac : 13,
+		},
+		scores : {
+			str : 8,
+			con : 8,
+			dex : 8,
+			int : 8,
+			wis : 8,
+			cha : 8
+		},
+		attr : {
+			skills : ['Stealth +5'],
+			lang : ['common'],
+			cr : 0.25,
+		},
+		abilities : {
+			"pack tactics" : "Does a thing",
+			"fancy dance" : "dances fancy"
+		},
+		actions : {
+			bite : {
+				type : "Melee weapon attack",
+				atk : "+4 to hit",
+				rng : "5ft",
+				target : "one target",
+				dmg : "4 (1d4 + 2) piercing damage",
+				desc: ""
+			},
+			scare : {
+				uses : "1/day",
+				desc : "scares you"
+			}
+		},
+		items : ['rat on a stick']
+	},
+
+	"Goat Slime" : {
+		hp : 80,
+		mov: 10,
+		cr : 0.5,
+		ac : 16,
+		attr : {
+			str : 8,
+			con : 8,
+			dex : 6,
+			int : 4,
+			wis : 8,
+			cha : 8
+		},
+		attacks : {
+			caress : {
+				atk : "1d20+1",
+				dmg : "3d4+1",
+				type : "sensual"
+			},
+		},
+		abilities : {
+			"Agnostic Gel" : "Immune to magical damage"
+		},
+		items : []
+	},
+	"badass psycho" : {
+		hp : 100,
+		mov: 50,
+		ac : 14,
+		cr : 5,
+		attr : {
+			str : 17,
+			con : 18,
+			dex : 16,
+			int : 7,
+			wis : 7,
+			cha : 7
+		},
+		attacks : {
+			"throwing axe" : {
+				atk : "1d20+5",
+				dmg : "1d12+5",
+				type : "piercing",
+				rng : "30",
+				notes : "returns to baddie after throw"
+			},
+			shoot : {
+				atk : "1d20+2",
+				dmg : "4d4",
+				rng : "120"
+			}
+		},
+		spells : {
+			"meat popsicle" : {
+				dmg : "4d6",
+				uses : 8
+			},
+			"sanity check" : {
+				dmg : "2d8+4",
+				uses : 6
+			}
+		},
+		abilities : {
+			"rampage" : "when damaged, can choose to take damage from opportunity attacks for allies"
+		},
+		items : ['buzz_axe', 'healing_potion', 'tuna_fish']
+	},
+	toxicologist : {
+		hp : 40,
+		mov: 30,
+		ac : 11,
+		cr : 0.5,
+		attr : {
+			str : 7,
+			con : 11,
+			dex : 10,
+			int : 18,
+			wis : 15,
+			cha : 7
+		},
+		spells : {
+			"publish paper" : {
+				dmg : "4d6",
+				uses : 4
+			},
+			"tox test" : {
+				heal : "2d8+4",
+				uses : 6
+			}
+		},
+		abilities : {
+			"conference" : "when around more than 30 other toxicologists, consume 1 drink every 15 minutes"
+		},
+		items : ['grad_student', 'imposter_syndrome', 'ring']
+	},
+}

shared/naturalcrit2/combat/homebrewIcon.svg.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var Logo = React.createClass({
+	render : function(){
+		return <svg version="1.1" x="0px" y="0px" viewBox="0 0 90 112.5" enable-background="new 0 0 90 90" >
+			<path d="M25.363,25.54c0,1.906,8.793,3.454,19.636,3.454c10.848,0,19.638-1.547,19.638-3.454c0-1.12-3.056-2.117-7.774-2.75  c-1.418,1.891-3.659,3.133-6.208,3.133c-2.85,0-5.315-1.547-6.67-3.833C33.617,22.185,25.363,23.692,25.363,25.54z"/><path d="M84.075,54.142c0-8.68-2.868-17.005-8.144-23.829c1.106-1.399,1.41-2.771,1.41-3.854c0-6.574-10.245-9.358-19.264-10.533  c0.209,0.706,0.359,1.439,0.359,2.215c0,0.09-0.022,0.17-0.028,0.26l0,0c-0.028,0.853-0.195,1.667-0.479,2.429  c9.106,1.282,14.508,3.754,14.508,5.63c0,2.644-10.688,6.486-27.439,6.486c-16.748,0-27.438-3.842-27.438-6.486  c0-2.542,9.904-6.183,25.559-6.459c-0.098-0.396-0.159-0.807-0.2-1.223c0.006,0,0.013,0,0.017,0  c-0.017-0.213-0.063-0.417-0.063-0.636c0-1.084,0.226-2.119,0.628-3.058c-6.788,0.129-30.846,1.299-30.846,11.376  c0,1.083,0.305,2.455,1.411,3.854c-5.276,6.823-8.145,15.149-8.145,23.829c0,11.548,5.187,20.107,14.693,25.115  c-0.902,3.146-1.391,7.056,1.111,8.181c2.626,1.178,5.364-2.139,7.111-5.005c4.73,1.261,10.13,1.923,16.161,1.923  c6.034,0,11.428-0.661,16.158-1.922c1.75,2.865,4.493,6.18,7.112,5.004c2.504-1.123,2.014-5.035,1.113-8.179  C78.889,74.249,84.075,65.689,84.075,54.142z M70.39,31.392c5.43,6.046,8.78,14,8.78,22.75c0,20.919-18.582,25.309-34.171,25.309  c-15.587,0-34.17-4.39-34.17-25.309c0-8.75,3.35-16.7,8.781-22.753c5.561,2.643,15.502,4.009,25.389,4.009  C54.886,35.397,64.829,34.031,70.39,31.392z"/><path d="M50.654,23.374c2.892,0,5.234-2.341,5.234-5.233c0-2.887-2.343-5.23-5.234-5.23c-2.887,0-5.231,2.343-5.231,5.23  C45.423,21.032,47.768,23.374,50.654,23.374z"/>
+			<circle cx="62.905" cy="10.089" r="3.595"/>
+			<circle cx="52.616" cy="5.048" r="2.73"/>
+		</svg>
+	}
+});
+
+module.exports = Logo;

shared/naturalcrit2/combat/randomEncounter.js

@@ -0,0 +1,195 @@
+var _ = require('lodash');
+
+
+
+var getName = function(){
+	return _.sample([
+		"Assault of the Vampire",
+		"Beyond Horror",
+		"Bloodthirsty Odyssey to Saturn",
+		"Claw of the Breed",
+		"Curse of Samson",
+		"Electrical Christmas",
+		"Joseph Clark Loves",
+		"Mind of the Finder",
+		"Mudslide",
+		"Nun of Insanity",
+		"Odyssey to The Hollow Earth",
+		"Reaper Battle",
+		"The Bird-Man goes to The Hollow Earth",
+		"The Bloodthirsty Kiss of The Decadent Bird",
+		"The Diseased Assasin",
+		"The Elephant-Person goes to Mars",
+		"The Evil Saga of the Grizzly-Women",
+		"The Octopus-Person",
+		"The Whorehouse of Medusa",
+		"Assignment: Sensuality, A New Beginning",
+		"Avalanche 2010",
+		"Body of Plague",
+		"Bones of the Zombie",
+		"Clone Snatchers",
+		"Curse of Lizzie Borden",
+		"Damnation Breakers",
+		"Disease Pit",
+		"Emperor Beauty",
+		"Fate of The Abominable Indestructible Women",
+		"Love Festival",
+		"The Beta Person, Part 8",
+		"The Horrible Undead Men",
+		"The Inhuman People",
+		"The Love of The Psychedelic Beast",
+		"The Mutant Depraved",
+		"The Policeman Corrupted, Part 5",
+		"The Psychedelic Operation",
+		"The Terrible Policewoman",
+		"War Beyond El Dorado",
+		"Battle of London",
+		"Gold Love",
+		"I Married Aladdin",
+		"Johnny Walker Loves",
+		"King Love",
+		"Lancelot versus Dracula, The Next Generation",
+		"Licentious Forest",
+		"Passion Festival",
+		"Passion Harvesters",
+		"Sinbad meets Lizzie Borden",
+		"Son of The Impossible Ant-People",
+		"The Blood Ravagers",
+		"The Body Fighter",
+		"The Cat-Men Posessed, Chapter 2",
+		"The Dog-Women from The Past",
+		"The New York Sensation",
+		"The Nurse Destroyed",
+		"The Soulless Spy",
+		"The Soulless Swindler",
+		"The Terrifying Vampires",
+		"Beyond Shangri-La",
+		"Brood of Disease",
+		"Claw of Courage",
+		"Fate of The Gamma Boy, The Revenge",
+		"Festival of the Controller",
+		"Forest Fire",
+		"Genocide!",
+		"Heart of the Devil",
+		"I was a Swindler for the SS",
+		"I was an Executioner for the FBI",
+		"Life Land",
+		"She was a teenaged Annie Oakley",
+		"The Blind Vigilante",
+		"The Cybernetic Eternity",
+		"The Diabolical Tiffany Parker",
+		"The Diseased Alien",
+		"The Legend of Lizzie Borden",
+		"The Legless Hunter",
+		"The Moscow Terror",
+		"Wonder Festival"
+	]);
+};
+
+var getPlot = function(){
+	return _.sample([
+		"In a cursed galaxy, in an age of illusions, four barbarians and a conjurer battle a horde of murderers.",
+		"In a wicked kingdom, in a time of war, a philosopher tries to find the cure for a deadly disease.",
+		"In a godless land of terror, in a time of war and blood, a swordsman and a chemist battle evil.",
+		"In a terrifying land of ghosts, a robot and a sailor try to find revenge.",
+		"In a kingdom of misery, in a time of danger, two ambassadors oppose a conspiracy intent on on taking over the world.",
+		"In a demon-haunted land, in a time of lost souls and suffering, a xenobiologist and an engineer oppose lawlessness.",
+		"In a dark kingdom, in a time of deception and deception, a secret agent seeks an ancient treasure.",
+		"In a distant galaxy, two policemans and a scientist try to find love.",
+		"In a universe of prophecy and lies, in a time of wonder and warfare, a virtual reality engineer tries to stop the destruction of mankind.",
+		"In a land of confusion, five monks oppose evil.",
+		"In a world of prophecy and panic, in an era of mysticism and doom, a hacker battles evil.",
+		"In a city of fear, a cleric and a magician hope to save the last living fertile woman.",
+		"On a crime-ridden world of illusion, a prostitute seeks justice and combats an army of assasins intent on on destroying humanity.",
+		"In a kingdom of demons, three businesspersons and an ambassador quest for hope and battle evil.",
+		"On a planet of magic and suffering, in an era of doom, eight aliens quest for fame and combat a cabal of fallen angels intent on stealing the souls of the innocent.",
+		"In a terrifying universe of lost souls, a seer hopes to save a kidnapped princess.",
+		"On an infernal planet of blood, four secret agents battle a syndicate of zombies intent on on summoning an evil god.",
+		"In a dark kingdom, in an age of hate, a computer programmer fights evil.",
+		"In an ominous land, in an age of panic, four wanderers and a linguist search for revenge and oppose terrorism.",
+		"In a universe of madness and devils, in a time of lies and danger, a mutant seeks a mysterious artifact.",
+		"On an infernal planet of terror, in a time of secrets and prophecy, five dutchesses try to save a kidnapped physicist.",
+		"In a galaxy of devils, in an era of virutal reality, a necromancer attempts to avert the apocalypse.",
+		"In a sinful universe, in an era of enchantment and devils, two champions seek revenge.",
+		"In a land of murder, a farmer hopes to solve the ultimate crime.",
+		"In a barbaric kingdom of hate, three theologians and a noble seek an ancient treasure and combat a horde of undead.",
+		"On a planet of chaos, in an age of magic, a student and a spirit try to find freedom and fight crime.",
+		"On a barbaric planet, in an era of prophecy and wonder, two bodyguards hope to find the cure for a deadly disease.",
+		"In a crime-infested galaxy, a champion and a jailer try to find the ultimate weapon and fight a horde of mages intent on on destroying humanity.",
+		"In a land of prophecy and mysteries, a clone seeks hope and combats crime.",
+		"In a galaxy of mysticism and pain, four secretaries and a gambler hope to stop the apocalypse.",
+		"On a planet of illusion and horror, three novelists and a professor try to find vengance.",
+		"In a galaxy of enchantment and hate, in a time of barbarism and danger, four tomb-robbers combat the forces of hell.",
+		"In a kingdom of mysteries and agony, in an era of illusion, a rascal and a barbarian attempt to solve the ultimate crime.",
+		"In a demon-haunted land of warfare, in a time of prophecy and prophecy, four farmers and a conjurer search for fame and combat a mob of aliens intent on on taking over the world.",
+		"In a forbidden land, in a time of doom, two chemists and a queen hope to find the cure for a deadly disease.",
+		"In a kingdom of insanity, in an age of sorcery, three cyborgs and a theologian try to find justice and combat lawlessness.",
+		"In a demon-haunted city, in an age of horror, six virtual reality programmers hope to save a kidnapped occultist.",
+		"In an empire of dreams and mysteries, a gigolo seeks love and opposes terrorism.",
+		"On a planet of insanity, six cyborgs hope to solve the ultimate crime.",
+		"On a godforsaken world of insanity, in an era of computerization, two computer programmers and a bartender try to find the cure for a deadly disease.",
+		"In a crime-infested empire, a farmer fights terrorism.",
+		"In a universe of ghosts, in an age of enchantment, a virtual reality engineer and a dungeon delver hope to solve the ultimate crime.",
+		"In a hellish land, in a time of blood and virutal reality, a magician combats terrorism.",
+		"On a wicked planet of lost souls, two princesses try to save a kidnapped fletcher.",
+		"In a hellish galaxy, two magicians and a grave robber combat corrupt politicians."
+	]);
+}
+
+var getTwist = function(){
+	return _.sample([
+		"A character is shown to have a dangerous compulsion, this is revealed when someone has a psychic vision.",
+		"A character suddenly falls out of love with the antagonist's twin.",
+		"In order to fulfill their goals, a character must kill their true love - and they do it.",
+		"Because of a time of political turmoil, the antagonist is revealed to be being manipulated by someone else",
+		"Because of a tornado, the protagonist is revealed to be having their own hidden plans",
+		"It's revealed that everything that is happening is in a hallucination. That's when everything becomes hilarious.",
+		"We discover that, thanks to a sudden discovery, that a character has a mental illness.",
+		"The antagonist discovers everyone else actually is addicted to a substance - this is due to a simple miscommunication.",
+		"The antagonist thinks that everything happening a misinterpretation of something else - and this is due to being lied to by others.",
+		"The antagonist discovers everyone else actually is an artifical life form.",
+		"The lead suddenly reveals a witty side - which makes things much more complicated",
+		"We discover that, thanks to a heartfelt confession, that a character is a clone.",
+		"A string of numbers turns out to refer to a combination on a safe - which someone uses to their advantage.",
+		"The alternate antagonist turns out to be the protagonist's brother.",
+		"We discover that, once a specific name is analyzed, that everything is exactly what it seems - despite evidence to the contrary.",
+		"A character suddenly falls in love with the antagonist - but this is due to a dangerous compulsion.",
+		"Thanks to strange technology, the characters end up in the earth's future.",
+		"The alternate antagonist turns out to be the alternate protagonist's father.",
+		"In order to fulfill their goals, a character must betray their best friend - and they can't bring themselves to do it.",
+		"The antagonist discovers everyone else actually is a demonic entity.",
+		"A character suddenly falls in love with the secondary protagonist - this brings out magical gifts.",
+		"The alternate protagonist turns out to be the antagonist's brother.",
+		"What people think of as witchcraft is really genetic engineering.",
+		"A supposedly accidental hug is actually caused by strange technology.",
+		"The world is revealed to be dependent on nanotechnology.",
+		"Because of a tornado, the antagonist is revealed to be being manipulated by someone else",
+		"At the start of the story some money is introduced - and of course it is used by the story's end.",
+		"A character is shown to have strange powers - this is revealed by a series of strange co-incidences.",
+		"In order to fulfill their goals, a character must kill their aunt - and they do it.",
+		"Because of a discovery, the secondary protagonist is revealed to be hallucinating."
+	]);
+}
+
+var getReward = function(){
+	return _.sample([
+		'goat sac', '10 gold', '100 gold', '101 gold', 'curved horn', 'wand of wand creation',
+		'bag of hand-holding', '1 copper', 'true friendship', 'magical stick'
+	], _.random(1,5)).join(', ');
+}
+
+
+
+module.exports = function(monsterManual){
+
+	return {
+		name : getName(),
+		desc : getPlot() + ' ' + getTwist(),
+		reward : getReward(),
+		enemies : _.sample(_.keys(monsterManual), _.random(2,6)),
+		unique : {
+
+
+		}
+	}
+}

shared/naturalcrit2/combat/rollDice.js

@@ -0,0 +1,32 @@
+var _ = require('lodash');
+
+module.exports = function(notation){
+	notation = notation.replace(/ /g,'');
+	var parts = notation.split(/(?=[\-\+])/g);
+
+	return _.reduce(parts, function(r, part){
+		if(!_.isNumber(r)) return r;
+		var res = 0;
+		var neg = false;
+		if(part[0] == '-') neg = true;
+		if(part[0] == '-' || part[0] == '+') part = part.substring(1);
+
+		//Check for dice
+		if(part.indexOf('d') !== -1){
+			var numDice = part.split('d')[0];
+			var die = part.split('d')[1];
+
+			var diceRolls = _.times(numDice, function(){
+				return _.random(1, die);
+			});
+			res = _.sum(diceRolls);
+			if(numDice == 1 && die == 20){
+				if(diceRolls[0] == 1)  return 'Fail!';
+				if(diceRolls[0] == 20) return 'Crit!';
+			}
+		}else{
+			res = part * 1;
+		}
+		return r + (neg ? -res : res);
+	}, 0)
+}

shared/naturalcrit2/combatIcon.svg.jsx

@@ -0,0 +1,9 @@
+var React = require('react');
+
+var Logo = React.createClass({
+	render : function(){
+		return <svg version="1.1" x="0px" y="0px" viewBox="0 0 80 100" enable-background="new 0 0 80 80"><g><g><polygon fill="#000000" points="12.9,71.4 7.6,66.1 19.3,54.4 20.7,55.8 10.4,66.1 12.9,68.6 23.2,58.3 24.6,59.7   "/></g><g><path fill="#000000" d="M29,61.6c-1.7,0-3.4-0.7-4.6-1.9l-5.1-5.1c-2.5-2.5-2.5-6.6,0-9.2l0.7-0.7L34.3,59l-0.7,0.7    C32.4,60.9,30.8,61.6,29,61.6z M20.1,47.6c-1.1,1.7-0.9,4.1,0.6,5.6l5.1,5.1c0.8,0.8,2,1.3,3.2,1.3c0.9,0,1.7-0.2,2.4-0.7    L20.1,47.6z"/></g><g><path fill="#000000" d="M12.3,74.8c-0.8,0-1.5-0.3-2-0.8l-5.2-5.2c-0.5-0.5-0.8-1.2-0.8-2c0-0.8,0.3-1.5,0.8-2    c1.1-1.1,2.9-1.1,4,0l5.2,5.2c1.1,1.1,1.1,2.9,0,4C13.8,74.5,13.1,74.8,12.3,74.8z M7.1,65.9c-0.2,0-0.4,0.1-0.6,0.2    c-0.2,0.2-0.2,0.4-0.2,0.6s0.1,0.4,0.2,0.6l5.2,5.2c0.3,0.3,0.9,0.3,1.2,0c0.3-0.3,0.3-0.8,0-1.2l-5.2-5.2    C7.5,66,7.3,65.9,7.1,65.9z"/></g><g><polygon fill="#000000" points="31.7,58.7 30.3,57.3 70,17.6 70,9 62.4,9 23.3,49.4 21.9,48 61.6,7 72,7 72,18.4   "/></g><g><rect x="46" y="6.7" transform="matrix(0.7168 0.6973 -0.6973 0.7168 35.9716 -23.568)" fill="#000000" width="2" height="51.6"/></g><g><rect x="13" y="61" fill="#000000" width="2" height="7"/></g><g><rect x="17" y="57" fill="#000000" width="2" height="7"/></g></g><g><g><polygon fill="#000000" points="68.4,71.4 56.7,59.7 58.1,58.3 68.4,68.6 70.8,66.1 60.5,55.8 61.9,54.4 73.6,66.1   "/></g><g><path fill="#000000" d="M52.2,61.6c-1.7,0-3.4-0.7-4.6-1.9L46.9,59l14.3-14.3l0.7,0.7c2.5,2.5,2.5,6.6,0,9.2l-5.1,5.1    C55.6,60.9,53.9,61.6,52.2,61.6z M49.8,58.9c0.7,0.4,1.5,0.7,2.4,0.7c1.2,0,2.3-0.5,3.2-1.3l5.1-5.1c1.5-1.5,1.7-3.8,0.6-5.6    L49.8,58.9z"/></g><g><path fill="#000000" d="M68.9,74.8c-0.8,0-1.5-0.3-2-0.8c-1.1-1.1-1.1-2.9,0-4l5.2-5.2c1.1-1.1,2.9-1.1,4,0c0.5,0.5,0.8,1.2,0.8,2    c0,0.8-0.3,1.5-0.8,2L70.9,74C70.4,74.5,69.7,74.8,68.9,74.8z M74.2,65.9c-0.2,0-0.4,0.1-0.6,0.2l-5.2,5.2c-0.3,0.3-0.3,0.8,0,1.2    c0.3,0.3,0.9,0.3,1.2,0l5.2-5.2c0.2-0.2,0.2-0.4,0.2-0.6s-0.1-0.4-0.2-0.6C74.6,66,74.4,65.9,74.2,65.9z"/></g><g><rect x="38.6" y="52.3" transform="matrix(0.7082 0.706 -0.706 0.7082 50.8397 -16.4875)" fill="#000000" width="13.4" height="2"/></g><g><polygon fill="#000000" points="30.6,39.9 9,18.4 9,7 19.7,7 41.1,29.1 39.7,30.5 18.8,9 11,9 11,17.6 32,38.5   "/></g><g><rect x="47.8" y="43.1" transform="matrix(0.6959 0.7181 -0.7181 0.6959 48.1381 -25.5246)" fill="#000000" width="12.8" height="2"/></g><g><rect x="12" y="23.1" transform="matrix(0.6974 0.7167 -0.7167 0.6974 25.1384 -11.3825)" fill="#000000" width="28.1" height="2"/></g><g><rect x="43.8" y="46.4" transform="matrix(0.6974 0.7167 -0.7167 0.6974 48.7492 -20.5985)" fill="#000000" width="10" height="2"/></g><g><rect x="66" y="61" fill="#000000" width="2" height="7"/></g><g><rect x="62" y="57" fill="#000000" width="2" height="7"/></g></g></svg>
+	}
+});
+
+module.exports = Logo;

shared/naturalcrit2/homebrewIcon.svg.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var Logo = React.createClass({
+	render : function(){
+		return <svg version="1.1" x="0px" y="0px" viewBox="0 0 90 112.5" enableBackground="new 0 0 90 90" >
+			<path d="M25.363,25.54c0,1.906,8.793,3.454,19.636,3.454c10.848,0,19.638-1.547,19.638-3.454c0-1.12-3.056-2.117-7.774-2.75  c-1.418,1.891-3.659,3.133-6.208,3.133c-2.85,0-5.315-1.547-6.67-3.833C33.617,22.185,25.363,23.692,25.363,25.54z"/><path d="M84.075,54.142c0-8.68-2.868-17.005-8.144-23.829c1.106-1.399,1.41-2.771,1.41-3.854c0-6.574-10.245-9.358-19.264-10.533  c0.209,0.706,0.359,1.439,0.359,2.215c0,0.09-0.022,0.17-0.028,0.26l0,0c-0.028,0.853-0.195,1.667-0.479,2.429  c9.106,1.282,14.508,3.754,14.508,5.63c0,2.644-10.688,6.486-27.439,6.486c-16.748,0-27.438-3.842-27.438-6.486  c0-2.542,9.904-6.183,25.559-6.459c-0.098-0.396-0.159-0.807-0.2-1.223c0.006,0,0.013,0,0.017,0  c-0.017-0.213-0.063-0.417-0.063-0.636c0-1.084,0.226-2.119,0.628-3.058c-6.788,0.129-30.846,1.299-30.846,11.376  c0,1.083,0.305,2.455,1.411,3.854c-5.276,6.823-8.145,15.149-8.145,23.829c0,11.548,5.187,20.107,14.693,25.115  c-0.902,3.146-1.391,7.056,1.111,8.181c2.626,1.178,5.364-2.139,7.111-5.005c4.73,1.261,10.13,1.923,16.161,1.923  c6.034,0,11.428-0.661,16.158-1.922c1.75,2.865,4.493,6.18,7.112,5.004c2.504-1.123,2.014-5.035,1.113-8.179  C78.889,74.249,84.075,65.689,84.075,54.142z M70.39,31.392c5.43,6.046,8.78,14,8.78,22.75c0,20.919-18.582,25.309-34.171,25.309  c-15.587,0-34.17-4.39-34.17-25.309c0-8.75,3.35-16.7,8.781-22.753c5.561,2.643,15.502,4.009,25.389,4.009  C54.886,35.397,64.829,34.031,70.39,31.392z"/><path d="M50.654,23.374c2.892,0,5.234-2.341,5.234-5.233c0-2.887-2.343-5.23-5.234-5.23c-2.887,0-5.231,2.343-5.231,5.23  C45.423,21.032,47.768,23.374,50.654,23.374z"/>
+			<circle cx="62.905" cy="10.089" r="3.595"/>
+			<circle cx="52.616" cy="5.048" r="2.73"/>
+		</svg>
+	}
+});
+
+module.exports = Logo;

shared/naturalcrit2/icon.svg.jsx

@@ -0,0 +1,9 @@
+var React = require('react');
+
+var Logo = React.createClass({
+	render : function(){
+
+	}
+});
+
+module.exports = Logo;

shared/naturalcrit2/jsonFileEditor/jsonFileEditor.jsx

@@ -0,0 +1,94 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var JSONEditor = require('jsoneditor');
+
+
+var downloadFile = function(filename, text) {
+	var element = document.createElement('a');
+	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+	element.setAttribute('download', filename);
+	element.style.display = 'none';
+	document.body.appendChild(element);
+	element.click();
+	document.body.removeChild(element);
+}
+
+
+var JsonFileEditor = React.createClass({
+	getDefaultProps: function() {
+		return {
+			name : "test",
+			json : {},
+			onJSONChange : function(){}
+		};
+	},
+
+	getInitialState: function() {
+		return {
+			showEditor: false
+		};
+	},
+	componentWillReceiveProps: function(nextProps) {
+		if(JSON.stringify(nextProps.json) != JSON.stringify(this.editor.get())){
+			this.editor.set(nextProps.json);
+		}
+	},
+	componentDidMount: function() {
+		this.editor = new JSONEditor(this.refs.editor, {
+			change : this.handleJSONChange,
+			search : false
+		}, this.props.json)
+	},
+
+	handleJSONChange : function(){
+		this.props.onJSONChange(this.editor.get());
+	},
+	handleShowEditorClick : function(){
+		this.setState({
+			showEditor : !this.state.showEditor
+		})
+	},
+	handleDownload  : function(){
+		downloadFile(this.props.name + '.json', JSON.stringify(this.props.json, null, '\t'));
+	},
+	handleUpload : function(e){
+		var self = this;
+		var reader = new FileReader();
+		reader.onload = function() {
+			self.props.onJSONChange(JSON.parse(reader.result));
+		}
+		reader.readAsText(e.target.files[0]);
+	},
+	handleUploadClick : function(){
+		this.refs.uploader.click()
+	},
+
+	renderEditor : function(){
+		return <div className='jsonEditor' ref='editor' />
+	},
+
+
+	render : function(){
+		var self = this;
+		return(
+			<div className={cx('jsonFileEditor', {'showEditor' : this.state.showEditor})}>
+				<span className='name'>{this.props.name}</span>
+
+				<div className='controls'>
+					<button className='showEditor' onClick={this.handleShowEditorClick}><i className='fa fa-edit' /></button>
+					<button className='downloadJSON' onClick={this.handleDownload}><i className='fa fa-download' /></button>
+					<button className='uploadJSON' onClick={this.handleUploadClick}><i className='fa fa-cloud-upload' /></button>
+				</div>
+
+				{this.renderEditor()}
+				<input type="file" id="input" onChange={this.handleUpload} ref='uploader' />
+			</div>
+		);
+	}
+});
+
+module.exports = JsonFileEditor;
+
+//<div className='remove' onClick={this.handleRemove}><i className='fa fa-times' /></div>

shared/naturalcrit2/jsonFileEditor/jsonFileEditor.less

@@ -0,0 +1,53 @@
+
+@import (less) "./jsoneditor.css";
+.jsonFileEditor{
+	position : relative;
+	padding : 10px;
+	&.showEditor{
+		.jsonEditor{
+			display : initial;
+		}
+		button.showEditor{
+			color: @red;
+		}
+	}
+	.jsonEditor{
+		position         : absolute;
+		display          : none;
+		top              : 100%;
+		left             : 0px;
+		z-index          : 1000;
+		min-width        : 400px;
+		background-color : white;
+	}
+	.name{
+		display     : inline-block;
+		font-size   : 0.8em;
+		font-weight : 800;
+		min-width: 100px;
+	}
+	.controls{
+		display: inline-block;
+		float: right;
+
+		button{
+			outline: none;
+			border : none;
+			cursor: pointer;
+			background-color: transparent;
+			.animate(color);
+
+			&:hover{
+				&.showEditor{ color : @green; }
+				&.downloadJSON{ color : @blue; }
+				&.uploadJSON{ color : @orange; }
+			}
+
+
+
+		}
+	}
+	input[type="file"]{
+		display : none;
+	}
+}

shared/naturalcrit2/jsonFileEditor/jsoneditor.css

@@ -0,0 +1,625 @@
+.jsoneditor .field,
+.jsoneditor .value,
+.jsoneditor .readonly {
+  border: 1px solid transparent;
+  min-height: 16px;
+  min-width: 32px;
+  padding: 2px;
+  margin: 1px;
+  word-wrap: break-word;
+  float: left;
+}
+
+/* adjust margin of p elements inside editable divs, needed for Opera, IE */
+
+.jsoneditor .field p,
+.jsoneditor .value p {
+  margin: 0;
+}
+
+.jsoneditor .value {
+  word-break: break-word;
+}
+
+.jsoneditor .readonly {
+  min-width: 16px;
+  color: gray;
+}
+
+.jsoneditor .empty {
+  border-color: lightgray;
+  border-style: dashed;
+  border-radius: 2px;
+}
+
+.jsoneditor .field.empty {
+  background-image: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png");
+  background-position: 0 -144px;
+}
+
+.jsoneditor .value.empty {
+  background-image: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png");
+  background-position: -48px -144px;
+}
+
+.jsoneditor .value.url {
+  color: green;
+  text-decoration: underline;
+}
+
+.jsoneditor a.value.url:hover,
+.jsoneditor a.value.url:focus {
+  color: red;
+}
+
+.jsoneditor .separator {
+  padding: 3px 0;
+  vertical-align: top;
+  color: gray;
+}
+
+.jsoneditor .field[contenteditable=true]:focus,
+.jsoneditor .field[contenteditable=true]:hover,
+.jsoneditor .value[contenteditable=true]:focus,
+.jsoneditor .value[contenteditable=true]:hover,
+.jsoneditor .field.highlight,
+.jsoneditor .value.highlight {
+  background-color: #FFFFAB;
+  border: 1px solid yellow;
+  border-radius: 2px;
+}
+
+.jsoneditor .field.highlight-active,
+.jsoneditor .field.highlight-active:focus,
+.jsoneditor .field.highlight-active:hover,
+.jsoneditor .value.highlight-active,
+.jsoneditor .value.highlight-active:focus,
+.jsoneditor .value.highlight-active:hover {
+  background-color: #ffee00;
+  border: 1px solid #ffc700;
+  border-radius: 2px;
+}
+
+.jsoneditor div.tree button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+  background: transparent url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png");
+}
+
+.jsoneditor div.tree button.collapsed {
+  background-position: 0 -48px;
+}
+
+.jsoneditor div.tree button.expanded {
+  background-position: 0 -72px;
+}
+
+.jsoneditor div.tree button.contextmenu {
+  background-position: -48px -72px;
+}
+
+.jsoneditor div.tree button.contextmenu:hover,
+.jsoneditor div.tree button.contextmenu:focus,
+.jsoneditor div.tree button.contextmenu.selected {
+  background-position: -48px -48px;
+}
+
+.jsoneditor div.tree *:focus {
+  outline: none;
+}
+
+.jsoneditor div.tree button:focus {
+  /* TODO: nice outline for buttons with focus
+  outline: #97B0F8 solid 2px;
+  box-shadow: 0 0 8px #97B0F8;
+  */
+  background-color: #f5f5f5;
+  outline: #e5e5e5 solid 1px;
+}
+
+.jsoneditor div.tree button.invisible {
+  visibility: hidden;
+  background: none;
+}
+
+.jsoneditor {
+  color: #1A1A1A;
+  border: 1px solid #97B0F8;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  padding: 0;
+  line-height: 100%;
+}
+
+.jsoneditor div.tree table.tree {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin: 0;
+}
+
+.jsoneditor div.outer {
+  width: 100%;
+  height: 100%;
+  margin: -35px 0 0 0;
+  padding: 35px 0 0 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.jsoneditor div.tree {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+.jsoneditor textarea.text {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border: none;
+  background-color: white;
+  resize: none;
+}
+
+.jsoneditor tr.highlight {
+  background-color: #FFFFAB;
+}
+
+.jsoneditor div.tree button.dragarea {
+  background: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png") -72px -72px;
+  cursor: move;
+}
+
+.jsoneditor div.tree button.dragarea:hover,
+.jsoneditor div.tree button.dragarea:focus {
+  background-position: -72px -48px;
+}
+
+.jsoneditor tr,
+.jsoneditor th,
+.jsoneditor td {
+  padding: 0;
+  margin: 0;
+}
+
+.jsoneditor td {
+  vertical-align: top;
+}
+
+.jsoneditor td.tree {
+  vertical-align: top;
+}
+
+.jsoneditor .field,
+.jsoneditor .value,
+.jsoneditor td,
+.jsoneditor th,
+.jsoneditor textarea {
+  font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
+  font-size: 10pt;
+  color: #1A1A1A;
+}
+/* ContextMenu - main menu */
+
+.jsoneditor-contextmenu {
+  position: absolute;
+  z-index: 99999;
+}
+
+.jsoneditor-contextmenu ul {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 124px;
+  background: white;
+  border: 1px solid #d3d3d3;
+  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.jsoneditor-contextmenu ul li button {
+  padding: 0;
+  margin: 0;
+  width: 124px;
+  height: 24px;
+  border: none;
+  cursor: pointer;
+  color: #4d4d4d;
+  background: transparent;
+  line-height: 26px;
+  text-align: left;
+}
+
+/* Fix button padding in firefox */
+
+.jsoneditor-contextmenu ul li button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+.jsoneditor-contextmenu ul li button:hover,
+.jsoneditor-contextmenu ul li button:focus {
+  color: #1a1a1a;
+  background-color: #f5f5f5;
+  outline: none;
+}
+
+.jsoneditor-contextmenu ul li button.default {
+  width: 92px;
+}
+
+.jsoneditor-contextmenu ul li button.expand {
+  float: right;
+  width: 32px;
+  height: 24px;
+  border-left: 1px solid #e5e5e5;
+}
+
+.jsoneditor-contextmenu div.icon {
+  float: left;
+  width: 24px;
+  height: 24px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background-image: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png");
+}
+
+.jsoneditor-contextmenu ul li button div.expand {
+  float: right;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 4px 0 0;
+  background: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png") 0 -72px;
+  opacity: 0.4;
+}
+
+.jsoneditor-contextmenu ul li button:hover div.expand,
+.jsoneditor-contextmenu ul li button:focus div.expand,
+.jsoneditor-contextmenu ul li.selected div.expand,
+.jsoneditor-contextmenu ul li button.expand:hover div.expand,
+.jsoneditor-contextmenu ul li button.expand:focus div.expand {
+  opacity: 1;
+}
+
+.jsoneditor-contextmenu .separator {
+  height: 0;
+  border-top: 1px solid #e5e5e5;
+  padding-top: 5px;
+  margin-top: 5px;
+}
+
+.jsoneditor-contextmenu button.remove > .icon {
+  background-position: -24px -24px;
+}
+
+.jsoneditor-contextmenu button.remove:hover > .icon,
+.jsoneditor-contextmenu button.remove:focus > .icon {
+  background-position: -24px 0;
+}
+
+.jsoneditor-contextmenu button.append > .icon {
+  background-position: 0 -24px;
+}
+
+.jsoneditor-contextmenu button.append:hover > .icon,
+.jsoneditor-contextmenu button.append:focus > .icon {
+  background-position: 0 0;
+}
+
+.jsoneditor-contextmenu button.insert > .icon {
+  background-position: 0 -24px;
+}
+
+.jsoneditor-contextmenu button.insert:hover > .icon,
+.jsoneditor-contextmenu button.insert:focus > .icon {
+  background-position: 0 0;
+}
+
+.jsoneditor-contextmenu button.duplicate > .icon {
+  background-position: -48px -24px;
+}
+
+.jsoneditor-contextmenu button.duplicate:hover > .icon,
+.jsoneditor-contextmenu button.duplicate:focus > .icon {
+  background-position: -48px 0;
+}
+
+.jsoneditor-contextmenu button.sort-asc > .icon {
+  background-position: -168px -24px;
+}
+
+.jsoneditor-contextmenu button.sort-asc:hover > .icon,
+.jsoneditor-contextmenu button.sort-asc:focus > .icon {
+  background-position: -168px 0;
+}
+
+.jsoneditor-contextmenu button.sort-desc > .icon {
+  background-position: -192px -24px;
+}
+
+.jsoneditor-contextmenu button.sort-desc:hover > .icon,
+.jsoneditor-contextmenu button.sort-desc:focus > .icon {
+  background-position: -192px 0;
+}
+
+/* ContextMenu - sub menu */
+
+.jsoneditor-contextmenu ul li .selected {
+  background-color: #D5DDF6;
+}
+
+.jsoneditor-contextmenu ul li {
+  overflow: hidden;
+}
+
+.jsoneditor-contextmenu ul li ul {
+  display: none;
+  position: relative;
+  left: -10px;
+  top: 0;
+  border: none;
+  box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
+  padding: 0 10px;
+  /* TODO: transition is not supported on IE8-9 */
+  -webkit-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+
+
+.jsoneditor-contextmenu ul li ul li button {
+  padding-left: 24px;
+}
+
+.jsoneditor-contextmenu ul li ul li button:hover,
+.jsoneditor-contextmenu ul li ul li button:focus {
+  background-color: #f5f5f5;
+}
+
+.jsoneditor-contextmenu button.type-string > .icon {
+  background-position: -144px -24px;
+}
+
+.jsoneditor-contextmenu button.type-string:hover > .icon,
+.jsoneditor-contextmenu button.type-string:focus > .icon,
+.jsoneditor-contextmenu button.type-string.selected > .icon {
+  background-position: -144px 0;
+}
+
+.jsoneditor-contextmenu button.type-auto > .icon {
+  background-position: -120px -24px;
+}
+
+.jsoneditor-contextmenu button.type-auto:hover > .icon,
+.jsoneditor-contextmenu button.type-auto:focus > .icon,
+.jsoneditor-contextmenu button.type-auto.selected > .icon {
+  background-position: -120px 0;
+}
+
+.jsoneditor-contextmenu button.type-object > .icon {
+  background-position: -72px -24px;
+}
+
+.jsoneditor-contextmenu button.type-object:hover > .icon,
+.jsoneditor-contextmenu button.type-object:focus > .icon,
+.jsoneditor-contextmenu button.type-object.selected > .icon {
+  background-position: -72px 0;
+}
+
+.jsoneditor-contextmenu button.type-array > .icon {
+  background-position: -96px -24px;
+}
+
+.jsoneditor-contextmenu button.type-array:hover > .icon,
+.jsoneditor-contextmenu button.type-array:focus > .icon,
+.jsoneditor-contextmenu button.type-array.selected > .icon {
+  background-position: -96px 0;
+}
+
+.jsoneditor-contextmenu button.type-modes > .icon {
+  background-image: none;
+  width: 6px;
+}
+.jsoneditor .menu {
+  width: 100%;
+  height: 35px;
+  padding: 2px;
+  margin: 0;
+  overflow: hidden;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #1A1A1A;
+  background-color: #D5DDF6;
+  border-bottom: 1px solid #97B0F8;
+}
+
+.jsoneditor .menu button {
+  width: 26px;
+  height: 26px;
+  margin: 2px;
+  padding: 0;
+  border-radius: 2px;
+  border: 1px solid #aec0f8;
+  background: #e3eaf6 url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png");
+  color: #4D4D4D;
+  opacity: 0.8;
+  font-family: arial, sans-serif;
+  font-size: 10pt;
+  float: left;
+}
+
+.jsoneditor .menu button:hover {
+  background-color: #f0f2f5;
+}
+
+.jsoneditor .menu button:focus,
+.jsoneditor .menu button:active {
+  background-color: #ffffff;
+}
+
+.jsoneditor .menu button:disabled {
+  background-color: #e3eaf6;
+}
+
+.jsoneditor .menu button.collapse-all {
+  background-position: 0 -96px;
+}
+
+.jsoneditor .menu button.expand-all {
+  background-position: 0 -120px;
+}
+
+.jsoneditor .menu button.undo {
+  background-position: -24px -96px;
+}
+
+.jsoneditor .menu button.undo:disabled {
+  background-position: -24px -120px;
+}
+
+.jsoneditor .menu button.redo {
+  background-position: -48px -96px;
+}
+
+.jsoneditor .menu button.redo:disabled {
+  background-position: -48px -120px;
+}
+
+.jsoneditor .menu button.compact {
+  background-position: -72px -96px;
+}
+
+.jsoneditor .menu button.format {
+  background-position: -72px -120px;
+}
+
+.jsoneditor .menu button.modes {
+  background-image: none;
+  width: auto;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.jsoneditor .menu button.separator {
+  margin-left: 10px;
+}
+
+.jsoneditor .menu a {
+  font-family: arial, sans-serif;
+  font-size: 10pt;
+  color: #97B0F8;
+  vertical-align: middle;
+}
+
+.jsoneditor .menu a:hover {
+  color: red;
+}
+
+.jsoneditor .menu a.poweredBy {
+  font-size: 8pt;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 10px;
+}
+
+/* TODO: css for button:disabled is not supported by IE8 */
+.jsoneditor .search input,
+.jsoneditor .search .results {
+  font-family: arial, sans-serif;
+  font-size: 10pt;
+  color: #1A1A1A;
+  background: transparent;
+  /* For Firefox */
+}
+
+.jsoneditor .search {
+  position: absolute;
+  right: 2px;
+  top: 2px;
+}
+
+.jsoneditor .search .frame {
+  border: 1px solid #97B0F8;
+  background-color: white;
+  padding: 0 2px;
+  margin: 0;
+}
+
+.jsoneditor .search .frame table {
+  border-collapse: collapse;
+}
+
+.jsoneditor .search input {
+  width: 120px;
+  border: none;
+  outline: none;
+  margin: 1px;
+}
+
+.jsoneditor .search .results {
+  color: #4d4d4d;
+  padding-right: 5px;
+  line-height: 24px;
+}
+
+.jsoneditor .search button {
+  width: 16px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png");
+  vertical-align: top;
+}
+
+.jsoneditor .search button:hover {
+  background-color: transparent;
+}
+
+.jsoneditor .search button.refresh {
+  width: 18px;
+  background-position: -99px -73px;
+}
+
+.jsoneditor .search button.next {
+  cursor: pointer;
+  background-position: -124px -73px;
+}
+
+.jsoneditor .search button.next:hover {
+  background-position: -124px -49px;
+}
+
+.jsoneditor .search button.previous {
+  cursor: pointer;
+  background-position: -148px -73px;
+  margin-right: 2px;
+}
+
+.jsoneditor .search button.previous:hover {
+  background-position: -148px -49px;
+}

shared/naturalcrit2/logo/logo.jsx

@@ -0,0 +1,21 @@
+var React = require('react');
+var Icon = require('naturalcrit/icon.svg.jsx');
+
+var Logo = React.createClass({
+	getDefaultProps: function() {
+		return {
+			hoverSlide : false
+		};
+	},
+
+	render : function(){
+		return <a className='logo' {... this.props} href='/'>
+			<Icon />
+			<span className='name'>
+				Natural<span className='crit'>Crit</span>
+			</span>
+		</a>
+	}
+});
+
+module.exports = Logo;

shared/naturalcrit2/logo/logo.less

@@ -0,0 +1,38 @@
+@font-face {
+	font-family : CodeLight;
+	src         : url('/assets/naturalCrit/logo/CODE Light.otf');
+}
+@font-face {
+	font-family : CodeBold;
+	src         : url('/assets/naturalCrit/logo/CODE Bold.otf');
+}
+
+
+.logo{
+	color : white;
+	text-decoration: none;
+	display: block;
+
+	svg{
+		//vertical-align : middle;
+		height         : 0.9em;
+		margin-right   : 0.2em;
+		cursor         : pointer;
+		fill           : white;
+	}
+
+	span.name{
+		//font-size: 1em;
+		//line-height: 0.3em;
+		font-family : 'CodeLight';
+		span.crit{
+			font-family : 'CodeBold';
+		}
+		small{
+			font-size: 0.3em;
+			font-family : 'Open Sans';
+			font-weight: 800;
+			text-transform: uppercase;
+		}
+	}
+}

shared/naturalcrit2/nav/nav.jsx

@@ -0,0 +1,73 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+var Nav = {
+	base : React.createClass({
+		render : function(){
+			return <nav>
+				<div className='navContent'>
+					{this.props.children}
+				</div>
+			</nav>
+		}
+	}),
+	logo : function(){
+		return <a className='navLogo' href="/">
+			{Nav.logoSVG()}
+			<span className='name'>
+				Natural<span className='crit'>Crit</span>
+			</span>
+		</a>;
+	},
+	logoSVG : function(){
+		return <svg version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enableBackground="new 0 0 100 100">
+			<path d="M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116  c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262  c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358  c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976  c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0  s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083  c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113  c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223  c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562  c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223  C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004  c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002  l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008  c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082  c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076  c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043  c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303  c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035  c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017  c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048  c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026  c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202  L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75  L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645  z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649  l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393  l-38.263,6.959L46.631,69.09z" />
+		</svg>;
+	},
+
+	section : React.createClass({
+		render : function(){
+			return <div className='navSection'>
+				{this.props.children}
+			</div>
+		}
+	}),
+
+	item : React.createClass({
+		getDefaultProps: function() {
+			return {
+				icon : null,
+				href : null,
+				newTab : false,
+				onClick : function(){},
+				color : null
+			};
+		},
+		handleClick : function(){
+			this.props.onClick();
+		},
+		render : function(){
+			var classes = cx('navItem', this.props.color, this.props.className);
+
+			var icon;
+			if(this.props.icon) icon = <i className={'fa ' + this.props.icon} />;
+
+			if(this.props.href){
+				return <a href={this.props.href} className={classes} target={this.props.newTab ? '_blank' : '_self'}>
+					{this.props.children}
+					{icon}
+				</a>
+			}else{
+				return <div className={classes} onClick={this.handleClick}>
+					{this.props.children}
+					{icon}
+				</div>
+			}
+		}
+	}),
+
+};
+
+
+module.exports = Nav;

shared/naturalcrit2/nav/nav.less

@@ -0,0 +1,89 @@
+
+@font-face {
+	font-family : CodeLight;
+	src         : url('/assets/naturalCrit/logo/CODE Light.otf');
+}
+@font-face {
+	font-family : CodeBold;
+	src         : url('/assets/naturalCrit/logo/CODE Bold.otf');
+}
+nav{
+	background-color : #333;
+	.navContent{
+		display         : flex;
+		justify-content : space-between;
+	}
+	.navSection{
+		display     : flex;
+		align-items : center;
+	}
+	.navLogo{
+		display         : block;
+		margin-top      : 0px;
+		margin-right    : 8px;
+		margin-left     : 8px;
+		color           : white;
+		text-decoration : none;
+		&:hover{
+			.name{ color : @orange; }
+			svg{ fill : @orange }
+		}
+		svg{
+			height       : 13px;
+			margin-right : 0.2em;
+			cursor       : pointer;
+			fill         : white;
+		}
+		span.name{
+			font-family : 'CodeLight';
+			font-size   : 15px;
+			span.crit{
+				font-family : 'CodeBold';
+			}
+			small{
+				font-family    : 'Open Sans';
+				font-size      : 0.3em;
+				font-weight    : 800;
+				text-transform : uppercase;
+			}
+		}
+	}
+	.navItem{
+		.animate(background-color);
+		padding          : 8px 12px;
+		cursor           : pointer;
+		background-color : #333;
+		font-size        : 10px;
+		font-weight      : 800;
+		color            : white;
+		text-decoration  : none;
+		text-transform   : uppercase;
+		i{
+			margin-left : 5px;
+			font-size   : 13px;
+		}
+		&.tealLight:hover{ background-color : @tealLight };
+		&.teal:hover{ background-color : @teal };
+		&.greenLight:hover{ background-color : @greenLight };
+		&.green:hover{ background-color : @green };
+		&.blueLight:hover{ background-color : @blueLight };
+		&.blue:hover{ background-color : @blue };
+		&.purpleLight:hover{ background-color : @purpleLight };
+		&.purple:hover{ background-color : @purple };
+		&.steelLight:hover{ background-color : @steelLight };
+		&.steel:hover{ background-color : @steel };
+		&.yellowLight:hover{ background-color : @yellowLight };
+		&.yellow:hover{ background-color : @yellow };
+		&.orangeLight:hover{ background-color : @orangeLight };
+		&.orange:hover{ background-color : @orange };
+		&.redLight:hover{ background-color : @redLight };
+		&.red:hover{ background-color : @red };
+		&.silverLight:hover{ background-color : @silverLight };
+		&.silver:hover{ background-color : @silver };
+		&.greyLight:hover{ background-color : @greyLight };
+		&.grey:hover{ background-color : @grey };
+	}
+	.navSection:last-child .navItem{
+		border-left : 1px solid #666;
+	}
+}

shared/naturalcrit2/styles/animations.less

@@ -0,0 +1,361 @@
+//Defaults
+@defaultDuration : 0.25s;
+@defaultEasing             : ease;
+
+//Animates all properties on an element
+.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){
+	-webkit-transition: all @duration @easing;
+	   -moz-transition: all @duration @easing;
+		 -o-transition: all @duration @easing;
+			transition: all @duration @easing;
+}
+//Animates Specific property
+.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){
+	-webkit-transition: @prop @duration @easing;
+	   -moz-transition: @prop @duration @easing;
+		 -o-transition: @prop @duration @easing;
+			transition: @prop @duration @easing;
+}
+
+.animateMany(...){
+	@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
+	-webkit-transition-property: @value;
+	   -moz-transition-property: @value;
+		 -o-transition-property: @value;
+			transition-property: @value;
+
+	.animateDuration();
+	.animateEasing();
+}
+
+.animateDuration(@duration : @defaultDuration){
+	-webkit-transition-duration: @duration;
+	   -moz-transition-duration: @duration;
+		 -o-transition-duration: @duration;
+			transition-duration: @duration;
+}
+
+.animateEasing(@easing : @defaultEasing){
+	-webkit-transition-timing-function: @easing;
+	   -moz-transition-timing-function: @easing;
+		 -o-transition-timing-function: @easing;
+			transition-timing-function: @easing;
+}
+
+
+.transition (@prop, @duration: @defaultDuration) {
+	-webkit-transition: @prop @duration, -webkit-transform @duration;
+	   -moz-transition: @prop @duration, -moz-transform @duration;
+		 -o-transition: @prop @duration, -o-transform @duration;
+		-ms-transition: @prop @duration, -ms-transform @duration;
+			transition: @prop @duration, transform @duration;
+}
+.transform (@transform) {
+	-webkit-transform: @transform;
+	   -moz-transform: @transform;
+		 -o-transform: @transform;
+		-ms-transform: @transform;
+			transform: @transform;
+}
+
+
+.delay(@delay){
+	animation-delay:@delay;
+	-webkit-animation-delay:@delay;
+	transition-delay:@delay;
+	-webkit-transition-delay:@delay;
+}
+.keep(){
+	-webkit-animation-fill-mode:forwards;
+	   -moz-animation-fill-mode:forwards;
+		-ms-animation-fill-mode:forwards;
+		 -o-animation-fill-mode:forwards;
+			animation-fill-mode:forwards;
+}
+
+
+.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s){
+	&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
+	&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
+	&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
+	&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
+	&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
+	&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
+	&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
+	&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
+	&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
+	&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
+	&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
+	&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
+	&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
+	&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
+	&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
+	&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
+	&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
+	&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
+	&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
+	&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
+}
+
+
+
+.createFrames(@name, @from, @to){
+	@frames: {
+		from { @from(); }
+		to { @to(); }
+	};
+	@-webkit-keyframes @name {@frames();}
+	   @-moz-keyframes @name {@frames();}
+		@-ms-keyframes @name {@frames();}
+		 @-o-keyframes @name {@frames();}
+			@keyframes @name {@frames();}
+}
+
+.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){
+	-webkit-animation-name: @name;
+	   -moz-animation-name: @name;
+		-ms-animation-name: @name;
+			animation-name: @name;
+	-webkit-animation-duration: @duration;
+	   -moz-animation-duration: @duration;
+		-ms-animation-duration: @duration;
+			animation-duration: @duration;
+	-webkit-animation-timing-function: @easing;
+	   -moz-animation-timing-function: @easing;
+		-ms-animation-timing-function: @easing;
+			animation-timing-function: @easing;
+}
+
+
+
+/***************************
+	  Standard Animations
+****************************/
+
+.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeIn; @duration; @easing);
+	.createFrames(fadeIn,
+		{ opacity : 0; },
+		{ opacity : 1; }
+	);
+}
+
+.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeInDown; @duration; @easing);
+	.createFrames(fadeInDown,
+		{ opacity : 0; .transform(translateY(20px));},
+		{ opacity : 1; .transform(translateY(0px));}
+	);
+}
+
+.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeInTop; @duration; @easing);
+	.createFrames(fadeInTop,
+		{ opacity : 0; .transform(translateY(-20px)); },
+		{ opacity : 1; .transform(translateY(0px));}
+	);
+}
+
+.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeInLeft; @duration; @easing);
+	.createFrames(fadeInLeft,
+		{ opacity: 0; .transform(translateX(-20px));},
+		{ opacity: 1; .transform(translateX(0));}
+	);
+}
+
+.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeInRight; @duration; @easing);
+	.createFrames(fadeInRight,
+		{ opacity: 0; .transform(translateX(20px));},
+		{ opacity: 1; .transform(translateX(0));}
+	);
+}
+
+.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeOut; @duration; @easing);
+	.createFrames(fadeOut,
+		{ opacity : 1; },
+		{ opacity : 0; }
+	);
+}
+
+.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeOutDown; @duration; @easing);
+	.createFrames(fadeOutDown,
+		{ opacity : 1; .transform(translateY(0)); visibility: visible;},
+		{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
+	);
+}
+
+.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeOutTop; @duration; @easing);
+	.createFrames(fadeOutTop,
+		{ opacity : 1; .transform(translateY(0)); },
+		{ opacity : 0; .transform(translateY(-20px)); }
+	);
+}
+
+.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeOutLeft; @duration; @easing);
+	.createFrames(fadeOutLeft,
+		{ opacity : 1; .transform(translateX(0));},
+		{ opacity : 0; .transform(translateX(-20px));}
+	);
+}
+
+.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(fadeOutRight; @duration; @easing);
+	.createFrames(fadeOutRight,
+		{ opacity : 1; .transform(translateX(0));},
+		{ opacity : 0; .transform(translateX(20px));}
+	);
+}
+
+
+
+
+/***************************
+		Fun Animations
+****************************/
+
+.spin(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(spin, @duration, @easing);
+	.spinKeyFrames(){
+		from { .transform(rotate(0deg)); }
+		to   { .transform(rotate(360deg)); }
+	}
+	@-webkit-keyframes spin {.spinKeyFrames();}
+	   @-moz-keyframes spin {.spinKeyFrames();}
+	    @-ms-keyframes spin {.spinKeyFrames();}
+	     @-o-keyframes spin {.spinKeyFrames();}
+	        @keyframes spin {.spinKeyFrames();}
+}
+
+.bounce(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(bounce, @duration, @easing);
+	.bounceKeyFrames(){
+		0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
+		40% { .transform(translateY(-30px));}
+		60% { .transform(translateY(-15px));}
+	}
+	@-webkit-keyframes bounce {.bounceKeyFrames();}
+	   @-moz-keyframes bounce {.bounceKeyFrames();}
+	    @-ms-keyframes bounce {.bounceKeyFrames();}
+	     @-o-keyframes bounce {.bounceKeyFrames();}
+	        @keyframes bounce {.bounceKeyFrames();}
+}
+
+.pulse(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(pulse, @duration, @easing);
+	.pulseKeyFrames(){
+		0%   { .transform(scale(1));}
+		50%  { .transform(scale(1.4));}
+		100% { .transform(scale(1));}
+	}
+	@-webkit-keyframes pulse {.pulseKeyFrames();}
+	   @-moz-keyframes pulse {.pulseKeyFrames();}
+	    @-ms-keyframes pulse {.pulseKeyFrames();}
+	     @-o-keyframes pulse {.pulseKeyFrames();}
+	        @keyframes pulse {.pulseKeyFrames();}
+}
+
+.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(rubberBand, @duration, @easing);
+	.rubberBandKeyFrames(){
+		0% {.transform(scale(1));}
+		30% {.transform(scaleX(1.25) scaleY(0.75));}
+		40% {.transform(scaleX(0.75) scaleY(1.25));}
+		60% {.transform(scaleX(1.15) scaleY(0.85));}
+		100% {.transform(scale(1));}
+	}
+	@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
+	   @-moz-keyframes rubberBand {.rubberBandKeyFrames();}
+	    @-ms-keyframes rubberBand {.rubberBandKeyFrames();}
+	     @-o-keyframes rubberBand {.rubberBandKeyFrames();}
+	        @keyframes rubberBand {.rubberBandKeyFrames();}
+}
+
+.shake(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(shake, @duration, @easing);
+	.shakeKeyFrames(){
+		0%, 100% {.transform( translateX(0));}
+		10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
+		20%, 40%, 60%, 80% {.transform( translateX(10px));}
+	}
+	@-webkit-keyframes shake {.shakeKeyFrames();}
+	   @-moz-keyframes shake {.shakeKeyFrames();}
+	    @-ms-keyframes shake {.shakeKeyFrames();}
+	     @-o-keyframes shake {.shakeKeyFrames();}
+	        @keyframes shake {.shakeKeyFrames();}
+}
+
+.swing(@duration : @defaultDuration, @easing : @defaultEasing){
+	-webkit-transform-origin: top center;
+	    -ms-transform-origin: top center;
+	        transform-origin: top center;
+	.createAnimation(swing, @duration, @easing);
+	.swingKeyFrames(){
+		20% {.transform(rotate(15deg));}
+		40% {.transform(rotate(-10deg));}
+		60% {.transform(rotate(5deg));}
+		80% {.transform(rotate(-5deg));}
+		100% {.transform(rotate(0deg));}
+	}
+	@-webkit-keyframes swing {.swingKeyFrames();}
+	   @-moz-keyframes swing {.swingKeyFrames();}
+	    @-ms-keyframes swing {.swingKeyFrames();}
+	     @-o-keyframes swing {.swingKeyFrames();}
+	        @keyframes swing {.swingKeyFrames();}
+}
+
+.twist(@duration : @defaultDuration, @easing : @defaultEasing){
+	-webkit-transform-origin: center center;
+	    -ms-transform-origin: center center;
+	        transform-origin: center center;
+	.createAnimation(swing, @duration, @easing);
+	.swingKeyFrames(){
+		20% {.transform(rotate(15deg));}
+		40% {.transform(rotate(-10deg));}
+		60% {.transform(rotate(5deg));}
+		80% {.transform(rotate(-5deg));}
+		100% {.transform(rotate(0deg));}
+	}
+	@-webkit-keyframes swing {.swingKeyFrames();}
+	   @-moz-keyframes swing {.swingKeyFrames();}
+	    @-ms-keyframes swing {.swingKeyFrames();}
+	     @-o-keyframes swing {.swingKeyFrames();}
+	        @keyframes swing {.swingKeyFrames();}
+}
+
+.wobble(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(wobble, @duration, @easing);
+	.wobbleKeyFrames(){
+		0% {.transform(translateX(0%));}
+		15% {.transform(translateX(-25%) rotate(-5deg));}
+		30% {.transform(translateX(20%) rotate(3deg));}
+		45% {.transform(translateX(-15%) rotate(-3deg));}
+		60% {.transform(translateX(10%) rotate(2deg));}
+		75% {.transform(translateX(-5%) rotate(-1deg));}
+		100% {.transform(translateX(0%));}
+	}
+	@-webkit-keyframes wobble {.wobbleKeyFrames();}
+	   @-moz-keyframes wobble {.wobbleKeyFrames();}
+	    @-ms-keyframes wobble {.wobbleKeyFrames();}
+	     @-o-keyframes wobble {.wobbleKeyFrames();}
+	        @keyframes wobble {.wobbleKeyFrames();}
+}
+
+.popIn(@duration : @defaultDuration, @easing : @defaultEasing){
+	.createAnimation(popIn, @duration, @easing);
+	.popInKeyFrames(){
+		0%   { .transform(scale(0));}
+		70%  { .transform(scale(1.4));}
+		100% { .transform(scale(1));}
+	}
+	@-webkit-keyframes popIn {.popInKeyFrames();}
+	   @-moz-keyframes popIn {.popInKeyFrames();}
+	    @-ms-keyframes popIn {.popInKeyFrames();}
+	     @-o-keyframes popIn {.popInKeyFrames();}
+	        @keyframes popIn {.popInKeyFrames();}
+}

shared/naturalcrit2/styles/colors.less

@@ -0,0 +1,23 @@
+
+@copyGrey : #333333;
+
+@tealLight   : #1ABC9C;
+@teal        : #16A085;
+@greenLight  : #2ECC71;
+@green       : #27AE60;
+@blueLight   : #3498DB;
+@blue        : #2980B9;
+@purpleLight : #9B59B6;
+@purple      : #8E44AD;
+@steelLight  : #34495E;
+@steel       : #2C3E50;
+@yellowLight : #F1C40F;
+@yellow      : #F39C12;
+@orangeLight : #E67E22;
+@orange      : #D35400;
+@redLight    : #E74C3C;
+@red         : #C0392B;
+@silverLight : #ECF0F1;
+@silver      : #BDC3C7;
+@greyLight   : #95A5A6;
+@grey        : #7F8C8D;

shared/naturalcrit2/styles/elements.less

@@ -0,0 +1,86 @@
+
+@containerWidth : 1000px;
+
+html, body{
+	position         : relative;
+	height           : 100%;
+	min-height       : 100%;
+	background-color : #eee;
+	font-family      : 'Lato', sans-serif;
+	color            : @copyGrey;
+}
+.container{
+	position      : relative;
+	max-width     : @containerWidth;
+	margin        : 0 auto;
+	padding-right : 20px;
+	padding-left  : 20px;
+}
+h1{
+	margin-top    : 10px;
+	margin-bottom : 15px;
+	font-size     : 2em;
+}
+h2{
+	margin-top    : 10px;
+	margin-bottom : 15px;
+	font-size     : 1.5em;
+	font-weight   : 900;
+}
+h3{
+	margin-top    : 5px;
+	margin-bottom : 7px;
+	font-size     : 1em;
+	font-weight   : 900;
+}
+p{
+	margin-bottom : 1em;
+	font-size     : 16px;
+	color         : @copyGrey;
+	line-height   : 1.5em;
+}
+code{
+	background-color : #F8F8F8;
+	font-family      : 'Courier', mono;
+	color            : black;
+	white-space      : pre;
+}
+a{
+	color : inherit;
+}
+strong{
+	font-weight : bold;
+}
+button{
+	.button();
+}
+.button(@backgroundColor : @green){
+	.animate(background-color);
+	display          : inline-block;
+	padding          : 0.6em 1.2em;
+	cursor           : pointer;
+	background-color : @backgroundColor;
+	font-family      : "Lato", Helvetica, Arial, sans-serif;
+	font-size        : 15px;
+	color            : white;
+	text-decoration  : none;
+	border           : none;
+	outline          : none;
+	&:hover{
+		background-color : darken(@backgroundColor, 5%);
+	}
+	&:active{
+		background-color : darken(@backgroundColor, 10%);
+	}
+	&:disabled{
+		background-color : @silver !important;
+	}
+}
+.iconButton(@backgroundColor : @green){
+	padding          : 0.6em;
+	cursor           : pointer;
+	background-color : @backgroundColor;
+	font-size        : 14px;
+	color            : white;
+	text-align       : center;
+}

shared/naturalcrit2/styles/reset.less

@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

shared/naturalcrit2/styles/tooltip.less

@@ -0,0 +1,129 @@
+@tooltipColor : #383838;
+@arrowSize : 6px;
+@arrowPosition : 18px;
+
+[data-tooltip]{
+	.tooltip(attr(data-tooltip));
+}
+[data-tooltip-top]{
+	.tooltipTop(attr(data-tooltip-top));
+}
+[data-tooltip-bottom]{
+	.tooltipBottom(attr(data-tooltip-bottom));
+}
+[data-tooltip-left]{
+	.tooltipLeft(attr(data-tooltip-left));
+}
+[data-tooltip-right]{
+	.tooltipRight(attr(data-tooltip-right));
+}
+
+
+
+.tooltip(@content){
+	.tooltipBottom(@content);
+}
+
+.tooltipTop(@content){
+	.tooltipBase(@content);
+	&:before {
+		margin-bottom: -@arrowSize * 2;
+		border-top-color: @tooltipColor;
+	}
+	&:after{ margin-left: -18px; }
+	&:before, &:after {
+		bottom: 100%;
+		left: 50%; }
+	&:hover:after, &:hover:before, &:focus:after, &:focus:before {
+		.transform(translateY(-(@arrowSize + 2)));
+	}
+}
+
+.tooltipBottom(@content){
+	.tooltipBase(@content);
+	&:before {
+		margin-top: -@arrowSize * 2;
+		border-bottom-color: @tooltipColor;
+	}
+	&:after{ margin-left: -18px; }
+	&:before, &:after {
+		top: 100%;
+		left: 50%; }
+	&:hover:after, &:hover:before, &:focus:after, &:focus:before {
+		.transform(translateY(@arrowSize + 2));
+	}
+}
+
+
+.tooltipLeft(@content){
+	.tooltipBase(@content);
+	&:before {
+		margin-right: -@arrowSize * 2;
+		margin-bottom: -@arrowSize;
+		border-left-color: @tooltipColor;
+
+	}
+	&:after{ margin-bottom: -14px;}
+	&:before, &:after {
+		right: 100%;
+		bottom: 50%; }
+	&:hover:after, &:hover:before, &:focus:after, &:focus:before {
+		.transform(translateX(-(@arrowSize + 2)));
+	}
+}
+
+.tooltipRight(@content){
+	.tooltipBase(@content);
+	&:before {
+		margin-left: -@arrowSize * 2;
+		margin-bottom: -@arrowSize;
+		border-right-color: @tooltipColor;
+	}
+	&:after{ margin-bottom: -14px;}
+	&:before, &:after {
+		left: 100%;
+		bottom: 50%; }
+	&:hover:after, &:hover:before, &:focus:after, &:focus:before {
+		.transform(translateX(@arrowSize + 2));
+	}
+}
+
+
+.tooltipShow(){
+
+}
+
+.tooltipBase(@content){
+	position: relative;
+	&:before, &:after{
+		.animateAll();
+		position: absolute;
+		opacity: 0;
+		z-index: 1000000;
+		pointer-events: none;
+	}
+
+	//Arrow
+	&:before{
+		content: '';
+		background: transparent;
+		border: @arrowSize solid transparent;
+		z-index: 1000001;
+	}
+
+	//Box
+	&:after{
+		content: @content;
+		color: white;
+		background: @tooltipColor;
+		padding: 8px 10px;
+		font-size: 12px;
+		line-height: 12px;
+		white-space: nowrap;
+		visibility: hidden;
+	}
+	&:hover:before, &:hover:after {
+		visibility: visible;
+		opacity: 1;
+	}
+}