Better Phase Display

## Overview

Makes phases easier to view when there are many, also adds color coding to give context to certain phases. 

Resolves issue #500 

## Functional Review How-To
This section describes how to test each feature in this PR

- [ ] ...
- [ ] Functional review completed by @_________

## Code review

- [x] I did my own code review first
- [ ] This code was reviewed by @__________


## Competition.yaml
- [x] Phase color code

## Template
- [x] Phases color coded
- [x] Phases use some kind of pagination (shows last phase, shows current, shows next)
![image](https://cloud.githubusercontent.com/assets/2185159/3693508/584c8ff6-1368-11e4-865a-8513bd99c795.png)

- [x] Link to all phases
- [x] List all phases
![image](https://cloud.githubusercontent.com/assets/2185159/3693520/6a479200-1368-11e4-8f7d-b8187f192ec2.png)


## Model
- [x] Phase color code



## Extra
- [x] Make "Previous Next End" header section more compact.
![image](https://cloud.githubusercontent.com/assets/2185159/3693557/f2029ff0-1368-11e4-8a11-ef65683e1a59.png)

- Use AutoML colors
    - [x] white 
    - [x] orange
    - [x] yellow
    - [x] green
    - [x] blue
    - [x] purple
- [x] Text is black OR white depending on color chosen, so the contrast looks good
- [x] Add phase tab next to "Learn the details" and "Participate"
why not break it out in to phase-btn-{{phase.color}} that way it makes sense in the css or at a glance. Rather then a floating word purple. what does purple mean in this case.