@charset "utf-8";

body {
 background-color: #F8F8FF;
 padding: 0;
 margin: 0;
}

div.pagebody {
 width: 600px;
 margin: 10px auto;
 background-color: #F8F8FF;
 color: #666666;
 font-family: "メイリオ", Meiryo, "MS Pゴシック", Osaka, sans-serif;
}

header {
 background-color: #fff;
 text-align: center;
}

a {text-decoration: none;}

h1 {
 font-size: 30px;
 margin: 0 0 30px 0;
 padding: 0;
}

h2 {
 font-size: 26px;
 margin: 0 0 30px 0 ;
 padding: 0;
}

h3 {
 font-size: 16px;
 margin: 0 0 30px 0 ;
 padding: 0;
}

article {
 background-color: #FFF;
 border: solid 1px #cccccc;
 margin-bottom: 10px;
 padding: 40px 20px 20px 20px;
}

article p {
 line-height: 200%;
 margin: 0 0 30px 0 ;
}

ul.a-nav {
 list-style-type: none;
 padding: 0;
 margin-bottom: 30px;
}

ul.a-nav li {
 width: 32%;
 font-size: 90%;
 margin: 0;
 line-height: 200%;
 display: inline-block;
}

section {
 margin: 0;
}

section p {
 font-size: 100%;
 margin-bottom: 30px;
}

div.aside-s {
 width: 600px;
 border: solid 1px #cccccc;
 background-color: #FFF;
 margin-bottom: 10px;
}

div.aside-s ul li {
 margin-bottom: 10px;
}

footer {
 text-align: center;
 clear: both;
}

address {
 font-style: normal;
 font-size: 90%;
}

p.center {text-align: center;}

div.introduction {
 font-size: 90%;
 line-height: 150%;
 padding: 10px;
}

div.breadcrumb {
 display: inline-block;
 font-size: 90%;
 margin-bottom: 10px;
}

pre.html {
 white-space: pre-wrap;
 word-wrap: break-word;
 font-size: 90%;
 background-color: #ccffff;
 padding: 10px;
 line-height: 150%;
 margin: 0 0 30px 0;
}

pre.css {
 white-space: pre-wrap;
 word-wrap: break-word;
 font-size: 90%;
 background-color: #ffffcc;
 padding: 10px;
 line-height: 150%;
 margin: 0 0 30px 0;
}

#sample {
 border: solid 1px #ccc;
}

span.blue {color: blue;}

table.exp {
 margin-bottom: 30px;
 border-collapse: collapse;
 width: 100%;
}

table.exp td {
 border-bottom: solid 1px #ccc;
 border-collapse: collapse;
 font-size: 90%;
 padding: 5px;
}

col.tag {
 width: 40%;
 background-color: #ccffff;
}

col.content {
 width: 40%;
 background-color: #ccff99;
}

col.css {
 width: 40%;
 background-color: #ffffcc;
}

col.tagexp {
 background-color: #ffffff;
}

ul.bottom-nav {
 margin-bottom: 30px;
 padding: 0;
}

ul.bottom-nav li {
 list-style-type:none;
 font-size: 95%;
 padding-left: 40px;
 margin: 0;
 line-height: 200%;
 background-image:url(../img/ico-bottom.gif);
 background-repeat:no-repeat;
 background-position:left center;
}

#now { background-image:url(../img/ico-now.gif);}

div.sample {
 background-color: #fcfcfc;
 border: solid 1px #0066cc;
 width: 100%;
 padding: 0px;
 margin-bottom: 30px;
 font-size: 100%;
}

div.sample-h {
 color: #ffffff;
 border: solid 1px #0066cc;
 font-size: 90%;
 font-weight: bold;
 background-color: #0066cc;
 padding-left: 5px;
 width:110px;
 margin-bottom:10px;
}

div.sample-h p {margin: 0px;}

div.sample-a {
 padding: 10px;
 font-size: 100%;
 font-family: sans-serif;
}

div.sample-a p { margin: 0 0 10px 0;}

p.code-h { margin: 0;}

div.article-nav {margin-bottom: 30px;}

div.article-nav ul {
 list-style-type:none;
 margin: 0;
 padding: 0;
 line-height:1.4;
}

div.article-nav ul li {
 padding-left: 20px;
 background-image:url(../img/ico-m.gif);
 background-repeat:no-repeat;
 font-size: 90%;
}

div.t-center { text-align: center;}

ul.back {
 list-style-type: none;
 width: 450px;
 margin: 30px auto;
}

ul.back li {
  display: inline-block;
}