/*demo styles colorswitcher*/
    #colorswitcher-overlay {width:100%;height:100%;position:fixed;background: rgba(0,0,0,.8);z-index:5001;display:none;}
    #colorswitcher-spinner {position:absolute; top: 49%; left:49%; color: #fff; font-size: 50px;}
    #colorswitcher {padding: 5px; margin:0 auto; position:fixed;left:0;width:25px;top: 150px; z-index:5000;background:#E3E3E3;text-align:center;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;}
    #colorswitcher a { width: 10px; height: 10px; float:left; margin:3px; border-radius: 0px;border: 1px solid transparent;}
    #colorswitcher a.active {border: 1px solid #ccc; }
    a.style0 {background: #ffffff;}
    a.style1 {background: #CC0066;}
    a.style2 {background: #000;}
    a.style3 {background: #0892D0;}
    a.style4 {background: #F3714F;}
    a.style5 {background: #00718F;}
    
    .zone-overlay {display:none; z-index:1;border:1px solid #ddd;width:100%; height:100%; background-color:rgba(0,0,0,.65);position:absolute; top:0;left:0;text-align:center;color:#fff;font-size: 20px;}
    .toggle-zones {height: 30px; padding: 10px; margin:0 4px; background: #333;color:#fff;font-weight:bold;cursor:pointer;}
          





/* the position map */
    .xcontain {width: auto;height: 221px;float:right;background:#fff;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
    #xps {width: 100%; height:26px; display:block;margin-bottom: 16px;}
    #xfwh {width: 100%; height: 26px; display:block; margin-bottom:16px;}
    #xh {float:left; width: 100%; background: #aaa; height: 30px;}
	#xol {float:left; width: 20%; height: 160px;}
	#xl { float:left; width: 30%; height: 100px;}
	#xcontent {float:left; width: 40%; height: 40px;}
	#xr {float:right; width: 30%; height: 100px;}
	#xor {float:right; width: 20%; height: 160px;}
	#xtza {width: 60%; float:left; height: 30px;}
	#xiw {width: 60%;float:left;}
	#xtzb {width:40%;float:left; height: 30px;}
	#xbza {width:40%;float:left; height: 30px;}
	#xbzb {width: 60%; float:left; height: 30px;}
	#xf {float:left; width: 100%; height: 30px;}
	#xlayoutmap {position:relative;width:300px;height:360px; z-index: 3; box-shadow: 0 0 8px #666; padding: 20px;background: #efefef;}
	.xpad {padding-top: 4px;border-top:1px solid #ccc;border-left:1px solid #ccc;background:#fff;color: #333;display:block;height: 100%;font-size: 10px; text-align:center;cursor:pointer;}
	.xguide.active .xpad, .xguide .xpad:hover {background: #00698C; color:#fff;}
    #xps .xpad {text-align:left; text-indent: 10px;border:1px dashed #bbb;}