@charset "utf-8";

/*
===== what's dlna usecase class ../img/dlna-usecase.png =================================
*/

div.usecase{
display: block;
width: 511px; 
position: relative;
margin-left: 135px;
}

div.usecase img{ position: absolute;}
div.usecase#twobox-pull{height: 120px;}
div.usecase#twobox-pull img{clip: rect(0px 511px 120px 0px); margin-top: 0px;}
div.usecase#twobox-push{height: 120px;}
div.usecase#twobox-push img{clip: rect(130px 511px 250px 0px); margin-top: -130px;}
div.usecase#threebox{height: 260px;}
div.usecase#threebox img{clip: rect(260px 511px 520px 0px); margin-top: -260px;}
div.usecase#upload-download{height: 250px;}
div.usecase#upload-download img{clip: rect(530px 511px 775px 0px); margin-top: -530px;}


div#usecase-2boxpull {
display: block;
width: 511px; 
height: 130px; 
position: relative;
margin-left: 135px;
}

div#usecase-2boxpull img{
position: absolute;
clip: rect(0px 511px 130px 0px);
margin-top: 0px;
}

div#usecase-3box {
display: block;
width: 511px; 
height: 120px; 
position: relative;
margin-left: 135px;
}

div#usecase-3box img{
position: absolute;
clip: rect(450px 520px 700px 0px);
margin-top: -450px;
}

div#usecase-2boxpush {
display: block;
width: 495px; 
height: 130px; 
position: relative;
margin-left: 132px;
}

div#usecase-2boxpush img{
position: absolute;
clip: rect(320px 1010px 450px 515px);
margin-top: -320px;
margin-left: -515px;
}

div#usecase-updown {
display: block;
width: 495px; 
height: 250px; 
position: relative;
margin-left: 132px;
}

div#usecase-updown img{
position: absolute;
clip: rect(450px 1010px 700px 515px);
margin-top: -450px;
margin-left: -515px;
}

/* ”wŒi‰æ‘œ‚ðŽg‚¤�ê�‡‚ÌCSS Sprite
#sub div#usecase-updown {
display: block;
width: 495px; 
height: 250px; 
background-image: url(../img/dlna-usecase.png);
background-repeat: no-repeat;
background-position: -515px -450px;
}
*/