@charset "utf-8";

/* WORKS02
---------------------------------------------*/

/* WORKS COMMON
---------------------------------------------*/

#main {
	float: left;
	width: 730px;}

#side {
	float: right;
	width: 200px;}

#side dt a:hover img {
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;}

#side dl dd {margin-bottom: 15px;}

#side .snavi li {
	width: 200px;
	display:inline;
	margin-top: 1px;}

#side .snavi em a {
	display: block;
	overflow: hidden;
	height:0 !important;
	height /**/: 34px;
	padding-top: 34px;
	text-indent: -9999px;
	margin-top: 1px;
	background-image: url(../img/snavi.gif);}

  .snv01 em a {background-position: 0 0;}
  .snv02 em a {background-position: 0 -34px;}
  .snv03 em a {background-position: 0 -68px;}
  .snv04 em a {background-position: 0 -102px;}
  .snv05 em a {background-position: 0 -136px;}
  .snv06 em a {background-position: 0 -170px;}
  .snv07 em a {background-position: 0 -204px;}
  .snv08 em a {background-position: 0 -238px;}
  .snv09 em a {background-position: 0 -272px;}
  .snv10 em a {background-position: 0 -306px;}
  .snv11 em a {background-position: 0 -340px;}
  .snv12 em a {background-position: 0 -374px;}
  .snv13 em a {background-position: 0 -408px;}
  .snv14 em a {background-position: 0 -442px;}
  .snv15 em a {background-position: 0 -476px;}

  .snv01 em a:hover {background-position: -200px 0;}
  .snv02 em a:hover {background-position: -200px -34px;}
  .snv03 em a:hover {background-position: -200px -68px;}
  .snv04 em a:hover {background-position: -200px -102px;}
  .snv05 em a:hover {background-position: -200px -136px;}
  .snv06 em a:hover {background-position: -200px -170px;}
  .snv07 em a:hover {background-position: -200px -204px;}
  .snv08 em a:hover {background-position: -200px -238px;}
  .snv09 em a:hover {background-position: -200px -272px;}
  .snv10 em a:hover {background-position: -200px -306px;}
  .snv11 em a:hover {background-position: -200px -340px;}
  .snv12 em a:hover {background-position: -200px -374px;}
  .snv13 em a:hover {background-position: -200px -408px;}
  .snv14 em a:hover {background-position: -200px -442px;}
  .snv15 em a:hover {background-position: -200px -476px;}

  .snv01on em a {background-position: -200px 0;}
  .snv02on em a {background-position: -200px -34px;}
  .snv03on em a {background-position: -200px -68px;}
  .snv04on em a {background-position: -200px -102px;}
  .snv05on em a {background-position: -200px -136px;}
  .snv06on em a {background-position: -200px -170px;}
  .snv07on em a {background-position: -200px -204px;}
  .snv08on em a {background-position: -200px -238px;}
  .snv09on em a {background-position: -200px -272px;}
  .snv10on em a {background-position: -200px -306px;}
  .snv11on em a {background-position: -200px -340px;}
  .snv12on em a {background-position: -200px -374px;}
  .snv13on em a {background-position: -200px -408px;}
  .snv14on em a {background-position: -200px -442px;}
  .snv15on em a {background-position: -200px -476px;}

  .snv01dt em a {background-position: -400px 0;}
  .snv02dt em a {background-position: -400px -34px;}
  .snv03dt em a {background-position: -400px -68px;}
  .snv04dt em a {background-position: -400px -102px;}
  .snv05dt em a {background-position: -400px -136px;}
  .snv06dt em a {background-position: -400px -170px;}
  .snv07dt em a {background-position: -400px -204px;}
  .snv08dt em a {background-position: -400px -238px;}
  .snv09dt em a {background-position: -400px -272px;}
  .snv10dt em a {background-position: -400px -306px;}
  .snv11dt em a {background-position: -400px -340px;}
  .snv12dt em a {background-position: -400px -374px;}
  .snv13dt em a {background-position: -400px -408px;}
  .snv14dt em a {background-position: -400px -442px;}
  .snv15dt em a {background-position: -400px -476px;}

.engttl {
	height: 31px;
	margin: 40px 0 20px 0;
	padding-left: 32px;
	background: url(../img/bg_constttl.gif) left top no-repeat;}

.works02top .engttl {margin: 40px 0 20px 0;}
.works02cate .engttl {margin: 10px 0 20px 0;}
.works02detail .engttl {margin: 10px 0 20px 0;}

/* WORKS TOP
---------------------------------------------*/

#msg h3 {margin-bottom: 1em;}

#msg p {
	line-height: 2em;
	margin-left: 3px;
	margin-right: 20px;}

#workslist {
	position: relative;
	width: 765px;
	margin-bottom: 35px;}

#workslist li {
	float: left;
	display: block;
	width: 220px;
	height: 172px;
	margin-right: 35px;
	margin-bottom: 20px;}

.works02cate a:hover img {
	filter: alpha(opacity=60);
	-moz-opacity:0.60;
	opacity:0.60;}

.otherlist li {
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1.8em;}

.otherlist span {
	font-size: 10px;}


/* WORKS DETAIL
---------------------------------------------*/

.works02detail {border-bottom: 1px solid #ccc;}

.snavi ul {padding-bottom: 5px;}

.snavi ul li {
	font-size: 12px;
	background: url(../../img/bdr.gif) left bottom no-repeat;}

.snavi ul li a {
	display: block;
	width: 175px;
	padding: 7px 0 6px 25px;
	background: url(../img/arw_sub.gif) 15px 10px no-repeat;}

.snavi ul li a:hover {
	color: #900;
	font-weight: bold;
	background: url(../img/arw_sub_on.gif) 15px 10px no-repeat;}

.current strong  {
	display: block;
	width: 175px;
	padding: 7px 0 6px 25px;
	color: #900;
	background: url(../img/arw_sub_on.gif) 15px 10px no-repeat;}

#databox {margin: 30px 0 40px 0;}

#databox .datatxt {
	float: left;
	width: 380px;
	padding: 2px;}

#databox .datatxt p {
	line-height: 1.8em;
	margin-bottom: 0.7em;}

#databox table {border-collapse: collapse;}

#databox .righttable {
	float: right;
	width: 320px;
	margin-right: 2px;}

#databox .widetable {width: 728px;}

#databox table th,
#databox table td {
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	border: 1px solid #ccc;}

#databox table thead th {
	padding: 15px 8px;
	background-color: #dfdfdf;}

#databox table tbody th {
	width: 72px;
	padding: 10px 8px;}

#databox table tbody td {padding: 10px 8px;}

#photo {
	position: relative;
	width: 750px;
	margin-bottom: 25px;}

#photo li {
	float: left;
	display: block;
	width: 130px;
	height: 130px;
	margin-right: 20px;
	margin-bottom: 15px;}

#photo li a:hover img {
	filter: alpha(opacity=60);
	-moz-opacity:0.60;
	opacity:0.60;}

#pnavi {
	width: 730px;
	padding-top: 20px;
	background: url(../../img/bdr.gif) left top no-repeat;}

#pnavi .backcate,
#pnavi .backworks02 {margin-right: 9px;}

/* AJAX
---------------------------------------------*/

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/*
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:url(../images/overlay.png) 0 0 repeat;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(../images/controls.png) -100px 0 no-repeat;}
    #cboxTopRight{width:21px; height:21px; background:url(../images/controls.png) -129px 0 no-repeat;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../images/controls.png) -100px -29px no-repeat;}
    #cboxBottomRight{width:21px; height:21px; background:url(../images/controls.png) -129px -29px no-repeat;}
    #cboxMiddleLeft{width:21px; background:url(../images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(../images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(../images/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}

/*
    The following fixes png-transparency for IE6.
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition

    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.

    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}