@font-face { font-family: 'rs-picts'; src: url("fonts/rs-picts.eot"); src: url("fonts/rs-picts.eot?#iefix") format("embedded-opentype"), url("fonts/rs-picts.woff") format("woff"), url("fonts/rs-picts.ttf") format("truetype"), url("fonts/rs-picts.svg#rs-picts") format("svg"); } .pictgramize { padding-right: 0.15em; padding-left: 0.15em; font-family: 'rs-picts'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } header.global div.logos, header.global div.page-info { padding-right: 15px; padding-left: 15px; } @media screen and (min-width: 720px) { header.global div.logos, header.global div.page-info, nav#global-nav, .ui-page .ui-content, footer.global { width: 70%; margin-right: auto; margin-left: auto; } } .ui-page .ui-content { clear: both; line-height: 1.6 !important; } .ui-footer { border: none; background: none; } p.copyright { text-align: center; text-shadow: none; font-weight: normal; font-size: 10px; color: #000000;} .ui-input-text.ui-focus, .ui-input-search.ui-focus { box-shadow: 0 0 3px #cc0033; } .name-grid .ui-block-a { padding-right: 0.25em; } .name-grid .ui-block-b { padding-left: 0.25em; } .mainmenu-sub li .ui-li { text-align: center; } .mainmenu-sub .ui-li .ui-btn-inner a.ui-link-inherit, .mainmenu-sub .ui-li-static.ui-li { padding-top: 0.25em; padding-bottom: 0.25em; } .mainmenu-sub .ui-li-heading .pictgramize { display: inline-block; margin-left: -0.5em; padding-left: 0; } .zip-grid { table-layout: fixed; width: 100%; } .zip-grid .ui-block-a, .zip-grid .ui-block-b, .zip-grid .ui-block-c { float: none; display: table-cell; vertical-align: middle; } .zip-grid .ui-block-a { position: relative; width: 18%; min-width: 4.25em; padding-right: 1em; } .zip-grid .ui-block-a::after { position: absolute; content: '-'; right: 0.3em; top: 50%; display: table-cell; margin-top: -0.75em; } .zip-grid .ui-block-b { width: 25%; min-width: 5em; margin-right: 0.5em; } .zip-grid .ui-block-c { width: 47%; } .zip-grid .ui-block-c a { display: inline-block; } .zip-grid .ui-block-c a > span { display: inline-block; white-space: normal; } .tel-grid .ui-block-a { width: 20%; } .tel-grid .ui-block-a, .tel-grid .ui-block-b { position: relative; margin-right: 1em; } .tel-grid .ui-block-a:after, .tel-grid .ui-block-b:after { position: absolute; top: 25%; right: -0.75em; content: '-'; display: block; } .tel-grid .ui-block-b, .tel-grid .ui-block-c { width: 28%; } div#cardNoError .ui-block-a { width: 65%; } .cardNo-grid .ui-block-a { width: 20%; } .cardNo-grid .ui-block-a, .cardNo-grid .ui-block-b { position: relative; margin-right: 1em; width: 20%; } .cardNo-grid .ui-block-a:after, .cardNo-grid .ui-block-b:after { position: absolute; top: 25%; right: -0.75em; content: '-'; display: block; } .cardNo-grid .ui-block-b, .cardNo-grid .ui-block-c { position: relative; margin-right: 1em; width: 20%; } .cardNo-grid .ui-block-b:after, .cardNo-grid .ui-block-c:after { position: absolute; top: 25%; right: -0.75em; content: '-'; display: block; } .cardNo-grid .ui-block-d { width: 80px; } .efectiveTerm-grid .ui-block-a { width: 80px; } .efectiveTerm-grid .ui-block-a, .efectiveTerm-grid .ui-block-b { position: relative; margin-right: 2.00em; } .efectiveTerm-grid .ui-block-a:after { position: absolute; top: 25%; right: -1.50em; content: '月/'; display: block; } .efectiveTerm-grid .ui-block-b:after { position: absolute; top: 25%; right: -1.50em; content: '年'; display: block; } .efectiveTerm-grid .ui-block-b, .efectiveTerm-grid .ui-block-c { width: 80px; } .cardLogo-grid { background-color:#FFFFFF; padding: 10px; position: relative; width:50%; } .cardLogo-grid .ui-block-a { width: 20%; } .cardLogo-grid .ui-block-a, .cardLogo-grid .ui-block-b { display: table; margin-right: 1em; width: 5%; } .cardLogo-grid .ui-block-a:after, .cardLogo-grid .ui-block-b:after { top: 25%; right: -0.75em; display: block; } .cardLogo-grid .ui-block-b, .cardLogo-grid .ui-block-c { display: table; margin-right: 1em; width: 5%; } .cardLogo-grid .ui-block-b:after, .cardLogo-grid .ui-block-c:after { top: 25%; right: -0.75em; display: block; } .cardLogo-grid .ui-block-c, .cardLogo-grid .ui-block-d { display: table; margin-right: 1em; width: 5%; } .cardLogo-grid .ui-block-c:after, .cardLogo-grid .ui-block-d:after { top: 25%; right: -0.75em; display: block; } .cardLogo-grid .ui-block-d, .cardLogo-grid .ui-block-e { display: table; width: 5%; } .cardLogo-grid .ui-block-d:after, .cardLogo-grid .ui-block-e:after { top: 25%; right: -0.75em; display: block; } .datetime-distance-grid .ui-block-a { width: 70%; margin-left: 15%; } .datetime-distance-grid .ui-block-b { top: 0.3em; width: 35%; margin-left: 15%; } .datetime-distance-grid .ui-block-c { top: 0.3em; width: 35%; margin-left: 0%; } footer.global .terms { border-top: 1px solid #BBB; background: #b8beb7; } footer.global .terms a, footer.global .terms span.active { padding: 0.75em 0; border-right: 1px solid #BBB; text-align: center; text-shadow: none; color: #000000; font-weight: normal; font-size: 80%; } footer.global .terms a { cursor: pointer; } footer.global .terms a:last-child { border-right: none; } footer.global .terms a:active { background-color: #DDD; } .ui-listview.fix-up .ui-li-desc { font-size: 100%; } .desc-extended .ui-li-desc { text-overflow: clip; overflow: visible; white-space: normal; } /* input datebox input */ .ui-input-datebox input { text-align: center; } /* extending checkbox hit area */ .checkbox-extend .ui-icon { left: 13px; padding: 2px; } .checkbox-extend .ui-btn-icon-left > .ui-btn-inner > .ui-icon, .checkbox-extend .ui-btn-icon-right > .ui-btn-inner > .ui-icon { margin-top: -11px; } .checkbox-extend .ui-icon-checkbox-on { background-position: -645px 1px; } .checkbox-extend .ui-icon-checkbox-off { background-position: -681px 1px; } /* input inner shadow */ .ui-shadow-inset { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; background-color: #FAFAFA; } /* error */ .invalid .ui-input-text.ui-shadow-inset, .invalid .ui-input-search.ui-shadow-inset { background-color: #FFDDDD; } /* input text & password focus */ .ui-input-text.ui-shadow-inset.ui-focus, .ui-input-search.ui-shadow-inset.ui-focus { background-color: #FFF9E8; } .ui-input-text.ui-focus, .ui-input-search.ui-focus { -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .fulltext .ui-btn-inner { text-overflow: clip; } .fulltext .ui-btn-inner .ui-btn-text { white-space: normal; } /* additions */ .pictgramize { position: relative; top: 0.125em; font-size: 112.5%; } .inline-pict { position: relative; top: 0.25em; } .inline-pict.invalid { position: absolute; top: -0.3em; left: 0.2em; z-index: 50; } .inline-pict.mini { top: 0.175em; } #global-nav .inline-pict { top: 0.175em; } .invalid-pict-box { position: absolute; } header.global { border-top: 3px solid #fa0000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } header.global .service-name { float: left; display: block; margin-top: 6px; padding-bottom: 0.5em; } header.global .alliance-name { float: right; margin-top: 5px; padding-bottom: 0.5em; } header.global div.page-info { *zoom: 1; clear: both; border-top: 1px solid #ccc; } header.global div.page-info:before, header.global div.page-info:after { content: " "; display: table; } header.global div.page-info:after { clear: both; } header.global h1 { float: left; line-height: 1; margin: 0; padding: 0.5em 0; text-align: left; font-size: 100%; } header.global p.user-name { float: right; line-height: 1; margin: 0; padding: 0.5em 0; font-weight: normal; font-size: 87.5%; } header.global a.goto-menu { float: right; display: block; padding: 0.5em 10px; border-bottom: 1px solid #F2F2F2; border-left: 1px solid #CCC; text-decoration: none; text-shadow: none; color: #cc0033; font-weight: normal; background: -webkit-linear-gradient( white, #dddddd), top repeat; background: linear-gradient( white, #dddddd), top repeat; } header.global a.goto-menu:link { color: #cc0033; } nav#global-nav { clear: both; padding-right: 15px; padding-left: 15px; border-bottom: 1px solid #CCCCCC; background-color: #CCCCCC; } nav#global-nav .ui-btn-inner { font-size: 87.5%; } nav#global-nav .ui-block-a .ui-btn { margin-left: 0; } nav#global-nav .ui-block-b .ui-btn { margin-right: 0; } .level-active { color: #cc0033; } .level-inactive { color: #CCC; } .to-top { display: block; margin: 0 0 1em; padding: 0.5em 0; border-top: 1px solid #999; text-align: center; text-decoration: none; text-shadow: none; color: #222; font-size: 87.5%; background-color: #CCC; } .to-top:link { color: #222; } .to-top .pictgramize { color: #cc0033; } hr.sepalater { margin: 1em 0; border: none; } hr.sectioner { margin: 2em 0; border: none; } .login_logo img { width: 100%; height: 100%; } .third-party-searching { margin-bottom: -0.25em; } .third-party-searching .ui-btn-inner { padding: 0.75em 0 1em; font-size: 150%; } .third-party-searching .pictgramize { position: relative; top: 0.175em; font-size: 150%; } #newslist .ui-li .ui-btn-text a.ui-link-inherit { text-overflow: clip; overflow: auto; white-space: pre-wrap; } #newslist a { padding-left: 40px; line-height: 1.3; } #newslist a.new { background: url(../images/icons/new_main.png) 14px 28px no-repeat; background-size: 24px; } #newslist2 .ui-li .ui-btn-text a.ui-link-inherit { text-overflow: clip; overflow: auto; white-space: pre-wrap; } #newslist2 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, #newslist2 .ui-li-static.ui-li-has-thumb { min-height: 0; padding-left: 16px; } #newslist2 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit img, #newslist2 .ui-li-static.ui-li-has-thumb img { float: none; position: relative; top: -2px; vertical-align: bottom; margin: 0; } .info-cat1, .info-cat2 { display: inline-block; line-height: 1; margin-right: auto; padding: 0.25em; border: 2px solid #cc0033; border-radius: 3px; text-shadow: none; color: #FFF; font-weight: normal; font-size: 62.5%; background-color: #cc0033; } .info-cat2 { color: #cc0033; background-color: #FFF; } /* input */ .invalid label, label.invalid { color: #CC0000; font-weight: bold; } .invalid label .input-example, .invalid label .required, label.invalid .input-example, label.invalid .required { font-weight: normal; color: #262626; } .invalid label .required, label.invalid .required { color: #FFF; } .input-example, .required { position: relative; top: -0.2em; left: 0.25em; text-shadow: none; font-size: 75%; } .required { padding: 0.2em 0.5em; border-radius: 0.25em; color: #FFF; background-color: #CC0000; } .input-ctrl { color: #E40; } /* images styling */ .image-holder { overflow: hidden; max-width: 600px; max-height: 576px; margin-right: auto; margin-left: auto; } .image-holder img { width: 100%; height: auto; } .device-image { text-align: center; } .device-image img { width: 100%; max-width: 290px; height: auto; } .note { margin-top: 0; font-size: 75%; } div.progress-bar-box { max-width: 640px; margin: 1em auto; padding: 1em; border-radius: 5px; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) inset; background-color: #fff; } div.progress-bar-box span.progress-bar { display: block; line-height: 1; background-color: #CCC; } div.progress-bar-box span.progress-bar img { vertical-align: bottom; width: 0%; } .history-search-condition.ui-collapsible-set { margin-top: 0; } .sort-condition-selector { margin-bottom: -0.5em; text-align: right; } .sort-condition-selector label, .sort-condition-selector div.ui-select { display: inline-block; } .history-list li.ui-li a.ui-link-inherit { position: relative; padding-left: 3.5em; } .history-list .history-action { position: absolute; top: 1.5em; left: 0.625em; } .more-history a.ui-link-inherit { text-align: center; padding: 1.25em 40px !important; } ul.status-list { list-style: none; margin: 0; margin-bottom: 1em; padding: 0; } ul.status-list li { display: inline-block; line-height: 1; width: 23%; box-sizing: border-box; text-align: center; } @media screen and (min-width: 720px) { ul.status-list li { width: auto; } } ul.status-list li.enabled { color: #cc0033; } ul.status-list li.disabled { color: #CCC; } ul.status-list li span.pictgramize { padding-right: 0; padding-left: 0; font-size: 350%; } ul.status-list li span.pict-desc { padding-left: 0.2em; font-size: 55%; } @media screen and (min-width: 720px) { ul.status-list li span.pict-desc { display: inline; font-size: 75%; } } .collapsible-fix { margin: 0 -15px -10px; padding: 0 15px 10px; background-color: #fff; } #device-control .ui-grid-a { margin-bottom: -15px; padding: 5px 5px 10px; border-radius: 3px; background-color: #f7d8e0; } #device-control .ui-block-a { width: 33%; padding-top: 0.75em; text-align: right; } #device-control .ui-block-b { width: 66%; } /* contractanting steps (breadcrmbs) */ .usage-step { position: relative; list-style: none; margin-top: 0; margin-right: auto; margin-left: auto; padding: 0; border: 1px solid #CCC; border-radius: 3px; color: #666; font-size: 87.5%; background-color: #FFF; } .usage-step.finished { background-color: #f4ccd6; } .usage-step li { float: left; position: relative; z-index: 99; box-sizing: border-box; border-right: 1em solid transparent; color: #000; } .usage-step li span { display: block; padding: 0.4em 0.1em 0.4em 0.6em; } .usage-step li:before, .usage-step li:after { content: ''; position: absolute; top: 50%; right: -0.8em; display: block; margin-top: -3em; border-top: 3em solid transparent; border-bottom: 3em solid transparent; border-left: 1em solid; } .usage-step li:before { right: -0.9em; z-index: 99; border-left-color: #999; } .usage-step li:after { z-index: 100; border-left-color: #FFF; } .usage-step li:last-child { border: none; } .usage-step li:last-child:before, .usage-step li:last-child:after { content: none; border: none; } .usage-step.finished li:nth-child(1).step-finished { background-color: #cccccc; } .usage-step .active span { background-color: #f4ccd6; } .usage-step .step-finished { background-color: #f4ccd6; } .usage-step .step-finished span { background-color: #cccccc; } .usage-step .active:after { border-left-color: #f4ccd6; } .usage-step .step-finished:after { border-left-color: #cccccc; } h2.content-header { margin-right: -15px; margin-left: -15px; padding: 0.25em 15px; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 100%; background-color: #363636; } #floatingCirclesG { position: relative; width: 128px; height: 128px; -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } .f_circleG { position: absolute; background-color: #FFFFFF; height: 23px; width: 23px; -moz-border-radius: 12px; -moz-animation-name: f_fadeG; -moz-animation-duration: 1.04s; -moz-animation-iteration-count: infinite; -moz-animation-direction: linear; -webkit-border-radius: 12px; -webkit-animation-name: f_fadeG; -webkit-animation-duration: 1.04s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; -ms-border-radius: 12px; -ms-animation-name: f_fadeG; -ms-animation-duration: 1.04s; -ms-animation-iteration-count: infinite; -ms-animation-direction: linear; -o-border-radius: 12px; -o-animation-name: f_fadeG; -o-animation-duration: 1.04s; -o-animation-iteration-count: infinite; -o-animation-direction: linear; border-radius: 12px; animation-name: f_fadeG; animation-duration: 1.04s; animation-iteration-count: infinite; animation-direction: linear; } #frotateG_01 { left: 0; top: 52px; -moz-animation-delay: 0.39s; -webkit-animation-delay: 0.39s; -ms-animation-delay: 0.39s; -o-animation-delay: 0.39s; animation-delay: 0.39s; } #frotateG_02 { left: 15px; top: 15px; -moz-animation-delay: 0.52s; -webkit-animation-delay: 0.52s; -ms-animation-delay: 0.52s; -o-animation-delay: 0.52s; animation-delay: 0.52s; } #frotateG_03 { left: 52px; top: 0; -moz-animation-delay: 0.65s; -webkit-animation-delay: 0.65s; -ms-animation-delay: 0.65s; -o-animation-delay: 0.65s; animation-delay: 0.65s; } #frotateG_04 { right: 15px; top: 15px; -moz-animation-delay: 0.78s; -webkit-animation-delay: 0.78s; -ms-animation-delay: 0.78s; -o-animation-delay: 0.78s; animation-delay: 0.78s; } #frotateG_05 { right: 0; top: 52px; -moz-animation-delay: 0.91s; -webkit-animation-delay: 0.91s; -ms-animation-delay: 0.91s; -o-animation-delay: 0.91s; animation-delay: 0.91s; } #frotateG_06 { right: 15px; bottom: 15px; -moz-animation-delay: 1.04s; -webkit-animation-delay: 1.04s; -ms-animation-delay: 1.04s; -o-animation-delay: 1.04s; animation-delay: 1.04s; } #frotateG_07 { left: 52px; bottom: 0; -moz-animation-delay: 1.17s; -webkit-animation-delay: 1.17s; -ms-animation-delay: 1.17s; -o-animation-delay: 1.17s; animation-delay: 1.17s; } #frotateG_08 { left: 15px; bottom: 15px; -moz-animation-delay: 1.3s; -webkit-animation-delay: 1.3s; -ms-animation-delay: 1.3s; -o-animation-delay: 1.3s; animation-delay: 1.3s; } @-moz-keyframes f_fadeG { 0% { background-color: #000000; } 100% { background-color: #FFFFFF; } } @-webkit-keyframes f_fadeG { 0% { background-color: #000000; } 100% { background-color: #FFFFFF; } } @-ms-keyframes f_fadeG { 0% { background-color: #000000; } 100% { background-color: #FFFFFF; } } @-o-keyframes f_fadeG { 0% { background-color: #000000; } 100% { background-color: #FFFFFF; } } @keyframes f_fadeG { 0% { background-color: #000000; } 100% { background-color: #FFFFFF; } } .loading-animation { margin: 0 auto; padding: 1em; text-align: center; } .iconlist dd { margin: 0; padding: 0; margin-bottom: 1em; } .id_omission { position: relative; top: -0.1em; } .ui-datebox-container .ui-header .ui-btn-left[title=Close] { left: auto; right: 5px; } .ui-datebox-griddate:active { background-color: #F00; } .ui-datebox-griddate { border: 1px solid transparent; } .ui-li-desc { text-overflow: clip; overflow: visible; white-space: normal; }