/* MOBILE */
#tools {
	margin 					: 0px;
	padding 				: 0px;	
	z-index 				: 999;	
	position 				: fixed; 
	width 					: 100%;
	min-width 				: 700px;
	height 					: 30px;
	left 					: 0px;	
	top  					: 0px;
	/*border 					: 1px solid #393838; */
	border: none !important;
	background-color 		: #444;
}

.btntools {
	padding:0 5px;
	margin-right:2px;
	font-family:Arial,Helvetica,sans-serif;
	background-color:#666;
	border:1px solid #333;
	/*-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;*/
	border-radius:0px;
	-moz-background-clip:padding;
	-webkit-background-clip:padding-box;
	background-clip:padding-box;
	height:26px;
	cursor:pointer;
	color:#fff;
	float:left;
	width:auto;
	font-size:12px;
	line-height:26px;
	text-transform:none;
	font-weight:bold;
	margin-top:0;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}
.btntools.active,.btntools:active,.btntools:hover{
	background:#444;
	/*-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.2);
	-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,0.2);*/
}
/* 
   Tools diatas
   Note: untuk desain
*/
#pos_id span {
  margin-left: 5px;
}
.btntools span {
	outline					: 0px solid #FFF;
	padding-top				: 8px;
}
.btntools p {
	float: left;
	outline					: 0px solid #FFF;
	padding-top				: 0px;
	display: none;
}
/* DIMENSION */
#dimensions {
	display: none;
}

#dimensions span {
	outline					: 0px solid #FFF;
	padding-top				: 8px;	
}
#dimensions p {
	float					: left;
	outline					: 0px solid #FFF;
	padding-top				: 0px;
	display					: none;
}
/**/
#tambahdata span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px;
	margin-right 			: 5px;
	background 				: url(img/01-plus.png) no-repeat center;
}
#boxpages span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/02-add.png) no-repeat center;
}
#globalpos span, #layout span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/03-global.png) no-repeat center;
}
#tools001 span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/04-tools.png) no-repeat center;
}
#position span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/05-position.png) no-repeat center;
}
#horz span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/06-grid.png) no-repeat center;
}
#left span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/07-left.png) no-repeat center;
}
#top span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/08-top.png) no-repeat center;
}
#height span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	background 				: url(img/09-height.png) no-repeat center;
}
#user span {
	float 					: left; 
	width 					: 20px;
	height 					: 18px; 
	margin-right 			: 2px;
	margin-top: 1px;
	padding-top				: 3px;
	background 				: url(img/10-user.png) no-repeat center;
	border-radius			: 20px;
	border					: 1px solid #999;
}
.hidetoolb {
  position: fixed;
  right: 20px;
  top: 0px;
  width: 30px;
  height: 20px;
  border: 1px solid #333;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #666;
  color: #FFF;
  cursor: pointer;
  z-index: 9999;
}
.hidetoola {
  position: fixed;
  display: block;
  right: 20px;
  top: 30px;
  width: 30px;
  height: 20px;
  border: 1px solid #333;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #666;
  color: #FFF;
  cursor: pointer;
  z-index: 9;
}
/* DESKTOP */
@media only screen and (min-width: 960px) {
	#tools {
		margin 					: 0px;
		padding 				: 0px;	
		z-index 				: 999;	
		position 				: fixed; 
		width 					: 100%;
		/*min-width 				: 1400px;*/
		height 					: 30px;
		left 					: 0px;	
		top  					: 0px;
		border 					: 1px solid #393838; 
		background-color 		: #444;
	}
#user {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-left: 3px;
}
#btn_restoration {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
	.btntools {
		padding:0 5px;
		margin-top: 1px;
		margin-right:0px;
		font-family:Arial,Helvetica,sans-serif;
		background-color:#666;
		border-left:0px solid #333;
		/*-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
		-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);*/
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:0px;
		-moz-background-clip:padding;
		-webkit-background-clip:padding-box;
		background-clip:padding-box;
		height:25px;
		cursor:pointer;
		color:#fff;
		float:left;
		width:auto;
		font-size:12px;
		line-height:26px;
		text-transform:none;
		font-weight: 300;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		-o-user-select:none;
		user-select:none;
	}
	.btntools.active,.btntools:active,.btntools:hover{
		background:#444;
		/*-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.2);
		-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,0.2)*/
	}
	/* 
	   Tools diatas
	   Note: untuk desain
	*/
	.btntools span {
		outline					: 0px solid #FFF;
		padding-top				: 8px;
	}
	.btntools p {
		float: left;
		outline					: 0px solid #FFF;
		padding-top				: 0px;
		display: inline-block;
	}
	/* DIMENSION */
	#dimensions {
		display: inline-block;
	}
	#dimensions span {
		outline					: 0px solid #FFF;
		padding-top				: 8px;
	}
	#dimensions p {
		float					: left;
		outline					: 0px solid #FFF;
		padding-top				: 0px;
		display					: inline-block;
	}
	/**/
	#tambahdata span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px;
		margin-right 			: 5px;
		
		background 				: url(img/01-plus.png) no-repeat center;
	}
	#boxpages span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/02-add.png) no-repeat center;
	}
	#globalpos span, #layout span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/03-global.png) no-repeat center;
	}
	#tools001 span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/04-tools.png) no-repeat center;
	}
	#position span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/05-position.png) no-repeat center;
	}
#pos_id span {
  margin-left: 5px;
}
	#horz span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/06-grid.png) no-repeat center;
	}
	#left span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/07-left.png) no-repeat center;
	}
	#top span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/08-top.png) no-repeat center;
	}
	#height span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		background 				: url(img/09-height.png) no-repeat center;
	}
	#user span {
		float 					: left; 
		width 					: 20px;
		height 					: 18px; 
		margin-right 			: 2px;
		margin-top: 1px;
		padding-top				: 3px;
		background 				: url(img/10-user.png) no-repeat center;
		border-radius			: 20px;
		border					: 1px solid #999;
	}
.hidetoolb {
  position: fixed;
  /*display: none;*/
  right: 20px;
  top: 0px;
  width: 30px;
  height: 20px;
  border: 1px solid #333;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #666;
  color: #FFF;
  cursor: pointer;
  z-index: 9999;
}
.hidetoola {
  position: fixed;
  display: block;
  right: 20px;
  top: 30px;
  width: 30px;
  height: 20px;
  border: 1px solid #333;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #666;
  color: #FFF;
  cursor: pointer;
  z-index: 9;
}



}
/* STYLE DEVELOPER */
table.table-zebra {
	display: table;
	border: 0px solid green;
	width: 100%;
}
/*.table-zebra thead, .table-zebra tbody {
	display: block;
	border: 1px solid #666;
}*/
.table-zebra tr {
	display: block;
	min-width: 100%;
	outline: 0px solid #000;
	color: #666;
	/*height: 30px;*/
	padding: 0;
	margin: 0;
	text-align: left;
}
.table-zebra tr:hover {
	outline: 0px solid;
	/*background-color: #C8C8C8;*/
}
.table-zebra td {
	border: 0px solid;
	display: table-cell;
	vertical-align: middle;
	/*height: 30px;*/
	padding: 0;
	margin: 0;
}
.table-zebra tbody {
	display: block;
	height: 300px; 
	overflow: auto;
	overflow-x: hidden; 
	margin-bottom: 5px;
}
.btn-style {
	display: table-cell;
	/*text-align: center;
	vertical-align: middle;
	color: #333;*/
	width: 40px;
	float: left;
	/*outline: 0px solid #000;*/
}
input.btn50,button.btn50 {
    width: 49% !important;
}
input.btn33,button.btn33 {
    width: 32.6% !important;
}
tbody#styledatatbl {
    background: #fff;
    border: 1px solid #999;
}
tbody#styledatatbl tr {
    border-bottom: 1px solid #666;
    cursor: pointer;
    color: #666;
    padding: 3px 0px 3px 5px;
}
tbody#styledatatbl tr:hover {
    border-bottom: 1px solid #666;
    cursor: pointer;
    color: #FFF;
    background: -moz-linear-gradient(#4493fc,#0c69e5) !important;
    background: linear-gradient(#4493fc,#0c69e5) !important;
}
tbody#styledatatbl i {
    font-size: 16px;
}
/* ADD DATA */
#upper {
	background-image: url(img/IMG_A_01.png);
	height:60px;
	width:280px;
	vertical-align: middle;
	text-align: center;
}
#upper:hover {
	background-image: url(img/IMG_B_01.png);
}
#cont {
	background-image: url(img/IMG_A_02.png);
	height:190px;
	width:280px;
	vertical-align: middle;
	text-align: center;	
}
#cont:hover {
	background-image: url(img/IMG_B_02.png);
}
#btn-content-lower {
	background-image: url(img/IMG_A_03.png);
	height:44px;
	width:280px;
	vertical-align: middle;
	text-align: center;
}
#btn-content-lower:hover {
	background-image: url(img/IMG_B_03.png);
}
#btn-manage-style {
	background-image: url(img/IMG_A_04.png);
	height:50px;
	width:280px;
	vertical-align: middle;
	text-align: center;
}
#btn-manage-style:hover {
	background-image: url(img/IMG_B_04.png);
	color: #090909;
	font-size: large;
}
#addData tr {
	outline: 1px solid #999;
	color: #000;
	font-size: 14px;
	cursor: pointer;
}
/* SELECT CONTENT */
.icoChose {
	border: 1px solid #999;
	border-radius: 3px;
	display: inline-block;
	padding: 5px 0px;
	background-color: #F0F0F0;
	color: #333;
	margin: 2px;
	width: 128px;
	cursor: pointer;
}
.icoChose:hover {
	background-color: #999;
	color: #FFF;
}
.icoChose span, .icoChose i {
	border:0px solid;
	display:block;
	text-align: center;
}
.icoChose i {
	font-size: 20px;
	margin-bottom: 5px;
	display: inline-block;
	padding-left: 10px;
}
.icoChose span {
	font-size: 10px;
	display: inline-block;
	padding-left: 5px;
}
/* POSITION TOOLS */
div#pos_id {
    padding-left: 0;
    /*width: 55px;*/
}
div#pos_id t {
    padding-left: 5px;
}
#pos_id p {
    padding-left: 5px;
}

ul.id_pos {
    padding: 0;
    margin: 0;
    width: 60px;
    outline: 0px solid red;
    /*min-height: 25px;*/
    max-height: 150px;
    display: block;
    position: relative;
    left: -10px;
}

#pos_id li {
    display: none;
    width: 77px;
}

#pos_id:hover li {
    display: block;
	margin: 0px;
	border-bottom: 1px solid #333;
}