@charset "utf-8";

/* ==================================================== */
/* tech.css                                             */
/* July 23,2007                                         */
/* ==================================================== */


/*----------------------------------------------------
category-breadcrumb
----------------------------------------------------*/
div#categoryTitle {
width:760px;
height:85px;
margin:0 5px;
background:url(../img/category_image_tech.jpg) no-repeat;
position:relative;
}

div#categoryTitle h1 {
position:absolute;
top:10px;
left:10px;
}

/*----------------------------------------------------
movie
----------------------------------------------------*/
dl.movie {
display:inline;
padding:10px;
width:184px;
background:#e4e9ee;
}

dl.movie dt img,
dl.movie dd img {
vertical-align:top;
}


/*----------------------------------------------------
commentary
----------------------------------------------------*/
div.commentary {
margin-right:20px;
margin-left:20px;
width:540px;
background:url(../../tech/img/bg_num.gif) repeat-y;
}

div.commentary p {
float:left;
}

div.commentary p.num {
width:15px;
}

div.commentary p.img {
padding:0 8px;
width:100px;
}

div.commentary p.descript {
padding:8px 10px;
width:389px;
}


/*----------------------------------------------------
commentary
----------------------------------------------------*/
p.supplement{
margin-right:20px;
margin-left:20px;
padding:8px 10px;
border:1px solid #739dcc;
color:#fff;
background:#85abd6;
}


/*----------------------------------------------------
txtMovie
----------------------------------------------------*/
p.txtMovie {
float:left;
width:320px;
}


/*----------------------------------------------------
linkBox
----------------------------------------------------*/
div#linkBox {
margin-right:20px;
margin-left:20px;
padding:10px;
border:10px solid #e4e9ee;
}

div#linkBox ul{
float:left;
padding:0 0 0 40px;
width:388px;
background:url(../../tech/img/bg_linkbox.gif) repeat-y 20px 0;
}

div#linkBox ul li{
padding:0 0 0 15px;
background:url(../img/point02.gif) no-repeat left center;
}


/*----------------------------------------------------
product
----------------------------------------------------*/
div.product dl{
float:left;
width:155px;
}

div.product dt{
margin:0 0 8px 0;
padding:3px 5px;
color:#333;
background:#e8f0f7;
font-weight:bold;
line-height:1;
font-size:90%;
}

div.product dd{
font-size:80%;
}

* html div.product dd{
font-size:73%;
}


/*----------------------------------------------------
product2
----------------------------------------------------*/
div.product2{
float:left;
width:155px;
}

div.product2 dt{
margin:0 0 8px 0;
padding:3px 5px;
color:#333;
background:#e8f0f7;
font-weight:bold;
line-height:1;
font-size:90%;
}

div.product2 dd{
font-size:80%;
}

* html div.product2 dd{
font-size:73%;
}


/*----------------------------------------------------
example
----------------------------------------------------*/
div.example {
background:url(../../tech/img/bg_example.gif) repeat-y;
}

div.example dl{
float:left;
width:164px;
}

div.example dt{
background:#fff;
text-align:center;
}

div.example dd{
padding:5px 8px;
font-size:80%;
}

* html div.example dd{
font-size:73%;
}


/*----------------------------------------------------
example2
----------------------------------------------------*/
div.example2 p{
font-size:80%;
}

* html div.example2 p{
font-size:73%;
}


/*----------------------------------------------------
example3
----------------------------------------------------*/
div.example3 {
background:url(../../tech/img/bg_example2.gif) repeat-y;
}

div.example3 dl.leftbox{
float:left;
width:330px;
}

div.example3 dl.rightbox{
float:left;
width:164px;
}

div.example3 dt{
background:#fff;
text-align:center;
}

div.example3 dd{
padding:5px 8px;
font-size:80%;
}

* html div.example3 dd{
font-size:73%;
}


/*----------------------------------------------------
cal
----------------------------------------------------*/
div.cal {
margin:0 20px;
padding:30px 0;
border:1px solid #d1d1d1;
}