﻿/*-------------------------------------------

    Shen Zhou Film Studio - single pages

    last updated: 2008-09-15

---------------------------------------------*/


/*====================TOC====================

               1. category list
               2. location
               3. main content
               4. page navigation
               5. article-related

=============================================*/



/* 1. category list
---------------------------------------------*/
#cateList {
	_display: inline;
	float: left;
	padding-bottom: 1em;
	width: 331px;
	height: auto;
	}

#cateList h3 {
	position: absolute;
	left: -500em;
	}

#cateList li {
	padding: 2px 0 5px 75px;
	_padding-top: 4px;
	height: 30px;
	background: url(/sz/images/branch_h2_h3_bg_331px.png) no-repeat top left;
	color: white;
	font-size: 1.2em;
	}

#cateList #currentCate {
	position: relative;
	padding-left: 0;
	height: auto;
	background-repeat: no-repeat;
	background-position: 0 30px;
	}
#for djyart
.bn12,.imageCaption {color:#CC3333;	font-size:12px;}

.theater #cateList #currentCate      { background-image: url(/sz/images/single_theater_bg.jpg); }
.filmFestival #cateList #currentCate { background-image: url(/sz/images/single_filmFestival_bg.jpg); }
.filmNews #cateList #currentCate     { background-image: url(/sz/images/single_filmNews_bg.jpg); }
.filmReview #cateList #currentCate   { background-image: url(/sz/images/single_filmReview_bg.jpg); }
.mv #cateList #currentCate           { background-image: url(/sz/images/single_mv_bg.jpg); }

#cateList h4 {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 0 0 75px;
	_padding-top: 4px;
	height: 30px;
	width: 331px;
	background: url(/sz/images/branch_h2_h3_bg_331px.png) no-repeat top left;
	color: white;
	font-size: 1em;
	}

#cateList a {
	color: white;
	font-weight: bold;
	}

#subCateList {
	margin: 330px 0 7px;
	padding: 0 0 75px 60px;
	background: transparent url(/sz/images/single_cate_border.gif) no-repeat bottom left;
	}

#subCateList h5 {
	margin: 0 0 0.3em 0px;
	color: #6E6E6E;
	font-size: 0.9em;
	}

#subCateList li {
	margin: 0 0 -0.15em 0.3em;
	*margin-bottom: -0.1em;
	_margin-bottom: -0.25em;
	padding: 0 0 0.2em 20px;
	_padding-bottom: 0.3em;
	width: 230px;
	height: auto;
	background: url(/sz/images/list_img_white.png) no-repeat 0 0.45em;
	*background-position: 0 0.45em;
	_background-position: 0 0.4em;
	color: #6E6E6E;
	font-weight: normal;
	font-size: 0.9em;
	}

html:first-child #subCateList li {
	font-size: 0.95em;
	}

#subCateList li a {
	padding: 0;
	height: auto;
	background: none;
	color: #6E6E6E;
	font-weight: normal;
	font-size: 0.85em;
	}


/* 2. location
---------------------------------------------*/
#location {
	position: relative;
	_display: inline;
	float: left;
	margin: 5px 0 0 36px;
	*margin-top: 9px;
	width: 500px;
	font-size: 0.95em;
	}

#location a {
	color: blue;
	}


/* 3. main content
---------------------------------------------*/
#content {
	position: relative;
	_display: inline;
	float: right;
	width: 668px;
	}

#content #photos {
	margin-top: 15px;
	padding: 4px 0 0 62px;
	height:  550px;
	overflow: hidden;
	background: url(/sz/images/single_photos_bg.png) repeat-y top left;
	}

#content #photos:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	}

#content #photos li {
	_display: inline;
	float: left;
	margin: 0 5px 39px 0;
	*margin-bottom: 37px;
	width: 197px;
	overflow: hidden;
	}

body:first-of-type #content #photos li {
	margin-bottom: 40px;
	}

#content #photos img {
	_display: inline;
	float: left;
	margin-bottom: 0.5em;
	}

#content #photos a {
	color: #6E6E6E;
	font-size: 0.95em;
	}

#content #photos .desc {
	display: block;
	margin: 0 1em;
	}

#content #videos {
	_display: inline;
	float: right;
	margin: 28px 0 50px 0;
	width: 641px;
	height:  auto;
	font-size: 0.95em;
	line-height: 1.7em;
	_behavior: url(/sz/scripts/pnL.htc);
	}

#content #videos li {
	position: relative;
	margin-bottom: 20px;
	_margin-left: -16px;
	height: 180px;
	background: url(/sz/images/decoration-1.jpg) no-repeat 0 45px;
	}

#content #videos h3 {
	margin: 0 0 0.15em 257px;
	font-size: 1.4em;
	}

#content #videos a {
	color: blue;
	}

#content #videos img {
	position: absolute;
	top: 0;
	left: 40px;
	}

#content #videos #publishDate,
#content #videos #director,
#content #videos #online,
#content #videos #download {
	margin-left: 257px;
	}

#content #videos #publishDate {
	_display: inline;
	float: left;
	}

#content #videos #length,
#content #videos #cast {
	margin-left: 15px;
	}

#content #videos #online {
	clear: left;
	}

#content #videos #download {
	display: block;
	}

#content #videos #download a {
	margin-right: 4px;
	}

#content #videoInfo {
	position: relative;
	margin: 10px 0 15px 28px;
	width: 612px;
	height: 95px;
	background: url(/sz/images/decoration-1.jpg) no-repeat 0 0;
	}

#content #videoInfo h2 {
	position: absolute;
	top: 25px;
	left: 50px;
	}

#content #videoInfo #publishDate,
#content #videoInfo #length,
#content #videoInfo #director,
#content #videoInfo #cast {
	_display: inline;
	float: left;
	font-size: 0.8em;
	line-height: 1.9em;
	}

#content #videoInfo #publishDate {
	margin: 0 15px 0 400px;
	}

#content #videoInfo #publishDate,
#content #videoInfo #length {
	margin-top: 24px;
	}

#content #videoInfo #director {
	margin: 0 15px 0 400px;
	}

#content #intro {
	margin: 37px 0 0 37px;
	padding-bottom: 15px;
	width: 612px;
	font-size: 0.95em;
	}

#content #intro p,
#content #article p {
	margin-bottom: 0.8em;
	}

#content #article {
	margin: -25px 0 15px 28px;
	*margin-top: 10px;
	padding: 0 0 5px 9px;
	width: 603px;
	background: url(/sz/images/decoration-1.jpg) no-repeat 0 0;
	font-size: 0.95em;
	}

#content #article h2 {
	position: relative;
	*position: static;
	top: 25px;
	margin: 35px 0 65px 41px;
	*margin: 24px 0 40px 41px;
	_margin-top: 25px;
	font-size: 1.6em;
	}

#content #article img {
	border: 2px solid blue;
	}

#content #article .desc {
	color: navy;
	font-size: 0.85em;
	}

#content #list {
	margin: 30px 0 100px 60px;
	width: 570px;
	}

#content #list li {
	margin-bottom: 0.2em;
	padding-left: 20px;
	background: url(/sz/images/list_img_white.png) no-repeat 0 0.35em;
	}

body:first-of-type #content #list li {
	margin-bottom: 0.25em;
	background-position: 0 0.4em;
	}

#content #list li a {
	color: #6E6E6E;
	font-size: 0.95em;
	}


/* 4. page navigation
---------------------------------------------*/
#pn-s {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -22px;
	}

#pn-s li {
	_display: inline;
	float: left;
	margin-right: 0.9em;
	}

#pn-l a,
#pn-s a {
	color: #6E6E6E;
	font-size: 0.95em;
	}

#pn-l {
	position: absolute;
	bottom: 20px;
	right: 0;
	}

#pn-l ul {
	width: 20em;
	}

#videos + #pn-s + #pn-l {
	bottom: 30px;
	}

#pn-l li {
	_display: inline;
	float: left;
	margin-right: 0.7em;
	}

#pn-l a {
	display: inline-block;
	padding: 0 3px;
	color: #6E6E6E;
	font-size: 0.95em;
	font-family: Arial, sans-serif;
	}

#pn-l #currentPage {
	padding: 0 3px;
	color: #363636;
	font-weight: bold;
	font-family: Arial, sans-serif;
	cursor: text;
	}


/* 5. article-related
---------------------------------------------*/
#related-tags {
	margin: 3em auto 1.3em;
	padding-left: 13px;
	width: 409px;
	height: 22px;
	}

#related-tags h4 {
	float: left;
	padding-top: 2px;
	*padding-top: 1px;
	_padding-top: 2px;
	width: 72px;
	height: 20px;
	*height: 21px;
	_height: 20px;
	overflow: hidden;
	background: #C9C9C9;
	color: white;
	font-weight: bold;
	font-size: 0.95em;
	text-align: center;
	}

#related-tags ul {
	float: left;
	padding-left: 2px;
	width: 328px;
	height: 22px;
	background: #F5F5F5;
	}

#related-tags li {
	_display: inline;
	float: left;
	margin: 2px 0 0 7px;
	*margin-top: 3px;
	color: #393939;
	font-size: 0.8em;
	}

#related-tags a {
	position: relative;
	top: 2px;
	margin: 0 1px;
	color: #393939;
	font-size: 0.9em;
	}

#related-articles,
#related-topics,
#headlines {
	margin: 0 0 1.3em 37px;
	width: 596px;
	padding: 1px;
	border: 1px solid #919191;
	}

#related-articles h4,
#related-topics h4,
#headlines h4,
#comment h4 {
	padding: 8px 0 0 15px;
	height: 27px;
	*height: 28px;
	_height: 27px;
	background: url(/sz/images/article-related_h4_bg.png) no-repeat top left;
	color: white;
	font-weight: bold;
	font-size: 0.95em;
	letter-spacing: 0.6em;
	}

#related-articles ul {
	margin: 0.25em 0 0.5em 0.6em;
	_margin: 0.45em 0 0.3em 0.6em;
	}

#related-articles li {
	margin-bottom: -0.2em;
	_margin-bottom: 0;
	padding-left: 18px;
	background: url(/sz/images/list_img_white.png) no-repeat 0 0.4em;
	*background-position: 0 0.45em;
	_background-position: 0 0.25em;
	}

#related-articles li a {
	display: inline-block;
	position: relative;
	color: #6E6E6E;
	font-size: 0.75em;
	}

#related-articles li a .note-img,
#headlines li a .note-img {
	color: red;
	}

#related-articles li a:hover .note-img {
	text-decoration: underline;
	}

#related-articles li a img {
	position: absolute;
	top: 0.1em;
	*top: 0.25em;
	_top: 0.2em;
	right: -1.1em;
	*right: -1.4em;
	}

#related-topics ul {
	margin: 0.4em 0 0.4em 0.6em;
	_margin-bottom: 0.3em;
	*height: 100%;
	}

#related-topics ul:after,
#headlines ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	}

#related-topics li {
	_display: inline;
	float: left;
	margin-right: 11px;
	}

#related-topics a {
	color: #393939;
	font-size: 0.75em;
	}

#headlines ul {
	margin: 0.25em 0 0.5em 1em;
	_margin: 0.45em 0 0.3em 1em;
	height: 108px;
	}

#headlines li {
	position: relative;
	_display: inline;
	float: left;
	margin: 0.5em 20px 0 0;
	_margin-top: 0.4em;
	width: 270px;
	background: url(/sz/images/icon-headlines_bg.gif) no-repeat 136px 0.35em;
	*background-position-y: 0.4em; 
	_background-position-y: 0.3em; 
	}

#headlines .thumbnail img {
	_display: inline;
	float: left;
	margin-right: 3px;
	border: 2px solid #E1E1E1;
	}

#headlines .title {
	_display: inline;
	float: left;
	margin: 3px 0 0 25px;
	width: 118px;
	color: #3A8ECF;
	font-weight: bold;
	font-size: 0.75em;
	}

#headlines .title img {
	vertical-align: -1px;
	*vertical-align: middle;
	_vertical-align: -1px;
	}

#headlines div {
	_display: inline;
	float: left;
	margin: 10px 0 0 8px;
	padding-top: 10px;
	width: 135px;
	border-top: 1px solid #393939;
	font-size: 0.75em;
	}

#comment {
	margin: 0 0 1.5em 37px;
	padding-bottom: 20px;
	_padding-bottom: 17px;
	width: 600px;
	background: #F2F3F3;
	}

#comment fieldset {
	margin: 20px 0 0 20px;
	font-size: 0.8em;
	}

#comment #string-name,
#comment #string-place,
#comment #string-email {
	display: block;
	margin: -18px 0 10px 42px;
	*margin-left: 22px;
	}

#comment label {
	position: relative;
	top: 2px;
	}

#comment textarea {
	position: relative;
	top: -12px;
	left: 0;
	*left: -20px;
	width: 550px;
	height: 100px;
	overflow: auto;
	}

#comment #botton-comment {
	display: block;
	margin: 0 0 30px 245px;
	*margin-left: 225px;
	*padding-top: 2px;
	width: 70px;
	height: 21px;
	border: 1px solid #7F9DB9;
	background: #D9EEFD;
	color: #054EA8;
	}

#container hr {
	_visibility: hidden;
	}
