form { margin:0; padding:0;}


.order-form { margin:0; padding:10px; width:98%; float:left;}
.order-form h1 { margin:0 0 10px 0; padding:0 0 0 10px; font:bold 24px/22px Arial, Helvetica, sans-serif; color:#2d403a; background:url(../images/bg-order-h1.gif) repeat-x left bottom; border:none; width:97%;}


/*box-form*/
.box-form {
background:#ffffff;
border:4px solid #85bca9;
width:96%;
margin:10px 0 0 0;
padding:6px;
clear:both;
overflow:hidden;
}
.box-form p {
font:normal 12px Arial, Helvetica, sans-serif;
color:#434343;
padding:0 10px 10px 20px;
margin:0;
}
.box-form p img {
float:left;
padding:0 10px;
margin:0;
}
.box-form .heading-box	{
background:#85bca9 url(../images/bg-heading-form.gif) repeat-x left bottom;
width:100%;
margin:0 0 10px 0;
padding:0;
text-align:left;
clear:both;
float:left;
}
.box-form .heading-box h4 {
margin:0;
padding:0 10px;
font:bold 16px/41px "Trebuchet MS", Arial, Verdana;
color:#000000;
float:left;
background:none;
width:auto;
}
.box-form .heading-box h4 a {
font:bold 16px/41px "Trebuchet MS", Arial, Verdana;
color:#FFFFFF;
text-decoration:none;
}
.box-form .heading-box h4 a:hover {
font:bold 16px/41px "Trebuchet MS", Arial, Verdana;
color:#FFFFFF;
text-decoration:none;
}

.box-form .heading-box span{
font:normal 11px/41px Arial, Helvetica, sans-serif;
color:#434343;
float:right;
padding:0 10px 0 0;
}

.box-form .heading-box span a{
font:normal 11px/41px Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:underline;
}
.box-form .heading-box span a:hover{
font:normal 11px/41px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
}


.box-form .query {width:100%; margin:0; float:left; padding:10px 0;}
.box-form .query p { margin:0; padding:0 10px 12px 20px; width:98%; clear:both; float:left;}
.box-form .query label {font:normal 12px/24px Arial, Helvetica, sans-serif; color:#434343; float:left; width:95px; padding:0 5px 0 0; text-align:left;}
.box-form .query input {height:22px; width:240px; border:1px solid #D0D0D0; float:left; padding:0 0 0 2px; margin:0;}
.box-form .query select, .box-form .query textarea {height:22px; width:245px; border:1px solid #D0D0D0; float:left; padding:0 0 0 2px; margin:0;}
.box-form .query strong {font:bold 14px Arial, Helvetica, sans-serif; color:#ff0000; padding:0 0 0 2px; float:left;}
.box-form .query .button {background:#000; border:1px solid #000000; font:normal 11px/15px Verdana, Arial, Helvetica, sans-serif; color:#DFDFDF; width:60px; padding:0 3px 0 3px; margin:5px 15px 0 0; height:20px;}

/*box-form*/


/*tooltip*/

/* All form elements are within the definition list for this example */
dl {
	font:normal 12px/15px Arial;
    position: relative;
    width: 350px;
}
dt {
    clear: both;
    float:left;
    width: 130px;
    padding: 4px 0 2px 0;
    text-align: left;
}
dd {
    float: left;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
}


/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    width: 200px;
    margin-top: -4px;
	margin-left:20px;
	margin-right:0;
    border: 1px solid #CFCFCF;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #F5F5F5 url(../images/pointer.gif) no-repeat -10px 5px;
	z-index:1000;
	font:italic normal 11px/18px Arial, Helvetica, sans-serif;
	color:#434343;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(../images/pointer.gif) left top no-repeat;
	z-index:1000;
}