/************** 主区域模板***********/
      body{
 
        	/*width:360px;*/
            height: 450px;
            overflow:scroll;
            overflow-x:hidden;
            overflow-y:scroll;
            margin:0px auto;
    
        }


.100width{

	width: 100%;
}

.rightwidth{  
	width: 34%;}
.100height{
  height: 100%;

}

.headStyle {
    margin:1% 1% 1% 4%;font-size:1.4rem;
}


.dataTitle{
   width: 35%;
   height: 100%;
 font-size: 1.4rem;
}



.dataoption{
	  width: 65%;
	  height: 100%;
}
.UP{
	
	width: 70%;
	height: 100%;
float: left;
	
}
.Del{
		width: 30%;
		height: 100%;
float: left;
}

.UP> label{
	    margin: 22% 0% 0% 40%;
	background-position :0px 0px;
	background-image:url(../images/Arearimg/UP_OFF.png);
	background-size:contain;
	background-repeat: no-repeat;

    cursor: pointer;

display: block;

width: 4.5rem;
height: 1.5rem;
text-align: right;
}
.UP> label:hover{
    background-image: Url(../images/Arearimg/UP_ON.png);
}

.Del> label{

    margin: 50% 0% 0% -10%;
background-position :0px 0px;
	background-image: Url(../images/Arearimg/DEL_OFF.png);
	background-size:contain;
	background-repeat: no-repeat;

    cursor: pointer;

display: block;

width: 4.5rem;
height: 1.5rem;
text-align: right;
}
.Del> label:hover{
    background-image: Url(../images/Arearimg/DEL_ON.png);
}

.ArearMrg ul{
padding: 0px;
margin: 0px;
list-style-type: none;
font-size: 1.2rem;
}
.ArearMrg li{
height: 6.5rem;
margin: 0 0 0 0%;
 box-shadow: 5px 5px 11px #888888;
 border-top: 1px solid #928EAA;

}
.TileDetail{

    font-size: 1.2rem;color:#928E8E;
}

.ArearMrg li:hover .dataTitle label:nth-child(2){
animation:1s shandong  infinite alternate;



}
.ArearMrg li:hover {
    animation:1s shandong2  infinite alternate;

}
@keyframes shandong {
    from {  }
  to {  color:#FF7500;  }
   
}
@keyframes shandong2 {
    from {  }
  to {  color:#FF7500; box-shadow: 5px 5px 11px #FF7500;  }
   
}



.dataTitle label{
  display: block;
	width: 100%;
    height: 1.8rem;
	margin:15% 0 10% 10%;
 text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}



.leftFloat{
float:left;

}

.ArearHead{

	height: 2.5rem;
	font-size:1.2rem;
	margin: 14px 0px;
}

.ArearHead input[type=text]{
	font-size: 1.2rem;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-bottom-style: solid;
border-bottom-color: #666;
width: 32%;

}

/*按钮美化*/
.subbutton{

	color:#fff;

       background: #FF7500;
       border-radius: 30%;
       border-top-width: 0px;
	border-right-width: 1x;
	border-bottom-width: 1px;
	border-left-width: 0px;
    font-size: 1.2rem;
        padding: 5px 5px;
}
.button {
        min-height: 1.5em;
        display: inline-block;
        padding:0px 3px 3px 3px;
        cursor: pointer;
        opacity: 0.9;
        color: #FFF;
     
        letter-spacing: 1px;
        text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;

        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        -webkit-transition: all 0.1s linear;
        -khtml-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
    }
        .button.orange {
            background: #FF7500;
        }
        .button:hover {
            -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            -o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        }

        .button:active {
            -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        }

     
/*************子区域*+添加按钮美化************************/
.chilHeadFont {
     font-size:1.2rem;
}
.chilContextFont{
    font-size:1.0rem;
}
.ChilAreaHeadMarg{

    margin:1% 1% 1% 2%;
 
     display: block;
}

.AddChildernArea:before{
    content: "";
background-position: 0px;
background-image: Url(../images/Arearimg/ADD_OFF.png);
background-size: contain;
background-repeat: no-repeat;
width: 0rem;
height: 0rem;
padding: 13%;
position: relative;

display: -moz-box;
top: 0%;
   

}
.AddChildernArea{
margin: 1% 0% 1% 0%;

cursor: pointer;

display: block;

width: 39%;
height: 93%;
text-align: right;
   

}



/*.AddChildernArea:hover,.AddChildernArea::before:hover{

    background-position: 22px -5px;
 background-image:  Url(../images/Arearimg/ADD_ON.png);
background-size: contain;
background-repeat: no-repeat;


  
}*/
.MainAreaName{
width: 22%;
  margin: 1% 12% 1% 0%;
   
     display: block;
     text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

}
@media screen and (min-width:712px){ /* 平板 屏幕 重新调整 位置*/

    .MainAreaName {
    width: 32%;
    margin: 1% 12% 1% 0%;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.AddChildernArea:before{
    content: "";
background-position: 0px;
background-image: Url(../images/Arearimg/ADD_OFF.png);
background-size: contain;
background-repeat: no-repeat;
width: 0rem;
height: 0rem;
padding: 5%;
position: relative;
display: -moz-box;

   

}
.AddChildernArea{
margin: 1% 0% 1% 0%;

cursor: pointer;

display: block;

width: 39%;
height: 93%;
text-align: right;
   

}





    .ArearHead input[type=text]{
	font-size: 1.2rem;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-bottom-style: solid;
border-bottom-color: #666;
width: 64%;

}


    .dataTitle label{
  display: block;
	width: 100%;
    height: 1.8rem;
	margin:4% 0 10% 10%;
 text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}


   .Del> label{

    margin: 24% 0% 0% -10%;
background-position :0px 0px;
	background-image: Url(../images/Arearimg/DEL_OFF.png);
	background-size:contain;
	background-repeat: no-repeat;

    cursor: pointer;

display: block;

width: 4.5rem;
height: 1.5rem;
text-align: right;
}
   .UP> label{
	    margin: 11% 0% 0% 40%;
	background-position :0px 0px;
	background-image:url(../images/Arearimg/UP_OFF.png);
	background-size:contain;
	background-repeat: no-repeat;

    cursor: pointer;

display: block;

width: 4.5rem;
height: 1.5rem;
text-align: right;
}
   .ChilAreaHeadMarg {
    margin: 1% 0% 1% 1%;
    display: block;
}
} 
@media screen and (MAX-width:320px){ 
/* 最小 屏幕 重新调整 位置*/

.MainAreaName {
    width: 24%;
    margin: 1% 0% 1% 0%;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.AddChildernArea {
    margin: 1% 0% 1% 0%;
    background-position: 0px 0px;
    background-image: Url(../images/Arearimg/ADD_OFF.png);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    width: 44%;
    height: 93%;
    text-align: right;
}


.dataTitle {
    width: 44%;
    height: 100%;
    font-size: 1.4rem;
}

.dataoption {
    width: 44%;
    height: 100%;
}

    .dataTitle label{
  display: block;
	width: 100%;
    height: 1.8rem;
	margin:7% 0 10% 10%;
 text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}


   .Del> label{

    margin: 34% 0% 0% -32%;
background-position :0px 0px;
	background-image: Url(../images/Arearimg/DEL_OFF.png);
	background-size:contain;
	background-repeat: no-repeat;

    cursor: pointer;

display: block;

width: 4.5rem;
height: 1.5rem;
text-align: right;
}
   .UP> label{
	    margin: 15% 0% 0% 3%;
	background-position :0px 0px;
	background-image:url(../images/Arearimg/UP_OFF.png);
	background-size:contain;
	background-repeat: no-repeat;

    cursor: pointer;

display: block;

width: 4.5rem;
height: 1.5rem;
text-align: right;
}
   .headStyle {
    margin:1% 0% 1% 0%;font-size:1.4rem;
}

} 

/*   区域 修改 提示框  居中样式 */
.inputylin_UP {
  
    width: 93%;
    padding: 5px 10px;
    text-align: center;
}