Hi from 11 degrees C Wakefield UK 
On this page - http://www.pauserefreshment.co.uk/la-spaziale-s5-manual.html all i want to do is split the list items so they line up like this:
-
* -
* -
* -
*
and not like this -
The manual with I am putting together has tonnes of very long lists which I need to learn how to split. Could use a table but only if no css solution presents its self.
So my question is how when your allreading working with a single column can you create two? I hope Ive explained this ok, here is is the offending code -
<!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 NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("spaz", "9.0.0");
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script> jQuery.noConflict(); // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $('someid').hide(); </script>
<script type="text/javascript">jQuery(document).ready(function(){
jQuery( '#menu > li > ul' )
.hide()
.click(function( e ){
e.stopPropagation();
});
jQuery('#menu > li').toggle(function(){
jQuery(this).find('ul').slideDown();
}, function(){
jQuery( this ).find('ul').slideUp();
});
});
</script>
<title>La Spaziale s5 manual - The official La Spaziale instruction manual</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">
<style type="text/css" media="all">
@import "css/product_detail.css";
</style>
</head>
<body>
<div id="pagewidth">
<div id="header">
<p> <a href="index.html"> Pause </a> </p>
<ul>
<li> <a href="whoweare.html" class="who"> who we are... </a> </li>
<li> <a href="ourrange.html" class="our"> our range... </a> </li>
<li> <a href="happycustomers.html" class="happy"> happy customers... </a> </li>
<li> <a href="talktous.html" class="come"> come & say hello... </a> </li>
<li> <a href="hotel_coffee_machines.html" class="useful"> useful things...</a> </li>
<li> <a href="office_coffee_machines.html" class="on-line"> on-line shop... </a> </li>
<li> <a href="shop_coffee_machines.html" class="show"> show you care... </a> </li>
</ul>
</div>
<div id="main">
<div id="content">
<div class="left">
<h1 class="orange"><a name="Top" id="Top"></a>La Spaziale s5 manual - the official Instruction and maintenance guide</h1>
<p>"If you've just wheeled in a La Spaziale s5 traditional coffee machine into your cafe you'll need a copy of the official La Spaziale S5 manual and we've got it right here.</p>
<img src="images/model_bean/la_spaziale_manual_500_2.jpg" alt="La Spaziale s5 Manual" />
<p class="orange">Section 1 : General La Spaziale s5 notes
</h2>
<p><a href="#">1.1 Plates</a></p>
<p>1.2 General warnings</p>
<p>1.3 Machine outfit</p>
<p>1.4 Safety rules</p>
<p class="index_end" >1.5 Arrangements for installation made by the user</p>
<p class="orange">Section 2: Starting and setting of the s5 La Spaziale</p>
<p>2.1 Starting</p>
<p>2.2 Alarms description</p>
<p class="index_end">2.3 Regular maintenance of the equipment made by the user</p>
<p class="orange">Section 3: Components of the La Spaziale s5</p>
<p class="index_end">3.1 Components</p>
<p>1.1 Plates</p>
<p><a href="images/model_bean/002_spaz_s5_plates_500.jpg" rel="lightbox" title="La Spaziale S5 plates"><img src="images/model_bean/002_spaz_s5_plates.jpg" alt="La Spaziale s5 plates" /></a></p>
<p>1.2 general warnings</p>
<p><img class="warning" src="images/model_bean/warning.jpg" width="30" height="25" />WARNING!</p>
<p>The electric system, the water system including the water drain , the possible gas system (in case
the machine is prearranged for gas) should already be provided as needed by the customer in order
to allow the proper installation of the machine. The installer is not allowed to modify the existing
system prearranged by the customer. See the chapter 1.5 “Arrangements for installation made by
the customer”.</p>
<p><img class="warning" src="images/model_bean/warning.jpg" width="30" height="25" />WARNING!</p>
<p>The appliance must be installed where use and maintenance are restricted to qualified staff.</p>
<p>1.3 MACHINE OUTFIT</p>
<ul>
<li>A - 1 set of filterholders with spouts</li>
<li>B - 1 complete set of flexible water hoses for connection to water mains</li>
<li>C - 2 sets of filters</li>
<li>D - 1 set of shower heads</li>
<li>E - 1 tool to remove shower heads</li>
<li>F - 1 brush</li>
<li>G - 1 motorpump (if not built-in)</li>
<li>H - 1 manual coffee tamper</li>
</ul>
<div style="clear:both"></div>
<p class="caption">La Spaziale S5 image gallery - "click and browse"</p>
<div class="machinegallery"><a href="images/model_bean/la_spaziale_s5_gold_400_219.jpg" rel="lightbox[group]" title="La Spaziale S5 in gold available from pause..."><img src="images/model_bean/la_spaziale_s5_gold_100_100.JPG"alt="" width="100" height="100" /></a><br>
<p class="caption">Gold finish</p>
</div>
<div class="machinegallery"><a href="images/model_bean/heat_exchanger_317_224.jpg" rel="lightbox[group]" title="Constant temperature at the Group Head"><img src="images/model_bean/heat_exchanger_100_100.jpg"" alt="" width="100" height="100" /></a><br>
<p class="caption">Boiler</p>
</div>
<div class="machinegallery"><a href="images/model_bean/la_spaziale_s5_rear_400_232.jpg" rel="lightbox[group]" title="Cool retro design"><img src="images/model_bean/la_spaziale_s5_rear_100_100.jpg" /></a><br>
<p class="caption">Rear view</p>
</div>
<div class="machinegallery"><a href="images/model_bean/la_spaziale_s5_side_400_413.jpg" rel="lightbox[group]" title="Sleek retro side profile"><img src="images/model_bean/la_spaziale_S5_side_100_100.jpg" alt="" width="100" height="100" /></a><br>
<p class="caption">Side view</p>
</div>
<div class="machinegallery"> <a href="images/model_bean/la_spaziale_multi_group_300_348.jpg" rel="lightbox[group]" title="2 - 4 group options available"><img src="images/model_bean/la_spaziale_multi_group_100_100.jpg" alt="" width="100" height="100"></a><br>
<p class="caption">Groups</p>
</div>
<h2 class="orange2">What sort of pace can the La Spaziale S5 traditional coffee machine handle?</h2>
<p><img class="free" src="images/barista_bits/coffee_menu.jpg" alt="Eye catching flavour choice" /></p>
<p>Be in no doubt, when your rent a La Spaziale S5 traditional coffee machine from pause... your Café or restaurant will commercially benefit from the speed and quality of espresso this Italian coffee machine thoroughbred serves up:</p>
<p class="performance"><strong>Performance profile of the La Spaziale S5 traditional coffee machine</strong></p>
<ul>
<li class="espresso">250 espressos per day</li>
<li class="cappuccino">200 cappuccinos per day</li>
</ul>
<div style="clear:both"></div>
<h3 class="orange2">La spaziale S5 traditional coffee machine on YouTube.</h3>
<p>Ok we'll be honest, the below YouTube La Spaziale S5 traditional coffee machine vid is definately not going to grab headlines at the Cannes film festival but its worth a peek just to see the machine in motion .</p>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="425" height="344" id="spaz">
<param name="movie" value="http://www.youtube.com/v/JxTduZt88lw&andhl=en_GB&andfs=1&andrel=0" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/JxTduZt88lw&andhl=en_GB&andfs=1&andrel=0" width="425" height="344">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div style="clear:both"></div>
<h5 class="orange2">If there's one thing you need to rely on when it comes to serving up quality espresso its temperature control. </h5>
<p><a href="images/model_bean/heat_exchanger_317_224.jpg" rel="lightbox" title="Italian syling engineering excelence"><img class="float_image" src="images/model_bean/heat_exchanger_la_spaziale_150_150.jpg" alt="professional coffee machine - Schaerer Siena 2" /></a>Any professional barista will tell you
water temperature can vary as demand
fluctuates throughout the day and that can proove detrimental
to any one serious about serving up
consistently high grade espresso.
However thanks to La Spaziale's patented
solution for maintaining a constant water
temperature via steam inconsistent espresso
coffee is no longer a concern.
<div style="clear:both"></div>
<h5 class="orange2">La Spaziale S5 <span class="stars">special features</span> designed only to serve up an elite coffee experience</strong>.</h5>
<ul>
<li class="green_tick">Volumetric Shot Dosing </li>
<li class="green_tick">Automatic boiler fill</li>
<li class="green_tick">Includes 3 portafilters (2 Doubles and 1 Single) </li>
<li class="green_tick">Electronic boiler temperature control </li>
<li class="green_tick">Built in rotary pump </li>
<li class="green_tick">Electric cup warmer </li>
<li class="green_tick">2 Stainless steel swivel steam arms</li>
<li class="green_tick">Hot water tap </li>
</ul>
<div style="clear:both"></div>
<h6 class="orange2">How big is the La Spaziale S5 EK - EP traditional coffee machine?</h6>
<p><img class="free" src="images/model_machine/tape_2.jpg" alt="Terry our professional coffee mechanic says Ey up" width="150" height="150" />Another drop dead gorgeous Italian traditional espresso coffee machine from La Spaziale the S5 class is a guaranteed head turner with compact dimensions: W = 770 mm (2 group)1000mm (3 group), D = 530 mm (2 & 3 Group), H = 520 mm (2 & 3 Group) Weight: 65 kg (2 group) 80 kg (3 group)</p>
<ul>
<li class="arrow_up">Height 520mm</li>
<li class="arrow_flat">Width 770mm 2 group / 1000mm 3 group</li>
</ul>
<p> </p>
<div style="clear:both"></div>
<h6 class="orange2">How do I get hold of the La Spaziale S5 coffee machine?</h6>
<p class="type"><img class="free" src="images/delivery/van.jpg" width="150" height="150" alt="professional coffee machine delivery"/>To rent a La Spaziale S5 coffee machine call Suzy on <b>01924 363091 </b> or eMail <a href="mailto:david@pause.co.uk;hello@pause.co.uk"><b>suzy@pause.co.uk </b></a>or if you have time fill in the form below and we'll get right back to you :-)</p>
<div style="clear:both"></div>
<p class="print"><a href="#Top">↑ Back to Top</a></p>
<p class="print"><a href="#" onclick="window.print();return false;">Print friendly version</a></p>
<form action="submitform.php" method="post" name="askusaquestion">
</form>
<form action="submitform.php" method="post" name="askusaquestion">
<input type="hidden" name="form" value="2" />
<table class="form">
<caption>
Get me a La Spaziale S5 quote
:-)
</caption>
<tr>
<td>*Name</td>
<td><input name="name" type="text" size="20" /></td>
</tr>
<tr>
<td>Position</td>
<td><input name="position" type="text" size="20" /></td>
</tr>
<tr>
<td>*Company</td>
<td><input name="company" type="text" size="20" /></td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" cols="20" rows="2"></textarea></td>
</tr>
<tr>
<td>*Postcode</td>
<td><input name="postcode" type="text" size="20" /></td>
</tr>
<tr>
<td>*Telephone</td>
<td><input name="telephone" type="text" size="20" /></td>
</tr>
<tr>
<td>*Email</td>
<td><input name="email" type="text" size="20" /></td>
</tr>
<tr>
<td>Existing customer</td>
<td><label>
<input type="radio" name="existing" value="1" id="RadioGroup1_0" />
Yes</label>
<br />
<label>
<input type="radio" name="existing" checked="checked" value="0" id="RadioGroup1_1" />
No</label>
<br />
</td>
</tr>
<tr>
<td>Customer account number</td>
<td><input name="accountnumber" type="text" size="20" /></td>
</tr>
<tr>
<td>*Nature of question</td>
<td><select name="natureofquestion" size="0">
<option>please select...</option>
<option>Need a quote</option>
<option>equipment</option>
<option>ingredients</option>
<option>admin</option>
<option>deliveries</option>
<option>accounts</option>
<option>my account manager</option>
<option>customer service</option>
<option>other</option>
</select></td>
</tr>
<tr>
<td>*Question </td>
<td><textarea name="question" cols="20" rows="5"></textarea></td>
</tr>
<tr>
<td>When is the best time to call you? </td>
<td><input name="calltime" type="text" size="20" /></td>
</tr>
</table>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Our range nav -->
<div id="sidebar">
<ul>
<li class="activeyellow"> <a href="ourrange.html"> our coffee machine range :-)<span style="dotsyellow">... </span> </a>
<ul>
<li> <a href="office_coffee_machine_darenth_style_5.html" title="Perfect office coffee machine"> Darenth Style 5 - Instant</a><span style="dotsyellow">...</span> </li>
<li> <a href="franke_evolution_coffee_machine.html"> FRANKE Evolution - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
<li> <a href="flavia_creation_400.html"> Flavia 400 - Filter</a><span style="dotsyellow">...</span> </li>
<li> <a href="franke_coffee_machine.html"> FRANKE Flair - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
<li> <a href="cafe_coffee_machines.html"> Fresh Ground 310 - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
<li> <a href="koro_coffee_machine.html"> Koro - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
<li> <a href="bean_to_cup_coffee_maker_la_cimbali_M1.html"> La Cimbali M1 - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
<li> <a href="traditional_coffee_machine_la_spaziale_s5.html" title="Traditional coffee machine"> La Spaziale S5 - Traditional</a><span style="dotsyellow">...</span> </li>
<li> <a href="traditional_coffee_machine_la_spaziale_special.html" title="Traditional coffee machine"> La Spaziale Special - Traditional</a><span style="dotsyellow">...</span> </li>
<li> <a href="mondo2_coffee_machine.html"> Mondo 2 - Filter</a><span style="dotsyellow">...</span> </li>
<li> <a href="qwikbrew_coffee_machine.html"> Qwikbrew - Filter</a><span style="dotsyellow">...</span> </li>
<li> <a href="bean_to_cup_coffee_maker_schaerer_siena_2.html" title="bean to cup coffee maker"> Schaerer Siena 2 - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
<li> <a href="pump_coffee_machine.html"> Therm - Filter</a><span style="dotsyellow">...</span> </li>
<li> <a href="vision_coffee_machine.html"> Vision 400 - Instant</a><span style="dotsyellow">...</span> </li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id ="menu">
<li class="activeyellow"><a href="#" title="Beans for coffee machines">Buy Coffee beans...</a>
<ul class="active">
<li><a href="bean_to_cup_coffee_machine_beans_buena_venta.html" title="Coffee beans for traditional coffee machines">Buena Venta...</a></li>
<li><a href="traditional_coffee_machine_beans_latin_espresso.html" title="Coffee beans for traditional coffee machines">Latin Espresso...</a></li>
<li><a href="cafeology_fairtrade_mocha_java_beans.html" title="Coffee beans for traditional coffee machines">Mocha Java...</a></li>
<li><a href="traditional_coffee_machine_beans_triple_cert.html" title="Coffee beans for traditional coffee machines">Triple cert...</a></li>
<li><a href="traditional_decaffeinated_coffee_machine_beans.html" Title="Coffee beans for traditional coffee machines">Decaff...</a></li>
</ul>
</li>
<li class="activeyellow"><a href="#">Barista accessories...</a>
<ul>
<li><a href="traditional_coffee_machine_professional_accessories.html">Barista tools...</a></li>
</ul>
</li>
<li class="activeyellow"><a href="#">About Us...</a>
<ul>
<li><a href="ouringredients.html">Our ingredients...</a></li>
<li><a href="largeorganisations.html">Large organisations...</a></li>
<li><a href="specialoffer.html">Special offer...</a></li>
<li><a href="pausepromise.html">Pause promise...</a></li>
</ul>
</li>
</ul>
</ul>
</ul>
</div>
</div>
<div id="footer">
<ul>
<li><a class="special" href="index.html">Home</a></li>
<li><a class="special" href="pressreleases.html">Press</a></li>
<li><a class="product" href="largeorganisations.html">Large Organisations</a></li>
<li><a class="product" href="/pdf/large_organisations.pdf">Brochure</a></li>
<li><a class="new" href="legal.html">Legal</a></li>
<li><a class="our" href="pausepromise.html">pause promise</a></li>
<li><a class="" href="supportingyourworld.html">Show you care</a></li>
<li><a class="special" href="index.html">Copyright 2008 © pause</a></li>
</ul>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-4432210-1";
urchinTracker();
</script>
</body>
</html>
body {
margin:0;
background:url(../images/bg-body.gif) repeat-x 0 0;
font:11px Arial, Courier, Helvetica, sans-serif;
color:#712453;
min-width:985px;
border: 0px solid #702453;
}
img {
border:none;
display:block;
}
a {
color:#702453;
text-decoration:underline;
}
a:hover {
text-decoration:underline;
}
#pagewidth {
width:985px;
margin:0 auto;
overflow:hidden;
position:relative;
}
#header {
height:130px;
width:985px;
overflow:hidden;
}
#header p {
margin:0;
position:absolute;
top:13px;
left:18px;
}
#header p a {
display:block;
overflow:hidden;
text-indent:-9999px;
width:207px;
height:103px;
background:url(../images/logo_go_home.gif);
}
#header .plain {
display:block;
overflow:hidden;
text-indent:-9999px;
width:207px;
height:103px;
background:url(../images/logo_athome.gif);
z-index:5;
}
#header ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:12px;
left:244px;
}
#header ul li {
float:left;
}
#header ul li a {
display:block;
overflow:hidden;
text-indent:-9999px;
height:120px;
background-image:url(../images/text-topnav10.jpg);
background-repeat:no-repeat;
}
#header ul li a.who {
width:91px;
background-position:0 0;
margin:0 12px 0 0;
}
#header ul li a.our {
width:93px;
background-position:-91px 0;
margin:0 7px 0 0;
}
#header ul li a.happy {
width:105px;
background-position:-184px 0;
margin:0 5px 0 0;
}
#header ul li a.come {
width:103px;
background-position:-289px 0;
margin:0 9px 0 0;
}
#header ul li a.useful {
width:93px;
margin:0 14px 0 0;
background-position:-392px 0;
}
#header ul li a.on-line {
width:94px;
margin:0 13px 0 0;
background-position:-485px 0;
}
#header ul li a.show {
width:95px;
background-position:-579px 0;
}
#main {
width:100%;
overflow:hidden;
}
#zoom {
width:0;
padding-top:3px;
float: left;
}
/* Image gallery ///////////////////////////////////////////////////////////////////*/
.machinegallery {
float: left;
width: 100px;
border: 1px solid #999;
margin: 0 30px 15px 0;
padding: 5px;
}
#content .machinegallery a img {
width: 100px;
height:100px;
border: none;
margin: 0px;
padding: 0px;
}
#content .float_image {
float:left;
padding-left:2%;
height:150px;
width:150px;
padding-bottom:-1px;
}
#content .caption {
text-align:center;
padding-bottom:5px;
font-weight:bold;
}
#content a img {
border:0 solid #000000;
height:94px;
margin-bottom:120px;
padding-left:20px;
margin-bottom:0px;
border:0px solid #000;
}
img {
border:medium none;
}
.wedge {
clear:both;
}
/* Image gallery end //////////////////////////////////////////////////*/
/* content 2 */
#content_2 .h3 {
padding:0px;
font-size:1.5em;
color: #B5B43E;
text-decoration:none;
}
#content_2 .h32 {
padding:0px;
font-size:1.5em;
color:#2B832C;
text-decoration:none;
}
#content_2 .h2 {
padding: 0;
margin: 0;
font-size:1.5em;
text-decoration:none;
color:#2B832C;
}
#content_2 .orange {
padding: 0;
margin: 0;
font-size:2em;
text-decoration:none;
color:#D68126;
}
#content .orange {
padding-top:28px;
margin: 0;
font-size:3em;
text-decoration:none;
color:#D68126;
padding-bottom:3px;
}
#content .index_end {
padding-top:15px;
padding-bottom:20px;
margin: 0;
text-decoration:none;
color:#;
border-bottom: 2px solid #d68126;
}
#content .warning {
float:left;
}
#content .que {
padding-top:28px;
margin: 0;
text-decoration:none;
color:#D68126;
padding-bottom:3px;
}
#content .call {
text-decoration:none;
color:#D68126;
font-size:1.5em;
padding-top:20px;
padding-bottom:20px;
}
#content .orange2 {
padding-top:28px;
margin: 0;
font-size:3em;
text-decoration:none;
color:#D68126;
padding-bottom:3px;
}
#content .stars {
color:#712453;
background-image: url(../images/glitter/stars_4.jpg);
}
#content .orange2 {
padding-top:10px;
padding-bottom:3px;
margin: 0;
font-size:2em;
text-decoration:none;
color:#D68126;
}
#content .conditions {
font-size:9px;
font-weight:900;
}
#content_2 .type {
font-family:"Courier New" Courier monospace;
}
#content_2 .h1 {
padding-bottom:0px;
margin:0;
font-size:2em;
text-decoration:none;
}
#content_2 .h1footer {
padding-bottom:10px;
margin:0;
font-size:2em;
text-decoration:none;
}
#content_2 .h4footer {
padding-bottom:10px;
margin:0;
font-size:2em;
text-decoration:none;
font-family:"Courier New" Courier monospace;
}
#content_2 .homefooter {
padding-top:20px;
padding-bottom:20px;
margin:0;
font-size:2em;
text-decoration:none;
font-family:"Courier New" Courier monospace;
}
#content_2 a:link {
color: #622449;
text-decoration: none
}
#content_2 a:visited {
color: #622449;
text-decoration: none
}
#content_2 a:hover {
color: #D68126;
text-decoration: underline;
font-size: 100%;
font-weight:900;
}
#content_2 li {
font-size:1.5em;
}
#content_2 ul .clear {
list-style-type: none;
font-weight:bold;
}
#content_2 a img {
height:94px;
width:125px;
border:0px solid #000;
padding-left:20px;
margin-bottom:120px;
}
#content_2 .left {
float:left;
width:75%;
padding:0 0 28px;
}
#content_2 .free {
float:left;
padding-right:3px;
}
#content .productpic {
float:left;
padding-right:3px;
}
#content_2 p {
font-size:1.5em;
margin-bottom: 15px;
}
#content_2 .imagefloatleft {
float:left;
padding-right:2px;
}
#content_2 .h3green {
color:green;
font-size:16px;
padding-bottom:0px;
margin-bottom:0px;
}
#content_2 .ecoarticle {
margin-top:0px;
padding-top:0px;
}
/* content 2 ends */
#content p {
font-size:1.5em;
padding-right:2px;
}
#content .left {
float:right;
width:77%;
padding:0;
}
#content .h2 {
padding:0px;
font-size:15px;
color: #B5B43E;
}
#content .hotel {
padding:0px;
font-size:15px;
color: #B5B43E;
}
#content .h3 {
padding:0px;
font-size:15px;
color: #B5B43E;
text-decoration:none;
}
#content .type {
font-family:"Courier New" Courier monospace;
}
#content .call {
padding-top: 5px;
}
.home {
margin-left: 5%;
}
/* disabled
#content a:hover img {
width:300px;
height:225px;
}
*/
/* The rule below makes the effect work in IE */
#zoom a:hover {
padding-left:0px;
}
/* End Photo Zoom CSS */
/* * html #content .right {
padding:85px 0 0 28px;
} */
#content p {
margin:16px 0 0;
}
.image {
margin:0 0 0 -28px;
}
/*
Regular side bar
*/
#sidebar {
float:left;
width:225px;
padding:30px 0 0;
}
#sidebar .pic {
padding-bottom:50px;
padding-top:50px
}
#sidebar ul {
margin:0;
padding:0;
list-style:none;
width:225px;
overflow:hidden;
}
#sidebar ul li {
width:225px;
overflow:hidden;
float:left;
margin:4px 0 0;
}
#sidebar ul li a {
width:225px;
overflow:hidden;
display:block;
text-align: right;
font:14px "Arial", Courier New, San-serif;
line-height:18px;
color: #884970;
}
#sidebar ul li.activeblue a {
background: #702453;
text-decoration: none;
color: #6ecee4;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #6ecee4;
}
#sidebar ul ul li.activeblue2 a {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul ul li a:hover {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul li.activeyellow a {
color: #fece49;
background: #702453;
text-decoration: none;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #fece49;
}
#sidebar ul li.activeyellow2 a {
text-decoration: underline;
color: #fece49;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #fece49;
}
#sidebar ul li.activeorange a {
text-decoration: none;
background: #702453;
color: #f6872d;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #f6872d;
}
#sidebar ul li.activeorange2 a {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #f6872d;
}
#sidebar ul li.activepink a {
text-decoration: none;
background: #702453;
color: #dd5762;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #dd5762;
}
#sidebar ul li.activepink2 a {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #dd5762;
}
.sidebar ul li a dotsblue {
color: #6ecee4;
font-weight: bold;
}
#sidebar ul li a em {
color: #fece49;
font-weight: bold;
}
#sidebar ul ul {
margin:0;
padding:6px 13px 12px 0;
list-style:none;
width:212px;
text-align:right;
line-height:18px;
border-top:1px solid #fff;
background:#f0e9ed url(file:../images/separator.gif) repeat-x 0 100%;
}
#sidebar ul ul li {
float:none;
width:auto;
margin:0;
}
#sidebar ul ul a {
text-indent:0;
height:auto;
width:auto;
color: #702453 !important;
display:inline;
font:12px Arial, San-serif !important;
background:none !important;
}
#sidebar ul ul a:hover {
text-decoration: underline;
}
#footer {
height: 30px;
width: 985px;
overflow:hidden;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
border-top: 1px dotted #333;
}
#footer ul {
margin: 10px 0 0 240px;
padding: 0;
}
#footer ul li {
list-style: none;
float: left;
}
#footer ul li a {
display: block;
overflow:hidden;
font:10px;
line-height:18px;
color: #884970;
padding: 0px 10px 0px 10px;
border-right: 1px solid #aaa;
}
#footer ul li a:hover {
background: #702453;
text-decoration: none;
color: #fece49;
}
#content h2 {
padding:0;
margin:0;
color:#B5B43E;
}
#content h1 {
margin:0;
padding-top:25px;
}
#content .h1 {
padding-top:0px;
padding-bottom:0px;
margin:0px;
}
#content h3 {
margin:0;
padding-top:5px;
color:#B5B43E;
text-decoration:underline;
}
#content .cart2 {
display: block;
width: 69px;
height: 54px;
background: url("../images/shopping_cart.jpg") no-repeat 0 0;
}
#content .cart2 {
margin-left:80%;
margin-top:20px;
}
#content .cart2:hover {
background: url("../images/shopping_cart_go.jpg") no-repeat 0 0;
}
#content a:link {
color: #622449;
text-decoration: none
}
#content a:visited {
color: #622449;
text-decoration: none
}
#content a:hover {
color: #D68126;
text-decoration: underline;
font-size: 100%;
font-weight:900;
}
#thumnails .pics li {
float: left;
width: 10em;
list-style:none;
padding: 2%;
}
#content .free {
float:left;
padding-right:3px;
margin-bottom:5px;
}
#content .freextra {
float:right;
margin-right:10px;
}
#content li {
font-size:1.5em;
margin: 0;
padding-left: 0;
}
#content ul li {
margin-left: 0;
padding: 2px 0 2px 16px;
list-style: none;
background: url('../images/green/tick.jpg') no-repeat top left;
overflow:hidden;
}
#content ul {
padding-left: 165px;
}
#content .performance {
margin-bottom:0px;
padding-bottom:-1px;
}
#content li.eco {
font-size:1.5em;
margin: 0;
padding: 0;
}
/* list icons start /////////////////////////////////////////////////*/
#content ul li.horlicks {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/horlicks.jpg') no-repeat top left;
}
#content ul li.decaf {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/decafe.jpg') no-repeat top left;
}
#content ul li.soup {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/knorr.jpg') no-repeat top left;
}
#content ul li.lemon {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/lemon.jpg') no-repeat top left;
}
#content ul li.cappuccino_2 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/cappuccino_nes.jpg') no-repeat top left;
}
#content ul li.cadbury {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/cadbury.jpg') no-repeat top left;
}
#content ul li.bovril {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/bovril.jpg') no-repeat top left;
}
#content ul li.nescaf {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/nescafe_gold.jpg') no-repeat top left;
}
#content ul li.pot {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/coffee_pot.jpg') no-repeat top left;
}
#content ul li.arrow_up {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/vertical_arrow.jpg') no-repeat top left;
}
#content ul li.arrow_flat {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/horizontal_arrow.jpg') no-repeat top left;
}
#content ul li.cup {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/cup_saucer.jpg') no-repeat top left;
}
#content ul li.jug {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/barista_bits/milk_jug.jpg') no-repeat top left;
}
#content ul li.eco {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/recy_icon.jpg') no-repeat top left;
}
#content ul li.eco2 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/power_2.jpg') no-repeat top left;
}
#content ul li.eco3 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/low_energy.jpg') no-repeat top left;
}
#content ul li.eco4 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/fairtrade.jpg') no-repeat top left;
}
#content ul li.eco5 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/rain.jpg') no-repeat top left;
}
#content ul li.eco6 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/organic.jpg') no-repeat top left;
}
#content ul li.eco7 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/compass.jpg') no-repeat top left;
}
#content ul li.eco8 {
margin: 0;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/bean.jpg') no-repeat top left;
}
#content ul li.eco9 {
margin-left: 3px;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/terry.jpg') no-repeat top left;
}
#content ul li.eco10 {
margin-left: 3px;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/az2.jpg') no-repeat top left;
}
#content ul li.eco11 {
margin-left: 3px;
padding: 7px 0 7px 30px;
list-style: none;
background: url('../images/green/rubbish2.jpg') no-repeat top left;
}
#content ul li.eco12 {
margin-right: 3px;
padding: 7px 0px 7px 30px;
list-style: none;
background: url('../images/green/heat13.jpg') no-repeat top left;
}
#content ul li.eco13 {
margin-right: 3px;
padding: 7px 0px 7px 30px;
list-style: none;
background: url('../images/green/chef_taste.jpg') no-repeat top left;
}
#content ul li.eco14 {
margin-left: 3px;
padding: 7px 0px 7px 30px;
list-style: none;
background: url('../images/green/chris_face2.jpg') no-repeat top left;
}
#content ul li.eco15 {
margin-left: 3px;
padding: 7px 0px 7px 30px;
list-style: none;
background: url('../images/green/david_face2.jpg') no-repeat top left;
}
#content ul li.espresso {
margin-left: 3px;
padding: 7px 0px 7px 30px;
list-style: none;
background: url('../images/barista_bits/espresso.jpg') no-repeat top left;
}
#content ul li.cappuccino {
margin-left: 3px;
padding: 7px 0px 7px 30px;
list-style: none;
background: url('../images/barista_bits/cappuccino.jpg') no-repeat top left;
}
.style2 {
color: #2B832C;
font-weight: bold;
}
#leftcolumn {
float: left;
width: 50%;
margin-top: 10px;
margin-bottom:20px;
}
#leftcolumn .watermachine {
float:left;
margin-top:5px;
}
#leftcolumn p {
margin-top:5px;
}
#rightcolumn p {
margin-top:5px;
}
#rightcolumn {
margin-left: 50%;
border-left: 0px solid #622449;
margin-top: 10px;
margin-bottom:20px;
}
#rightcolumn .watermachine {
float:left;
margin-top:5px;
}
#content .print {
color:red;
text-align:right;
padding-right:5px;
}
#sitemap ul {
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
}
#sitemap ul li {
font-size:1.1em;
font-family:Arial, Helvetica, sans-serif;
}
#sitemap h1 {
padding-left:10px;
}
#sitemap a:link {
color: #622449;
text-decoration: none
}
#sitemap a:visited {
color: #622449;
text-decoration: none
}
#sitemap a:hover {
color: #D68126;
text-decoration: underline;
font-size: 100%;
font-weight:900;
}
/* home page */
#container_hp {
width: 96%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 180%;
max-width: 1200px;
min-width: 550px;
margin:2% auto;
}
#top_hp {
padding: 0em;
border-bottom: 1px solid gray;
font-family:Arial, Helvetica, sans-serif;
height:190px;
background: #FFFFFF url(../images/model_filter/office_female_window4.jpg) no-repeat right center;
color:white;
font-size:1.5em;
line-height:90%;
font-stretch:extra-expanded;
}
#top_hp .floatleft {
float:right;
}
#top_hp h1 {
margin:0px;
color:#D68126;
padding:4px;
color:#D68126;
}
#leftnav_hp {
float: left;
width: 28%;
margin: 0;
padding: 1em;
background: white url(../images/model_filter/waiter4.jpg) no-repeat top right;
}
#leftnav_hp img {
float:left;
}
#content_hp img {
float:left;
}
#rightnav_hp {
float: right;
width: 28%;
margin: 0;
padding: 1em;
background: white url(../images/model_filter/corporate_coffee3.jpg) no-repeat top right;
}
#rightnav_hp img {
float:left;
}
#content_hp {
margin-left: 30%;
border-left: 1px solid gray;
margin-right: 30%;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
background: white url(../images/model_filter/shop_coffee2.jpg) no-repeat top right;
}
#footer_hp {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#content_hp .headerfont {
font-size:2em;
padding:0px;
margin:0px;
color:#622449;
}
#leftnav_hp .headerfont {
font-size:2em;
padding:0px;
margin:0px;
color:#622449;
}
#leftnav_hp .headerfont2 {
font-size:2em;
padding:0px;
margin:0px;
color:#622449;
background: white url(../images/model_filter/shop_coffee2.jpg) no-repeat top right;
}
#rightnav_hp .headerfont {
font-size:2em;
padding:0px;
margin:0px;
color:#622449
}
#emailUs {
display: block;
width: 151px;
height: 46px;
background: url("../images/button/smiley_thumb.jpg") no-repeat 0 0;
}
#emailUs:hover {
background-position: 0 -23px;
background: url("../images/button/smiley_thumb_green.jpg") no-repeat 0 0;
}
#emailUs span {
display: none;
}
body.mp {
background-image: none;
background-color:#622449;
color:#FFFFFF;
min-width:985px;
}
.parapump {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
}
.parapump2 {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
background: white url(../images/model_filter/hotel_coffee3.jpg) no-repeat top right;
}
.parapump3 {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
background: white url(../images/model_filter/shop_coffee3.jpg) no-repeat top right;
}
.parapump4 {
font-size: 1.5em;
color:#622449;
font-size:1.5em;
font-weight:bold;
background: white url(../images/model_filter/business_coffee.jpg) no-repeat top right;
}
/* home page footer start */
.nav {
margin:auto;
border:1px;
height:60px;
background:#FFFFFF;
font:bold 88%/1.1 verdana;
clear:both;
overflow:hidden;
}
.nav li {
float:left;
list-style:none;
margin:5px;
}
.nav li a img {
margin:0 -5px;
border:1px inset #66f;
color:#ffffff background:;
}
.nav li a {
float:left;
padding:0 5px;
height:50px;
line-height:50px;
color:#D68126;
text-decoration:none;
text-transform:none;
font-size:1.25em;
}
.nav li a:hover {
margin:-3px;
border:3px inset #66f;
color:#CC6600;
background:;
}
.paddinglogo {
padding-left:15px;
}
/* home page footer end */
/* home page ends*/
a:link {
color: #622449;
text-decoration: none
}
a:visited {
color: #622449;
text-decoration: none
}
a:hover {
color: #D68126;
text-decoration: underline;
font-size: 100%
}
.hbloat {
font-size:2em;
font-weight:bold;
color:#622449;
}
/* blocks */
#wrap_blocks {
width:100%;
clear:both;
overflow:hidden;
}
#block_1 {
float:left;
width:15%;
background-color:;
border: 2px solid #702453;
color:#622449;
margin-right:3%;
margin-top:3%;
margin-left:10%;
height:320px;
}
#block_1 img {
margin-left:25%;
padding:5px;
}
#block_1 p {
font-size:1.5em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
}
#block_1 .biglink {
font_size:2em;
}
#block_2 {
width:15%;
float:left;
border: 2px solid #702453;
margin:3%;
background-color:;
height:320px;
}
#block_2 img {
margin-left:25%;
padding:5px;
}
#block_2 p {
font-size:1.5em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
}
#block_3 {
width:15%;
float:left;
margin:3%;
border: 2px solid #702453;
background-color:;
height:320px;
}
#block_3 p {
font-size:1.5em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
}
#block_3 img {
margin-left:25%;
padding:5px;
}
#block_4 {
width:15%;
float:left;
margin:3%;
border: 2px solid #702453;
background-color:;
height:320px;
}
#block_4 p {
font-size:1.5em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
}
#block_4 img {
margin-left:25%;
padding:5px;
}
#block_2 p {
font-size:1.5em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
}
#block_1 p {
font-size:1.5em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2%;
}
#block_2 h1 {
font-size:2.5em;
font-family:Arial, Verdana, Sans-serif;
}
/* end blocks */
/*cup and text */
#wrap_cupandtext {
width:100%;
clear:both;
}
#cup_left {
float:left;
width:50%;
background-color: #fff;
border-top: 0px solid #702453;
color:#622449;
font-weight:bold;
margin-left:-1px;
}
#cup_left img {
display: block;
margin-left: auto;
margin-right: auto;
padding-top:0px;
margin-top:0px;
}
#cup_left h2 {
margin-left:8%;
font-size:1.75em;
}
#cup_left .address {
padding-left:20px;
font-size:15px;
padding-top:0px;
margin-top:1px;
}
#cup_left h3 {
margin:0;
padding-top:10px;
padding-bottom:0px;
margin-bottom:0px;
font-size:25px;
color:#D68126;
padding-left:20px;
}
#strap_right {
width:50%;
float:right
}
#strap_right .endpadding {
padding-bottom:50px;
}
#strap_right .contact {
color:#F2CF4D;
font-size:2em;
margin-top:0px;
padding-top:0px;
}
#strap_right .floatleft {
float:left;
}
#strap_right .paddingstrip {
padding:0px;
padding-top:0px;
margin-top: 0px;
margin-bottom:0px margin-left:0px;
margin-right:5px;
}
#strap_right .headerbloat {
font-size:17px;
background-color:#A6AE1F;
}
#strap_right .cats {
font-size:13px;
margin-left:-1px;
}
#strap_right .strapline {
font-size:2em;
padding-top:0px;
margin-top:0px;
padding-bottom:0px;
margin-bottom:0px;
}
#strap_right p {
font-size:1.25em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2%;
}
#strap_right h1 {
font-size:3em;
font-family:Arial, Verdana, Sans-serif;
padding-bottom:0px;
margin-bottom:0px;
padding-top:0px;
margin-top:0px;
}
.centre {
text-align:center;
}
/*cup and text ends*/
/* blocks under cup start */
#wrap_blocks_c {
width:100%;
clear:both;
overflow:hidden;
}
#block_1_c, #block_2_c, #block_3_c, #block_4_c {
display:inline;
}
#block_1_c {
float:left;
width:100px;
background-color:;
border: 1px solid #702453;
color:#622449;
margin:1%;
height:340px;
}
#block_1_c img {
padding:5px;
display: block;
margin-left: auto;
margin-right: auto;
}
#block_1_c p {
font-size:1em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
padding:2px;
}
#block_1_c .biglink {
font-size:1.4em;
text-align:center;
}
#block_2_c {
width:100px;
float:left;
border: 1px solid #702453;
margin:1%;
background-color:;
height:340px;
}
#block_2_c .biglink {
font-size:1.4em;
text-align:center;
}
#block_3_c .biglink {
font-size:1.4em;
text-align:center;
}
#block_4_c .biglink {
font-size:1.4em;
text-align:center;
}
#block_2_c img {
padding:5px;
display: block;
margin-left: auto;
margin-right: auto;
}
#block_2_c p {
font-size:1em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
padding:2px;
}
#block_3_c {
width:100px;
float:left;
margin:1%;
border: 1px solid #702453;
background-color:;
height:340px;
}
#block_3_c p {
font-size:1em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
padding:2px;
}
#block_3_c img {
padding:5px;
display: block;
margin-left: auto;
margin-right: auto;
}
#block_4_c {
width:100px;
float:left;
margin:1%;
border: 1px solid #702453;
background-color:;
height:340px;
}
#block_4_c p {
font-size:1em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
padding:2px;
}
#block_4_c img {
padding:5px;
display: block;
margin-left: auto;
margin-right: auto;
}
#block_2_c p {
font-size:1em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2px;
}
#block_1_c p {
font-size:1em;
font-family:Arial, Verdana, Sans-serif;
margin-left:2%;
}
#block_2_c h1 {
font-size:2.5em;
font-family:Arial, Verdana, Sans-serif;
}
/* blocks under cup ends */
.pause {
color:#D68126;
font-weight:bold;
font-size:20px;
}
#sidebar ul li.sub a {
text-decoration: none;
background: #A6AE1F;
color: #622449;
}
#sidebar .sub a:hover {
text-decoration:none;
color: #622449;
}
#emailUs {
display: block;
width: 100px;
height: 66px;
background: url("../images/testimonial/get_quote_2.jpg") no-repeat 0 0;
margin-left:0px;
float:left;
}
#emailUs:hover {
background: url("../images/testimonial/get_quote.jpg") no-repeat 0 0;
}
#emailUs span {
display: none;
}
/*quick find*/
#quick, #quick ul { /* all lists */
padding: 0;
margin-left: 20px;
list-style: none;
line-height: 1;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
}
#quick a {
display: block;
width: 15em;
}
#quick li { /* all list items */
float: left;
width: 16em; /* width needed or else Opera goes nuts */
}
#quick li ul { /* second-level lists */
position: absolute;
background: #CCCCCC;
width: 15em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#quick li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
#quick li:hover ul, #quick li.sfhover ul {
left: auto;
}
#quick li:hover ul ul, #quick li.sfhover ul ul {
left: -999em;
}
#quick li:hover ul, #quick li li:hover ul, #quick li.sfhover ul, #quick li li.sfhover ul {
left: auto;
}
#cup_left {
clear: left;
}
/* Quick find end */
/* Light Box */
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox img {
width: auto;
height: auto;
}
#lightbox a img {
border: none;
}
#outerImageContainer {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer {
padding: 10px;
}
#loading {
position: absolute;
top: 40%;
left: 40%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav {
left: 0;
}
#hoverNav a {
outline: none;
}
#prevLink, #nextLink {
width: 49%;
height: 100%;
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
display: block;
}
#prevLink {
left: 0;
float: left;
}
#nextLink {
right: 0;
float: right;
}
#prevLink:hover, #prevLink:visited:hover {
background: url(/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(/images/nextlabel.gif) right 15% no-repeat;
}
#imageDataContainer {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
}
#imageData {
padding:0 10px;
color: #666;
}
#imageData #imageDetails {
width: 70%;
float: left;
text-align: left;
}
#imageData #caption {
font-weight: bold;
}
#imageData #numberDisplay {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#imageData #bottomNavClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
outline: none;
}
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
.strapshrink {
font-size:14px
}
/* Light Box Ends*/
/* Table form styling */
#content .form {
border: 1px solid;
border-collapse:collapse;
}
#content .form caption {
font-size:20px;
background-color:#F2CF4D;
font-weight:bold;
border: 1px solid;
color:#FFFFFF;
}
#content .form td {
border: 1px solid;
padding: 4px;
background-color:#712453;
font-size:15px;
font-weight:bold;
color:#FFFFFF;
}
/* Table form styling ends */
/*Collapse menu start*/
#menu {
float: right;
width:225px;
}
#menu, #menu ul{
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
cursor:pointer;
background:#94C5EB;
border-bottom:1px solid #444;
}
#menu li a {
text-decoration: none;
}
#menu>li>a {
padding:0;
font-weight:bold;
}
#menu li li{
cursor:auto;
border:0;
padding:0 14px;
background-color:#fff;
}
#disclaimer, #intro {
width: 400px;
}
/*Collapse menu end */
/* Light Box 2 */
/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}
/* Light Box 2 end */
