以下是 可爱的复古风格jQuery UI Theme Retro特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="css/retro/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#autocomplete" ).autocomplete({
source: availableTags
});
$( "#button" ).button();
$( "#radioset" ).buttonset();
$( "#tabs" ).tabs();
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
$( "#datepicker" ).datepicker({
inline: true
});
// Horizontal Slider
$('#horizSlider').slider({
range: true,
values: [17, 67]
}).width(500);
// Vertical Slider
$("#eq > span").each(function() {
var value = parseInt($(this).text());
$(this).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
$( "#progressbar" ).progressbar({
value: 70
});
// Icon Buttons
$("#leftIconButton").button({
icons: {
primary: 'ui-icon-info'
}
});
$("#bothIconButton").button({
icons: {
primary: 'ui-icon-folder-collapsed',
secondary: 'ui-icon-triangle-1-s'
}
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
</script>
<style>
body{
font: 62.5% "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 50px;
}
section.wrapper {
width: 600px;
margin: 0 auto;
}
h1 {
font-size: 28px;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
</style>
</head>
<body><section class="wrapper">
<h1></h1>
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
<div>
<input id="autocomplete" type="text" title="type "a"" size="40">
</div>
<!-- Button -->
<h2 class="demoHeaders">Button</h2>
<button id="button">Standard UI Button</button>
<h2 class="demoHeaders">Tabbed Button</h2>
<form style="margin-top: 1em;">
<div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
<!-- Icon Buttons -->
<h2 class="demoHeaders">Icon Buttons</h2>
<div id="leftIconButton">Icon Button</div> <br /><br />
<div id="bothIconButton">Left & Right Icons</div>
<!-- Horizontal Slider -->
<h2 class="demoHeaders">Horizontal Slider</h2>
<div id="horizSlider"></div>
<!-- Vertical Slider -->
<h2 class="demoHeaders">Vertical Slider</h2>
<div class="columnbox">
<div id="eq">
<span>20</span>
<span>60</span>
<span>50</span>
<span>80</span>
<span>70</span>
</div>
</div>
<br clear="all" />
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p></div>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="demoHeaders">Framework Icons</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
<!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>
<!-- Progressbar -->
<h2 class="demoHeaders">Progressbar</h2>
<div id="progressbar"></div>
</div></section>
</body>
</html>
CSS代码(jquery-ui-1.9.0.custom.css):
/*jQuery UI Theme:Retro - by MedialootURL:http://medialoot.com/item/jquery-ui-theme-retroDesigner:Tony Thomas*/
/*! jQuery UI - v1.9.0 - 2012-10-25* http://jqueryui.com* Includes:jquery.ui.core.css,jquery.ui.resizable.css,jquery.ui.selectable.css,jquery.ui.accordion.css,jquery.ui.autocomplete.css,jquery.ui.button.css,jquery.ui.datepicker.css,jquery.ui.dialog.css,jquery.ui.menu.css,jquery.ui.progressbar.css,jquery.ui.slider.css,jquery.ui.spinner.css,jquery.ui.tabs.css,jquery.ui.tooltip.css* To view and modify this theme,visit http://jqueryui.com/themeroller/?ffDefault=%22Helvetica%20Neue%22%2C%20Helvetica%2C%20Arial%2C%20sans-serif&fwDefault=bold&fsDefault=1.2em&cornerRadius=2px&bgColorHeader=aaaaaa&bgTextureHeader=01_flat.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=FFFFFF&iconColorContent=222222&bgColorDefault=bbbbbb&bgTextureDefault=01_flat.png&bgImgOpacityDefault=75&borderColorDefault=bababa&fcDefault=516073&iconColorDefault=516073&bgColorHover=cccccc&bgTextureHover=01_flat.png&bgImgOpacityHover=75&borderColorHover=cacaca&fcHover=516073&iconColorHover=516073&bgColorActive=dddddd&bgTextureActive=01_flat.png&bgImgOpacityActive=65&borderColorActive=dadada&fcActive=516073&iconColorActive=516073&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=000000&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px* Copyright (c) 2012 jQuery Foundation and other contributors Licensed MIT */
/* Layout helpers----------------------------------*/
.ui-helper-hidden{display:none;}
.ui-helper-hidden-accessible{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);}
.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none;}
.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;}
.ui-helper-clearfix:after{clear:both;}
.ui-helper-clearfix{zoom:1;}
.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0);}
/* Interaction Cues----------------------------------*/
.ui-state-disabled{cursor:default !important;}
/* Icons----------------------------------*/
/* states and images */
.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;}
/* Misc visuals----------------------------------*/
body{background:#f6f4ec url(images/bg-noise.png);}
*{outline:none;}
ul#icons{margin:0;padding:0;}
ul#icons li{margin:2px;position:relative;padding:4px 0;cursor:pointer;float:left;list-style:none;}
ul#icons span.ui-icon{float:left;margin:0 4px;}
.columnbox{height:170px;width:48%;float:left;margin-right:1%;}
#eq span{height:120px;float:left;margin:20px}
/* Overlays */
.ui-widget-overlay{position:absolute;top:0;left:0;width:100%;height:100%;}
.ui-resizable{position:relative;}
.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;}
.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none;}
.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0;}
.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0;}
.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%;}
.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%;}
.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px;}
.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px;}
.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px;}
.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px;}
.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black;}
.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin-top:2px;padding:0.8em .5em .8em .7em;zoom:1;}
.ui-accordion .ui-accordion-icons{padding-left:2.2em;}
.ui-accordion .ui-accordion-noicons{padding-left:.7em;}
.ui-accordion .ui-accordion-icons .ui-accordion-icons{padding-left:2.2em;}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon{position:absolute;left:.5em;top:50%;margin-top:-8px;}
.ui-accordion .ui-accordion-content{padding:1em 1em;border-top:0;overflow:auto;zoom:1;}
.ui-autocomplete{position:absolute;cursor:default;}
/* workarounds */
* html .ui-autocomplete{width:1px;}
/* without this,the menu expands to 100% in IE6 */
.ui-button{display:inline-block;position:relative;padding:0;margin-right:.1em;cursor:pointer;text-align:center;zoom:1;overflow:visible;}
/* the overflow property removes extra width in IE */
.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none;}
.ui-button-icon-only{width:2.2em;}
/* to make room for the icon,a width needs to be set here */
button.ui-button-icon-only{width:2.4em;}
/* button elements seem to need a little more width */
.ui-button-icons-only{width:3.4em;}
button.ui-button-icons-only{width:3.7em;}
/*button text element */
.ui-button .ui-button-text{display:block;line-height:1.4;}
.ui-button-text-only .ui-button-text{padding:.4em 1em;}
.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px;}
.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em;}
.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em;}
.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em;}
/* no icon support for input elements,provide padding by default */
input.ui-button{padding:.4em 1em;}
/*button icon element(s) */
.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px;}
.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px;}
.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em;}
.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em;}
.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em;}
/*button sets*/
.ui-buttonset{margin-right:7px;}
.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em;}
/* workarounds */
button.ui-button::-moz-focus-inner{border:0;padding:0;}
/* reset extra padding in Firefox */
.ui-datepicker{width:17em;padding:.2em .2em 0;display:none;}
.ui-datepicker .ui-datepicker-header{position:relative;padding:.5em 0;background:#f6f4ec;}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:1px;width:20px;height:31px;background:#e1ddd0;background-image:url(images/bg-noise.png);}
.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px;}
.ui-datepicker .ui-datepicker-prev{left:1px;}
.ui-datepicker .ui-datepicker-next{right:1px;}
.ui-datepicker .ui-datepicker-prev-hover{left:1px;}
.ui-datepicker .ui-datepicker-next-hover{right:1px;}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px;}
.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center;color:#3e3928;font-weight:bold;}
.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0;}
.ui-datepicker select.ui-datepicker-month-year{width:100%;}
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:49%;}
.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em;}
.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0;}
.ui-datepicker td{border:0;padding:1px;}
.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none;}
.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0;}
.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left;}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi{width:auto;}
.ui-datepicker-multi .ui-datepicker-group{float:left;}
.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em;}
.ui-datepicker-multi-2 .ui-datepicker-group{width:50%;}
.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%;}
.ui-datepicker-multi-4 .ui-datepicker-group{width:25%;}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header{border-left-width:0;}
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0;}
.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left;}
.ui-datepicker-row-break{clear:both;width:100%;font-size:0em;}
/* RTL support */
.ui-datepicker-rtl{direction:rtl;}
.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto;}
.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto;}
.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto;}
.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto;}
.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right;}
.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left;}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current{float:right;}
.ui-datepicker-rtl .ui-datepicker-group{float:right;}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header{border-right-width:0;border-left-width:1px;}
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px;}
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover{position:absolute;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
top:-4px;/*must have*/
left:-4px;/*must have*/
width:200px;/*must have*/
height:200px;/*must have*/
}
.ui-dialog{position:absolute;padding:0;width:300px;overflow:hidden;-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.25);-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.25);box-shadow:0px 0px 10px rgba(0,0,0,0.25);}
.ui-dialog .ui-dialog-titlebar{padding:10px 15px;position:relative;background:#fff;font-size:14px;-webkit-border-bottom-left-radius:0px;-webkit-border-bottom-right-radius:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-bottomright:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;background-color:#bc4e39;-webkit-box-shadow:inset 0 -3px rgba(0,0,0,.2);-moz-box-shadow:inset 0 -3px rgba(0,0,0,.2);box-shadow:inset 0 -3px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);}
.ui-dialog .ui-dialog-title{float:left;margin:.1em 16px .1em 0;}
.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:19px;margin:-10px 0 0 0;padding:1px;height:18px;}
.ui-dialog .ui-dialog-titlebar-close span{display:block;margin:1px;}
.ui-dialog .ui-dialog-titlebar-close:hover,.ui-dialog .ui-dialog-titlebar-close:focus{padding:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:#f6f4ec;background-image:url(images/bg-noise.png);overflow:auto;zoom:1;}
.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin:0;padding:5px;background:#f6f4ec;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right;}
.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer;}
.ui-dialog .ui-resizable-se{width:14px;height:14px;right:3px;bottom:3px;}
.ui-draggable .ui-dialog-titlebar{cursor:move;}
.ui-menu{list-style:none;padding:2px;margin:0;display:block;outline:none;}
.ui-menu .ui-menu{margin-top:-3px;position:absolute;}
.ui-menu .ui-menu-item{margin:0;padding:0;zoom:1;width:100%;}
.ui-menu .ui-menu-divider{margin:5px -2px 5px -2px;height:0;font-size:0;line-height:0;border-width:1px 0 0 0;}
.ui-menu .ui-menu-item a{text-decoration:none;display:block;padding:2px .4em;line-height:1.5;zoom:1;font-weight:normal;}
.ui-menu .ui-menu-item a.ui-state-focus,.ui-menu .ui-menu-item a.ui-state-active{font-weight:normal;margin:-1px;}
.ui-menu .ui-state-disabled{font-weight:normal;margin:.4em 0 .2em;line-height:1.5;}
.ui-menu .ui-state-disabled a{cursor:default;}
/* icon support */
.ui-menu-icons{position:relative;}
.ui-menu-icons .ui-menu-item a{position:relative;padding-left:2em;}
/* left-aligned */
.ui-menu .ui-icon{position:absolute;top:.2em;left:.2em;}
/* right-aligned */
.ui-menu .ui-menu-icon{position:static;float:right;}
.ui-progressbar{height:1em;text-align:left;overflow:hidden;}
.ui-progressbar .ui-progressbar-value{margin:-1px;height:100%;}
.ui-slider{position:relative;text-align:left;}
.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default;}
.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0;}
.ui-slider-horizontal{height:.8em;}
.ui-slider-horizontal .ui-slider-handle{top:-4px;margin-left:-.6em;}
.ui-slider-horizontal .ui-slider-range{top:-1px;height:100%;}
.ui-slider-horizontal .ui-slider-range-min{left:0;}
.ui-slider-horizontal .ui-slider-range-max{right:0;}
.ui-slider-vertical{width:8px;height:100px;}
.ui-slider-vertical .ui-slider-handle{left:-3px;margin-left:0;margin-bottom:-.8em;}
.ui-slider-vertical .ui-slider-range{left:-0px;width:100%;}
.ui-slider-vertical .ui-slider-range-min{bottom:0;}
.ui-slider-vertical .ui-slider-range-max{top:0;}
.ui-spinner{position:relative;display:inline-block;overflow:hidden;padding:0;vertical-align:middle;}
.ui-spinner-input{border:none;background:none;padding:0;margin:.2em 0;vertical-align:middle;margin-left:.4em;margin-right:22px;}
.ui-spinner-button{width:16px;height:50%;font-size:.5em;padding:0;margin:0;z-index:100;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0;}
.ui-spinner a.ui-spinner-button{border-top:none;border-bottom:none;border-right:none;}
/* more specificity required here to overide default borders */
.ui-spinner .ui-icon{position:absolute;margin-top:-8px;top:50%;left:0;}
/* vertical centre icon */
.ui-spinner-up{top:0;}
.ui-spinner-down{bottom:0;}
/* TR overrides */
span.ui-spinner{background:none;}
.ui-spinner .ui-icon-triangle-1-s{/* need to fix icons sprite */
background-position:-65px -16px;}
.ui-tabs{position:relative;padding:.2em;zoom:1;}
/* position:relative prevents IE scroll bug (element with position:relative inside container with overflow:auto appear as "fixed") */
.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0;}
.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;margin:1px .2em 0 0;border-bottom:0;padding:0;white-space:nowrap;border-radius:2px;}
.ui-tabs .ui-tabs-nav li a{float:left;padding:.5em 1em;text-decoration:none;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:0px;padding-bottom:0px;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,.ui-tabs .ui-tabs-nav li.ui-state-disabled a,.ui-tabs .ui-tabs-nav li.ui-tabs-loading a{cursor:text;}
.ui-tabs .ui-tabs-nav li a,.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a{cursor:pointer;}
/* first selector in group seems obsolete,but required to overcome bug in Opera applying cursor:text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:1em 1em;background:none;}
.ui-tooltip{padding:8px;position:absolute;z-index:9999;-o-box-shadow:0 0 5px #aaa;-moz-box-shadow:0 0 5px #aaa;-webkit-box-shadow:0 0 5px #aaa;box-shadow:0 0 5px #aaa;}
/* Fades and background-images don't work well together in IE6,drop the image */
* html .ui-tooltip{background-image:none;}
body .ui-tooltip{border-width:2px;}
/* Component containers----------------------------------*/
.ui-widget{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.2em;}
.ui-widget .ui-widget{font-size:1em;}
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;}
.ui-widget-content{border:none;background:#e1ddd0;background-image:url(images/bg-noise.png);color:#565552;}
.ui-widget-content a{color:#FFFFFF;}
nonewhite;color:#222222;font-weight:bold;}
.ui-widget-header a{color:#222222;}
/* Interaction states----------------------------------*/
/*Default State*/
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{background-color:#c4bfae;background-image:url(images/bg-noise.png);-webkit-box-shadow:inset 0 -3px rgba(0,0,0,.2);-moz-box-shadow:inset 0 -3px rgba(0,0,0,.2);box-shadow:inset 0 -3px rgba(0,0,0,.2);color:#fff;padding:5px 0;border:none;text-shadow:0 1px 1px rgba(0,0,0,0.25);font-weight:bold;}
.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{text-decoration:none;}
/*Hover State*/
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{background-color:#bc4e39;-webkit-box-shadow:inset 0 -3px rgba(0,0,0,.2);-moz-box-shadow:inset 0 -3px rgba(0,0,0,.2);box-shadow:inset 0 -3px rgba(0,0,0,.2);color:#fff;padding:5px 0;border:none;text-shadow:0 1px 1px rgba(0,0,0,0.25);font-weight:bold;}
.ui-state-hover a,.ui-state-hover a:hover{text-decoration:none;}
/*Active State*/
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{background-color:#9d998b;-webkit-box-shadow:inset 0 3px 3px rgba(0,0,0,.2);-moz-box-shadow:inset 0 3px 3px rgba(0,0,0,.2);box-shadow:inset 0 3px 3px rgba(0,0,0,.2);color:#fff;padding:5px 0;border:none;text-shadow:0 1px 1px rgba(0,0,0,0.25);font-weight:bold;}
.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{text-decoration:none;}
/* Interaction Cues----------------------------------*/
.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#39a5bc;border:solid 1px #39a5bc;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);}
.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#cf6666;border:solid 1px #cf6666;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);}
.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a;}
.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a;}
.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold;}
.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal;}
.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none;}
/* Misc visuals----------------------------------*/
/* Corner radius */
.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;-khtml-border-top-left-radius:2px;border-top-left-radius:2px;}
.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{-moz-border-radius-topright:2px;-webkit-border-top-right-radius:2px;-khtml-border-top-right-radius:2px;border-top-right-radius:2px;}
.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{-moz-border-radius-bottomleft:2px;-webkit-border-bottom-left-radius:2px;-khtml-border-bottom-left-radius:2px;border-bottom-left-radius:2px;}
.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{-moz-border-radius-bottomright:2px;-webkit-border-bottom-right-radius:2px;-khtml-border-bottom-right-radius:2px;border-bottom-right-radius:2px;}
/* Overlays */
.ui-widget-overlay{background:#000000 url(images/ui-bg_flat_0_000000_40x100.png) 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30);}
.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#000000 url(images/ui-bg_flat_0_000000_40x100.png) 50% 50% repeat-x;opacity:.6;filter:Alpha(Opacity=60);-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
/*Others*/
.ui-buttonset{font-weight:bold;}
.ui-buttonset .ui-corner-right{border-left:none;}
.ui-buttonset .ui-corner-left{border-right:none;}
#tabs .ui-state-default a{color:#FFFFFF;}
.ui-slider{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#e1ddd0;-webkit-box-shadow:inset 0 1px 3px #9d998b;-moz-box-shadow:inset 0 1px 3px #9d998b;box-shadow:inset 0 1px 3px #9d998b;background-image:url(images/bg-noise.png);}
.ui-slider .ui-slider-handle{height:5px;width:15px;margin:1px 0 0 -5px;-webkit-box-shadow:0 0 4px rgba(0,24,80,.28),inset 0 0 2px #fff;-moz-box-shadow:0 0 4px rgba(0,24,80,.28),inset 0 0 2px #fff;box-shadow:0 0 4px rgba(0,24,80,.28),inset 0 0 2px #fff;background:#f3f6fd url(images/slider-handle.png) no-repeat center;}
.ui-slider .ui-slider-range{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#bc4e39;-webkit-box-shadow:inset 0 -1px rgba(0,0,0,.2);-moz-box-shadow:inset 0 -1px rgba(0,0,0,.2);box-shadow:inset 0 -1px rgba(0,0,0,.2);background-image:url(images/bg-noise.png);}
.ui-slider-vertical{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#e1ddd0;-webkit-box-shadow:inset 0 1px 3px #9d998b;-moz-box-shadow:inset 0 1px 3px #9d998b;box-shadow:inset 0 1px 3px #9d998b;background-image:url(images/bg-noise.png);}
.ui-slider-vertical .ui-slider-range{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#bc4e39;background-image:url(images/bg-noise.png);}
.ui-slider-vertical .ui-slider-handle{height:5px;width:15px;margin-bottom:-.8em;margin-left:-1px;-webkit-box-shadow:0 0 4px rgba(0,24,80,.28),inset 0 0 2px #fff;-moz-box-shadow:0 0 4px rgba(0,24,80,.28),inset 0 0 2px #fff;box-shadow:0 0 4px rgba(0,24,80,.28),inset 0 0 2px #fff;background:#f3f6fd url(images/slider-handle-vertical.png) no-repeat center;}
.ui-progressbar{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background-color:#e1ddd0;-webkit-box-shadow:inset 0 1px 3px #9d998b;-moz-box-shadow:inset 0 1px 3px #9d998b;box-shadow:inset 0 1px 3px #9d998b;background-image:url(images/bg-noise.png);}
.ui-progressbar .ui-progressbar-value{background-color:#bc4e39;-webkit-box-shadow:inset 0 1px 3px #963e2e;-moz-box-shadow:inset 0 1px 3px #963e2e;box-shadow:inset 0 1px 3px #963e2e;background-image:url(images/bg-noise.png);}
input[type=text]{padding:8px;background-color:#e1ddd0;background-image:url(images/bg-noise.png);-webkit-box-shadow:inset 0 1px 3px #9d998b;-moz-box-shadow:inset 0 1px 3px #9d998b;box-shadow:inset 0 1px 3px #9d998b;color:#9d998b;text-shadow:0 1px 0px rgba(255,255,255,0.25);font-weight:bold;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border:none;}
.ui-datepicker .ui-datepicker-header .ui-state-hover{padding:0px;}
.ui-tabs .ui-state-default{box-shadow:none;}
.ui-datepicker .ui-state-default{text-align:center;box-shadow:none;border-radius:2px;}
.ui-autocomplete{border:none;background:#c4bfae;color:#565552;padding:5px 0;background-image:url(images/bg-noise.png);}
/* Icons----------------------------------*/
/* states and images */
.ui-icon{width:16px;height:16px;background-image:url(images/icons-dark.png);}
.ui-widget-content .ui-icon{background-image:url(images/icons-dark.png);}
.ui-widget-header .ui-icon{background-image:url(images/icons-dark.png);}
.ui-state-default .ui-icon{background-image:url(images/icons-light.png);}
.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url(images/icons-light.png);}
.ui-state-active .ui-icon{background-image:url(images/icons-light.png);}
.ui-state-highlight .ui-icon{background-image:url(images/icons-light.png);}
.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(images/icons-light.png);}
/* positioning */
.ui-icon-carat-1-n{background-position:0 0;}
.ui-icon-carat-1-ne{background-position:-16px 0;}
.ui-icon-carat-1-e{background-position:-32px 0;}
.ui-icon-carat-1-se{background-position:-48px 0;}
.ui-icon-carat-1-s{background-position:-64px 0;}
.ui-icon-carat-1-sw{background-position:-80px 0;}
.ui-icon-carat-1-w{background-position:-96px 0;}
.ui-icon-carat-1-nw{background-position:-112px 0;}
.ui-icon-carat-2-n-s{background-position:-128px 0;}
.ui-icon-carat-2-e-w{background-position:-144px 0;}
.ui-icon-triangle-1-n{background-position:0 -16px;}
.ui-icon-triangle-1-ne{background-position:-16px -16px;}
.ui-icon-triangle-1-e{background-position:-32px -16px;}
.ui-icon-triangle-1-se{background-position:-48px -16px;}
.ui-icon-triangle-1-s{background-position:-64px -16px;}
.ui-icon-triangle-1-sw{background-position:-80px -16px;}
.ui-icon-triangle-1-w{background-position:-96px -16px;}
.ui-icon-triangle-1-nw{background-position:-112px -16px;}
.ui-icon-triangle-2-n-s{background-position:-128px -16px;}
.ui-icon-triangle-2-e-w{background-position:-144px -16px;}
.ui-icon-arrow-1-n{background-position:0 -32px;}
.ui-icon-arrow-1-ne{background-position:-16px -32px;}
.ui-icon-arrow-1-e{background-position:-32px -32px;}
.ui-icon-arrow-1-se{background-position:-48px -32px;}
.ui-icon-arrow-1-s{background-position:-64px -32px;}
.ui-icon-arrow-1-sw{background-position:-80px -32px;}
.ui-icon-arrow-1-w{background-position:-96px -32px;}
.ui-icon-arrow-1-nw{background-position:-112px -32px;}
.ui-icon-arrow-2-n-s{background-position:-128px -32px;}
.ui-icon-arrow-2-ne-sw{background-position:-144px -32px;}
.ui-icon-arrow-2-e-w{background-position:-160px -32px;}
.ui-icon-arrow-2-se-nw{background-position:-176px -32px;}
.ui-icon-arrowstop-1-n{background-position:-192px -32px;}
.ui-icon-arrowstop-1-e{background-position:-208px -32px;}
.ui-icon-arrowstop-1-s{background-position:-224px -32px;}
.ui-icon-arrowstop-1-w{background-position:-240px -32px;}
.ui-icon-arrowthick-1-n{background-position:0 -48px;}
.ui-icon-arrowthick-1-ne{background-position:-16px -48px;}
.ui-icon-arrowthick-1-e{background-position:-32px -48px;}
.ui-icon-arrowthick-1-se{background-position:-48px -48px;}
.ui-icon-arrowthick-1-s{background-position:-64px -48px;}
.ui-icon-arrowthick-1-sw{background-position:-80px -48px;}
.ui-icon-arrowthick-1-w{background-position:-96px -48px;}
.ui-icon-arrowthick-1-nw{background-position:-112px -48px;}
.ui-icon-arrowthick-2-n-s{background-position:-128px -48px;}
.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px;}
.ui-icon-arrowthick-2-e-w{background-position:-160px -48px;}
.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px;}
.ui-icon-arrowthickstop-1-n{background-position:-192px -48px;}
.ui-icon-arrowthickstop-1-e{background-position:-208px -48px;}
.ui-icon-arrowthickstop-1-s{background-position:-224px -48px;}
.ui-icon-arrowthickstop-1-w{background-position:-240px -48px;}
.ui-icon-arrowreturnthick-1-w{background-position:0 -64px;}
.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px;}
.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px;}
.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px;}
.ui-icon-arrowreturn-1-w{background-position:-64px -64px;}
.ui-icon-arrowreturn-1-n{background-position:-80px -64px;}
.ui-icon-arrowreturn-1-e{background-position:-96px -64px;}
.ui-icon-arrowreturn-1-s{background-position:-112px -64px;}
.ui-icon-arrowrefresh-1-w{background-position:-128px -64px;}
.ui-icon-arrowrefresh-1-n{background-position:-144px -64px;}
.ui-icon-arrowrefresh-1-e{background-position:-160px -64px;}
.ui-icon-arrowrefresh-1-s{background-position:-176px -64px;}
.ui-icon-arrow-4{background-position:0 -80px;}
.ui-icon-arrow-4-diag{background-position:-16px -80px;}
.ui-icon-extlink{background-position:-32px -80px;}
.ui-icon-newwin{background-position:-48px -80px;}
.ui-icon-refresh{background-position:-64px -80px;}
.ui-icon-shuffle{background-position:-80px -80px;}
.ui-icon-transfer-e-w{background-position:-96px -80px;}
.ui-icon-transferthick-e-w{background-position:-112px -80px;}
.ui-icon-folder-collapsed{background-position:0 -96px;}
.ui-icon-folder-open{background-position:-16px -96px;}
.ui-icon-document{background-position:-32px -96px;}
.ui-icon-document-b{background-position:-48px -96px;}
.ui-icon-note{background-position:-64px -96px;}
.ui-icon-mail-closed{background-position:-80px -96px;}
.ui-icon-mail-open{background-position:-96px -96px;}
.ui-icon-suitcase{background-position:-112px -96px;}
.ui-icon-comment{background-position:-128px -96px;}
.ui-icon-person{background-position:-144px -96px;}
.ui-icon-print{background-position:-160px -96px;}
.ui-icon-trash{background-position:-176px -96px;}
.ui-icon-locked{background-position:-192px -96px;}
.ui-icon-unlocked{background-position:-208px -96px;}
.ui-icon-bookmark{background-position:-224px -96px;}
.ui-icon-tag{background-position:-240px -96px;}
.ui-icon-home{background-position:0 -112px;}
.ui-icon-flag{background-position:-16px -112px;}
.ui-icon-calendar{background-position:-32px -112px;}
.ui-icon-cart{background-position:-48px -112px;}
.ui-icon-pencil{background-position:-64px -112px;}
.ui-icon-clock{background-position:-80px -112px;}
.ui-icon-disk{background-position:-96px -112px;}
.ui-icon-calculator{background-position:-112px -112px;}
.ui-icon-zoomin{background-position:-128px -112px;}
.ui-icon-zoomout{background-position:-144px -112px;}
.ui-icon-search{background-position:-160px -112px;}
.ui-icon-wrench{background-position:-176px -112px;}
.ui-icon-gear{background-position:-192px -112px;}
.ui-icon-heart{background-position:-208px -112px;}
.ui-icon-star{background-position:-224px -112px;}
.ui-icon-link{background-position:-240px -112px;}
.ui-icon-cancel{background-position:0 -128px;}
.ui-icon-plus{background-position:-16px -128px;}
.ui-icon-plusthick{background-position:-32px -128px;}
.ui-icon-minus{background-position:-48px -128px;}
.ui-icon-minusthick{background-position:-64px -128px;}
.ui-icon-close{background-position:-80px -128px;}
.ui-icon-closethick{background-position:-96px -128px;}
.ui-icon-key{background-position:-112px -128px;}
.ui-icon-lightbulb{background-position:-128px -128px;}
.ui-icon-scissors{background-position:-144px -128px;}
.ui-icon-clipboard{background-position:-160px -128px;}
.ui-icon-copy{background-position:-176px -128px;}
.ui-icon-contact{background-position:-192px -128px;}
.ui-icon-image{background-position:-208px -128px;}
.ui-icon-video{background-position:-224px -128px;}
.ui-icon-script{background-position:-240px -128px;}
.ui-icon-alert{background-position:0 -144px;}
.ui-icon-info{background-position:-16px -144px;}
.ui-icon-notice{background-position:-32px -144px;}
.ui-icon-help{background-position:-48px -144px;}
.ui-icon-check{background-position:-64px -144px;}
.ui-icon-bullet{background-position:-80px -144px;}
.ui-icon-radio-on{background-position:-96px -144px;}
.ui-icon-radio-off{background-position:-112px -144px;}
.ui-icon-pin-w{background-position:-128px -144px;}
.ui-icon-pin-s{background-position:-144px -144px;}
.ui-icon-play{background-position:0 -160px;}
.ui-icon-pause{background-position:-16px -160px;}
.ui-icon-seek-next{background-position:-32px -160px;}
.ui-icon-seek-prev{background-position:-48px -160px;}
.ui-icon-seek-end{background-position:-64px -160px;}
.ui-icon-seek-start{background-position:-80px -160px;}
/* ui-icon-seek-first is deprecated,use ui-icon-seek-start instead */
.ui-icon-seek-first{background-position:-80px -160px;}
.ui-icon-stop{background-position:-96px -160px;}
.ui-icon-eject{background-position:-112px -160px;}
.ui-icon-volume-off{background-position:-128px -160px;}
.ui-icon-volume-on{background-position:-144px -160px;}
.ui-icon-power{background-position:0 -176px;}
.ui-icon-signal-diag{background-position:-16px -176px;}
.ui-icon-signal{background-position:-32px -176px;}
.ui-icon-battery-0{background-position:-48px -176px;}
.ui-icon-battery-1{background-position:-64px -176px;}
.ui-icon-battery-2{background-position:-80px -176px;}
.ui-icon-battery-3{background-position:-96px -176px;}
.ui-icon-circle-plus{background-position:0 -192px;}
.ui-icon-circle-minus{background-position:-16px -192px;}
.ui-icon-circle-close{background-position:-32px -192px;}
.ui-icon-circle-triangle-e{background-position:-48px -192px;}
.ui-icon-circle-triangle-s{background-position:-64px -192px;}
.ui-icon-circle-triangle-w{background-position:-80px -192px;}
.ui-icon-circle-triangle-n{background-position:-96px -192px;}
.ui-icon-circle-arrow-e{background-position:-112px -192px;}
.ui-icon-circle-arrow-s{background-position:-128px -192px;}
.ui-icon-circle-arrow-w{background-position:-144px -192px;}
.ui-icon-circle-arrow-n{background-position:-160px -192px;}
.ui-icon-circle-zoomin{background-position:-176px -192px;}
.ui-icon-circle-zoomout{background-position:-192px -192px;}
.ui-icon-circle-check{background-position:-208px -192px;}
.ui-icon-circlesmall-plus{background-position:0 -208px;}
.ui-icon-circlesmall-minus{background-position:-16px -208px;}
.ui-icon-circlesmall-close{background-position:-32px -208px;}
.ui-icon-squaresmall-plus{background-position:-48px -208px;}
.ui-icon-squaresmall-minus{background-position:-64px -208px;}
.ui-icon-squaresmall-close{background-position:-80px -208px;}
.ui-icon-grip-dotted-vertical{background-position:0 -224px;}
.ui-icon-grip-dotted-horizontal{background-position:-16px -224px;}
.ui-icon-grip-solid-vertical{background-position:-32px -224px;}
.ui-icon-grip-solid-horizontal{background-position:-48px -224px;}
.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px;}
.ui-icon-grip-diagonal-se{background-position:-80px -224px;}
分享到QQ
分享到微博
微信扫一扫
