/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0pr2
*/
/* reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* fonts */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

/* styles */

body {background:#000;color:#fff;font-family:Trebuchet MS, sans-serif;font-size:13px;padding-bottom:20px;}
#page {width:86%;padding:0px 0 0px 5%;font-size:1.2em;}
h1 {font-size:2em;padding:10px 0 0 4%;text-shadow:#0F0 1px 1px 5px;}
h2 {font-size:1.4em;color:#FFF;margin:20px 0;}
h2 span {
display:block;
background:url(carbon2.png) repeat left top;
margin-left:2%;
padding:5px 0 5px 2%;
-moz-border-radius:10px;
-moz-box-shadow:0px 0px 7px #0F0;
-webkit-border-radius:10px;
-webkit-box-shadow:0px 0px 7px #0F0;
-o-border-radius:10px;
-o-box-shadow:0px 0px 7px #0F0;
-ms-border-radius:10px;
-ms-box-shadow:0px 0px 7px #0F0;
border-radius:10px;
box-shadow:0px 0px 7px #0F0;
}
p {margin-bottom:10px;}
strong {font-weight:old;color:#0F0;}
acronym, abbr {border-bottom:1px dotted;	}
.inner {margin:0 40px;}
dl{overflow:hidden;_overflow:visible;zoom:1;}
dt, dd {float:left;}
dt  {width:28%;clear:left;text-align:right;padding-right:15px;}
dd{width:62%;padding-left:15px;border-left:1px solid #0F0;}
a {color:#fff;}
img.noprint {position:fixed;right:20px;top:40px;}
a.noprint {display:block;text-align:right;}

.crColorRoller{
	overflow:auto;
	width:150px;
	height:120px;
	
}
.crColorRoller  span{
	display:inline-block;
}
.crHead{
	background-image: -moz-linear-gradient(top, white, silver);
	height:10px;
	display:none;
}
.crBox {
	cursor:crosshair;
	position:relative;
	margin:10px;
	float:left;
	position:relative;
	width:80px;
	height:80px;
}
.crBoxSel{
	position:absolute;
	width:1px;
	height:1px;
}
.crBoxSel div{
	position:absolute;
	top:-2px;
	left:-2px;
	height:4px;
	width:4px;
	border:1px solid;
	overflow:hidden;
	-moz-border-radius:50%;
}
.crBar{
	float:left;
	width:10px;
	height:80px;
	margin:10px;
	background-image: -moz-linear-gradient(top, white, black);
	position:relative;
}
.crBarSel{
	position:absolute;
	left:-1px;
	margin-top:-2px;
	top:50%;
	height:5px;
	width:100%;
	background-color:#fff;
	border:1px solid black;
}
.crNums{
	float:right; 
	width:135px;
	display:none;
}
.crNums span{
	padding-right:3px;
	text-align:right;
	width:10px;
}
.crNums .crHex,.crNums input{
	width:25px;
}
 .crNums .crIHex{
	width:60px;
}
.crNums .crView{
	width:25px; 
	height:15px; margin-left:3px;
	vertical-align:middle;
}
.crShade{
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	border:0;
	zoom:1;
}
.crImg, .crImgIE{
	width:100%;
	height:100%;
	position:absolute;
}
.crBoxImg{
	background-image: -moz-linear-gradient (left, rgb(0,0,0), rgb(255,255,255));
	width:100%;
	height:100%;
}

.crHide{
	display:none
}

.crCancel, .crComplete {
	width:20px; float:right; cursor:pointer;
}

.crRound, .crRound *{
	-moz-border-radius:50%; /* Firefox 3.5+ */
	-webkit-border-radius:40px; /*Webkit 3.0+ */
	-ms-border-radius:50%; /* IE9+ (cruel joke) */
	border-radius:50%; /* Opera 10.5+ */
}

.crGradientBW {
	background-image: url('gradient.png');
	background-image: linear-gradient(left, black, white);
	background-image: -moz-linear-gradient(left, black, white);
	background-image: -webkit-gradient(linear, left center, right center, from(black), to(white));
	    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='black', EndColorStr='white');
	-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='black', EndColorStr='white');
}
.crAlphaGradient {
		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=100,  FinishX=100, StartY=0, FinishY=100);
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=100,  FinishX=100, StartY=0, FinishY=100);
}
.crShow{
	display:block;
	margin-left:30px;
	margin-top:30px;
	position:absolute;
	background: none !important;
	cursor:pointer;
	
}

.crCircle{
	position:relative;
	overflow:hidden;
}

.crCircle div{
	position:absolute;
	width:80px;
	height:80px;
	border:10px solid silver;
}
.crTriangle div{
	position:absolute;
	border-bottom:80px dotted transparent;
	width:0;
	height:0;
	bottom:0;
	right:0;
}

.crTri1{
	left:0;
	border-left:40px solid silver;
}

.crTri2{
	right:0;
	border-right:40px solid silver;
}

.xcrRight{
	border-bottom:80px solid transparent;
	border-left:80px solid silver;
	position:absolute;
	width:0;
	height:0;
	bottom:0;
	right:0;
}

.color {
	position:relative;
	left:0;
	top:0;
	background-color:rgba(127,127,127,0.8);
	width:150px;height:120px;display:block;
}

#couleur {visibility:hidden;position:absolute;z-index:-1;}
#switcher {
	position:absolute;
	top:14%;
	height:120px;
	left:-150px;
	width:150px;
	padding-right:15px;
	background:url(css/skin/grad.png) no-repeat right top;
}
.xp {text-align:center;font-size:11px;position:absolute;left:0;bottom:-7px;width:100%;}