On 27th APRIL 2017

Commited  ProteusECM : Angular Project


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174321 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/README.md

+# AdminLTE
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

ecm/Angular/ProteusECM/trunk/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

ecm/Angular/ProteusECM/trunk/package.json

+{
+  "name": "admin-lte",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^2.4.0",
+    "@angular/compiler": "^2.4.0",
+    "@angular/core": "^2.4.0",
+    "@angular/forms": "^2.4.0",
+    "@angular/http": "^2.4.0",
+    "@angular/platform-browser": "^2.4.0",
+    "@angular/platform-browser-dynamic": "^2.4.0",
+    "@angular/router": "^3.4.0",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.7.6"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.0.0-rc.2",
+    "@angular/compiler-cli": "^2.4.0",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~2.0.0",
+    "jasmine-core": "~2.5.2",
+    "jasmine-spec-reporter": "~3.2.0",
+    "karma": "~1.4.1",
+    "karma-chrome-launcher": "~2.0.0",
+    "karma-cli": "~1.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "protractor": "~5.1.0",
+    "ts-node": "~2.0.0",
+    "tslint": "~4.5.0",
+    "typescript": "~2.0.0"
+  }
+}

ecm/Angular/ProteusECM/trunk/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

ecm/Angular/ProteusECM/trunk/src/app/app.component.html

+<router-outlet> </router-outlet>
+

ecm/Angular/ProteusECM/trunk/src/app/app.component.ts

+import { Component } from '@angular/core';
+import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+
+@Component({
+  selector: 'ecm-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
+})
+export class AppComponent {
+  title = 'Proteus ECM';
+  location: Location;
+  constructor(location: Location) { 
+    this.location = location; 
+    console.log( ' this.location.path(true)[' + this.location.path(true) + ']');
+    this.checkAppState();
+  }
+  checkAppState(){
+   this.setItem('jwtToken', this.get('jwtToken'), false );
+   this.setItem('appstate', this.get('app_stat'), true );
+  }
+  get(name){
+   var retVal = 'undefined';
+   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(this.location.path(true)))
+   {
+     console.log( 'name[' + name + '] decodeURIComponent(name[1]) [' + decodeURIComponent(name[1]) + ']');
+     retVal = decodeURIComponent(name[1]);
+   }
+   console.log( 'retVal[' + retVal + ']');
+   return retVal;
+  }
+  setItem(key, data, isUndefined){
+   if (typeof(Storage) != 'undefined' && ( data !== 'undefined' || isUndefined ) ) 
+   {
+      localStorage.setItem(key, data);
+   }
+   else
+   {
+      console.log('Sorry, your browser does not support Web Storage...');
+   }
+  }
+}

ecm/Angular/ProteusECM/trunk/src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule, Routes } from '@angular/router';
+
+//import { JwtHelper } from 'angular2-jwt'; //For Future
+
+import { AppComponent } from './app.component';
+import { NgbCarouselModule } from './ecm-carousel/carousel.module';
+import { ECMHeaderComponent } from './ecm-header/ecm-header.component';
+import { ECMFooterComponent } from './ecm-footer/ecm-footer.component';
+import { ECMContentComponent } from './ecm-content/ecm-content.component';
+import { ECMSearchComponent } from './ecm-search/ecm-search.component';
+import { ECMCategoryComponent } from './ecm-category/ecm-category.component';
+import { ECMTrendComponent } from './ecm-trend/ecm-trend.component';
+import { ECMCardComponent } from './ecm-card/ecm-card.component';
+import { ECMNavMenuComponent } from './ecm-nav-menu/ecm-nav-menu.component';
+import { ECMHomeComponent } from './ecm-home/ecm-home.component';
+import { ViewComponent} from './ecm-view/view.component';
+import { ShareComponent} from './ecm-view/share.component';
+const appRoutes: Routes = [
+  { path: '', redirectTo: 'Home', pathMatch: 'full' },
+  { path: 'Home', component: ECMHomeComponent, children:[
+  { path: 'content', component: ECMContentComponent ,outlet:'content'},
+  { path: 'view/:catCode', component: ViewComponent ,outlet:'content'}]},
+  { path: 'share/:catCode', component: ShareComponent}
+];
+@NgModule({
+  declarations: [
+    AppComponent,
+    ECMHeaderComponent,
+    ECMFooterComponent,
+    ECMContentComponent,
+    ECMSearchComponent,
+    ECMCategoryComponent,
+    ECMTrendComponent,
+    ECMCardComponent,
+    ECMNavMenuComponent,
+    ECMHomeComponent,
+    ViewComponent,
+    ShareComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    RouterModule.forRoot(appRoutes),
+    NgbCarouselModule.forRoot()
+  ],
+  providers: [
+	{provide: LocationStrategy, useClass: HashLocationStrategy}
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

ecm/Angular/ProteusECM/trunk/src/app/ecm-card/card-model.ts

+/**
+ * Card Model
+ */
+export class ECMCard {
+  constructor(
+    public img: string,
+    public info_img: string,
+    public info_title: string,
+    public info_subhead: string,
+    public info_link: any) {
+  }
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-card/ecm-card.component.css

+.ecm-card {
+	border-radius: 5px;
+	box-shadow: 0 0 5px 0px #ccc;
+	padding: 0;
+	margin: 0;
+	position: relative
+}
+.ecm-card-img {
+	border-top-right-radius: 5px;
+	border-top-left-radius: 5px;
+	width: 100%;
+}
+.ecm-card-footer {
+	width: 100%;
+	height: 90px;
+	padding: 10px;
+}
+.ecm-card-info {
+	padding: 10px 5px 10px 5px;
+	width: calc(100% - 165px);
+	height: 100%;
+	float: left;
+}
+.ecm-card-info-title {
+	font-size: 14px;
+	font-weight: 600;
+	color: #444;
+	display: block;
+	line-height: 20px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.ecm-card-info-subhead {
+	font-size: 12px;
+	color: #888;
+	display: block;
+	line-height: 12px;
+	top: 7px;
+	position: relative;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: normal;
+	line-height: 15px;
+}
+.ecm-card-info-img {
+	float: left;
+	/*background-color: mediumvioletred;*/
+	border: none;
+	border-radius: 100%;
+}
+.ecm-card-action {
+	width: 90px;
+	height: 35px;
+	line-height: 15px;
+	font-size: 12px;
+	padding: 10px;
+	text-align: center;
+	border: 1px solid mediumvioletred;
+	border-radius: 2px;
+	float: right;
+	position: relative;
+	top: 15px;
+	color: #333;
+	right: 10px;
+}
+.ecm-card-action:HOVER {
+	background-color: mediumvioletred;
+	color: #fff;
+}
+.top {
+	position: absolute;
+	right: 20px;
+	top: 15px;
+}
+.share {
+	background-image: url("../../assets/images/share.png");
+	border: none;
+	width: 40px;
+	height: 40px;
+}
+.share:HOVER {
+	background-color: transparent;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-card/ecm-card.component.html

+<div *ngIf="card" class="ecm-card">
+	<img class="ecm-card-img" src="{{card.img}}" alt="Washed Out">
+	<div class="ecm-card-footer">
+		<img class="ecm-card-info-img" src="{{card.info_img}}" />
+		<div class="ecm-card-info">
+			<span class="ecm-card-info-title">{{card.info_title}}</span>
+			 <span class="ecm-card-info-subhead">{{card.info_subhead}}</span>
+		</div>
+		<!-- Currently Default Actions will be View and Share
+		<a class="ecm-card-action" routerLink="/view" routerLinkActive="active">View</a> 
+		<a class="ecm-card-action top share" routerLink="/share" routerLinkActive="active"></a>
+		-->
+		<a *ngIf="card.info_link" class="ecm-card-action"[routerLink]="['link', card.info_title]">Open</a> 
+		<a *ngIf="!card.info_link" class="ecm-card-action">Open</a> 
+		<a *ngIf="!card.info_link" class="ecm-card-action top share"></a>
+	</div>
+</div>
+<div *ngIf="category" class="ecm-card">
+	<img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image">
+	<div class="ecm-card-footer">
+		<img class="ecm-card-info-img"src="{{category.resourceUrl}}{{category.catCode}}_icon.png"alt="Category icon" />
+		<div class="ecm-card-info">
+			<span class="ecm-card-info-title">{{category.shDescr}}</span> 
+			<span class="ecm-card-info-subhead">{{category.descr}}</span>
+		</div>
+		<!-- Currently Default Actions will be View and Share
+		<a class="ecm-card-action" routerLink="/view" routerLinkActive="active">View</a> 
+		<a class="ecm-card-action top share" routerLink="/share" routerLinkActive="active"></a>
+		-->
+		<a *ngIf="category.catLink" class="ecm-card-action"[routerLink]="['link', category.shDescr]">Open</a> 
+		<a *ngIf="!category.catLink" class="ecm-card-action"[routerLink]="['/Home', {outlets:{content:['view',category.catCode]}}]">View</a>
+		<a *ngIf="!category.catLink" class="ecm-card-action top share"[routerLink]="['share', category.catCode]"></a>
+	</div>
+</div>
+<div *ngIf="subcategory" class="ecm-card">
+	<img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">
+	<div class="ecm-card-footer">
+		<img class="ecm-card-info-img"src="{{subcategory.resourceUrl}}{{subcategory.catCode}}_icon.png"alt="Category icon" />
+		<div class="ecm-card-info">
+			<span class="ecm-card-info-title">{{subcategory.shDescr}}</span> 
+			<span class="ecm-card-info-subhead">{{subcategory.descr}}</span>
+		</div>
+		<!-- Currently Default Actions will be View and Share
+		<a class="ecm-card-action" routerLink="/view" routerLinkActive="active">View</a> 
+		<a class="ecm-card-action top share" routerLink="/share" routerLinkActive="active"></a>
+		-->
+		<a *ngIf="subcategory.catLink" class="ecm-card-action"[routerLink]="['link', subcategory.shDescr]">Open</a>
+        <a *ngIf="!subcategory.catLink" class="ecm-card-action top share"[routerLink]="['share', subcategory.scatCode]"></a>
+	</div>
+</div>

ecm/Angular/ProteusECM/trunk/src/app/ecm-card/ecm-card.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { ECMCard } from './card-model';
+import { Category, SubCategory } from '../ecm-category/category-model';
+
+@Component({
+  selector: 'ecm-card',
+  templateUrl: './ecm-card.component.html',
+  styleUrls: ['./ecm-card.component.css']
+})
+export class ECMCardComponent implements OnInit {
+  @Input() card: ECMCard;
+  @Input() category: Category;
+  @Input() subcategory: SubCategory;
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/carousel-config.ts

+import {Injectable} from '@angular/core';
+
+/**
+ * Configuration service for the NgbCarousel component.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the carousels used in the application.
+ */
+@Injectable()
+export class NgbCarouselConfig {
+  interval = 0;
+  wrap = true;
+  keyboard = true;
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/carousel.css

+img {
+	vertical-align: middle;
+	border-style: none;
+}
+.carousel {
+	height: 450px;
+	margin-bottom: 60px;
+	position: relative
+}
+.carousel-inner {
+	position: relative;
+	overflow: hidden;
+	max-width: 90%;
+	margin-left: auto;
+	margin-right: auto;
+	/* padding-bottom: 75px;*/
+}
+.carousel-item {
+	position: relative;
+	display: none;
+	width: 100%
+}
+@media ( -webkit-transform-3d ) {
+	.carousel-item {
+		-webkit-transition: -webkit-transform .6s ease-in-out;
+		transition: -webkit-transform .6s ease-in-out;
+		transition: transform .6s ease-in-out;
+		transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+		-webkit-perspective: 1000px;
+		perspective: 1000px;
+		height: 450px;
+	}
+}
+@supports ((-webkit-transform:translate3d (0, 0,0)) or (transform:translate3d
+	 (0, 0,0))){.carousel-item {
+	-webkit-transition: -webkit-transform .6s ease-in-out;
+	transition: -webkit-transform .6s ease-in-out;
+	transition: transform .6s ease-in-out;
+	transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	-webkit-perspective: 1000px;
+	perspective: 1000px;
+	height: 450px;
+}
+}
+.carousel-item-next, .carousel-item-prev, .carousel-item.active {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex
+}
+.carousel-item-next, .carousel-item-prev {
+	position: absolute;
+	top: 0
+}
+@media ( -webkit-transform-3d ) {
+	.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right
+		{
+		-webkit-transform: translateZ(0);
+		transform: translateZ(0)
+	}
+	.active.carousel-item-right, .carousel-item-next {
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+	.active.carousel-item-left, .carousel-item-prev {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+}
+@supports ((-webkit-transform:translate3d (0, 0,0)) or (transform:translate3d
+	 (0, 0,0))){.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right
+	{
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0)
+}
+.active.carousel-item-right, .carousel-item-next {
+	-webkit-transform: translate3d(100%, 0, 0);
+	transform: translate3d(100%, 0, 0)
+}
+.active.carousel-item-left, .carousel-item-prev {
+	-webkit-transform: translate3d(-100%, 0, 0);
+	transform: translate3d(-100%, 0, 0)
+}
+}
+.carousel-control-next, .carousel-control-prev {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	width: 5%;
+	color: #fff;
+	text-align: center;
+	opacity: .5
+}
+.carousel-control-next:focus, .carousel-control-next:hover,
+	.carousel-control-prev:focus, .carousel-control-prev:hover {
+	color: #fff;
+	text-decoration: none;
+	outline: 0;
+	opacity: .9;
+}
+.carousel-control-prev {
+	left: 0
+}
+.carousel-control-next {
+	right: 0
+}
+.carousel-control-next-icon, .carousel-control-prev-icon {
+	display: inline-block;
+	width: 38px;
+	height: 38px;
+	background: transparent no-repeat 50%;
+	background-size: 100% 100%
+}
+.carousel-control-prev-icon {
+	background-image:
+		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+	background-image: url(../../assets/images/v_left_arrow_38_38.png);
+}
+.carousel-control-next-icon {
+	background-image:
+		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+	background-image: url(../../assets/images/v_right_arrow_38_38.png);
+}
+/*circle style*/
+.carousel-indicators {
+	position: absolute;
+	bottom: 10px;
+	left: 50%;
+	z-index: 2;
+	width: 60%;
+	padding-left: 0;
+	margin-left: -30%;
+	text-align: center;
+	list-style: none
+}
+.carousel-indicators li {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	margin: 1px;
+	text-indent: -999px;
+	cursor: pointer;
+	background-color: #000\9;
+	background-color: rgba(0, 0, 0, 0);
+	border: 1px solid mediumvioletred;
+	border-radius: 10px
+}
+.carousel-indicators .active {
+	width: 12px;
+	height: 12px;
+	margin: 0;
+	background-color: mediumvioletred;
+}
+/*hyphen style*/
+/*
+.carousel-indicators {
+	position: absolute;
+	right: 0;
+	bottom: 10px;
+	left: 0;
+	z-index: 15;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	padding-left: 0;
+	margin-right: 15%;
+	margin-left: 15%;
+	list-style: none
+}
+
+.carousel-indicators li {
+	position: relative;
+	-webkit-box-flex: 1;
+	-ms-flex: 1 0 auto;
+	flex: 1 0 auto;
+	max-width: 30px;
+	height: 3px;
+	margin-right: 3px;
+	margin-left: 3px;
+	text-indent: -999px;
+	cursor: pointer;
+	background-color: violet;
+}
+.carousel-indicators li:before {
+	top: -10px
+}
+.carousel-indicators li:after, 
+.carousel-indicators li:before {
+	position: absolute;
+	left: 0;
+	display: inline-block;
+	width: 100%;
+	height: 10px;
+	content: ""
+}
+.carousel-indicators li:after {
+	bottom: -10px
+}
+.carousel-indicators .active {
+	background-color: mediumvioletred;
+}
+*/
+.carousel-caption {
+	position: absolute;
+	right: 15%;
+	bottom: 20px;
+	left: 15%;
+	z-index: 10;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	color: #fff;
+	text-align: center
+}
+.text-justify {
+	text-align: justify !important
+}
+.text-nowrap {
+	white-space: nowrap !important
+}
+.text-truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap
+}
+.text-left {
+	text-align: left !important
+}
+.text-right {
+	text-align: right !important
+}
+.text-center {
+	text-align: center !important
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+@media screen and (min-width:768px) {
+	/*	.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right,
+		.carousel-control .icon-next, .carousel-control .icon-prev {
+		width: 30px;
+		height: 30px;
+		margin-top: -10px;
+		font-size: 30px
+	}
+	.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev
+		{
+		margin-left: -10px
+	}
+	.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next
+		{
+		margin-right: -10px
+	}
+	.carousel-caption {
+		right: 20%;
+		left: 20%;
+		padding-bottom: 30px
+	}
+*/
+	.carousel-indicators {
+		bottom: 20px
+	}
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/carousel.html

+<ol class="carousel-indicators">
+	<li *ngFor="let slide of slides" [id]="slide.id"[class.active]="slide.id === activeId"(click)="cycleToSelected(slide.id)"></li>
+</ol>
+<div class="carousel-inner">
+	<div *ngFor="let slide of slides" class="carousel-item"[class.active]="slide.id === activeId">
+		<template [ngTemplateOutlet]="slide.tplRef"></template>
+	</div>
+</div>
+<a class="left carousel-control-prev" role="button"(click)="cycleToPrev()"> 
+<span class="carousel-control-prev-icon"aria-hidden="true"></span> 
+<span class="sr-only">Previous</span>
+</a>
+<a class="right carousel-control-next" role="button"(click)="cycleToNext()">
+<span class="carousel-control-next-icon"aria-hidden="true"></span>
+<span class="sr-only">Next</span>
+</a>

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/carousel.module.ts

+import {NgModule, ModuleWithProviders} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NGB_CAROUSEL_DIRECTIVES} from './carousel';
+import {NgbCarouselConfig} from './carousel-config';
+export {NgbCarousel, NgbSlide} from './carousel';
+export {NgbCarouselConfig} from './carousel-config';
+
+@NgModule({declarations: NGB_CAROUSEL_DIRECTIVES, exports: NGB_CAROUSEL_DIRECTIVES, imports: [CommonModule]})
+export class NgbCarouselModule {
+  static forRoot(): ModuleWithProviders { return {ngModule: NgbCarouselModule, providers: [NgbCarouselConfig]}; }
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-carousel/carousel.ts

+import {
+  Component,
+  Directive,
+  TemplateRef,
+  ContentChildren,
+  QueryList,
+  Input,
+  OnDestroy,
+  AfterContentChecked,
+  OnInit
+} from '@angular/core';
+import {NgbCarouselConfig} from './carousel-config';
+let nextId = 0;
+
+/**
+ * Represents an individual slide to be used within a carousel.
+ */
+@Directive({selector: 'template[ngbSlide]'})
+export class NgbSlide {
+  /**
+   * Unique slide identifier. Must be unique for the entire document for proper accessibility support.
+   * Will be auto-generated if not provided.
+   */
+  @Input() id = `ngb-slide-${nextId++}`;
+  constructor(public tplRef: TemplateRef<any>) {}
+}
+/**
+ * Directive to easily create carousels based on Bootstrap's markup.
+ */
+@Component({
+  selector: 'ngb-carousel',
+  exportAs: 'ngbCarousel',
+  templateUrl: './carousel.html',
+  styleUrls: ['./carousel.css'],
+  host: {
+    'class': 'carousel slide',
+    '[style.display]': '"block"',
+    'tabIndex': '0',
+    '(mouseenter)': 'pause()',
+    '(mouseleave)': 'cycle()',
+    '(keydown.arrowLeft)': 'keyPrev()',
+    '(keydown.arrowRight)': 'keyNext()'
+  }
+})
+export class NgbCarousel implements AfterContentChecked,OnDestroy, OnInit {
+  @ContentChildren(NgbSlide) slides: QueryList<NgbSlide>;
+  private _slideChangeInterval;
+  /**
+   * Amount of time in milliseconds before next slide is shown.
+   */
+  @Input() interval: number;
+  /**
+   * Whether can wrap from the last to the first slide.
+   */
+  @Input() wrap: boolean;
+  /**
+   * A flag for allowing navigation via keyboard
+   */
+  @Input() keyboard: boolean;
+  /**
+   * The active slide id.
+   */
+  @Input() activeId: string;
+  constructor(config: NgbCarouselConfig) {
+    this.interval = config.interval;
+    this.wrap = config.wrap;
+    this.keyboard = config.keyboard;
+  }
+  ngAfterContentChecked() {
+    let activeSlide = this._getSlideById(this.activeId);
+    this.activeId = activeSlide ? activeSlide.id : (this.slides.length ? this.slides.first.id : null);
+  }
+  ngOnInit() { this._startTimer(); }
+  ngOnDestroy() { clearInterval(this._slideChangeInterval); }
+  /**
+   * Navigate to a slide with the specified identifier.
+   */
+  select(slideId: string) {
+    this.cycleToSelected(slideId);
+    this._restartTimer();
+  }
+  /**
+   * Navigate to the next slide.
+   */
+  prev() {
+    this.cycleToPrev();
+    this._restartTimer();
+  }
+  /**
+   * Navigate to the next slide.
+   */
+  next() {
+    this.cycleToNext();
+    this._restartTimer();
+  }
+  /**
+   * Stops the carousel from cycling through items.
+   */
+  pause() { this._stopTimer(); }
+  /**
+   * Restarts cycling through the carousel slides from left to right.
+   */
+  cycle() { this._startTimer(); }
+
+  cycleToNext() { this.cycleToSelected(this._getNextSlide(this.activeId)); }
+
+  cycleToPrev() { this.cycleToSelected(this._getPrevSlide(this.activeId)); }
+
+  cycleToSelected(slideIdx: string) {
+    let selectedSlide = this._getSlideById(slideIdx);
+    if (selectedSlide) {
+      this.activeId = selectedSlide.id;
+    }
+  }
+  keyPrev() {
+    if (this.keyboard) {
+      this.prev();
+    }
+  }
+  keyNext() {
+    if (this.keyboard) {
+      this.next();
+    }
+  }
+  private _restartTimer() {
+    this._stopTimer();
+    this._startTimer();
+  }
+  private _startTimer() {
+    if (this.interval > 0) {
+      this._slideChangeInterval = setInterval(() => { this.cycleToNext(); }, this.interval);
+    }
+  }
+  private _stopTimer() { clearInterval(this._slideChangeInterval); }
+
+  private _getSlideById(slideId: string): NgbSlide {
+    let slideWithId: NgbSlide[] = this.slides.filter(slide => slide.id === slideId);
+    return slideWithId.length ? slideWithId[0] : null;
+  }
+  private _getSlideIdxById(slideId: string): number {
+    return this.slides.toArray().indexOf(this._getSlideById(slideId));
+  }
+  private _getNextSlide(currentSlideId: string): string {
+    const slideArr = this.slides.toArray();
+    const currentSlideIdx = this._getSlideIdxById(currentSlideId);
+    const isLastSlide = currentSlideIdx === slideArr.length - 1;
+
+    return isLastSlide ? (this.wrap ? slideArr[0].id : slideArr[slideArr.length - 1].id) :
+                         slideArr[currentSlideIdx + 1].id;
+  }
+  private _getPrevSlide(currentSlideId: string): string {
+    const slideArr = this.slides.toArray();
+    const currentSlideIdx = this._getSlideIdxById(currentSlideId);
+    const isFirstSlide = currentSlideIdx === 0;
+
+    return isFirstSlide ? (this.wrap ? slideArr[slideArr.length - 1].id : slideArr[0].id) :
+                          slideArr[currentSlideIdx - 1].id;
+  }
+}
+export const NGB_CAROUSEL_DIRECTIVES = [NgbCarousel, NgbSlide];

ecm/Angular/ProteusECM/trunk/src/app/ecm-category/category-model.ts

+/**
+ * Category Model
+ * {catCode, curRank, descr, shDescr, resourceUrl}
+ */
+export class Category {
+    constructor(
+      public catCode: string = '',
+      public descr: string = '',
+      public shDescr: string = '',
+      public curRank: string = '',
+      public catLink: string = '',
+      public resourceUrl: string = '') {
+        console.log('comp this.resourceUrl[' + this.resourceUrl + ']');
+    }
+}
+export class SubCategory {
+    constructor(
+      public scatCode: string = '',
+      public catCode: string = '',
+      public descr: string = '',
+      public shDescr: string = '',
+      public curRank: string = '',
+      public catLink: string = '',
+      public resourceUrl: string = '') {
+        console.log('comp this.resourceUrl[' + this.resourceUrl + ']');
+    }
+}
+export const MockTrendings: Category[] = [
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','','')
+];
+
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-category/ecm-category.component.css

+.categories-section {
+	padding: 0;
+	margin: 0;
+	padding-top: 100px;
+	background-color: #FFF;
+}
+.ecm-section-info {
+	padding: 10px;
+}
+.ecm-section-info-title {
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+.row.row-category {
+	max-width: 72rem;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-category/ecm-category.component.html

+<div *ngIf="categories">
+	<section class="categories-section">
+		<div class="row row-category">
+			<div class="ecm-section-info">
+				<span class="ecm-section-info-title">Categories</span> <span class="ecm-section-info-subhead">Explore top AuthenticRegional Foods, Outings, Celebrations around {{selectedPlace}}</span>
+			</div>
+			<div class="small-12 medium-6 large-4 column end "*ngFor="let _category of categories">
+				<ecm-card [category]="_category"></ecm-card>
+			</div>
+			<div></div>
+		</div>
+	</section>
+</div>
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-category/ecm-category.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ECMCategoryService } from './ecm-category.service';
+import { ECMCard } from '../ecm-card/card-model';
+import { Category, SubCategory } from '../ecm-category/category-model';
+@Component({
+  selector: 'ecm-category',
+  templateUrl: './ecm-category.component.html',
+  styleUrls: ['./ecm-category.component.css'],
+  providers: [ECMCategoryService]
+})
+export class ECMCategoryComponent implements OnInit {
+  errorMessage: string;
+  selectedPlace = 'Mumbai';
+  categories: Category[];
+//  cat_cards: ECMCard[];
+  constructor(public categoryService: ECMCategoryService) { }
+  ngOnInit() {
+    this.getCategories();
+  }
+/*
+  getCategories(): void {
+    this.categoryService.getCategories().then( categories => {
+        this.categories = categories;
+        this.cat_cards = [];
+        for ( let i = 0; i < this.categories.length ; ++i ) {
+            let img = 'assets/images/' + this.categories[i].type + '.png';
+            let info_img = 'assets/images/' + this.categories[i].type + '_icon.png';
+            let info_title = this.categories[i].title;
+            let info_subhead = this.categories[i].descr;
+            this.cat_cards.push( new ECMCard( img, info_img, info_title, info_subhead, false ) );
+        }
+      }
+    );
+  }
+*/
+  getCategories() {
+    this.categoryService.getCategories().subscribe(
+      categories => {
+        this.categories = categories;
+        console.log('comp categories[' +  JSON.stringify( categories ) + '] \n this.categories[' +  JSON.stringify( this.categories ) + ']');
+/*
+        this.cat_cards = [];
+        for ( let i = 0; i < this.categories.length ; ++i ) {
+            let img = 'assets/images/category/' + this.categories[i].catCode + '.png';
+            let info_img = 'assets/images/category/' + this.categories[i].catCode + '_icon.png';
+            let info_title = this.categories[i].catDescr;
+            let info_subhead = this.categories[i].catShortDescr;
+            this.cat_cards.push( new ECMCard( img, info_img, info_title, info_subhead, false ) );
+        }
+*/
+      },
+      error =>  {
+        this.errorMessage = <any>error;
+        console.log('comp errorMessage[' + this.errorMessage + ']');
+      });
+  }
+  
+
+
+/*
+  addCategory (name: string) {
+    if (!name) { return; }
+    this.categoryService.addCategory(name)
+                     .subscribe(
+                       hero  => this.categories.push(category),
+                       error =>  this.errorMessage = <any>error);
+  }
+*/
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-category/ecm-category.service.ts

+import { Injectable } from '@angular/core';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+
+import { Category, SubCategory } from '../ecm-category/category-model';
+
+@Injectable()
+export class ECMCategoryService {
+
+  private categoriesUrl = '/ecm/service/category';  // URL to web service
+  private subCategoriesUrl = '/ecm/service/category';  // URL to web service
+
+  constructor (private http: Http) {}
+
+/*
+  getCategories(): Promise<Category[]> {
+    return Promise.resolve(MockCategories);
+  }
+
+  getCategoriesSlowly(): Promise<Category[]> {
+    return new Promise(resolve => {
+       // Simulate server latency with 2 second delay
+       setTimeout(() => resolve(this.getCategories()), 2000);
+    });
+  }
+  constructor() { }
+*/
+
+  getCategories (): Observable<Category[]> {
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.get(this.categoriesUrl, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+
+  getSubCategories (scatCode : string): Observable<SubCategory[]> {
+  
+    this.subCategoriesUrl = this.subCategoriesUrl + '/' + scatCode + '/list';
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.get(this.subCategoriesUrl, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+
+  private extractData(res: Response) {
+    let body = res.json();
+    console.log('comp categories[' + JSON.stringify(body) + ']');
+    return body || { };
+  }
+
+  private handleError (error: Response | any) {
+    // In a real world app, we might use a remote logging infrastructure
+    let errMsg: string;
+    if (error instanceof Response) {
+      const body = error.json() || '';
+      const err = body.error || JSON.stringify(body);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    console.error('Service handleError:' + errMsg);
+    return Observable.throw(errMsg);
+  }
+
+  /*
+  addCategory (name: string): Observable<Hero> {
+    let headers = new Headers({ 'Content-Type': 'application/json' });
+    let options = new RequestOptions({ headers: headers });
+
+    return this.http.post(this.categoriesUrl, { name }, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
+  }
+  */
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-category/subcategory-model.ts

+/**
+ * Category Model
+ * {catCode, curRank, descr, shDescr, resourceUrl}
+ */
+export class Category {
+    constructor(
+      public catCode: string = '',
+      public descr: string = '',
+      public shDescr: string = '',
+      public curRank: string = '',
+      public catLink: string = '',
+      public resourceUrl: string = '') {
+        console.log('comp this.resourceUrl[' + this.resourceUrl + ']');
+    }
+}
+export const MockTrendings: Category[] = [
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','',''),
+        new Category('festival', 'Holi Celebration 2017', 'Celebrate with your loved ones','',''),
+        new Category('food', 'Kabab Special', 'Authentic Home Made recipe','',''),
+        new Category('tour', 'Into the blue', 'Scuba diving in deep blue ocean','','')
+];
+
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-content/ecm-content.component.css

+.ecm-content {
+	width: 100%;
+	height: auto;
+	padding-bottom: 100px;
+	background-color: #FFF;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-content/ecm-content.component.html

+<div class="ecm-content">
+	<ecm-trend> </ecm-trend>
+	<ecm-category> </ecm-category>
+</div>

ecm/Angular/ProteusECM/trunk/src/app/ecm-content/ecm-content.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'ecm-content' ,
+  templateUrl: './ecm-content.component.html',
+  styleUrls: ['./ecm-content.component.css']
+})
+export class ECMContentComponent implements OnInit {
+  constructor() { }
+  ngOnInit() {
+    console.log(' ECMContentComponent onInit scroll to window at ###:' + document.body.scrollHeight );
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-footer/ecm-footer.component.css

+/*Images Source*/
+.img-logo {
+	content: url(../../assets/images/w_logo_38_38.png);
+}
+.img-twitter {
+	content: url(../../assets/images/w_twitter_38_38.png);
+}
+.img-gplus {
+	content: url(../../assets/images/w_google_plus_38_38.png);
+}
+.img-facebook {
+	content: url(../../assets/images/w_facebook_38_38.png);
+}
+.footer-section {
+	background-color: #2a2a2a;
+	width: 100%;
+	height: 200px;
+}
+.footer-section-60 {
+	height: 60px;
+}
+.footer-subscribe {
+	width: 100%;
+	height: 140px;
+	padding: 40px 0 40px 0;
+}
+.subscribe-form {
+	height: 60px;
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+}
+.subscribe-email {
+	border: none;
+	border-radius: 5px;
+	width: 100%;
+	height: 60px;
+	position: relative;
+	outline: none;
+	font-size: 14pt;
+	padding: 10px 0 10px 40px;
+	background-color: #252525;
+	max-width: 552px;
+	float: right;
+	box-shadow: none;
+	color: #fff;
+}
+.subscribe-submit {
+	margin: 0;
+	padding: 0;
+	top: 7px;
+	height: 45px;
+	width: 128px;
+	color: #ffffff;
+	background: mediumvioletred;
+	position: relative;
+	font-size: 14pt;
+	line-height: 1px;
+	text-align: center;
+	border: none;
+	border-radius: 2px;
+}
+.footer-social {
+	border-bottom: 3pt solid #b600aa;
+	background-color: #222222;
+	width: 100%;
+	height: 60px;
+}
+.footer-social-left {
+	display: inline-block;
+	width: 38px;
+}
+.footer-social-right {
+	float: right;
+}
+.row.row-footer {
+	max-width: 100rem;
+	top: 11px;
+	position: relative;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-footer/ecm-footer.component.html

+<section class="footer-section footer-section-60">
+	<div class="footer-subscribe hide">
+		<form action="#" method="post" class="subscribe-form"id="subscribe-form">
+			<div class="row">
+				<div class="small-8 column">
+					<input type="text" class="subscribe-email" name="subscribe-email"placeholder="Enter Your Email ID" #subscribeEmail />
+				</div>
+				<div class="small-4 column">
+					<input type="submit" class="subscribe-submit"name="subscribe-submit" id="subscribe-submit" value="Subscribe" />
+				</div>
+			</div>
+		</form>
+	</div>
+	<div class="footer-social">
+		<div class="row row-footer">
+			<div class="small-12 columns">
+				<span class="footer-social-left"> <img class="img-logo"></span>
+				 <span class="footer-social-right"> <img class="img-facebook">
+					<img class="img-gplus"> <img class="img-twitter">
+				</span>
+			</div>
+		</div>
+	</div>
+</section>

ecm/Angular/ProteusECM/trunk/src/app/ecm-footer/ecm-footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ecm-footer',
+  templateUrl: './ecm-footer.component.html',
+  styleUrls: ['./ecm-footer.component.css']
+})
+export class ECMFooterComponent implements OnInit {
+  constructor() { }
+  ngOnInit() {
+    console.log(' ECMFooterComponent onInit scroll to window at ###:' + document.body.scrollHeight );
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css

+.input-container {
+  height: 600px;
+  padding: 50px 0 50px 0;
+}
+.input-container-bg {
+    background-image: url(../../assets/images/banner.png);
+    background-size: 100% 100%;
+    -webkit-filter: contrast(100%) brightness(50%);
+    filter: contrast(100%) brightness(50%);
+    position: absolute;
+    height: 600px;
+    width: 100%;
+    z-index : -1;
+}
+/*Images Source*/
+.user-image-128{
+    width: 128px;
+    height: 128px;
+}
+.img-user-32 {
+	content: url(../../assets/images/w_user_32_32.png);
+}
+.img-user {
+	content: url(../../assets/images/w_user_128_128.png);
+}
+.user-adj {
+    position: absolute;
+    left: calc( 100% - 200px );
+    padding: 0;
+    margin: 0;
+    -webkit-filter: contrast(100%) brightness(85%);
+    filter: contrast(100%) brightness(85%);
+    border-radius: 100%;
+}
+.img-logo-32 {
+	content: url(../../assets/images/logo_32_32.png);
+}
+.img-logo {
+	content: url(../../assets/images/logo.png);
+}
+.logo-adj {
+	position: relative;
+	/*left: calc( ( 100% / 2 ) - 100px );*/
+	left: calc( ( 100% / 2 ) - 150px );
+	padding: 0;
+	padding-bottom: 75px;
+	padding-top: 75px;
+	margin: 0;
+}
+/*Fixed Header*/
+
+.invisible{
+	display: none;
+}
+.fixed-header-section {
+    background-color: mediumvioletred;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    z-index: 3;
+    display: none;
+}
+.fixed-header-logo{
+    float: left;
+}
+.fixed-header-user{
+    float: right;
+    border-radius: 100%;
+}
+.fixed-header-logo,
+.fixed-header-user {
+    position: relative;
+    top: 4px;
+    height: 32px;
+    width: 32px;
+    padding: 0;
+}
+/*Fixed Header Menu*/
+
+.fixed-header-nav{
+	top: 0;
+	left: 0;
+    position: fixed;
+    z-index: 4;
+    height: 100%;
+}
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html

+<ecm-nav-menu class="fixed-header-nav"> </ecm-nav-menu>
+<section class="header-section visible">
+	<div class="input-container-bg" [@fadeState]="headerFadeState"></div>
+	<div class="input-container">
+		<img *ngIf="userData" class="user-adj user-image-128"title="{{userData.name}}"src="/ibase/resource/images/users/{{userData.jti}}.png"onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_128_128.png'; "[@userState]="headerFadeState" /> 
+		<img *ngIf="!userData"class="img-user user-adj" [@userState]="headerFadeState" />
+		<div class="row">
+			<div class="small-12 medium-10 large-10 medium-centered column">
+				<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" />
+				<ecm-search [compFadeState]="headerFadeState"[headerState]="'relative'"></ecm-search>
+			</div>
+		</div>
+	</div>
+</section>
+<section class="fixed-header-section"
+	[@fixedHeaderShow]="headerFadeState">
+	<div class="large-11 medium-centered">
+		<img class="fixed-header-logo img-logo-32" /> <img *ngIf="userData"class="fixed-header-user" title="{{userData.name}}"src="/ibase/resource/images/users/{{userData.jti}}.png"onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_32_32.png'; " />
+		<img *ngIf="!userData" class="fixed-header-user img-user-32" />
+		<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
+	</div>
+</section>

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.ts

+import { Component, Input, Output, Inject, OnInit, OnDestroy, AfterViewChecked, HostListener, trigger, state, animate, transition, style } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ecm-header',
+  templateUrl: './ecm-header.component.html',
+  styleUrls: ['./ecm-header.component.css'],
+  animations: [
+    trigger('l2dLogoTrans', [
+       state('false' , style({ opacity: 1, transform : 'scale(1.0) translateY(0) ' })),
+       state('true', style({ transform : ' translateY(0) ' })),
+       state('fade150', style({ transform : ' translateX(-10px) translateY(0) scale(0.95)' })),
+       state('fade200', style({ transform : ' translateX(-50px) translateY(0) scale(0.85)' })),
+       state('fade250', style({ transform : ' translateX(-100px) translateY(0) scale(0.75)' })),
+       state('fade300', style({ transform : ' translateX(-150px) translateY(0) scale(0.65)' })),
+       state('fade350', style({ transform : ' translateX(-250px) translateY(0) scale(0.55)' })),
+       state('fade400', style({ transform : ' translateX(-400px) translateY(50px) scale(0.45)' })),
+       state('fade450', style({ transform : ' translateX(-450px) translateY(50px) scale(0.40)' })),
+       state('fade500', style({ transform : ' translateX(-500px) translateY(50px) scale(0.35)' })),
+       state('fade550', style({ transform : ' translateX(-550px) translateY(50px) scale(0.30)' })),
+       state('fade600', style({ transform : ' translateX(-600px) translateY(150px) scale(0.25)' })),
+       transition('* <=> *', animate('.3s'))
+    ]),
+    trigger('fixedHeaderShow', [
+      state('fade350', style({ opacity: 0.5, display: 'block' })),
+      state('fade400', style({ opacity: 0.6, display: 'block' })),
+      state('fade450', style({ opacity: 0.7, display: 'block' })),
+      state('fade500', style({ opacity: 0.8, display: 'block' })),
+      state('fade550', style({ opacity: 0.9, display: 'block' })),
+      state('fade600', style({ opacity: 1.0, display: 'block' }))
+    ]),
+    trigger('fadeState', [
+       state('false' , style({ opacity: 1 })),
+       state('true', style({ opacity: 0.99 })),
+       state('fade150', style({ opacity: 0.90 })),
+       state('fade200', style({ opacity: 0.89 })),
+       state('fade250', style({ opacity: 0.79 })),
+       state('fade300', style({ opacity: 0.69 })),
+       state('fade350', style({ opacity: 0.59 })),
+       state('fade400', style({ opacity: 0.49 })),
+       state('fade450', style({ opacity: 0.39 })),
+       state('fade500', style({ opacity: 0.29 })),
+       state('fade550', style({ opacity: 0.19 })),
+       state('fade600', style({ opacity: 0.09 })),
+       transition('* <=> *', animate('.3s'))
+    ]),
+    trigger('userState', [
+       state('false' , style({ opacity: 1, transform : 'scale(1.0) translateY(0%) ' })),
+       state('true', style({ transform : ' translateY(0) ' })),
+       state('fade150', style({ transform : ' translateX(0) translateY(0) scale(0.95)' })),
+       state('fade200', style({ transform : ' translateX(0) translateY(25px) scale(0.75)' })),
+       state('fade250', style({ transform : ' translateX(10px) translateY(75px) scale(0.65)' })),
+       state('fade300', style({ transform : ' translateX(25px) translateY(125px) scale(0.55)' })),
+       state('fade350', style({ transform : ' translateX(35px) translateY(175px) scale(0.50)' })),
+       state('fade400', style({ transform : ' translateX(50px) translateY(225px) scale(0.45)' })),
+       state('fade450', style({ transform : ' translateX(55px) translateY(275px) scale(0.40)' })),
+       state('fade500', style({ transform : ' translateX(60px) translateY(275px) scale(0.35)' })),
+       state('fade550', style({ transform : ' translateX(75px) translateY(300px) scale(0.30)' })),
+       state('fade600', style({ transform : ' translateX(80px) translateY(325px) scale(0.25)' })),
+       transition('* <=> *', animate('.3s'))
+    ])
+  ]
+})
+
+export class ECMHeaderComponent implements OnInit, AfterViewChecked, OnDestroy {
+
+  @Input() headerFadeState = 'false';
+  isScrollTopDone: boolean = false;
+  scrollTop: number;
+
+  userData: any;
+  
+  constructor(@Inject(DOCUMENT) private document: Document) { }
+
+  ngOnInit() {
+    console.log(' ECMHeaderComponent onInit ###:' + document.body.scrollHeight );
+    this.createUserData();
+  }
+
+  ngAfterViewChecked(){
+    let currScrollTop: string = localStorage.getItem('currentScrollTop') ? localStorage.getItem('currentScrollTop') : '0';
+    let prevScrollHeight: string = localStorage.getItem('scrollHeight') ? localStorage.getItem('scrollHeight') : '0';
+
+    let currScrollTopNum: number = +currScrollTop;
+    let prevScrollHeightNum: number = +prevScrollHeight;
+
+    if ( document.body.scrollHeight >= prevScrollHeightNum && !this.isScrollTopDone ) {
+	     console.log(' ECMAdminComponent ngAfterViewChecked prevScrollHeightNum : ' +  prevScrollHeightNum + ' currScrollTopNum :' + currScrollTopNum + ' document.body.scrollHeight :' + document.body.scrollHeight );
+       window.scrollTo(0, currScrollTopNum);
+       this.isScrollTopDone = true;
+    }
+  }
+  ngOnDestroy(){
+    console.log('ECMHeaderComponent onDestroyed setting document.body.scrollHeight : ' + document.body.scrollHeight);
+    localStorage.setItem('currentScrollTop', this.scrollTop + '');
+  }
+
+  createUserData(){
+    var userInfo = localStorage.getItem('userInfo');
+    console.log('ECMHeaderComponent getUserInfo ::' + userInfo );
+    if( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
+       this.userData = JSON.parse(userInfo);
+    }
+  }
+
+  @HostListener('window:scroll', ['$event.target'])
+  onWindowScroll() {
+
+    let scrollTop: number = this.document.body.scrollTop;
+
+    if (scrollTop > 10 && scrollTop < 50) {
+      this.headerFadeState = 'true';
+    } else if (scrollTop > 50 && scrollTop < 150) {
+      this.headerFadeState = 'fade150';
+    } else if (scrollTop > 150 && scrollTop < 200) {
+      this.headerFadeState = 'fade200';
+    } else if (scrollTop > 200 && scrollTop < 250) {
+      this.headerFadeState = 'fade250';
+    } else if (scrollTop > 250 && scrollTop < 300) {
+      this.headerFadeState = 'fade300';
+    } else if (scrollTop > 300 && scrollTop < 350) {
+      this.headerFadeState = 'fade350';
+    }else if (scrollTop > 350 && scrollTop < 400) {
+      this.headerFadeState = 'fade400';
+    } else if (scrollTop > 400 && scrollTop < 450) {
+      this.headerFadeState = 'fade450';
+    } else if (scrollTop > 450 && scrollTop < 500) {
+      this.headerFadeState = 'fade500';
+    } else if (scrollTop > 500 && scrollTop < 550) {
+      this.headerFadeState = 'fade550';
+    }else if (scrollTop > 550 ) {
+      this.headerFadeState = 'fade600';
+    }else if (scrollTop < 10) {
+      this.headerFadeState = 'false';
+    }
+
+    console.log('headerFadeState[' + this.headerFadeState + ']' + document.body.scrollHeight );
+    this.scrollTop = scrollTop;
+    localStorage.setItem('scrollHeight', document.body.scrollHeight + '');
+  }
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-home/ecm-home.component.html

+<ecm-header> </ecm-header>
+<router-outlet name="content"></router-outlet>
+<ecm-footer> </ecm-footer>
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-home/ecm-home.component.ts

+import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
+import { Router } from '@angular/router';
+import { JwtHelper } from 'angular2-jwt';
+
+@Component({
+  selector: 'ecm-home',
+  templateUrl: './ecm-home.component.html',
+  styleUrls: ['./ecm-home.component.css']
+})
+export class ECMHomeComponent implements OnInit, OnDestroy, AfterViewChecked {
+  jwtHelper: JwtHelper = new JwtHelper();
+  constructor(private router: Router) { }
+  ngOnInit() {
+    console.log(' ECMHomeComponent ngOnInit');
+    console.log( ' window.location[' + window.location + ' window.location.href [' + window.location.href  + ']');
+    console.log(' ECMHomeComponent onInit scroll to window at ###:' + document.body.scrollHeight );
+    let appstateCahce: string = localStorage.getItem('appstate') ? localStorage.getItem('appstate') : 'no-appstate';
+    console.log(' ECMHomeComponent appstateCahce[' + appstateCahce + ']');
+    this.router.navigate(['/Home', {outlets:{content:['content']}}]);
+    if( appstateCahce !== 'undefined' && appstateCahce !== 'no-appstate' ){
+      this.goToLink(appstateCahce);
+    }        
+  }
+  ngAfterViewChecked() {
+    let appstateCahce: string = localStorage.getItem('appstate') ? localStorage.getItem('appstate') : 'no-appstate';
+    if ( appstateCahce === 'no-appstate' ) {
+     window.scrollBy(0, 1);
+    } else if ( appstateCahce !== 'undefined' && appstateCahce !== 'no-appstate' ) {
+      this.goToLink(appstateCahce);
+      localStorage.setItem('appstate', 'undefined');
+    }
+  }
+  goToHome() {
+    this.router.navigate([]);
+  }
+  goToLink( appstate: string ) {
+    this.router.navigate(['/link', appstate]);
+  }
+  ngOnDestroy() {
+    console.log(' ECMHomeComponent ngOnDestroy');
+  }
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.css

+/* Basic styles */
+* {
+	box-sizing: border-box;
+}
+html, body {
+	margin: 0;
+}
+body {
+	font-family: sans-serif;
+	background-color: #F6C390;
+}
+a {
+	text-decoration: none;
+}
+.container {
+	position: relative;
+	margin: 0;
+	width: 300px;
+	height: 534px;
+	background-color: #533557;
+	background-color: transparent;
+	overflow: hidden;
+	height: 100%;
+}
+/* Toggle functionality */
+#toggle {
+	position: absolute;
+	left: -100%;
+	top: -100%;
+}
+#toggle:focus ~ .toggle-container .button-toggle {
+	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+#toggle:checked ~ .container {
+	background-color: blue;
+}
+#toggle:checked ~ .toggle-container .button-toggle {
+	box-shadow: 0 0 0 700px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+#toggle:checked ~ .toggle-container .button-toggle:hover {
+	box-shadow: 0 0 0 700px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+#toggle:checked ~ .toggle-container .button-toggle:before {
+	transform: translateY(-50%) rotate(45deg) scale(1);
+}
+#toggle:checked ~ .toggle-container .button-toggle:after {
+	transform: translateY(-50%) rotate(-45deg) scale(1);
+}
+#toggle:checked:focus ~ .toggle-container .button-toggle {
+	box-shadow: 0 0 0 700px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+#toggle:checked ~ .nav {
+	margin-bottom: 100px;
+	pointer-events: auto;
+	transform: translate(50px, 50px);
+}
+#toggle:checked ~ .nav .nav-item {
+	color: #EC7263;
+	color: #fff;
+	letter-spacing: 0;
+	height: 40px;
+	line-height: 40px;
+	margin-top: 0;
+	opacity: 1;
+	transform: scaleY(1);
+	transition: 0.5s, opacity 0.1s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(1) {
+	transition-delay: 0.15s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(1):before {
+	transition-delay: 0.15s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(2) {
+	transition-delay: 0.1s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(2):before {
+	transition-delay: 0.1s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(3) {
+	transition-delay: 0.05s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(3):before {
+	transition-delay: 0.05s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(4) {
+	transition-delay: 0s;
+}
+#toggle:checked ~ .nav .nav-item:nth-child(4):before {
+	transition-delay: 0s;
+}
+#toggle:checked ~ .nav .nav-item:before {
+	opacity: 0;
+}
+/* Toggle button */
+.button-toggle {
+	top: 0;
+	position: absolute;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	margin: 10px 15px 15px 5px;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	border-radius: 100%;
+	transition: 0.6s;
+	-webkit-transition: 0.6s;
+}
+.button-toggle:hover {
+	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px
+		rgba(0, 0, 0, 0.1);
+}
+.button-toggle:before, .button-toggle:after {
+	position: absolute;
+	content: '';
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: #EC7263;
+	background-color: #fff;
+	border-radius: 5px;
+	transition: 0.5s;
+}
+.button-toggle:before {
+	transform: translateY(-50%) rotate(45deg) scale(0);
+}
+.button-toggle:after {
+	transform: translateY(-50%) rotate(-45deg) scale(0);
+}
+/* Menu */
+.nav {
+	left: 10px;
+	position: absolute;
+	display: inline-block;
+	margin: 10px 15px 15px 10px;
+	pointer-events: none;
+	transition: 0.5s;
+	-webkit-transition: 0.5s;
+}
+.nav-item {
+	position: relative;
+	display: inline-block;
+	float: left;
+	clear: both;
+	color: transparent;
+	font-size: 14px;
+	letter-spacing: -6.2px;
+	height: 7px;
+	line-height: 7px;
+	text-transform: uppercase;
+	white-space: nowrap;
+	transform: scaleY(0.2);
+	transition: 0.5s, opacity 1s;
+}
+.nav-item:nth-child(1) {
+	transition-delay: 0s;
+}
+.nav-item:nth-child(1):before {
+	transition-delay: 0s;
+}
+.nav-item:nth-child(2) {
+	transition-delay: 0.05s;
+}
+.nav-item:nth-child(2):before {
+	transition-delay: 0.05s;
+}
+.nav-item:nth-child(3) {
+	transition-delay: 0.1s;
+}
+.nav-item:nth-child(3):before {
+	transition-delay: 0.1s;
+}
+.nav-item:nth-child(4) {
+	transition-delay: 0.15s;
+}
+.nav-item:nth-child(4):before {
+	transition-delay: 0.15s;
+}
+.nav-item:nth-child(1) {
+	letter-spacing: -8px;
+}
+.nav-item:nth-child(2) {
+	letter-spacing: -7px;
+}
+.nav-item:nth-child(n + 4) {
+	letter-spacing: -8px;
+	margin-top: -7px;
+	opacity: 0;
+}
+.nav-item:before {
+	position: absolute;
+	content: '';
+	top: 50%;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: #EC7263;
+	background-color: #fff;
+	transform: translateY(-50%) scaleY(5);
+	transition: 0.5s;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.html

+<div class="container">
+	<!-- This checkbox will give us the toggle behavior, it will be hidden, but functional -->
+	<input id="toggle" type="checkbox">
+    <!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element -->
+    <!-- This label is tied to the checkbox, and it will contain the toggle "buttons" -->
+	<label class="toggle-container" for="toggle"> <!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon -->
+		<span class="button button-toggle"></span>
+	</label>
+	<!-- The nav menu -->
+	<nav class="nav">
+		<a class="nav-item" href="">Dashboard</a> <a class="nav-item" href="">History</a>
+		<a class="nav-item" href="">Statistics</a> <a class="nav-item" href="">Settings</a>
+	</nav>
+    <!-- Just dummy content like in the animated gif -->
+	<!-- <section class="dummy-content">
+        <div class="circle"></div>
+        <div class="text">
+            <span></span>
+            <span></span>
+        </div>
+        <div class="square-top"></div>
+        <div class="square-behind"></div>
+    </section>   -->
+</div>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.scss

+$items: 4;
+$transition-duration: 0.5s;
+$transition-delay: 0.05s;
+
+/* Basic styles */
+
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+}
+body {
+  font-family: sans-serif;
+  background-color: #F6C390;
+}
+a {
+  text-decoration: none;
+}
+.container {
+  position: relative;
+  margin: 0;
+  width: 300px;
+  height: auto;
+  background-color: #533557;
+  background-color: transparent;
+  overflow: hidden;
+}
+/* Toggle functionality */
+
+// To hide the checkbox
+#toggle {
+  position: absolute;
+  left: -100%;
+  top: -100%;
+}
+#toggle:focus {
+  & ~ .toggle-container .button-toggle {
+    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
+  }
+}
+// Styles for the 'open' state, if the checkbox is checked
+#toggle:checked {
+  // Any element you need to change the style if menu is open goes here, using the sibling selector (~) as follows
+  // Making the "X" icon using `:before` and `:after` pseudo-elements
+  & ~ .toggle-container .button-toggle {
+    box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
+    &:hover {
+      box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
+    }
+    &:before {
+      transform: translateY(-50%) rotate(45deg) scale(1);
+    }
+    &:after {
+      transform: translateY(-50%) rotate(-45deg) scale(1);
+    }
+  }
+  &:focus ~ .toggle-container .button-toggle {
+    box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
+  }
+  // Open nav
+  & ~ .nav {
+    margin-bottom: 100px;
+    pointer-events: auto;
+    transform: translate(50px, 50px);
+    // Restoring nav items from "lines" in the menu icon
+    .nav-item {
+      color: #EC7263;
+      letter-spacing: 0;
+      height: 40px;
+      line-height: 40px;
+      margin-top: 0;
+      opacity: 1;
+      transform: scaleY(1);
+      transition: $transition-duration, opacity 0.1s;
+      // Setting delays for the nav items in open transition
+      @for $i from 1 through $items {
+        &:nth-child(#{$i}) {
+          $delay: ($items - $i) * $transition-delay;
+          transition-delay: $delay;
+          &:before {
+            transition-delay: $delay;
+          }
+        }
+      }
+      // Hiding the lines
+      &:before {
+        opacity: 0;
+      }
+    }
+  }
+}
+/* Toggle button */
+
+.button-toggle {
+  position: absolute;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin: 25px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 100%;
+  transition: $transition-duration + 0.1;
+  // Shadow on hover
+  &:hover {
+    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
+  }
+  // Making the "X" icon using `:before` and `:after` pseudo-elements
+  // Initially hidden because `scale(0)` transformation
+  &:before,
+  &:after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #EC7263;
+    border-radius: 5px;
+    transition: $transition-duration;
+  }
+  &:before {
+    transform: translateY(-50%) rotate(45deg) scale(0);
+  }
+  &:after {
+    transform: translateY(-50%) rotate(-45deg) scale(0);
+  }
+}
+
+/* Menu */
+.nav {
+  display: inline-block;
+  margin: 25px 25px 20px;
+  // Don't want pointer-events as menu is closed
+  pointer-events: none;
+  transition: $transition-duration;
+}
+
+// Showing nav items as lines, making up the hamburger menu icon
+.nav-item {
+  position: relative;
+  display: inline-block;
+  float: left;
+  clear: both;
+  color: transparent;
+  font-size: 14px;
+  letter-spacing: -6.2px;
+  height: 7px;
+  line-height: 7px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  transform: scaleY(0.2);
+  transition: $transition-duration, opacity 1s;
+  // Setting delays for the nav items in close transition
+  @for $i from 1 through $items {
+    &:nth-child(#{$i}) {
+      $delay: ($i - 1) * $transition-delay;
+      transition-delay: $delay;
+      &:before {
+        transition-delay: $delay;
+      }
+    }
+  }
+  // Adjusting width for the first line
+  &:nth-child(1) {
+    letter-spacing: -8px;
+  }
+  // Adjusting width for the second line
+  &:nth-child(2) {
+    letter-spacing: -7px;
+  }
+  // Adjusting from the fourth element onwards
+  &:nth-child(n + 4) {
+    letter-spacing: -8px;
+    margin-top: -7px;
+    opacity: 0;
+  }
+  // Getting the lines for the hamburger menu icon
+  &:before {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #EC7263;
+    transform: translateY(-50%) scaleY(5);
+    transition: $transition-duration;
+  }
+}
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-nav-menu/ecm-nav-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ecm-nav-menu',
+  templateUrl: './ecm-nav-menu.component.html',
+  styleUrls: ['./ecm-nav-menu.component.css']
+})
+export class ECMNavMenuComponent implements OnInit {
+  constructor() { }
+  ngOnInit() {
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.css

+/*Images Source*/
+.img-locate {
+	content: url(../../assets/images/locate_20_20.png);
+	position: absolute;
+	top: 23px;
+	/*  left: 75%; */
+	z-index: 2;
+	padding-left: 10px;
+}
+.locate-me, .locate-handle {
+	width: 80%;
+	height: 53px;
+	position: absolute;
+	z-index: 3;
+	top: 5px;
+	border-left: 1px lightgray solid;
+	padding: 10px 25px 10px 5px;
+	cursor: pointer;
+}
+.locate-me {
+	padding: 15px 25px 10px 35px;
+	font-size: 14pt;
+	width: 100%;
+}
+.locate-handle:hover {
+	background-color: lightblue;
+	opacity: 0.1;
+	border-radius: 10px;
+	border: solid 1px;
+	height: 40px;
+	top: 13px;
+	left: 5px;
+}
+/*Search Input*/
+[type=text].enter-todo:focus {
+	outline: none;
+	border: none;
+	box-shadow: none;
+	transition: none;
+}
+.search-form {
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+}
+.search-page-border {
+	border: none;
+	border-radius: 4px;
+	position: relative;
+	width: 80%;
+	height: 65px;
+	float: left;
+	box-shadow: 0 0 5px 1px lightgrey;
+}
+.search-which-border {
+	position: absolute;
+	top: 0;
+	left: 79%;
+	width: 21%;
+	height: 65px;
+	background-color: #fff;
+}
+.search-terms {
+	background-image: url(../../assets/images/search.png);
+	background-position: 15px 15px;
+	background-repeat: no-repeat;
+	border: none;
+	border-bottom-left-radius: 5px;
+	border-top-left-radius: 5px;
+	width: 79%;
+	height: 65px;
+	position: relative;
+	outline: none;
+	font-size: 14pt;
+	padding: 10px 0 10px 60px;
+	box-shadow: none;
+}
+.search-which {
+	margin: 0;
+	padding: 10px 0 10px 35px;
+	border: none;
+	position: absolute;
+	height: 65px;
+	top: 0;
+	outline: none;
+	font-size: 14pt;
+	background-image: url(../../assets/images/down_arrow.png);
+	background-repeat: no-repeat;
+	background-size: 15px 15px;
+	display: none;
+}
+.search-which, select option {
+}
+.search-submit {
+	height: 65px;
+	margin: 0;
+	padding: 0;
+	color: #ffffff;
+	background: mediumvioletred;
+	position: relative;
+	width: 20%;
+	font-size: 14pt;
+	line-height: 1px;
+	text-align: center;
+	float: right;
+	border: none;
+	border-bottom-right-radius: 5px;
+	border-top-right-radius: 5px;
+}
+/*Fixed Header Search Input*/
+.sb-search {
+	position: relative;
+	margin-top: 4px;
+	margin-right: 10px;
+	width: 0%;
+	min-width: 32px;
+	height: 32px;
+	float: right;
+	overflow: hidden;
+	-webkit-transition: width 0.4s;
+	-moz-transition: width 0.4s;
+	transition: width 0.4s;
+	-webkit-backface-visibility: hidden;
+}
+.sb-search-input {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: 0;
+	border-radius: 5px;
+	outline: none;
+	background-color: mediumvioletred;
+	width: 100%;
+	height: 32px;
+	margin: 0;
+	z-index: 16;
+	padding: 0px 65px 0 10px;
+	font-size: 12px;
+	color: #fff;
+	box-shadow: none;
+}
+/*
+.sb-search-input::-webkit-input-placeholder {
+	color: #2c3e50;
+}
+
+.sb-search-input:-moz-placeholder {
+	color: #2c3e50;
+}
+
+.sb-search-input::-moz-placeholder {
+	color: #2c3e50;
+}
+
+.sb-search-input:-ms-input-placeholder {
+	color: #2c3e50;
+}
+*/
+.sb-icon-search, .sb-search-submit {
+	width: 32px;
+	height: 32px;
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	padding: 0;
+	margin: 0;
+	line-height: 32px;
+	text-align: center;
+	cursor: pointer;
+}
+.sb-search-submit {
+	background: #fff; /* IE needs this */
+	background-color: mediumvioletred;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	/* IE 8 */
+	filter: alpha(opacity = 0); /* IE 5-7 */
+	opacity: 0;
+	color: transparent;
+	border: none;
+	outline: none;
+	z-index: -1;
+}
+.sb-icon-search {
+	color: #fff;
+	z-index: 90;
+	background-image: url(../../assets/images/w_search_38_38.png);
+	background-position: 5px 4px;
+	background-repeat: no-repeat;
+	background-size: 24px 24px;
+	border: none;
+	outline: none;
+}
+.sb-icon-search:before {
+	content: "";
+}
+/* Open state */
+.sb-search.sb-search-open {
+	width: 50%;
+}
+.sb-search.sb-search-open .sb-search-input {
+	border: none;
+	border-radius: 5px;
+	background-color: #fff;
+	color: black;
+	padding-left: 40px;
+	z-index: 16;
+}
+.sb-search.sb-search-open .sb-icon-search {
+	border: none;
+	border-radius: 5px;
+	background-image: url(../../assets/images/v_search_38_38.png);
+	left: 5px;
+	padding-left: 40px;
+	z-index: 16;
+}
+.sb-search.sb-search-open .sb-search-submit {
+	z-index: 90;
+}
+.hide {
+	display: none;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.html

+<form *ngIf="headerState === 'relative'" action="#" method="post"id="search-form" [@searchInputTrans]="compFadeState">
+	<span class="search-page-border"> <input #myInput type="text"placeholder="Search Food, Tour, Events and More..."class="search-terms" name="search-terms" /> 
+	<span class="search-which-border">
+			<div class="locate-me">Locate Me</div>
+			<div class="locate-handle"></div> 
+			<img class="img-locate"title="Locate Me" /> 
+			<select name="search-which" class="search-which">
+				<option value="members">Mumbai</option>
+				<option value="groups">Pune</option>
+				<option value="forums">Nashik</option>
+				<option value="posts">Nagpur</option>
+		    </select>
+	</span>
+	</span>
+	<input type="submit" name="search-submit" class="search-submit"value="Search" />
+</form>
+<div *ngIf="headerState === 'fixed'" id="sb-search" class="sb-search">
+	<form>
+		<input class="sb-search-input" placeholder="Search ..." type="text"value="" name="search" id="search"> 
+		<input class="sb-search-submit" type="submit" value="">
+		<span class="sb-icon-search"></span>
+	</form>
+</div>

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.ts

+import { Component, OnInit, Input, trigger, state, animate, transition, style,  } from '@angular/core';
+
+@Component({
+  selector: 'ecm-search',
+  templateUrl: './ecm-search.component.html',
+  styleUrls: ['./ecm-search.component.css'],
+  animations: [
+    trigger('searchInputTrans', [
+       state('false' , style({ opacity: 1, transform : 'scale(1.0) translateY(0) ' })),
+       state('true', style({ transform : ' translateY(0) ' })),
+       state('fade150', style({ transform : ' translateY(-5px) scale(0.95)' })),
+       state('fade200', style({ transform : ' translateY(-10px) scale(0.95)' })),
+       state('fade250', style({ transform : ' translateY(-20px) scale(0.85)' })),
+       state('fade300', style({ transform : ' translateY(-30px) scale(0.85)' })),
+       state('fade350', style({ transform : ' translateY(-40px) scale(0.75)' })),
+       state('fade400', style({ transform : ' translateY(-50px) scale(0.75)' })),
+       state('fade450', style({ transform : ' translateY(-100px) scale(0.60)' })),
+       state('fade500', style({ transform : ' translateY(-150px) scale(0.55)' })),
+       state('fade550', style({ transform : ' translateY(-200px) scale(0.40)' })),
+       state('fade600', style({ transform : ' translateY(-250px) scale(0.35)' })),
+       transition('* <=> *', animate('.3s'))
+    ])
+   ]
+})
+export class ECMSearchComponent implements OnInit {
+  @Input('compFadeState') compFadeState: string = 'false';
+  @Input('headerState') headerState: string = 'relative';
+  selectedPlace = 'Mumbai';
+  constructor() { }
+  ngOnInit() {
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-trend/ecm-trend.component.css

+.trending-section {
+	padding-top: 50px;
+	height: 650px;
+	background-color: #F2F2F2;
+}
+.ecm-section-info {
+	padding: 10px;
+	max-width: 75rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+.ecm-section-info-title {
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+.ecm-slider-container {
+	position: absolute;
+	width: 100%;
+	max-width: 100%;
+	left: 0;
+	right: 0;
+}
+.slide-card {
+	padding: 10px;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-trend/ecm-trend.component.html

+<div *ngIf="trends_slides">
+	<section class="trending-section">
+		<div class="row">
+			<div class="ecm-section-info">
+				<span class="ecm-section-info-title">Currently Trending</span>
+				<span class="ecm-section-info-subhead">Explore top Authentic Regional Foods, Outings, Celebrations around {{selectedPlace}},based on trends.</span>
+			</div>
+			<div class="large column end ecm-slider-container">
+				<ngb-carousel>
+				<template ngbSlide *ngFor="let _card_slides of trends_slides">
+				<div *ngFor="let _card of _card_slides" class="slide-card">
+					<ecm-card [card]="_card"></ecm-card>
+				</div>
+				</template>
+				</ngb-carousel>
+			</div>
+		</div>
+	</section>
+</div>
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-trend/ecm-trend.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ECMTrendingService } from './ecm-trending.service';
+import { ECMCard } from '../ecm-card/card-model';
+import { Category } from '../ecm-category/category-model';
+
+@Component({
+  selector: 'ecm-trend',
+  templateUrl: './ecm-trend.component.html',
+  styleUrls: ['./ecm-trend.component.css'],
+  providers: [ECMTrendingService]
+})
+export class ECMTrendComponent implements OnInit {
+  trends_slides: ECMCard[][];
+  cardsPerSlide: number = 3;
+  selectedPlace = 'Mumbai';
+  trends: Category[];
+  trends_cards: ECMCard[];
+  constructor(public trendingService: ECMTrendingService) { }
+  getTrends(): void {
+    this.trendingService.getTrending().then(trends => {
+        this.trends = trends;
+        this.trends_cards = [];
+        this.trends_slides = [];
+        for ( let i = 0, j = 0; i < this.cardsPerSlide && j < this.trends.length ; ++i, ++j) {
+            let img = '/ecm/assets/images/category/' + this.trends[j].catCode + '.png';
+            let info_img = '/ecm/assets/images/category/' + this.trends[j].catCode + '_icon.png';
+            let info_title = this.trends[j].descr;
+            let info_subhead = this.trends[j].shDescr;
+            this.trends_cards.push( new ECMCard( img, info_img, info_title, info_subhead, false ) );
+            //console.log('i[' + i + ']j[' + j + ']cardsPerSlide[' + this.cardsPerSlide + ']');
+
+            if ( j < this.trends.length && i === this.cardsPerSlide - 1 )  {
+              //console.log('i[' + i + ']j[' + j + ']cardsPerSlide[' + this.cardsPerSlide + ']' + this.trends.length);
+              this.trends_slides.push(this.trends_cards);
+              this.trends_cards = [];
+              i = -1;
+            }
+        }
+        if ( this.trends_cards.length > 0 ) {
+          this.trends_slides.push(this.trends_cards);
+        }
+      }
+    );
+  }
+  ngOnInit() {
+    this.getTrends();
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-trend/ecm-trending.service.ts

+import { Injectable } from '@angular/core';
+import { Category, MockTrendings } from '../ecm-category/category-model';
+
+@Injectable()
+export class ECMTrendingService {
+  getTrending(): Promise<Category[]> {
+    return Promise.resolve(MockTrendings);
+  }
+  getTrendingSlowly(): Promise<Category[]> {
+    return new Promise(resolve => {
+       // Simulate server latency with 2 second delay
+       setTimeout(() => resolve(this.getTrending()), 2000);
+    });
+  }
+  constructor() { }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/share.component.html

+<p>share works!</p>

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/share.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'share',
+  templateUrl: './share.component.html',
+  styleUrls: ['./share.component.css']
+})
+export class ShareComponent implements OnInit {
+  constructor() { }
+  ngOnInit() {
+  }
+
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/view.component.css

+.categories-section {
+	padding: 0;
+	margin: 0;
+	padding-top: 100px;
+	background-color: #FFF;
+}
+.ecm-section-info {
+	padding: 10px;
+}
+.ecm-section-info-title {
+	font-size: 26px;
+	color: #444;
+	display: block;
+}
+.ecm-section-info-subhead {
+	font-size: 16px;
+	color: #888;
+	display: block;
+}
+.end {
+	padding-top: 15px;
+	padding-bottom: 50px;
+}
+.row.row-category {
+	max-width: 72rem;
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/view.component.html

+<div *ngIf="subcategories">
+	<section class="subcategories-section">
+		<div class="row row-subcategory">
+			<div class="ecm-section-info">
+				<span class="ecm-section-info-title">Sub Categories</span>
+				<span class="ecm-section-info-subhead">Explore top Authentic Regional Foods, Outings, Celebrations around {{selectedPlace}}</span>
+			</div>
+			<div class="small-12 medium-6 large-4 column end "*ngFor="let _subcategory of subcategories">
+				<ecm-card [subcategory]="_subcategory"></ecm-card>
+			</div>
+		</div>
+	</section>
+</div>
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-view/view.component.ts

+import { Component, OnInit } from '@angular/core';
+import { SubCategory } from '../ecm-category/category-model';
+import { ECMCategoryService } from '../ecm-category/ecm-category.service';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrls: ['./view.component.css'],
+  providers: [ECMCategoryService]
+})
+export class ViewComponent implements OnInit {
+public catCode: any;
+  constructor(private route: ActivatedRoute, private router:Router,public subcategoryService: ECMCategoryService) { }
+  ngOnInit() {
+  {
+ this.route.params.subscribe(params => {
+       //let id: number = +params['id']; // (+) converts string 'id' to a number
+       // In a real app: dispatch action to load the details here.
+       this.catCode = params['catCode'];
+       console.log( 'ngOnInit catCode[' + this.catCode + ']');
+  });
+  }
+  this.getSubCategories(this.catCode);
+  window.scrollTo(0, 600);
+  console.log("done scroll");
+  }
+  subcategories: SubCategory[];
+  getSubCategories(scatCode : string) {
+  this.subcategoryService.getSubCategories(scatCode).subscribe(
+      subcategories => {
+        this.subcategories = subcategories;
+        console.log('comp subcategories[' +  JSON.stringify( subcategories ) + '] \n this.subcategories[' +  JSON.stringify( this.subcategories ) + ']');
+      },
+      );
+
+}}

ecm/Angular/ProteusECM/trunk/src/assets/css/foundation.min.css

+@charset "UTF-8";
+	
+	/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+button, img, legend {
+	border: 0
+}
+
+body, button, legend {
+	padding: 0
+}
+
+.button.dropdown::after, .small-pull-1, .small-pull-10, .small-pull-11,
+	.small-pull-2, .small-pull-3, .small-pull-4, .small-pull-5,
+	.small-pull-6, .small-pull-7, .small-pull-8, .small-pull-9,
+	.small-push-1, .small-push-10, .small-push-11, .small-push-2,
+	.small-push-3, .small-push-4, .small-push-5, .small-push-7,
+	.small-push-8, .small-push-9, sub, sup {
+	position: relative
+}
+
+h1, h2, h3, h4, h5, h6, p {
+	text-rendering: optimizeLegibility
+}
+
+.dropdown-pane, .invisible {
+	visibility: hidden
+}
+
+html {
+	font-family: sans-serif;
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup,
+	main, menu, nav, section, summary {
+	display: block
+}
+
+audio, canvas, progress, video {
+	display: inline-block;
+	vertical-align: baseline
+}
+
+audio:not ([controls] ){
+	display: none;
+	height: 0
+}
+
+[hidden], template {
+	display: none
+}
+
+a:active, a:hover {
+	outline: 0
+}
+
+abbr[title] {
+	border-bottom: 1px dotted
+}
+
+b, optgroup, strong {
+	font-weight: 700
+}
+
+dfn {
+	font-style: italic
+}
+
+mark {
+	background: #ff0;
+	color: #000
+}
+
+small {
+	font-size: 80%
+}
+
+sub, sup {
+	font-size: 75%;
+	line-height: 0;
+	vertical-align: baseline
+}
+
+.button, img {
+	vertical-align: middle
+}
+
+sup {
+	top: -.5em
+}
+
+sub {
+	bottom: -.25em
+}
+
+.orbit-caption, .sticky.is-anchored.is-at-bottom, .sticky.is-stuck.is-at-bottom
+	{
+	bottom: 0
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+	-ms-interpolation-mode: bicubic;
+	display: inline-block
+}
+
+svg:not (:root ){
+	overflow: hidden
+}
+
+figure {
+	margin: 1em 40px
+}
+
+pre, textarea {
+	overflow: auto
+}
+
+code, kbd, pre, samp {
+	font-family: monospace, monospace;
+	font-size: 1em
+}
+
+button, input, optgroup, select, textarea {
+	color: inherit;
+	font: inherit;
+	margin: 0
+}
+
+a, b, em, i, small, strong {
+	line-height: inherit
+}
+
+dl, ol, p, ul {
+	line-height: 1.6
+}
+
+button, select {
+	text-transform: none
+}
+
+button, html input[type=button], input[type=reset], input[type=submit] {
+	-webkit-appearance: button;
+	cursor: pointer
+}
+
+button[disabled], html input[disabled] {
+	cursor: default
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+	border: 0;
+	padding: 0
+}
+
+input {
+	line-height: normal
+}
+
+input[type=checkbox], input[type=radio] {
+	box-sizing: border-box;
+	padding: 0
+}
+
+input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
+	{
+	height: auto
+}
+
+input[type=search] {
+	-webkit-appearance: textfield;
+	box-sizing: content-box
+}
+
+input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration
+	{
+	-webkit-appearance: none
+}
+
+.foundation-mq {
+	font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"
+}
+
+body, h1, h2, h3, h4, h5, h6 {
+	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+	font-weight: 400
+}
+
+html {
+	font-size: 100%;
+	box-sizing: border-box
+}
+
+*, :after, :before {
+	box-sizing: inherit
+}
+
+body {
+	margin: 0;
+	line-height: 1.5;
+	color: #0a0a0a;
+	background: #fefefe;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale
+}
+
+select {
+	width: 100%
+}
+
+#map_canvas embed, #map_canvas img, #map_canvas object, .map_canvas embed,
+	.map_canvas img, .map_canvas object, .mqa-display embed, .mqa-display img,
+	.mqa-display object {
+	max-width: none !important
+}
+
+button {
+	overflow: visible;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background: 0 0;
+	border-radius: 0;
+	line-height: 1
+}
+
+.row {
+	max-width: 75rem;
+	margin-left: auto;
+	margin-right: auto
+}
+
+.row::after, .row::before {
+	content: ' ';
+	display: table
+}
+
+.row::after {
+	clear: both
+}
+
+.row.collapse>.column, .row.collapse>.columns {
+	padding-left: 0;
+	padding-right: 0
+}
+
+.row .row {
+	margin-left: -.625rem;
+	margin-right: -.625rem
+}
+
+@media screen and (min-width:40em) {
+	.row .row {
+		margin-left: -.9375rem;
+		margin-right: -.9375rem
+	}
+}
+
+.row .row.collapse {
+	margin-left: 0;
+	margin-right: 0
+}
+
+.row.expanded {
+	max-width: none
+}
+
+.column, .columns {
+	padding-left: .625rem;
+	padding-right: .625rem;
+	width: 100%;
+	float: left
+}
+
+@media screen and (min-width:40em) {
+	.column, .columns {
+		padding-left: .9375rem;
+		padding-right: .9375rem
+	}
+}
+
+.column:last-child:not (:first-child ), .columns:last-child:not (:first-child
+	){
+	float: right
+}
+
+.column.end:last-child:last-child, .end.columns:last-child:last-child {
+	float: left
+}
+
+.column.row.row, .row.row.columns {
+	float: none
+}
+
+.row .column.row.row, .row .row.row.columns {
+	padding-left: 0;
+	padding-right: 0;
+	margin-left: 0;
+	margin-right: 0
+}
+
+.small-1 {
+	width: 8.33333%
+}
+
+.small-push-1 {
+	left: 8.33333%
+}
+
+.small-pull-1 {
+	left: -8.33333%
+}
+
+.small-offset-0 {
+	margin-left: 0
+}
+
+.small-2 {
+	width: 16.66667%
+}
+
+.small-push-2 {
+	left: 16.66667%
+}
+
+.small-pull-2 {
+	left: -16.66667%
+}
+
+.small-offset-1 {
+	margin-left: 8.33333%
+}
+
+.small-3 {
+	width: 25%
+}
+
+.small-push-3 {
+	left: 25%
+}
+
+.small-pull-3 {
+	left: -25%
+}
+
+.small-offset-2 {
+	margin-left: 16.66667%
+}
+
+.small-4 {
+	width: 33.33333%
+}
+
+.small-push-4 {
+	left: 33.33333%
+}
+
+.small-pull-4 {
+	left: -33.33333%
+}
+
+.small-offset-3 {
+	margin-left: 25%
+}
+
+.small-5 {
+	width: 41.66667%
+}
+
+.small-push-5 {
+	left: 41.66667%
+}
+
+.small-pull-5 {
+	left: -41.66667%
+}
+
+.small-offset-4 {
+	margin-left: 33.33333%
+}
+
+.small-6 {
+	width: 50%
+}
+
+.small-push-6 {
+	position: relative;
+	left: 50%
+}
+
+.small-pull-6 {
+	left: -50%
+}
+
+.small-offset-5 {
+	margin-left: 41.66667%
+}
+
+.small-7 {
+	width: 58.33333%
+}
+
+.small-push-7 {
+	left: 58.33333%
+}
+
+.small-pull-7 {
+	left: -58.33333%
+}
+
+.small-offset-6 {
+	margin-left: 50%
+}
+
+.small-8 {
+	width: 66.66667%
+}
+
+.small-push-8 {
+	left: 66.66667%
+}
+
+.small-pull-8 {
+	left: -66.66667%
+}
+
+.small-offset-7 {
+	margin-left: 58.33333%
+}
+
+.small-9 {
+	width: 75%
+}
+
+.small-push-9 {
+	left: 75%
+}
+
+.small-pull-9 {
+	left: -75%
+}
+
+.small-offset-8 {
+	margin-left: 66.66667%
+}
+
+.small-10 {
+	width: 83.33333%
+}
+
+.small-push-10 {
+	left: 83.33333%
+}
+
+.small-pull-10 {
+	left: -83.33333%
+}
+
+.small-offset-9 {
+	margin-left: 75%
+}
+
+.small-11 {
+	width: 91.66667%
+}
+
+.small-push-11 {
+	left: 91.66667%
+}
+
+.small-pull-11 {
+	left: -91.66667%
+}
+
+.small-offset-10 {
+	margin-left: 83.33333%
+}
+
+.small-12 {
+	width: 100%
+}
+
+.small-offset-11 {
+	margin-left: 91.66667%
+}
+
+.small-up-1>.column, .small-up-1>.columns {
+	width: 100%;
+	float: left
+}
+
+.small-up-1>.column:nth-of-type(1n), .small-up-1>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-1>.column:nth-of-type(1n+1), .small-up-1>.columns:nth-of-type(1n+1)
+	{
+	clear: both
+}
+
+.small-up-1>.column:last-child, .small-up-1>.columns:last-child {
+	float: left
+}
+
+.small-up-2>.column, .small-up-2>.columns {
+	width: 50%;
+	float: left
+}
+
+.small-up-2>.column:nth-of-type(1n), .small-up-2>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-2>.column:nth-of-type(2n+1), .small-up-2>.columns:nth-of-type(2n+1)
+	{
+	clear: both
+}
+
+.small-up-2>.column:last-child, .small-up-2>.columns:last-child {
+	float: left
+}
+
+.small-up-3>.column, .small-up-3>.columns {
+	width: 33.33333%;
+	float: left
+}
+
+.small-up-3>.column:nth-of-type(1n), .small-up-3>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-3>.column:nth-of-type(3n+1), .small-up-3>.columns:nth-of-type(3n+1)
+	{
+	clear: both
+}
+
+.small-up-3>.column:last-child, .small-up-3>.columns:last-child {
+	float: left
+}
+
+.small-up-4>.column, .small-up-4>.columns {
+	width: 25%;
+	float: left
+}
+
+.small-up-4>.column:nth-of-type(1n), .small-up-4>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-4>.column:nth-of-type(4n+1), .small-up-4>.columns:nth-of-type(4n+1)
+	{
+	clear: both
+}
+
+.small-up-4>.column:last-child, .small-up-4>.columns:last-child {
+	float: left
+}
+
+.small-up-5>.column, .small-up-5>.columns {
+	width: 20%;
+	float: left
+}
+
+.small-up-5>.column:nth-of-type(1n), .small-up-5>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-5>.column:nth-of-type(5n+1), .small-up-5>.columns:nth-of-type(5n+1)
+	{
+	clear: both
+}
+
+.small-up-5>.column:last-child, .small-up-5>.columns:last-child {
+	float: left
+}
+
+.small-up-6>.column, .small-up-6>.columns {
+	width: 16.66667%;
+	float: left
+}
+
+.small-up-6>.column:nth-of-type(1n), .small-up-6>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-6>.column:nth-of-type(6n+1), .small-up-6>.columns:nth-of-type(6n+1)
+	{
+	clear: both
+}
+
+.small-up-6>.column:last-child, .small-up-6>.columns:last-child {
+	float: left
+}
+
+.small-up-7>.column, .small-up-7>.columns {
+	width: 14.28571%;
+	float: left
+}
+
+.small-up-7>.column:nth-of-type(1n), .small-up-7>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-7>.column:nth-of-type(7n+1), .small-up-7>.columns:nth-of-type(7n+1)
+	{
+	clear: both
+}
+
+.small-up-7>.column:last-child, .small-up-7>.columns:last-child {
+	float: left
+}
+
+.small-up-8>.column, .small-up-8>.columns {
+	width: 12.5%;
+	float: left
+}
+
+.small-up-8>.column:nth-of-type(1n), .small-up-8>.columns:nth-of-type(1n)
+	{
+	clear: none
+}
+
+.small-up-8>.column:nth-of-type(8n+1), .small-up-8>.columns:nth-of-type(8n+1)
+	{
+	clear: both
+}
+
+.small-up-8>.column:last-child, .small-up-8>.columns:last-child {
+	float: left
+}
+
+.small-collapse>.column, .small-collapse>.columns {
+	padding-left: 0;
+	padding-right: 0
+}
+
+.small-uncollapse>.column, .small-uncollapse>.columns {
+	padding-left: .625rem;
+	padding-right: .625rem
+}
+
+.small-centered {
+	float: none;
+	margin-left: auto;
+	margin-right: auto
+}
+
+.small-pull-0, .small-push-0, .small-uncentered {
+	position: static;
+	margin-left: 0;
+	margin-right: 0
+}
+
+@media screen and (min-width:40em) {
+	.medium-pull-1, .medium-pull-10, .medium-pull-11, .medium-pull-2,
+		.medium-pull-3, .medium-pull-4, .medium-pull-5, .medium-pull-6,
+		.medium-pull-7, .medium-pull-8, .medium-pull-9, .medium-push-1,
+		.medium-push-10, .medium-push-11, .medium-push-2, .medium-push-3,
+		.medium-push-4, .medium-push-5, .medium-push-7, .medium-push-8,
+		.medium-push-9 {
+		position: relative
+	}
+	.medium-1 {
+		width: 8.33333%
+	}
+	.medium-push-1 {
+		left: 8.33333%
+	}
+	.medium-pull-1 {
+		left: -8.33333%
+	}
+	.medium-offset-0 {
+		margin-left: 0
+	}
+	.medium-2 {
+		width: 16.66667%
+	}
+	.medium-push-2 {
+		left: 16.66667%
+	}
+	.medium-pull-2 {
+		left: -16.66667%
+	}
+	.medium-offset-1 {
+		margin-left: 8.33333%
+	}
+	.medium-3 {
+		width: 25%
+	}
+	.medium-push-3 {
+		left: 25%
+	}
+	.medium-pull-3 {
+		left: -25%
+	}
+	.medium-offset-2 {
+		margin-left: 16.66667%
+	}
+	.medium-4 {
+		width: 33.33333%
+	}
+	.medium-push-4 {
+		left: 33.33333%
+	}
+	.medium-pull-4 {
+		left: -33.33333%
+	}
+	.medium-offset-3 {
+		margin-left: 25%
+	}
+	.medium-5 {
+		width: 41.66667%
+	}
+	.medium-push-5 {
+		left: 41.66667%
+	}
+	.medium-pull-5 {
+		left: -41.66667%
+	}
+	.medium-offset-4 {
+		margin-left: 33.33333%
+	}
+	.medium-6 {
+		width: 50%
+	}
+	.medium-push-6 {
+		position: relative;
+		left: 50%
+	}
+	.medium-pull-6 {
+		left: -50%
+	}
+	.medium-offset-5 {
+		margin-left: 41.66667%
+	}
+	.medium-7 {
+		width: 58.33333%
+	}
+	.medium-push-7 {
+		left: 58.33333%
+	}
+	.medium-pull-7 {
+		left: -58.33333%
+	}
+	.medium-offset-6 {
+		margin-left: 50%
+	}
+	.medium-8 {
+		width: 66.66667%
+	}
+	.medium-push-8 {
+		left: 66.66667%
+	}
+	.medium-pull-8 {
+		left: -66.66667%
+	}
+	.medium-offset-7 {
+		margin-left: 58.33333%
+	}
+	.medium-9 {
+		width: 75%
+	}
+	.medium-push-9 {
+		left: 75%
+	}
+	.medium-pull-9 {
+		left: -75%
+	}
+	.medium-offset-8 {
+		margin-left: 66.66667%
+	}
+	.medium-10 {
+		width: 83.33333%
+	}
+	.medium-push-10 {
+		left: 83.33333%
+	}
+	.medium-pull-10 {
+		left: -83.33333%
+	}
+	.medium-offset-9 {
+		margin-left: 75%
+	}
+	.medium-11 {
+		width: 91.66667%
+	}
+	.medium-push-11 {
+		left: 91.66667%
+	}
+	.medium-pull-11 {
+		left: -91.66667%
+	}
+	.medium-offset-10 {
+		margin-left: 83.33333%
+	}
+	.medium-12 {
+		width: 100%
+	}
+	.medium-offset-11 {
+		margin-left: 91.66667%
+	}
+	.medium-up-1>.column, .medium-up-1>.columns {
+		width: 100%;
+		float: left
+	}
+	.medium-up-1>.column:nth-of-type(1n), .medium-up-1>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-1>.column:nth-of-type(1n+1), .medium-up-1>.columns:nth-of-type(1n+1)
+		{
+		clear: both
+	}
+	.medium-up-1>.column:last-child, .medium-up-1>.columns:last-child {
+		float: left
+	}
+	.medium-up-2>.column, .medium-up-2>.columns {
+		width: 50%;
+		float: left
+	}
+	.medium-up-2>.column:nth-of-type(1n), .medium-up-2>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-2>.column:nth-of-type(2n+1), .medium-up-2>.columns:nth-of-type(2n+1)
+		{
+		clear: both
+	}
+	.medium-up-2>.column:last-child, .medium-up-2>.columns:last-child {
+		float: left
+	}
+	.medium-up-3>.column, .medium-up-3>.columns {
+		width: 33.33333%;
+		float: left
+	}
+	.medium-up-3>.column:nth-of-type(1n), .medium-up-3>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-3>.column:nth-of-type(3n+1), .medium-up-3>.columns:nth-of-type(3n+1)
+		{
+		clear: both
+	}
+	.medium-up-3>.column:last-child, .medium-up-3>.columns:last-child {
+		float: left
+	}
+	.medium-up-4>.column, .medium-up-4>.columns {
+		width: 25%;
+		float: left
+	}
+	.medium-up-4>.column:nth-of-type(1n), .medium-up-4>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-4>.column:nth-of-type(4n+1), .medium-up-4>.columns:nth-of-type(4n+1)
+		{
+		clear: both
+	}
+	.medium-up-4>.column:last-child, .medium-up-4>.columns:last-child {
+		float: left
+	}
+	.medium-up-5>.column, .medium-up-5>.columns {
+		width: 20%;
+		float: left
+	}
+	.medium-up-5>.column:nth-of-type(1n), .medium-up-5>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-5>.column:nth-of-type(5n+1), .medium-up-5>.columns:nth-of-type(5n+1)
+		{
+		clear: both
+	}
+	.medium-up-5>.column:last-child, .medium-up-5>.columns:last-child {
+		float: left
+	}
+	.medium-up-6>.column, .medium-up-6>.columns {
+		width: 16.66667%;
+		float: left
+	}
+	.medium-up-6>.column:nth-of-type(1n), .medium-up-6>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-6>.column:nth-of-type(6n+1), .medium-up-6>.columns:nth-of-type(6n+1)
+		{
+		clear: both
+	}
+	.medium-up-6>.column:last-child, .medium-up-6>.columns:last-child {
+		float: left
+	}
+	.medium-up-7>.column, .medium-up-7>.columns {
+		width: 14.28571%;
+		float: left
+	}
+	.medium-up-7>.column:nth-of-type(1n), .medium-up-7>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-7>.column:nth-of-type(7n+1), .medium-up-7>.columns:nth-of-type(7n+1)
+		{
+		clear: both
+	}
+	.medium-up-7>.column:last-child, .medium-up-7>.columns:last-child {
+		float: left
+	}
+	.medium-up-8>.column, .medium-up-8>.columns {
+		width: 12.5%;
+		float: left
+	}
+	.medium-up-8>.column:nth-of-type(1n), .medium-up-8>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.medium-up-8>.column:nth-of-type(8n+1), .medium-up-8>.columns:nth-of-type(8n+1)
+		{
+		clear: both
+	}
+	.medium-up-8>.column:last-child, .medium-up-8>.columns:last-child {
+		float: left
+	}
+	.medium-collapse>.column, .medium-collapse>.columns {
+		padding-left: 0;
+		padding-right: 0
+	}
+	.medium-uncollapse>.column, .medium-uncollapse>.columns {
+		padding-left: .9375rem;
+		padding-right: .9375rem
+	}
+	.medium-centered {
+		float: none;
+		margin-left: auto;
+		margin-right: auto
+	}
+	.medium-pull-0, .medium-push-0, .medium-uncentered {
+		position: static;
+		margin-left: 0;
+		margin-right: 0
+	}
+}
+
+@media screen and (min-width:64em) {
+	.large-pull-1, .large-pull-10, .large-pull-11, .large-pull-2,
+		.large-pull-3, .large-pull-4, .large-pull-5, .large-pull-6,
+		.large-pull-7, .large-pull-8, .large-pull-9, .large-push-1,
+		.large-push-10, .large-push-11, .large-push-2, .large-push-3,
+		.large-push-4, .large-push-5, .large-push-7, .large-push-8,
+		.large-push-9 {
+		position: relative
+	}
+	.large-1 {
+		width: 8.33333%
+	}
+	.large-push-1 {
+		left: 8.33333%
+	}
+	.large-pull-1 {
+		left: -8.33333%
+	}
+	.large-offset-0 {
+		margin-left: 0
+	}
+	.large-2 {
+		width: 16.66667%
+	}
+	.large-push-2 {
+		left: 16.66667%
+	}
+	.large-pull-2 {
+		left: -16.66667%
+	}
+	.large-offset-1 {
+		margin-left: 8.33333%
+	}
+	.large-3 {
+		width: 25%
+	}
+	.large-push-3 {
+		left: 25%
+	}
+	.large-pull-3 {
+		left: -25%
+	}
+	.large-offset-2 {
+		margin-left: 16.66667%
+	}
+	.large-4 {
+		width: 33.33333%
+	}
+	.large-push-4 {
+		left: 33.33333%
+	}
+	.large-pull-4 {
+		left: -33.33333%
+	}
+	.large-offset-3 {
+		margin-left: 25%
+	}
+	.large-5 {
+		width: 41.66667%
+	}
+	.large-push-5 {
+		left: 41.66667%
+	}
+	.large-pull-5 {
+		left: -41.66667%
+	}
+	.large-offset-4 {
+		margin-left: 33.33333%
+	}
+	.large-6 {
+		width: 50%
+	}
+	.large-push-6 {
+		position: relative;
+		left: 50%
+	}
+	.large-pull-6 {
+		left: -50%
+	}
+	.large-offset-5 {
+		margin-left: 41.66667%
+	}
+	.large-7 {
+		width: 58.33333%
+	}
+	.large-push-7 {
+		left: 58.33333%
+	}
+	.large-pull-7 {
+		left: -58.33333%
+	}
+	.large-offset-6 {
+		margin-left: 50%
+	}
+	.large-8 {
+		width: 66.66667%
+	}
+	.large-push-8 {
+		left: 66.66667%
+	}
+	.large-pull-8 {
+		left: -66.66667%
+	}
+	.large-offset-7 {
+		margin-left: 58.33333%
+	}
+	.large-9 {
+		width: 75%
+	}
+	.large-push-9 {
+		left: 75%
+	}
+	.large-pull-9 {
+		left: -75%
+	}
+	.large-offset-8 {
+		margin-left: 66.66667%
+	}
+	.large-10 {
+		width: 83.33333%
+	}
+	.large-push-10 {
+		left: 83.33333%
+	}
+	.large-pull-10 {
+		left: -83.33333%
+	}
+	.large-offset-9 {
+		margin-left: 75%
+	}
+	.large-11 {
+		width: 91.66667%
+	}
+	.large-push-11 {
+		left: 91.66667%
+	}
+	.large-pull-11 {
+		left: -91.66667%
+	}
+	.large-offset-10 {
+		margin-left: 83.33333%
+	}
+	.large-12 {
+		width: 100%
+	}
+	.large-offset-11 {
+		margin-left: 91.66667%
+	}
+	.large-up-1>.column, .large-up-1>.columns {
+		width: 100%;
+		float: left
+	}
+	.large-up-1>.column:nth-of-type(1n), .large-up-1>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-1>.column:nth-of-type(1n+1), .large-up-1>.columns:nth-of-type(1n+1)
+		{
+		clear: both
+	}
+	.large-up-1>.column:last-child, .large-up-1>.columns:last-child {
+		float: left
+	}
+	.large-up-2>.column, .large-up-2>.columns {
+		width: 50%;
+		float: left
+	}
+	.large-up-2>.column:nth-of-type(1n), .large-up-2>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-2>.column:nth-of-type(2n+1), .large-up-2>.columns:nth-of-type(2n+1)
+		{
+		clear: both
+	}
+	.large-up-2>.column:last-child, .large-up-2>.columns:last-child {
+		float: left
+	}
+	.large-up-3>.column, .large-up-3>.columns {
+		width: 33.33333%;
+		float: left
+	}
+	.large-up-3>.column:nth-of-type(1n), .large-up-3>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-3>.column:nth-of-type(3n+1), .large-up-3>.columns:nth-of-type(3n+1)
+		{
+		clear: both
+	}
+	.large-up-3>.column:last-child, .large-up-3>.columns:last-child {
+		float: left
+	}
+	.large-up-4>.column, .large-up-4>.columns {
+		width: 25%;
+		float: left
+	}
+	.large-up-4>.column:nth-of-type(1n), .large-up-4>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-4>.column:nth-of-type(4n+1), .large-up-4>.columns:nth-of-type(4n+1)
+		{
+		clear: both
+	}
+	.large-up-4>.column:last-child, .large-up-4>.columns:last-child {
+		float: left
+	}
+	.large-up-5>.column, .large-up-5>.columns {
+		width: 20%;
+		float: left
+	}
+	.large-up-5>.column:nth-of-type(1n), .large-up-5>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-5>.column:nth-of-type(5n+1), .large-up-5>.columns:nth-of-type(5n+1)
+		{
+		clear: both
+	}
+	.large-up-5>.column:last-child, .large-up-5>.columns:last-child {
+		float: left
+	}
+	.large-up-6>.column, .large-up-6>.columns {
+		width: 16.66667%;
+		float: left
+	}
+	.large-up-6>.column:nth-of-type(1n), .large-up-6>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-6>.column:nth-of-type(6n+1), .large-up-6>.columns:nth-of-type(6n+1)
+		{
+		clear: both
+	}
+	.large-up-6>.column:last-child, .large-up-6>.columns:last-child {
+		float: left
+	}
+	.large-up-7>.column, .large-up-7>.columns {
+		width: 14.28571%;
+		float: left
+	}
+	.large-up-7>.column:nth-of-type(1n), .large-up-7>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-7>.column:nth-of-type(7n+1), .large-up-7>.columns:nth-of-type(7n+1)
+		{
+		clear: both
+	}
+	.large-up-7>.column:last-child, .large-up-7>.columns:last-child {
+		float: left
+	}
+	.large-up-8>.column, .large-up-8>.columns {
+		width: 12.5%;
+		float: left
+	}
+	.large-up-8>.column:nth-of-type(1n), .large-up-8>.columns:nth-of-type(1n)
+		{
+		clear: none
+	}
+	.large-up-8>.column:nth-of-type(8n+1), .large-up-8>.columns:nth-of-type(8n+1)
+		{
+		clear: both
+	}
+	.large-up-8>.column:last-child, .large-up-8>.columns:last-child {
+		float: left
+	}
+	.large-collapse>.column, .large-collapse>.columns {
+		padding-left: 0;
+		padding-right: 0
+	}
+	.large-uncollapse>.column, .large-uncollapse>.columns {
+		padding-left: .9375rem;
+		padding-right: .9375rem
+	}
+	.large-centered {
+		float: none;
+		margin-left: auto;
+		margin-right: auto
+	}
+	.large-pull-0, .large-push-0, .large-uncentered {
+		position: static;
+		margin-left: 0;
+		margin-right: 0
+	}
+}
+
+.breadcrumbs::after, .button-group::after, .clearfix::after,
+	.off-canvas-wrapper-inner::after, .pagination::after, .tabs::after,
+	.title-bar::after, .top-bar::after, hr {
+	clear: both
+}
+
+ol, ul {
+	margin-left: 1.25rem
+}
+
+blockquote, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p,
+	pre, td, th, ul {
+	margin: 0;
+	padding: 0
+}
+
+dl, ol, p, ul {
+	margin-bottom: 1rem
+}
+
+p {
+	font-size: inherit
+}
+
+em, i {
+	font-style: italic
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-style: normal;
+	color: inherit;
+	margin-top: 0;
+	margin-bottom: .5rem;
+	line-height: 1.4
+}
+
+code, kbd {
+	background-color: #e6e6e6;
+	color: #0a0a0a;
+	font-family: Consolas, "Liberation Mono", Courier, monospace
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+	color: #cacaca;
+	line-height: 0
+}
+
+h1 {
+	font-size: 1.5rem
+}
+
+h2 {
+	font-size: 1.25rem
+}
+
+h3 {
+	font-size: 1.1875rem
+}
+
+h4 {
+	font-size: 1.125rem
+}
+
+h5 {
+	font-size: 1.0625rem
+}
+
+h6 {
+	font-size: 1rem
+}
+
+@media screen and (min-width:40em) {
+	h1 {
+		font-size: 3rem
+	}
+	h2 {
+		font-size: 2.5rem
+	}
+	h3 {
+		font-size: 1.9375rem
+	}
+	h4 {
+		font-size: 1.5625rem
+	}
+	h5 {
+		font-size: 1.25rem
+	}
+	h6 {
+		font-size: 1rem
+	}
+}
+
+a {
+	background-color: transparent;
+	color: #2199e8;
+	text-decoration: none;
+	cursor: pointer
+}
+
+a:focus, a:hover {
+	color: #1585cf
+}
+
+a img {
+	border: 0
+}
+
+hr {
+	box-sizing: content-box;
+	max-width: 75rem;
+	height: 0;
+	border-right: 0;
+	border-top: 0;
+	border-bottom: 1px solid #cacaca;
+	border-left: 0;
+	margin: 1.25rem auto
+}
+
+dl, ol, ul {
+	list-style-position: outside
+}
+
+li {
+	font-size: inherit
+}
+
+ul {
+	list-style-type: disc
+}
+
+.accordion, .menu, .tabs {
+	list-style-type: none
+}
+
+ol ol, ol ul, ul ol, ul ul {
+	margin-left: 1.25rem;
+	margin-bottom: 0
+}
+
+dl dt {
+	margin-bottom: .3rem;
+	font-weight: 700
+}
+
+.subheader, code, label {
+	font-weight: 400
+}
+
+blockquote {
+	margin: 0 0 1rem;
+	padding: .5625rem 1.25rem 0 1.1875rem;
+	border-left: 1px solid #cacaca
+}
+
+blockquote, blockquote p {
+	line-height: 1.6;
+	color: #8a8a8a
+}
+
+cite {
+	display: block;
+	font-size: .8125rem;
+	color: #8a8a8a
+}
+
+cite:before {
+	content: '\2014 \0020'
+}
+
+abbr {
+	color: #0a0a0a;
+	cursor: help;
+	border-bottom: 1px dotted #0a0a0a
+}
+
+code {
+	border: 1px solid #cacaca;
+	padding: .125rem .3125rem .0625rem
+}
+
+kbd {
+	padding: .125rem .25rem 0;
+	margin: 0
+}
+
+.subheader {
+	margin-top: .2rem;
+	margin-bottom: .5rem;
+	line-height: 1.4;
+	color: #8a8a8a
+}
+
+.lead {
+	font-size: 125%;
+	line-height: 1.6
+}
+
+.button, .stat {
+	line-height: 1
+}
+
+.stat {
+	font-size: 2.5rem
+}
+
+p+.stat {
+	margin-top: -1rem
+}
+
+.no-bullet {
+	margin-left: 0;
+	list-style: none
+}
+
+.text-left {
+	text-align: left
+}
+
+.text-right {
+	text-align: right
+}
+
+.text-center {
+	text-align: center
+}
+
+.text-justify {
+	text-align: justify
+}
+
+@media screen and (min-width:40em) {
+	.medium-text-left {
+		text-align: left
+	}
+	.medium-text-right {
+		text-align: right
+	}
+	.medium-text-center {
+		text-align: center
+	}
+	.medium-text-justify {
+		text-align: justify
+	}
+}
+
+@media screen and (min-width:64em) {
+	.large-text-left {
+		text-align: left
+	}
+	.large-text-right {
+		text-align: right
+	}
+	.large-text-center {
+		text-align: center
+	}
+	.large-text-justify {
+		text-align: justify
+	}
+}
+
+.badge, .button, .input-group-label, .menu.icon-top>li>a, .orbit-bullets
+	{
+	text-align: center
+}
+
+.show-for-print {
+	display: none !important
+}
+
+@media print {
+	blockquote, img, pre, tr {
+		page-break-inside: avoid
+	}
+	* {
+		background: 0 0 !important;
+		color: #000 !important;
+		box-shadow: none !important;
+		text-shadow: none !important
+	}
+	.show-for-print {
+		display: block !important
+	}
+	.hide-for-print {
+		display: none !important
+	}
+	table.show-for-print {
+		display: table !important
+	}
+	thead.show-for-print {
+		display: table-header-group !important
+	}
+	tbody.show-for-print {
+		display: table-row-group !important
+	}
+	tr.show-for-print {
+		display: table-row !important
+	}
+	td.show-for-print, th.show-for-print {
+		display: table-cell !important
+	}
+	a, a:visited {
+		text-decoration: underline
+	}
+	a[href]:after {
+		content: " (" attr(href) ")"
+	}
+	.ir a:after, a[href^='javascript:']:after, a[href^='#']:after {
+		content: ''
+	}
+	abbr[title]:after {
+		content: " (" attr(title) ")"
+	}
+	blockquote, pre {
+		border: 1px solid #999
+	}
+	thead {
+		display: table-header-group
+	}
+	img {
+		max-width: 100% !important
+	}
+	@page {
+		margin: .5cm
+	}
+	h2, h3, p {
+		orphans: 3;
+		widows: 3
+	}
+	h2, h3 {
+		page-break-after: avoid
+	}
+}
+
+.button {
+	display: inline-block;
+	cursor: pointer;
+	-webkit-appearance: none;
+	transition: background-color .25s ease-out, color .25s ease-out;
+	border: 1px solid transparent;
+	border-radius: 0;
+	padding: .85em 1em;
+	margin: 0 0 1rem;
+	font-size: .9rem;
+	background-color: #2199e8;
+	color: #fff
+}
+
+[data-whatinput=mouse] .button {
+	outline: 0
+}
+
+.button:focus, .button:hover {
+	background-color: #1583cc;
+	color: #fff
+}
+
+.button.tiny {
+	font-size: .6rem
+}
+
+.button.small {
+	font-size: .75rem
+}
+
+.button.large {
+	font-size: 1.25rem
+}
+
+.button.expanded {
+	display: block;
+	width: 100%;
+	margin-left: 0;
+	margin-right: 0
+}
+
+.button.primary {
+	background-color: #2199e8;
+	color: #fff
+}
+
+.button.primary:focus, .button.primary:hover {
+	background-color: #147cc0;
+	color: #fff
+}
+
+.button.secondary {
+	background-color: #777;
+	color: #fff
+}
+
+.button.secondary:focus, .button.secondary:hover {
+	background-color: #5f5f5f;
+	color: #fff
+}
+
+.button.success {
+	background-color: #3adb76;
+	color: #fff
+}
+
+.button.success:focus, .button.success:hover {
+	background-color: #22bb5b;
+	color: #fff
+}
+
+.button.alert {
+	background-color: #ec5840;
+	color: #fff
+}
+
+.button.alert:focus, .button.alert:hover {
+	background-color: #da3116;
+	color: #fff
+}
+
+.button.warning {
+	background-color: #ffae00;
+	color: #fff
+}
+
+.button.warning:focus, .button.warning:hover {
+	background-color: #cc8b00;
+	color: #fff
+}
+
+.button.hollow {
+	border: 1px solid #2199e8;
+	color: #2199e8
+}
+
+.button.hollow, .button.hollow:focus, .button.hollow:hover {
+	background-color: transparent
+}
+
+.button.hollow:focus, .button.hollow:hover {
+	border-color: #0c4d78;
+	color: #0c4d78
+}
+
+.button.hollow.primary {
+	border: 1px solid #2199e8;
+	color: #2199e8
+}
+
+.button.hollow.primary:focus, .button.hollow.primary:hover {
+	border-color: #0c4d78;
+	color: #0c4d78
+}
+
+.button.hollow.secondary {
+	border: 1px solid #777;
+	color: #777
+}
+
+.button.hollow.secondary:focus, .button.hollow.secondary:hover {
+	border-color: #3c3c3c;
+	color: #3c3c3c
+}
+
+.button.hollow.success {
+	border: 1px solid #3adb76;
+	color: #3adb76
+}
+
+.button.hollow.success:focus, .button.hollow.success:hover {
+	border-color: #157539;
+	color: #157539
+}
+
+.button.hollow.alert {
+	border: 1px solid #ec5840;
+	color: #ec5840
+}
+
+.button.hollow.alert:focus, .button.hollow.alert:hover {
+	border-color: #881f0e;
+	color: #881f0e
+}
+
+.button.hollow.warning {
+	border: 1px solid #ffae00;
+	color: #ffae00
+}
+
+.button.hollow.warning:focus, .button.hollow.warning:hover {
+	border-color: #805700;
+	color: #805700
+}
+
+.button.disabled, .button[disabled] {
+	opacity: .25;
+	cursor: not-allowed;
+	pointer-events: none
+}
+
+.button.dropdown::after {
+	content: '';
+	width: 0;
+	height: 0;
+	border: .4em inset;
+	border-color: #fefefe transparent transparent;
+	border-top-style: solid;
+	top: .4em;
+	float: right;
+	margin-left: 1em;
+	display: inline-block
+}
+
+.button.arrow-only::after {
+	margin-left: 0;
+	float: none;
+	top: .2em
+}
+
+[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local],
+	[type=month], [type=week], [type=email], [type=number], [type=search],
+	[type=tel], [type=time], [type=url], [type=color], textarea {
+	display: block;
+	box-sizing: border-box;
+	width: 100%;
+	height: 2.4375rem;
+	padding: .5rem;
+	border: 1px solid #cacaca;
+	margin: 0 0 1rem;
+	font-family: inherit;
+	font-size: 1rem;
+	color: #0a0a0a;
+	background-color: #fefefe;
+	box-shadow: inset 0 1px 2px rgba(10, 10, 10, .1);
+	border-radius: 0;
+	transition: box-shadow .5s, border-color .25s ease-in-out;
+	-webkit-appearance: none;
+	-moz-appearance: none
+}
+
+[type=text]:focus, [type=password]:focus, [type=date]:focus, [type=datetime]:focus,
+	[type=datetime-local]:focus, [type=month]:focus, [type=week]:focus, [type=email]:focus,
+	[type=number]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus,
+	[type=url]:focus, [type=color]:focus, textarea:focus {
+	border: 1px solid #8a8a8a;
+	background-color: #fefefe;
+	outline: 0;
+	box-shadow: 0 0 5px #cacaca;
+	transition: box-shadow .5s, border-color .25s ease-in-out
+}
+
+textarea {
+	min-height: 50px;
+	max-width: 100%
+}
+
+textarea[rows] {
+	height: auto
+}
+
+input:disabled, input[readonly], textarea:disabled, textarea[readonly] {
+	background-color: #e6e6e6;
+	cursor: default
+}
+
+[type=submit], [type=button] {
+	border-radius: 0;
+	-webkit-appearance: none;
+	-moz-appearance: none
+}
+
+input[type=search] {
+	box-sizing: border-box
+}
+
+[type=file], [type=checkbox], [type=radio] {
+	margin: 0 0 1rem
+}
+
+[type=checkbox]+label, [type=radio]+label {
+	display: inline-block;
+	margin-left: .5rem;
+	margin-right: 1rem;
+	margin-bottom: 0;
+	vertical-align: baseline
+}
+
+label>[type=checkbox], label>[type=label] {
+	margin-right: .5rem
+}
+
+[type=file] {
+	width: 100%
+}
+
+label {
+	display: block;
+	margin: 0;
+	font-size: .875rem;
+	line-height: 1.8;
+	color: #0a0a0a
+}
+
+.form-error, .menu-text, .switch {
+	font-weight: 700
+}
+
+label.middle {
+	margin: 0 0 1rem;
+	padding: .5625rem 0
+}
+
+.help-text {
+	margin-top: -.5rem;
+	font-size: .8125rem;
+	font-style: italic;
+	color: #333
+}
+
+.input-group {
+	display: table;
+	width: 100%;
+	margin-bottom: 1rem
+}
+
+.input-group-button a, .input-group-button button, .input-group-button input,
+	fieldset {
+	margin: 0
+}
+
+.input-group>:first-child, .input-group>:last-child>* {
+	border-radius: 0
+}
+
+.input-group-button, .input-group-field, .input-group-label {
+	display: table-cell;
+	margin: 0;
+	vertical-align: middle
+}
+
+.input-group-label {
+	width: 1%;
+	height: 100%;
+	padding: 0 1rem;
+	background: #e6e6e6;
+	color: #0a0a0a;
+	border: 1px solid #cacaca
+}
+
+.input-group-label:first-child {
+	border-right: 0
+}
+
+.input-group-label:last-child {
+	border-left: 0
+}
+
+.input-group-field {
+	border-radius: 0;
+	height: 2.5rem
+}
+
+.fieldset, select {
+	border: 1px solid #cacaca
+}
+
+.input-group-button {
+	height: 100%;
+	padding-top: 0;
+	padding-bottom: 0;
+	text-align: center;
+	width: 1%
+}
+
+fieldset {
+	border: 0;
+	padding: 0
+}
+
+legend {
+	margin-bottom: .5rem
+}
+
+.fieldset {
+	padding: 1.25rem;
+	margin: 1.125rem 0
+}
+
+.fieldset legend {
+	background: #fefefe;
+	padding: 0 .1875rem;
+	margin: 0 0 0 -.1875rem
+}
+
+select {
+	height: 2.4375rem;
+	padding: .5rem;
+	margin: 0 0 1rem;
+	font-size: 1rem;
+	font-family: inherit;
+	line-height: normal;
+	color: #0a0a0a;
+	background-color: #fefefe;
+	border-radius: 0;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background-image:
+		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%2851, 51, 51%29"></polygon></svg>');
+	background-size: 9px 6px;
+	background-position: right .5rem center;
+	background-repeat: no-repeat
+}
+
+.form-error, .is-invalid-label {
+	color: #ec5840
+}
+
+@media screen and (min-width:0\0) {
+	select {
+		background-image:
+			url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==)
+	}
+}
+
+select:disabled {
+	background-color: #e6e6e6;
+	cursor: default
+}
+
+select::-ms-expand {
+	display: none
+}
+
+select[multiple] {
+	height: auto
+}
+
+.is-invalid-input:not (:focus ){
+	background-color: rgba(236, 88, 64, .1);
+	border-color: #ec5840
+}
+
+.form-error {
+	display: none;
+	margin-top: -.5rem;
+	margin-bottom: 1rem;
+	font-size: .75rem
+}
+
+.form-error.is-visible {
+	display: block
+}
+
+.hide {
+	display: none !important
+}
+
+@media screen and (min-width:0em) and (max-width:39.9375em) {
+	.hide-for-small-only {
+		display: none !important
+	}
+}
+
+@media screen and (max-width:0em) , screen and (min-width:40em) {
+	.show-for-small-only {
+		display: none !important
+	}
+}
+
+@media screen and (min-width:40em) {
+	.hide-for-medium {
+		display: none !important
+	}
+}
+
+@media screen and (max-width:39.9375em) {
+	.show-for-medium {
+		display: none !important
+	}
+}
+
+@media screen and (min-width:40em) and (max-width:63.9375em) {
+	.hide-for-medium-only {
+		display: none !important
+	}
+}
+
+@media screen and (max-width:39.9375em) , screen and (min-width:64em) {
+	.show-for-medium-only {
+		display: none !important
+	}
+}
+
+@media screen and (min-width:64em) {
+	.hide-for-large {
+		display: none !important
+	}
+}
+
+@media screen and (max-width:63.9375em) {
+	.show-for-large {
+		display: none !important
+	}
+}
+
+@media screen and (min-width:64em) and (max-width:74.9375em) {
+	.hide-for-large-only {
+		display: none !important
+	}
+}
+
+@media screen and (max-width:63.9375em) , screen and (min-width:75em) {
+	.show-for-large-only {
+		display: none !important
+	}
+}
+
+.show-for-sr, .show-on-focus {
+	position: absolute !important;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0)
+}
+
+.show-on-focus:active, .show-on-focus:focus {
+	position: static !important;
+	height: auto;
+	width: auto;
+	overflow: visible;
+	clip: auto
+}
+
+.hide-for-portrait, .show-for-landscape {
+	display: block !important
+}
+
+@media screen and (orientation:landscape) {
+	.hide-for-portrait, .show-for-landscape {
+		display: block !important
+	}
+	.hide-for-landscape, .show-for-portrait {
+		display: none !important
+	}
+}
+
+.hide-for-landscape, .show-for-portrait {
+	display: none !important
+}
+
+@media screen and (orientation:portrait) {
+	.hide-for-portrait, .show-for-landscape {
+		display: none !important
+	}
+	.hide-for-landscape, .show-for-portrait {
+		display: block !important
+	}
+}
+
+.float-left {
+	float: left !important
+}
+
+.float-right {
+	float: right !important
+}
+
+.float-center {
+	display: block;
+	margin-left: auto;
+	margin-right: auto
+}
+
+.clearfix::after, .clearfix::before {
+	content: ' ';
+	display: table
+}
+
+.accordion {
+	background: #fefefe;
+	border: 1px solid #e6e6e6;
+	border-radius: 0;
+	margin-left: 0
+}
+
+.accordion-title {
+	display: block;
+	padding: 1.25rem 1rem;
+	line-height: 1;
+	font-size: .75rem;
+	color: #2199e8;
+	position: relative;
+	border-bottom: 1px solid #e6e6e6
+}
+
+.accordion-title:focus, .accordion-title:hover {
+	background-color: #e6e6e6
+}
+
+:last-child>.accordion-title {
+	border-bottom-width: 0
+}
+
+.accordion-title::before {
+	content: '+';
+	position: absolute;
+	right: 1rem;
+	top: 50%;
+	margin-top: -.5rem
+}
+
+.is-active>.accordion-title::before {
+	content: '–'
+}
+
+.accordion-content {
+	padding: 1rem;
+	display: none;
+	border-bottom: 1px solid #e6e6e6;
+	background-color: #fefefe
+}
+
+.is-accordion-submenu-parent>a {
+	position: relative
+}
+
+.is-accordion-submenu-parent>a::after {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border: 6px inset;
+	border-color: #2199e8 transparent transparent;
+	border-top-style: solid;
+	position: absolute;
+	top: 50%;
+	margin-top: -4px;
+	right: 1rem
+}
+
+.is-accordion-submenu-parent[aria-expanded=true]>a::after {
+	-webkit-transform-origin: 50% 50%;
+	-ms-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+	-webkit-transform: scaleY(-1);
+	-ms-transform: scaleY(-1);
+	transform: scaleY(-1)
+}
+
+.badge {
+	display: inline-block;
+	padding: .3em;
+	min-width: 2.1em;
+	font-size: .6rem;
+	border-radius: 50%;
+	background: #2199e8;
+	color: #fefefe
+}
+
+.badge.secondary {
+	background: #777;
+	color: #fefefe
+}
+
+.badge.success {
+	background: #3adb76;
+	color: #fefefe
+}
+
+.badge.alert {
+	background: #ec5840;
+	color: #fefefe
+}
+
+.badge.warning {
+	background: #ffae00;
+	color: #fefefe
+}
+
+.breadcrumbs {
+	list-style: none;
+	margin: 0 0 1rem
+}
+
+.breadcrumbs::after, .breadcrumbs::before {
+	content: ' ';
+	display: table
+}
+
+.breadcrumbs li {
+	float: left;
+	color: #0a0a0a;
+	font-size: .6875rem;
+	cursor: default;
+	text-transform: uppercase
+}
+
+.breadcrumbs li:not (:last-child )::after {
+	color: #cacaca;
+	content: "/";
+	margin: 0 .75rem;
+	position: relative;
+	top: 1px;
+	opacity: 1
+}
+
+.breadcrumbs a {
+	color: #2199e8
+}
+
+.breadcrumbs a:hover {
+	text-decoration: underline
+}
+
+.breadcrumbs .disabled {
+	color: #cacaca
+}
+
+.button-group {
+	margin-bottom: 1rem;
+	font-size: .9rem
+}
+
+.button-group::after, .button-group::before {
+	content: ' ';
+	display: table
+}
+
+.button-group .button {
+	float: left;
+	margin: 0;
+	font-size: inherit
+}
+
+.button-group .button:not (:last-child ){
+	border-right: 1px solid #fefefe
+}
+
+.button-group.tiny {
+	font-size: .6rem
+}
+
+.button-group.small {
+	font-size: .75rem
+}
+
+.button-group.large {
+	font-size: 1.25rem
+}
+
+.button-group.expanded {
+	display: table;
+	table-layout: fixed;
+	width: 100%
+}
+
+.button-group.expanded::after, .button-group.expanded::before {
+	display: none
+}
+
+.button-group.expanded .button {
+	display: table-cell;
+	float: none
+}
+
+.button-group.primary .button {
+	background-color: #2199e8;
+	color: #fff
+}
+
+.button-group.primary .button:focus, .button-group.primary .button:hover
+	{
+	background-color: #147cc0;
+	color: #fff
+}
+
+.button-group.secondary .button {
+	background-color: #777;
+	color: #fff
+}
+
+.button-group.secondary .button:focus, .button-group.secondary .button:hover
+	{
+	background-color: #5f5f5f;
+	color: #fff
+}
+
+.button-group.success .button {
+	background-color: #3adb76;
+	color: #fff
+}
+
+.button-group.success .button:focus, .button-group.success .button:hover
+	{
+	background-color: #22bb5b;
+	color: #fff
+}
+
+.button-group.alert .button {
+	background-color: #ec5840;
+	color: #fff
+}
+
+.button-group.alert .button:focus, .button-group.alert .button:hover {
+	background-color: #da3116;
+	color: #fff
+}
+
+.button-group.warning .button {
+	background-color: #ffae00;
+	color: #fff
+}
+
+.button-group.warning .button:focus, .button-group.warning .button:hover
+	{
+	background-color: #cc8b00;
+	color: #fff
+}
+
+.button-group.stacked .button, .button-group.stacked-for-small .button {
+	width: 100%
+}
+
+.button-group.stacked .button:not (:last-child ), .button-group.stacked-for-small .button:not
+	(:last-child ){
+	border-right: 1px solid
+}
+
+@media screen and (min-width:40em) {
+	.button-group.stacked-for-small .button {
+		width: auto
+	}
+	.button-group.stacked-for-small .button:not (:last-child ){
+		border-right: 1px solid #fefefe
+	}
+}
+
+.callout {
+	margin: 0 0 1rem;
+	padding: 1rem;
+	border: 1px solid rgba(10, 10, 10, .25);
+	border-radius: 0;
+	position: relative;
+	color: #0a0a0a;
+	background-color: #fff
+}
+
+.callout>:first-child {
+	margin-top: 0
+}
+
+.callout>:last-child {
+	margin-bottom: 0
+}
+
+.callout.primary {
+	background-color: #def0fc
+}
+
+.callout.secondary {
+	background-color: #ebebeb
+}
+
+.callout.success {
+	background-color: #e1faea
+}
+
+.callout.alert {
+	background-color: #fce6e2
+}
+
+.callout.warning {
+	background-color: #fff3d9
+}
+
+.callout.small {
+	padding: .5rem
+}
+
+.callout.large {
+	padding: 3rem
+}
+
+.close-button {
+	position: absolute;
+	color: #8a8a8a;
+	right: 1rem;
+	top: .5rem;
+	font-size: 2em;
+	line-height: 1;
+	cursor: pointer
+}
+
+[data-whatinput=mouse] .close-button {
+	outline: 0
+}
+
+.close-button:focus, .close-button:hover {
+	color: #0a0a0a
+}
+
+.is-drilldown {
+	position: relative;
+	overflow: hidden
+}
+
+.is-drilldown-submenu {
+	position: absolute;
+	top: 0;
+	left: 100%;
+	z-index: -1;
+	height: 100%;
+	width: 100%;
+	background: #fefefe;
+	transition: -webkit-transform .15s linear;
+	transition: transform .15s linear
+}
+
+.is-drilldown-submenu-parent>a::after, .js-drilldown-back::before {
+	width: 0;
+	content: '';
+	display: block;
+	height: 0
+}
+
+.is-drilldown-submenu.is-active {
+	z-index: 1;
+	display: block;
+	-webkit-transform: translateX(-100%);
+	-ms-transform: translateX(-100%);
+	transform: translateX(-100%)
+}
+
+.is-drilldown-submenu.is-closing {
+	-webkit-transform: translateX(100%);
+	-ms-transform: translateX(100%);
+	transform: translateX(100%)
+}
+
+.is-drilldown-submenu-parent>a {
+	position: relative
+}
+
+.is-drilldown-submenu-parent>a::after {
+	border: 6px inset;
+	border-color: transparent transparent transparent #2199e8;
+	border-left-style: solid;
+	position: absolute;
+	top: 50%;
+	margin-top: -6px;
+	right: 1rem
+}
+
+.js-drilldown-back::before {
+	border: 6px inset;
+	border-color: transparent #2199e8 transparent transparent;
+	border-right-style: solid;
+	float: left;
+	margin-right: .75rem;
+	margin-left: .6rem;
+	margin-top: 14px
+}
+
+.dropdown-pane {
+	background-color: #fefefe;
+	border: 1px solid #cacaca;
+	display: block;
+	padding: 1rem;
+	position: absolute;
+	width: 300px;
+	z-index: 10;
+	border-radius: 0
+}
+
+.dropdown-pane.is-open {
+	visibility: visible
+}
+
+.dropdown-pane.tiny {
+	width: 100px
+}
+
+.dropdown-pane.small {
+	width: 200px
+}
+
+.dropdown-pane.large {
+	width: 400px
+}
+
+[data-whatinput=mouse] .dropdown.menu a {
+	outline: 0
+}
+
+.dropdown.menu .is-dropdown-submenu-parent {
+	position: relative
+}
+
+.dropdown.menu .is-dropdown-submenu-parent a::after {
+	float: right;
+	margin-top: 3px;
+	margin-left: 10px
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.is-down-arrow a {
+	padding-right: 1.5rem;
+	position: relative
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.is-down-arrow>a::after {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border: 5px inset;
+	border-color: #2199e8 transparent transparent;
+	border-top-style: solid;
+	position: absolute;
+	top: .825rem;
+	right: 5px
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.is-left-arrow>a::after {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border: 5px inset;
+	border-color: transparent #2199e8 transparent transparent;
+	border-right-style: solid;
+	float: left;
+	margin-left: 0;
+	margin-right: 10px
+}
+
+.is-dropdown-menu.vertical.align-right, .menu.align-right>li {
+	float: right
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow>a::after {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border: 5px inset;
+	border-color: transparent transparent transparent #2199e8;
+	border-left-style: solid
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.is-left-arrow.opens-inner .submenu
+	{
+	right: 0;
+	left: auto
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow.opens-inner .submenu
+	{
+	left: 0;
+	right: auto
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.opens-inner .submenu {
+	top: 100%
+}
+
+.no-js .dropdown.menu ul {
+	display: none
+}
+
+.dropdown.menu .submenu {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 100%;
+	min-width: 200px;
+	z-index: 1;
+	background: #fefefe;
+	border: 1px solid #cacaca;
+	margin-top: -1px
+}
+
+.dropdown.menu .submenu>li {
+	width: 100%
+}
+
+.dropdown.menu .submenu.first-sub {
+	top: 100%;
+	left: 0;
+	right: auto
+}
+
+.dropdown.menu .submenu.js-dropdown-active, .dropdown.menu .submenu:not
+	(.js-dropdown-nohover )>.is-dropdown-submenu-parent:hover>.dropdown.menu .submenu
+	{
+	display: block
+}
+
+.dropdown.menu .is-dropdown-submenu-parent.opens-left .submenu {
+	left: auto;
+	right: 100%
+}
+
+.dropdown.menu.align-right .submenu.first-sub {
+	top: 100%;
+	left: auto;
+	right: 0
+}
+
+.is-dropdown-menu.vertical {
+	width: 100px
+}
+
+.is-dropdown-menu.vertical>li .submenu {
+	top: 0;
+	left: 100%
+}
+
+.flex-video {
+	position: relative;
+	height: 0;
+	padding-bottom: 75%;
+	margin-bottom: 1rem;
+	overflow: hidden
+}
+
+.flex-video embed, .flex-video iframe, .flex-video object, .flex-video video
+	{
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%
+}
+
+.flex-video.widescreen {
+	padding-bottom: 56.25%
+}
+
+.flex-video.vimeo {
+	padding-top: 0
+}
+
+.label {
+	display: inline-block;
+	padding: .33333rem .5rem;
+	font-size: .8rem;
+	line-height: 1;
+	white-space: nowrap;
+	cursor: default;
+	border-radius: 0;
+	background: #2199e8;
+	color: #fefefe
+}
+
+.label.secondary {
+	background: #777;
+	color: #fefefe
+}
+
+.label.success {
+	background: #3adb76;
+	color: #fefefe
+}
+
+.label.alert {
+	background: #ec5840;
+	color: #fefefe
+}
+
+.label.warning {
+	background: #ffae00;
+	color: #fefefe
+}
+
+.media-object {
+	margin-bottom: 1rem;
+	display: block
+}
+
+.media-object img {
+	max-width: none
+}
+
+@media screen and (min-width:0em) and (max-width:39.9375em) {
+	.media-object.stack-for-small .media-object-section {
+		display: block;
+		padding: 0 0 1rem
+	}
+	.media-object.stack-for-small .media-object-section img {
+		width: 100%
+	}
+}
+
+.media-object-section {
+	display: table-cell;
+	vertical-align: top
+}
+
+.media-object-section:first-child {
+	padding-right: 1rem
+}
+
+.media-object-section:last-child:not (+.media-object-section:first-child
+	){
+	padding-left: 1rem
+}
+
+.media-object-section.middle {
+	vertical-align: middle
+}
+
+.media-object-section.bottom {
+	vertical-align: bottom
+}
+
+.menu>li, .menu>li>a>i, .menu>li>a>img, .menu>li>a>span {
+	vertical-align: middle
+}
+
+.menu {
+	margin: 0
+}
+
+[data-whatinput=mouse] .menu>li {
+	outline: 0
+}
+
+.menu>li:not (.menu-text )>a {
+	display: block;
+	padding: .7rem 1rem;
+	line-height: 1
+}
+
+.menu a, .menu button, .menu input {
+	margin-bottom: 0
+}
+
+.menu>li>a>i, .menu>li>a>img {
+	display: inline-block;
+	margin-right: .25rem
+}
+
+.menu>li {
+	display: table-cell
+}
+
+.menu.vertical>li {
+	display: block
+}
+
+@media screen and (min-width:40em) {
+	.menu.medium-horizontal>li {
+		display: table-cell
+	}
+	.menu.medium-vertical>li {
+		display: block
+	}
+}
+
+@media screen and (min-width:64em) {
+	.menu.large-horizontal>li {
+		display: table-cell
+	}
+	.menu.large-vertical>li {
+		display: block
+	}
+}
+
+.menu.simple a {
+	padding: 0;
+	margin-right: 1rem
+}
+
+.menu.expanded {
+	display: table;
+	table-layout: fixed;
+	width: 100%
+}
+
+.menu.expanded>li:first-child:last-child {
+	width: 100%
+}
+
+.menu.icon-top>li>a>i, .menu.icon-top>li>a>img {
+	display: block;
+	margin: 0 auto .25rem
+}
+
+.menu.nested {
+	margin-left: 1rem
+}
+
+.menu-text {
+	color: inherit;
+	line-height: 1;
+	padding: .7rem 1rem
+}
+
+.no-js [data-responsive-menu] ul {
+	display: none
+}
+
+body, html {
+	height: 100%
+}
+
+.off-canvas-wrapper {
+	width: 100%;
+	overflow-x: hidden;
+	position: relative;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	-webkit-overflow-scrolling: auto
+}
+
+.off-canvas-wrapper-inner {
+	position: relative;
+	width: 100%;
+	transition: -webkit-transform .5s ease;
+	transition: transform .5s ease
+}
+
+.off-canvas-wrapper-inner::after, .off-canvas-wrapper-inner::before {
+	content: ' ';
+	display: table
+}
+
+.off-canvas-content {
+	min-height: 100%;
+	background: #fefefe;
+	transition: -webkit-transform .5s ease;
+	transition: transform .5s ease;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	z-index: 1;
+	box-shadow: 0 0 10px rgba(10, 10, 10, .5)
+}
+
+.js-off-canvas-exit {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(254, 254, 254, .25);
+	cursor: pointer;
+	transition: background .5s ease
+}
+
+.is-off-canvas-open .js-off-canvas-exit {
+	display: block
+}
+
+.off-canvas {
+	position: absolute;
+	background: #e6e6e6;
+	z-index: -1;
+	max-height: 100%;
+	overflow-y: auto;
+	-webkit-transform: translateX(0);
+	-ms-transform: translateX(0);
+	transform: translateX(0)
+}
+
+.orbit-caption, .orbit-next:active, .orbit-next:focus, .orbit-next:hover,
+	.orbit-previous:active, .orbit-previous:focus, .orbit-previous:hover {
+	background-color: rgba(10, 10, 10, .5)
+}
+
+[data-whatinput=mouse] .off-canvas {
+	outline: 0
+}
+
+.off-canvas.position-left {
+	left: -250px;
+	top: 0;
+	width: 250px
+}
+
+.is-open-left {
+	-webkit-transform: translateX(250px);
+	-ms-transform: translateX(250px);
+	transform: translateX(250px)
+}
+
+.off-canvas.position-right {
+	right: -250px;
+	top: 0;
+	width: 250px
+}
+
+.is-open-right {
+	-webkit-transform: translateX(-250px);
+	-ms-transform: translateX(-250px);
+	transform: translateX(-250px)
+}
+
+@media screen and (min-width:40em) {
+	.position-left.reveal-for-medium {
+		left: 0;
+		z-index: auto;
+		position: fixed
+	}
+	.position-left.reveal-for-medium ~.off-canvas-content {
+		margin-left: 250px
+	}
+	.position-right.reveal-for-medium {
+		right: 0;
+		z-index: auto;
+		position: fixed
+	}
+	.position-right.reveal-for-medium ~.off-canvas-content {
+		margin-right: 250px
+	}
+}
+
+@media screen and (min-width:64em) {
+	.position-left.reveal-for-large {
+		left: 0;
+		z-index: auto;
+		position: fixed
+	}
+	.position-left.reveal-for-large ~.off-canvas-content {
+		margin-left: 250px
+	}
+	.position-right.reveal-for-large {
+		right: 0;
+		z-index: auto;
+		position: fixed
+	}
+	.position-right.reveal-for-large ~.off-canvas-content {
+		margin-right: 250px
+	}
+}
+
+.orbit, .orbit-container {
+	position: relative
+}
+
+.orbit-container {
+	margin: 0;
+	overflow: hidden;
+	list-style: none
+}
+
+.orbit-caption, .orbit-next, .orbit-previous {
+	position: absolute;
+	padding: 1rem;
+	color: #fefefe
+}
+
+.orbit-slide {
+	width: 100%;
+	max-height: 100%
+}
+
+.orbit-slide.no-motionui.is-active {
+	top: 0;
+	left: 0
+}
+
+.orbit-figure {
+	margin: 0
+}
+
+.orbit-image {
+	margin: 0;
+	width: 100%;
+	max-width: 100%
+}
+
+.orbit-caption {
+	width: 100%;
+	margin-bottom: 0
+}
+
+.orbit-next, .orbit-previous {
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+	z-index: 10
+}
+
+[data-whatinput=mouse] .orbit-next, [data-whatinput=mouse] .orbit-previous
+	{
+	outline: 0
+}
+
+.orbit-previous {
+	left: 0
+}
+
+.orbit-next {
+	left: auto;
+	right: 0
+}
+
+.orbit-bullets {
+	position: relative;
+	margin-top: .8rem;
+	margin-bottom: .8rem
+}
+
+[data-whatinput=mouse] .orbit-bullets {
+	outline: 0
+}
+
+.orbit-bullets button {
+	width: 1.2rem;
+	height: 1.2rem;
+	margin: .1rem;
+	background-color: #cacaca;
+	border-radius: 50%
+}
+
+.orbit-bullets button.is-active, .orbit-bullets button:hover {
+	background-color: #8a8a8a
+}
+
+.pagination {
+	margin-left: 0;
+	margin-bottom: 1rem
+}
+
+.pagination::after, .pagination::before {
+	content: ' ';
+	display: table
+}
+
+.pagination li {
+	font-size: .875rem;
+	margin-right: .0625rem;
+	display: none;
+	border-radius: 0
+}
+
+.pagination li:first-child, .pagination li:last-child {
+	display: inline-block
+}
+
+@media screen and (min-width:40em) {
+	.pagination li {
+		display: inline-block
+	}
+	.reveal {
+		min-height: 0
+	}
+}
+
+.pagination a, .pagination button {
+	color: #0a0a0a;
+	display: block;
+	padding: .1875rem .625rem;
+	border-radius: 0
+}
+
+.pagination a:hover, .pagination button:hover {
+	background: #e6e6e6
+}
+
+.pagination .current {
+	padding: .1875rem .625rem;
+	background: #2199e8;
+	color: #fefefe;
+	cursor: default
+}
+
+.pagination .disabled {
+	padding: .1875rem .625rem;
+	color: #cacaca;
+	cursor: default
+}
+
+.pagination .disabled:hover {
+	background: 0 0
+}
+
+.pagination .ellipsis::after {
+	content: '…';
+	padding: .1875rem .625rem;
+	color: #0a0a0a
+}
+
+.pagination-previous a::before, .pagination-previous.disabled::before {
+	content: '«';
+	display: inline-block;
+	margin-right: .5rem
+}
+
+.pagination-next a::after, .pagination-next.disabled::after {
+	content: '»';
+	display: inline-block;
+	margin-left: .5rem
+}
+
+.progress {
+	background-color: #cacaca;
+	height: 1rem;
+	margin-bottom: 1rem;
+	border-radius: 0
+}
+
+.progress.primary .progress-meter {
+	background-color: #2199e8
+}
+
+.progress.secondary .progress-meter {
+	background-color: #777
+}
+
+.progress.success .progress-meter {
+	background-color: #3adb76
+}
+
+.progress.alert .progress-meter {
+	background-color: #ec5840
+}
+
+.progress.warning .progress-meter {
+	background-color: #ffae00
+}
+
+.progress-meter {
+	position: relative;
+	display: block;
+	width: 0;
+	height: 100%;
+	background-color: #2199e8;
+	border-radius: 0
+}
+
+.progress-meter .progress-meter-text {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	-ms-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	margin: 0;
+	font-size: .75rem;
+	font-weight: 700;
+	color: #fefefe;
+	white-space: nowrap
+}
+
+.slider-fill, .slider-handle {
+	left: 0;
+	display: inline-block
+}
+
+.slider {
+	position: relative;
+	height: .5rem;
+	margin-top: 1.25rem;
+	margin-bottom: 2.25rem;
+	background-color: #e6e6e6;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-ms-touch-action: none;
+	touch-action: none
+}
+
+.slider-fill {
+	position: absolute;
+	top: 0;
+	max-width: 100%;
+	height: .5rem;
+	background-color: #cacaca;
+	transition: all .2s ease-in-out
+}
+
+.slider-fill.is-dragging {
+	transition: all 0s linear
+}
+
+.slider-handle {
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+	position: absolute;
+	z-index: 1;
+	width: 1.4rem;
+	height: 1.4rem;
+	background-color: #2199e8;
+	transition: all .2s ease-in-out;
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+	border-radius: 0
+}
+
+[data-whatinput=mouse] .slider-handle {
+	outline: 0
+}
+
+.slider-handle:hover {
+	background-color: #1583cc
+}
+
+.slider-handle.is-dragging {
+	transition: all 0s linear
+}
+
+.slider.disabled, .slider[disabled] {
+	opacity: .25;
+	cursor: not-allowed
+}
+
+.slider.vertical {
+	display: inline-block;
+	width: .5rem;
+	height: 12.5rem;
+	margin: 0 1.25rem;
+	-webkit-transform: scale(1, -1);
+	-ms-transform: scale(1, -1);
+	transform: scale(1, -1)
+}
+
+.slider.vertical .slider-fill {
+	top: 0;
+	width: .5rem;
+	max-height: 100%
+}
+
+.slider.vertical .slider-handle {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	width: 1.4rem;
+	height: 1.4rem;
+	-webkit-transform: translateX(-50%);
+	-ms-transform: translateX(-50%);
+	transform: translateX(-50%)
+}
+
+.sticky-container {
+	position: relative
+}
+
+.sticky {
+	position: absolute;
+	z-index: 0;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0)
+}
+
+.sticky.is-stuck {
+	position: fixed;
+	z-index: 5
+}
+
+.sticky.is-stuck.is-at-top {
+	top: 0
+}
+
+.sticky.is-anchored {
+	position: absolute;
+	left: auto;
+	right: auto
+}
+
+body.is-reveal-open {
+	overflow: hidden
+}
+
+.reveal-overlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1005;
+	background-color: rgba(10, 10, 10, .45);
+	overflow-y: scroll
+}
+
+.reveal {
+	display: none;
+	z-index: 1006;
+	padding: 1rem;
+	border: 1px solid #cacaca;
+	margin: 100px auto 0;
+	background-color: #fefefe;
+	border-radius: 0;
+	position: absolute;
+	overflow-y: auto
+}
+
+.switch-paddle, .switch-paddle::after {
+	display: block;
+	transition: all .25s ease-out
+}
+
+[data-whatinput=mouse] .reveal {
+	outline: 0
+}
+
+.reveal .column, .reveal .columns {
+	min-width: 0
+}
+
+.reveal>:last-child {
+	margin-bottom: 0
+}
+
+.reveal.collapse {
+	padding: 0
+}
+
+caption, tbody td, tbody th {
+	padding: .5rem .625rem .625rem
+}
+
+@media screen and (min-width:40em) {
+	.reveal {
+		width: 600px;
+		max-width: 75rem
+	}
+	.reveal .reveal {
+		left: auto;
+		right: auto;
+		margin: 0 auto
+	}
+	.reveal.tiny {
+		width: 30%;
+		max-width: 75rem
+	}
+	.reveal.small {
+		width: 50%;
+		max-width: 75rem
+	}
+	.reveal.large {
+		width: 90%;
+		max-width: 75rem
+	}
+}
+
+.reveal.full {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	height: 100vh;
+	min-height: 100vh;
+	max-width: none;
+	margin-left: 0;
+	border: 0
+}
+
+.switch {
+	margin-bottom: 1rem;
+	outline: 0;
+	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	color: #fefefe;
+	font-size: .875rem
+}
+
+.switch-input {
+	opacity: 0;
+	position: absolute
+}
+
+.switch-paddle {
+	background: #cacaca;
+	cursor: pointer;
+	position: relative;
+	width: 4rem;
+	height: 2rem;
+	border-radius: 0;
+	color: inherit;
+	font-weight: inherit
+}
+
+.has-tip, .title-bar-title, caption {
+	font-weight: 700
+}
+
+input+.switch-paddle {
+	margin: 0
+}
+
+.switch-paddle::after {
+	background: #fefefe;
+	content: '';
+	position: absolute;
+	height: 1.5rem;
+	left: .25rem;
+	top: .25rem;
+	width: 1.5rem;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+	border-radius: 0
+}
+
+.switch-active, .switch-inactive, .tooltip.left::before {
+	-webkit-transform: translateY(-50%);
+	-ms-transform: translateY(-50%)
+}
+
+input:checked ~.switch-paddle {
+	background: #2199e8
+}
+
+input:checked ~.switch-paddle::after {
+	left: 2.25rem
+}
+
+[data-whatinput=mouse] input:focus ~.switch-paddle {
+	outline: 0
+}
+
+.switch-active, .switch-inactive {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%)
+}
+
+.switch-active {
+	left: 8%;
+	display: none
+}
+
+input:checked+label>.switch-active {
+	display: block
+}
+
+.switch-inactive {
+	right: 15%
+}
+
+input:checked+label>.switch-inactive {
+	display: none
+}
+
+.switch.tiny .switch-paddle {
+	width: 3rem;
+	height: 1.5rem;
+	font-size: .625rem
+}
+
+.switch.tiny .switch-paddle::after {
+	width: 1rem;
+	height: 1rem
+}
+
+.switch.tiny input:checked ~.switch-paddle:after {
+	left: 1.75rem
+}
+
+.switch.small .switch-paddle {
+	width: 3.5rem;
+	height: 1.75rem;
+	font-size: .75rem
+}
+
+.switch.small .switch-paddle::after {
+	width: 1.25rem;
+	height: 1.25rem
+}
+
+.switch.small input:checked ~.switch-paddle:after {
+	left: 2rem
+}
+
+.switch.large .switch-paddle {
+	width: 5rem;
+	height: 2.5rem;
+	font-size: 1rem
+}
+
+.switch.large .switch-paddle::after {
+	width: 2rem;
+	height: 2rem
+}
+
+.switch.large input:checked ~.switch-paddle:after {
+	left: 2.75rem
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	margin-bottom: 1rem;
+	border-radius: 0
+}
+
+tbody, tfoot, thead {
+	border: 1px solid #f1f1f1;
+	background-color: #fefefe
+}
+
+tfoot, thead {
+	background: #f8f8f8;
+	color: #0a0a0a
+}
+
+tfoot tr, thead tr {
+	background: 0 0
+}
+
+tfoot td, tfoot th, thead td, thead th {
+	padding: .5rem .625rem .625rem;
+	font-weight: 700;
+	text-align: left
+}
+
+tbody tr:nth-child(even) {
+	background-color: #f1f1f1
+}
+
+@media screen and (max-width:63.9375em) {
+	table.stack tfoot, table.stack thead {
+		display: none
+	}
+	table.stack td, table.stack th, table.stack tr {
+		display: block
+	}
+	table.stack td {
+		border-top: 0
+	}
+}
+
+.tabs, .tabs-content {
+	border: 1px solid #e6e6e6
+}
+
+table.scroll {
+	display: block;
+	width: 100%;
+	overflow-x: auto
+}
+
+table.hover tr:hover {
+	background-color: #f9f9f9
+}
+
+table.hover tr:nth-of-type(even):hover {
+	background-color: #ececec
+}
+
+.tabs {
+	margin: 0;
+	background: #fefefe
+}
+
+.tabs::after, .tabs::before {
+	content: ' ';
+	display: table
+}
+
+.tabs.vertical>li {
+	width: auto;
+	float: none;
+	display: block
+}
+
+.tabs-title, .title-bar-left {
+	float: left
+}
+
+.tabs.simple>li>a {
+	padding: 0
+}
+
+.tabs.simple>li>a:hover {
+	background: 0 0
+}
+
+.tabs.primary {
+	background: #2199e8
+}
+
+.tabs.primary>li>a {
+	color: #fefefe
+}
+
+.tabs.primary>li>a:focus, .tabs.primary>li>a:hover {
+	background: #1893e4
+}
+
+.tabs-title>a {
+	display: block;
+	padding: 1.25rem 1.5rem;
+	line-height: 1;
+	font-size: 12px;
+	color: #2199e8
+}
+
+.tabs-title>a:hover {
+	background: #fefefe
+}
+
+.tabs-title>a:focus, .tabs-title>a[aria-selected=true] {
+	background: #e6e6e6
+}
+
+.tabs-content {
+	background: #fefefe;
+	transition: all .5s ease;
+	border-top: 0
+}
+
+.tabs-content.vertical {
+	border: 1px solid #e6e6e6;
+	border-left: 0
+}
+
+.tabs-panel {
+	display: none;
+	padding: 1rem
+}
+
+.tabs-panel.is-active {
+	display: block
+}
+
+.thumbnail {
+	border: 4px solid #fefefe;
+	box-shadow: 0 0 0 1px rgba(10, 10, 10, .2);
+	display: inline-block;
+	line-height: 0;
+	max-width: 100%;
+	transition: box-shadow .2s ease-out;
+	border-radius: 0;
+	margin-bottom: 1rem
+}
+
+.thumbnail:focus, .thumbnail:hover {
+	box-shadow: 0 0 6px 1px rgba(33, 153, 232, .5)
+}
+
+.title-bar {
+	background: #0a0a0a;
+	color: #fefefe;
+	padding: .5rem
+}
+
+.title-bar::after, .title-bar::before {
+	content: ' ';
+	display: table
+}
+
+.menu-icon, .title-bar-title {
+	display: inline-block;
+	vertical-align: middle
+}
+
+.title-bar .menu-icon {
+	margin-left: .25rem;
+	margin-right: .5rem
+}
+
+.title-bar-right {
+	float: right;
+	text-align: right
+}
+
+.menu-icon {
+	position: relative;
+	cursor: pointer;
+	width: 20px;
+	height: 16px
+}
+
+.menu-icon::after {
+	content: '';
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 2px;
+	background: #fefefe;
+	top: 0;
+	left: 0;
+	box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe
+}
+
+.menu-icon:hover::after {
+	background: #cacaca;
+	box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca
+}
+
+.has-tip {
+	border-bottom: dotted 1px #8a8a8a;
+	position: relative;
+	display: inline-block;
+	cursor: help
+}
+
+.tooltip.top::before, .tooltip::before {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0
+}
+
+.tooltip {
+	background-color: #0a0a0a;
+	color: #fefefe;
+	font-size: 80%;
+	padding: .75rem;
+	position: absolute;
+	z-index: 10;
+	top: calc(100% + .6495rem);
+	max-width: 10rem !important;
+	border-radius: 0
+}
+
+.tooltip::before {
+	border: .75rem inset;
+	border-color: transparent transparent #0a0a0a;
+	border-bottom-style: solid;
+	bottom: 100%;
+	position: absolute;
+	left: 50%;
+	-webkit-transform: translateX(-50%);
+	-ms-transform: translateX(-50%);
+	transform: translateX(-50%)
+}
+
+.tooltip.top::before {
+	border: .75rem inset;
+	border-color: #0a0a0a transparent transparent;
+	border-top-style: solid;
+	top: 100%;
+	bottom: auto
+}
+
+.tooltip.left::before, .tooltip.right::before {
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	bottom: auto;
+	top: 50%
+}
+
+.tooltip.left::before {
+	border: .75rem inset;
+	border-color: transparent transparent transparent #0a0a0a;
+	border-left-style: solid;
+	left: 100%;
+	transform: translateY(-50%)
+}
+
+.tooltip.right::before {
+	border: .75rem inset;
+	border-color: transparent #0a0a0a transparent transparent;
+	border-right-style: solid;
+	left: auto;
+	right: 100%;
+	-webkit-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%)
+}
+
+.top-bar {
+	padding: .5rem
+}
+
+.top-bar::after, .top-bar::before {
+	content: ' ';
+	display: table
+}
+
+.top-bar, .top-bar ul {
+	background-color: #e6e6e6
+}
+
+.top-bar a {
+	color: #2199e8
+}
+
+.top-bar input {
+	width: 200px;
+	margin-right: 1rem
+}
+
+.top-bar input.button {
+	width: auto
+}
+
+@media screen and (max-width:39.9375em) {
+	.stacked-for-small .top-bar-left, .stacked-for-small .top-bar-right {
+		width: 100%
+	}
+}
+
+@media screen and (max-width:63.9375em) {
+	.stacked-for-medium .top-bar-left, .stacked-for-medium .top-bar-right {
+		width: 100%
+	}
+}
+
+@media screen and (max-width:74.9375em) {
+	.stacked-for-large .top-bar-left, .stacked-for-large .top-bar-right {
+		width: 100%
+	}
+}
+
+@media screen and (min-width:0em) and (max-width:39.9375em) {
+	.top-bar-left, .top-bar-right {
+		width: 100%
+	}
+}
+
+.top-bar-left {
+	float: left
+}
+
+.top-bar-right {
+	float: right
+}
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/assets/css/styles.css

+/* You can add global styles to this file, and also import other style files */
+body {
+	margin: 0;
+	padding: 0;
+	background-color: #fff;
+}
+
+/* Font loaded - elegant icons*/
+@font-face { /* declare fonts */
+	font-family: "Roboto-Regular";
+	src: url("Roboto-Regular.ttf") format("truetype");
+}
+
+/* Font loaded - elegant icons*/
+@font-face { /* declare fonts */
+	font-family: "elegant-icons";
+	src: url("elegant-icons.ttf") format("truetype");
+}
+
+* {
+	font-family: "Roboto-Regular", sans-serif !important;
+}
+
+:FOCUS {
+	outline: none;
+}
+
+.back-button:before {
+    content: "4";
+    margin: 0;
+    font-size: 30px;
+    top: 6px;
+    font-family: "elegant-icons" !important;
+    font-style: normal !important;
+    font-weight: normal !important;
+    font-variant: normal !important;
+    text-transform: none !important;
+    line-height: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+}

ecm/Angular/ProteusECM/trunk/src/assets/js/classie.js

+/*!
+ * classie - class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ * 
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true */
+/*global define: false */
+
+( function( window ) {
+
+'use strict';
+
+// class helper functions from bonzo https://github.com/ded/bonzo
+
+function classReg( className ) {
+  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+}
+
+// classList support for class management
+// altho to be fair, the api sucks because it won't accept multiple classes at once
+var hasClass, addClass, removeClass;
+
+if ( 'classList' in document.documentElement ) {
+  hasClass = function( elem, c ) {
+    return elem.classList.contains( c );
+  };
+  addClass = function( elem, c ) {
+    elem.classList.add( c );
+  };
+  removeClass = function( elem, c ) {
+    elem.classList.remove( c );
+  };
+}
+else {
+  hasClass = function( elem, c ) {
+    return classReg( c ).test( elem.className );
+  };
+  addClass = function( elem, c ) {
+    if ( !hasClass( elem, c ) ) {
+      elem.className = elem.className + ' ' + c;
+    }
+  };
+  removeClass = function( elem, c ) {
+    elem.className = elem.className.replace( classReg( c ), ' ' );
+  };
+}
+
+function toggleClass( elem, c ) {
+  var fn = hasClass( elem, c ) ? removeClass : addClass;
+  fn( elem, c );
+}
+
+var classie = {
+  // full names
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  // short names
+  has: hasClass,
+  add: addClass,
+  remove: removeClass,
+  toggle: toggleClass
+};
+
+// transport
+if ( typeof define === 'function' && define.amd ) {
+  // AMD
+  define( classie );
+} else {
+  // browser global
+  window.classie = classie;
+}
+
+})( window );

ecm/Angular/ProteusECM/trunk/src/assets/js/modernizr.custom.js

+/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-shiv-cssclasses-load
+ */
+;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/assets/js/uisearch.js

+/**
+ * uisearch.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2013, Codrops
+ * http://www.codrops.com
+ */
+;( function( window ) {
+	
+	'use strict';
+	
+	// EventListener | @jon_neal | //github.com/jonathantneal/EventListener
+	!window.addEventListener && window.Element && (function () {
+	   function addToPrototype(name, method) {
+		  Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
+	   }
+	 
+	   var registry = [];
+	 
+	   addToPrototype("addEventListener", function (type, listener) {
+		  var target = this;
+	 
+		  registry.unshift({
+			 __listener: function (event) {
+				event.currentTarget = target;
+				event.pageX = event.clientX + document.documentElement.scrollLeft;
+				event.pageY = event.clientY + document.documentElement.scrollTop;
+				event.preventDefault = function () { event.returnValue = false };
+				event.relatedTarget = event.fromElement || null;
+				event.stopPropagation = function () { event.cancelBubble = true };
+				event.relatedTarget = event.fromElement || null;
+				event.target = event.srcElement || target;
+				event.timeStamp = +new Date;
+	 
+				listener.call(target, event);
+			 },
+			 listener: listener,
+			 target: target,
+			 type: type
+		  });
+	 
+		  this.attachEvent("on" + type, registry[0].__listener);
+	   });
+	 
+	   addToPrototype("removeEventListener", function (type, listener) {
+		  for (var index = 0, length = registry.length; index < length; ++index) {
+			 if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) {
+				return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener);
+			 }
+		  }
+	   });
+	 
+	   addToPrototype("dispatchEvent", function (eventObject) {
+		  try {
+			 return this.fireEvent("on" + eventObject.type, eventObject);
+		  } catch (error) {
+			 for (var index = 0, length = registry.length; index < length; ++index) {
+				if (registry[index].target == this && registry[index].type == eventObject.type) {
+				   registry[index].call(this, eventObject);
+				}
+			 }
+		  }
+	   });
+	})();
+
+	// http://stackoverflow.com/a/11381730/989439
+	function mobilecheck() {
+		var check = false;
+		(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
+		return check;
+	}
+	
+	// http://www.jonathantneal.com/blog/polyfills-and-prototypes/
+	!String.prototype.trim && (String.prototype.trim = function() {
+		return this.replace(/^\s+|\s+$/g, '');
+	});
+
+	function UISearch( el, options ) {	
+		this.el = el;
+		this.inputEl = el.querySelector( 'form > input.sb-search-input' );
+		this._initEvents();
+	}
+
+	UISearch.prototype = {
+		_initEvents : function() {
+			var self = this,
+				initSearchFn = function( ev ) {
+					ev.stopPropagation();
+					// trim its value
+					self.inputEl.value = self.inputEl.value.trim();
+					
+					if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
+						ev.preventDefault();
+						self.open();
+					}
+					else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
+						ev.preventDefault();
+						self.close();
+					}
+				}
+
+			this.el.addEventListener( 'click', initSearchFn );
+			this.el.addEventListener( 'touchstart', initSearchFn );
+			this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
+			this.inputEl.addEventListener( 'touchstart', function( ev ) { ev.stopPropagation(); } );
+		},
+		open : function() {
+			var self = this;
+			classie.add( this.el, 'sb-search-open' );
+			// focus the input
+			if( !mobilecheck() ) {
+				this.inputEl.focus();
+			}
+			// close the search input if body is clicked
+			var bodyFn = function( ev ) {
+				self.close();
+				this.removeEventListener( 'click', bodyFn );
+				this.removeEventListener( 'touchstart', bodyFn );
+			};
+			document.addEventListener( 'click', bodyFn );
+			document.addEventListener( 'touchstart', bodyFn );
+		},
+		close : function() {
+			if( this.inputEl.value.trim() == 0 )
+			{
+				this.inputEl.blur();
+				classie.remove( this.el, 'sb-search-open' );
+			}
+		}
+	}
+
+	// add to global namespace
+	window.UISearch = UISearch;
+
+} )( window );
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

ecm/Angular/ProteusECM/trunk/src/environments/environment.ts

+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

ecm/Angular/ProteusECM/trunk/src/index.html

+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Local2do</title>
+<base href="./">
+<meta name="viewport"content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
+<link rel="stylesheet" href="assets/css/styles.css">
+<link rel="stylesheet" href="assets/css/foundation.min.css">
+<script src="assets/js/jquery-1.10.2.js"></script>
+<script src="assets/js/modernizr.custom.js"></script>
+<script src="assets/js/classie.js"></script>
+<script src="assets/js/uisearch.js"></script>
+</head>
+<body>
+	<ecm-root>Loading...</ecm-root>
+</body>
+<script type="text/javascript">
+	$(document).ready(function() {
+		new UISearch(document.getElementById('sb-search'));
+	});
+</script>
+</html>
+

ecm/Angular/ProteusECM/trunk/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment.prod';
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

ecm/Angular/ProteusECM/trunk/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.

ecm/Angular/ProteusECM/trunk/src/styles.css

+/* You can add global styles to this file, and also import other style files */
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

ecm/Angular/ProteusECM/trunk/src/tsconfig.app.json

+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "lib": [
+      "es2016",
+      "dom"
+    ],
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

ecm/Angular/ProteusECM/trunk/src/tsconfig.spec.json

+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts"
+  ]
+}

ecm/Angular/ProteusECM/trunk/src/typings.d.ts

+/* SystemJS module definition */
+declare var module: {
+  id: string;
+};

ecm/Angular/ProteusECM/trunk/tsconfig.json

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  }
+}

ecm/Angular/ProteusECM/trunk/tslint.json

+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [true, "rxjs"],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [true, "ignore-params"],
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}

ecm/Angular/ProteusECM/trunk/webpack.config.js

+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ProgressPlugin = require('webpack/lib/ProgressPlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+
+const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack');
+const { BaseHrefWebpackPlugin, GlobCopyWebpackPlugin } = require('@angular/cli/plugins/webpack');
+const { CommonsChunkPlugin } = require('webpack').optimize;
+const { AotPlugin } = require('@ngtools/webpack');
+
+const nodeModules = path.join(process.cwd(), 'node_modules');
+const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
+
+
+
+
+module.exports = {
+  "devtool": "source-map",
+  "resolve": {
+    "extensions": [
+      ".ts",
+      ".js"
+    ],
+    "modules": [
+      "./node_modules"
+    ]
+  },
+  "resolveLoader": {
+    "modules": [
+      "./node_modules"
+    ]
+  },
+  "entry": {
+    "main": [
+      "./src/main.ts"
+    ],
+    "polyfills": [
+      "./src/polyfills.ts"
+    ],
+    "styles": [
+      "./src/assets/css/styles.css",
+      "./src/assets/css/foundation.min.css"
+    ]
+  },
+  "output": {
+    "path": path.join(process.cwd(), "dist"),
+    "filename": "[name].bundle.js",
+    "chunkFilename": "[id].chunk.js"
+  },
+  "module": {
+    "rules": [
+      {
+        "enforce": "pre",
+        "test": /\.js$/,
+        "loader": "source-map-loader",
+        "exclude": [
+          /\/node_modules\//
+        ]
+      },
+      {
+        "test": /\.json$/,
+        "loader": "json-loader"
+      },
+      {
+        "test": /\.html$/,
+        "loader": "raw-loader"
+      },
+      {
+        "test": /\.(eot|svg)$/,
+        "loader": "file-loader?name=[name].[ext]"
+      },
+      {
+        "test": /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
+        "loader": "url-loader?name=[name].[ext]&limit=10000"
+      },
+      {
+    	  test: /\.scss$/,
+    	  exclude: /node_modules/,
+    	  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.css$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader"
+        ]
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.scss$|\.sass$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader",
+          "sass-loader"
+        ]
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.less$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader",
+          "less-loader"
+        ]
+      },
+      {
+        "exclude": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.styl$/,
+        "loaders": [
+          "exports-loader?module.exports.toString()",
+          "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+          "postcss-loader",
+          "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
+        ]
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.css$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.scss$|\.sass$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader",
+    "sass-loader"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.less$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader",
+    "less-loader"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "include": [
+          path.join(process.cwd(), "src/assets/css/styles.css"),
+          path.join(process.cwd(), "src/assets/css/foundation.min.css")
+        ],
+        "test": /\.styl$/,
+        "loaders": ExtractTextPlugin.extract({
+  "use": [
+    "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
+    "postcss-loader",
+    "stylus-loader?{\"sourceMap\":false,\"paths\":[]}"
+  ],
+  "fallback": "style-loader",
+  "publicPath": ""
+})
+      },
+      {
+        "test": /\.ts$/,
+        "loader": "@ngtools/webpack",
+        "exclude": [
+          /\.(spec|e2e)\.ts$/
+        ]
+      }
+    ]
+  },
+  "plugins": [
+    new DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new NoEmitOnErrorsPlugin(),
+    new HtmlWebpackPlugin({
+      "template": "./src/index.html",
+      "filename": "./index.html",
+      "hash": false,
+      "inject": true,
+      "compile": true,
+      "favicon": false,
+      "minify": false,
+      "cache": true,
+      "showErrors": true,
+      "chunks": "all",
+      "excludeChunks": [],
+      "title": "Webpack App",
+      "xhtml": true,
+      "chunksSortMode": function sort(left, right) {
+        let leftIndex = entryPoints.indexOf(left.names[0]);
+        let rightindex = entryPoints.indexOf(right.names[0]);
+        if (leftIndex > rightindex) {
+            return 1;
+        }
+        else if (leftIndex < rightindex) {
+            return -1;
+        }
+        else {
+            return 0;
+        }
+    }
+    }),
+    new BaseHrefWebpackPlugin({}),
+    new CommonsChunkPlugin({
+      "name": "inline",
+      "minChunks": null
+    }),
+    new CommonsChunkPlugin({
+      "name": "vendor",
+      "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
+      "chunks": [
+        "main"
+      ]
+    }),
+    new GlobCopyWebpackPlugin({
+      "patterns": [
+        "assets",
+        "favicon.ico"
+      ],
+      "globOptions": {
+        "cwd": "/Data/Development/workspace/AdminLTE/src",
+        "dot": true,
+        "ignore": "**/.gitkeep"
+      }
+    }),
+    new ProgressPlugin(),
+    new ExtractTextPlugin({
+      "filename": "[name].bundle.css",
+      "disable": true
+    }),
+    new LoaderOptionsPlugin({
+      "sourceMap": false,
+      "options": {
+        "postcss": [
+          autoprefixer()
+        ],
+        "sassLoader": {
+          "sourceMap": false,
+          "includePaths": []
+        },
+        "lessLoader": {
+          "sourceMap": false
+        },
+        "context": ""
+      }
+    }),
+    new AotPlugin({
+      "tsConfigPath": "src/tsconfig.app.json",
+      "mainPath": "main.ts",
+      "hostReplacementPaths": {
+        "environments/environment.ts": "environments/environment.ts"
+      },
+      "exclude": [
+        "**/*.spec.ts",
+        "test.ts"
+      ],
+      "skipCodeGeneration": true
+    })
+  ],
+  "node": {
+    "fs": "empty",
+    "global": true,
+    "crypto": "empty",
+    "tls": "empty",
+    "net": "empty",
+    "process": true,
+    "module": false,
+    "clearImmediate": false,
+    "setImmediate": false
+  }
+};