/* CSS for jQuery Orbit Plugin 1.2.3

 * www.ZURB.com/playground

 * Copyright 2010, ZURB

 * Free to use under the MIT license.

 * http://www.opensource.org/licenses/mit-license.php

 

 

 

/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY

   ================================================== */

#featured { 

	width: 990px;

	height: 350px;

	background: # url('loading.gif') no-repeat center center;

	overflow: hidden;

	}

#featured img {

	border-top-width: 0px;

	border-right-width: 0px;

	border-bottom-width: 0px;

	border-left-width: 0px;

	margin-top: 0px;

	}

	

#featured>img,  

#featured>div,

#featured>a { display: none; }









/* CONTAINER

   ================================================== */



div.orbit-wrapper {

    width: 1px;

    height: 1px;

    position: relative; }



div.orbit {

    width: 1px;

    height: 1px;

    position: relative;

    overflow: hidden }



div.orbit>img {

    position: absolute;

    top: 0;

    left: 0;

    display: none;

		}



div.orbit>a {

    border: none;

    position: absolute;

    top: 0;

    left: 0;

    line-height: 0; 

    display: none; }



.orbit>div {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

		}



/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */





/* TIMER

   ================================================== */



div.timer {

    width: 40px;

    height: 40px;

    overflow: hidden;

    position: absolute;

    top: 0px;

    right: 10px;

    opacity: .6;

    cursor: pointer;

    z-index: 1001;
	
	display:none;
	}



span.rotator {

    display: block;

    width: 40px;

    height: 40px;

    position: absolute;

    top: 0;

    left: -20px;

    background: url(rotator-black.png) no-repeat;

	opacity: 0;/*隱藏時間旋轉圓圈*/

    z-index: 3; }



span.mask {

    display: block;

    width: 20px;

    height: 40px;

    position: absolute;

    top: 0;

    right: 0;

    z-index: 2;

	opacity: 0; /*隱藏時間旋轉圓圈*/

    overflow: hidden; }



span.rotator.move {

    left: 0 }



span.mask.move {

    width: 40px;

    left: 0;

    background: url(timer-black.png) repeat 0 0; }



span.pause {

    display: block;

    width: 40px;

    height: 40px;

    position: absolute;

    top: 0;

    left: 0;

    background: url(pause-black.png) no-repeat;

    z-index: 4;

    opacity: 0; }



span.pause.active {

    background: url(pause-black.png) no-repeat 0 -40px }



div.timer:hover span.pause,

span.pause.active {

    opacity: 1 }





/* CAPTIONS 簡介文字

   ================================================== */



.orbit-caption {

    display: none;

    font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }



.orbit-wrapper .orbit-caption {

    background: #000;

    background: rgba(0,0,0,.6);

    z-index: 1000;

    color: #fff;

	text-align: center;

	padding: 0px 0;

    font-size: 13px;

    position: absolute;

    right: 0;

    bottom: 0;

    width: 100%; }





/* DIRECTIONAL NAV 左右箭頭

   ================================================== */



div.slider-nav {

    display: block;

	}



div.slider-nav span {

    width: 35px;

    height: 83px;

    text-indent: -9999px;

    position: absolute;

    z-index: 1000;

    top: 50%;

    margin-top: -50px;

    cursor: pointer; }



div.slider-nav span.right {

    background: url(right.png);
	background-position:center;
	background-repeat:no-repeat;	
	border:0px;
    left: -35px; }



div.slider-nav span.left {

    background: url(left.png);
	background-position:center;
	background-repeat:no-repeat;
	border:0px;
    right: -35px; }



/* BULLET NAV  圓圈圈

   ================================================== */



.orbit-bullets {

    position: absolute;

    z-index: 1000;

    list-style: none;

    bottom: 80px; /*圓圈圈的垂直位置*/

    left: 99%;

	margin-left: -55px;
	margin-top:10px;

    padding: 0; }



.orbit-bullets li {
	
	margin-right:5px;

    float: left;

    margin-left: 0px;

    cursor: pointer;

    color: #999;

    text-indent: -9999px;

    background: url(bullets.png) no-repeat 0px -80px;

    width: 10px;

    height: 10px;

    overflow: hidden; }



.orbit-bullets li.active {

    color: #222;

    background-position: -10px -80px; }

    

.orbit-bullets li.has-thumb {

    background: none;

    width: 100px;

    height: 75px; }



.orbit-bullets li.active.has-thumb {

    background-position: 0 0;

    border-top: 2px solid #000; }