/* /css/format.css */



/* default style */
* {
  margin:0;
  padding:0;
}

html,
body {
  width:100%;
  height:100%;
}
body {
  text-align:center;
  line-height:1.4em;
  font-size:12px;
  font-family:Osaka,'MS UI Gothic',sans-serif;
  color:#234;
  background:#808090;
}
* html>body {
  height:auto;
  text-align:left;
}

hr {
  display:none;
}

a,
a:link,
a:visited,
a:active {
  text-decoration:none;
  color:#06c;
}
a:hover {
  color:#e33;
}

img {
  border:0;
}
img.middle {
  vertical-align:middle;
}
img.new,
img.free {
  margin:4px 0;
  vertical-align:middle;
}

label {
  cursor:pointer;
}

em {
  font-weight:bold;
  font-style:normal;
}

code {
  font-size:0.95em;
  font-family:'MS Gothic',sans-serif,Arial;
}

.sup,
.sub {
  position:relative;
  margin:0 2px;
  font-size:1em;
  font-weight:normal;
  color:#999;
}
.sup {
  top:-2px;
  vertical-align:top;
}
.sub {
  bottom:-2px;
  vertical-align:bottom;
}

.red {
  color:#f33;
}
.blue {
  color:#06f;
}
.green {
  color:#080;
}
.black {
  color:#000;
}
.note {
  color:#888;
}

.left {
  float:left;
  margin:0 10px 10px 0;
}
.right {
  float:right;
  margin:0 0 10px 10px;
}
.center {
  text-align:center;
}
.bq {
  padding:5px 0 5px 20px;
}
.clear {
  clear:both;
}
.strike {
  text-decoration:line-through;
}

/* radius */
.radius {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  border-radius:5px;
}



/* title */
body h1 {
  position:relative;
  z-index:4;
  width:780px;
  height:0;
  margin-left:auto;
  margin-right:auto;
  padding-right:380px;
  text-align:left;
  font-size:1em;
}
html>body h1 {
  width:400px;
}
body h1 a {
  position:absolute;
  top:5px;
  left:15px;
  width:180px;
  height:60px;
  text-indent:-9999px;
  background:url(/img/format/bg_title.png) no-repeat left top;
  cursor:pointer;
}
/*\*/
body h1 a {
  overflow:hidden;
}
/**/
body * h1 {   /* reset title for child */
  position:static;
  z-index:1;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
}
html>body * h1 {
  width:auto;
}
body * h1 a {
  position:static;
  top:0;
  left:0;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  text-indent:0;
  background:transparent url(/img/format/null.gif);
}


/* description */
body p {
  position:relative;
  z-index:3;
  width:780px;
  height:0;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
body p a {
  position:absolute;
  top:10px;
  left:225px;
  height:20px;
  line-height:20px;
  font-size:12px;
}
body p a,
body p a:link,
body p a:visited,
body p a:active,
body p a:hover {
  color:#fff;
}
body * p {   /* reset description for child */
  position:static;
  z-index:1;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
}
body * p a {
  position:static;
  top:0;
  left:0;
  width:auto;
  height:auto;
  line-height:1.4em;
  text-indent:0;
  font-size:1em;
}
body * p a,
body * p a:link,
body * p a:visited,
body * p a:active {
  color:#06c;
}
body * p a:hover {
  color:#e33;
}





/* header */
#header {
  position:relative;
  z-index:2;
  width:780px;
  height:70px;
  margin-bottom:-70px;
  text-align:left;
  background:url(/img/format/bg_header.jpg) repeat-y left top;
  list-style-type:none;
  overflow:hidden;
}
html>body #header {
  margin-left:auto;
  margin-right:auto;
}
* html>body #header {
  float:left;   /* for Mac IE5 bug. */
  margin-left:0;   /* for Mac9 IE5 */
}
#header li {
  position:absolute;
  bottom:0;
  float:left;
  width:105px;
  height:28px;
}
#header li#tab-1 {
  left:225px;
}
#header li#tab-2 {
  left:335px;
}
#header li#tab-3 {
  left:445px;
}
#header li a {
  float:left;
  display:block;
  width:105px;
  height:28px;
  text-indent:-9999px;
}
/*\*/
#header li a {
  overflow:hidden;
}
/**/
#header li#tab-1 a,
#header li#tab-1 a:link,
#header li#tab-1 a:visited,
#header li#tab-1 a:active {
  background:url(/img/format/tab1.gif) no-repeat left center;
}
#header li#tab-1 a:hover {
  background:url(/img/format/tab1.gif) no-repeat left top;
}
#header li#tab-1 a.here,
#header li#tab-1 a.here:link,
#header li#tab-1 a.here:visited,
#header li#tab-1 a.here:active,
#header li#tab-1 a.here:hover {
  background:url(/img/format/tab1.gif) no-repeat left bottom;
}
#header li#tab-2 a,
#header li#tab-2 a:link,
#header li#tab-2 a:visited,
#header li#tab-2 a:active {
  background:url(/img/format/tab2.gif) no-repeat left center;
}
#header li#tab-2 a:hover {
  background:url(/img/format/tab2.gif) no-repeat left top;
}
#header li#tab-2 a.here,
#header li#tab-2 a.here:link,
#header li#tab-2 a.here:visited,
#header li#tab-2 a.here:active,
#header li#tab-2 a.here:hover {
  background:url(/img/format/tab2.gif) no-repeat left bottom;
}
#header li#tab-3 a,
#header li#tab-3 a:link,
#header li#tab-3 a:visited,
#header li#tab-3 a:active {
  background:url(/img/format/tab3.gif) no-repeat left center;
}
#header li#tab-3 a:hover {
  background:url(/img/format/tab3.gif) no-repeat left top;
}
#header li#tab-3 a.here,
#header li#tab-3 a.here:link,
#header li#tab-3 a.here:visited,
#header li#tab-3 a.here:active,
#header li#tab-3 a.here:hover {
  background:url(/img/format/tab3.gif) no-repeat left bottom;
}

#header li#tab-0 {   /* font-size tool */
  position:absolute;
  top:40px;
  left:635px;
  display:block;
  width:126px;
  height:25px;
  margin:0;
  padding:0;
}
#header li#tab-0 span.size {
  float:left;
  width:60px;
  height:12px;
  margin-top:7px;
  margin-right:5px;
  background:url(/img/format/font_size.png) no-repeat left top;
}
#header li#tab-0 a {
  cursor:pointer;
}
#header li#tab-0 a#small {
  width:15px;
  height:15px;
  margin-top:5px;
  margin-right:5px;
  background:url(/img/format/font_small_off.png) no-repeat left top;
}
#header li#tab-0 a#small.on {
  background:url(/img/format/font_small_on.png) no-repeat left top;
}
#header li#tab-0 a#middle {
  width:17px;
  height:17px;
  margin-top:4px;
  margin-right:5px;
  background:url(/img/format/font_middle_off.png) no-repeat left top;
}
#header li#tab-0 a#middle.on {
  background:url(/img/format/font_middle_on.png) no-repeat left top;
}
#header li#tab-0 a#large {
  width:19px;
  height:19px;
  margin-top:3px;
  background:url(/img/format/font_large_off.png) no-repeat left top;
}
#header li#tab-0 a#large.on {
  background:url(/img/format/font_large_on.png) no-repeat left top;
}




/* container */
#container {
  display:inline-block;
}
#container {
  position:relative;
  z-index:1;
  display:block;
  width:780px;
  height:100%;
  min-height:100%;
  margin-bottom:-30px;
  padding:0 10px;
  text-align:left;
  background:#fff url(/img/format/bg_body.gif) repeat-y left top;
}
html>body #container {
  width:760px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}
#container:after {
  clear:both;
  content:'.';
  visibility:hidden;
  display:block;
  width:100%;
  height:0;
}
* html>body #container {
  display:inline-block;
  float:left;   /* for Mac IE5 bug. */
  margin-left:0;   /* for Mac IE5 bug. */
}





/* main column */
#mainColumn {
  display:inline-block;
}
#mainColumn {
  position:relative;
  z-index:2;
  float:left;
  display:block;
  width:540px;
  margin-right:-200px;
  padding:80px 10px 30px 10px;
  border-bottom:solid 1px #f9fcff;
}
html>body #mainColumn {
  width:520px;
}
#mainColumn:after {
  clear:both;
  content:'.';
  visibility:hidden;
  display:block;
  width:100%;
  height:0;
}
* html>body #mainColumn {
  display:inline-block;
}



#mainColumn h2 {   /* frame style */
  width:520px;
  padding:2px 10px 0 10px;
  line-height:1.1em;
  font-size:1.1em;
  background:url(/img/format/frame_top.gif) no-repeat left top;
}
html>body #mainColumn h2 {
  width:500px;
}
#mainColumn h2 a {
  display:block;
  padding:5px 0 5px 15px;
  color:#06c;
  background:url(/img/format/icon_bolt.gif) no-repeat 0 0.5em;
  border-bottom:dashed 1px #6996bc;
}
#mainColumn div {
  display:inline-block;
}
#mainColumn div {
  display:block;
  width:520px;
  margin-bottom:10px;
  padding:10px 10px 0 10px;
  background:url(/img/format/frame_middle.gif) repeat-y left top;
  background:url(/img/format/frame_bottom.gif) no-repeat left bottom;
}
html>body #mainColumn div {
  width:500px;
}
#mainColumn div:after {
  clear:both;
  content:'.';
  visibility:hidden;
  display:block;
  width:100%;
  height:0;
}
* html>body #mainColumn div {
  display:inline-block;
}


#mainColumn * h2,
#mainColumn * div {   /* reset frame child */
  width:auto;
  margin:0;
  padding:0;
  line-height:140%;
  background:transparent url(/img/format/null.gif);
}
html>body #mainColumn * h2,
html>body #mainColumn * div {
  width:auto;
  margin:0;
  padding:0;
  line-height:140%;
  background:transparent url(/img/format/null.gif);
}
#mainColumn * h2 a {
  display:inline;
  padding:0;
  text-align:left;
  color:#06c;
  background:transparent url(/img/format/null.gif);
  border:0;
}
html>body #mainColumn * h2 a {
  display:inline;
  padding:0;
  text-align:left;
  color:#06c;
  background:transparent url(/img/format/null.gif);
  border:0;
}



/* child style */
#mainColumn h2.title {   /* h2 scale title */
  width:100%;
  height:30px;
  margin-bottom:10px;
  padding:0;
  line-height:30px;
  font-size:1.1em;
  background:url(/img/format/bg_sub_main.gif) no-repeat left top;
}
#mainColumn h2.title a {
  display:block;
  height:30px;
  margin:0;
  padding:0 0 0 32px;
  line-height:30px;
  color:#fff;
  background:transparent url(/img/format/null.gif);
  border:0;
}
#mainColumn h2.title a img {
  margin:9px 0 9px 0;
  vertical-align:middle;
}

#mainColumn h2.nude {   /* no-style */
  width:100%;
  height:auto;
  margin-bottom:10px;
  padding:0;
  line-height:1.2;
  font-size:1.1em;
  color:#369;
  background:transparent url(/img/format/null.gif);
}
#mainColumn h2.nude a {
  display:inline;
  height:auto;
  margin:0;
  padding:0;
  line-height:1.2;
  color:#369;
  background:transparent url(/img/format/null.gif);
  border:0;
}

#mainColumn h3 {   /* h3 */
  margin-bottom:10px;
  font-size:1.1em;
  color:#369;
}


#mainColumn p {   /* paragraph */
  margin-bottom:10px;
}

#mainColumn * p.top {   /* to top */
  clear:both;
  width:100%;
  margin:0;
  line-height:25px;
  text-align:right;
  border-top:solid 1px #c0e6f6;
}
#mainColumn * p.top a {
}

#mainColumn p.caution {   /* caution */
  padding:2px 5px;
  color:#678;
  background:#f9f9fc;
  border:dashed 1px #ccc;
}
#mainColumn p.caution em {
  color:#f33;
}
#mainColumn .caution {
  color:#678;
}

#mainColumn p.download {   /* download button */
  position:relative;
  height:20px;
  min-height:20px;
  line-height:20px;
  text-indent:110px;
  color:#000;
}
html>body #mainColumn p.download {
  height:auto;
}
#mainColumn p.download a.button,
#mainColumn p.download a.button:link,
#mainColumn p.download a.button:visited,
#mainColumn p.download a.button:active {
  position:absolute;
  top:0;
  left:0;
  width:100px;
  height:20px;
  text-align:center;
  text-indent:0;
  font-size:13px;
  color:#ff0;
  background:url(/img/format/button.gif) no-repeat left top;
}
#mainColumn p.download a.button:hover {
  color:#fff;
  background:url(/img/format/button.gif) no-repeat left bottom;
}
#mainColumn p.download br {
  width:100%;
  height:20px;
}


#mainColumn ol {   /* ol */
  margin-bottom:10px;
  padding-left:25px;
}
#mainColumn ul {   /* ul */
  margin-bottom:10px;
  padding-left:15px;
}

#mainColumn * ol.table,
#mainColumn * ul.table {   /* table layout for 'ol' and 'ul' */
  position:relative;
  margin-bottom:10px;
  padding:0 0 0 10px;
  list-style:none;
}
#mainColumn * ol.table li,
#mainColumn * ul.table li {
  float:left;
  margin:0 10px 10px 0;
}
#mainColumn * ol.img-border li img,
#mainColumn * ul.img-border li img {
  border:solid 1px #999;
}

#mainColumn * ol.latin {
  list-style-type:lower-latin;
}
#mainColumn * ol.roman {
  list-style-type:lower-roman;
}


#mainColumn dl.table {   /* table layout for 'dl' */
  position:relative;
}
#mainColumn dl.table dt {
  position:absolute;
  width:6em;
}
html>body #mainColumn dl.table dt {
  font-family:'MS Gothic',monospace;
}
#mainColumn dl.table dd {
  position:relative;
  padding:0 0 10px 6em;
}
#mainColumn dl.table dd img {
  vertical-align:middle;
}
#mainColumn * dl.table {
  position:relative;
  margin-bottom:10px;
}
#mainColumn * dl.table dd {
  position:relative;
  padding:0 0 2px 6em;
}



/* other */
#mainColumn * .left {
  float:left;
  margin:0 10px 10px 0;
}
#mainColumn * .right {
  float:right;
  margin:0 0 10px 10px;
}
#mainColumn * .center {
  text-align:center;
}

#mainColumn * pre {
  margin:5px 0 10px 0;
  padding:5px;
  line-height:1.4em;
  font-size:0.95em;
  font-family:'MS Gothic',sans-serif,Arial;
  color:#000;
  background:#ffe;
  border:solid 1px #999;
}
#mainColumn * pre img {
  margin:1px 0;
  vertical-align:middle;
}
#mainColumn * pre .dir {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_dir.gif) no-repeat left center;
}
#mainColumn * pre .swf {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_swf.gif) no-repeat left center;
}
#mainColumn * pre .xml {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_xml.gif) no-repeat left center;
}
#mainColumn * pre .js {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_js.gif) no-repeat left center;
}
#mainColumn * pre .html {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_html.gif) no-repeat left center;
}
#mainColumn * pre .gif {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_gif.gif) no-repeat left center;
}
#mainColumn * pre .jpg {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_jpg.gif) no-repeat left center;
}
#mainColumn * pre .flv {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_flv.gif) no-repeat left center;
}

#mainColumn * blockquote {
  margin:5px 0 10px 0;
  padding:5px;
  line-height:1.2em;
  color:#000;
  background:#eff;
  border:solid 1px #999;
}

#mainColumn * table {
  width:100%;
  margin-bottom:10px;
  background:#68a;
  empty-cells:show;
  border-spacing:1px;
  border:0;
}
#mainColumn * table th,
#mainColumn * table td {
  padding:2px 4px;
  line-height:1.2em;
  background:#fff;
  border:0;
}
#mainColumn * table th {
  text-align:center;
  background:#e0f0ff;
  vertical-align:top;
  white-space:nowrap;
}
#mainColumn * table td {
  text-align:left;
  vertical-align:top;
}

/* webtool/flaver3 */
#mainColumn * pre .swf9 {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_swf9.png) no-repeat left center;
}
#mainColumn * pre .mp4 {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_mp4.png) no-repeat left center;
}
#mainColumn * pre .mp3 {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_mp3.png) no-repeat left center;
}
#mainColumn * pre .flv2 {
  padding:0.2em 0 0.2em 20px;
  background:url(/img/item/icon_flv.png) no-repeat left center;
}

#mainColumn * .icon-swf9 {
  padding:0.2em 0 0.2em 20px;
  white-space:nowrap;
  background:url(/img/item/icon_swf9.png) no-repeat left center;
}
#mainColumn * .icon-mp4 {
  display:inline-block;
}
#mainColumn * .icon-mp4 {
  display:inline;
  padding:0.2em 0 0.2em 20px;
  vertical-align:baseline;
  white-space:nowrap;
  background:url(/img/item/icon_mp4.png) no-repeat left center;
}
#mainColumn * .icon-mp3 {
  display:inline-block;
}
#mainColumn * .icon-mp3 {
  display:inline;
  padding:0.2em 0 0.2em 20px;
  vertical-align:baseline;
  white-space:nowrap;
  background:url(/img/item/icon_mp3.png) no-repeat left center;
}
#mainColumn * .icon-flv2 {
  padding:0.2em 0 0.2em 20px;
  white-space:nowrap;
  background:url(/img/item/icon_flv.png) no-repeat left center;
}
#mainColumn * .icon-xml {
  padding:0.2em 0 0.2em 20px;
  white-space:nowrap;
  background:url(/img/item/icon_xml.gif) no-repeat left center;
}
#mainColumn * .icon-jpg {
  padding:0.2em 0 0.2em 20px;
  white-space:nowrap;
  background:url(/img/item/icon_jpg.gif) no-repeat left center;
}





/* side column */
#sideColumn {
  display:inline-block;
}
#sideColumn {
  position:relative;
  z-index:1;
  float:right;
  display:block;
  width:220px;
  margin-left:-200px;
  padding:80px 10px 30px 10px;
  border-bottom:solid 1px #e0f0ff;
}
html>body #sideColumn {
  width:200px;
}
#sideColumn:after {
  clear:both;
  content:'.';
  visibility:hidden;
  display:block;
  width:100%;
  height:0;
}
* html>body #sideColumn {
  display:inline-block;
}

#sideColumn ul {
  padding-bottom:20px;
  list-style-type:none;
}
#sideColumn ul li {
}
#sideColumn ul li em {
  display:block;
}
#sideColumn ul li em a {
  display:block;
  margin-bottom:5px;
  height:20px;
  padding:0 0 4px 20px;
  line-height:1.2em;
  letter-spacing:2px;
}
#sideColumn ul li em a,
#sideColumn ul li em a:link,
#sideColumn ul li em a:visited,
#sideColumn ul li em a:active {
  background:url(/img/format/bg_sub_side.gif) no-repeat left bottom;
}
#sideColumn ul li em a:hover {
  background:url(/img/format/bg_sub_side.gif) no-repeat right bottom;
}
#sideColumn ul li em a.here,
#sideColumn ul li em a.here:link,
#sideColumn ul li em a.here:visited,
#sideColumn ul li em a.here:active
#sideColumn ul li em a.here:hover {
  color:#333;
  background:url(/img/format/bg_sub_side.gif) no-repeat right bottom;
}
html>body #sideColumn ul li em a {
  height:auto;
}
#sideColumn ul li a {
}

#sideColumn ul li ul {
  padding:0 0 10px 0;
}
#sideColumn ul li ul li {
}
#sideColumn ul li ul li a {
  position:relative;
  display:block;
  height:1.1em;
  min-height:1.1em;
  padding:0.2em 0 0.2em 20px;
  line-height:1.1em;
}
html>body #sideColumn ul li ul li a {
  height:auto;
}
#sideColumn ul li ul li a,
#sideColumn ul li ul li a:link,
#sideColumn ul li ul li a:visited,
#sideColumn ul li ul li a:active {
  color:#999;
  background:url(/img/format/icon_bolt.gif) no-repeat 5px 0.4em;
}
#sideColumn ul li ul li a:hover {
  color:#999;
  background:url(/img/format/icon_bolt_on.gif) no-repeat 5px 0.4em;
}
#sideColumn ul li ul li a[href]:link,
#sideColumn ul li ul li a[href]:visited,
#sideColumn ul li ul li a[href]:active {
  color:#06c;
}
#sideColumn ul li ul li a[href]:hover {
  color:#e33;
}
#sideColumn ul li ul li a.here,
#sideColumn ul li ul li a.here:link,
#sideColumn ul li ul li a.here:visited,
#sideColumn ul li ul li a.here:active
#sideColumn ul li ul li a.here:hover {
  color:#333;
  background:url(/img/format/icon_bolt_on.gif) no-repeat 5px 0.4em;
}
#sideColumn ul li ul li a img {position:absolute;
  margin:1px 0 0 2px;
  vertical-align:middle;
}

#sideColumn p {
  margin-bottom:10px;
  line-height:0;
}
#sideColumn p a {
  margin-right:5px;
}
#sideColumn p a img {
  vertical-align:middle;
}

#sideColumn p.eco {
  line-height:1.2;
}
#sideColumn p.eco em {
  display:block;
  padding-top:5px;
  font-weight:normal;
  font-style:normal;
}

#sideColumn p.time {
  padding-top:10px;
  text-align:right;
  color:#9cf;
}



/* bookmarks */
.book {
  position:relative;
  width:120px;
  height:20px;
  line-height:20px;
}
.book a {
  position:absolute;
  display:block;
  width:16px;
  height:16px;
  line-height:50px;
  overflow:hidden;
}
.book a.yahoo {
  background:url(/img/item/book_yahoo.png) no-repeat left top;
}
.book a.google {
  margin-left:21px;
  background:url(/img/item/book_google.png) no-repeat left top;
}
.book a.hatena {
  margin-left:42px;
  background:url(/img/item/book_hatena.png) no-repeat left top;
}
.book a.delicious {
  margin-left:63px;
  background:url(/img/item/book_delicious.png) no-repeat left top;
}
.book a.livedoor {
  margin-left:84px;
  background:url(/img/item/book_livedoor.png) no-repeat left top;
}
.book a.nifty {
  margin-left:104px;
  background:url(/img/item/book_nifty.png) no-repeat left top;
}



/* footer */
#footer {
  clear:both;
  position:relative;
  z-index:2;
  width:780px;
  height:30px;
  text-align:center;
  line-height:30px;
  font-style:normal;
  color:#fff;
  background:url(/img/format/bg_footer.gif) repeat-y left top;
}
html>body #footer {
  margin-left:auto;
  margin-right:auto;
}
* html>body #footer {
  margin-left:0;   /* for Mac IE5 bug. */
}



/* FLAVER */
.FlaverQuery {
  display:block;
  height:320px;
}



/* adsense */
#mainColumn div.ads-left-top {   /* left top */
  width:auto;
  margin:0 0 10px 0;
  padding:0;
  text-align:center;
  background:transparent;
}
#mainColumn div.ads-left-box {   /* left top */
  width:auto;
  margin:15px 0;
  padding:0;
  text-align:center;
  background:transparent;
}
#sideColumn div.ads-right-top {   /* right top */
  width:200px;
  height:200px;
  margin:0 0 15px 0;
}