/* * jQuery Mobile Framework * Copyright (c) jQuery Project * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. * Note: Code is in draft form and is subject to change */ /* themed containers ----------------------------------*/ .ui-bar-a { border: 1px solid #2A2A2A; background: #111111; color: #fff; font-weight: bold; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #3c3c3c, #111111); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3c3c3c),color-stop(1, #111111)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; } .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-a .ui-link-inherit { color: #fff; } .ui-bar-a .ui-link { color: #7cc4e7; font-weight: bold; } .ui-body-a { border: 1px solid #2A2A2A; background: #333; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -moz-linear-gradient(top, #666666, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333333),color-stop(1, #(top, #666666, #333333))); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#333333)')"; } .ui-body-a, .ui-body-a input, .ui-body-a select, .ui-body-a textarea, .ui-body-a button { font-family: Helvetica, Arial, sans-serif; } .ui-body-a .ui-link-inherit { color: #fff; } .ui-body-a .ui-link { color: #2489CE; font-weight: bold; } .ui-bar-b { border: 1px solid #052331; background: #1a4068; color: #fff; font-weight: bold; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #274b71, #21466c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #274b71),color-stop(1, #21466c)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#274b71', EndColorStr='#21466c')"; } .ui-bar-b, .ui-bar-b input, .ui-bar-b select, .ui-bar-b textarea, .ui-bar-b button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-b .ui-link-inherit { color: #fff; } .ui-bar-b .ui-link { color: #7cc4e7; font-weight: bold; } .ui-body-b { border: 1px solid #C6C6C6; background: #e6e7e8; color: #333333; text-shadow: 0 1px 0 #fff; font-weight: normal; background-image: -moz-linear-gradient(top, #d4d5d5, #c6c7c8); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #d4d5d5),color-stop(1, #c6c7c8)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d4d5d5', EndColorStr='#c6c7c8')"; } .ui-body-b, .ui-body-b input, .ui-body-b select, .ui-body-b textarea, .ui-body-b button { font-family: Helvetica, Arial, sans-serif; } .ui-body-b .ui-link-inherit { color: #333333; } .ui-body-b .ui-link { color: #2489CE; font-weight: bold; } .ui-bar-c { border: 1px solid #B3B3B3; background: #dfe0e1; color: #3E3E3E; font-weight: bold; text-shadow: 0 1px 1px #fff; background-image: -moz-linear-gradient(top, #f2f2f2, #e9eaeb); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f2f2f2),color-stop(1, #e9eaeb)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#e9eaeb')"; } .ui-bar-c, .ui-bar-c input, .ui-bar-c select, .ui-bar-c textarea, .ui-bar-c button { font-family: Helvetica, Arial, sans-serif; } .ui-body-c { border: 1px solid #B3B3B3; background: #fff; color: #333333; text-shadow: 0 1px 0 #fff; } .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button { font-family: Helvetica, Arial, sans-serif; } .ui-body-c .ui-link-inherit { color: #333333; } .ui-body-c .ui-link { color: #2489CE; font-weight: bold; } .ui-bar-d { border: 1px solid #F7C942; background: #fadb4e; color: #333; text-shadow: 0 1px 0 #fff; background-image: -moz-linear-gradient(top, #fceda7, #fadb4e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fceda7),color-stop(1, #fadb4e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; } .ui-bar-d, .ui-bar-d input, .ui-bar-d select, .ui-bar-d textarea, .ui-bar-d button { font-family: Helvetica, Arial, sans-serif; } .ui-bar-d .ui-link-inherit { color: #333; } .ui-bar-d .ui-link { color: #2489CE; font-weight: bold; } /* interaction states */ .ui-btn-up-a { border: 1px solid #000; background: #333333; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 1px 1px #000; text-decoration: none; background-image: -moz-linear-gradient(top, #555555, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #555555),color-stop(1, #333333)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')"; } .ui-btn-hover-a { border: 1px solid #000; background: #646464; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; text-decoration: none; background-image: -moz-linear-gradient(top, #848484, #646464); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #848484),color-stop(1, #646464)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#848484', EndColorStr='#646464')"; } .ui-btn-down-a { border: 1px solid #000; background: #3d3d3d; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #333333, #5a5a5a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333333),color-stop(1, #5a5a5a)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')"; } .ui-btn-up-b { border: 1px solid #145072; background: #387bbe; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #145072; text-decoration: none; background-image: -moz-linear-gradient(top, #4e89c5, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4e89c5),color-stop(1, #2567ab)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e89c5', EndColorStr='#2567ab')"; } .ui-btn-hover-b { border: 1px solid #014D68; background: #5397d5; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #81b2e0, #397cbe); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #81b2e0),color-stop(1, #397cbe)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#81b2e0', EndColorStr='#397cbe')"; } .ui-btn-down-b { border: 1px solid #225377; background: #3577bb; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #3577db, #6b9bcd); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3577db),color-stop(1, #6b9bcd)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3577db', EndColorStr='#6b9bcd')"; } .ui-btn-up-c { border: 1px solid #B3B3B3; background: #d0d4d2; font-weight: bold; color: #2F3E46; cursor: pointer; text-shadow: 0 -1px 1px #fff; text-decoration: none; background-image: -moz-linear-gradient(top, #e9ebea, #d0d4d2); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e9ebea),color-stop(1, #d0d4d2)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9ebea', EndColorStr='#d0d4d2')"; } .ui-btn-hover-c { border: 1px solid #808080; background: #fff; font-weight: bold; color: #2F3E46; text-decoration: none; text-shadow: 0 -1px 1px #fff; background-image: -moz-linear-gradient(top, #fdfdfd, #f0f0f0); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fdfdfd),color-stop(1, #f0f0f0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#f0f0f0')"; } .ui-btn-down-c { border: 1px solid #808080; background: #ced0d2; font-weight: bold; color: #2F3E46; text-shadow: none; background-image: -moz-linear-gradient(top, #ced0d2, #e5e6e7); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ced0d2),color-stop(1, #e5e6e7)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ced0d2', EndColorStr='#e5e6e7')"; } .ui-btn-up-d { border: 1px solid #F7C942; background: #fadb4e; font-weight: bold; color: #333; cursor: pointer; text-shadow: 0 -1px 1px #fff; text-decoration: none; text-shadow: 0 1px 0 #fff; background-image: -moz-linear-gradient(top, #fceda7, #fadb4e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fceda7),color-stop(1, #fadb4e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; } .ui-btn-hover-d { border: 1px solid #F7C942; background: #fadb4e; font-weight: bold; color: #333; text-decoration: none; text-shadow: 0 -1px 1px #fff; background-image: -moz-linear-gradient(top, #fcfdb7, #fafb5e); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fcfdb7),color-stop(1, #fafb5e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcfdb7', EndColorStr='#fafb5e')"; } .ui-btn-down-d { border: 1px solid #F7C942; background: #fadb4e; font-weight: bold; color: #333; text-shadow: none; background-image: -moz-linear-gradient(top, #fadb4e, #fceda7); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fadb4e),color-stop(1, #fceda7)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fadb4e', EndColorStr='#fceda7')"; } /*lists*/ .ui-btn-up-e { border: 1px solid #000; background: #333333; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 1px 1px #000; text-decoration: none; background-image: -moz-linear-gradient(top, #555555, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #555555),color-stop(1, #333333)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')"; } .ui-btn-up-e a.ui-link-inherit { color: #fff; } .ui-btn-hover-e { border: 1px solid #000; background: #646464; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; text-decoration: none; background-image: -moz-linear-gradient(top, #848484, #646464); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #848484),color-stop(1, #646464)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#848484', EndColorStr='#646464')"; } .ui-btn-hover-e a.ui-link-inherit { color: #fff; } .ui-btn-down-e { border: 1px solid #000; background: #3d3d3d; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #333333, #5a5a5a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333333),color-stop(1, #5a5a5a)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')"; } .ui-btn-down-e a.ui-link-inherit { color: #fff; } .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e { font-family: Helvetica, Arial, sans-serif; } .ui-btn-up-f { border: 1px solid #ccc; background: #fff; font-weight: bold; color: #2F3E46; text-decoration: none; text-shadow: 0 -1px 1px #fff; background-image: -moz-linear-gradient(top, #fdfdfd, #f0f0f0); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fdfdfd),color-stop(1, #f0f0f0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#f0f0f0')"; } .ui-btn-up-f a.ui-link-inherit { color: #2F3E46; } .ui-btn-hover-f { border: 1px solid #B3B3B3; background: #d0d4d2; font-weight: bold; color: #2F3E46; cursor: pointer; text-shadow: 0 -1px 1px #fff; text-decoration: none; background-image: -moz-linear-gradient(top, #e9ebea, #d0d4d2); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e9ebea),color-stop(1, #d0d4d2)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9ebea', EndColorStr='#d0d4d2')"; } .ui-btn-hover-f a.ui-link-inherit { color: #2F3E46; } .ui-btn-down-f { border: 1px solid #808080; background: #ced0d2; font-weight: bold; color: #2F3E46; text-shadow: none; background-image: -moz-linear-gradient(top, #ced0d2, #e5e6e7); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ced0d2),color-stop(1, #e5e6e7)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ced0d2', EndColorStr='#e5e6e7')"; } .ui-btn-down-f a.ui-link-inherit { color: #2F3E46; } .ui-btn-up-f, .ui-btn-hover-f, .ui-btn-down-f { font-family: Helvetica, Arial, sans-serif; } a.ui-link-inherit { text-decoration: none !important; } .ui-btn-active { border: 1px solid #145072; background: #387bbe; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #145072; text-decoration: none; background-image: -moz-linear-gradient(top, #4e89c5, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4e89c5),color-stop(1, #2567ab)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e89c5', EndColorStr='#2567ab')"; /*-webkit-tap-highlight-color: #387bbe;*/ } .ui-btn-active a.ui-link-inherit { color: #fff; } .ui-focus { outline: none; -moz-box-shadow: 0px 0px 12px #387bbe; -webkit-box-shadow: 0px 0px 12px #387bbe; box-shadow: 0px 0px 12px #387bbe; } .ui-btn-inner { border-top: 1px solid #fff; border-color: rgba(255,255,255,.3); } /* Container Corner radius */ .ui-corner-tl { -moz-border-radius-topleft: .6em; -webkit-border-top-left-radius: .6em; border-top-left-radius: .6em; } .ui-corner-tr { -moz-border-radius-topright: .6em; -webkit-border-top-right-radius: .6em; border-top-right-radius: .6em; } .ui-corner-bl { -moz-border-radius-bottomleft: .6em; -webkit-border-bottom-left-radius: .6em; border-bottom-left-radius: .6em; } .ui-corner-br { -moz-border-radius-bottomright: .6em; -webkit-border-bottom-right-radius: .6em; border-bottom-right-radius: .6em; } .ui-corner-top { -moz-border-radius-topleft: .6em; -webkit-border-top-left-radius: .6em; border-top-left-radius: .6em; -moz-border-radius-topright: .6em; -webkit-border-top-right-radius: .6em; border-top-right-radius: .6em; } .ui-corner-bottom { -moz-border-radius-bottomleft: .6em; -webkit-border-bottom-left-radius: .6em; border-bottom-left-radius: .6em; -moz-border-radius-bottomright: .6em; -webkit-border-bottom-right-radius: .6em; border-bottom-right-radius: .6em; } .ui-corner-right { -moz-border-radius-topright: .6em; -webkit-border-top-right-radius: .6em; border-top-right-radius: .6em; -moz-border-radius-bottomright: .6em; -webkit-border-bottom-right-radius: .6em; border-bottom-right-radius: .6em; } .ui-corner-left { -moz-border-radius-topleft: .6em; -webkit-border-top-left-radius: .6em; border-top-left-radius: .6em; -moz-border-radius-bottomleft: .6em; -webkit-border-bottom-left-radius: .6em; border-bottom-left-radius: .6em; } .ui-corner-all { -moz-border-radius: .6em; -webkit-border-radius: .6em; border-radius: .6em; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; opacity: .3; } /* Icons ----------------------------------*/ .ui-icon { background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; background-color: rgba(0,0,0,.4); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; } /*icons with no bg needed*/ .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on { background-color: transparent; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } /*arrows*/ .ui-icon-arrow-u { background-image: url(../images/icon-arrow-white-up.png); } .ui-icon-arrow-r { background-image: url(../images/icon-arrow-white-right.png); } .ui-icon-arrow-d { background-image: url(../images/icon-arrow-white-down.png); } .ui-icon-arrow-l { background-image: url(../images/icon-arrow-white-left.png); } /*plus minus*/ .ui-icon-plus { background-image: url(../images/icon-plus-white.png); } .ui-icon-minus { background-image: url(../images/icon-minus-white.png); } /*checks,radios*/ .ui-icon-checkbox-off { background-image: url(../images/form-check-off.png); } .ui-icon-checkbox-on { background-image: url(../images/form-check-on.png); } .ui-icon-radio-off { background-image: url(../images/form-radio-off.png); } .ui-icon-radio-on { background-image: url(../images/form-radio-on.png); } /* loading icon */ .ui-icon-loading { background-image: url(../images/ajax-loader.png); width: 40px; height: 40px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .ui-icon-loading-sml { background-image: url(../images/ajax-loader-sml.png); } /* btn Corner radius */ .ui-btn-corner-tl { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius: 1em; border-top-left-radius: 1em; } .ui-btn-corner-tr { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius: 1em; border-top-right-radius: 1em; } .ui-btn-corner-bl { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-left-radius: 1em; } .ui-btn-corner-br { -moz-border-radius-bottomright: 1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-top { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius: 1em; border-top-left-radius: 1em; -moz-border-radius-topright: 1em; -webkit-border-top-right-radius: 1em; border-top-right-radius: 1em; } .ui-btn-corner-bottom { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-left-radius: 1em; -moz-border-radius-bottomright: 1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-right { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius: 1em; border-top-right-radius: 1em; -moz-border-radius-bottomright: 1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-left { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius: 1em; border-top-left-radius: 1em; -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius: 1em; border-bottom-left-radius: 1em; } .ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; -webkit-background-clip: padding-box;} /* Overlays */ .ui-overlay { background: #666; opacity: .5; filter:Alpha(Opacity=50); position: absolute; width: 100%; height: 100%; } .ui-overlay-shadow { -moz-box-shadow: 0px 0px 12px rgba(0,0,0,.6); -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,.6); box-shadow: 0px 0px 12px rgba(0,0,0,.6); } .ui-shadow { -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3); box-shadow: 0px 1px 4px rgba(0,0,0,.3); } .ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow , .ui-bar-c .ui-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.3); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.3); box-shadow: 0px 1px 0 rgba(255,255,255,.3); } .ui-icon-shadow { -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4); -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4); box-shadow: 0px 1px 0 rgba(255,255,255,.4); }