@charset "UTF-8";

/********************news********************/
#news {
	position: fixed; _position: absolute;
	width: auto; height: 270px;
	right: 0; top: 50%;
	margin: -180px 0 0 0;
}

.scrollingHotSpotLeft {
   /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
   width: 150px; height: 440px;
   /* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
   position: absolute;
   z-index: 200;
   left: 0; top: 0;
   /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
   cursor: pointer;
   background: url("../images/nullBtn.png") repeat;
}

/* Visible left hotspot */
.scrollingHotSpotLeftVisible {
   opacity: 0.35; /* Standard CSS3 opacity setting */
   -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
   filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
   zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
.scrollingHotSpotRight {
   width: 150px; height: 440px;
   position: absolute;
   z-index: 200;
   right: 0; top: 0;
   cursor: pointer;
   background: url("../images/nullBtn.png") repeat;
}
/* Visible right hotspot */
.scrollingHotSpotRightVisible {
   opacity: 0.35;
   filter: alpha(opacity = 35);
   -moz-opacity: 0.35;
   zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
.scrollWrapper {
   position: relative;
   overflow: hidden;
   width: 100%; height: 100%;
}

.scrollWrapper * {
   position: relative;
   float: left;
   padding: 0;
   margin: 0; 
}

.scrollableArea {
   position: relative;
   width: auto; height: 100%;
}

.newsList {
	width: 160px; height: 270px;
	margin-right: 6px; padding: 7px;
	background: #FFF;
}

.newsList:hover {
	background: #442119;
}

.newsList .pic {
	width: 160px; height: 180px;
	overflow: hidden;
}

.newsList .pic img {
	width: 160px; height: auto;
}

.newsList .date {
	width: 160px; height: 20px;
	margin-top: 10px;
	color: #806e69; font-size: 10px; line-height: 20px;
}

.newsList .dec {
	width: 160px; height: 42px;
	font-size: 12px; line-height: 14px; color: #0d0d0d;
	overflow: hidden;
}

.newsList:hover .date , .newsList:hover .dec {
	color: #FFF;
}

/********************news detail********************/
#newsDetail {
	position: fixed; _position: absolute;
	width: 700px; height: 550px;
	left: 50%; top: 50%;
	margin: -275px 0 0 -330px;
	background: url("../images/news/detailBg.png") no-repeat left top;
}

#newsDetail .title {
	position: absolute;
	width: auto; min-width: 220px; height: 40px;
	padding-right: 9px;
	left: 9px; top: 16px;
	color: #f7f0ea; font-size: 12px; line-height: 40px; letter-spacing: 1px;
	background: #442119;
	z-index: 1;
}

#newsDetail .date {
	position: absolute;
	width: auto; height: 20px;
	right: 45px; top: 10px;
	color: #e80000; font-size: 10px; line-height: 20px; letter-spacing: 1px;
	z-index: 2;
}

#newsDetail #backBtn {
	display: block; position: absolute;
	height: 20px;
	right: 40px; bottom: 0;
	padding: 0 5px;
	color: #5e3227; font-size: 12px; text-decoration: none; line-height: 20px; line-height: 22px \0; *line-height: 22px; letter-spacing: 1px;
	border: 1px solid #5e3227;
	z-index: 1;
}

#newsDetail #backBtn:hover {
	color: #FFF;
	background: #5e3227;
}

#newsDetail #prevBtn {
	left: -55px;
}

#newsDetail #nextBtn {
	right: -30px;
}

#newsPane {
	position: absolute;
	width: 640px; height: 440px;
	left: 20px; top: 65px;
	z-index: 0;
}

#newsPane p , #newsPane p {
	padding-right: 10px;
	color: #333; font-size: 12px;
}

.customScrollBox {
	position: relative; 
	height: 100%; 
	overflow: hidden;
}

.customScrollBox .container {
	position: relative;
	float: left;
	width: 99.5%; 
	top: 0;
}

.customScrollBox > .content {
	clear: both;
}

.dragger_container {
	position: relative; 
	float: left;
	width: 5px; height: 100%;
	margin-left: -3px;
	cursor: pointer;
}

.dragger {
	position: absolute; 
	width: 5px; height: 60px; 
	background: #442119;  
	overflow: hidden; 
	cursor: pointer; 
}

.dragger_pressed {
	position: absolute; 
	width: 5px; height: 60px; 
	background: #900807;  
	overflow: hidden; 
	cursor: pointer;
}