add jo framework

css/aluminum/chrome.css

@@ -0,0 +1,38 @@
+/* simplified CSS3 transitions for less advanced webkits */
+jostack {
+	position: relative;
+	-webkit-transition: opacity .2s ease-out;
+}
+
+jostack > * {
+/*	-webkit-transform-origin: 50% 100% 0; */
+/*	-webkit-transform: rotateZ(0); */
+/*	-webkit-transition: -webkit-transform .4s ease-out; */
+	-webkit-transition: opacity .05s ease;
+
+/*	outline: 1px solid transparent; */
+}
+
+jostack > .next {
+	z-index: 1;
+	position: absolute;
+	top: 0;
+	opacity: 0;
+
+/*	-webkit-transform: translateX(100%); */
+/*	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
+
+/*	outline: 1px solid #000; */
+}
+
+jostack > .prev {
+	z-index: -1;
+	position: absolute;
+	top: 0;
+	opacity: 0;
+
+/*	-webkit-transform: translateX(-100%); */
+/*	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
+
+/*	outline: 1px solid #000; */
+}

css/aluminum/commuter.css

@@ -0,0 +1,106 @@
+jolist {
+}
+
+
+jolistitem:first-child {
+	border: none;
+}
+
+jocard {
+	background: none;
+}
+
+jostack, jostackscroller {
+	position: absolute;
+}
+
+#traffic {
+}
+
+#traffic > * {
+/*
+	background-image: url(shiny.png);
+	background-repeat: repeat-x;
+	background-size: 100% 19px;
+*/
+	background-color: rgba(255, 229, 18, .7);
+	color: #f3f4f5;
+
+	border-bottom: 1px solid rgb(0, 0, 0);
+
+	color: rgb(0, 0, 0);
+}
+
+#traffic .major {
+	background-color: rgba(253, 147, 28, .7);
+}
+
+#traffic .minor {
+	background-color: rgba(10, 220, 60, .7);
+}
+
+#traffic jocaption {
+	color: inherit;
+}
+
+#traffic {
+	width: auto;
+}
+
+#traffic .selected {
+	background-color: rgba(0, 0, 0, .6);
+	color: #fff;
+}
+
+joexpando {
+	padding: 0;
+}
+
+joexpando joexpandotitle {
+	border: none;
+	background: none;
+	padding: 10px 40px 0px 10px;
+	color: inherit;
+	font-weight: bold;
+}
+
+joexpando > * {
+	margin: 0px;
+}
+
+joexpando > *:last-child {
+	margin: 0 10px;
+}
+
+joexpando joexpandotitle joicon {
+	top: 3px;
+	right: -2px;
+	opacity: .2;
+}
+
+joexpando > *:last-child {
+	margin-bottom: 0;
+	padding-bottom: 10px;
+}
+
+joexpando img {
+	display: block;
+	margin: 10px auto 0 auto;
+	-webkit-border-radius: 10px;
+}
+
+.map {
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-opacity: .8;
+	background-color: rgba(0, 0, 0, .8);
+	display: block;
+	margin: 10px;
+	border: 1px solid rgba(0, 0, 0, .8);
+	-webkit-border-radius: 5px;
+	height: 240px;
+}
+
+jocard {
+	padding-bottom: 50px;
+}

css/aluminum/gecko.css

@@ -0,0 +1,15 @@
+jostack, jostackscroller {
+	overflow: hidden;
+	overflow-y: scroll;
+}
+
+jostack > *, jostackscroller > joscroller > * {
+}
+
+jostack > .next, jostackscroller > joscroller > .next {
+	display: none;
+}
+
+jostack > .prev, jostackscroller > joscroller > .prev {
+	display: none;
+}

css/aluminum/webkit.css

@@ -0,0 +1,55 @@
+jostack {
+	-webkit-transition: opacity .3s ease-out;
+	-moz-transition: opacity .3s ease-out;
+	-o-transition: opacity .3s ease-out;
+}
+
+jostack > * {
+	-webkit-transform-origin: 50% 100% 0;
+	-webkit-transform: rotateZ(0);
+	-webkit-transition: -webkit-transform .3s ease-out, outline .3s ease-out;
+
+	-moz-transform-origin: 50% 200% 0;
+	-moz-transform: rotateZ(0) translateZ(0);
+	-moz-transition: -moz-transform .3s ease-out;
+
+	-o-transform-origin: 50% 200% 0;
+	-o-transform: rotateZ(0);
+	-o-transition: -o-transform .3s ease-out;
+
+/*	outline: 1px solid transparent; */
+}
+
+jostack > .next {
+	z-index: -1;
+	position: absolute;
+	top: 0;
+
+	-webkit-transform: rotateZ(45deg) translateY(-10%) translateX(100%);
+	-moz-transform: rotateZ(45deg);
+	-o-transform: rotateZ(45deg);
+	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+
+/*	outline: 1px solid #000; */
+}
+
+jostack > .prev {
+	z-index: 1;
+	position: absolute;
+	top: 0;
+
+	-webkit-transform: rotateZ(-45deg) translateY(10%) translateX(-100%);
+	-moz-transform: rotateZ(-45deg);
+	-o-transform: rotateZ(-45deg);
+	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+
+/*	outline: 1px solid #000; */
+}
+
+* {
+   -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+jobutton {
+	background-repeat: repeat-x;
+}

css/aluminum/webos.css

@@ -0,0 +1,34 @@
+joscroller > * {
+	-webkit-user-drag: element;
+}
+
+jotoolbar joflexrow jobutton.back  {
+	display: none; 
+}
+jotoolbar {
+	padding-top: 10px;
+	padding-bottom: 5px;
+}
+
+jopopup {
+	max-width: inherit;
+	margin: 0;
+	-webkit-border-radius: 20px 20px 0 0;
+	-webkit-transform: translateY(100%);
+	border-bottom: none;
+}
+
+jopopup.show {
+	-webkit-transform: translateY(0);
+}
+
+joshim>joflexcol>*:first-child {
+	-webkit-box-flex: 1;
+}
+joshim>joflexcol>*:last-child {
+	display: none;
+}
+
+jobackbutton.active {
+  display: none;
+}

css/aluminum/widgets.css

@@ -0,0 +1,63 @@
+jooption {
+		display: block;
+		display: -webkit-box;
+		display: -moz-box;
+		display: -o-box;
+		display: box;
+		margin: 0 10px 10px 10px;
+}
+
+jooption>* {
+	-webkit-box-flex: 1;
+	-moz-box-flex: 1;
+	-o-box-flex: 1;
+	box-flex: 1;
+	display: block;
+}
+
+jooption jooptionitem {
+	color: rgba(255, 255, 255, .9);
+	font-weight: normal;
+	text-align: center;
+	margin: 0px;
+	cursor: pointer;
+	outline: none;
+	outline-color: transparent;
+
+	background-color: rgba(0, 0, 0, .6);
+
+	padding: 10px;
+	border: 1px solid rgba(0, 0, 0, .8);
+	border-right: none;
+	background-image: url(shiny.png);
+
+	background-repeat: repeat-x;
+
+	background-position: top left;
+	background-size: 100% 50%;
+}
+jooptionitem:first-child {
+	-webkit-border-radius: 10px 0 0 10px;
+}
+jooptionitem:last-child {
+	-webkit-border-radius: 0 10px 10px 0;
+	border-right: 1px solid rgba(0, 0, 0, .8);
+}
+jooptionitem.selected {
+	background-color: rgba(0, 0, 209, .6);
+	background-image: none;
+	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .8);
+}
+
+jooptionitem:hover, joButton:focus {
+	background-color: rgba(0, 64, 255, .4);
+}
+jooption.disabled {
+	opacity: .4;
+	color: rgba(255, 255, 255, .4);
+	cursor: default;
+}
+jooption.disabled jooptionitem:hover {
+	background-color: inherit;
+	cursor: default;
+}

css/browser.css

@@ -0,0 +1,47 @@
+joscroller {
+  position: absolute;
+  display: block;
+  height: auto;
+  width: auto;
+  top: 0; left: 0; bottom: 0; right: 0;
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+  -webkit-transform: none;
+  -moz-transform: none;
+  -o-transform: none;
+  -ms-transform: none;
+}
+joscroller > * {
+  position: relative;
+  top: auto;
+}
+.flick {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+}
+.flickback {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+}
+.flickfast {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+}
+
+jocard {
+	padding-bottom: 0;
+}
+
+jocontainer {
+	height: inherit;
+}
+
+joscroller {
+	display: block;
+	height: 100%;
+}
+