/*********css reset*********/
#container table {
border-collapse: collapse;
border-spacing: 0;
}
#container fieldset,img {
border: 0;
}
#container address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
#container ol,ul {
list-style: none;
}
#container caption,th {
text-align: left;
}
#container q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
 }
/*自定义字体图标*/
@font-face
{
	font-family: "imooc-icon";
	src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */
	src: url("fonts/icomoond41d.eot?#iefix") format("embedded-opentype"),
		 url("fonts/icomoon.woff") format("woff"),
		 url("fonts/icomoon.ttf") format("truetype"),
		 url("fonts/icomoon.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}
.font-icon
{
	font-family: "imooc-icon";
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}


hr{ margin:0; padding:0;}
/*********top-box*********/
#container,#header
{
	text-align:left;
	margin:0 auto;
	width:960px;
	position:relative;
}
#container a
{
	color:Black;
	text-decoration:none;
}
#container .clear
{
	clear:both;
}
/*********color picker*********/
.clear
{
   clear:both;
}
#container
{
   margin:0 0 10px;
}
/*左盒子样式*/
#bd-fl
{
	width:468px;
	float:left;
}
#container h1,#container h2
{
	border-left:3px solid #45B823;
	border-top:1px solid #45B823;
	border-right:1px solid #45B823;
	border-bottom:1px solid #45B823;
	background-color:#F1F1F1;
	padding-left:8px;
	font-size:18px;
	height:30px;
	line-height:30px;
}
.color-picker
{
	margin-top:10px;
	border:1px solid #45B823;
	overflow:hidden;
}
/*（最左层）拖动层样式*/
.color-img
{
	position:relative;
	float:left;
}
.color-img img
{
	width:256px;
	height:256px;
	margin:5px;
	background-color:Red;
}
#dragger
{
	width:11px;
	height:11px;
	position:absolute;
	top:0;
	left:255px;
	background-image:url("../../images/circle.gif");
}
/*（中间层）滑块层样式*/
.color-bar
{
	display:inline-block;
	float:left;
	margin-top:5px;
	margin-left:20px;
}
#slider
{
	position:relative !important;
	background-image:url("../../images/hueBar.png") !important;
	width:20px !important;
	height:255px !important;
	border-radius:0 !important;
  
}
.ui-slider-handle
{
	width:38px !important;
	height:9px !important;
	position:absolute !important;
	left:-9px !important;
	margin-bottom:-5px !important;
	background-image:url("../../images/handle.png") !important;
	background-color:transparent !important;
	border:none !important; 
}
.ui-slider-vertical
{
	margin-bottom:-5px !important;  
	border:none !important; 
}

/*（最右层）数据层样式*/
.color-view
{
	float:left;
	display:inline-block;
	margin-left:10px;
	font-family:宋体;
	margin-top:5px;
	margin-left:25px;
}
.color-view div
{
	margin:10px 0;
}
.color-view .view
{
	width:60px;
	height:60px;
	border:1px solid gray;
	background-color:Red;
	margin-top:0;/*去除整体样式定义中的顶外边距*/
}
.color-view input
{
	width:30px;
}
.color-view span
{
	margin-left:4px;
}
/*color_data层样式*/
.color-data
{
	margin-top:12px;
}
.yourcolor
{
	font-size:15px;
	line-height:19px;
}
.yourcolor span:first-of-type
{
	margin-left:10px;
}
.yourcolor input
{
	width:80px;
	height:25px;
	font-family:宋体;
	font-weight:bold;
	padding:2px;
}
.yourcolor .copy-you,.yourcolor .add
{
	display:inline-block;
	background-color:#45B823;
	color:White;
	width:40px;
	text-align:center;
	margin-left:5px;
	cursor:pointer;
	transition:background-color 0.2s linear;
	-webkit-transition:background-color 0.2s linear;
	-moz-transition:background-color 0.2s linear;
	-ms-transition:background-color 0.2s linear;
}
.yourcolor .copy-you:hover,.yourcolor .add:hover
{
	background-color:#2D8113;
}
/*用户颜色库*/
.user
{
	position:relative;
	border:1px solid #45B823;
	margin-top:12px;
	background-color:#F3F3F3;
}
.user .span-tit
{
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	height:20px;
	line-height:20px;
	background-color:#45B823;
	color:White;
	padding:0 5px;
	border-radius:0 0 5px 5px;
}
.user span i
{
	margin-right:3px;
}
.color-list{
	margin:0px;
	padding:0px;
	display:block;
}
.color-list ul
{
	margin-top:28px;
	padding-left:0;
}
.color-list li
{
	position:relative;
	width:30px;
	height:30px;
	border:1px solid white;
	margin-left:4px;
	display:inline-block;
}
.color-list li:first-of-type
{
	margin-left:8px;
}
.color-list li:nth-of-type(13)
{
	margin-left:8px;
}
/*列表层的icon小图标*/
.color-list li i
{
	position:absolute;
	top:-4px;
	right:-4px;
	font-size:8px;
	color:gray;
	cursor:pointer;
	display:none;
}
.color-list li i:hover
{
	color:Red;
}
/*用户显示删除层*/
.user-color
{
	font-size:15px;
	line-height:19px;
	text-align:center;
	margin-top:10px;
	margin-bottom:5px;
}
.user-color input
{
	width:80px;
	height:25px;
	font-family:宋体;
	font-weight:bold;
	padding:2px;
}
/*右上角删除*/
.user .clear
{
	position:absolute;
	top:0;
	right:0;
	padding:0 6px;
	text-align:center;
	height:20px;
	line-height:20px;
	border-radius:0 0 5px 5px;
	background-color:#45B823;
	color:White;      
	cursor:pointer; 
	transition:background-color 0.2s linear;
	-webkit-transition:background-color 0.2s linear;
	-moz-transition:background-color 0.2s linear;
	-ms-transition:background-color 0.2s linear;
}
.user .clear:hover
{
	background-color:#2D8113;
}
.user .copy-user
{
	display:inline-block;
	background-color:#45B823;
	color:White;
	width:40px;
	text-align:center;
	margin-left:5px;
}
/*右盒子样式*/
#bd-fr
{
	width:468px;
	float:right;
}
.intro
{
	height:460px;
	border:1px solid #45B823;
	padding:15px;
}
.intro p
{
	font-size:15px;
	line-height:25px;
	text-indent:20px;
	color:#4B4B4B;
}