@charset "UTF-8";
 @import url(reset.css);

/*-----------------------------------------------
CSSファイル名:defalut.css
-------------------------------------------------
階層構造
-------------------------------------------------
#wrapper
  #header
    #global-navi
  #contents
    #main
    #sub
  #footer
-----------------------------------------------*/

body {
color:#333;
font-size:80%;
line-height:1.4;
}

/*-----------------------------------------------
header
-----------------------------------------------*/

#header {
height:80px;
margin:0 auto 30px;
background:url(/common/img/bg-popup-header.gif) repeat-x top left;
}

#header #logo {
position:relative;
margin:0 auto;
width:680px;
height:80px;
}

#header #logo img {
position:absolute;
top:20px;
left:0;
}

/*-----------------------------------------------
footer
-----------------------------------------------*/

#footer {
margin:3em 0 0 0;
padding:0 0 15px;
border-top:1px solid #dfdfdf;
background:#666;
}

#f-btn {
padding:1em 0;
margin:0 0 1em;
background:#fff url(/common/img/f-navi-bg.gif) repeat-x top left;
}

#f-btn ul:after {
content:url(/common/img/pixel.gif);
display:block;
clear:both;
height:0;
}

#f-btn ul {
width:680px;
margin:0 auto;
display: inline-block;
}

/* Hides from IE-mac \*/

* html #f-btn ul {
height: 1%;
}

#f-btn ul {
display: block;
}

/* End hide from IE-mac */

#contents sub{ vertical-align:sub; }
#contents sup{ vertical-align:super; }



#f-btn ul li {
float:right;
line-height:0;
margin:0 0 0 20px;
display:inline;
}

#f-btn ul li a {
color:#333;
}

#footer p {
width:680px;
margin:15px auto 0;
line-height:1.4;
}

/*-----------------------------------------------

contents

-----------------------------------------------*/

#contents {
width:660px;
margin:0 auto;
}

#contents h1 {
margin:0 0 1.5em;
background:#fff url(/common/img/h2-bg.gif) repeat-x bottom left;
}

#contents h1 span {
display:block;
padding:1.2em 10px 1em;
font-size:120%;
font-weight:bold;
background:url(/common/img/h2-head-bg.gif) no-repeat top left;
}

#contents h2 {
color:#147dc4;
font-weight:bold;
margin:1.7em 5px 1em;
padding:0 0 0 10px;
background:url(/common/img/h3-bg.gif) no-repeat bottom left;
}

#contents p {
margin:0 5px 1.2em;
}

/* table */

.data {
width:650px;
margin:0.5em 8px 1.2em;
border-collapse:separate;
border:3px solid #dedede;
border-right:2px solid #dedede;
border-bottom:2px solid #dedede;
}

.data th {
font-weight:bold;
text-align:center;
color:#666;
padding:0.4em 8px 0.25em 8px;
white-space:nowrap;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #dedede;
border-bottom:1px solid #dedede;
background:url(/common/img/bg-data-th.gif) no-repeat bottom right;
}

.data td {
padding:0.3em 7px;
border-top:1px solid #fff;
border-right:1px solid #dedede;
border-bottom:1px solid #dedede;
}

table#name th {
width:8em;
text-align:left;
}

table#info td,  table#code td,  table#shape td,  table#fire td {
text-align:center;
}

table#material th {
width:8em;
text-align:left;
}

table#material th#formula {
text-align:center;
width:300px;
}

table#file {
table-layout:fixed;
}

table#file th,  table#other th {
width:9em;
text-align:left;
}

table#drag th,  table#safe th {
width:16em;
text-align:left;
}

table#ghs tr th {
width:16em;
text-align:left;
}

table#ghs tr td span {
display:block;
width:85px;
float:left;
margin:0 10px 0.5em 0;
padding:85px 0 0;
text-align:center;
}

span#fire {
background:url(/common/img/flamme.gif) no-repeat center top;
}

span#enjo {
background:url(/common/img/rondflam.gif) no-repeat center top;
}

span#bomb {
background:url(/common/img/explos.gif) no-repeat center top;
}

span#corrode {
background:url(/common/img/acide.gif) no-repeat center top;
}

span#gas {
background:url(/common/img/bottle.gif) no-repeat center top;
}

span#exclamation {
background:url(/common/img/exclam.gif) no-repeat center top;
}

span#skull {
background:url(/common/img/skull.gif) no-repeat center top;
}

span#eco {
background:url(/common/img/pollu.gif) no-repeat center top;
}

span#harmful {
background:url(/common/img/silouete.gif) no-repeat center top;
}

table td ul li {
padding:0 0 0 15px;
background:url(/common/img/disc01.gif) no-repeat 2px 0.6em;
}

.externalbeforeIcon {
margin-right:5px;
}

caption {
font-weight:bold;
margin-bottom:0.4em;
}

.center {
text-align:center;
}

.nowrap {
white-space:nowrap;
}

/* text */

.txt-right {
text-align:right;
}

.txt-center,  .data.side th.txt-center,  .data tr.txt-center td {
text-align:center;
}


/* howto --------------------------------------------------*/
#howto{
line-height:1.6;
}

#howto .box{ /* clearfix */
margin:0 0 2em;
}

#howto strong{
font-weight:bold;
}

#howto h3{
font-weight:bold;
border-bottom:2px solid #333;
margin:2em 0 1em;
}

#howto h4{
margin:2.5em 0 0.5em;
font-weight:bold;
}

#howto p{
margin:1.2em 0;
}

#howto p.parts-left{ float:left; }
#howto p.parts-right{ float:right; }

#howto p.txt-center img{
padding:10px;
border:1px solid #dedede;
}

#howto p.note{
color:#c81428;
text-indent:-1em;
padding:0 0 0 1em;
margin:0.5em 0 1em;
}

#howto .box p.parts-left{
margin-top:0;
width:260px;
}

#howto .box p.parts-left img{
padding:10px;
border:1px solid #dedede;
}

#howto .box dl{
float:right;
margin:0 0 1.2em;
padding:0;
width:370px;
}

#howto .box dl dt{
font-weight:bold;
border-bottom:2px solid #333;
margin:0 0 0.5em;
}

#howto .box dl dd{
margin:0 0 1.5em;
}

#howto table{
width:100%;
border-collapse:separate;
border:2px solid #dedede;
border-right:1px solid #dedede;
border-bottom:1px solid #dedede;
margin:0 0 1.5em;
}

#howto table caption{
color:#147dc4;
font-size:100%;
}

#howto table th{
background:#f3f3f3;
font-weight:bold;
text-align:center;
}

#howto table th,
#howto table td{
padding:0.5em 10px;
border-right:1px solid #dedede;
border-bottom:1px solid #dedede;
}

#howto .ex{ /* clearfix */
border:1px solid #dedede;
padding:80px 10px 10px;
margin:0 0 1.5em;
}

#howto .ex p.parts-right{
margin:-70px 0 0 20px;
}

#howto .ex p{
margin-left:10px;
}

#howto p.arrow{
text-align:center;
margin:1em 0;
}

#howto dl.attention{
border:1px solid #c81428;
padding:15px 15px 5px;
margin:3em 0 1.5em;
}

#howto dl.attention dt{
font-weight:bold;
color:#c81428;
margin:0 0 0.3em;
}

#howto dl.attention dd{
margin:0;
padding:0;
}

#howto dl.attention dd ul{
margin:0;
}

#howto dl.attention dd ul li{
color:#c81428;
padding:0 0 0 15px;
margin:0 0 0.5em;
background:url(/common/img/arrow_attention.gif) no-repeat 5px 0.65em;
}

#howto dl.attention dd ul li a{
float:right;
margin:0 0 0 10px;
display:inline;
}

#howto dl.attention dd ul li a img.externalIcon{
display:none;
}

/* clearfix */
#howto .ex:after,
#howto .box:after{
content:url(/common/img/pixel.gif);
display:block;
clear:both;
height:0;
}

#howto .ex,
#howto .box{
display:inline-block;
}

#howto .ex,
#howto .box{
display:block;
}





@media print {

* html body {
zoom:70%;
}

*:first-child+html body {
zoom:70%;
}

h1,  h1 span,  h2 {
zoom:1;
}

#f-btn {
display:none;
}

#footer p {
margin-left:20px;
}
}