@charset "utf-8";
/* CSS Document */

.slider{
width:662px;
height:265px;
padding:10px;
background:url(../img/img_slider/article_bg_slider.png) no-repeat top center;
overflow:hidden;
}

.lof-slidecontent{
width:662px;
height:265px;
position:relative;
overflow:hidden;
}

.lof-slidecontent .preload{
height:100%;
width:100%;
background:#FFF;
overflow:hidden;
position:absolute;
top:0;
left:0;
z-index:100000;
color:#FFF;
text-align:center
}

.lof-slidecontent .preload div{
height:100%;
width:100%;
background:transparent url(../img/img_slider/load-indicator.gif) no-repeat scroll 50% 50%;
}

.lof-main-outer{
position:relative;
height:265px;
width:522px;
z-index:3px;
overflow:hidden;
}


/*******************************************************/
.lof-main-item-desc{
z-index:100px;
position:absolute;
top:150px;
left:50px;
width:400px;
background:url(../img/img_slider/transparent_bg.png);

/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
color:#FFF;
margin:0 8px;
padding:8px 0;
}
.lof-main-item-desc h3 a{
color:#FFF;
margin:0;
font-size:140%;
padding:20px 8px 2px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}

.lof-main-item-desc h3 a:hover{
color:#FF6;
text-decoration:underline;
}

/* main flash */
ul.lof-main-wapper{
width:522px;
height:265px;
/* margin-right:auto; */
margin:0;
padding:0px;
background:transparent url(../img/img_slider/load-indicator.gif) no-repeat scroll 50% 50%;
position:absolute;
overflow:hidden;
}

ul.lof-main-wapper li{
width:522px;
height:265px;
overflow:hidden;
padding:0px;
margin:0px;
float:left;
}

.lof-opacity li{
position:absolute;
top:0;
left:0;
float:inherit;
}

ul.lof-main-wapper li img{
padding:0px;
width:522px;
height:265px;
}

/* item navigator */

.lof-navigator-outer{
position:absolute;
right:0;
top:0px;
z-index:100;
width:153px;
height:265px;
overflow:hidden;
color:#FFF;
}

/* move the navigator to the left side */
.lof-snleft .lof-navigator-outer{
left:0;
top:0;
right:inherit;
}

.lof-snleft .lof-navigator .active{
background:url(../img/img_slider/arrow-bg2.png) center right no-repeat;
}

.lof-snleft .lof-navigator li.active div{
margin-left:inherit;
margin-right:18px;
background:url(../img/img_slider/grad-bg2.gif)
}

ul.lof-navigator{
top:0;
padding:0;
margin:0;
position:absolute;
width:153px;
}

ul.lof-navigator li{
width:153px !important;
/width:140px !important;
height:88px !important;
margin:0;
padding:0;
cursor:hand; 
cursor:pointer;
list-style:none;
overflow:hidden;
}

.lof-navigator li.active{
background:url(../img/img_slider/arrow-bg.png) no-repeat scroll left center; 
color:#fff;
overflow:hidden;
}

.lof-navigator li div{
width:120px;
height:68px;
background:url(../img/img_slider/transparent_bg.png);
padding:10px;
position:relative;
border-top:1px solid #fff;
}

.lof-snleft .lof-navigator li div{
width:120px;
padding:10px;
margin-left:inherit;
margin-right:18px;
}

.lof-navigator li h3{
margin:0;
padding-bottom:5px;
font-size:110%;
line-height:1;
letter-spacing:0.03em;
}

.lof-navigator li h3 a{
color:#F39;
}

.lof-navigator li.active h3 a{
color:#fff;
}


.lof-navigator li p{
margin:0;
padding:0;
line-height:1.3;
letter-spacing:0.02em;
}

.lof-navigator li p a{
color:#000;
}

.lof-navigator li.active p a{
color:#fff;
}

.lof-snleft .lof-main-outer{
float:right;
}

/* move the main wapper to the right side */
.lof-snleft .lof-main-wapper{
margin-left:auto;
margin-right:inherit;
clear:both;
height:265px;
}

ul.lof-main-wapper li{
position:relative;
}