jquery.slides响应式焦点图轮播滚动切换特效代码

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

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

以下是 jquery.slides响应式焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.slides响应式焦点图</title>
<style>
*{margin:0;padding:0;border:0;list-style:none;}
.container {margin:0 auto;}
#slides {display:none;position:relative;}
.slidesjs-container{}
.slidesjs-navigation{float:right;margin-top:10px;padding-right:5px;}
.slidesjs-navigation a{font:bold 20px/normal simsun;text-decoration:none;color:#333;}
.slidesjs-previous{}
.slidesjs-next{}
.slidesjs-navigation a:hover{color:#C00}
.slidesjs-pagination{float:left;margin-top:15px;padding-left:5px;}
.slidesjs-pagination li{float:left;padding:0 3px;}
.slidesjs-pagination li a{display:block;width: 13px;height:0;padding-top:13px;background:url(images/pagination.png) 0 0;overflow:hidden;}
.slidesjs-pagination li a.active,.slidesjs-pagination li a:hover.active {background-position: 0 -13px}
.slidesjs-pagination li a:hover {background-position: 0 -26px}
@media (max-width: 767px) {
      .container {
        width: auto
      }
    }

    @media (max-width: 480px) {
      .container {
        width: auto
      }
    }

    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px
      }
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 1170px
      }
    }
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.slides.js"></script>
<script>
    $(function(){
      $("#slides").slidesjs({
        width: 700,
        height: 350,
		start: 1,//控制从第几张图开始播放
	//控制前后按钮 
	  navigation:{
      active: false,//是否开启左右按钮
      effect: "fade"//触发按钮时，焦点图切换的特效，可选参数"slide"和"fade"
    }
      });
    });
  </script>
</head>

<body>
<div class="container">
<div id="slides">
    <img src="images/1.jpg">
	<img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <div class="slidesjs-navigation">
    <a href="javascript:;" class="slidesjs-previous " title="">&lt;</a>
    <a href="javascript:;" class="slidesjs-next" title="">&gt;</a>
    </div>
  </div>
  </div>
</body>
</html>

JS代码(jquery.slides.js):

(function(){
	(function($,window,document){
	var Plugin,defaults,pluginName;
	pluginName = "slidesjs";
	defaults ={
	width:940,height:528,start:1,navigation:{
	active:true,effect:"slide"}
,pagination:{
	active:true,effect:"slide"}
,play:{
	active:false,effect:"slide",interval:5000,auto:false,swap:true,pauseOnHover:false,restartDelay:2500}
,effect:{
	slide:{
	speed:500}
,fade:{
	speed:300,crossfade:true}
}
,callback:{
	loaded:function(){
}
,start:function(){
}
,complete:function(){
}
}
}
;
	Plugin = (function(){
	function Plugin(element,options){
	this.element = element;
	this.options = $.extend(true,{
}
,defaults,options);
	this._defaults = defaults;
	this._name = pluginName;
	this.init();
}
return Plugin;
}
)();
	Plugin.prototype.init = function(){
	var $element,nextButton,pagination,playButton,prevButton,stopButton,_this = this;
	$element = $(this.element);
	this.data = $.data(this);
	$.data(this,"animating",false);
	$.data(this,"total",$element.children().not(".slidesjs-navigation",$element).length);
	$.data(this,"current",this.options.start - 1);
	$.data(this,"vendorPrefix",this._getVendorPrefix());
	if (typeof TouchEvent !== "undefined"){
	$.data(this,"touch",true);
	this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
}
$element.css({
	overflow:"hidden"}
);
	$element.slidesContainer = $element.children().not(".slidesjs-navigation",$element).wrapAll("<div class='slidesjs-container'>",$element).parent().css({
	overflow:"hidden",position:"relative"}
);
	$(".slidesjs-container",$element).wrapInner("<div class='slidesjs-control'>",$element).children();
	$(".slidesjs-control",$element).css({
	position:"relative",left:0}
);
	$(".slidesjs-control",$element).children().addClass("slidesjs-slide").css({
	position:"absolute",top:0,left:0,width:"100%",zIndex:0,display:"none",webkitBackfaceVisibility:"hidden"}
);
	$.each($(".slidesjs-control",$element).children(),function(i){
	var $slide;
	$slide = $(this);
	return $slide.attr("slidesjs-index",i);
}
);
	if (this.data.touch){
	$(".slidesjs-control",$element).on("touchstart",function(e){
	return _this._touchstart(e);
}
);
	$(".slidesjs-control",$element).on("touchmove",function(e){
	return _this._touchmove(e);
}
);
	$(".slidesjs-control",$element).on("touchend",function(e){
	return _this._touchend(e);
}
);
}
$element.fadeIn(0);
	this.update();
	if (this.data.touch){
	this._setuptouch();
}
$(".slidesjs-control",$element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0,function(){
	return $(this).css({
	zIndex:10}
);
}
);
	if (this.options.navigation.active){
	prevButton = $("<a>",{
	"class":"slidesjs-previous slidesjs-navigation",href:"#",title:"Previous",text:"Previous"}
).appendTo($element);
	nextButton = $("<a>",{
	"class":"slidesjs-next slidesjs-navigation",href:"#",title:"Next",text:"Next"}
).appendTo($element);
}
$(".slidesjs-next",$element).click(function(e){
	e.preventDefault();
	_this.stop(true);
	return _this.next(_this.options.navigation.effect);
}
);
	$(".slidesjs-previous",$element).click(function(e){
	e.preventDefault();
	_this.stop(true);
	return _this.previous(_this.options.navigation.effect);
}
);
	if (this.options.play.active){
	playButton = $("<a>",{
	"class":"slidesjs-play slidesjs-navigation",href:"#",title:"Play",text:"Play"}
).appendTo($element);
	stopButton = $("<a>",{
	"class":"slidesjs-stop slidesjs-navigation",href:"#",title:"Stop",text:"Stop"}
).appendTo($element);
	playButton.click(function(e){
	e.preventDefault();
	return _this.play(true);
}
);
	stopButton.click(function(e){
	e.preventDefault();
	return _this.stop(true);
}
);
	if (this.options.play.swap){
	stopButton.css({
	display:"none"}
);
}
}
if (this.options.pagination.active){
	pagination = $("<ul>",{
	"class":"slidesjs-pagination"}
).appendTo($element);
	$.each(new Array(this.data.total),function(i){
	var paginationItem,paginationLink;
	paginationItem = $("<li>",{
	"class":"slidesjs-pagination-item"}
).appendTo(pagination);
	paginationLink = $("<a>",{
	href:"#","data-slidesjs-item":i,html:i + 1}
).appendTo(paginationItem);
	return paginationLink.click(function(e){
	e.preventDefault();
	_this.stop(true);
	return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
}
);
}
);
}
$(window).bind("resize",function(){
	return _this.update();
}
);
	this._setActive();
	if (this.options.play.auto){
	this.play();
}
return this.options.callback.loaded(this.options.start);
}
;
	Plugin.prototype._setActive = function(number){
	var $element,current;
	$element = $(this.element);
	this.data = $.data(this);
	current = number > -1 ? number:this.data.current;
	$(".active",$element).removeClass("active");
	return $(".slidesjs-pagination li:eq(" + current + ") a",$element).addClass("active");
}
;
	Plugin.prototype.update = function(){
	var $element,height,width;
	$element = $(this.element);
	this.data = $.data(this);
	$(".slidesjs-control",$element).children(":not(:eq(" + this.data.current + "))").css({
	display:"none",left:0,zIndex:0}
);
	width = $element.width();
	height = (this.options.height / this.options.width) * width;
	this.options.width = width;
	this.options.height = height;
	return $(".slidesjs-control,.slidesjs-container",$element).css({
	width:width,height:height}
);
}
;
	Plugin.prototype.next = function(effect){
	var $element;
	$element = $(this.element);
	this.data = $.data(this);
	$.data(this,"direction","next");
	if (effect === void 0){
	effect = this.options.navigation.effect;
}
if (effect === "fade"){
	return this._fade();
}
else{
	return this._slide();
}
}
;
	Plugin.prototype.previous = function(effect){
	var $element;
	$element = $(this.element);
	this.data = $.data(this);
	$.data(this,"direction","previous");
	if (effect === void 0){
	effect = this.options.navigation.effect;
}
if (effect === "fade"){
	return this._fade();
}
else{
	return this._slide();
}
}
;
	Plugin.prototype.goto = function(number){
	var $element,effect;
	$element = $(this.element);
	this.data = $.data(this);
	if (effect === void 0){
	effect = this.options.pagination.effect;
}
if (number > this.data.total){
	number = this.data.total;
}
else if (number < 1){
	number = 1;
}
if (typeof number === "number"){
	if (effect === "fade"){
	return this._fade(number);
}
else{
	return this._slide(number);
}
}
else if (typeof number === "string"){
	if (number === "first"){
	if (effect === "fade"){
	return this._fade(0);
}
else{
	return this._slide(0);
}
}
else if (number === "last"){
	if (effect === "fade"){
	return this._fade(this.data.total);
}
else{
	return this._slide(this.data.total);
}
}
}
}
;
	Plugin.prototype._setuptouch = function(){
	var $element,next,previous,slidesControl;
	$element = $(this.element);
	this.data = $.data(this);
	slidesControl = $(".slidesjs-control",$element);
	next = this.data.current + 1;
	previous = this.data.current - 1;
	if (previous < 0){
	previous = this.data.total - 1;
}
if (next > this.data.total - 1){
	next = 0;
}
slidesControl.children(":eq(" + next + ")").css({
	display:"block",left:this.options.width}
);
	return slidesControl.children(":eq(" + previous + ")").css({
	display:"block",left:-this.options.width}
);
}
;
	Plugin.prototype._touchstart = function(e){
	var $element,touches;
	$element = $(this.element);
	this.data = $.data(this);
	touches = e.originalEvent.touches[0];
	this._setuptouch();
	$.data(this,"touchtimer",Number(new Date()));
	$.data(this,"touchstartx",touches.pageX);
	$.data(this,"touchstarty",touches.pageY);
	return e.stopPropagation();
}
;
	Plugin.prototype._touchend = function(e){
	var $element,duration,prefix,slidesControl,timing,touches,transform,_this = this;
	$element = $(this.element);
	this.data = $.data(this);
	touches = e.originalEvent.touches[0];
	slidesControl = $(".slidesjs-control",$element);
	if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)){
	$.data(this,"direction","previous");
	this._slide();
}
else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)){
	$.data(this,"direction","next");
	this._slide();
}
else{
	prefix = this.data.vendorPrefix;
	transform = prefix + "Transform";
	duration = prefix + "TransitionDuration";
	timing = prefix + "TransitionTimingFunction";
	slidesControl[0].style[transform] = "translateX(0px)";
	slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
}
slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
	prefix = _this.data.vendorPrefix;
	transform = prefix + "Transform";
	duration = prefix + "TransitionDuration";
	timing = prefix + "TransitionTimingFunction";
	slidesControl[0].style[transform] = "";
	slidesControl[0].style[duration] = "";
	return slidesControl[0].style[timing] = "";
}
);
	return e.stopPropagation();
}
;
	Plugin.prototype._touchmove = function(e){
	var $element,prefix,slidesControl,touches,transform;
	$element = $(this.element);
	this.data = $.data(this);
	touches = e.originalEvent.touches[0];
	prefix = this.data.vendorPrefix;
	slidesControl = $(".slidesjs-control",$element);
	transform = prefix + "Transform";
	$.data(this,"scrolling",Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
	if (!this.data.animating && !this.data.scrolling){
	e.preventDefault();
	this._setuptouch();
	slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
}
return e.stopPropagation();
}
;
	Plugin.prototype.play = function(next){
	var $element,currentSlide,slidesContainer,_this = this;
	$element = $(this.element);
	this.data = $.data(this);
	if (!this.data.playInterval){
	if (next){
	currentSlide = this.data.current;
	this.data.direction = "next";
	if (this.options.play.effect === "fade"){
	this._fade();
}
else{
	this._slide();
}
}
$.data(this,"playInterval",setInterval((function(){
	currentSlide = _this.data.current;
	_this.data.direction = "next";
	if (_this.options.play.effect === "fade"){
	return _this._fade();
}
else{
	return _this._slide();
}
}
),this.options.play.interval));
	slidesContainer = $(".slidesjs-container",$element);
	if (this.options.play.pauseOnHover){
	slidesContainer.unbind();
	slidesContainer.bind("mouseenter",function(){
	return _this.stop();
}
);
	slidesContainer.bind("mouseleave",function(){
	if (_this.options.play.restartDelay){
	return $.data(_this,"restartDelay",setTimeout((function(){
	return _this.play(true);
}
),_this.options.play.restartDelay));
}
else{
	return _this.play();
}
}
);
}
$.data(this,"playing",true);
	$(".slidesjs-play",$element).addClass("slidesjs-playing");
	if (this.options.play.swap){
	$(".slidesjs-play",$element).hide();
	return $(".slidesjs-stop",$element).show();
}
}
}
;
	Plugin.prototype.stop = function(clicked){
	var $element;
	$element = $(this.element);
	this.data = $.data(this);
	clearInterval(this.data.playInterval);
	if (this.options.play.pauseOnHover && clicked){
	$(".slidesjs-container",$element).unbind();
}
$.data(this,"playInterval",null);
	$.data(this,"playing",false);
	$(".slidesjs-play",$element).removeClass("slidesjs-playing");
	if (this.options.play.swap){
	$(".slidesjs-stop",$element).hide();
	return $(".slidesjs-play",$element).show();
}
}
;
	Plugin.prototype._slide = function(number){
	var $element,currentSlide,direction,duration,next,prefix,slidesControl,timing,transform,value,_this = this;
	$element = $(this.element);
	this.data = $.data(this);
	if (!this.data.animating && number !== this.data.current + 1){
	$.data(this,"animating",true);
	currentSlide = this.data.current;
	if (number > -1){
	number = number - 1;
	value = number > currentSlide ? 1:-1;
	direction = number > currentSlide ? -this.options.width:this.options.width;
	next = number;
}
else{
	value = this.data.direction === "next" ? 1:-1;
	direction = this.data.direction === "next" ? -this.options.width:this.options.width;
	next = currentSlide + value;
}
if (next === -1){
	next = this.data.total - 1;
}
if (next === this.data.total){
	next = 0;
}
this._setActive(next);
	slidesControl = $(".slidesjs-control",$element);
	if (number > -1){
	slidesControl.children(":not(:eq(" + currentSlide + "))").css({
	display:"none",left:0,zIndex:0}
);
}
slidesControl.children(":eq(" + next + ")").css({
	display:"block",left:value * this.options.width,zIndex:10}
);
	this.options.callback.start(currentSlide + 1);
	if (this.data.vendorPrefix){
	prefix = this.data.vendorPrefix;
	transform = prefix + "Transform";
	duration = prefix + "TransitionDuration";
	timing = prefix + "TransitionTimingFunction";
	slidesControl[0].style[transform] = "translateX(" + direction + "px)";
	slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
	return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
	slidesControl[0].style[transform] = "";
	slidesControl[0].style[duration] = "";
	slidesControl.children(":eq(" + next + ")").css({
	left:0}
);
	slidesControl.children(":eq(" + currentSlide + ")").css({
	display:"none",left:0,zIndex:0}
);
	$.data(_this,"current",next);
	$.data(_this,"animating",false);
	slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
	slidesControl.children(":not(:eq(" + next + "))").css({
	display:"none",left:0,zIndex:0}
);
	if (_this.data.touch){
	_this._setuptouch();
}
return _this.options.callback.complete(next + 1);
}
);
}
else{
	return slidesControl.stop().animate({
	left:direction}
,this.options.effect.slide.speed,(function(){
	slidesControl.css({
	left:0}
);
	slidesControl.children(":eq(" + next + ")").css({
	left:0}
);
	return slidesControl.children(":eq(" + currentSlide + ")").css({
	display:"none",left:0,zIndex:0}
,$.data(_this,"current",next),$.data(_this,"animating",false),_this.options.callback.complete(next + 1));
}
));
}
}
}
;
	Plugin.prototype._fade = function(number){
	var $element,currentSlide,next,slidesControl,value,_this = this;
	$element = $(this.element);
	this.data = $.data(this);
	if (!this.data.animating && number !== this.data.current + 1){
	$.data(this,"animating",true);
	currentSlide = this.data.current;
	if (number){
	number = number - 1;
	value = number > currentSlide ? 1:-1;
	next = number;
}
else{
	value = this.data.direction === "next" ? 1:-1;
	next = currentSlide + value;
}
if (next === -1){
	next = this.data.total - 1;
}
if (next === this.data.total){
	next = 0;
}
this._setActive(next);
	slidesControl = $(".slidesjs-control",$element);
	slidesControl.children(":eq(" + next + ")").css({
	display:"none",left:0,zIndex:10}
);
	this.options.callback.start(currentSlide + 1);
	if (this.options.effect.fade.crossfade){
	slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
	return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed,(function(){
	slidesControl.children(":eq(" + next + ")").css({
	zIndex:0}
);
	$.data(_this,"animating",false);
	$.data(_this,"current",next);
	return _this.options.callback.complete(next + 1);
}
));
}
else{
	return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed,(function(){
	slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed,(function(){
	return slidesControl.children(":eq(" + next + ")").css({
	zIndex:10}
);
}
));
	$.data(_this,"animating",false);
	$.data(_this,"current",next);
	return _this.options.callback.complete(next + 1);
}
));
}
}
}
;
	Plugin.prototype._getVendorPrefix = function(){
	var body,i,style,transition,vendor;
	body = document.body || document.documentElement;
	style = body.style;
	transition = "transition";
	vendor = ["Moz","Webkit","Khtml","O","ms"];
	transition = transition.charAt(0).toUpperCase() + transition.substr(1);
	i = 0;
	while (i < vendor.length){
	if (typeof style[vendor[i] + transition] === "string"){
	return vendor[i];
}
i++;
}
return false;
}
;
	return $.fn[pluginName] = function(options){
	return this.each(function(){
	if (!$.data(this,"plugin_" + pluginName)){
	return $.data(this,"plugin_" + pluginName,new Plugin(this,options));
}
}
);
}
;
}
)(jQuery,window,document);
}
).call(this);

CSS代码(example.css):

/*! * Bootstrap v2.2.2 * * Copyright 2012 Twitter,Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. */
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
a:hover,a:active{outline:0;}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{/* Responsive images (ensure images don't scale beyond their parents) */
 max-width:100%;/* Part 1:Set a maxium relative to the parent */
 width:auto\9;/* IE7-8 need help adjusting responsive images */
 height:auto;/* Part 2:Scale the height according to the width,otherwise you get stretching */
 vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
#map_canvas img,.google-maps img{max-width:none;}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;}
button,input{*overflow:visible;line-height:normal;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
label,select,button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer;}
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}
a,a:visited{text-decoration:underline;}
a[href]:after{content:" (" attr(href) ")";}
abbr[title]:after{content:" (" attr(title) ")";}
.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}
pre,blockquote{border:1px solid #999;page-break-inside:avoid;}
thead{display:table-header-group;}
tr,img{page-break-inside:avoid;}
img{max-width:100% !important;}
@page{margin:0.5cm;}
p,h2,h3{orphans:3;widows:3;}
h2,h3{page-break-after:avoid;}
}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;color:#333333;background-color:#ffffff;}
/*a{color:#0088cc;text-decoration:none;}
a:hover{color:#005580;text-decoration:underline;}
*/
.img-rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.img-polaroid{padding:4px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.img-circle{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;}
.row{margin-left:-20px;*zoom:1;}
.row:before,.row:after{display:table;content:"";line-height:0;}
.row:after{clear:both;}
[class*="span"]{float:left;min-height:1px;margin-left:20px;}
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px;}
.span12{width:940px;}
.span11{width:860px;}
.span10{width:780px;}
.span9{width:700px;}
.span8{width:620px;}
.span7{width:540px;}
.span6{width:460px;}
.span5{width:380px;}
.span4{width:300px;}
.span3{width:220px;}
.span2{width:140px;}
.span1{width:60px;}
.offset12{margin-left:980px;}
.offset11{margin-left:900px;}
.offset10{margin-left:820px;}
.offset9{margin-left:740px;}
.offset8{margin-left:660px;}
.offset7{margin-left:580px;}
.offset6{margin-left:500px;}
.offset5{margin-left:420px;}
.offset4{margin-left:340px;}
.offset3{margin-left:260px;}
.offset2{margin-left:180px;}
.offset1{margin-left:100px;}
.row-fluid{width:100%;*zoom:1;}
.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;}
.row-fluid:after{clear:both;}
.row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;}
.row-fluid [class*="span"]:first-child{margin-left:0;}
.row-fluid .controls-row [class*="span"] + [class*="span"]{margin-left:2.127659574468085%;}
.row-fluid .span12{width:100%;*width:99.94680851063829%;}
.row-fluid .span11{width:91.48936170212765%;*width:91.43617021276594%;}
.row-fluid .span10{width:82.97872340425532%;*width:82.92553191489361%;}
.row-fluid .span9{width:74.46808510638297%;*width:74.41489361702126%;}
.row-fluid .span8{width:65.95744680851064%;*width:65.90425531914893%;}
.row-fluid .span7{width:57.44680851063829%;*width:57.39361702127659%;}
.row-fluid .span6{width:48.93617021276595%;*width:48.88297872340425%;}
.row-fluid .span5{width:40.42553191489362%;*width:40.37234042553192%;}
.row-fluid .span4{width:31.914893617021278%;*width:31.861702127659576%;}
.row-fluid .span3{width:23.404255319148934%;*width:23.351063829787233%;}
.row-fluid .span2{width:14.893617021276595%;*width:14.840425531914894%;}
.row-fluid .span1{width:6.382978723404255%;*width:6.329787234042553%;}
.row-fluid .offset12{margin-left:104.25531914893617%;*margin-left:104.14893617021275%;}
.row-fluid .offset12:first-child{margin-left:102.12765957446808%;*margin-left:102.02127659574467%;}
.row-fluid .offset11{margin-left:95.74468085106382%;*margin-left:95.6382978723404%;}
.row-fluid .offset11:first-child{margin-left:93.61702127659574%;*margin-left:93.51063829787232%;}
.row-fluid .offset10{margin-left:87.23404255319149%;*margin-left:87.12765957446807%;}
.row-fluid .offset10:first-child{margin-left:85.1063829787234%;*margin-left:84.99999999999999%;}
.row-fluid .offset9{margin-left:78.72340425531914%;*margin-left:78.61702127659572%;}
.row-fluid .offset9:first-child{margin-left:76.59574468085106%;*margin-left:76.48936170212764%;}
.row-fluid .offset8{margin-left:70.2127659574468%;*margin-left:70.10638297872339%;}
.row-fluid .offset8:first-child{margin-left:68.08510638297872%;*margin-left:67.9787234042553%;}
.row-fluid .offset7{margin-left:61.70212765957446%;*margin-left:61.59574468085106%;}
.row-fluid .offset7:first-child{margin-left:59.574468085106375%;*margin-left:59.46808510638297%;}
.row-fluid .offset6{margin-left:53.191489361702125%;*margin-left:53.085106382978715%;}
.row-fluid .offset6:first-child{margin-left:51.063829787234035%;*margin-left:50.95744680851063%;}
.row-fluid .offset5{margin-left:44.68085106382979%;*margin-left:44.57446808510638%;}
.row-fluid .offset5:first-child{margin-left:42.5531914893617%;*margin-left:42.4468085106383%;}
.row-fluid .offset4{margin-left:36.170212765957444%;*margin-left:36.06382978723405%;}
.row-fluid .offset4:first-child{margin-left:34.04255319148936%;*margin-left:33.93617021276596%;}
.row-fluid .offset3{margin-left:27.659574468085104%;*margin-left:27.5531914893617%;}
.row-fluid .offset3:first-child{margin-left:25.53191489361702%;*margin-left:25.425531914893618%;}
.row-fluid .offset2{margin-left:19.148936170212764%;*margin-left:19.04255319148936%;}
.row-fluid .offset2:first-child{margin-left:17.02127659574468%;*margin-left:16.914893617021278%;}
.row-fluid .offset1{margin-left:10.638297872340425%;*margin-left:10.53191489361702%;}
.row-fluid .offset1:first-child{margin-left:8.51063829787234%;*margin-left:8.404255319148938%;}
[class*="span"].hide,.row-fluid [class*="span"].hide{display:none;}
[class*="span"].pull-right,.row-fluid [class*="span"].pull-right{float:right;}
.container{margin-right:auto;margin-left:auto;*zoom:1;}
.container:before,.container:after{display:table;content:"";line-height:0;}
.container:after{clear:both;}
.container-fluid{padding-right:20px;padding-left:20px;*zoom:1;}
.container-fluid:before,.container-fluid:after{display:table;content:"";line-height:0;}
.container-fluid:after{clear:both;}
.btn{display:inline-block;*display:inline;/* IE7 inline-block hack */
 *zoom:1;padding:4px 12px;margin-bottom:0;font-size:14px;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333333;text-shadow:0 1px 1px rgba(255,255,255,0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);background-image:linear-gradient(to bottom,#ffffff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#e6e6e6;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border:1px solid #bbbbbb;*border:0;border-bottom-color:#a2a2a2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*margin-left:.3em;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);}
.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{color:#333333;background-color:#e6e6e6;*background-color:#d9d9d9;}
.btn:active,.btn.active{background-color:#cccccc \9;}
.btn:first-child{*margin-left:0;}
.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}
.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);}
.btn.disabled,.btn[disabled]{cursor:default;background-image:none;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-large{padding:11px 19px;font-size:17.5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn-large [class^="icon-"],.btn-large [class*=" icon-"]{margin-top:4px;}
.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn-small [class^="icon-"],.btn-small [class*=" icon-"]{margin-top:0;}
.btn-mini [class^="icon-"],.btn-mini [class*=" icon-"]{margin-top:-1px;}
.btn-mini{padding:0 6px;font-size:10.5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.btn-block{display:block;width:100%;padding-left:0;padding-right:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn-block + .btn-block{margin-top:5px;}
input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%;}
.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active{color:rgba(255,255,255,0.75);}
.btn{border-color:#c5c5c5;border-color:rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25);}
.btn-primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#006dcc;background-image:-moz-linear-gradient(top,#0088cc,#0044cc);background-image:-webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));background-image:-webkit-linear-gradient(top,#0088cc,#0044cc);background-image:-o-linear-gradient(top,#0088cc,#0044cc);background-image:linear-gradient(to bottom,#0088cc,#0044cc);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);border-color:#0044cc #0044cc #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#0044cc;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#ffffff;background-color:#0044cc;*background-color:#003bb3;}
.btn-primary:active,.btn-primary.active{background-color:#003399 \9;}
.btn-warning{color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#f89406;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#ffffff;background-color:#f89406;*background-color:#df8505;}
.btn-warning:active,.btn-warning.active{background-color:#c67605 \9;}
.btn-danger{color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#da4f49;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffbd362f',GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#bd362f;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#ffffff;background-color:#bd362f;*background-color:#a9302a;}
.btn-danger:active,.btn-danger.active{background-color:#942a25 \9;}
.btn-success{color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#5bb75b;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff51a351',GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#51a351;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#ffffff;background-color:#51a351;*background-color:#499249;}
.btn-success:active,.btn-success.active{background-color:#408140 \9;}
.btn-info{color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#2f96b4;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#ffffff;background-color:#2f96b4;*background-color:#2a85a0;}
.btn-info:active,.btn-info.active{background-color:#24748c \9;}
.btn-inverse{color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#363636;background-image:-moz-linear-gradient(top,#444444,#222222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#444444),to(#222222));background-image:-webkit-linear-gradient(top,#444444,#222222);background-image:-o-linear-gradient(top,#444444,#222222);background-image:linear-gradient(to bottom,#444444,#222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);border-color:#222222 #222222 #000000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#222222;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#ffffff;background-color:#222222;*background-color:#151515;}
.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9;}
button.btn,input[type="submit"].btn{*padding-top:3px;*padding-bottom:3px;}
button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0;}
button.btn.btn-large,input[type="submit"].btn.btn-large{*padding-top:7px;*padding-bottom:7px;}
button.btn.btn-small,input[type="submit"].btn.btn-small{*padding-top:3px;*padding-bottom:3px;}
button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-bottom:1px;}
.btn-link,.btn-link:active,.btn-link[disabled]{background-color:transparent;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.btn-link{border-color:transparent;cursor:pointer;color:#0088cc;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.btn-link:hover{color:#005580;text-decoration:underline;background-color:transparent;}
.btn-link[disabled]:hover{color:#333333;text-decoration:none;}
.btn-group{position:relative;display:inline-block;*display:inline;/* IE7 inline-block hack */
 *zoom:1;font-size:0;vertical-align:middle;white-space:nowrap;*margin-left:.3em;}
.btn-group:first-child{*margin-left:0;}
.btn-group + .btn-group{margin-left:5px;}
.btn-toolbar{font-size:0;margin-top:10px;margin-bottom:10px;}
.btn-toolbar > .btn + .btn,.btn-toolbar > .btn-group + .btn,.btn-toolbar > .btn + .btn-group{margin-left:5px;}
.btn-group > .btn{position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.btn-group > .btn + .btn{margin-left:-1px;}
.btn-group > .btn,.btn-group > .dropdown-menu,.btn-group > .popover{font-size:14px;}
.btn-group > .btn-mini{font-size:10.5px;}
.btn-group > .btn-small{font-size:11.9px;}
.btn-group > .btn-large{font-size:17.5px;}
.btn-group > .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
.btn-group > .btn:last-child,.btn-group > .dropdown-toggle{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
.btn-group > .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;}
.btn-group > .btn.large:last-child,.btn-group > .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
.btn-group > .btn:hover,.btn-group > .btn:focus,.btn-group > .btn:active,.btn-group > .btn.active{z-index:2;}
.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0;}
.btn-group > .btn + .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.125),inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.125),inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(255,255,255,.125),inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);*padding-top:5px;*padding-bottom:5px;}
.btn-group > .btn-mini + .dropdown-toggle{padding-left:5px;padding-right:5px;*padding-top:2px;*padding-bottom:2px;}
.btn-group > .btn-small + .dropdown-toggle{*padding-top:5px;*padding-bottom:4px;}
.btn-group > .btn-large + .dropdown-toggle{padding-left:12px;padding-right:12px;*padding-top:7px;*padding-bottom:7px;}
.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);}
.btn-group.open .btn.dropdown-toggle{background-color:#e6e6e6;}
.btn-group.open .btn-primary.dropdown-toggle{background-color:#0044cc;}
.btn-group.open .btn-warning.dropdown-toggle{background-color:#f89406;}
.btn-group.open .btn-danger.dropdown-toggle{background-color:#bd362f;}
.btn-group.open .btn-success.dropdown-toggle{background-color:#51a351;}
.btn-group.open .btn-info.dropdown-toggle{background-color:#2f96b4;}
.btn-group.open .btn-inverse.dropdown-toggle{background-color:#222222;}
.btn .caret{margin-top:8px;margin-left:0;}
.btn-mini .caret,.btn-small .caret,.btn-large .caret{margin-top:6px;}
.btn-large .caret{border-left-width:5px;border-right-width:5px;border-top-width:5px;}
.dropup .btn-large .caret{border-bottom-width:5px;}
.btn-primary .caret,.btn-warning .caret,.btn-danger .caret,.btn-info .caret,.btn-success .caret,.btn-inverse .caret{border-top-color:#ffffff;border-bottom-color:#ffffff;}
.btn-group-vertical{display:inline-block;*display:inline;/* IE7 inline-block hack */
 *zoom:1;}
.btn-group-vertical > .btn{display:block;float:none;max-width:100%;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.btn-group-vertical > .btn + .btn{margin-left:0;margin-top:-1px;}
.btn-group-vertical > .btn:first-child{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}
.btn-group-vertical > .btn:last-child{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}
.btn-group-vertical > .btn-large:first-child{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;}
.btn-group-vertical > .btn-large:last-child{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;}
.navbar{overflow:visible;margin-bottom:20px;*position:relative;*z-index:2;}
.navbar-inner{min-height:40px;padding-left:20px;padding-right:20px;background-color:#fafafa;background-image:-moz-linear-gradient(top,#ffffff,#f2f2f2);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#f2f2f2));background-image:-webkit-linear-gradient(top,#ffffff,#f2f2f2);background-image:-o-linear-gradient(top,#ffffff,#f2f2f2);background-image:linear-gradient(to bottom,#ffffff,#f2f2f2);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#fff2f2f2',GradientType=0);border:1px solid #d4d4d4;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.065);-moz-box-shadow:0 1px 4px rgba(0,0,0,0.065);box-shadow:0 1px 4px rgba(0,0,0,0.065);*zoom:1;}
.navbar-inner:before,.navbar-inner:after{display:table;content:"";line-height:0;}
.navbar-inner:after{clear:both;}
.navbar .container{width:auto !important;}
.nav-collapse.collapse{height:auto;overflow:visible;}
.navbar .brand{float:left;display:block;padding:10px 20px 10px;margin-left:-20px;font-size:20px;font-weight:200;color:#777777;text-shadow:0 1px 0 #ffffff;}
.navbar .brand.pull-right{float:right;}
.navbar .brand:hover{text-decoration:none;}
.navbar-text{margin-bottom:0;line-height:40px;color:#777777;}
.navbar-link{color:#777777;}
.navbar-link:hover{color:#333333;}
.navbar .divider-vertical{height:40px;margin:0 9px;border-left:1px solid #f2f2f2;border-right:1px solid #ffffff;}
.navbar .btn,.navbar .btn-group{margin-top:5px;}
.navbar .btn-group .btn,.navbar .input-prepend .btn,.navbar .input-append .btn{margin-top:0;}
.navbar-static-top{position:static;margin-bottom:0;}
.navbar-static-top .navbar-inner{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030;margin-bottom:0;}
.navbar-fixed-top .navbar-inner,.navbar-static-top .navbar-inner{border-width:0 0 1px;}
.navbar-fixed-bottom .navbar-inner{border-width:1px 0 0;}
.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding-left:0;padding-right:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px;}
.navbar-fixed-top{top:0;}
.navbar-fixed-top .navbar-inner,.navbar-static-top .navbar-inner{-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);box-shadow:0 1px 10px rgba(0,0,0,.1);}
.navbar-fixed-bottom{bottom:0;}
.navbar-fixed-bottom .navbar-inner{-webkit-box-shadow:0 -1px 10px rgba(0,0,0,.1);-moz-box-shadow:0 -1px 10px rgba(0,0,0,.1);box-shadow:0 -1px 10px rgba(0,0,0,.1);}
.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;padding:0;}
.navbar .nav.pull-right{float:right;margin-right:0;}
.navbar .nav > li{float:left;}
.navbar .nav > li > a{float:none;padding:10px 15px 10px;color:#777777;text-decoration:none;text-shadow:0 1px 0 #ffffff;}
.navbar .nav .dropdown-toggle .caret{margin-top:8px;}
.navbar .nav > li > a:focus,.navbar .nav > li > a:hover{background-color:transparent;color:#333333;text-decoration:none;}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover,.navbar .nav > .active > a:focus{color:#555555;text-decoration:none;background-color:#e5e5e5;-webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);-moz-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);}
.navbar .btn-navbar{display:none;float:right;padding:7px 10px;margin-left:5px;margin-right:5px;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#ededed;background-image:-moz-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:-webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#e5e5e5));background-image:-webkit-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:-o-linear-gradient(top,#f2f2f2,#e5e5e5);background-image:linear-gradient(to bottom,#f2f2f2,#e5e5e5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2',endColorstr='#ffe5e5e5',GradientType=0);border-color:#e5e5e5 #e5e5e5 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#e5e5e5;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.075);}
.navbar .btn-navbar:hover,.navbar .btn-navbar:active,.navbar .btn-navbar.active,.navbar .btn-navbar.disabled,.navbar .btn-navbar[disabled]{color:#ffffff;background-color:#e5e5e5;*background-color:#d9d9d9;}
.navbar .btn-navbar:active,.navbar .btn-navbar.active{background-color:#cccccc \9;}
.navbar .btn-navbar .icon-bar{display:block;width:18px;height:2px;background-color:#f5f5f5;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.25);}
.btn-navbar .icon-bar + .icon-bar{margin-top:3px;}
.navbar .nav > li > .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);position:absolute;top:-7px;left:9px;}
.navbar .nav > li > .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffffff;position:absolute;top:-6px;left:10px;}
.navbar-fixed-bottom .nav > li > .dropdown-menu:before{border-top:7px solid #ccc;border-top-color:rgba(0,0,0,0.2);border-bottom:0;bottom:-7px;top:auto;}
.navbar-fixed-bottom .nav > li > .dropdown-menu:after{border-top:6px solid #ffffff;border-bottom:0;bottom:-6px;top:auto;}
.navbar .nav li.dropdown > a:hover .caret{border-top-color:#555555;border-bottom-color:#555555;}
.navbar .nav li.dropdown.open > .dropdown-toggle,.navbar .nav li.dropdown.active > .dropdown-toggle,.navbar .nav li.dropdown.open.active > .dropdown-toggle{background-color:#e5e5e5;color:#555555;}
.navbar .nav li.dropdown > .dropdown-toggle .caret{border-top-color:#777777;border-bottom-color:#777777;}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,.navbar .nav li.dropdown.active > .dropdown-toggle .caret,.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret{border-top-color:#555555;border-bottom-color:#555555;}
.navbar .pull-right > li > .dropdown-menu,.navbar .nav > li > .dropdown-menu.pull-right{left:auto;right:0;}
.navbar .pull-right > li > .dropdown-menu:before,.navbar .nav > li > .dropdown-menu.pull-right:before{left:auto;right:12px;}
.navbar .pull-right > li > .dropdown-menu:after,.navbar .nav > li > .dropdown-menu.pull-right:after{left:auto;right:13px;}
.navbar .pull-right > li > .dropdown-menu .dropdown-menu,.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu{left:auto;right:100%;margin-left:0;margin-right:-1px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.navbar-inverse .navbar-inner{background-color:#1b1b1b;background-image:-moz-linear-gradient(top,#222222,#111111);background-image:-webkit-gradient(linear,0 0,0 100%,from(#222222),to(#111111));background-image:-webkit-linear-gradient(top,#222222,#111111);background-image:-o-linear-gradient(top,#222222,#111111);background-image:linear-gradient(to bottom,#222222,#111111);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222',endColorstr='#ff111111',GradientType=0);border-color:#252525;}
.navbar-inverse .brand,.navbar-inverse .nav > li > a{color:#999999;text-shadow:0 -1px 0 rgba(0,0,0,0.25);}
.navbar-inverse .brand:hover,.navbar-inverse .nav > li > a:hover{color:#ffffff;}
.navbar-inverse .brand{color:#999999;}
.navbar-inverse .navbar-text{color:#999999;}
.navbar-inverse .nav > li > a:focus,.navbar-inverse .nav > li > a:hover{background-color:transparent;color:#ffffff;}
.navbar-inverse .nav .active > a,.navbar-inverse .nav .active > a:hover,.navbar-inverse .nav .active > a:focus{color:#ffffff;background-color:#111111;}
.navbar-inverse .navbar-link{color:#999999;}
.navbar-inverse .navbar-link:hover{color:#ffffff;}
.navbar-inverse .divider-vertical{border-left-color:#111111;border-right-color:#222222;}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle{background-color:#111111;color:#ffffff;}
.navbar-inverse .nav li.dropdown > a:hover .caret{border-top-color:#ffffff;border-bottom-color:#ffffff;}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret{border-top-color:#999999;border-bottom-color:#999999;}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret{border-top-color:#ffffff;border-bottom-color:#ffffff;}
.navbar-inverse .navbar-search .search-query{color:#ffffff;background-color:#515151;border-color:#111111;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.15);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.15);box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.15);-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;}
.navbar-inverse .navbar-search .search-query:-moz-placeholder{color:#cccccc;}
.navbar-inverse .navbar-search .search-query:-ms-input-placeholder{color:#cccccc;}
.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder{color:#cccccc;}
.navbar-inverse .navbar-search .search-query:focus,.navbar-inverse .navbar-search .search-query.focused{padding:5px 15px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.15);-moz-box-shadow:0 0 3px rgba(0,0,0,0.15);box-shadow:0 0 3px rgba(0,0,0,0.15);outline:0;}
.navbar-inverse .btn-navbar{color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#0e0e0e;background-image:-moz-linear-gradient(top,#151515,#040404);background-image:-webkit-gradient(linear,0 0,0 100%,from(#151515),to(#040404));background-image:-webkit-linear-gradient(top,#151515,#040404);background-image:-o-linear-gradient(top,#151515,#040404);background-image:linear-gradient(to bottom,#151515,#040404);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515',endColorstr='#ff040404',GradientType=0);border-color:#040404 #040404 #000000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);*background-color:#040404;/* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.navbar-inverse .btn-navbar:hover,.navbar-inverse .btn-navbar:active,.navbar-inverse .btn-navbar.active,.navbar-inverse .btn-navbar.disabled,.navbar-inverse .btn-navbar[disabled]{color:#ffffff;background-color:#040404;*background-color:#000000;}
.navbar-inverse .btn-navbar:active,.navbar-inverse .btn-navbar.active{background-color:#000000 \9;}
.accordion{margin-bottom:20px;}
.accordion-group{margin-bottom:2px;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.accordion-heading{border-bottom:0;}
.accordion-heading .accordion-toggle{display:block;padding:8px 15px;}
.accordion-toggle{cursor:pointer;}
.accordion-inner{padding:9px 15px;border-top:1px solid #e5e5e5;}
.hidden{display:none;visibility:hidden;}
.visible-phone{display:none !important;}
.visible-tablet{display:none !important;}
.hidden-desktop{display:none !important;}
.visible-desktop{display:inherit !important;}
/* Code example styles*/
body{background:#fcfcfc;-webkit-font-smoothing:antialiased;font:normal 15px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#232525;}
.nav{list-style-type:none;top:8px;}
.nav li{marign:0;padding:0;}
.nav a{font-size:12px;text-transform:uppercase;line-height:1;font-weight:800;color:#afb2b6;text-decoration:none;display:block;float:left;padding:6px 15px 2px;border-radius:10px;margin:0 5px;text-shadow:0 1px 4px rgba(0,0,0,.8);}
.nav .active a,.nav a:hover{color:#fff}
.nav a.active{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(255,255,255,.1),inset 0 -1px 4px rgba(0,0,0,1);background-color:#111;}
/* Ad Packs */
#ad_packs{margin:45px 0 30px 0;width:298px;overflow:hidden;}
#footer.small #ad_packs{margin:0;}
#bsap_aplink{float:right;font-size:10px;}
/* Type styles */
h1{font-size:23px;text-transform:uppercase;}
h2{font-size:18px}
h3{margin:0}
p{font-weight:400;color:#333;margin:0 0 15px;}
small{font-weight:400;color:#333;}
a:link,a:visited{color:#d22929;text-decoration:none;font-weight:600;}
a:hover,a:active{color:#9e2020;text-decoration:none;font-weight:600;}
a.btn{color:#fff;margin-bottom:10px;}
.section{padding-top:30px;}
#footer{font-size:12px;}
#footer .span8{padding-top:20px;}

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