/* product work photo css */

/*--------------------------------------------------------------------------------
/product/_workphoto/photo.css
プロダクト　施工事例の写真スライド用css

構成
div#photoBox -------- メインdiv
ul#ul_photoList ----- メインの写真のリスト
li.li_photo --------- js取得クラス

div#thumbBox -------- サムネイルのdiv
ul#ul_thumbList ----- サムネイルのリスト
li.li_thumb --------- js取得クラス
--------------------------------------------------------------------------------*/
/*
tab02_ele
*/
div#tab02_ele{
	width:460px;
	margin:0;
	padding:0;
}

h3.photo_h3{
	margin:5px 0;
	color:#006bad;
	font-size:120%;
	font-weight:100;
	text-indent:0.5em;
}

/*------------------------------------------
photoBox
*/
div#photoBox{
	background:url(img/photoBg.gif) 0 0 no-repeat;
	width:448px;
	height:300px;
	position:relative;
	overflow:hidden;
	padding:2px 0 0;
	margin:0 0 0 6px;
}

div#photoBox ul#ul_photoList{
	width:1000%;/*js*/
	height:300px;
	max-height:300px;
	position:absolute;
	top:0px;
	left:0px;/*js*/
}

div#photoBox ul#ul_photoList li.li_photo{
	background:#eee;
	display:block;
	margin:0 12px 0 0;/*この値をjsと合わせる*/
	float:left;
}
div#photoBox ul#ul_photoList li.li_photo img {
	display:block;
}

/*-------------------------------------------
    for print
*/

@media print{
	div#photoBox,
	div#photoBox ul#ul_photoList {
		position: static!important; /* important */
		overflow: hidden!important; /* important */
	}
	div#tab02_ele div#pSlideBox ul li {
		float:none!important;
	}
}


/*------------------------------------------
thumbBox
*/

div#thumbBox{
	clear:both;
	background:url(img/thumbBg.gif) 0 0 no-repeat;
	width:448px;
	height:55px;
	margin:0 6px;
	padding:5px 0;
}

div#thumbBox ul#ul_thumbList{
	text-align:center;
	height:64px;
	max-height:64px;
}
div#thumbBox ul#ul_thumbList li.li_thumb img{
	display:block;
}
div#thumbBox ul#ul_thumbList li.li_thumb {
	display:block;
	margin:0 6px 0 0;/*この値をjsと合わせる*/
	float:left;
}
div#thumbBox ul#ul_thumbList li.li_thumb a{
	border:1px solid #fff;
	display:block;
	padding:2px;/*この値をjsと合わせる*/
}
div#thumbBox ul#ul_thumbList li.li_thumb a.ahover:hover{
	border:1px solid #936;
}
div#thumbBox ul#ul_thumbList li.li_thumb a.aActive,
div#thumbBox ul#ul_thumbList li.li_thumb a.aActive:hover{
	border:1px solid #069;
}