* {
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body{
margin: 0;
background: lightgray;
font-family: Trebuchet MS; 
}
table{font-size: 1em; width: 100%}
.active{background: lightgray;}
#myPosition
{
display: inline;
vertical-align: middle;
}
.position
{
width: 100%;
display: none;
background: black;
text-align: center;
color: gray;
font-size: 0.8em;
overflow: hidden;
position: absolute;
z-index: 99;
}
.position img
{
width: 0.8em;
vertical-align: middle;
}
/*.widget{
height: 170px;
}*/
.widget cyb\:view
{
display: block;
/*overflow: hidden;
height: 170px;*/
-webkit-box-shadow: 0 2px 2px #888;
}
.setting_btn
{
display: inline-block;
background: rgba(0,0,0,0.2);
color: white;
padding: 0.2em;
-webkit-border-radius: 5px;
}
.setting_btn_active
{
display: inline-block;
background: rgba(0,0,0,0.2);
color: white;
padding: 0.2em;
-webkit-border-radius: 5px;
box-shadow: 0 0 5px 2px orange;
-webkit-box-shadow: 0 0 5px 2px orange;
}

/* select_widget.php */
.set_title_bg{
text-align: center;
margin: 0 auto;
margin-top: 1em;
margin-bottom: 0.5em;
padding: 1em;
background-image: url("../img/set_widget_title.png");
background-size: Auto 3.51em;
background-repeat: no-repeat;
background-position: 0px 0;
width: 10em;
}
.set_title_word{
margin: 0 auto;
padding: 0 0 0 10px;
font-size: 1.5em;
text-align: center;
text-shadow: 1px 1px 2px #fff;
width: 7em;
}
.list cyb\:btn
{
display: block;
padding: 1em;
background: #F8F6C6;
border-bottom: 1px solid white;
}
.list cyb\:btn.active
{
border-left: 8px solid #00D4FF;
}

/*New*/
.edit_service_btn{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, #8c8c8c), color-stop(1, #dedede));
display: inline-block;
font-size: 1.2em;
padding: 0.5em 0;
width: 50%;
}
.edit_service_btn_on{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, #FFBF00), color-stop(1, #FF7F00));
display: inline-block;
font-size: 1.2em;
padding: 0.5em 0;
width: 50%;
}
.edit{
width: 100%;
height: 3.12em;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, #E0E810), color-stop(1, #FACD07));
}
.finished{
display: block;
position: absolute;
width: 68px;
height: 34.5px;
z-index: 98;
text-align: center;
top: 8px;
right: 10px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 2px #666666;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, #FFBF00), color-stop(1, #FF7F00));
}
.finished_on{
display: block;
position: absolute;
width: 68px;
height: 34.5px;
z-index: 98;
text-align: center;
top: 8px;
right: 10px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 2px #666666 inset;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF7F00), color-stop(0.8, #FFBF00));
}
.finished_btn{
width: 60px;
height: 25px;
border: 1.5px solid white;
font-weight: bold;
font-size: 1.1em;
border-radius: 10px;
color: #5A3D1C;
margin-top: 2px;
margin-left: 3px;
padding-top: 3px;
}
.center_line{
position: relative;
top: -5.5px;
width: 100%;
}
.icon_list{
display: inline-block;
width: 100%;
text-align: center;
position: relative;
}
.icon_list *{
text-align: center;
}
.icon{
display: inline-block;
margin: 0.7em 0.4em 0.4em 0.4em;
width: 4.1em;
vertical-align: top;
text-align: center;
}
.icon_name{
display: block;
/*-webkit-border-radius: 5px;*/
margin-top: 5px;
text-align: center;
/*background: rgba(225,225,225,0.4);*/
vertical-align: middle;
}
.hide_icon{
display: inline-block;
margin: 0 0.2em;
/*width: 66px;*/
width: 4.12em;
vertical-align: top;
text-align: center;
}
.hide_icon_name{
display: block;
/*-webkit-border-radius: 5px;*/
margin-top: -0.2em;
text-align: center;
/*background: rgba(225,225,225,0.4);*/
vertical-align: middle;
}
@-moz-keyframes rightArrowFunc /* Firefox */{
from {margin-right: 0px;}
to {margin-right: 10px;}
}
@-webkit-keyframes rightArrowFunc /* Safari and Chrome */{
from {margin-right: 0px;}
to {margin-right: 10px;}
}
/*#right_arrow{
-moz-animation: rightArrowFunc 400ms linear 0 infinite alternate; /* Firefox */
/*-webkit-animation: rightArrowFunc 400ms linear 0 infinite alternate; /* Safari and Chrome */
/*}*/
.disable_icon_block{
position: absolute;
top: -0.1em;
left: -0.2em;
padding: 0.3em;
}
.disable_icon_btn{
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
line-height: 0.8em;
background: rgba(100,100,100,0.7);
width: 0.6em;
height: 0.8em;
text-align: center;
border-radius: 3px;
}
.btn{
display: inline-block;
border: 1px solid #809E8D;
text-align: center;
border-radius: 5px;
}
.add{
padding: 0.3em;
color: #2B472B;
margin: 0.4em 0 0;
margin-top: 0.8em;
}
.btn_a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FAFFFC), color-stop(0.4, #E9F0EC), color-stop(1, #CBD4CF));
background: -moz-linear-gradient(top, #FAFFFC, #E9F0EC , #CBD4CF);
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.btn_b{
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #E9F0EC), color-stop(1, #CBD4CF));
background: -moz-linear-gradient(bottom, #E9F0EC, #CBD4CF);
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.8), 0 0 2px rgba(10,10,10,0.8) inset;	
}
@-moz-keyframes sliderHandFunc{
0% {-moz-transform: translate(0, 0);}
15% {-moz-transform: translate(0, -110px);}
16% {-moz-transform: translate(0, 0);}
31% {-moz-transform: translate(0, -110px);}
32% {-moz-transform: translate(0, 0);}
42% {-moz-transform: translate(0, 0);}
55% {-moz-transform: translate(-120px, 0);}
75% {-moz-transform: translate(100px, 0);}
85% {-moz-transform: translate(0, 0);}
100% {-moz-transform: translate(0, 0);}
}
@-webkit-keyframes sliderHandFunc{
0% {-webkit-transform: translate(0, 0);}
15% {-webkit-transform: translate(0, -110px);}
16% {-webkit-transform: translate(0, 0);}
31% {-webkit-transform: translate(0, -110px);}
32% {-webkit-transform: translate(0, 0);}
42% {-webkit-transform: translate(0, 0);}
55% {-webkit-transform: translate(-120px, 0);}
75% {-webkit-transform: translate(100px, 0);}
85% {-webkit-transform: translate(0, 0);}
100% {-webkit-transform: translate(0, 0);}
}
.sliderHand{
-moz-animation: sliderHandFunc 6000ms linear 0 infinite;
-webkit-animation: sliderHandFunc 6000ms linear 0 infinite;
}
@-moz-keyframes sliderFocusFunc{
from {background: rgba(255,255,255,0.2);}
to {background: rgba(255,255,255,0.5);}
}
@-webkit-keyframes sliderFocusFunc{
from {background: rgba(255,255,255,0.2);}
to {background: rgba(255,255,255,0.5);}
}
.sliderFocus{
border: 3px solid white;
-moz-animation: sliderFocusFunc 1400ms linear 0 infinite alternate;
-webkit-animation: sliderFocusFunc 1400ms linear 0 infinite alternate;
}
.on, .off{
display: inline-block;
padding: 0.4em 0.2em;
width: 2em;
font-size: 0.9em;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#eaeaea), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#eaeaea 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#eaeaea 51%,#f6f6f6 100%); /* W3C */
font-weight: bold;
border-bottom: 1px solid rgba(255,255,255,0.5);
color: white;
height: 1em;
line-height: 1em;
vertical-align: middle;
}
.on_btn{
border-radius: 0.5em 0 0 0.5em;
border-bottom: 1px solid rgba(100,100,100,0.5);
}
.off_btn{
border-radius: 0 0.5em 0.5em 0;
border-bottom: 1px solid rgba(100,100,100,0.5);
}
.on_btn_active{
border-radius: 0.5em 0 0 0.5em;
background: #8FC31F;
-webkit-box-shadow: 0 1px 2px 1px rgba(100,100,100,0.3)inset;
}
.off_btn_active{
border-radius: 0 0.5em 0.5em 0;
background: #C30D23;
-webkit-box-shadow: 0 1px 2px 1px rgba(100,100,100,0.5)inset;
}
.service_change{
position: absolute;
top: 0.2em;
right: 0.2em;
padding: 0 0.25em;
border-radius: 1em;
background: red;
font-size: 0.8em;
color: white;
}
.sway{
-o-animation-name: -o-sway;
-o-animation-duration: .5s;
-o-animation-iteration-count: 2;
-o-animation-timing-function: linear; 

-ms-animation-name: -ms-sway;
-ms-animation-duration: .5s;
-ms-animation-iteration-count: 2;
-ms-animation-timing-function: linear;  

-moz-animation-name: -moz-sway;
-moz-animation-duration: .5s;
-moz-animation-iteration-count: 2;
-moz-animation-timing-function: linear;  

-webkit-animation-name: -webkit-sway;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear; 
}
@-o-keyframes -o-sway {
0%   { -o-transform: rotate(0deg); }
25%  { -o-transform: rotate(15deg); }
50%  { -o-transform: rotate(0deg); }
75%  { -o-transform: rotate(-15deg); }
100% { -o-transform: rotate(0deg); }
}
@-ms-keyframes -ms-sway {
0%   { -ms-transform: rotate(0deg); }
25%  { -ms-transform: rotate(15deg); }
50%  { -ms-transform: rotate(0deg); }
75%  { -ms-transform: rotate(-15deg); }
100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes -moz-sway {
0%   { -moz-transform: rotate(0deg); }
25%  { -moz-transform: rotate(15deg); }
50%  { -moz-transform: rotate(0deg); }
75%  { -moz-transform: rotate(-15deg); }
100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes -webkit-sway {
0%	{ -webkit-transform: translate(0px, 0px); }
11%	{ -webkit-transform: translate(5px, 0px); }
22%	{ -webkit-transform: translate(5px, 5px); }
33%	{ -webkit-transform: translate(0px, 5px); }
44%	{ -webkit-transform: translate(-5px, 5px); }
55% { -webkit-transform: translate(-5px, 0px); }
66% { -webkit-transform: translate(-5px, -5px); }
77% { -webkit-transform: translate(0px, -5px); }
88% { -webkit-transform: translate(5px, -5px); }
100%{ -webkit-transform: translate(0px, 0px); }
}
#bottom_tabs{
width: 100%;
position: fixed;
left: 0;
z-index: 100;
background: #F9F9F9;
text-align: center;
font-size: 1.2em;
vertical-align: middle;
}
.page_tab{
width: 100%;
padding: 0.5em 0;
text-align: center;
}
/*#service_tab{
border-right: 1px solid white;
}*/
#page_view{
}
#page_box{
}
#service_cards{
background: lightgray;
overflow: hidden;
}
.service_card_parent{
position: relative;
width: 96%;
margin: 0.5em auto 1em auto;
box-shadow: 0 3px 3px #888;
-webkit-box-shadow: 0 3px 3px #888;
border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition-duration: 200ms;
background: white;
}
.service_card{
position: relative;
}
.service_card_del_btn{
position: absolute;
top: 0;
right: 0;
display: inline-block;
color: #898989;
font-size: 1.2em;
font-weight: bold;
z-index: 80;
padding: 0.3em;
border-radius: 0 3px 0 0;
}
/*CARD*/
.card_title{
font-size: 1.1em;
color: #3e3a39;
font-weight: bold;
padding: 0.5em;
border-bottom: 1px solid #c6c6c6;
}
.card_reload_time{
font-size: 0.8em;
color: #898989;
padding-top: 0.2em
}
.card_t_title{
font-weight: bold;
text-align: left;
color: #595757;
font-size: 1em;
}
.card_content{
color: #3e3a39;
font-size: 0.95em;
}
.card_search{
padding: 0.5em 0 0.5em 0.6em;
font-weight: bold;
color: #036eb8;
display: block;
font-size: 0.95em;
}
.card_serh_act{
background: rgba(160,160,160,0.3);
border-radius: 0 0 0.2em 0.2em;
}
.card_btn_act{
background: rgba(160,160,160,0.2);
}
#bottom_tabs *{
vertical-align: middle;
}
#bottom_tabs td{
margin: 0;
padding: 0;
}
#bottom_tabs img{
width: 1.5em;
}
@keyframes showViewFunc {
from {opacity: 0;}
to {opacity: 1;}
}
@-moz-keyframes -moz-showViewFunc{
from {opacity: 0;}
to {opacity: 1;}
}
@-webkit-keyframes -webkit-showViewFunc{
from {opacity: 0;}
to {opacity: 1;}
}
.show_view_ani{
opacity: 1;
animation: showViewFunc 800ms;
-moz-animation: -moz-showViewFunc 800ms;
-webkit-animation: -webkit-showViewFunc 800ms;
}