* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
margin: 0 auto;
font-size: 17px;
}
body{
font-family: Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
background-color: #d7d7d7;
height: 100%;
max-width: 500px;
-webkit-text-size-adjust: 100%;
position: relative;
}
li {
list-style: none;
height: 44px;
line-height: 43px;
border-bottom: 1px solid #d7d7d7;
}
button {
font-size: 1.0em;
color: #fff;
border-style: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 36px;
line-height: 36px;
margin-top: 2px;
cursor: pointer;
background-color: #848484;
}
input[type="password"] {
height: 36px;
line-height: 26px;
width: 90%;
background-color:#f6f6f9;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 2px solid #2ba5ce;
border-radius: 10px;
padding-left: 15px;
margin-left: 5%;
font-size: 1.1em;
letter-spacing: 0.3em;
}
input[type="text"] {
height: 36px;
line-height: 26px;
width: 90%;
background-color:#f6f6f9;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 2px solid #2ba5ce;
border-radius: 10px;
padding-left: 15px;
font-size: 1.1em;
margin-left: 5%;
}
.off{
display: none;
}
.on{
display: block;
}
.switch,
.non_switch {
background: #f6f6f9;
margin: 0;
padding: 10px 10px 10px 20px;
cursor: pointer;
border-bottom: 1px solid #d7d7d7;
}
.switch:hover,
.non_switch:hover,
.switch.on {
background-color: #444;
color: #FFF;
}
.link_menu {
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.link_menu li {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
.link_menu li a {
display: block;
position: relative;
height: 43px;
line-height: 43px;
margin: 0;
padding: 0px 10px 0px 20px;
background: #f6f6f9;
color: #000;
font-size: 17px;
text-decoration: none;
}
.link_menu li a:hover {
background: #444;
color: #FFF;
}
.link_menu img {
margin:0;
padding:0;
width:44px;
height:44px;
float:right;
}
.link_menu li span.r_arrow {
position: relative;
}
.link_menu li span.r_arrow::before {
float:right;
margin-top:17px;
margin-right:20px;
width:8px;
height:8px;
content:'';
boder:0px;
border-top:1px solid #b0b0b0;
border-right: 1px solid #b0b0b0;
-ms-transform:rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.link_menu li:hover span.r_arrow::before {
border-top-color:#ffffff;
border-right-color: #ffffff;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
.pagination a:hover:not(.active) {background-color: #ddd;}
ul.off{
margin: 0;
padding: 0;
}
ul.off li{
list-style: none;
}
li.progress_text {
border-bottom: none;
padding: 0 0 0 10px;
}
li.progress_text_p10 {
border-bottom: none;
padding: 0 0 0 10px;
background-color: #f6f6f9;
}
li.progress_space {
padding: 16px 0px;
background-color: #f6f6f9;
}
div.progress_frame {
width: 80%;
height: 10px;
background-color: #B4B4B4;
}
div.progress_bar {
float: left;
width: 0%;
height: 100%;
background-color: #1E90FF;
}
#m_lock {
z-index: 9999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #808080;
opacity: 0.5;
}
#m_lockNetConn {
z-index: 9999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
}
.modal_1st
{
top: 0;
left: 0%;
width: 100%;
height: 100%;
display: none;
position: fixed;
z-index:90;
}
.modal_2nd
{
top: 0;
left: 0%;
width: 100%;
height: 100%;
display: none;
position: fixed;
z-index:190;
}
.modal_3rd
{
top: 0;
left: 0%;
width: 100%;
height: 100%;
display: none;
position: fixed;
z-index:200;
}
.modal_window,
.modal_window_t {
top: 20px;
width: 100%;
max-width: 500px;
display: block;
position: relative;
z-index: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow:hidden;
}
.modal_window p,
.modal_window_t p {
width: 100%;
background-color: #848484;
color: #fff;
height: 44px;
line-height: 44px;
font-size: 19px;
text-align: left;
padding-left: 30px;
}
.modal_window ul,
.modal_window_t ul {
max-height:800px;
height: 80%;
overflow:auto;
}
.modal_window li {
text-align: left;
padding-left: 20px;
cursor: pointer;
overflow: auto;
width: 100%;
background-color: #f6f6f9;
}
.modal_window li.apply {
text-align: left;
padding: 0px !important;
cursor: pointer;
overflow: auto;
width: 100%;
background-color: #f6f6f9;
}
.modal_window li a {
display: block;
height: 43px;
line-height: 43px;
padding-right: 30px;
background: #f6f6f9;
color: #000;
font-size: 17px;
text-decoration: none;
pointer: cursor;
}
.modal_window_z300,
.modal_window_z300_t {
top: 50px;
width: 100%;
max-width: 500px;
display: block;
background-color: #f6f6f9;
position: relative;
z-index: 300;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow:hidden;
}
.modal_window_z300 p,
.modal_window_z300_t p {
width: 100%;
background-color: #848484;
color: #fff;
height: 43px;
line-height: 43px;
font-size: 19px;
text-align: left;
padding-left:30px;
}
.modal_window_z300 p.c_message,
.modal_window_z300_t p.c_message {
text-align: center;
}
.modal_window_z300 ul,
.modal_window_z300_t ul {
max-height:300px;
overflow:auto;
}
.modal_window_z300 li {
cursor: pointer;
padding-left: 15px;
overflow: auto;
width: 100%;
}
.modal_window_z300 li a {
display: block;
height: 43px;
line-height: 43px;
padding-right: 30px;
background-color: #f6f6f9;
color: #000;
font-size: 17px;
text-decoration: none;
pointer: cursor;
}
.modal_window_z300 li {
cursor: pointer;
overflow: auto;
width: 100%;
}
span.left {
float: left;
}
span.left_s {
float: left;
height: 21px;
line-height: 21px;
text-align: left;
}
span.right {
float: right;
}
span.right_s {
float: right;
font-size: 1em;
color: #000000;
}
span.right_mcn {
float: right;
font-size: 0.8em;
padding-right: 30px;
color: #000000;
}
span.right_mcf {
float: right;
font-size: 0.8em;
}
.gen_menu {
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.gen_menu li {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
.gen_menu li a {
display: block;
margin: 0;
color: #000;
font-size: 17px;
text-decoration: none;
}
.gen_menu li a.disable {
display: block;
margin: 0;
color: #d7d7d7;
font-size: 17px;
text-decoration: none;
}
li.title {
background-color: #d7d7d7;
height: 30px;
line-height: 30px;
padding: 0px 0px 0px 10px;
font-size: 0.8em;
color: #868686;
}
li.title_sub {
background-color: #f6f6f9;
height: 24px;
line-height: 24px;
padding: 0 0 0 10px;
border: none;
}
li.title_sub_disable {
color: #d7d7d7;
background-color: #f6f6f9;
height: 24px;
line-height: 24px;
padding: 0 0 0 10px;
border: none;
}
li.title_s {
background-color: #e0e0e0;
padding: 0 0 0 10px;
}
li.title_empty {
background-color: #d7d7d7;
height: 15px;
line-height: 15px;
padding: 0 0 0 10px;
}
li.select {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
text-align: right;
cursor: pointer;
}
li.select_disable {
padding: 0px 10px 0px 10px;
text-align: right;
background-color: #f6f6f9;
color: #d7d7d7;
}
li.select_no_cursor {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
text-align: right;
}
li.select_no_cursor_left {
padding: 0px 10px 0px 10px;
}
li.select p,
li.select_disable p,
li.select_no_cursor_left p
{
float: left;
}
li.select_disable a
{
color: #d7d7d7;
}
li.select_no_cursor_left span
{
float: right;
color: #000000;
}
li.partition {
background-color: #d7d7d7;
height: 15px;
line-height: 15px;
padding: 0px 0px 0px 10px;
font-size: 0.8em;
color: #868686;
}
li.sel_file {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
text-align: left;
cursor: pointer;
}
li.non_file {
padding: 0px 10px 0px 10px;
text-align: left;
color: #000000;
cursor: pointer;
animation: blinkAnime 1.5s infinite alternate;
}
@keyframes blinkAnime{
0% { background-color: #f6f6f9 }
100% { background-color: #e6e6fa }
}
div.settingFrame {
position: relative;
padding-left:20px;
width: 100%;
}
div.licenseDisplay
{
height: 45vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #c9c9c9;
}
iframe.txtLicenses
{
width: 100%;
height: 100%;
border: none;
display: block;
}
div.serviceInfo
{
background-color: #d7d7d7;
height: 45vh;
-webkit-overflow-scrolling: touch;
overflow: auto;
border: 1px solid #c9c9c9;
}
.txtServiceInfo
{
width: 100%;
height: 100%;
border: none;
display: block;
}
.reloadbtn {
font-size: 10px;
color: #fff;
border-style: none;
border-radius: 5px;
width: 50px;
height: 22px;
line-height: 22px;
margin-top: 2px;
cursor: pointer;
background-color: #2ba5ce;
}
#settingreloadbtn {
position: relative;
left: 450px;
}
.settingConnectTxt {
position: relative;
left: 20px;
}
li.select_top2 {
background-color: #f6f6f9;
margin: 0px;
padding-left: 20px;
font-size:0.7em;
text-align:left;
}
li.text {
background-color: #f6f6f9;
width: 100%;
padding: 0px;
}
li.text_p10 {
background-color: #f6f6f9;
width: 100%;
padding: 0 0 0 10px;
}
li.blank_update_caution_message {
background-color: #f6f6f9;
width: 100%;
height: 22px;
display: none;
}
li.text_update_caution_message {
background-color: #f6f6f9;
width: 100%;
height: 56px;
line-height: 18px;
color:red;
font-size:0.7em;
padding: 10px;
display: none;
}
li.text_update_caution_message_single_module {
background-color: #f6f6f9;
width: 100%;
height: 56px;
line-height: 18px;
color:red;
font-size:0.9em;
padding: 10px;
display: none;
}
li.text_update_caution_message_multi_module_2 {
background-color: #f6f6f9;
width: 100%;
height: 55px;
line-height: 18px;
color: red;
font-size: 0.9em;
padding: 10px 12px 0px 12px;
display: block;
}
li.text_update_caution_message_multi_module_3 {
background-color: #f6f6f9;
width: 100%;
height: 60px;
line-height: 18px;
color: red;
font-size: 0.9em;
padding: 3px 12px 0px 12px;
display: block;
}
li.apply {
background-color: #f6f6f9;
text-align: right;
cursor: pointer;
}
li.apply span.left_btn {
float: left;
width: 44%;
margin-left:5%;
}
li.apply span.right_btn {
float: right;
width: 44%;
margin-right:5%;
}
li.apply span.single_btn {
float: left;
width: 44%;
margin-left:28%;
}
li.apply_multi_module {
background-color: #f6f6f9;
text-align: right;
cursor: pointer;
}
li.apply_multi_module span.left_btn {
float: left;
width: 25%;
margin-left:5%;
}
li.apply_multi_module span.midd_btn {
float: left;
width: 25%;
margin-left:7%;
}
li.apply_multi_module span.right_btn {
float: right;
width: 25%;
margin-right:5%;
}
li.apply_multi_module span.single_btn {
float: left;
width: 44%;
margin-left:28%;
}
.overlay {
top: 0;
left: 0;
text-indent: -9999px;
position: absolute;
background: #000;
opacity: 0.8;
z-index: 20;
width: 100%;
height:100%;
}
.overlay2 {
top: 0;
left: 0;
text-indent: -9999px;
position: absolute;
background: #000;
opacity: 0.8;
z-index: 120;
width: 100%;
height:100%;
}
li.mswitch {
background-color: #f6f6f9;
height: 44px;
line-height: 42px;
padding: 0px 10px 0px 10px;
color: black;
}
li.mswitch_disable {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
color: #d7d7d7;
}
.rswitch,
.rswitch_disable
{
margin-top:11px;
height:22px;
line-height: 22px;
float: right;
}
.rswitch input,
.rswitch_disable input
{
display: none;
}
.rswitch label
{
display: block;
float: right;
cursor: pointer;
background-color: #d7d7d7;
color: #fff;
font-size: 10px;
text-align: center;
height: 22px;
line-height: 22px;
}
.rswitch_disable label
{
display: block;
float: right;
background-color: #d7d7d7;
color: #fff;
font-size: 10px;
text-align: center;
height: 22px;
line-height: 22px;
}
.rswitch label:first-of-type {
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
letter-spacing: 0.1em;
width: 50px;
border-left: 1px solid #f6f6f9;
}
.rswitch label:last-of-type
{
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
letter-spacing: 0.1em;
width: 50px;
border-right: 1px solid #f6f6f9;
}
.rswitch input[type="radio"]:checked + .switch-on {
background-color: #2ba5ce;
}
.rswitch input[type="radio"]:checked + .switch-off {
background-color: #bfbfbf;
}
.rswitch_disable label:first-of-type
{
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
letter-spacing: 0.1em;
width: 50px;
border-left: 1px solid #f6f6f9;
}
.rswitch_disable label:last-of-type
{
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
letter-spacing: 0.1em;
width: 50px;
border-right: 1px solid #f6f6f9;
}
.rswitch_disable input[type="radio"]:checked + .switch-on {
background-color: #d7d7d7;
}
.rswitch_disable input[type="radio"]:checked + .switch-off {
background-color: #d7d7d7;
}
.select_file
{
position: relative;
top: 7px;
left: 20px;
}
#header {
width: 100%;
background-color: #e0e0e0;
color: #000;
height: 44px;
line-height: 44px;
font-size: 19px;
text-align: center;
}
#paramFrame li {
text-align: left;
cursor: default;
overflow: hidden;
background-color: #f6f6f9;
font-size: 17px;
}
.MainZone,
.Zone2,
.Zone3,
.Zone4 {
display: none;
}
.settingsNetworkName {
position: relative;
left: 20px;
}
.renameNetworkName {
position: relative;
left: 100px;
top: -35px;
}
.renameMainZone {
position: relative;
left: 89px;
}
.renameZone2 {
position: relative;
left: 123px;
}
.renameZone3 {
position: relative;
left: 123px;
}
.renameZone4 {
position: relative;
left: 123px;
}
#renamestartbtn {
position: relative;
left: 420px;
}
.settingConnectParam {
position: relative;
top: -32px;
left: 300px;
}
.musicCastStatusTxt {
position: relative;
top: -40px;
left: 300px;
}
.SecurityDrop {
position: relative;
top: -32px;
left: 300px;
}
.wpsPinCheckbox {
position: relative;
top: -28px;
left: 300px;
}
.settingNewAirPlayPasswordParam {
position: relative;
left: 180px;
top: -32px;
width: 300px;
}
.airplayPassButton {
position: relative;
left: 420px;
}
#SystemVersionStatus {
position: relative;
top: -20px;
left: 220px;
}
.updateStartButton {
position: relative;
left: 30px;
top: -20px;
}
.updateMove span{
color: #f6f6f9;
}
.updateMove span:nth-child(1){
animation: blinkAnime1 2s infinite alternate;
}
.updateMove span:nth-child(2){
animation: blinkAnime2 2s infinite alternate;
animation-delay: .5s;
}
.updateMove span:nth-child(3){
animation: blinkAnime3 2s infinite alternate;
animation-delay: 1s;
}
@keyframes blinkAnime1{
0% { color: #f6f6f9; }
24% { color: #f6f6f9; }
25% { color: #000000; }
100% { color: #000000; }
}
@keyframes blinkAnime2{
0% { color: #f6f6f9; }
49% { color: #f6f6f9; }
50% { color: #000000; }
100% { color: #000000; }
}
@keyframes blinkAnime3{
0% { color: #f6f6f9; }
74% { color: #f6f6f9; }
75% { color: #000000; }
100% { color: #000000; }
}
.settingsStandbySelect {
position: relative;
left: 410px;
top: -32px;
}
.settingMacAddr {
position: relative;
top: -32px;
left: 300px;
}
.macAddrTxt {
position: relative;
left: 20px;
}
#macFilterOnOffbtn {
position: relative;
top: 45px;
}
#macfilterApplyBtn {
position: relative;
left: 420px;
}
#settingMacFilter
{
}
.hiddenItem {
display: none;
}
.avras_off{
display: none;
}
.avras_on{
display: block;
}
.avras_accordion {
background: #f6f6f9;
margin: 0;
padding: 10px 10px 10px 20px;
cursor: pointer;
border-bottom: 1px solid #d7d7d7;
}
.avras_accordion:hover,
.avras_accordion.avras_on {
background-color: #444;
color: #FFF;
}
.avras_modal_window {
top: 20px;
width: 100%;
max-width: 500px;
display: block;
position: relative;
z-index: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow:hidden;
}
.avras_modal_window p {
width: 100%;
background-color: #848484;
color: #fff;
height: 44px;
line-height: 44px;
font-size: 19px;
text-align: left;
padding-left: 30px;
}
.avras_modal_window ul {
max-height:800px;
height: 80%;
overflow:auto;
}
.avras_modal_window li {
text-align: left;
padding-left: 20px;
cursor: pointer;
overflow: auto;
width: 100%;
background-color: #f6f6f9;
}
.avras_modal_window li a {
display: block;
height: 43px;
line-height: 43px;
padding-right: 30px;
background: #f6f6f9;
color: #000;
font-size: 17px;
text-decoration: none;
cursor: pointer;
}
a.avras_overlay {
top: 0;
left: 0;
text-indent: -9999px;
position: absolute;
background: #000;
opacity: 0.8;
z-index: 20;
width: 100%;
height:100%;
}
div.avras_modal_1st {
top: 0;
left: 0%;
width: 100%;
height: 100%;
display: none;
position: fixed;
z-index:90;
}
div.avras_setting_frame {
position: relative;
padding-left:20px;
width: 100%;
}
li.avras_apply {
background-color: #f6f6f9;
text-align: right;
cursor: pointer;
}
li.avras_apply span.avras_left_btn {
float: left;
width: 44%;
margin-left:5%;
}
li.avras_apply span.avras_right_btn {
float: right;
width: 44%;
margin-right:5%;
}
li.avras_apply span.avras_single_btn {
float: left;
width: 44%;
margin-left:28%;
}
li.avras_hidden_item {
display: none;
}
li.avras_switch {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
text-align: right;
}
li.avras_switch_group {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
text-align: right;
border: none;
}
li.avras_select {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
text-align: right;
cursor: pointer;
}
li.avras_select_group {
background-color: #f6f6f9;
padding: 0px 10px 0px 10px;
text-align: right;
cursor: pointer;
border: none;
}
li.avras_switch p,
li.avras_select p,
li.avras_switch_group p,
li.avras_select_group p {
float: left;
}
li.avras_switch span,
li.avras_switch_group span {
padding-left: 30px;
padding-right: 10px;
}
li.avras_partition {
background-color: #d7d7d7;
height: 15px;
line-height: 15px;
padding: 0px 0px 0px 10px;
font-size: 0.8em;
color: #868686;
}
li.avras_text_left_padding_10 {
background-color: #f6f6f9;
width: 100%;
padding: 0 0 0 10px;
}
li.avras_title {
background-color: #d7d7d7;
height: 30px;
line-height: 30px;
padding: 0px 0px 0px 10px;
font-size: 0.8em;
color: #868686;
}
li.avras_title_sub {
background-color: #f6f6f9;
height: 24px;
line-height: 24px;
padding: 0 0 0 10px;
border: none;
}
li.avras_title_empty {
background-color: #d7d7d7;
height: 15px;
line-height: 15px;
padding: 0 0 0 10px;
}
.avras_rswitch {
margin-top:11px;
height:22px;
line-height: 22px;
float: right;
}
.avras_rswitch input {
display: none;
}
.avras_rswitch label {
display: block;
float: right;
cursor: pointer;
background-color: #d7d7d7;
color: #fff;
font-size: 10px;
text-align: center;
height: 22px;
line-height: 22px;
}
.avras_rswitch label:first-of-type {
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
letter-spacing: 0.1em;
width: 50px;
border-left: 1px solid #f6f6f9;
}
.avras_rswitch label:last-of-type {
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
letter-spacing: 0.1em;
width: 50px;
border-right: 1px solid #f6f6f9;
}
.avras_rswitch input[type="radio"]:checked + .avras_switch-on {
background-color: #2ba5ce;
}
.avras_rswitch input[type="radio"]:checked + .avras_switch-off {
background-color: #bfbfbf;
}
img.avras_plus_button {
margin-right: 10px;
margin-top: 6px;
float: right;
cursor: pointer;
}
img.avras_minus_button {
margin-top: 6px;
float: right;
cursor: pointer;
}
.avras_disable {
color: #d7d7d7;
}
.avras_disable input[type="radio"]:checked + .avras_switch-on,
.avras_disable input[type="radio"]:checked + .avras_switch-off {
background-color: #d7d7d7;
}
.avras_disable label,
.avras_disable img {
cursor: default;
}
p.indent {
text-indent: 1em;
font-size: 0.9em;
}
p.indent_zone {
text-indent: 1em;
font-size: 0.9em;
color: #fff;
border-style: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 36px;
line-height: 36px;
margin-top: 2px;
cursor: pointer;
background-color: #848484;
}
button.popup {
font-size: 14px;
color: #088;
background-color: #f6f6f9;
}