/*remplacement visuel des radios */
#js .radios input, #js .radioGroup input, #js .checkbox input {
	left:-10000px;
	position:absolute;
}
#js div.checkbox label {
	background:transparent url(/img/showroom/checkbox-off.gif) no-repeat left center;
	padding-left:22px;
	cursor:pointer;
}
#js div.checkbox label.checked {
	background:transparent url(/img/showroom/checkbox-on.gif) no-repeat left center;
}
#js .radios label, #js .radioGroup label {
	padding-left:18px;
	background:url(/img/radio-off.gif) no-repeat 0 0.1em;
	line-height:15px;
}
#js .radios label.checked, #js .radioGroup label.checked {
	background:url(/img/radio-on.gif) no-repeat 0 0.1em;
}
#js .kiotisPage .radios label, #js .kiotisPage .radioGroup label {
	padding-left:18px;
	background:url(/img/kiotis/radio-off.gif) no-repeat 0 0.1em;
	line-height:15px;
	cursor:pointer;
}
#js .kiotisPage  .radios label.checked, #js .kiotisPage  .radioGroup label.checked {
	background:url(/img/kiotis/radio-on.gif) no-repeat 0 0.1em;
}

/*remplacement visuel des select*/
#js .select select {
    position:absolute; left:-10000px;
}
form .error, form .error p {
	color:#DA161F!important;
}
.fauxSelect {
    float:left;
    padding-right:22px; border:1px solid #bcbcbc; color:#616161;
    width:60px; height:19px;
	background:#fff url(/img/arrow-fauxselect.gif) no-repeat right 1px;
}
.fauxSelect.focus {
    border-color:#666666;
}
.fauxSelect div {
    overflow:hidden;
    width:100%;
}
.fauxSelect span {
    display:block;
    overflow:hidden;
    margin-right:22px; padding:1px 2px; line-height:1.4;
    width:500px; height:17px;
	text-align:left;
	cursor:pointer;
}

#boxFauxOptionsMask {
	z-index:102;
	background:url(/img/px.gif);
}

#fauxOptions {
	z-index:1002;
    overflow:hidden;
    border:1px solid #999;
    background:#FFF;
}
#fauxOptions ul {
    margin:0; padding:0;
    list-style:none;
}
#fauxOptions .scrolled ul {
    margin-right:14px;
}
#fauxOptions li {
    padding:1px 2px;
    background:none;
	color:#616161;
	cursor:pointer;
}
* html #fauxOptions li {
    zoom:1;
}
#fauxOptions li:hover, #fauxOptions li.hover {
    background:#EEE;
}
#fauxOptions li.selected {
    background:#CCC;
}

#fauxOptions .scrolled {
    position:absolute; top:0; left:0;
}
#fauxOptions .scrollbar {
    position:absolute; top:1px; right:1px;
    width:12px;
}
#fauxOptions .gutter {
    position:absolute; top:0; left:0;
    width:12px;
    background:#EEE;
}

#fauxOptions .bar {
    position:absolute; top:0; left:0;
    overflow:hidden;
    width:12px;
    /*background:url(../../img/exemples/scrollbar.png) repeat-y;*/
}

#fauxOptions .bar .start, #fauxOptions .bar .end {
    position:absolute; left:0;
    overflow:hidden;
    width:12px; height:1px;
    /*background:url(../../img/exemples/scrollbar.png) no-repeat;*/
}
#fauxOptions .bar .start {
    top:0;
    background-position:-12px 0;
}
#fauxOptions .bar .end {
    bottom:0;
    background-position:-12px -11px;
}

/*Auto clearing*/
.select:after, .actions:after {
    display:block; clear:both;
    visibility:hidden;
    height:0;
    content:".";
}
* html .select, * html .actions {
    zoom:1;
}
*+html .select, *+html .actions {
    zoom:1;
}

/*log infos*/
#log {
    float:left;
}
#logContent {
    padding:10px;
    width:540px;
    background:#333; color:#EEE;
}
#logTools {
    width:560px;
    background:#000;
    font-size:10px;
}
#logTools:after {
    display:block; clear:both;
    visibility:hidden;
    height:0;
    content:".";
}
* html #logTools {
    zoom:1;
}
*+html #logTools {
    zoom:1;
}
#logTools a {
    float:left;
    padding:1px 5px;
    color:#EEE;
}
#logTools a:hover {
    background:#CCC; color:#000;
    text-decoration:none;
}

/*api*/
#api {
    clear:both;
    overflow:auto;
    padding:10px; border:1px solid #EEE;
    height:280px;
}

#api h3 {
    margin:0;
}