﻿.wizard
{
	border:solid 1px #bbb;
	margin:10px 40px 30px 40px;
}

.wizard h3 { margin-bottom:5px; }

/* Color picker & Slider boxes */
#sl, .ColorPicker { z-index:100; width:100%; height:100%; position:absolute; left:0px; top:0px; display:none;}
.ColorPicker .palette {position:absolute;}
.ColorPicker .s { width:15px;height:15px;cursor:pointer;}
.ColorPicker .m { width:25px;height:25px;cursor:pointer;}
.ColorPicker .l { width:40px;height:40px;cursor:pointer;}

.cpb
{
	padding:4px 5px;
	border:none;cursor:pointer;
	vertical-align:top;
}

.cp_box, .slider_box, .txt_box 
{
	width:120px;
	padding:3px;
	border:solid 1px #999999;
}

.slider_box { margin-bottom:1px; }
.slider_sing { margin-left:5px; }

/* Color picker */

.cpicker div.c 
{ 
	width:50px; 
	height:50px; 
	cursor:pointer;
	text-align:center;
}

.cpicker div.p
{
	float:left;
	margin:2px 2px;
	padding:1px 1px;
	border:solid 2px #eee;
}
 
.cpicker div.a
{
	float:left;
	margin:1px 1px;
	padding:1px 1px;
	border:solid 2px #000;
}

/* Slider */
*.h_track {
	background-color: #ddd;
	width: 119px;
	height:12px;
	line-height: 0px;
	font-size: 0px;
	text-align: left;
	padding: 4px;
	border: 1px solid;
	border-color: #ddd #999 #999 #ddd;
}
*.h_slider {
	background-color: #449944;
	width: 16px;
	height: 8px;
	position: relative;
	z-index: 2;
	line-height: 0px;
	margin: 0px;
	border: 2px solid;
	border-color: #99cc99 #004400 #004400 #99cc99;
}
*.h_slit {
	background-color: #333;
	width: 110px;
	height: 2px;
	margin: 4px 4px 2px 4px;
	line-height: 0;
	position: absolute;
	z-index: 1;
	border: 1px solid;
	border-color: #999 #ddd #ddd #999;
}
*.v_track {
	position:absolute;
	background-color: #ccc;
	padding: 3px 5px 15px 5px;
	border: 1px solid;
	height: 110px;
	width:24px;	
	border-color: #ddd #999 #999 #ddd;
}
*.v_slider {
	background-color: #666;
	width: 18px;
	height: 8px;
	font: 0px;
	text-align: left;
	line-height: 0px;
	position: relative;
	z-index: 1;
	border: 2px solid;
	border-color: #999 #333 #333 #999;
}
*.v_slit {
	background-color: #000;
	width: 2px;
	height: 100px;
	position: absolute;
	margin: 4px 10px 4px 10px;
	padding: 4px 0 1px 0;
	line-height: 0;
	font-size: 0;
	border: 1px solid;
	border-color: #666 #ccc #ccc #666;
}
*.display_holder {
	background-color: #bbb;
	color: #fff;
	width: 34px;
	height: 20px;
	text-align: right;
	padding: 0;
	border: 1px solid;
	border-color: #ddd #999 #999 #ddd;
}
.value_display {
	background-color: #bbb;
	color: #333;
	width: 30px;
	margin: 0 2px;
	text-align: right;
	font-size: 8pt;
	font-weight: bold;
	line-height: 12px;
	border: 0;
	cursor: default;
}

.pnl 
{
    margin:20px;
    text-align:left;
}

/* what's further text */
div.further
{
	padding:3px;
	width:30px;
	height:30px;
	color:#fff;
	line-height:30px;
	background-image:url(images/v2/circle.png);
	background-position:center center;
	background-repeat:no-repeat;
	text-align:center;
}

.remark { font-style:italic; color:#666; }

.wizard .signup, .login
{
    width:500px;
    margin:20px;
}

.wizard .submit
{
    height:30px;
    width:100px;
}

.wizard .step_title
{
	text-align:left;
	padding:10px 20px 10px 20px;
}

.wizard .step_nav
{  
	padding:10px;
	text-align:left;
}

.help_tip 
{
	display:none;
	width:400px;
	padding:7px;
	position:absolute;
	border:solid 1px #666;	
	background-color:#EEEEBB;
}