1
0
mirror of https://github.com/moparisthebest/app-UI synced 2024-12-21 23:18:52 -05:00

add cross-browser CSS prefixes + cleaning + other cross-platform fixes

This commit is contained in:
Contra 2012-09-19 17:15:36 -07:00
parent ebdf914795
commit 2e7fea8531
12 changed files with 750 additions and 582 deletions

View File

@ -18,59 +18,65 @@
<style>
* {
font-family: Arial, sans-serif;
}
#detail {
padding:10px;
}
.moviePoster {
float:right;
width:120px;
height:178px;
overflow:hidden;
margin:10px;
padding:2px;
border:1px solid #999999;
}
.listSelected {
background-color:#424242;
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
background-image:-o-linear-gradient(top, #0069d6, #999da9);
color: #FFF;
font-weight:bold;
}
ul,li {
padding:0;
margin:0;
border:0;
}
.viewNavigator_content li {
padding:0 10px;
border-bottom:1px solid #ccc;
height:40px; line-height:40px;
font-weight:normal;
cursor:pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
* {
font-family: Arial, sans-serif;
}
#detail {
padding: 10px;
}
.moviePoster {
float: right;
width: 120px;
height: 178px;
overflow: hidden;
margin: 10px;
padding: 2px;
border: 1px solid #999999;
}
.listSelected {
background-color: #424242;
background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
background-image: -moz-linear-gradient(top, #0069d6, #999da9);
background-image: -o-linear-gradient(top, #0069d6, #999da9);
background-image: -ms-linear-gradient(top, #0069d6, #999da9);
background-image: linear-gradient(top, #0069d6, #999da9);
-image color: #FFF;
font-weight: bold;
}
ul,li {
padding: 0;
margin: 0;
border: 0;
}
.viewNavigator_content li {
padding: 0 10px;
border-bottom: 1px solid #ccc;
height: 40px;
line-height: 40px;
font-weight: normal;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height: auto;
}
#detail li {
white-space: normal;
overflow: visible;
height:auto;
}
</style>

View File

@ -15,24 +15,25 @@
<style>
#leftDiv {
position:absolute;
top:0px;
bottom:0px;
left:0px;
width:50%;
overflow:hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 50%;
overflow: hidden;
}
#rightDiv {
position:absolute;
top:0px;
bottom:0px;
left:50%;
right:0px;
width:50%;
border-left:1px solid red;
overflow:hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 50%;
right: 0px;
width: 50%;
border-left: 1px solid red;
overflow: hidden;
}
</style>
<script>

View File

@ -21,64 +21,70 @@
<style>
* {
font-family: Arial, sans-serif;
}
#detail {
padding:10px;
}
#defaultView {
text-align:center;
padding-top:100px;
}
.moviePoster {
float:right;
width:120px;
height:178px;
overflow:hidden;
margin:10px;
padding:2px;
border:1px solid #999999;
}
.listSelected {
background-color:#424242;
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
background-image:-o-linear-gradient(top, #0069d6, #999da9);
color: #FFF;
font-weight:bold;
}
ul,li {
padding:0;
margin:0;
border:0;
}
.viewNavigator_contentHolder li {
padding:0 10px;
border-bottom:1px solid #ccc;
height:40px; line-height:40px;
font-weight:normal;
cursor:pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
* {
font-family: Arial, sans-serif;
}
#detail {
padding: 10px;
}
#defaultView {
text-align: center;
padding-top: 100px;
}
.moviePoster {
float: right;
width: 120px;
height: 178px;
overflow: hidden;
margin: 10px;
padding: 2px;
border: 1px solid #999999;
}
.listSelected {
background-color: #424242;
background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
background-image: -moz-linear-gradient(top, #0069d6, #999da9);
background-image: -o-linear-gradient(top, #0069d6, #999da9);
background-image: -ms-linear-gradient(top, #0069d6, #999da9);
background-image: linear-gradient(top, #0069d6, #999da9);
-image color: #FFF;
font-weight: bold;
}
ul,li {
padding: 0;
margin: 0;
border: 0;
}
.viewNavigator_contentHolder li {
padding: 0 10px;
border-bottom: 1px solid #ccc;
height: 40px;
line-height: 40px;
font-weight: normal;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height: auto;
}
#detail li {
white-space: normal;
overflow: visible;
height:auto;
}
</style>

View File

@ -16,96 +16,115 @@
body {
padding:0;
margin:0;
background:#fff;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
color:#333;
font-family:helvetica;
font-size:12px;
text-align:center;
padding: 0;
margin: 0;
background: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
color: #333;
font-family: helvetica;
font-size: 12px;
text-align: center;
}
h1 {
font-size:2em;
padding:20px 0;
margin:0;
font-size: 2em;
padding: 20px 0;
margin: 0;
}
#swipeview {
width:100%;
min-width:320px;
height:150px;
background:#ddd;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
#swipeview {
width: 100%;
min-width: 320px;
height: 150px;
background: #ddd;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
#nav {
position:absolute;
z-index:100;
top:8px;
width:200px;
height:20px;
left:50%;
background:rgba(0,0,0,0.75);
padding:0;
margin:0 0 0 -100px;
-webkit-border-radius:10px;
position: absolute;
z-index: 100;
top: 8px;
width: 200px;
height: 20px;
left: 50%;
background: rgba(0,0,0,0.75);
padding: 0;
margin: 0 0 0 -100px;
border-radius: 10px;
}
#nav li {
display:block;
float:left;
width:14px;
height:14px; line-height:14px;
-webkit-border-radius:7px;
background:rgba(255,255,255,0.1);
overflow:hidden;
padding:0;
margin:3px 11px 0 0;
text-align:center;
display: block;
float: left;
width: 14px;
height: 14px;
line-height: 14px;
border-radius: 7px;
background: rgba(255,255,255,0.1);
overflow: hidden;
padding: 0;
margin: 3px 11px 0 0;
text-align: center;
}
#nav li#prev {
margin-left:5px;
background:transparent;
margin-left: 5px;
background: transparent;
}
#nav li#next {
margin-right:0;
background:transparent;
margin-right: 0;
background: transparent;
}
#nav li.selected {
background:rgba(255,255,255,0.4);
background: rgba(255,255,255,0.4);
}
#swipeview-slider > div {
position:relative;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center;
overflow:hidden;
position: relative;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow: hidden;
}
#swipeview-slider span {
-webkit-box-sizing:border-box;
display:block;
text-align:center;
font-size:1.4em;
padding:0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
text-align: center;
font-size: 1.4em;
padding: 0 20px;
}
p {
padding:20px;
margin:0;
font-size:1.4em;
padding: 20px;
margin: 0;
font-size: 1.4em;
}
</style>
<script>

View File

@ -1,90 +1,107 @@
body {
padding:0;
margin:0;
background:#fff;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
color:#333;
font-family:helvetica;
font-size:12px;
text-align:center;
padding: 0;
margin: 0;
background: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
color: #333;
font-family: helvetica;
font-size: 12px;
text-align: center;
}
h1 {
font-size:2em;
padding:20px 0;
margin:0;
font-size: 2em;
padding: 20px 0;
margin: 0;
}
#wrapper {
width:100%;
min-width:320px;
height:150px;
background:#ddd;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
width: 100%;
min-width: 320px;
height: 150px;
background: #ddd;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
#nav {
position:absolute;
z-index:100;
top:8px;
width:200px;
height:20px;
left:50%;
background:rgba(0,0,0,0.75);
padding:0;
margin:0 0 0 -100px;
-webkit-border-radius:10px;
position: absolute;
z-index: 100;
top: 8px;
width: 200px;
height: 20px;
left: 50%;
background: rgba(0,0,0,0.75);
padding: 0;
margin: 0 0 0 -100px;
border-radius: 10px;
}
#nav li {
display:block;
float:left;
width:14px;
height:14px; line-height:14px;
-webkit-border-radius:7px;
background:rgba(255,255,255,0.1);
overflow:hidden;
padding:0;
margin:3px 11px 0 0;
text-align:center;
display: block;
float: left;
width: 14px;
height: 14px;
line-height: 14px;
border-radius: 7px;
background: rgba(255,255,255,0.1);
overflow: hidden;
padding: 0;
margin: 3px 11px 0 0;
text-align: center;
}
#nav li#prev {
margin-left:5px;
background:transparent;
margin-left: 5px;
background: transparent;
}
#nav li#next {
margin-right:0;
background:transparent;
margin-right: 0;
background: transparent;
}
#nav li.selected {
background:rgba(255,255,255,0.4);
background: rgba(255,255,255,0.4);
}
#swipeview-slider > div {
position:relative;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center;
overflow:hidden;
position: relative;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow: hidden;
}
#swipeview-slider span {
-webkit-box-sizing:border-box;
display:block;
text-align:center;
font-size:1.4em;
padding:0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
text-align: center;
font-size: 1.4em;
padding: 0 20px;
}
p {
padding:20px;
margin:0;
font-size:1.4em;
padding: 20px;
margin: 0;
font-size: 1.4em;
}

View File

@ -58,30 +58,31 @@
<style>
body {
background: #ccc;
}
body {
background: #ccc;
}
#sidebar {
width:400px;
height:100%;
padding:10px;
background-image:url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
background-color: red;
padding:10px;
font-size:36pt;
}
#sidebar {
width: 400px;
height: 100%;
padding: 10px;
background-image: url('https://encrypted-tbn3.google.com/images?q=tbn: ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
background-color: red;
padding: 10px;
font-size: 36pt;
}
#body {
background-color: #555;
padding:10px;
text-align:center;
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
}
#body {
background-color: #555;
padding: 10px;
text-align: center;
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn: ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
}
a {
color: white;
}
a{
color:white;
}
</style>
</head>

View File

@ -20,28 +20,28 @@
<style>
body {
background: #eee;
padding:0px;
overflow:hidden;
border-left:1px solid black;
}
#sidebar {
width:420px;
padding:0px;
overflow:hidden;
height:100%;
}
#sidebar .viewNavigator_header {
background: #333;
}
#sidebar .viewNavigator_contentHolder,
#sidebar .viewNavigator_content {
background: #bbb;
}
body {
background: #eee;
padding: 0px;
overflow: hidden;
border-left: 1px solid black;
}
#sidebar {
width: 420px;
padding: 0px;
overflow: hidden;
height: 100%;
}
#sidebar .viewNavigator_header {
background: #333;
}
#sidebar .viewNavigator_contentHolder,#sidebar .viewNavigator_content {
background: #bbb;
}
</style>

View File

@ -17,106 +17,106 @@
<style>
body,ul,li,header,nav,aside,section,article,p,a {
padding:0;
margin:0;
border:0;
}
body {
font: normal 1.25em Helvetica;
background: #333;
}
object{
-webkit-overflow-scrolling: touch;
}
#iframeWrapper {
width: 100%;
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
iframe {
width: 100%;
min-height:100%;
background-color: rgba(0,0,0,0);
border: none;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.viewNavigator_header {
background-color: #333;
background: url("./assets/header_bg_wood.png") repeat;
font: bold 1em Helvetica;
}
.viewNavigator_content {
border-top: 2px solid #666;
background-color: #333;
}
.viewNavigator_contentHolder {
background-color: #333;
}
.viewNavigator_header_title {
max-width:100%;
text-shadow: 1px 2px #777;
}
.headerButton {
-webkit-box-shadow:inset 0px 1px 0px 0px #999;
box-shadow:inset 0px 1px 0px 0px #999;
background-color:rgba(128,128,128,0.65);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #777;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #736d73;
padding: 6px;
padding-top:5px;
padding-bottom:4px;
}.headerButton:active {
position:relative;
top:1px;
}
padding: 0;
margin: 0;
border: 0;
}
body {
font: normal 1.25em Helvetica;
background: #333;
}
object {
-webkit-overflow-scrolling: touch;
}
#iframeWrapper {
width: 100%;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
iframe {
width: 100%;
min-height: 100%;
background-color: rgba(0,0,0,0);
border: none;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.viewNavigator_header {
background-color: #333;
background: url("./assets/header_bg_wood.png") repeat;
font: bold 1em Helvetica;
}
.viewNavigator_content {
border-top: 2px solid #666;
background-color: #333;
}
.viewNavigator_contentHolder {
background-color: #333;
}
.viewNavigator_header_title {
max-width: 100%;
text-shadow: 1px 2px #777;
}
.headerButton {
-webkit-box-shadow: inset 0px 1px 0px 0px #999;
box-shadow: inset 0px 1px 0px 0px #999;
background-color: rgba(128,128,128,0.65);
border-radius: 6px;
border: 1px solid #777;
display: inline-block;
color: #ffffff;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 1px 1px 0px #736d73;
padding: 6px;
padding-top: 5px;
padding-bottom: 4px;
}
.headerButton:active {
position: relative;
top: 1px;
}
.listItem {
padding: 0 10px;
background-color: #222;
color: white;
border-bottom: 1px solid #888;
border-bottom: 1px solid #444;
height: 40px;
line-height: 40px;
font-weight: bold;
cursor: pointer;
text-shadow: 1px 2px #777;
display: block;
text-decoration: none;
}
.oddRow {
background-color: #333;
}
.listSelected {
background: #015FE6;
background-color: #015FE6;
color: #FFF;
font-weight: bold;
}
.listItem {
padding:0 10px;
background-color: #222;
color:white;
border-bottom:1px solid #888;
border-bottom:1px solid #444;
height:40px; line-height:40px;
font-weight:bold;
cursor:pointer;
text-shadow: 1px 2px #777;
display:block;
text-decoration:none;
}
.oddRow {
background-color: #333;
}
.listSelected {
background:#015FE6;
background-color:#015FE6;
color: #FFF;
font-weight:bold;
}
</style>

File diff suppressed because one or more lines are too long

View File

@ -11,58 +11,72 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input,
textarea {
input,textarea {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
body {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0px;
margin: 0px;
background-color:#555;
overflow:hidden;
background-color: #555;
overflow: hidden;
}
.slidingview_sidebar {
position:absolute;
width:250px;
left:0px;
top:0px;
bottom:0px;
transform: translate3d(0,0,0);
position: absolute;
width: 250px;
left: 0px;
top: 0px;
bottom: 0px;
-webkit-transform: translate3d(0,0,0);
overflow:hidden;
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
overflow: hidden;
}
.slidingview_body {
position:absolute;
left:0px;
top:0px;
bottom:0px;
transform: translate3d(0,0,0);
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
-webkit-transform: translate3d(0,0,0);
overflow:hidden;
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
overflow: hidden;
}
.slidingview_wrapper {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0px;
margin: 0px;
}
}

View File

@ -12,72 +12,80 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
.splitViewNavigator_root {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.splitViewNavigator_sidebar {
position:absolute;
overflow:hidden;
position: absolute;
overflow: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-right:1px solid #999;
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border-right: 1px solid #999;
}
.splitViewNavigator_body {
position:absolute;
background:white;
overflow:hidden;
position: absolute;
background: white;
overflow: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.content_overlay_visible {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.content_overlay_hidden {
position:absolute;
top:-1px;
left:-1px;
width:0px;
height:0px;
display:none;
position: absolute;
top: -1px;
left: -1px;
width: 0px;
height: 0px;
display: none;
}
.sidebar_portrait {
top:0px;
bottom:0px;
left:-240px;
width:240px;
top: 0px;
bottom: 0px;
left: -240px;
width: 240px;
}
.body_portrait {
top:0px;
bottom:0px;
right:0px;
left:0px;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.sidebar_landscape {
top:0px;
bottom:0px;
left:0px;
width:240px;
top: 0px;
bottom: 0px;
left: 0px;
width: 240px;
}
.body_landscape {
top:0px;
bottom:0px;
right:0px;
left:240px;
}
top: 0px;
bottom: 0px;
right: 0px;
left: 240px;
}

View File

@ -12,193 +12,208 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input,
textarea {
input,textarea {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
}
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
body {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0px;
margin: 0px;
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.viewNavigator_root {
width:100%;
height:100%;
background-color:666666;
overflow:hidden;
width: 100%;
height: 100%;
background-color: 666666;
overflow: hidden;
}
.viewNavigator_header {
position:absolute;
width:100%;
height:46px;
overflow:hide;
padding:0px;
position: absolute;
width: 100%;
height: 46px;
overflow: hide;
padding: 0px;
background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
backface-visibility: hidden;
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.viewNavigator_header_backlink {
position:absolute;
top:0px;
left:0px;
z-index:2;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
max-width:30%;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
max-width: 30%;
}
.viewNavigator_header_title {
position:absolute;
top:12px;
left:0%;
right:0%;
margin-left:auto;
margin-right:auto;
text-align:center;
position: absolute;
top: 12px;
left: 0%;
right: 0%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-weight: bold;
color: #FFFFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
max-width:48%;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
max-width: 48%;
}
.viewNavigator_headerContent {
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
position:absolute;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
position: absolute;
}
.viewNavigator_content {
position:absolute;
top:46px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
backface-visibility: hidden;
position: absolute;
top: 46px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* ANDROID BUG WORKAROUND */
.viewNavigator_content select {
overflow:auto;
position:relative;
backface-visibility: auto;
overflow: auto;
position: relative;
backface-visibility: auto;
-webkit-backface-visibility: auto;
}
.viewNavigator_contentHolder > div:first-child {
min-height:100%;
border-bottom:1px solid #444;
border-top:1px solid #444;
min-height: 100%;
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}
.viewNavigator_content div {
backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-backface-visibility: visible;
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.viewNavigator_contentHolder {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:white;
overflow:auto;
padding:0px;
margin:0px;
overflow: hidden;
-webkit-overflow-scrolling : touch;
min-width:100%;
min-height:100%
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: white;
overflow: auto;
padding: 0px;
margin: 0px;
overflow: hidden;
-webkit-overflow-scrolling: touch;
min-width: 100%;
min-height: 100% backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.viewNavigator_backface {
/* backface-visibility: hidden;
-webkit-backface-visibility: hidden;
*/
/* backface-visibility: hidden;
-webkit-backface-visibility: hidden;
*/
}
.viewNavigator_backButtonPosition {
position:absolute;
position: absolute;
left: 5px;
top: .6em;
}
.viewNavigator_backButton
{
cursor:pointer;
.viewNavigator_backButton {
cursor: pointer;
display: inline-block;
white-space: nowrap;
background-color: #ccc;
border-radius: .2em;
padding: 4px 10px;
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.viewNavigator_backButton:active
{
.viewNavigator_backButton:active {
background-color: #ddd;
}