@charset "UTF-8";
/* =========================================================
   Pieces
========================================================= */

/* common banner
----------------------------------------------- */
#commonBanner {
  clear: both;
  height: 105px;
  margin: 0;
  padding: 0;
  background-image: url(./images/bg-header.gif);
  background-position: left top;
  background-repeat: no-repeat;
  font-size: 12px;
  text-align: right;
}
#commonBanner .logo ,
#commonBanner h1 {
  float: left;
  width: 355px;
  height: 105px;
}
#commonBanner .logo a ,
#commonBanner h1 a {
  display: block;
  width: 355px;
  height: 0px !important;
  padding-top: 105px;
  overflow: hidden;
  outline: 0;
}
#commonBanner .menu {
  float: right;
  width: 582px;
  margin: 0px;
  text-align: right;
}
#commonBanner .upperMenu {
  margin: 10px 0px 0px 0px;
}
#commonBanner .lowerMenu {
  margin: 74px 0 5px;
  padding-right: 0px;
}
#commonBanner .menu form {
  display: inline;
}
input#search-box, a.chiiki img, a.soshiki img, a.toiawase, input.submit {
  vertical-align: top;
}
input#search-box {
  width: 130px;
}

/* otoiawase
---------------------- */
a.toiawase {
  display: inline-block;
  width: 100px;
  height: 20px;
  line-height: 20px;
  background-image:url(./images/bg-toiawase.gif);
  background-position: left top;
  background-repeat: no-repeat;
  vertical-align: top;
  line-height:2;
  text-indent: 9999px;
  overflow: hidden;
}

/* global navi
----------------------------------------------- */
#globalNavi {
  clear: both;
  height: 35px;
  margin-bottom:15px;
  overflow: hidden;
}
#globalNavi a {
  display: block;
  float: left;
  width: 158px;
  height: 35px;
  background-image: url(./images/bg-menu-center.jpg);
  background-position: left top;
  background-repeat: repeat-x;
  color: #000000;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: 35px;
}
#globalNavi a.about {
  background-image: url(./images/bg-menu-left.jpg);
}

#globalNavi a.faq {
  width: 159px;
  background-image: url(./images/bg-menu-right.jpg);
}
#globalNavi a:hover {
  background-position: left -35px;
  background-repeat: repeat-x;
  color: #ffffff;
}

/* global navi active
----------------------------------------------- */
#page-index #globalNavi a.top,
#globalNavi a.current,
#globalNavi a.current:hover,
#page-cms #globalNavi a.case {
  background-position: left -70px;
  color: #FFFFFF;
}

/* navi second
----------------------------------------------- */
#naviSecond {
  width: 940px;
  height: 18px;
  margin-bottom: 0;
  padding: 5px;
  background: url(./images/bg-menu-second.jpg) no-repeat;
}
#naviSecond a {
  display: inline-block;
  margin: 0 10px;
  padding-left: 10px;
  background: url(./images/ic-menu-second.gif) left center no-repeat;
}

/* footer
----------------------------------------------- */
#poweredBy {
    background-color: #EFEFEF;
    background-image: url(./images/bg-footerline.gif);
    background-position: left top;
    background-repeat: no-repeat;
    height: 80px;
    padding: 10px 0px 0 0;
    text-align: right;
}
#poweredBy span {
    padding: 0px 5px 0 0;
    vertical-align: middle;
}
#poweredBy img {
    padding: 0px 5px 0 0;
    vertical-align: middle;
}

/* breadCrumbs
----------------------------------------------- */
#breadCrumbs ol,
#breadCrumbs li {
 list-style: none;
}
#breadCrumbs ol {
 margin: 5px 0 0 5px;
}
#breadCrumbs li {
 display: inline-block;
}
#breadCrumbs li:not(:first-child):before {
 content: ">";
 margin: 0 4px 0 3px;
} 
#pageTop {
  text-align: right;
}

/* piece
----------------------------------------------- */
.piece {
  margin-bottom: 10px;
}
#footer .piece {
  margin-bottom: 0px;
}

/* relationBanner
----------------------------------------------- */
#relationBanner {
  background-color: #F5F5F5;
  padding: 15px;
}
#relationBanner .pieceBody {
  padding: 0px;
}
#relationBanner a {
  display: block;
  margin-bottom: 7px;
}
.rubyLogo a {
  float: left;
  margin-bottom: 0;
  margin-right: 5px;
}
#relationBanner .rubyLogo img {
  margin-bottom: 0;
}
.rubyLogo:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.rubyLogo {
  display: inline-block;
}
.rubyLogo {
  display: block;
}

/* page-title
----------------------------------------------- */
#pageTitle h1,
.contentArticleDoc h1{
  padding: 7px 0px 4px 20px;
  font-size: 200%;
  font-weight: bold;
}
h1 {
  color: #000000;
}

/* side-list
----------------------------------------------- */
#links ul,
#menu ul {
  padding: 0px 0px 0px 0px;
  background-color: #f5f5f5;
}
#links li, #menu li {
  background-image: url(./images/ic-list.gif);
  background-position: left 0.5em;
  background-repeat: no-repeat;
  padding: 1px 0 1px 8px;
}
#links #sideMenu li,
#menu #sideMenu li {
  background-image: none;
  background-color: #EFEFEF;
  border-bottom: 1px solid #CCCCCC;
  padding: 0px;
}
#links #sideMenu li a,
#menu #sideMenu li a{
  background-image: url(./images/ic-sidemenu.gif);
  background-position: left 0.6em;
  background-repeat: no-repeat;
  color: #000000;
  display: block;
  padding: 5px 0 5px 15px;
  text-decoration: none;
  width: 160px;
}
#links #sideMenu li a:hover,
#menu #sideMenu li a:hover{
  background-color: #D4F0FF;
}
#menu .pieceHeader,
#links .pieceHeader {
  background-image: url(./images/tl-side.gif);
  background-position: left top;
  background-repeat: no-repeat;
  background-color: #333347;
  line-height: 28px;
  padding: 0 5px 0 15px;
}
#menu .pieceHeader h2,
#links .pieceHeader h2 {
  color: #ffffff;
  font-weight: bold;
}
#menu #sideMenu li.kind,
#menu #sideMenu li.kindTop {
  padding: 2px 0 2px 15px;
  background-color: #d6dbe1;
  font-size: 120%;
  font-weight: bold;
}
#menu #sideMenu li.kind {
  margin: 1px 0 0;
}

/* Doc Tabs
--------------------------------------------------------- */
/* tabs
------------------------------------- */
#docTab .tabs {
  width: 100%;
}
#docTab .tabs a {
  display: inline-block;
  float: left;
  width: 20%; 
  line-height: 28px;
  margin-right: 3px;
  padding: 0px 3px;
  background-image: url(./images/bg-tab.gif);
  color: #333333;
  border: 1px solid #cccccc;
  border-bottom: none;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  text-decoration: none;
}
#docTab .tabs:after {  
  content: ".";  
  display: block;  
  visibility: hidden;  
  height: 0.1px;  
  font-size: 0.1em;  
  line-height: 0;  
  clear: both;  
}
#docTab .tabs a:hover {
  background-position: 0px -100px;
  color: #333333;
}
#docTab .tabs a.current,
#docTab .tabs a.current:hover {
  background-position: 0px -200px;
}

/* content
------------------------------------- */
#docTab .wrapper {
  clear: both;
  width: 100%;
  margin: 0px;
  border: 1px solid #cccccc;
}
#docTab .content {
  clear: both;
  height: auto !important;
  padding: 0px 0px;
}
#docTab .content ul {
  padding: 10px;
}
#docTab .content li {
  margin: 0px;
  padding: 0px 0px 0px 10px;
  background-image: url(./images/ic-list-shinchaku.gif);
  background-position: left 7px;
  background-repeat: no-repeat;
  line-height: 1.5;
}
#docTab .content ul .separator,
#docTab .content ul .unit {
  display: none;
}


/* links
------------------------------------- */
#docTab .links .feed {
  position: absolute;
  float: left;
  margin-top: 10px;
}
 #docTab .links .feed a {
  display: inline-block;
} 
 #docTab .links .feed a.rss {
  width: 40px;
  height: 0px;
  margin-left: 15px;
  padding-top: 14px;
  background-image: url(./images/bt-rss.gif);
  background-repeat: no-repeat;
  overflow: hidden;
  vertical-align: middle;
} 
#docTab .links .feed a.atom {
  width: 40px;
  height: 0px;
  margin-left: 5px;
  padding-top: 14px;
  background-image: url(./images/bt-atom.gif);
  background-repeat: no-repeat;
  overflow: hidden;
  vertical-align: middle;
}
#docTab .links .more a {
  overflow: hidden;
}

/* twitter */
#twtr-widget-1 {
  margin-bottom:10px;
}
#leaflet,
#leafletGw,
#osskit {
  background-image: url(./images/bg-sidedelimits.gif);
  background-position: left top;
  background-repeat: no-repeat; 
  background-color: #f5f5f5;
  padding: 15px 10px 10px 10px;
  margin-bottom: 0px;
}
#osskit {
  padding: 10px;
  margin-bottom: 0px;
}
#leaflet a,
#leafletGw a,
#osskit a {
  display: inline-block;
  margin: 0 0 5px;
}
#leaflet img ,
#leafletGw img,
#osskit img {
  border:1px solid #CCCCCC;
}

/* jirei
----------------------------------------------- */
#jirei .pieceBody {
  background-image: url(./images/chizu.png);
  background-repeat: no-repeat;
  background-position: center center;
}
#jirei .pieceBody .donyu {
  padding: 60px 0 60px 0;
  text-align: center;
  font-size: 130%;
}
#jirei .pieceBody .donyu a {
  color: #000000;
}
#jirei .pieceBody .update {
  text-align: right;
}

#jirei .pieceContainer {
  border: 1px solid #084D9C;
}

/* CKEditor templates
----------------------------------------------- */
.temp1:after, .temp2:after, .temp3:after, .temp4:after, .temp10:after {
  content: "";
  clear: both;
  display: block;
}
.temp1, .temp2, .temp3, .temp4, .temp10 {
  margin-bottom: 10px;
}
.temp1 .thumb {
  float: left;
  margin: 6px;
}
.temp1 ul,
.temp1 ol {
  display: inline-block;
  vertical-align: top;
}
.temp2 .thumb {
  float: right;
  margin: 6px;
}
.flow {
  margin-bottom: 3em;
}
.flow .temp1 .thumb + div {
  float: left;
  width: 67%;
}
.temp3, .temp4, .temp10 {
  text-align: center;
}
.temp3 dl, .temp4 dl, .temp9 dl {
  display: inline-block;
  margin: 0 5px;
  vertical-align: bottom;
}
.temp3 dl {
  max-width: 48%;
}
.temp4 dl, .temp10 dl, {
  max-width: 31%;
}
.temp9 dl {
  min-width: 18%;
  margin-bottom: 10px;
}
.temp3 dl dt, .temp4 dl dt, .temp9 dl dt, .temp10 dl dt {
  margin: 0 0 10px;
  text-align: center;
}
.temp3 dl dd, .temp4 dl dd, .temp9 dl dd, .temp10 dl dd {
  text-align: center;
}
table.temp5 {
  width: 100%;
}
.temp7 {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ffaaaa;
  background-color: #fff3f3;
}
.temp7 p {
  margin: 0 0 10px 0;
}
.temp8 .thumb {
  float: left;
  margin-right: 18px;
  margin-bottom: 10px;
}
.temp8 .text {
  float: left;
  width: 530px;
}
.temp8 dl {
  margin: 0;
  padding: 0;
  border-top: 1px solid #000;
}
.temp8 dl dt,
.temp8 dl dd {
  display: inline-block;

  margin: 0;
  vertical-align: middle;
}
.temp8 dl dt {
  font-size: 110%;
  font-weight: bold;
}
.temp10 dl {
  display: inline-block;
  margin: 0 40px 20px;
  vertical-align: bottom;
}

/* adobeReader download
----------------------------------------------- */
.adobeReader, .temp7 {
  clear: both;
  margin: 0 0 20px;
  padding: 10px 20px 10px 196px;
  border: 1px solid #ffaaaa;
  background: #fff3f3 url("./images/adobe_bn.png") no-repeat scroll 20px center;
}



/* docs
----------------------------------------------- */
#recentDocs .pieceHeader h2 {
/*  background-image: url("./images/tl-pickup.gif"); */
  background-position: left top;
  background-repeat: no-repeat;
  background-color: #333347;
  color: #FFFFFF;
  font-size: 120%;
  font-weight: bold;
  padding-left: 10px;
  padding-top: 8px;
  height: 26px;
}
#recentDocs .pieceBody {
  border: 1px solid #ccc;
}
#recentDocs .docs {
  clear: both;
  height: auto !important;
  padding: 0px 0px;
}
#recentDocs .docs {
  padding: 10px;
}
#recentDocs .docs li {
  margin: 0px;
  padding: 0px 0px 4px 10px;
  background-image: url(/_themes/joruri/piece/images/ic-list-shinchaku.gif);
  background-position: left 7px;
  background-repeat: no-repeat;
  line-height: 1.5;
}
#recentDocs .more {
  padding: 0 12px 8px;
  text-align: right;
}
.docs li {
  display: flex;
}
.docs li span.publish_date {
  flex-basis: 9em;
}