Solved

Trouble with floated div text

Posted on 2014-03-20
3
300 Views
Last Modified: 2014-03-21
I have a layout that displays a PO Number. The max length is 35 char. I can't get my test string, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" to wrap at width of div.

Long PO Number
Here's my HTML:

	
	
	
	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>Sales Order Details</title> 
	<link href="http://www.ssgecom.com/QOE/css/style.css" rel="stylesheet" type="text/css" /> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
	<script type="text/javascript"> 
	
	
	function toggler(id,newId){ 
	jQuery("#"+id).slideToggle("slow"); 
	if(jQuery("a."+newId).html() == "Read More"){ 
	jQuery("a."+newId).addClass("read-less").html("Read Less"); 
	} 
	else 
	if(jQuery("a."+newId).html() == "Read Less") { 
	jQuery("a."+newId).removeClass("read-less").html("Read More"); 
	} 
	} 
	
	
	function showDiv(divid,moreid,lessid) { 
	document.getElementById(divid).style.display=''; 
	document.getElementById(lessid).style.display=''; 
	document.getElementById(moreid).style.display='none'; 
	} 
	
	function hideDiv(divid,moreid,lessid) { 
	document.getElementById(divid).style.display='none'; 
	document.getElementById(lessid).style.display='none'; 
	document.getElementById(moreid).style.display=''; 
	} 
	
	
	
	function pushAndGo(okcode) { 
	document.getElementById('okcode').value=okcode; 
	document.listForm.submit(); 
	} 
	
	function dlinv(selline) { 
	document.getElementById('invselect').value=selline; 
	document.getElementById('okcode').value='DINV'; 
	document.listForm.submit(); 
	} 
	</script> 
	<style type="text/css"> 
	<!-- 
	.style1 {color: #000000} 
	--> 
	</style> 
	</head> 
	<body> 
	<div id="wrapper"> 
	
	
	
	
	<!---header start---> 
	<div id="top-header"> 
	<div class="header"> 
	<div class="customer-img"> <img src="http://ssgecom.com/QOE/260x235/0000100050.jpg" style="width: 134px;" /> </div> 
	<div class="headerlink"> 
	<div class="toplink"> 
	<ul> 
	<li class="sign-out"><a href="" title="">Sign Out</a></li> 
	
	</ul> 
	</div> 
	<div class="clear"></div> 
	<div class="userinfo"> 
	<div class="username"> <span><span>Gyula Kalman<span class="icon">&nbsp;</span></span></span> </div> 
	<div class="topmenu"> 
	<ul> 
	<li><a href="/sap(cz1TSUQlM2FBTk9OJTNhU1NHREVWX0Q2MF8wOSUzYUhhcFpFTVRrNVNYWTVjN09nZFZWQ01UNFJ3UVlBYl9odnZCUGlyemstQVRU)/bc/gui/sap/its/zwqe/~flNUQVRFPTQ5MTIuMDgwLjA1LjE1====?~okcode[1]=DBRD&~target[1]=_parent" target="_parent" title="Dashboard" ><span>Dashboard</span></a></li> 
	<li><a href="/sap(cz1TSUQlM2FBTk9OJTNhU1NHREVWX0Q2MF8wOSUzYUhhcFpFTVRrNVNYWTVjN09nZFZWQ01UNFJ3UVlBYl9odnZCUGlyemstQVRU)/bc/gui/sap/its/zwqe/~flNUQVRFPTQ5MTIuMDgwLjA1LjE1====?~okcode[1]=CLST&~target[1]=_parent" target="_parent" title="Customer List" class="selected"><span>Customer List</span></a></li> 
	<li><a href="/sap(cz1TSUQlM2FBTk9OJTNhU1NHREVWX0Q2MF8wOSUzYUhhcFpFTVRrNVNYWTVjN09nZFZWQ01UNFJ3UVlBYl9odnZCUGlyemstQVRU)/bc/gui/sap/its/zwqe/~flNUQVRFPTQ5MTIuMDgwLjA1LjE1====?~okcode[1]=STAN&~target[1]=_parent" target="_parent" title="Standings" ><span>Standings</span></a></li> 
	<li><a href="/sap(cz1TSUQlM2FBTk9OJTNhU1NHREVWX0Q2MF8wOSUzYUhhcFpFTVRrNVNYWTVjN09nZFZWQ01UNFJ3UVlBYl9odnZCUGlyemstQVRU)/bc/gui/sap/its/zwqe/~flNUQVRFPTQ5MTIuMDgwLjA1LjE1====?~okcode[1]=PROD&~target[1]=_parent" target="_parent" title="Tracking" ><span>Tracking</span></a></li> 
	<!--<li><a href="#" title="Search"><span>Search</span></a></li>--> 
	</ul> 
	</div> 
	</div> 
	<div class="logo"> <img src="http://www.ssgecom.com/QOE/images/logo.png" alt="BSN Sports" title="BSN Sports" /> </div> 
	</div> 
	</div> 
	</div> 
	<!---header end---> 
	<!---content area---> 
	<div id="customer-content"> 
	
	
	
	
	
	<div class="customer-box"> 
	<div class="backlink"><a href="Javascript:void(0)" onclick="pushAndGo('OORD');" title="Back to Test D46 Customer - PK Test School">&lt; Back to Test D46 Customer - PK Test School</a></div> 
	<div class="invoice-box">&nbsp;</div> 
	<div class="invoice-infobox"> 
	<div class="top-dark"><span>Sales Order Details</span></div> 
	<div class="left-shade"> 
	<div class="right-shade"> 
	<div class="invoice"> 
	
	<div class="order-details"> 
	<div class="inner-div"> <span class="corner"></span> <span class="corner top-right"></span> 
	<div class="open-order"> 
	<div class="column"> <span>P.O. Number</span> <span class="big">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<!--`X_DATA_9961-BSTKD`--></span> </div> 
	
	<div class="column last"> <span>Total Invoice</span> <span class="big">$961.99</span> </div> 
	</div> 
	<div class="order-amount"> 
	<div class="column"> <span>Credit Status</span> <span class="big">Not approved</span> </div> 
	<div class="column"> <span>Completion Status</span> <span class="big">Being processed</span> </div> 
	<div class="column last"> <span>Shipping Status</span> <span class="big">Hold</span> </div> 
	</div> 
	<span class="corner btm-left"></span> <span class="corner btm-right"></span> </div> 
	</div> 
	<div class="info"> 
	<p><span>1000780</span><br /> 
	<span class="big">Test D46 Customer - PK Test School</span><br /> 
	School<br>3526 Timberview<br>DALLAS TX 75229</p> 
	</div> 
	<div class="subscribe"> 
	<a href="Javascript:void(0)" onclick="pushAndGo('ALERT');"><img border="0" src="http://www.ssgecom.com/QOE/images/subcribed-btn.png" title="" /></a> <img src="http://www.ssgecom.com/QOE/images/email-btn.png" title="" /> </div> 
	<div class="clear"></div> 
	<div class="invoice-history"> 
	<div class="title">Invoice History</div> 
	<table class="invoice-data"> 
	<tr> 
	<th>Invoice</th> 
	<th>Date</th> 
	<th>Amount</th> 
	</tr> 
	
	
	<tr> 
	<td><a class="order-btn" href="Javascript:void(0)" onclick="dlinv('90000359');"><span>90000359</span></a></td> 
	<td>10/24/2008</td> 
	<td><div align="right">$961.99</div></td> 
	</tr> 
	
	
	</table> 
	</div> 
	<div class="contact"> 
	<div class="contact-text">Main Contact:</div> 
	<span class="big">Coach John</span> <span>X7142</span> <span><a class="order-btn" title="pkruger@sportsupplygroup.com" alt="pkruger@sportsupplygroup.com" href="mailto:pkruger@sportsupplygroup.com"><span> 
	send email</span></a></span> </div> 
	</div> 
	</div> 
	</div> 
	<div class="btm-curve"> <span></span> </div> 
	</div> 
	</div> 
	
	<!-- 
	
	<html> 
	<head> 
	<title>`~windowtitle`</title> 
	</head> 
	<body> 
	`~messageline` 
	<form method="post" action="`WGateURL()`"> 
	<p> 
	`TEXT_SO.label` 
	`X_DATA_9961-VBELN.value` 
	`TEXT_CREDIT_STATUS.label` 
	`X_DATA_9961-CMGST_BEZ.value` 
	`G_ORD_9961.value` 
	<input type=submit name="~OKCode=ORDD" value="`PUSHBUTTON_ORDER_DETAILS.label`"> 
	<p> 
	`TEXT_PO_NUMBER.label` 
	`X_DATA_9961-BSTKD.value` 
	`TEXT_COMPL_STATUS.label` 
	`X_DATA_9961-GBSTA_BEZ.value` 
	`G_HIS_9961.value` 
	<input type=submit name="~OKCode=LWOH" value="`PUSHBUTTON_LWO_HISTORY.label`"> 
	<table> 
	<thead> 
	<tr> 
	<td>`TEXT_INVOICE.label`</td> 
	<td>`TEXT_DATE.label`</td> 
	<td>`TEXT_AMOUNT.label`</td> 
	</tr> 
	</thead> 
	<tbody> 
	`repeat with j from 1 to X_INV_9961-VBELN.max` 
	<tr> 
	<td>`X_INV_9961-VBELN[j].value`</td> 
	<td>`X_INV_9961-ERDAT[j].value`</td> 
	<td>`X_INV_9961-RFWRT[j].value`</td> 
	</tr> 
	`end` 
	</tbody> 
	</table> 
	<p> 
	`TEXT_TOTAL_INV.label` 
	`X_DATA_9961-RFWRT.value` 
	`TEXT_SHIPPING_STAT.label` 
	`X_DATA_9961-ORDSTTX.value` 
	`X_DATA_9961-ALERT.value` 
	<input type=submit name="~OKCode=ALERT" value="`PUSHBUTTON_ALERT.label`"> 
	<p> 
	`TEXT_CUSTOMER.label` 
	`X_DATA_9961-KUNNR.value` 
	`TEXT_CONTACT_NAME.label` 
	`X_DATA_9961-BNAME.value` 
	<p> 
	`TEXT_NAME1.label` 
	`X_DATA_9961-NAME1.value` 
	`TEXT_CONTACT_EMAIL.label` 
	`X_DATA_9961-ZZINTAD.value` 
	<p> 
	`TEXT_ADDRESS_LINE.label` 
	`X_DATA_9961-ADDR.value` 
	`TEXT_CONTACT_PHONE.label` 
	`X_DATA_9961-TELF1.value` 
	</form> 
	</body> 
	</html> 
	--> 
	
	
	<div class="clear"></div> 
	<form method="post" action="/sap(cz1TSUQlM2FBTk9OJTNhU1NHREVWX0Q2MF8wOSUzYUhhcFpFTVRrNVNYWTVjN09nZFZWQ01UNFJ3UVlBYl9odnZCUGlyemstQVRU)/bc/gui/sap/its/zwqe/~flNUQVRFPTQ5MTIuMDgwLjA1LjE1====" style="display:inline" name="listForm"> 
	<input type="hidden" id="okcode" name="~OkCode"> 
	<input type="hidden" id="invselect" name="G_INVOICE_SELECT"> 
	<div class="tab-btn"><img src="http://www.ssgecom.com/QOE/images/order-details-btn1.jpg" alt="" border="0" usemap="#Map" /> 
	<map name="Map" id="Map"> 
	<area shape="rect" coords="175,1,332,45" href="Javascript:void(0)" onclick="pushAndGo('LWOH');" title="LWO History" /> 
	</map> 
	</div> 
	</form> 
	</div> 
	</div> 
	<!---content end---> 
	<div class="item-box"> 
	
	
	
	
	<div class="team-print-box"> 
	<div class="top"> 
	<div class="left"></div> 
	<div class="middle-text">Decorator<span>NON DECORATED</span></div> 
	<div class="right">LWO Status<span>COMPLETE</span></div> 
	</div> 
	<div class="expand-colleps"> 
	<div class="main-content"> 
	<div class="top"> 
	<table class="team-table" cellpadding="0" cellspacing="0"> 
	
	<thead> 
	<tr> 
	<th style="padding: 0 0 0 15px;" width="65"></th> 
	<th align="left" width="250">Style</th> 
	<th align="center">Ordered</th> 
	<th class="center">Open</th> 
	<th align="center">Shipped</th> 
	<th align="center">Plant</th> 
	<th align="center" colspan="3">Product POs</th> 
	</tr> 
	</thead> 
	
	
	
	
	
	<tr class="row"> 
	<td style="padding: 0 0 0 15px;"></td> 
	<td align="left">VPG85HXX<br/>VOIT PLAYGROUND BALL 8.5" RED<br/></td> 
	<td align="center">250</td> 
	<td align="center">0</td> 
	<td align="center">250</td> 
	<td align="center">BM</td> 
	
	
	<td colspan="3" align="center"> 
	<table border="0"> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000372<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000373<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000374<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000375<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000376<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000377<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000378<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000379<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000380<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000381<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000382<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000383<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000384<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000385<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000386<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000387<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	
	80000388<br> 
	
	
	</td> 
	
	
	<td> 
	
	
	250<br> 
	
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	
	10/24/2008<br> 
	
	
	</td> 
	</tr> 
	
	</table> 
	</td> 
	
	
	
	
	
	
	
	</tr> 
	
	
	
	
	
	<tr class="row"> 
	<td style="padding: 0 0 0 15px;"></td> 
	<td align="left">VPG85HXX<br/>VOIT PLAYGROUND BALL 8.5" RED<br/></td> 
	<td align="center">1</td> 
	<td align="center">1</td> 
	<td align="center">0</td> 
	<td align="center">BM</td> 
	
	
	<td colspan="3" align="center"> 
	<table border="0"> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	<tr> 
	<td style="padding: 0 10px 0 0;"> 
	
	</td> 
	
	
	<td> 
	
	</td> 
	<td style="padding: 0 0 0 10px;"> 
	
	</td> 
	</tr> 
	
	</table> 
	</td> 
	
	
	
	
	
	
	
	</tr> 
	
	
	
	
	
	
	
	
	
	
	
	<tr bgcolor="#dddddd" style="margin: 10px 0 0 0;"> 
	<td colspan="9"> 
	<div class="total-content" style="padding: 10px 10px 0 0;"> 
	<div class="total"> 
	<span>Sub-total</span> 
	<span>$<span class="subtotal">838.63</span></span> 
	</div> 
	</div> 
	</td> 
	</tr> 
	
	
	
	</table> 
	
	<div class="clearBoth"></div> 
	</div></div> 
	
	<div class="bottom"> 
	
	
	
	</div> 
	</div> 
	
	</div> 
	
	
	
	
	
	</div> 
	<div class="bottom-text"> 
	<div class="notes"> 
	
	<p> 
	
	
	Essential Oils 
	
	
	
	The single most popular category that sets Nature's Oil apart from the 
	
	
	
	competition is our Pure Essential Oils and Essential Oil Blends. We 
	
	
	
	scour the globe to source the absolute finest quality therapeutic grade 
	
	
	
	essential oils from ethical producers in dozens of countries world-wide. 
	
	
	
	These suppliers are highly screened and audited regularly for quality 
	
	
	
	and consistency. This screening process ensures that we only supply the 
	
	
	
	highest quality essential oils available anywhere in the U.S. 
	
	
	</p> 
	
	
	</div> 
	<div class="detail-sum"> 
	<table width="100%" border="0" cellspacing="4" cellpadding="4" class="table-data"> 
	<tr> 
	<td class="a-right" style="padding:0 20px 0 0;"><span>Summary Sub-total</span></td> 
	<td class="a-right"><div class="total"><span>$<span class="subtotal">838.63</span></span></div></td> 
	</tr> 
	<tr> 
	<td class="a-right" style="padding:0 20px 0 0;"><span>Freight</span></td> 
	<td class="a-right"><div class="total"><span>$<span class="subtotal">142.41</span></span></div></td> 
	</tr> 
	<tr> 
	<td class="a-right" style="padding:0 20px 0 0;"><span>Tax</span></td> 
	<td class="a-right"><div class="total"><span>$<span class="subtotal">0.00</span></span></div></td> 
	</tr> 
	<tr> 
	<td class="a-right" style="padding:0 20px 0 0;"><span>Total</span></td> 
	<td class="a-right"><div class="total"><span>$<span class="subtotal">981.04</span></span></div></td> 
	</tr> 
	</table> 
	</div> 
	
	
	
	</div> 
	<div id="footer-new"> </div> 
	</div> 
	</body> 
	</html> 
	

Open in new window



And CSS:

*{ margin:0; padding:0;}
.clear{ clear:both;}
body{background:#fff; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:12px; line-height:15px;}
.seles:after {display:block;content:".";clear:both;font-size:0;line-height:0;height:0;overflow:hidden}
a {text-decoration:none; color:#E51937; cursor:pointer;}
img {border:none;}
:focus {outline:none;}
.center{ text-align:center !important;}
.a-right {text-align:right!important;}
.a-left {text-align:left!important;}
.a-center {text-align:center!important;}
.a_row2 {background:#eee;}
.goal {background-color: #b0d89b;}
.rounded-img { border:1px solid #; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px;  }
#wrapper{ width:100%;}
#top-header{ width:100%; background:url(../images/header_bg.jpg) top repeat-x; height:150px;}
.header{ width:950px; height:141px; margin:0 auto;}
.user-img{ width:194px; height:191px; float:left;margin-top: 14px;}
.headerlink{ width:738px; float:left; height:auto; margin-left: 18px; height:141px;}
.toplink{ width:auto; float:right; margin:6px auto;}
.toplink ul{ margin:4px 0 0 ; padding:0;}
.toplink ul li{ list-style-type:none; display:block; background:url(../images/top-link-bg.png) top left no-repeat; margin:0 0 0 10px;line-height: 14px; float:left;}
.toplink ul li a{ font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; color:#fff; text-transform:uppercase; text-decoration:none;}
.toplink li a:hover{ text-decoration:none;}
.toplink ul li.sign-out{background-position: 0 0;padding-left: 14px;}
.toplink ul li.setting{background-position: 0 -15px;padding-left: 14px;}

.userinfo{ width:515px; float:left; clear:both;}
.username{ float:left; width:330px; font-family:Arial, Helvetica, sans-serif;font-size:20px; line-height:20px; color:#fff; height:48px; display:block;margin-top: 13px;}
.username span{background: url(../images/userinfo-bg.png) no-repeat 0 0; margin:0; padding:0 0 0 10px; height:48px; display:block;}
.username span span{background:none;line-height:48px;}
.username span span span.icon{background: url(../images/top-link-bg.png) no-repeat 0 -31px;float: right;height: 18px;margin: 11px !important; width: 13px;}

.topmenu{ float:left; clear:both; margin-top:17px;width: 525px; }
.topmenu ul li{ display:block; line-height:32px; float:left;}
.topmenu a{margin:0; padding:0 0 0 21px !important; display:block;font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; color:#fff; text-transform:uppercase; text-decoration:none;}
.topmenu a span {padding:0 8px 0 0 !important; display:block; height:36px; line-height:36px;}
.topmenu a:hover, .topmenu a.selected {background: url(../images/topmenu-bg.png) no-repeat 0 0; margin:0; padding:0 0 0 21px; display:block;font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; color:#e51937; text-transform:uppercase; text-decoration:none;}
.topmenu a:hover span, .topmenu a.selected span{background:url(../images/topmenu-bg.png) no-repeat 100% -42px; padding:0 8px 0 0!important; display:block;}
.logo{ width:183px; height:80px; float:right;margin-top: 15px;}

#content{width:950px; height:auto;margin:0 auto; margin-top:16px;}
.left-panel{position:absolute; margin-top:45px;width:192px; float:left;}
.rank-box{ width:192px; float:left; }
.rank-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.rank-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:15px; text-align:center; line-height:39px; text-transform:uppercase;}
.rank-box .left-shade {background:url(../images/rank-box-bg.png) repeat-y 0 0; padding-left:10px; margin-left:3px;}
.rank-box .right-shade {background:url(../images/rank-box-bg.png) repeat-y 100% -101px; padding:10px 4px 10px 0; margin-right:5px; height:81px;}
.rank-box .rank{font-family:Arial, Helvetica, sans-serif;font-size:66px; color:#f5002f;text-align: center;line-height: 66px;}

.order-box{ width:192px; float:left; margin-top:15px;}
.order-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.order-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:15px;padding: 0 0 0 25px; line-height:39px; text-transform:uppercase;}
.order-box .left-shade {background:url(../images/rank-box-bg.png) repeat-y 0 0; padding-left:10px; margin-left:3px;}
.order-box .right-shade {background:url(../images/rank-box-bg.png) repeat-y 100% -101px; padding:10px 4px 10px 0; margin-right:5px; height:81px;}
.order-box .order{font-family:Arial, Helvetica, sans-serif;font-size:35px; color:#f5002f;text-align: center; padding-top:20px; line-height:35px;}
.order-box .order span{font-size:20px;vertical-align: top; line-height:20px;}

.content-box{ width:750px; float:right;margin-top: 16px;}
.content-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.content-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:15px; padding: 0 0 0 25px; line-height:39px; text-transform:uppercase;}
.content-box .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:10px; margin-left:2px;}
.content-box .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% -101px; padding:10px 4px 0px 0; margin-right:3px; height:103px;}

.seles{ width:100%; margin:0; padding:0; color:#333;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.seles .rank{ float:left; font-size:51px;padding-left:10px;margin-top:5px; line-height:51px;}
.seles .rank span{font-size:12px;line-height:12px;}
.seles .amount{width:180px; float:left; font-size:38px;margin-top: 32px;margin-left: 10px; margin-right: 10px; line-height:38px;}
.seles .amount span{font-size:20px !important;vertical-align: top;}
.seles .percent-img{float: left;font-size: 14px;height: 79px;width: 80px; background:url(../images/percent-img-new.png) no-repeat 0 0; line-height:80px; text-align:center; margin:10px 0 0 10px;}
.detail-box{ width:296px; float:right; background:url(../images/detail-box-bg.png) no-repeat center;height: 100px;padding-right: 10px;}
.detail-box .table-data {border-collapse:collapse; width:270px;margin: 13px 0 0 20px; color:#333; font-size:22px;line-height: 22px;}
.detail-box .table-data td span{font-size:12px; text-align:left !important;}

.title-shade{ background:#636466; width:740px; float:left; height:29px; margin:0 auto 0 4px; display:block; color:#fff; font-size:15px;text-transform:uppercase; text-align:center; font-weight:600; line-height:29px;}
.title-shade ul{ margin:0; padding:0;}
.title-shade ul li{ display: block; border-right:1px solid #d5d5d5; width:246px; float:left;}
.title-shade ul li.last{border-right:0px !important; width:245px !important;}
.shadow{ background:url(../images/shadow-bg.png) bottom no-repeat; height:14px; width:100%;}

.seles1{width:100%; color:#333;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.seles1 .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:10px; margin-left:2px;}
.seles1 .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% -101px; padding:0 4px 0 0; margin-right:3px; height:113px; width:730px;}
.sales-rank-box{ width:245px; float:left; border-right:1px solid #d5d5d5;}
.sales-rank-box-last{width:243px; float:left;border-right:0px !important;}
.sales-rank-box-first{width:240px; float:left;border-right:1px solid #d5d5d5;}
.sales-rank-box-first .rank-amount{ width:98px; float:left; padding-left: 15px; }
.sales-rank-box .rank-amount, .sales-rank-box-last .rank-amount{ width:98px; float:left; padding-left: 25px;}
.seles1 .rank{float:left; font-size:39px; color:#333;margin-top:5px; line-height:39px; white-space: nowrap;}
.seles1 .rank span{font-size:12px; line-height:12px;}
.seles1 .amount{font-size:25px;margin-top: 20px; clear:left; line-height:25px; }
.seles1 .amount span{font-size:20px !important;vertical-align: top;}
.seles1 .percent-img{float: left;font-size: 14px;height: 80px; margin:10px 0 10px 15px;width: 80px; background:url(../images/percent-img-new.png) no-repeat; line-height:80px; text-align:center;}
.seles1 .sales-rank-box .percent-img{background-position:0 -157px;}
.seles1 .sales-rank-box-last .percent-img{background-position:0 -236px;}
.seles1 .sales-rank-box-first .percent-img{background-position:0 -78px;}
.seles1 .percent-img2{float: left;height: 79px; margin:10px 0 0 15px;}
.seles .percent-img3{float: left;height: 79px; margin:10px 0 0 0;}
#account-box{width:950px; margin-top:15px !important;}
#account-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
#account-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
#account-box .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
#account-box .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
#account-box .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
#account-box .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:10px 4px 10px 0; margin-right:3px;}
#account-box .table-data {border-collapse:collapse; width:100%;}
#account-box .table-data td {font-size:14px; color:#333; padding:11px 0 0 17px; vertical-align:middle; text-align:center;}
#account-box .total{ background:url(../images/account-total-bg.png) no-repeat;padding:23px 0 0 3px;width:178px; height:55px; font-size:25px; line-height:25px;}
#account-box .small-table th.first{background: url(../images/button-all-bg.png) repeat 0 46px;height: 46px;width: 104px;}
#account-box .small-table th.last{background: url(../images/button-all-bg.png) repeat -418px 46px;height: 46px;width: 104px; border:0px !important;}
#account-box .small-table th{background: url(../images/button-all-bg.png) repeat -5px 46px;border-right: 1px solid #e7e7e7;height: 46px;width: 104px; font-size:20px; color:#fff; font-weight:normal;}
#account-box .amount-row .small-table{ height:43px;}
#account-box .amount-row span.amount{ background:none;}

#product-box{width:950px;  margin:15px auto 0;}
#product-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
#product-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
#product-box .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
#product-box .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
#product-box .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
#product-box .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0 4px 0 0; margin-right:3px;}
#product-box .table-data {border-collapse:collapse; width:100%;}
#product-box .table-data th {font-size:14px; color:#000; text-align:left; padding:0 14px; vertical-align:middle; height:43px;}
#product-box .table-data .odd td {background:#eee;}
#product-box .table-data td {font-size:14px; color:#333; padding:0 20px; vertical-align:middle; text-align:left; height:43px; text-transform:uppercase;}

#recent-box{width:950px;margin:15px auto;}
#recent-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
#recent-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
#recent-box .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
#recent-box .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
#recent-box .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
#recent-box .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0 4px 10px 0; margin-right:3px;}
#recent-box .table-data {border-collapse:collapse; width:100%;}
#recent-box .table-data th {font-size:14px; color:#000; text-align:left; padding:0 15px; vertical-align:middle; height:43px;}
#recent-box .table-data .odd td {background:#eee;}
#recent-box .table-data td {font-size:14px; color:#333; padding:0 15px; vertical-align:middle; text-align:left;height:56px;}
#recent-box .name-btn{background: url(../images/button-all-bg.png) no-repeat;padding: 0 0 0 3px;width: 304px;height: 46px;}
#recent-box .name-btn span{ background: url(../images/button-all-bg.png) no-repeat 100% -46px;display: block;height: 46px;line-height: 46px;padding: 0 0 0 5px;color:#fff; text-transform:uppercase; font-size:13px; font-weight:bold;}
#recent-box .order-btn{background: url(../images/button-all-bg.png) no-repeat;padding: 0 0 0 3px;width: 90px;height: 46px; margin:0 auto;}
#recent-box .order-btn span{ background: url(../images/button-all-bg.png) no-repeat 100% -46px;display: block;height: 46px;line-height: 46px;padding: 0px;color:#fff; text-transform:uppercase; font-size:13px; font-weight:bold; text-align:center;}
#recent-box .order-btn span a {color:#fff;}




#ar-details{width:950px;margin:15px auto;}
#ar-details .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
#ar-details .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
#ar-details .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
#ar-details .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
#ar-details .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
#ar-details .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0 4px 10px 0; margin-right:3px;}
#ar-details .table-data {border-collapse:collapse; width:100%;}
#ar-details .table-data th {font-size:14px; color:#000; text-align:left; padding:0 15px; vertical-align:middle; height:43px;}
#ar-details .table-data .odd td {background:#eee;}
#ar-details .table-data td {font-size:14px; color:#333; padding:0 15px; vertical-align:middle; text-align:left;height:56px;}
#ar-details .name-btn{background: url(../images/button-all-bg.png) no-repeat;padding: 0 0 0 3px;width: 304px;height: 46px;}
#ar-details .name-btn span{ background: url(../images/button-all-bg.png) no-repeat 100% -46px;display: block;height: 46px;line-height: 46px;padding: 0 0 0 5px;color:#fff; text-transform:uppercase; font-size:13px; font-weight:bold;}
#ar-details .order-btn{background: url(../images/button-all-bg.png) no-repeat;padding: 0 0 0 3px;width: 90px;height: 46px; margin:0 auto;}
#ar-details .order-btn span{ background: url(../images/button-all-bg.png) no-repeat 100% -46px;display: block;height: 46px;line-height: 46px;padding: 0px;color:#fff; text-transform:uppercase; font-size:13px; font-weight:bold; text-align:center;}
#ar-details .order-btn span a {color:#fff;}

#footer{ width:100%; margin-top:22px; height:110px; background:url(../images/footer-bg.png) repeat-x;}
/*==========Customer page==================*/
.customer-img{ width:194px; height:147px; float:left;margin-top: 14px;}
.customer-img img{ float:right !important;}
#customer-content{width:950px; height:auto;margin:0 auto; margin-top:16px;}
.customer-box{}
h1.title{ font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#333; text-align:left; margin:25px auto;}
.customer-box .table-data {border-collapse:collapse; width:100%;}
.customer-box .table-data th {background:url(../images/bkg_table_head.png) repeat-x 0 0; font-size:14px; color:#000; text-align:left; padding:0 14px; vertical-align:middle; height:38px;font-weight: normal;}
.customer-box .table-data .odd td {background:#eee;}
.customer-box .table-data td {font-size:14px; color:#333; padding:0 12px; vertical-align:middle; text-align:left; height:60px;}
.customer-box .table-data td a {color:#333;}
.customer-order .order-btn span a {color:#fff;}
.customer-box .table-data td.a-left{ padding:0 0 0 15px !important;}

.customer-box .order-btn{background: url(../images/customer-btn-bg.png) no-repeat;padding: 0 0 0 7px;height: 44px; display:block;}
.customer-box .order-btn span{ background: url(../images/customer-btn-bg.png) no-repeat 100% -44px;display: block;height: 44px;line-height: 44px;padding:0 11px 0 7px;color:#fff; text-transform:uppercase; font-size:18px;text-align:center;}
.customer-box .order-btn-sm{background: url(../images/customer-btn-bg.png) no-repeat;padding: 0 0 0 7px; width: 190px; height: 44px; display:block;}
.customer-box .order-btn-sm span{ background: url(../images/customer-btn-bg.png) no-repeat 100% -44px;display: block;height: 44px;line-height: 44px;padding:0 0 0 7px;color:#fff; text-transform:uppercase; font-size:13px;}
.customer-box .history-btn{background: url(../images/customer-btn-bg.png) no-repeat;padding: 0 0 0 7px;height: 44px; display:block;}
.customer-box .history-btn span{ background: url(../images/customer-btn-bg.png) no-repeat 100% -44px;display: block;height: 44px;line-height: 44px;padding:0 5px 0 11px;color:#fff; text-transform:uppercase; font-size:18px;text-align:center;}
.customer-box .history-btn span span{ font-size:13px !important; background:url(../images/calendar-icon.png) no-repeat 0 12px; padding-left:18px; font-weight:bold;}

.pagination{height: 50px; display: table; margin: 30px auto;}
.pagination ul{ margin:0; padding:0;}
.pagination li a.first{background: url(../images/pagination-bg.png) repeat 0 0;height: 47px !important;display:block; width:52px;}
.pagination li a.first span{ width:50px;}
.pagination li a.last{background: url(../images/pagination-bg.png) repeat -98px 0;border: 0 none !important;height: 47px;display:block; width:52px;}
.pagination li a{background: url(../images/pagination-bg.png) no-repeat -47px -47px;border-right: 1px solid #E6E6E6;color: #999;font-size: 22px;font-weight: normal;height: 47px;text-decoration: none; display:block; width:43px;line-height: 47px;text-align: center;}
.pagination li{list-style-type:none !important; display:block; float:left;}
.pagination li a.selected{background: url(../images/pagination-bg.png) repeat -51px 0;height: 47px;display:block; width:43px; color:#fff;}
/*==========Customer Order page==================*/
.backlink{font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#f00; text-align:left; margin:25px auto;}
.standings-disclaimer {font-family:Arial, Helvetica, sans-serif; font-size:16px; text-align:center; width:950px;}
.standings-nav{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; text-align:left; width:475px; float:left; margin:25px auto;}
.rsm-rep-toggle{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; text-align:right; width:475px; float:right; margin:25px auto;}
.rsm-rep-toggle a, .standings-nav a, {color:#f00; text-decoration:underline;}


.customer-infobox{ height:180px; background:url(../images/customer-info-bg.png) repeat-x;}
.info{font-size:16px; line-height:20px; color:#404040; text-align:left; padding:31px 5px; float:left; width: 425px; }
.info span{ font-size:19px; line-height:24px;}
.order-details {position:relative; border:1px solid #d6d6d6; height:107px; width:417px; float:right;margin: 31px 5px;}
.order-details .parent-div {border:1px solid #f5f5f5; background:#fff; height:105px;}
.order-details .corner {background:url(../images/bkg_group_curve.png) no-repeat 0 0; width:5px; height:5px; display:block; position:absolute; top:-1px; left:-1px;}
.order-details .corner.top-right {right:-1px; top:-1px; background-position:100% 0; left:auto;}
.order-details .corner.btm-left {bottom:-1px; top:auto; background-position:0 -7px;}
.order-details .corner.btm-right {bottom:-1px; right:-1px; background-position:100% 100%; top:auto; left:auto;}
.open-order{width:100%; border-bottom:1px solid #ccc; color:#999; font-size:15px;height:46px;padding: 7px 0 0;}
.open-order span{ width:45px; float:left; padding-left:118px;}
.open-order span.amount{float:left; padding-left:35px; width:217px; color:#333; font-size:33px; line-height:33px;}
.open-order span.amount span{ float: left;font-size: 20px;line-height:20px;padding-left: 0;width: 11px;}	
.order-amount{width:100%;color:#999; font-size:15px;height:53px;}
.cfy{ width:206px; float:left;border-right:1px solid #ccc;padding: 7px 0 7px;}
.order-amount span{ width:31px; float:left; padding-left:12px;}
.order-amount span.amount{float:left; padding-left:29px; width:134px; color:#333; font-size:33px; line-height:33px;}
.order-amount span.amount span{ float: left;font-size: 20px;padding-left: 0;width: 11px;}	
.lfy{ width:50%; float:left;padding: 7px 0 7px;}

.details-top{height:85px; width:945px; margin:0 auto;}
.toggle-buttons{ width:230px; height:48px; background:url(../images/day-order-bg.png) no-repeat 0 -110px; margin-top:20px; line-height:48px; float:left; text-transform:uppercase; font-size:12px; font-weight:bold;}
.toggle-buttons a{ display:block; width:50%; float:left; text-align:center;}
.toggle-buttons span{/*text-align:center; padding:0 0 0 23px;*/ color:#fff;/* margin-left:10px;*/}
.toggle-buttons span.sales{text-align:center;/* padding:0 0 0 30px; */color:#636363;}

.day-sorter{ float:right; width:445px; height:49px;margin-top:20px;}
.day-sorter span{ float:left; font-size:14px; padding: 16px 5px;}
.day-sorter .sorter{height: 49px;width:195px; float:left; margin:0 !important; font-size:16px;}
.day-sorter .sorter ul{ margin:0; padding:0;}
.day-sorter .sorter li a.first{background: url(../images/day-order-bg.png) repeat 0 0;height: 49px !important;display:block; width:52px;}
.day-sorter .sorter li a.first span{ width:50px;}
.day-sorter .sorter li a.last{background: url(../images/day-order-bg.png) repeat -98px 0;border: 0 none !important;height: 49px;display:block; width:52px;}
.day-sorter .sorter li a{background: url(../images/day-order-bg.png) no-repeat -47px -56px;border-right: 1px solid #E6E6E6;color: #999;font-weight: normal;height: 49px;text-decoration: none; display:block; width:44px;line-height: 47px;text-align: center;}
.day-sorter .sorter li{list-style-type:none !important; display:block; float:left;}
.day-sorter .sorter li a.selected{background: url(../images/day-order-bg.png) repeat -52px 0;height: 49px;display:block; width:44px; color:#fff;}

.customer-order{}
.customer-order .table-data {border-collapse:collapse; width:100%;}
.customer-order .table-data th {font-size:15px; color:#000; text-align:left; padding:14px 5px; vertical-align:middle; background:none !important;height: 19px;}
.customer-order .table-data .odd td {background:#eee;}
.customer-order .table-data td {font-size:16px; color:#333;vertical-align:middle; text-align:left; height:60px; padding:0 5px;}
.customer-order .order-btn {background: url(../images/button-all-bg.png) no-repeat;padding: 0 0 0 3px;height: 44px; float:left;}
.customer-order .order-btn span{ background: url(../images/button-all-bg.png) no-repeat 100% -46px;display: block;height: 44px;line-height: 44px;padding:0 20px 0 15px !important;color:#fff; text-transform:uppercase; font-size:13px; font-weight:bold; text-align:center;}
/*==========Customer Account page==================*/
.toggle-buttons-new{ width:230px; height:48px; background:url(../images/toggle-btn-bg.png) no-repeat; margin-top:20px; line-height:48px; float:left; text-transform:uppercase; font-size:12px; font-weight:bold;}
.toggle-buttons-new a{ display:block; width:50%; float:left; text-align:center;}
.toggle-buttons-new span{color:#636363;}
.toggle-buttons-new span.sales{color:#fff;}

.day-sorter-new{ float:right; width:280px; height:49px;margin-top:20px;}
.day-sorter-new span{ float:left; font-size:14px; padding:16px 5px;}

.pagination-btn{}
.pagination-btn ul{ margin:0; padding:0;}
.pagination-btn li a.first{background: url(../images/pagination-bg.png) repeat 0 0;height: 47px !important;display:block; width:52px;}
.pagination-btn li a.first span{ width:50px;}
.pagination-btn li a.last{background: url(../images/pagination-bg.png) repeat -98px 0;border: 0 none !important;height: 47px;display:block; width:52px;}
.pagination-btn li a{background: url(../images/pagination-bg.png) no-repeat -47px -47px;border-right: 1px solid #E6E6E6;color: #999;font-size: 22px;font-weight: normal;height: 47px;text-decoration: none; display:block; width:43px;line-height: 47px;text-align: center;}
.pagination-btn li{list-style-type:none !important; display:block; float:left;}
.pagination-btn li a.selected{background: url(../images/pagination-bg.png) repeat -51px 0;height: 47px;display:block; width:43px;}

.top-account-box{}
.top-account-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.top-account-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.top-account-box .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.top-account-box .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.top-account-box .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.top-account-box .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; margin-right:3px;}
.top-account-box .table-data {border-collapse:collapse; width:100%;}
.top-account-box .table-data th {font-size:13px; color:#000; text-align:center;vertical-align:middle; background:none !important;padding:0!important;}
.top-account-box .table-data td.odd {background:#eee;}
.top-account-box .table-data th.odd {background:#eee !important;}
.top-account-box .table-data td {font-size:13px; color:#333; padding:0 8px !important;vertical-align:middle; text-align:right; height:50px;}

.middle-account-box{margin-top: 15px;}
.middle-account-box .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.middle-account-box .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.middle-account-box .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.middle-account-box .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.middle-account-box .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.middle-account-box .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; margin-right:3px;}
.middle-account-box .small-table td.first{background: url(../images/button-all-bg.png) repeat 0 46px;height: 46px;width: 104px;}
.middle-account-box .small-table td.last{background: url(../images/button-all-bg.png) repeat -418px 46px;height: 46px;width: 104px; border:0 !important;}
.middle-account-box .small-table td{background: url(../images/button-all-bg.png) repeat -5px 46px;height: 46px;width: 104px; font-size:15px; color:#fff; font-weight:bold; text-align:center;}
.middle-account-box .small-table th{font-size:13px; color:#666666; font-weight:normal;text-align:center;}
.middle-account-box .small-table{ height:43px; width:833px; margin:0 auto;padding: 15px 0;}

.table-content{ margin-top: 15px;}
.table-content .left-table, .table-content .right-table{ width:465px; float:left; margin-left:5px;}
.left-table .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.left-table .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.left-table .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.left-table .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.left-table .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.left-table .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:10px 4px 10px 0; margin-right:3px;}
.left-table .table-data {border-collapse:collapse; width:100%;}
.left-table .table-data th {background:none !important; font-size:13px; color:#333; text-align:left; padding:0 15px !important; vertical-align:middle; height:53px; width:auto;}
.left-table .table-data .odd td {background:#eee;}
.left-table .table-data td {font-size:13px; color:#333; padding:0 15px !important; vertical-align:middle; text-align:right; height:55px;}

.summary{}
.sales, .shop-sales, .last-field-sales{ margin-top:11px;}
.right-table .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.right-table .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.right-table .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.right-table .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.right-table .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.right-table .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0px 4px 0px 0; margin-right:3px;}
.right-table .table-data {border-collapse:collapse; width:100%;}
.right-table .table-data th {background:none !important; font-size:13px; color:#333; text-align:right; padding:0px 25px 0 0 !important; vertical-align:middle; height:53px; width:auto;}
.right-table .table-data .odd td {background:#eee; text-align:right;}
.right-table .table-data td {font-size:13px; color:#333; padding:0px 25px 0 0 !important; vertical-align:middle; text-align:right; height:55px;}
.right-table .table-data td.right{ text-align:right !important; padding:0 20px 0 0!important;}

.right-table .sales .table-data td.right{ text-align:right !important; padding:0 55px 0 0!important; width:100px;}
.right-table .last-field-sales .table-data td{ height:28px !important; text-align:left; padding:0 25px !important;}


/*==========Standings Home==================*/


.standings-home-content{ margin-top: 15px;}
.standings-home-content .left-side { width:475px; float:left; }
.standings-home-content .right-side { width:475px; float:right; }

.standings-home-content .right-side .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.standings-home-content .right-side .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.standings-home-content .right-side .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.standings-home-content .right-side .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.standings-home-content .right-side .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.standings-home-content .right-side .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0px 4px 0px 0; margin-right:3px;}

.standings-home-content .right-side .table-data {border-collapse:collapse; width:100%;}
.standings-home-content .right-side .table-data th {background:none !important; font-size:13px; color:#333;  padding:0px 25px 0 25px !important; vertical-align:middle; height:53px; width:auto;}
.standings-home-content .right-side .table-data .odd td {background:#eee;}
.standings-home-content .right-side .table-data td {font-size:13px; color:#333; padding:0px 25px 0 25px !important; vertical-align:middle; height:60px;}
.standings-home-content .right-side .table-data td.right{ !important; padding:0 20px 0 0!important;}

.right-side .sales .table-data td.right{ !important; padding:0 60px 0 0!important; width:100px;}
.right-side .last-field-sales .table-data td{ height:28px !important; padding:0 25px !important;}

.standings-home-content .left-side .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.standings-home-content .left-side .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.standings-home-content .left-side .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.standings-home-content .left-side .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.standings-home-content .left-side .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.standings-home-content .left-side .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0px 4px 0px 0; margin-right:3px;}

.standings-home-content .left-side .table-data {border-collapse:collapse; width:100%;}
.standings-home-content .left-side .table-data th {background:none !important; font-size:13px; color:#333;  padding:0px 25px 0 25px !important; vertical-align:middle; height:53px; width:auto;}
.standings-home-content .left-side .table-data .odd td {background:#eee;}
.standings-home-content .left-side .table-data td {font-size:13px; color:#333; padding:0px 25px 0 25px !important; vertical-align:middle; height:60px;}
.standings-home-content .left-side .table-data td.right{ !important; padding:0 20px 0 0!important;}

.left-side .sales .table-data td.right{ !important; padding:0 60px 0 0!important; width:100px;}
.left-side .last-field-sales .table-data td{ height:28px !important; padding:0 25px !important;}




/*==========Standings==================*/
table.tablesorter thead tr .header {
background-image: url(../images/bg2.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(../images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(../images/desc.gif);
}

.standings-content{ margin-top: 15px;}
.standings-content .left-side { width:260px; float:left;}
.standings-content .right-side { width:690px; float:right;}

.right-side .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.right-side .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.right-side .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.right-side .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.right-side .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.right-side .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0px 4px 0px 0; margin-right:3px;}

.right-side .table-data {border-collapse:collapse; width:100%;}
.right-side .table-data th {background:none !important; font-size:13px; color:#333;  padding:0px 25px 0 25px !important; vertical-align:middle; height:53px; width:auto;}
.right-side .table-data .odd td {background:#eee;}
.right-side .table-data td {font-size:13px; color:#333; padding:0px 25px 0 25px !important; vertical-align:middle; height:60px;}
.right-side .table-data td.right{ !important; padding:0 20px 0 0!important;}

.right-side .sales .table-data td.right{ !important; padding:0 60px 0 0!important; width:100px;}
.right-side .last-field-sales .table-data td{ height:28px !important; padding:0 25px !important;}



/*==========Sales order Details==================*/
.invoice-box{ background:url(../images/invoice-box-bg.png) top repeat-x; height:40px;}
.invoice-infobox{ width:100%;}
.invoice-infobox .top-dark {background:url(../images/bkg_rounded_box.png) no-repeat 0 0; height:39px; padding-left:12px;}
.invoice-infobox .top-dark span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -50px; height:39px; display:block; color:#fff; font-size:18px; text-align:center; line-height:39px; text-transform:uppercase;}
.invoice-infobox .btm-curve {background:url(../images/bkg_rounded_box.png) no-repeat -1px -108px; height:12px; padding-left:12px; margin-left:2px;}
.invoice-infobox .btm-curve span {background:url(../images/bkg_rounded_box.png) no-repeat 100% -120px; height:12px; display:block; margin-right:1px;}
.invoice-infobox .left-shade {background:url(../images/bkg_mid_left_shade.png) repeat-y 0 0; padding-left:4px; margin-left:2px;}
.invoice-infobox .right-shade {background:url(../images/bkg_mid_shade.png) repeat-y 100% 0; padding:0px 4px 0px 0; margin-right:3px;}

.invoice{ padding:20px; height:295px;}
.invoice .info{font-size:14px; color:#404040; text-align:left; padding:0 0 0 14px; float:left;width: 254px; line-height:25px;}
.invoice .info span{ font-size:23px; clear:both;}
.invoice .info span a {color:#333;}
.invoice .info span.big{ font-size:18px;}
.invoice .subscribe{padding: 0 0 0 14px;float: right;width: 180px;}
.invoice .subscribe img{ margin-bottom:5px;}

.invoice-history{ width:400px; float:left; padding-top:15px;}
.invoice-history .title{ font-size:20px; text-align:left; color:#333;}
.invoice-history .invoice-data th{font-size:15px; color:#999; text-align:left; padding:2px 40px 2px 0;}
.invoice-history .invoice-data td{ font-size:19px; color:#333; text-align:left;padding:2px 40px 2px 0;}

.contact{ width:325px; float:left;padding-top:15px; padding-left:46px;}
.contact-text{ font-size:15px; color:#999;}
.contactspan.big{font-size:28px; color:#333;}
.contact span{ font-size:23px; color:#333;line-height: 35px;clear: both;display: block;}

.invoice .order-details {position:relative; border:1px solid #d6d6d6; height:131px; width:418px; float:left;margin: 0px 5px;}
.invoice .order-details .parent-div {border:1px solid #f5f5f5; background:#fff; height:131px;}
.invoice .order-details .corner {background:url(../images/bkg_group_curve.png) no-repeat 0 0; width:5px; height:5px; display:block; position:absolute; top:-1px; left:-1px;}
.invoice .order-details .corner.top-right {right:-1px; top:-1px; background-position:100% 0; left:auto;}
.invoice .order-details .corner.btm-left {bottom:-1px; top:auto; background-position:0 -7px;}
.invoice .order-details .corner.btm-right {bottom:-1px; right:-1px; background-position:100% 100%; top:auto; left:auto;}

.top-row{width:100%;color:#999; font-size:15px;height:53px;}
.inner-div .open-order, .inner-div .order-amount{width:100%; border-bottom:1px solid #ccc;  font-size:15px; color:#333; height:65px !important; padding:0 !important;}
.inner-div .open-order .column { width:207px; float:left;height:60px !important; border-right:1px solid #ccc; padding-top:5px;}
.inner-div .open-order .column { width:207px; float:left;height:60px !important; border-right:1px solid #ccc; padding-top:5px;}
.inner-div .open-order .column.last{border-right:0px !important;}

.inner-div .open-order .column span{ width:100%; padding-left:0px; text-align:center; display:block;}
.inner-div .open-order .column span.big{ font-size:18px; color:#333; line-height:25px;}

.order-amount .column{width:33%; float:left; height:55px; border-right:1px solid #ccc;padding-top:10px;}
.order-amount .column.last{border-right:0px !important;}
.order-amount .column span{width:100%; padding-left:0px; text-align:center;}
.order-amount .column span.big{font-size:18px; color:#333; text-transform:uppercase; padding-top:5px;}

.tab-btn{ margin-top: 14px; height:44px; text-align:left;}
.item-box{background:#313131 url(../images/bottom-bg.jpg) top repeat-x; width:100%;height:auto; padding:20px 0 0;}
.item-box .box-container {width:1000px; margin:0 auto;}
.item-box, #footer-new, #top-header, #footer {min-width:1000px;}

.team-print{ background:url(../images/team-print-bg.png) top no-repeat;height: 449px !important; position:relative;}
.required-team{ background:url(../images/required-box-bg.jpg) top no-repeat; height: 253px !important; position:relative}  
.non-decorated{ background:url(../images/non-decorated-bg.jpg) top no-repeat; height: 385px !important; position:relative;}
.order-background{background:url(../images/background-box-img.png) top no-repeat; height:832px !important; position:relative;}
.active-btn {position:absolute; right:27px; bottom:100px; width:235px; text-align:right; }
.active-btn1 {position:absolute; bottom:42px; right:27px; width:235px; text-align:right;}
.non-decorated .active-btn {bottom:210px}
.non-decorated .active-btn1 {bottom:135px;}
.non-decorated .active-btn2 {position:absolute; right:27px; bottom:60px; text-align:right}

.left, .middle-text, .right{ font-size:16px; height:33px; line-height:16px; width:auto; display:block; float:left; padding:0 36px;}
.left {width:155px;}
.middle-text {width:425px;}

.right{ text-align:right;}
.middle-text span, .right span{ color:#e51937; text-transform:uppercase; padding-left:5px;}

.expand-contents { background:url(../images/toggle-bg.jpg) repeat-x; height:77px;}
.expand-contents td{ padding:8px 10px;width: 88px;}
.expand-contents table{ margin-left:50px;}
.box-content{ width:100%; margin:0 auto;}
#expand .expand{ width:500px; float:left;}

.team-print-box .bottom .bottom-content{ width:900px; margin:0 auto;}
.team-print-box1 .bottom .bottom-content{ width:900px; margin:0 auto;}
.bottom .bottom-content .middle, .bottom .bottom-content .last, .bottom-content .total{ float:left; padding:5px 56px 0 0; font-size:16px; line-height:30px;color:#333; text-align:left;}
.bottom .bottom-content .last{ float:left; padding:5px 21px 0 0; font-size:16px; line-height:30px;color:#333; text-align:right;}
.hide-text{ font-size:16px; line-height:16px; color:#333; text-transform:uppercase;}
.team-print-box .bottom-content .total{ background:url(../images/total-bg.png) no-repeat; float: right; height:70px; width:156px; padding:0 !important; text-align:center !important;}
.team-print-box .bottom-content .total span{ text-align:center; vertical-align:top; line-height:25px;}
.team-print-box .bottom-content .total span span.subtotal{ font-size:36px; line-height:36px;}


.team-print-box .total-content .total{ float:left; padding:5px 56px 0 0; font-size:16px; line-height:30px;color:#333; text-align:left;}
.team-print-box .total-content .total{ background:url(../images/total-bg.png) no-repeat; float: right; height:70px; width:156px; padding:0 !important; text-align:center !important;}
.team-print-box .total-content .total span{ text-align:center; vertical-align:top; line-height:25px;}
.team-print-box .total-content .total span span.subtotal{ font-size:36px; line-height:36px;}



.team-print-box1 .bottom .bottom-content .last{ text-align:right;}
.bottom-content .last span{ background:url(../images/round-bg.png) no-repeat;height:30px; display:block; padding-right:30px;}
.bottom-content .last span.team{ background-position:100% 6px;}
.bottom-content .last span.high{ background-position:100% -21px;}
.bottom-content .last span.arcadia{ background-position:100% -48px;}
.team-print-box1 .bottom-content .total{ background:url(../images/total-bg.png) no-repeat; float: right; height:70px; width:156px; padding:0 !important; text-align:center !important;}
.team-print-box1 .bottom-content .total span{ text-align:center; vertical-align:top; line-height:25px;}
.team-print-box1 .bottom-content .total span span.subtotal{ font-size:36px; line-height:36px;}
.team-print-box1 .bottom .bottom-content{ width:760px;}
.team-print-box1 .bottom .bottom-content .middle, .team-print-box1 .bottom .bottom-content .last, .team-print-box1 .bottom-content .total{ float:left; padding:5px 63px 0 0; font-size:16px; line-height:30px;color:#333; text-align:left;}
.team-print-box1 .bottom .bottom-content .last{ float:left; padding:5px 21px 0 0; font-size:16px; line-height:30px;color:#333; text-align:right;}
.team-print-box1 .bottom-content .total{ float:right !important;margin-top: 14px;}
.team-print-box1 .expand-colleps .bottom .bottom-content{ padding:6px 0; height:77px; float:right; margin-right: 47px;}


.detail-sum {float:right; margin-top:20px; margin-right:33px;}
.detail-sum .total { font-size:16px; line-height:30px;color:#333;}
.detail-sum .total span{ text-align:center; vertical-align:top; line-height:25px;}
.detail-sum span span.subtotal{ font-size:36px; line-height:36px;}


.expand-colleps {clear:both}
.expand-colleps .top {background:url(../images/bkg_big_top_crv.png) no-repeat top; padding:0 30px 0 35px;}
.expand-colleps .bottom {background:url(../images/bkg_big_btm_crv.png) no-repeat bottom; height:131px;}
.expand-colleps .bottom .bottom-content{ padding:15px 0; height:77px; float:right; margin-right: 47px;}
.expand-colleps .main-content {background:url(../images/bkg_middle_content.png) repeat-y top;}
.team-print-box .expand-colleps .bottom {background:url(../images/bkg_big_btm_crv.png) no-repeat bottom; height:80px;}
.team-print-box .expand-colleps .bottom .bottom-content{ padding:10px 0 15px 0; height:71px; float:right; margin-right: 47px;}

.team-print-box1 .team-table th{color: #333;font-size: 16px;font-weight: normal;line-height: 16px;padding: 5px 0;}
.team-table th{ color: #333;font-size: 16px;font-weight: normal;line-height: 16px;padding: 5px 0px;}
.team-table th.last{ color: #333;font-size: 16px;font-weight: normal;line-height: 16px;padding:5px 15px 5px 0;}
.team-print-box {width:1024px; margin:0 auto; }
.team-print-box1 {width:1024px; margin:0 auto; }
.team-print-box1 .top div {color:#fff;}
.team-print-box .top div {color:#fff;}
.team-print-box1 .left{width:150px;}
.team-print-box1 .middle-text{width:350px;}
.team-print-box1 .right{width:255px;}

.read-more, .read-more1{ background:url(../images/hide-show-btn.png) no-repeat 0 0; width:49px; display:block; height:49px; font-size:0; text-indent:-10000px;}
.read-less{ background:url(../images/hide-show-btn.png) no-repeat 100% -49px; width:49px; display:block; height:49px;}


td, th{ border:none !important;}
.team-table{width:100%; border:0px !important; border-collapse:collapse;}
.team-table .row{}
.team-table thead{ height:33px;}
.team-table .row td{ padding:5px 0; font-size:16px; line-height:22px; color:#333;}
.team-table .row td.a-left{ padding:11px 0 0 0px !important;}
.team-table .row td.toggle-bt{ padding:11px 0 0 11px !important;}

col.small{ width:55px !important;}


.expand-colleps .order-btn{background: url(../images/customer-btn-bg.png) no-repeat;padding: 0 0 0 7px;height: 44px; display:block; width: 200px;}
.expand-colleps .order-btn span{ background: url(../images/customer-btn-bg.png) no-repeat 100% -44px;display: block;height: 44px;line-height: 44px;padding:0 11px 0 7px;color:#fff; text-transform:uppercase; font-size:16px;text-align:center;}

.contact .order-btn{background: url(../images/customer-btn-bg.png) no-repeat;padding: 0 0 0 7px;height: 44px; display:block; width: 150px;}
.contact .order-btn span{ background: url(../images/customer-btn-bg.png) no-repeat 100% -44px;display: block;height: 44px;line-height: 44px;padding:0 11px 0 7px;color:#fff; text-transform:uppercase; font-size:16px;text-align:center;}

.bottom-text { width:950px; margin:0 auto; padding:25px 0; height:220px;}
.notes{ width:515px; float:left; margin-top:20px; padding:0 0 0 20px;}
.bottom-text h4 {color:#000; font-weight:normal; color:#333; margin-bottom:5px;}
.bottom-text p {font-size:12px; line-height:20px; color:#333;}
.decorated-btn2{position: relative;right: -347px;top: -169px;width: 235px !important;}

#footer-new{ width:100%;height:110px; background:url(../images/footer-bg.png) repeat-x;}

.seles:after, .tracking-title:after, .bottom-text:after, .bottom-content:after, .top:after, .day-sorter:after, .toggle-buttons;after, .pagination:after, .invoice:after {display:block;content:".";clear:both;font-size:0;line-height:0;height:0;overflow:hidden}

/*Tracking Popup*/
.tracking-popup {background:url(../images/bkg_popup.png) no-repeat 0 0; width:1000px; height:860px; clear:both; position:absolute; z-index:9; left:50%; top:10%; margin:0 0 0 -500px;}
.tracking-popup .tracking-title {width:960px; margin:5px auto;}
.tracking-popup .tracking-title h3 {color:#fff; font-weight:normal; font-size:28px; line-height:65px; padding:0 25px; float:left;}
.tracking-popup .close {background:url(../images/bkg_close.png) no-repeat top; width:48px; height:48px; display:block; float:right; margin:8px 30px 0 0;}
.tracking-popup p.order-no {float:left; margin:60px 0 0 110px!important; clear:both;}
.shipment-info {float:right; width:345px; margin:22px 30px 0 0;}
.shipment-info label {font-size:15px; color:#999; display:block; margin-bottom:15px;}
.shipment-info p, .tracking-popup p.order-no {margin:0 0 30px; font-size:23px; color:#000; line-height:32px;}
.overlay {background:url(../images/bkg_tranparent.png) repeat 0 0; width:100%; height:100%; position:fixed; left:0; top:0; z-index:1;}


.reveal-modal-bg { 
position: fixed; 
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0; 
}

.reveal-modal {
visibility: hidden;
top: 100px; 
left: 50%;
margin-left: -484px;
width: 960px;
background: #eee url(../images/modal.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}

.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
} 

Open in new window

0
Comment
Question by:P-Daddy
3 Comments
 

Author Comment

by:P-Daddy
ID: 39943486
I want the PO Number to stay in the PO Number box.
0
 
LVL 25

Accepted Solution

by:
Shaun Kline earned 250 total points
ID: 39943517
Would using "word-wrap: break-word" work?

Here's a description of this at w3School:
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 250 total points
ID: 39943778
Try using "word-break: break-all;". Reference material
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
radio button value 3 45
Paper tearing animation 6 39
CSS Columns on Slider Mobile 4 22
Gradient CSS 4 0
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now