Ember JS super basic routing, using just static templates - ember.js

Question

I have been trying to wrap my head around how Ember routing works on a very basic level and need a little kick in the right direction. I am providing the code I have written so far, hopefully you can follow along and see what is going on
I would like to see a page hierarchy like so:
index
--Red
----Light
----Medium
----Dark
--Green
----Light
----Medium
----Dark
--Blue
----Light
----Medium
----Dark
The "medium" colors are actually going to be the index for each nested route, So I think I need router.js set up like so:
Colors.Router.map(function(){
this.resource('red', { path: '/red' }, function(){
this.route('light-red');
this.route('dark-red');
});
this.resource('green', { path: '/green'}, function(){
this.route('light-green');
this.route('dark-green');
});
this.resource('blue', { path: '/blue'}, function(){
this.route('light-blue');
this.route('dark-blue');
});
});
For now, I just want to serve up static html templates (with just a little bit of #link-to handlebars for navigation)... just so I can see a working prototype.
The main template is here
<div id="emberColors">
<header id="mainHeader">
<h1>Ember Colors</h1>
<p>Pick a color</p>
<nav class="navi main">
<ul>
<li>{{#link-to "red" activeClass="active"}}Red{{/link-to}}</li>
<li>{{#link-to "blue" activeClass="active"}}Blue{{/link-to}}</li>
<li>{{#link-to "green" activeClass="active"}}Green{{/link-to}}</li>
</ul>
</nav>
</header>
{{outlet}}
<footer id="footer">
<p>Ok Buh-bye</p>
</footer>
I have a template for each of the three colors, each is set up like this:
<section id="blue">
<header>
<h1>The Blue</h1>
<p>Blue is cool.</p>
<nav class="navi sub">
<ul>
<li>{{#link-to "blue.light-blue"}}Light{{/link-to}}</li>
<li>{{#link-to "blue"}}Base{{/link-to}}</li>
<li>{{#link-to "blue.dark-blue}}Dark{{/link-to}}</li>
</ul>
</nav>
</header>
{{outlet}}
</section>
And I broke up each "shade" into multiple templates
<div class="color-lt">
<p>Light Blue</p>
</div>
Note: I also understand that I can reuse templates and load different model data into them, rather than hard coding lots of little templates... but I am just trying to focus on learning the routing at the moment.
Because these are just basic templates, I assume (based on what I have read) Ember auto-generates a lot of the MVC and I don't need to define any specific controllers, models, or routes (except for perhaps the IndexRoutes for the three main color landing pages).
I understand that the naming convention for the templates will help ember do most of the work.
However it is the naming conventions that are confusing me.
in router.js it seems simple enough to define the routes by how I want it to appear in the URL
in handlebars {{#link-to}} though, it looks like I need to reference the URL (or template?) name with a . separation (include dashes or no)?
and when defining an index route it is structured with PascalCase?
I need some help with figuring out how to properly name/declare these routes so that Ember can render them correctly.
for instance: because of the nested nature of these pages... do I need to store my templates in a nested directory file structure as well? or is that being done artificially by ember routing?
Is there a general MVC Routing methodology that I am supposed to understand before I can understand Ember Routing specifically?
Sorry, I have a lot of questions about this... It seems like it is supposed to be really simple, but I don't know why I am not getting it. Any help will be greatly appreciated.
EDIT: I will also let you know that, as I have it written out currently, Ember Inspector is not throwing any errors that I can see. So I am convinced, that so far I am on the right track, but I am just not providing anything for the router to resolve...