.transdiv
{
	filter: alpha(opacity=75);
	-moz-opacity: .75;
	opacity: .75;
}


body
{
	margin: 0px;
	padding: 0px;
	/*background-image: url(images/ui_bg.gif);*/
	font-family:Arial;
	font-size:12px;
	color:#333;	
}

.wpPage
{
	margin:12px auto 24px auto;
	width: 800px;
	
	background-color:White;
	
	/*border:1px solid gray;*/
}
.wpHeading
{	

}

.wpToolBar
{
	background-image:url(images/toolbar.png);
	height:42px;
	line-height:42px;
}

.wpContent
{
	width:780px;	
	margin:0px;
	margin-top:24px;
	padding:0px;
	color:#888;
	background-color:White;	
}
.wpContent h1
{
	
	color:#6a6a6a;
	font-size:40px;
	font-family:Arial;
	font-weight:normal;
	margin:4px;
	padding:4px;
}

.wpContent h2
{
	margin: 8px;	
	padding: 0px;
	font-family:Arial;
	font-size:20px;
	color:#8E8E8E;
}
.wpContent h3
{
	
	margin: 4px;	
	padding: 0px 0px 0px 4px;
	font-family:Arial;
	font-size:12px;
	color:#333;
	margin-bottom:0px;
}


.wpContent fieldset
{
	padding:4px;
	margin:4px;
	border-width:0px;
}

.wpTaskBar
{
	margin: 8px auto auto auto;
	padding:4px;
	float: right;
	width: 220px;
	background-color:White;
}

.wpTaskBar li.wpTaskGroup
{
	list-style-type:none;
	margin-left:0px;
	margin-top:8px;
	
}

.tasklist
{
	list-style-type:none;	
	white-space:nowrap;	
	margin:4px;
	padding-left:12px;
	
}
.tasklist li
{
	height:60px;
}
.tasklist a
{
	text-decoration:none;
	color:#808080;
}
.tasklist a:visited
{
	color:#808080;
}
.tasklist a:active
{
	color:#808080;
}
.tasklist img
{
	border: 0px solid white;
	vertical-align:middle;
	margin-right:8px;
}

address.wpFooter
{
	clear:both;
	width:800px;
	height:54px;
	margin-top:0px;
	padding-top:12px;
	border-top:1px solid #c4c4c4;
	font-family:Arial;
	font-size:10px;
	font-style:normal;
}




/* 
>>> Title: Rounded corners without images
Example:
<div>
	<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
	</b>
	<!--content goes here -->
	<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>
*/

.rtop, .rbottom
{
	
	display: block;
}
.rtop *, .rbottom *
{
	
	display: block;
	height: 1px;
	overflow: hidden;
}
.r1
{
	background:#B8E0A9;
	margin: 0 5px;
}
.r2
{
	background:#B8E0A9;
	margin: 0 3px;
}
.r3
{
	background:#B8E0A9;
	margin: 0 2px;
}
.r4
{
	background:#B8E0A9;
	margin: 0 1px;
	height: 2px;
}
.rcontent
{
	background:#B8E0A9;
	border:1px solid #B8E0A9;
	
}
/* 
<<< EOF: Rounded corners without images
*/

/*
>>> Title: Tableless forms 	
Example:
<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>
 */

label, input, select
{
	display: block;
	width: 200px;
	float: left;
	margin-bottom: 10px;
}

label
{
	text-align: right;
	width: 100px;
	padding-right: 8px;
	padding-top: 8px;
	white-space:nowrap;
}

br
{
	clear: left;
}
/*
	<<<< EOF:  Tableless forms 	
*/
/*CSS Drop Caps

<p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. 

*/

p.introduction:first-letter
{
	font-size: 300%;
	font-weight: bold;
	float: left;
	width: 1em;
}

a.infotip span
{
	display:none;
}

a:hover.infotip span
{
	display:none;
	border:1px solid red;
	background:yellow;
}


.productList th
{
	font-family:Arial;
	font-size:12px;	
	color:#333;
	background-color:#7DBB6C;
}

.productList td
{
	font-family:Arial;
	font-size:12px;
	color:#333;
	background-color:#B8E0A9;
}


a.infotip{
    position:relative; /*this is the key*/
    z-index:24; 
    background-color:Transparent;
    color:#000;
    text-decoration:none;
    display:none;
}

a.infotip:hover
{
	z-index:25;
}

a.infotip span{display: none}

a.infotip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:0em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color: #EFF7E8;
    color:#000;
    text-align: center;
}
.mandatory
{
	color:Red;	
}