jQuery UI iOS6移动主题特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery UI iOS6移动主题特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI iOS6移动主题</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 	 
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<script src="js/jquery-1.7.1.min.js"></script>
<script>
// all dialog buttons should close their parent dialog
$(".ui-dialog button").live("click", function() {		
$("[data-role='dialog']").dialog("close");		
});
$(document).on("mobileinit", function(){
$.mobile.defaultPageTransition = "slide";
});
</script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<style>
#footerTabs {
background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
}
.ui-listview sup {
font-size: 0.6em;
color: #cc0000;
}
</style>

</head> 
<body> 

<div data-role="page"> 

<div data-role="header" data-position="fixed"> 
<h1>Page Header</h1>
</div><!-- /header --> 

<div data-role="content"> 

<ul data-role="listview" data-inset="true"> 
<li><a href="#headers">Header Bars</a></li> 
<li><a href="#headerButtons">Header Buttons</a></li> 
<li><a href="#footerTabs">Footer Tabs</a></li> 
<li><a href="#formElements">Form Elements</a></li> 
<li><a href="#listViews">List Views</a></li> 
<li><a href="#dialogs">Dialogs</a></li> 
<li><a href="#popups">Popups <sup>New!</sup></a></li> 
</ul> 

<br />

<br />

</div><!-- /ui-body wrapper -->	
</div><!-- /page --> 

<div data-role="page" id="formElements">

<div data-role="header" data-position="fixed">
<h1>Form Elements</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header --> 

<div data-role="content"> 

<div data-role="fieldcontain">

<label>Some Fields and Inputs:</label>

<br /><br />

<input type="range" />

<br /><br />

<input type="search" />

<br /><br />

<input type="email" />

<br />

</div>

<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">OFF</option>
<option value="on">ON</option>
</select> 
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>

<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
<label for="radio-choice-2">Dog</label>

<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
<label for="radio-choice-3">Hamster</label>
</fieldset>
</div>

<a disabled="disabled" data-role="button" class="ui-btn-plain">Inactive &lt;a&gt;</a>

<a data-role="button" class="ui-btn-plain">Active &lt;a&gt;</a>

<button disabled="disabled" class="ui-btn-plain">Inactive &lt;button&gt;</button>

<button class="ui-btn-plain">Active &lt;button&gt;</button>

<p><small>Does the above look funny? Consider it a bug in jQuery mobile where the classes from the underling &lt;button&gt; are not being attached to the new DOM</small></p>

</div>

</div>

<div data-role="page" id="listViews">

<div data-role="header" data-position="fixed">
<h1>List Example</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header --> 

<div data-role="content"> 

<ul data-role="listview"> 
<li data-role="list-divider">Divider</li>
<li><a href="#">Anatomy of a page</a></li> 
<li><a href="#">Page transitions</a></li> 
<li><a href="#">Dialogs</a></li> 
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
<li><a href="#">Link format examples</a></li> 
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li> 
<li><a href="#">Page transitions</a></li> 
<li><a href="#">Dialogs</a></li> 
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
<li><a href="#">Link format examples</a></li> 
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li> 
<li><a href="#">Page transitions</a></li> 
<li><a href="#">Dialogs</a></li> 
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
<li><a href="#">Link format examples</a></li> 
<li><a href="#">Theming pages</a></li>
<li><a href="#">Anatomy of a page</a></li> 
<li><a href="#">Page transitions</a></li> 
<li><a href="#">Dialogs</a></li> 
<li><a href="#">Navigation: Ajax, hashes &amp; history</a></li> 
<li><a href="#">Link format examples</a></li> 
<li><a href="#">Theming pages</a></li>
</ul> 

</div>

</div>

<div data-role="page" id="headers"> 

<div data-role="header" data-position="fixed">
<h1>Headers</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</a>
</div><!-- /header --> 

<div data-role="content"> 

<p>
The default bar is the blue, but you can also use the black by specifying <em>data-theme="b"</em>.
</p>

<div data-role="header" data-position="inline">
<a href="#" data-rel="back" data-theme="a">Back</a>
<h1>Blue Bar</h1>
<a href="#" data-theme="a">Button</a>
</div>

<br />

<div data-role="header" data-theme="b" data-position="inline">
<a href="#" data-rel="back" data-theme="b">Back</a>
<h1>Black Bar</h1>
<a href="#" data-theme="b">Button</a>
</div>

</div>

</div>

<div data-role="page" id="headerButtons"> 

<div data-role="header" data-position="fixed">
<h1>Header Buttons</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header --> 

<div data-role="content"> 

<p>
The various styled buttons you can place in a header:
</p>

<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="a">Edit</a>
</div>

<br />

<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="b">Black</a>
</div>

<br />

<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="c">Delete</a>
</div>

<br />

<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-theme="d">Done</a>
</div>

<br />

<div data-role="header" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-rel="back" data-icon="arrow-l" data-theme="a">Back</a>
</div>

<br />

<div data-role="header" data-theme="b" data-position="inline">
<h1>Page Title</h1>
<a href="#" data-rel="back" data-icon="arrow-l" data-theme="b">Back</a>
</div>

</div>

</div>

<div data-role="page" id="allDialogExample"> 

<div data-role="content"> 
<button data-theme="e">Button Style E</button>
<button data-theme="d">Button Style D</button>
<button data-theme="c">Button Style C</button>
<button data-theme="b">Button Style B</button>
<button data-theme="a">Button Style A</button>
</div>

</div>

<div data-role="page" id="deleteDialogExample"> 

<div data-role="content"> 
<button data-theme="e">Delete Draft</button>
<button data-theme="a">Save Draft</button>
<button data-theme="b">Cancel</button>
</div>

</div>

<div data-role="page" id="postDialogExample"> 

<div data-role="content"> 
<button data-theme="a">Post to Twitter</button>
<button data-theme="a">Post to Facebook</button>
<button data-theme="a">Post to YouTube</button>
<button data-theme="b">Cancel</button>
</div>

</div>

<div data-role="page" id="dialogs">

<div data-role="header" data-position="fixed">
<h1>Dialogs</h1>
<a href="#" data-rel="back" data-theme="a">Back</a>
</div><!-- /header --> 

<div data-role="content"> 

<a href="#allDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">All the options</a>

<a href="#deleteDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Delete Example</a>

<a href="#postDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Post Something</a>

</div>

</div>

<div data-role="page" id="footerTabs" data-theme="b">

<div data-role="header" data-position="fixed">
<h1>Footer Tabs</h1>
<a href="#" data-rel="back">Back</a>
</div><!-- /header --> 



<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" id="tabA" data-icon="custom">One</a></li>
<li><a href="#" id="tabB" data-icon="custom" class="ui-btn-active">Two</a></li>
<li><a href="#" id="tabC" data-icon="custom">Three</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->

</div>

<div data-role="page" id="popups" data-theme="b">

<div data-role="header" data-position="fixed">
<h1>Popups</h1>
<a href="#" data-rel="back">Back</a>
</div><!-- /header --> 

<div data-role="content"> 

<a href="#popupBasic" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup</a>

<a href="#popupOverlay" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup with Overlay</a>

<a href="#popupiOS" data-rel="popup" data-role="button" class="ui-btn-plain">iOS Style Popup</a>

<div data-role="popup" data-transition="fade" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>

<div data-role="popup" data-transition="fade" data-overlay-theme="a" id="popupOverlay">
<p>This is a completely basic popup, but with an overlay<p>
</div>

<div data-role="popup" data-transition="fade" data-theme="a" data-position-to="window" id="popupiOS">
<img src="images/tick.png">
<p>Saved<p>
</div>

</div>

</div>
</body> 
</html>

CSS代码(styles.css):

/* === PAGE BACKGROUND AND GENERICS === */
.ui-page,.ui-mobile-viewport{background:url(images/tiling_stripes.gif);}
.ui-content{color:#4c596e;}
.ui-page-header-fullscreen .ui-content,.ui-page-footer-fullscreen .ui-content{padding-top:39px;/* fix for fixed toolbar mode */
}
/* === IN PAGE BUTTON === */
.ui-btn.ui-btn-plain{padding:0;background:#FFF;border:1px solid #bbbbbb;border-radius:10px;box-shadow:none;background-clip:padding-box;}
.ui-btn.ui-btn-plain .ui-btn-inner{background:#FFF;box-shadow:none;border-radius:10px;}
.ui-btn.ui-btn-plain .ui-btn-inner .ui-collapsible-heading-toggle{background:none;padding:15px 0;}
.ui-btn.ui-btn-plain .ui-btn-text{font-weight:bold;font-size:17px;color:#000;text-shadow:none;}
.ui-btn.ui-btn-plain.ui-disabled{opacity:1;}
.ui-btn.ui-btn-plain[disabled]{cursor:default;}
.ui-btn.ui-btn-plain[disabled].ui-btn-down-c .ui-btn-inner{background:#FFF;}
.ui-btn.ui-btn-plain[disabled] span,.ui-btn.ui-disabled span,.ui-btn.ui-btn-plain[disabled].ui-btn-down-c span,.ui-btn.ui-disabled.ui-btn-down-c span{color:#aaaaaa;}
/* button active */
.ui-btn.ui-btn-plain.ui-btn-down-c .ui-btn-inner,.ui-btn.ui-btn-plain.ui-btn-active .ui-btn-inner{background:#008bf5;/* Old browsers */
background:-moz-linear-gradient(top,#008bf5 0%,#0f5be6 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#008bf5),color-stop(100%,#0f5be6));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#008bf5 0%,#0f5be6 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#008bf5 0%,#0f5be6 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#008bf5 0%,#0f5be6 100%);/* IE10+ */
background:linear-gradient(to bottom,#008bf5 0%,#0f5be6 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bf5',endColorstr='#0f5be6',GradientType=0 );/* IE6-9 */
}
.ui-btn.ui-btn-plain.ui-btn-down-c span{color:#FFF;text-shadow:none;}
/* === HEADER BARS - DEFAULT AND BLACK === */
.ui-header{border:0 none;padding:1px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 -1px 0 rgba(0,0,0,0.6) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 -1px 0 rgba(0,0,0,0.6) inset;box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 -1px 0 rgba(0,0,0,0.6) inset;background:#b0bccd;/* Old browsers */
background:-moz-linear-gradient(top,#b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#b0bccd),color-stop(49%,#889bb3),color-stop(50%,#8094ae),color-stop(100%,#6d84a2));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%);/* IE10+ */
background:linear-gradient(top,#b0bccd 0%,#889bb3 49%,#8094ae 50%,#6d84a2 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd',endColorstr='#6d84a2',GradientType=0 );/* IE6-9 */
}
.ui-header.ui-bar-b{-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 -1px 0 rgba(0,0,0,0.6) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 -1px 0 rgba(0,0,0,0.6) inset;box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 -1px 0 rgba(0,0,0,0.6) inset;background:#717172;/* Old browsers */
background:-moz-linear-gradient(top,#717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#717172),color-stop(50%,#3a3a3a),color-stop(50%,#0d0d0f),color-stop(100%,#0f0f10));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%);/* IE10+ */
background:linear-gradient(top,#717172 0%,#3a3a3a 50%,#0d0d0f 50%,#0f0f10 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#717172',endColorstr='#0f0f10',GradientType=0 );/* IE6-9 */
}
.ui-header .ui-btn-inner{border:0 none;}
.ui-header .ui-title{text-shadow:0 -1px 0 #4c596a !important;}
/* === LIST VIEWS === */
.ui-listview{-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5);-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5);box-shadow:0 1px 0 rgba(255,255,255,0.5);}
.ui-listview,.ui-listview li{border-color:#bbbbbb;background:#ffffff;}
.ui-listview .ui-btn-down-c{background:#106ce5;}
.ui-listview .ui-btn-down-c a{color:#FFF;text-shadow:none;}
.ui-listview .ui-icon-arrow-r{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.ui-listview .ui-li-divider{padding-top:0.4em;padding-bottom:0.4em;text-shadow:0 1px 0 rgba(0,0,0,0.5);border-top:#717d85;border-bottom:#989ea4;-webkit-box-shadow:0 2px 0 rgba(255,255,255,0.4) inset;-moz-box-shadow:0 2px 0 rgba(255,255,255,0.4) inset;box-shadow:0 2px 0 rgba(255,255,255,0.4) inset;background:#6d8291;/* Old browsers */
background:-moz-linear-gradient(top,#6d8291 0%,#8ea0ad 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6d8291),color-stop(100%,#8ea0ad));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#6d8291 0%,#8ea0ad 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#6d8291 0%,#8ea0ad 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#6d8291 0%,#8ea0ad 100%);/* IE10+ */
background:linear-gradient(top,#6d8291 0%,#8ea0ad 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d8291',endColorstr='#8ea0ad',GradientType=0 );/* IE6-9 */
}
.ui-listview .ui-icon-arrow-r{background:transparent url(images/arrow_right.png) center center no-repeat !important;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
/* === SLIDER STYLES === */
div.ui-slider{height:9px;border:1px solid #929292;background:#bababa;/* Old browsers */
background:-moz-linear-gradient(top,#bababa 0%,#f8f8f8 50%,#f8f8f8 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bababa),color-stop(50%,#f8f8f8),color-stop(100%,#f8f8f8));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#bababa 0%,#f8f8f8 50%,#f8f8f8 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#bababa 0%,#f8f8f8 50%,#f8f8f8 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#bababa 0%,#f8f8f8 50%,#f8f8f8 100%);/* IE10+ */
background:linear-gradient(top,#bababa 0%,#f8f8f8 50%,#f8f8f8 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa',endColorstr='#f8f8f8',GradientType=0 );/* IE6-9 */
}
a.ui-slider-handle{width:20px;height:20px;border:1px solid #bbbbbb;margin-top:-12px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.75),0 2px 0 rgba(255,255,255,0.75) inset;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.75),0 2px 0 rgba(255,255,255,0.75) inset;box-shadow:0 1px 3px rgba(0,0,0,0.75),0 2px 0 rgba(255,255,255,0.75) inset;background:#fafafa;/* Old browsers */
background:-moz-linear-gradient(top,#fafafa 100%,#d4d4d4 0%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(100%,#fafafa),color-stop(0%,#d4d4d4));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#fafafa 100%,#d4d4d4 0%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#fafafa 100%,#d4d4d4 0%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#fafafa 100%,#d4d4d4 0%);/* IE10+ */
background:linear-gradient(top,#fafafa 100%,#d4d4d4 0%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4',endColorstr='#fafafa',GradientType=0 );/* IE6-9 */
}
input.ui-slider-input{display:none !important;}
/* === SEARCH FIELD === */
.ui-input-search{height:31px;background-color:#FFF;border:1px solid #bbbbbb;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;}
/* === TEXT FIELD === */
input.ui-input-text{height:31px;background-color:#FFF;border:1px solid #bbbbbb;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;box-shadow:0 1px 3px rgba(0,0,0,0.3) inset;}
.ui-icon-searchfield .ui-input-text{height:auto;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
/* === BUTTON STYLES - SURROUNDS DIALOG BUTTONS === */
div.ui-btn{padding:3px;-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px;background:#282a2f;/* Old browsers */
background:-moz-linear-gradient(top,#282a2f 0%,#3f434b 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#282a2f),color-stop(100%,#3f434b));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#282a2f 0%,#3f434b 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#282a2f 0%,#3f434b 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#282a2f 0%,#3f434b 100%);/* IE10+ */
background:linear-gradient(top,#282a2f 0%,#3f434b 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#282a2f',endColorstr='#3f434b',GradientType=0 );/* IE6-9 */
}
div.ui-btn .ui-btn-inner{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#b0bccd;/* Old browsers */
background:-moz-linear-gradient(top,#b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#b0bccd),color-stop(50%,#889bb3),color-stop(51%,#8094ae),color-stop(100%,#6d84a2));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%);/* IE10+ */
background:linear-gradient(top,#b0bccd 0%,#889bb3 50%,#8094ae 51%,#6d84a2 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd',endColorstr='#6d84a2',GradientType=0 );/* IE6-9 */
}
.ui-dialog{background:rgba(0,0,0,0.6) none !important;margin:0;}
.ui-dialog .ui-dialog-contain{max-width:100%;width:100%;position:static;}
.ui-dialog .ui-content{position:absolute;bottom:0;width:100%;max-width:100%;/* fixes issue #24 */
padding:0.75em;margin:0;border-top:1px solid #45484d;background:#a8b1bd;/* Old browsers */
background:-moz-linear-gradient(top,#a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#a8b1bd),color-stop(15%,#646d7b),color-stop(16%,#535c68),color-stop(100%,#535c68));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%);/* IE10+ */
background:linear-gradient(top,#a8b1bd 0%,#646d7b 15%,#535c68 16%,#535c68 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8b1bd',endColorstr='#535c68',GradientType=0 );/* IE6-9 */
-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.ui-dialog .ui-btn{border:none transparent !important;}
/* === DIALOG BUTTONS E ===*/
.ui-dialog .ui-btn-up-e .ui-btn-text,.ui-dialog .ui-btn-hover-e .ui-btn-text{color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.ui-dialog .ui-btn-up-e .ui-btn-inner,.ui-dialog .ui-btn-hover-e .ui-btn-inner{background:#e18285;/* Old browsers */
background:-moz-linear-gradient(top,#e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e18285),color-stop(49%,#d76369),color-stop(50%,#cd2a27),color-stop(100%,#bf2321));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%);/* IE10+ */
background:linear-gradient(top,#e18285 0%,#d76369 49%,#cd2a27 50%,#bf2321 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e18285',endColorstr='#bf2321',GradientType=0 );/* IE6-9 */
}
/* === DIALOG BUTTONS D ===*/
.ui-dialog .ui-btn-up-d .ui-btn-text,.ui-dialog .ui-btn-hover-d .ui-btn-text{color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.ui-dialog .ui-btn-up-d .ui-btn-inner,.ui-dialog .ui-btn-hover-d .ui-btn-inner{background:#7bbf81;/* Old browsers */
background:-moz-linear-gradient(top,#7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#7bbf81),color-stop(49%,#31ab3b),color-stop(50%,#009e0f),color-stop(100%,#009a0c));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%);/* IE10+ */
background:linear-gradient(top,#7bbf81 0%,#31ab3b 49%,#009e0f 50%,#009a0c 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7bbf81',endColorstr='#009a0c',GradientType=0 );/* IE6-9 */
}
/* === DIALOG BUTTONS C ===*/
.ui-dialog .ui-btn-up-c .ui-btn-text,.ui-dialog .ui-btn-hover-c .ui-btn-text{color:#000;text-shadow:0 1px 0 rgba(255,255,255,0.7);}
.ui-dialog .ui-btn-up-c .ui-btn-inner,.ui-dialog .ui-btn-hover-c .ui-btn-inner{background:#e4d0a0;/* Old browsers */
background:-moz-linear-gradient(top,#e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e4d0a0),color-stop(49%,#efcd63),color-stop(50%,#f0be22),color-stop(100%,#f9dd24));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%);/* IE10+ */
background:linear-gradient(top,#e4d0a0 0%,#efcd63 49%,#f0be22 50%,#f9dd24 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4d0a0',endColorstr='#f9dd24',GradientType=0 );/* IE6-9 */
}
/* === DIALOG BUTTONS B ===*/
.ui-dialog .ui-btn-up-b .ui-btn-text,.ui-dialog .ui-btn-hover-b .ui-btn-text{color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.ui-dialog .ui-btn-up-b .ui-btn-inner,.ui-dialog .ui-btn-hover-b .ui-btn-inner{background:#5e636a;/* Old browsers */
background:-moz-linear-gradient(top,#5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5e636a),color-stop(49%,#272d37),color-stop(50%,#171f28),color-stop(100%,#252d36));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%);/* IE10+ */
background:linear-gradient(top,#5e636a 0%,#272d37 49%,#171f28 50%,#252d36 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e636a',endColorstr='#252d36',GradientType=0 );/* IE6-9 */
}
/* === DIALOG BUTTONS A ===*/
.ui-dialog .ui-btn-up-a .ui-btn-text,.ui-dialog .ui-btn-hover-a .ui-btn-text{color:#000;text-shadow:0 1px 0 rgba(255,255,255,0.7);}
.ui-dialog .ui-btn-up-a .ui-btn-inner,.ui-dialog .ui-btn-hover-a .ui-btn-inner{background:#ededee;/* Old browsers */
background:-moz-linear-gradient(top,#ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ededee),color-stop(49%,#cfd0d1),color-stop(50%,#bababb),color-stop(100%,#bdbfc2));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%);/* IE10+ */
background:linear-gradient(top,#ededee 0%,#cfd0d1 49%,#bababb 50%,#bdbfc2 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededee',endColorstr='#bdbfc2',GradientType=0 );/* IE6-9 */
}
/* === BACK BUTTON === */
a[data-rel='back'],.ui-header a[data-rel='back']{background:transparent url(images/backButtonSprite.png) 0 0 no-repeat !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;border:0 none !important;height:30px;}
a[data-rel='back'] .ui-btn-inner{background:transparent url(images/backButtonSprite.png) right 0 no-repeat !important;margin:0 0 0 15px;padding:0 8px 0 0 !important;height:30px;line-height:30px;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;}
a[data-rel='back'] .ui-icon{display:none;}
/* === BLACK - BACK BUTTON === */
.ui-bar-b a[data-rel='back']{background-position:0 -30px !important;}
.ui-bar-b a[data-rel='back'] .ui-btn-inner{background-position:right -30px !important;}
/* === TOGGLE === */
div.ui-slider-switch{border-color:#9b9b9b;height:32px;}
span.ui-slider-label-b{color:#7f7f7f;background:#f9f9f9 none;-webkit-box-shadow:-10px 15px 0 rgba(0,0,0,0.07) inset,0 2px 6px rgba(0,0,0,0.5) inset;-moz-box-shadow:-10px 15px 0 rgba(0,0,0,0.07) inset,0 2px 6px rgba(0,0,0,0.5) inset;box-shadow:-10px 15px 0 rgba(0,0,0,0.07) inset,0 2px 6px rgba(0,0,0,0.5) inset;}
span.ui-slider-label-a{color:#FFF;background:#007fea none;-webkit-box-shadow:10px 15px 0 rgba(0,0,0,0.1) inset,0 2px 6px rgba(0,0,0,0.6) inset;-moz-box-shadow:10px 15px 0 rgba(0,0,0,0.1) inset,0 2px 6px rgba(0,0,0,0.6) inset;box-shadow:10px 15px 0 rgba(0,0,0,0.1) inset,0 2px 6px rgba(0,0,0,0.6) inset;}
div.ui-slider-switch a.ui-slider-handle{width:31px;height:31px;margin-top:-1px;margin-left:-16px;border-color:#717171;background:#d0d0d0;/* Old browsers */
background:-moz-linear-gradient(top,#d0d0d0 0%,#fcfcfc 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d0d0d0),color-stop(100%,#fcfcfc));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#d0d0d0 0%,#fcfcfc 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#d0d0d0 0%,#fcfcfc 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#d0d0d0 0%,#fcfcfc 100%);/* IE10+ */
background:linear-gradient(top,#d0d0d0 0%,#fcfcfc 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0',endColorstr='#fcfcfc',GradientType=0 );/* IE6-9 */
-webkit-box-shadow:0 1px 1px rgba(255,255,255,0.7) inset,0 0 2px rgba(0,0,0,0.25) !important;-moz-box-shadow:0 1px 1px rgba(255,255,255,0.7) inset,0 0 2px rgba(0,0,0,0.25) !important;box-shadow:0 1px 1px rgba(255,255,255,0.7) inset,0 0 2px rgba(0,0,0,0.25) !important;}
div.ui-slider-switch a.ui-slider-handle.ui-focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
/* === RADIO OPTION === */
.ui-controlgroup-horizontal .ui-radio .ui-btn{background:#fcfcfc;/* Old browsers */
background:-moz-linear-gradient(top,#fcfcfc 0%,#c9c9c9 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fcfcfc),color-stop(100%,#c9c9c9));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#fcfcfc 0%,#c9c9c9 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#fcfcfc 0%,#c9c9c9 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#fcfcfc 0%,#c9c9c9 100%);/* IE10+ */
background:linear-gradient(top,#fcfcfc 0%,#c9c9c9 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc',endColorstr='#c9c9c9',GradientType=0 );/* IE6-9 */
}
.ui-controlgroup-horizontal .ui-radio .ui-btn-active{background:#376fd4;/* Old browsers */
background:-moz-linear-gradient(top,#376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#376fd4),color-stop(49%,#417fe7),color-stop(50%,#4c88e9),color-stop(100%,#73a8fb));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%);/* IE10+ */
background:linear-gradient(top,#376fd4 0%,#417fe7 49%,#4c88e9 50%,#73a8fb 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#376fd4',endColorstr='#73a8fb',GradientType=0 );/* IE6-9 */
-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.5) inset;-moz-box-shadow:0 2px 5px rgba(0,0,0,0.5) inset;box-shadow:0 2px 5px rgba(0,0,0,0.5) inset;}
.ui-controlgroup-horizontal .ui-radio label{border-width:0 0 0 1px;border-color:#adaead;}
.ui-controlgroup-horizontal .ui-radio .ui-btn-active .ui-btn-text{color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.25);}
.ui-controlgroup-horizontal .ui-radio .ui-btn-text{color:#7f7f7f;text-shadow:0 1px 0 #FFF;}
.ui-controlgroup-horizontal .ui-radio .ui-btn-inner{padding:.6em 1.2em !important;}
/* === INPUT - TEXT === */
input.ui-input-text,.ui-input-search{height:29px;line-height:29px;padding-top:0;padding-bottom:0;border-radius:100px;box-shadow:0 1px 3px rgba(0,0,0,0.6) inset;font-size:14px;}
.ui-input-search input{padding:0 !important;}
.ui-input-clear{background:transparent url(images/iconSprite.png) 0 0 no-repeat;width:19px;height:19px;border:none;margin-top:-9px !important;-moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
.ui-input-clear *{display:none;}
/* === CUSTOM HEADER BUTTONS === */
.ui-header .ui-btn{border-color:#375074;top:6px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;background:#89a0be;/* Old browsers */
background:-moz-linear-gradient(top,#89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#89a0be),color-stop(50%,#5877a2),color-stop(51%,#486a9a),color-stop(100%,#4a6c9b));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%);/* IE10+ */
background:linear-gradient(top,#89a0be 0%,#5877a2 50%,#486a9a 51%,#4a6c9b 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#89a0be',endColorstr='#4a6c9b',GradientType=0 );/* IE6-9 */
}
.ui-header .ui-btn .ui-btn-inner{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.ui-header .ui-btn-up-b,.ui-header .ui-btn-hover-b{border-color:#000;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;background:#6a6a6a;/* Old browsers */
background:-moz-linear-gradient(top,#6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6a6a6a),color-stop(49%,#313131),color-stop(50%,#000000),color-stop(100%,#000000));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%);/* IE10+ */
background:linear-gradient(top,#6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a',endColorstr='#000000',GradientType=0 );/* IE6-9 */
}
.ui-header .ui-btn-up-b .ui-btn-text,.ui-header .ui-btn-hover-b .ui-btn-text{color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.5);}
.ui-header .ui-btn-up-c,.ui-header .ui-btn-hover-c{border-color:#451c1b;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;background:#dc7679;/* Old browsers */
background:-moz-linear-gradient(top,#dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#dc7679),color-stop(49%,#dc7679),color-stop(50%,#cd2a27),color-stop(100%,#c92a29));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%);/* IE10+ */
background:linear-gradient(top,#dc7679 0%,#dc7679 49%,#cd2a27 50%,#c92a29 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc7679',endColorstr='#c92a29',GradientType=0 );/* IE6-9 */
}
.ui-header .ui-btn-up-c .ui-btn-text,.ui-header .ui-btn-hover-c .ui-btn-text{color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.5);}
.ui-header .ui-btn-up-d,.ui-header .ui-btn-hover-d{border-color:#375074;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;box-shadow:0 1px 0 rgba(255,255,255,0.36),0 1px 0 rgba(0,0,0,0.25) inset !important;background:#376fe0;/* Old browsers */
background:-moz-linear-gradient(top,#376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#376fe0),color-stop(49%,#376fe0),color-stop(50%,#2361de),color-stop(100%,#2463de));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%);/* IE10+ */
background:linear-gradient(top,#376fe0 0%,#376fe0 49%,#2361de 50%,#2463de 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#376fe0',endColorstr='#2463de',GradientType=0 );/* IE6-9 */
}
.ui-header .ui-btn-up-d .ui-btn-text,.ui-header .ui-btn-hover-d .ui-btn-text{color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.5);}
/* === FOOTER BAR === */
.ui-footer{border-color:#0d0d0d;background:#2d2d2d;/* Old browsers */
background:-moz-linear-gradient(top,#2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#2d2d2d),color-stop(49%,#151515),color-stop(50%,#000000),color-stop(100%,#000000));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%);/* IE10+ */
background:linear-gradient(top,#2d2d2d 0%,#151515 49%,#000000 50%,#000000 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d',endColorstr='#000000',GradientType=0 );/* IE6-9 */
}
.ui-footer .ui-btn{border:0 none;background:transparent;}
.ui-footer .ui-btn-active{background:none rgba(255,255,255,0.14);-webkit-border-radius:4px !important;-moz-border-radius:4px !important;border-radius:4px !important;}
.ui-footer .ui-btn-inner{border-color:#434343;padding-top:40px !important;}
.ui-footer .ui-btn-text{font-size:10px;text-shadow:0 none;}
.ui-footer .ui-icon-custom.ui-icon{width:32px;height:32px;margin-left:-16px;}
/* fixes issue #25 */
.ui-footer .ui-icon-shadow{-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;}
#tabA .ui-icon{background:url(images/tabSprite.png) 0 0 no-repeat;}
#tabA.ui-btn-active .ui-icon{background:url(images/tabSprite.png) -32px 0 no-repeat;}
#tabB .ui-icon{background:url(images/tabSprite.png) 0 -32px no-repeat;}
#tabB.ui-btn-active .ui-icon{background:url(images/tabSprite.png) -32px -32px no-repeat;}
#tabC .ui-icon{background:url(images/tabSprite.png) 0 -64px no-repeat;}
#tabC.ui-btn-active .ui-icon{background:url(images/tabSprite.png) -32px -64px no-repeat;}
/* === UI POPUPS === */
.ui-popup{background:rgba(0,0,0,0.75);color:#FFF;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.ui-popup p{color:#FFF;text-shadow:none;}
.ui-popup.ui-body-a{width:150px;height:150px;}
.ui-popup.ui-body-a img{margin:30px auto 20px auto;display:block;}
.ui-popup.ui-body-a p{text-align:center;font-size:1.1em;font-weight:bold;}
/* === NAVIGATION BAR === */
.ui-navbar ul{overflow:hidden;}
/* === RETINA DEVICE FIXES === */
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){.ui-listview .ui-icon-arrow-r{background-image:url(images/arrow_right@2x.png) !important;background-size:9.5px 14px;}
a[data-rel='back'],.ui-header a[data-rel='back'],a[data-rel="back"] .ui-btn-inner{background-image:url(images/backButtonSprite@2x.png) !important;background-size:500px 60px;}
.ui-input-clear{background-position:right 0;background-size:100px 250px;}
}

附件:下载该文件资源,减少时间成本(增值服务)