.optimal
{
	width: 180px;
    height:54px; 
    background: url(../images/optimal-box2.png) no-repeat; 
}

.optimal .dataarea
{
	float:left;
	margin: 28px 1px 3px 0px; 
	padding-left:15px; padding-top:3px; font-weight:normal;
	font:12px Arial !important; color:#fff;
}
.optimal .imagearea
{
	float:right;
	margin: 10px 3px 3px 3px; 
	padding-right:14px; 
}
.optimal .imagearea img
{
	width:51px; height:33px
}
/*end */
.dialog
{
    width: 67%;
    margin: 0px auto;
    min-width: 20em;
    max-width: 800px; /* I only cut the left background images out to 800px. You could do much larger, etc. */
    color: #fff;
}
.dialog .hd .c, .dialog .ft .c
{
    font-size: 1px; /* ensure minimum height */
    height: 11px;
}
.dialog .ft .c
{
    height: 14px;
}
.dialog .hd
{
    background: transparent url(../images/png/tl.png) no-repeat 0px 0px;
    margin-right: 14px; /* space for right corner */
}
.dialog .hd .c
{
    background: transparent url(../images/png/tr.png) no-repeat right 0px;
    margin-right: -14px; /* pull right corner back over "empty" space (from above margin) */
}
.dialog .bd
{
    background: transparent url(../images/png/ml.png) repeat-y 0px 0px;
    margin-right: 6px;
}
.dialog .bd .c
{
    background: transparent url(../images/png/mr.png) repeat-y right 0px;
    margin-right: -6px;
}
.dialog .bd .c .s
{
    margin: 0px 8px 0px 4px;
    background: #000 url(../images/png/ms.jpg) repeat-x 0px 0px;
    padding: 1em;
}
.dialog .ft
{
    background: transparent url(../images/png/bl.png) no-repeat 0px 0px;
    margin-right: 14px;
}
.dialog .ft .c
{
    background: transparent url(../images/png/br.png) no-repeat right 0px;
    margin-right: -14px;
}
/* content-specific */
.dialog h1
{
    /* header */
    font-size:1.7em;
    margin: 0px;
    padding: 0px;
    margin-top: -0.6em;
}
p
{
   font-family: Verdana, Arial;
   font-size: 11px;
}
.dialog p
{
    margin: 0.5em 0px 0px 0px;
    padding: 0px;
    font: 11px Verdana, Arial;
}
html > body .dialog pre
{
    font-size: 1em;
}
.dialog table
{
	border-collapse:collapse; width:100%; padding:0;margin:0;
}
.dialog table, .dialog table td
{
font-family: Verdana, Arial;font-size: 11px;
}
/* ------------------- end ----------------*/


/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
	margin: 0 auto; /* center for now */
	width: 17em; /* ems so it will grow */
	background: url(../images/sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(../images/sbhead-r.png) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(../images/sbhead-l.png) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url(../images/sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}
/*
	| liquidcorners.css; feel free to adapt the style!
	| ================================================
	| use: 4 corners with borderline outside a contentbox with class="inside"; 
	|      image  = upper half: top left corner, long borderline, top right corner
	|               under half: bottom left corner, long borderline, bottom right corner
	|      CHANGE = you have to change this for fitting to your image
	|      YCC    = You Can Change (or omit), if wanted
	|      DNC    = Do Not Change
	| credits: original by francky kleyneman, see article/tutorial in Francky's Developers Corner:
	|          http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
	| adapted
	| by.....: ... (your name and site?!)
	|
	| + please let this text & links intact for a next user +
*/
.top-left, .top-right, .bottom-left, .bottom-right { 
	background-image: url('../images/corners1280x18.png'); /* CHANGE: path and name of your image */
	height: 9px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
	font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
	}
.top-left, .bottom-left { 
	margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
	}
.top-right, .bottom-right { 
	margin-left: 9px;  /* CHANGE: replace by the width of one of your corners */
	margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
	}
.top-right {
	background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
	}
.bottom-left  { 
	background-position: 0 -9px;    /* CHANGE: replace second number by negative height of one of your corners */
	}
.bottom-right { 
	background-position: 100% -9px; /* CHANGE: replace second number by negative height of one of your corners */
	}
.inside {
	border-left: 1px solid #41C9F4; /* YCC: color & properties of the left-borderline */
	border-right: 1px solid #41C9F4;/* YCC: color & properties of the right-borderline */
	background: #37B5F2;           /* YCC: background-color of the inside */
	color: #000000;                 /* YCC: default text-color of the inside */
	padding-left: 10px;             /* YCC: all texts at some distance of the left border */
	padding-right:10px;             /* YCC: all texts at some distance of the right border */
	}
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: /* end */0; } /* DNC: to avoid splitting of the box */

.t
{
    background: url(../images/dot2.gif) 0 0 repeat-x;
    width: 20em;
}
.b
{
    background: url(../images/dot2.gif) 0 100% repeat-x;
}
.l
{
    background: url(../images/dot2.gif) 0 0 repeat-y;
}
.r
{
    background: url(../images/dot2.gif) 100% 0 repeat-y;
}
.bl
{
    background: url(../images/bl.png) 0 100% no-repeat;
}
.br
{
    background: url(../images/br.gif) 100% 100% no-repeat;
}
.tl
{
    background: url(../images/tl.gif) 0 0 no-repeat;
}
.tr
{
    background: url(../images/tr.gif) 100% 0 no-repeat;
    padding: 10px;
}
.tr h3
{
	line-height: 30px;
	margin: 3px 0px 3px 0px;
	padding: 0px 0px 0px 3px;
	border-bottom:solid 1px #f5f5f5
}
.tr hr
{
	border:solid 1px #ccc; height:1px;
}
.tr div.dataarea
{
	background-color:#41C9F4;
	background-color:#fff;
}
fieldset.form
{
	border: 1px dotted #fff;
	width: 95%;
}
fieldset.form legend
{
	font-size:1.3em;
}
fieldset.form div.form
{
	border:none !important;
}
div.form
{
	width: 95%;
	/*background-color: #ccf29b;*/
	border: 1px dotted #fff;
	padding: 1em;
	margin: 0px auto;
	/*font-size: 12px;*/
}
div.form h3{margin: 0px auto; margin:1em 0 1em 0; border-bottom:solid 1px #ccf29b;}
div.form h3 span
{
	border: solid 0px #555;
	background-color: #CCFF33;
	color: #000;
}
h3.highlight{margin: 0px auto; margin:1em 0 1em 0; border-bottom:none;}
h3.highlight span
{
	border: none;
	color:#CCFF33;
	background-color:Transparent;
	padding-top:7px !important;
}
h3.highlight a { font-size:0.85em}
div.row
{
	clear: both;
	padding-top: 5px;
}

div.row span.label
{
	float: left;
	width: 150px; width:33%;
	text-align: right;
}

div.row span.control
{
	float: right;
	width: 285px;width:60%;
	text-align: left;
}

div.row .submit
{
	margin: 0px auto;/* float:right*/
}
div.row .msg
{
	margin: 0px auto;
	width: 90%;
	font-weight: normal;
	font-size: 1em;
	padding: 5px;
	color: #FF0000;
}
div.row span.error{ font-size:1em; color:Red}
/* form styles */
.form {color:#fff}
.form ul {padding:0; margin:0; list-style-type:none}
.form li						{ margin: 0 0 5px 0; color:#fff}
/* form labels */
.form label span				{ float: left; width: 150px; }
.form #methods label span		{ float: none; width: auto; }
.form label label 				{ margin: 0 0 0 10px; padding: 0 0 0 24px; }
.form label label.error
{
	color: #FF6A6A;
	background: url(/images/cross.png) no-repeat 0 50%;
}
.form label label.valid			{ color: #fff; background: url(/images/tick.png) no-repeat 0 50%; }
/* form inputs */
.form input						{ /*border: 1px solid #444; */
           						  width:250px; }
.form input.error				{ border-color: red; }
.form input.button
{
	width: 130px;
	color: #0066cc;
	font-family: Verdana, Arial,'trebuchet ms' ,helvetica,sans-serif;
	font-size:1.1em; font-weight:bold;
	background-color: #e5e5e5;
	border: 1px solid;
	border-color: #696 #363 #363 #696;
	filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr= '#ffffffff' ,EndColorStr= '#ffeeddaa' );
}
/*
div.form .checkboxes label {margin:0; padding:0}
*/
.checkboxes input {width:auto !important}
.checkboxes {color:#fff}
.form fieldset {
	margin-bottom: 10px;
}

.form legend {
	padding: 0 2px;
	font-weight: bold;
	_margin: 0 -7px; /* IE Win */
}

.form fieldset p {
	list-style: none;
	padding: 5px;
	margin: 0;
}

.form fieldset {
	border: none;
	margin: 3px 0 0;
}

.form fieldset fieldset legend {
	padding: 0 0 5px;
	font-weight: normal;
}

.form fieldset fieldset label {
	display: block;
	width: auto;
}