Hey All

 

I am in the stage of my first opencart redesign

 

I have so far changed the nav bar however I am now struggling with the footer.

 

1.I am wanting to make my footer the full width of the page but keep the rest of the page the same width as normal. I believe that it is something to do with divs but not 100% sure. My current analogy The div #footer is constrained by #container so in order for the footer to be the width I need it to be removed from the container div. I think some of it is right but some of that i wrong. An example of the footer that I am wanting can be seen on www.netmagazine.com

 

Any guidance would be greatly appreciated

 

Kind Regards

 

Toby

and where is your opencart demo?

whoops sorry, it is here

 

www.airsoft4you.com

 

Toby

simply take the footer div outside the container

 

and add a footer container inside footer like this

<div id="footer">
 <div id="footer-container">
  Footer contnets go here
 </div><!--footer-container-->


</div><!--footer-->

 

and in css

 

#footer-container { 
margin-left: auto;
margin-right: auto;
text-align: left;
width: 980px;
}

 

P.s you need to edit the footer.tpl for this in the view folder

 

and the main css

Hi

 

Cheers for that I have been trying it on my local version however no luck this is where I have put the code so far

 

<div id="footer">
<div id="footer-container">
 <?php if ($informations) { ?>
<div class="column">
   <h3><?php echo $text_information; ?></h3>
   <ul>
     <?php foreach ($informations as $information) { ?>
     <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
     <?php } ?>
   </ul>
 </div>
 <?php } ?>
 <div class="column">
   <h3><?php echo $text_service; ?></h3>
   <ul>
     <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
     <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
     <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
   </ul>
 </div>
 <div class="column">
   <h3><?php echo $text_extra; ?></h3>
   <ul>
     <li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
     <li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
     <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
     <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
   </ul>
 </div>
 <div class="column">
   <h3><?php echo $text_account; ?></h3>
   <ul>
     <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
     <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
     <li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
     <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
   </ul>
 </div>
</div><!--footer-container-->[/color]
</div>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->
<div id="powered"><?php echo $powered; ?></div>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->
</div>
</body></html>

 

then on the css file

#footer-container { 
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}

 

I am not sure exactly what is wrong however when I use firebug it isn't showing that there is #footer-container anywhere. You said I need to take the footer outside of the #container div, does adding the footer-container take it outside?

 

Toby

Firstly

my code was this

#footer-container { 
margin-left: auto;
margin-right: auto;
text-align: left;
width: 980px;
}

 

 

and u used this?

#footer-container { 
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}

 

 

 

can u post home.tpl code

Edited July 11, 201214 yr by sash_oo7

Hi

 

Yeah I I changed the code to see if it made any difference when, however it didn't do anything. below is the home.tpl code

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?></div>
<?php echo $footer; ?>

 

Toby

and i just want to ask you are u changing the theme that is active? becoz sometimes we make mistake that we edit something else other than the active theme?

 

post ur css and header.tpl too

i dont see footer-container here

 

 

html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
h1, .welcome {
color: #636E75;
font: Verdana;
margin-top: 0px;
margin-bottom: 20px;
font-size: 32px;
font-weight: normal;
text-shadow: 0 0 1px rgba(0, 0, 0, .01);
}
h2 {
color: #000000;
font-size: 16px;
margin-top: 0px;
margin-bottom: 5px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
}
a, a:visited, a b {
color: #38B0E3;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input[type='text'], input[type='password'], textarea {
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 3px;
margin-left: 0px;
margin-right: 0px;
}
select {
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
}
label {
cursor: pointer;
}
/* layout */
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#column-left {
float: left;
width: 180px;
}
#column-right {
float: right;
width: 180px;
}
#content {
min-height: 400px;
margin-bottom: 25px;
}
#column-left + #column-right + #content, #column-left + #content {
margin-left: 195px;
}
#column-right + #content {
margin-right: 195px;
}
/* header */
#header {
height: 90px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}
#header #logo {
position: absolute;
top: 25px;
left: 15px;
}
#language {
position: absolute;
top: 15px;
left: 320px;
width: 80px;
color: #999;
line-height: 17px;
}
#language img {
cursor: pointer;
margin-right: 5px;
}
#currency {
width: 75px;
position: absolute;
top: 15px;
left: 425px;
color: #999;
line-height: 17px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
border: 1px solid #CCC;
color: #999;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
}
#currency a b {
color: #000;
text-decoration: none;
}
#header #cart {
position: absolute;
top: 0px;
right: 145px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 172px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
background: #FFF;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #38B0E3;
text-decoration: none;
}
#header #cart .heading a span {
background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
#header #cart.active .heading {
margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
}
#header #cart.active .content {
display: block;
}
.mini-cart-info table {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
.mini-cart-info td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-total {
text-align: right;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #000;
padding: 4px;
}
#header #cart .checkout {
text-align: right;
clear: both;
}
#header #cart .empty {
padding-top: 50px;
text-align: center;
}
#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 298px;
z-index: 15;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 262px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}
#header #welcome {
position: absolute;
top: 47px;
right: 0px;
z-index: 5;
width: 298px;
text-align: right;
color: #999999;
}
#header .links {
position: absolute;
right: 0px;
bottom: 3px;
font-size: 10px;
padding-right: 10px;
}
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #38B0E3;
text-decoration: none;
font-size: 12px;
}
#header .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}
/* menu */
#menu {
background: #fffffff;
border-bottom: 10px solid #339933;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 0px 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px #FFFFFF;
-moz-box-shadow: 0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px #fffffff;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
text-transform:uppercase;
font-family: 'Lato', sans-serif;
font-size:15px;
color: #000000;
line-height: 14px;
text-decoration: none;
display: block;
padding: 11px 10px 6px 10px;
margin-bottom: 9px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
background: #000000;
color:#ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 0px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 0px;
border: 0px none #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 0px 0px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
font-family: 'Lato', sans-serif;
font-size:13px;
text-transform:uppercase;
text-decoration: none;
padding: 10px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
border-bottom:1px solid #000000;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
color: #ffffff;
}
#menu > ul > li > div > ul > li > a {
color: #000000;
}
.breadcrumb {
color: #CCCCCC;
margin-bottom: 10px;
}
.success, .warning, .attention, .information {
padding: 10px 10px 10px 33px;
margin-bottom: 15px;
color: #555555;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.success {
background: #EAF7D9 url('../image/success.png') 10px center no-repeat;
border: 1px solid #BBDF8D;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.warning {
background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
border: 1px solid #F8ACAC;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.attention {
background: #FFF5CC url('../image/attention.png') 10px center no-repeat;
border: 1px solid #F2DD8C;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.success .close, .warning .close, .attention .close, .information .close {
float: right;
padding-top: 4px;
padding-right: 4px;
cursor: pointer;
}
.required {
color: #FF0000;
font-weight: bold;
}
.error {
display: block;
color: #FF0000;
}
.help {
color: #999;
font-size: 10px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
display: block;
}
table.form {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table.form tr td:first-child {
width: 150px;
}
table.form > * > * > td {
color: #000000;
}
table.form td {
padding: 4px;
}
input.large-field, select.large-field {
width: 300px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
table.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
table.list tbody td {
vertical-align: top;
padding: 0px 5px;
}
table.list .left {
text-align: left;
padding: 7px;
}
table.list .right {
text-align: right;
padding: 7px;
}
table.list .center {
text-align: center;
padding: 7px;
}
table.radio {
width: 100%;
border-collapse: collapse;
}
table.radio td {
padding: 5px;
vertical-align: top;
}
table.radio td label {
display: block;
}
table.radio tr td:first-child {
width: 1px;
}
table.radio tr td:first-child input {
margin-top: 1px;
}
table.radio tr.highlight:hover td {
background: #F1FFDD;
cursor: pointer;
}
.pagination {
border-top: 1px solid #EEEEEE;
padding-top: 8px;
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
.pagination .links {
float: left;
}
.pagination .links a {
display: inline-block;
border: 1px solid #EEEEEE;
padding: 4px 10px;
text-decoration: none;
color: #A3A3A3;
}
.pagination .links b {
display: inline-block;
border: 1px solid #269BC6;
padding: 4px 10px;
font-weight: normal;
text-decoration: none;
color: #269BC6;
background: #FFFFFF;
}
.pagination .results {
float: right;
padding-top: 3px;
}
/* button */
a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
text-transform:uppercase;
   font-size:12px;
   font-family: 'Lato', sans-serif;
font-size: 12px;
font-weight: bold;
color:#000000;
background: #ff5400 top left repeat-x;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 0px 0px 0px 0px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
background: #000000;
color:#ffffff
}
.buttons {
background: #FFFFFF;
border: 1px solid #EEEEEE;
overflow: auto;
padding: 6px;
margin-bottom: 20px;
}
.buttons .left {
float: left;
text-align: left;
}
.buttons .right {
float: right;
text-align: right;
}
.buttons .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.htabs {
height: 30px;
line-height: 16px;
border-bottom: 1px solid #DDDDDD;
}
.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
padding: 7px 15px 6px 15px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
margin-right: 2px;
display: none;
}
.htabs a.selected {
padding-bottom: 7px;
background: #FFFFFF;
}
.tab-content {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin-bottom: 20px;
z-index: 2;
overflow: auto;
}
/* box */
.box {
margin-bottom: 20px;
}
.box .box-heading {
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
border-bottom: 10px solid #cc0000;
padding: 8px 10px 7px 10px;
   font-family: 'Lato', sans-serif;
text-transform:uppercase;
font-size: 15px;
line-height: 14px;
color: #000000;
}
.box .box-content {
background: #FFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 0px 0px;
border-bottom: 0px solid #cc0000;
padding: 10px;
}
/* box products */
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}
/* box category */
.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
padding: 8px 8px 8px 0px;
}
.box-category > ul > li + li {
border-top: 1px solid #EEEEEE;
}
.box-category > ul > li > a {
text-decoration: none;
color: #333;
}
.box-category > ul > li ul {
display: none;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}
/* content */
#content .content {
padding: 10px;
overflow: auto;
margin-bottom: 20px;
border: 1px solid #EEEEEE;
}
#content .content .left {
float: left;
width: 49%;
}
#content .content .right {
float: right;
width: 49%;
}
/* category */
.category-info {
overflow: auto;
margin-bottom: 20px;
}
.category-info .image {
float: left;
padding: 5px;
margin-right: 15px;
border: 1px solid #E7E7E7;
}
.category-list {
overflow: auto;
margin-bottom: 20px;
}
.category-list ul {
float: left;
width: 18%;
}
.category-list .div a {
text-decoration: underline;
font-weight: bold;
}
/* manufacturer */
.manufacturer-list {
border: 1px solid #DBDEE1;
padding: 5px;
overflow: auto;
margin-bottom: 20px;
}
.manufacturer-heading {
background: #F8F8F8;
font-size: 15px;
font-weight: bold;
padding: 5px 8px;
margin-bottom: 6px;
}
.manufacturer-content {
padding: 8px;
}
.manufacturer-list ul {
float: left;
width: 25%;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 10px;
}
/* product */
.product-filter {
border-bottom: 1px solid #EEEEEE;
padding-bottom: 5px;
overflow: auto;
}
.product-filter .display {
margin-right: 15px;
float: left;
padding-top: 4px;
color: #333;
}
.product-filter .display a {
font-weight: bold;
}
.product-filter .sort {
float: right;
color: #333;
}
.product-filter .limit {
margin-left: 15px;
float: right;
color: #333;
}
.product-compare {
padding-top: 6px;
margin-bottom: 25px;
font-weight: bold;
}
.product-compare a {
text-decoration: none;
font-weight: bold;
}
.product-list > div {
overflow: auto;
margin-bottom: 15px;
}
.product-list .right {
float: right;
margin-left: 15px;
}
.product-list > div + div {
border-top: 1px solid #EEEEEE;
padding-top: 16px;
}
.product-list .image {
float: left;
margin-right: 10px;
}
.product-list .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-list .name {
margin-bottom: 3px;
}
.product-list .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
}
.product-list .description {
line-height: 15px;
margin-bottom: 5px;
color: #4D4D4D;
}
.product-list .rating {
color: #7B7B7B;
}
.product-list .price {
float: right;
height: 50px;
margin-left: 8px;
text-align: right;
color: #333333;
font-size: 12px;
}
.product-list .price-old {
color: #F00;
text-decoration: line-through;
}
.product-list .price-new {
font-weight: bold;
}
.product-list .price-tax {
font-size: 12px;
font-weight: normal;
color: #BBBBBB;
}
.product-list .cart {
margin-bottom: 3px;
}
.product-list .wishlist, .product-list .compare {
margin-bottom: 3px;
}
.product-list .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-list .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left 60% no-repeat;
}
.product-grid {
width: 100%;
overflow: auto;
}
.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-grid .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
/* Product */
.product-info {
overflow: auto;
margin-bottom: 20px;
}
.product-info > .left {
float: left;
margin-right: 15px;
}
.product-info > .left + .right {
margin-left: 265px;
}
.product-info .image {
border: 1px solid #E7E7E7;
float: left;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}
.product-info .image-additional {
width: 260px;
margin-left: -10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
.product-info .description {
border-top: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
padding: 5px 5px 10px 5px;
margin-bottom: 10px;
line-height: 20px;
color: #4D4D4D;
}
.product-info .description span {
color: #38B0E3;
}
.product-info .description a {
color: #4D4D4D;
text-decoration: none;
}
.product-info .price {
overflow: auto;
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 10px;
font-size: 15px;
font-weight: bold;
color: #333333;
}
.product-info .price-old {
color: #F00;
text-decoration: line-through;
}
.product-info .price-new {
}
.product-info .price-tax {
font-size: 12px;
font-weight: normal;
color: #999;
}
.product-info .price .reward {
font-size: 12px;
font-weight: normal;
color: #999;
}
.product-info .price .discount {
font-weight: normal;
font-size: 12px;
color: #4D4D4D;
}
.product-info .options {
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 10px;
color: #000000;
}
.product-info .option-image {
margin-top: 3px;
margin-bottom: 10px;
}
.product-info .option-image label {
display: block;
width: 100%;
height: 100%;
}
.product-info .option-image img {
margin-right: 5px;
border: 1px solid #CCCCCC;
cursor: pointer;
}
.product-info .cart {
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 20px;
color: #4D4D4D;
overflow: auto;
}
.product-info .cart div {
float: left;
vertical-align: middle;
}
.product-info .cart div > span {
padding-top: 7px;
display: block;
color: #999;
}
.product-info .cart .minimum {
padding-top: 5px;
font-size: 11px;
color: #999;
clear: both;
}
.product-info .review {
color: #4D4D4D;
border-top: 1px solid #E7E7E7;
border-left: 1px solid #E7E7E7;
border-right: 1px solid #E7E7E7;
margin-bottom: 10px;
}
.product-info .review > div {
padding: 8px;
border-bottom: 1px solid #E7E7E7;
line-height: 20px;
}
.product-info .review > div > span {
color: #38B0E3;
}
.product-info .review .share {
overflow: auto;
line-height: normal;
}
.product-info .review .share a {
text-decoration: none;
}
.review-list {
padding: 10px;
overflow: auto;
margin-bottom: 20px;
border: 1px solid #EEEEEE;
}
.review-list .author {
float: left;
margin-bottom: 20px;
}
.review-list .rating {
float: right;
margin-bottom: 20px;
}
.review-list .text {
clear: both;
}
.attribute {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.attribute thead td, .attribute thead tr td:first-child {
color: #000000;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.attribute tr td:first-child {
color: #000000;
font-weight: bold;
text-align: right;
width: 20%;
}
.attribute td {
padding: 7px;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.compare-info {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.compare-info thead td, .compare-info thead tr td:first-child {
color: #000000;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.compare-info tr td:first-child {
color: #000000;
font-weight: bold;
text-align: right;
}
.compare-info td {
padding: 7px;
width: 20%;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.compare-info .name a {
font-weight: bold;
}
.compare-info .price-old {
font-weight: bold;
color: #F00;
text-decoration: line-through;
}
.compare-info .price-new {
font-weight: bold;
}
/* wishlist */
.wishlist-info table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.wishlist-info td {
padding: 7px;
}
.wishlist-info thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.wishlist-info thead .image {
text-align: center;
}
.wishlist-info thead .name, .wishlist-info thead .model, .wishlist-info thead .stock {
text-align: left;
}
.wishlist-info thead .quantity, .wishlist-info thead .price, .wishlist-info thead .total, .wishlist-info thead .action {
text-align: right;
}
.wishlist-info tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.wishlist-info tbody .image img {
border: 1px solid #DDDDDD;
}
.wishlist-info tbody .image {
text-align: center;
}
.wishlist-info tbody .name, .wishlist-info tbody .model, .wishlist-info tbody .stock {
text-align: left;
}
.wishlist-info tbody .quantity, .wishlist-info tbody .price, .wishlist-info tbody .total, .wishlist-info tbody .action {
text-align: right;
}
.wishlist-info tbody .price s {
color: #F00;
}
.wishlist-info tbody .action img {
cursor: pointer;
}
.login-content {
margin-bottom: 20px;
overflow: auto;
}
.login-content .left {
float: left;
width: 48%;
}
.login-content .right {
float: right;
width: 48%
}
.login-content .left .content, .login-content .right .content {
min-height: 190px;
}
/* orders */
.order-list {
margin-bottom: 10px;
}
.order-list .order-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.order-list .order-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.order-list .order-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.order-list .order-content div {
float: left;
width: 33.3%;
}
.order-list .order-info {
text-align: right;
}
.order-detail {
background: #EFEFEF;
font-weight: bold;
}
/* returns */
.return-list {
margin-bottom: 10px;
}
.return-list .return-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.return-list .return-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.return-list .return-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.return-list .return-content div {
float: left;
width: 33.3%;
}
.return-list .return-info {
text-align: right;
}
.return-product {
overflow: auto;
margin-bottom: 20px;
}
.return-name {
float: left;
width: 31%;
margin-right: 15px;
}
.return-model {
float: left;
width: 31%;
margin-right: 15px;
}
.return-quantity {
float: left;
width: 31%;
}
.return-detail {
overflow: auto;
margin-bottom: 20px;
}
.return-reason {
float: left;
width: 31%;
margin-right: 15px;
}
.return-opened {
float: left;
width: 31%;
margin-right: 15px;
}
.return-opened textarea {
width: 98%;
vertical-align: top;
}
.return-captcha {
float: left;
}
.download-list {
margin-bottom: 10px;
}
.download-list .download-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.download-list .download-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.download-list .download-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.download-list .download-content div {
float: left;
width: 33.3%;
}
.download-list .download-info {
text-align: right;
}
/* cart */
.cart-info table {
width: 100%;
margin-bottom: 15px;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
.cart-info td {
padding: 7px;
}
.cart-info thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.cart-info thead .image {
text-align: center;
}
.cart-info thead .name, .cart-info thead .model, .cart-info thead .quantity {
text-align: left;
}
.cart-info thead .price, .cart-info thead .total {
text-align: right;
}
.cart-info tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.cart-info tbody .image img {
border: 1px solid #DDDDDD;
}
.cart-info tbody .image {
text-align: center;
}
.cart-info tbody .name, .cart-info tbody .model, .cart-info tbody .quantity {
text-align: left;
}
.cart-info tbody .quantity input[type='image'], .cart-info tbody .quantity img {
position: relative;
top: 4px;
cursor: pointer;
}
.cart-info tbody .price, .cart-info tbody .total {
text-align: right;
}
.cart-info tbody span.stock {
color: #F00;
font-weight: bold;
}
.cart-module > div {
display: none;
}
.cart-total {
border-top: 1px solid #DDDDDD;
overflow: auto;
padding-top: 8px;
margin-bottom: 15px;
}
.cart-total table {
float: right;
}
.cart-total td {
padding: 3px;
text-align: right;
}
/* checkout */
.checkout-heading {
background: #F8F8F8;
border: 1px solid #DBDEE1;
padding: 8px;
font-weight: bold;
font-size: 13px;
color: #555555;
margin-bottom: 15px;
}
.checkout-heading a {
float: right;
margin-top: 1px;
font-weight: normal;
text-decoration: none;
}
.checkout-content {
padding: 0px 0px 15px 0px;
display: none;
overflow: auto;
}
.checkout-content .left {
float: left;
width: 48%;
}
.checkout-content .right {
float: right;
width: 48%;
}
.checkout-content .buttons {
clear: both;
}
.checkout-product table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.checkout-product td {
padding: 7px;
}
.checkout-product thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.checkout-product thead .name, .checkout-product thead .model {
text-align: left;
}
.checkout-product thead .quantity, .checkout-product thead .price, .checkout-product thead .total {
text-align: right;
}
.checkout-product tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.checkout-product tbody .name, .checkout-product tbody .model {
text-align: left;
}
.checkout-product tbody .quantity, .checkout-product tbody .price, .checkout-product tbody .total {
text-align: right;
}
.checkout-product tfoot td {
text-align: right;
border-bottom: 1px solid #DDDDDD;
}
.contact-info {
overflow: auto;
}
.contact-info .left {
float: left;
width: 48%;
}
.contact-info .right {
float: left;
width: 48%;
}
.sitemap-info {
overflow: auto;
margin-bottom: 40px;
}
.sitemap-info .left {
float: left;
width: 48%;
}
.sitemap-info .right {
float: left;
width: 48%;
}
/* footer */ 
#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}
#footer h3 {
color: #000000;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column {
float: left;
width: 25%;
min-height: 100px;
}
#footer .column ul {
margin-top: 0px;
margin-left: 8px;
padding-left: 12px;
}
#footer .column ul li {
margin-bottom: 3px;
}
#footer .column a {
text-decoration: none;
color: #000;
}
#footer .column a:hover {
text-decoration: underline;
}
#powered {
margin-top: 5px;
text-align: right;
clear: both;
}
/* banner */
.banner div {
text-align: center;
width: 100%;
display: none;
}
.banner div img {
margin-bottom: 20px;
}

 

where u added the css?

Sorry copied the wrong one across, I have now made sure that the live theme is showing all of the correct code, here is the css again

 

html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
body {
background: white url(../img/green.png) repeat-x center top;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
h1, .welcome {
color: #636E75;
font: Verdana;
margin-top: 0px;
margin-bottom: 20px;
font-size: 32px;
font-weight: normal;
text-shadow: 0 0 1px rgba(0, 0, 0, .01);
}
h2 {
color: #000000;
font-size: 16px;
margin-top: 0px;
margin-bottom: 5px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
}
a, a:visited, a b {
color: #38B0E3;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input[type='text'], input[type='password'], textarea {
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 3px;
margin-left: 0px;
margin-right: 0px;
}
select {
background: #F8F8F8;
border: 1px solid #CCCCCC;
padding: 2px;
}
label {
cursor: pointer;
}
/* layout */
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#column-left {
float: left;
width: 180px;
}
#column-right {
float: right;
width: 180px;
}
#content {
min-height: 400px;
margin-bottom: 25px;
}
#column-left + #column-right + #content, #column-left + #content {
margin-left: 195px;
}
#column-right + #content {
margin-right: 195px;
}
/* header */
#header {
height: 90px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}
#header #logo {
position: absolute;
top: 25px;
left: 15px;
}
#language {
position: absolute;
top: 15px;
left: 320px;
width: 80px;
color: #999;
line-height: 17px;
}
#language img {
cursor: pointer;
margin-right: 5px;
}
#currency {
width: 75px;
position: absolute;
top: 15px;
left: 425px;
color: #999;
line-height: 17px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
border: 1px solid #CCC;
color: #999;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
}
#currency a b {
color: #000;
text-decoration: none;
}
#header #cart {
position: absolute;
top: 0px;
right: 145px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 172px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
background: #FFF;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #38B0E3;
text-decoration: none;
}
#header #cart .heading a span {
background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
#header #cart.active .heading {
margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
}
#header #cart.active .content {
display: block;
}
.mini-cart-info table {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
.mini-cart-info td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-total {
text-align: right;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #000;
padding: 4px;
}
#header #cart .checkout {
text-align: right;
clear: both;
}
#header #cart .empty {
padding-top: 50px;
text-align: center;
}
#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 298px;
z-index: 15;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 262px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}
#header #welcome {
position: absolute;
top: 47px;
right: 0px;
z-index: 5;
width: 298px;
text-align: right;
color: #999999;
}
#header .links {
position: absolute;
right: 0px;
bottom: 3px;
font-size: 10px;
padding-right: 10px;
}
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #38B0E3;
text-decoration: none;
font-size: 12px;
}
#header .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}
/* menu */
#menu {
background: #fffffff;
border-bottom: 10px solid #339933;
height: 37px;
width: 100%;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 0px 0px 0px 0px;
-webkit-box-shadow: 0px 0px 0px #FFFFFF;
-moz-box-shadow: 0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px #fffffff;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
text-transform:uppercase;
font-family: 'Lato', sans-serif;
font-size:15px;
color: #000000;
line-height: 14px;
text-decoration: none;
display: block;
padding: 11px 10px 6px 10px;
margin-bottom: 9px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
background:url("../image/navhover2.png") repeat;
color:#ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 0px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 0px;
border: 0px none #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 0px 0px;
background: url('../image/menu.png');
}
#menu>ul>li>a:visited>div{
background:#666666;
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
font-family: 'Lato', sans-serif;
font-size:13px;
text-transform:uppercase;
text-decoration: none;
padding: 10px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
border-bottom:1px solid #242527;
}
#menu > ul > li ul > li > a:hover {
background: #242527;
color: #ffffff;
}
#menu > ul > li > div > ul > li > a {
color: #000000;
}
.breadcrumb {
color: #CCCCCC;
margin-bottom: 10px;
}
.success, .warning, .attention, .information {
padding: 10px 10px 10px 33px;
margin-bottom: 15px;
color: #555555;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.success {
background: #EAF7D9 url('../image/success.png') 10px center no-repeat;
border: 1px solid #BBDF8D;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.warning {
background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
border: 1px solid #F8ACAC;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.attention {
background: #FFF5CC url('../image/attention.png') 10px center no-repeat;
border: 1px solid #F2DD8C;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.success .close, .warning .close, .attention .close, .information .close {
float: right;
padding-top: 4px;
padding-right: 4px;
cursor: pointer;
}
.required {
color: #FF0000;
font-weight: bold;
}
.error {
display: block;
color: #FF0000;
}
.help {
color: #999;
font-size: 10px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
display: block;
}
table.form {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table.form tr td:first-child {
width: 150px;
}
table.form > * > * > td {
color: #000000;
}
table.form td {
padding: 4px;
}
input.large-field, select.large-field {
width: 300px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
table.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
table.list tbody td {
vertical-align: top;
padding: 0px 5px;
}
table.list .left {
text-align: left;
padding: 7px;
}
table.list .right {
text-align: right;
padding: 7px;
}
table.list .center {
text-align: center;
padding: 7px;
}
table.radio {
width: 100%;
border-collapse: collapse;
}
table.radio td {
padding: 5px;
vertical-align: top;
}
table.radio td label {
display: block;
}
table.radio tr td:first-child {
width: 1px;
}
table.radio tr td:first-child input {
margin-top: 1px;
}
table.radio tr.highlight:hover td {
background: #F1FFDD;
cursor: pointer;
}
.pagination {
border-top: 1px solid #EEEEEE;
padding-top: 8px;
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
.pagination .links {
float: left;
}
.pagination .links a {
display: inline-block;
border: 1px solid #EEEEEE;
padding: 4px 10px;
text-decoration: none;
color: #A3A3A3;
}
.pagination .links b {
display: inline-block;
border: 1px solid #269BC6;
padding: 4px 10px;
font-weight: normal;
text-decoration: none;
color: #269BC6;
background: #FFFFFF;
}
.pagination .results {
float: right;
padding-top: 3px;
}
/* button */
a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
text-transform:uppercase;
   font-size:12px;
   font-family: 'Lato', sans-serif;
font-size: 12px;
font-weight: bold;
color:#000000;
background: #ff5400 top left repeat-x;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 0px 0px 0px 0px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
background: #000000;
color:#ffffff
}
.buttons {
background: #FFFFFF;
border: 1px solid #EEEEEE;
overflow: auto;
padding: 6px;
margin-bottom: 20px;
}
.buttons .left {
float: left;
text-align: left;
}
.buttons .right {
float: right;
text-align: right;
}
.buttons .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.htabs {
height: 30px;
line-height: 16px;
border-bottom: 1px solid #DDDDDD;
}
.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
padding: 7px 15px 6px 15px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
margin-right: 2px;
display: none;
}
.htabs a.selected {
padding-bottom: 7px;
background: #FFFFFF;
}
.tab-content {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin-bottom: 20px;
z-index: 2;
overflow: auto;
}
/* box */
.box {
margin-bottom: 20px;
}
.box .box-heading {
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
border-bottom: 10px solid #cc0000;
padding: 8px 10px 7px 10px;
   font-family: 'Lato', sans-serif;
text-transform:uppercase;
font-size: 15px;
line-height: 14px;
color: #000000;
}
.box .box-content {
background: #FFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 0px 0px;
border-bottom: 0px solid #cc0000;
padding: 10px;
}
/* box products */
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}
/* box category */
.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
padding: 8px 8px 8px 0px;
}
.box-category > ul > li + li {
border-top: 1px solid #EEEEEE;
}
.box-category > ul > li > a {
text-decoration: none;
color: #333;
}
.box-category > ul > li ul {
display: none;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}
/* content */
#content .content {
padding: 10px;
overflow: auto;
margin-bottom: 20px;
border: 1px solid #EEEEEE;
}
#content .content .left {
float: left;
width: 49%;
}
#content .content .right {
float: right;
width: 49%;
}
/* category */
.category-info {
overflow: auto;
margin-bottom: 20px;
}
.category-info .image {
float: left;
padding: 5px;
margin-right: 15px;
border: 1px solid #E7E7E7;
}
.category-list {
overflow: auto;
margin-bottom: 20px;
}
.category-list ul {
float: left;
width: 18%;
}
.category-list .div a {
text-decoration: underline;
font-weight: bold;
}
/* manufacturer */
.manufacturer-list {
border: 1px solid #DBDEE1;
padding: 5px;
overflow: auto;
margin-bottom: 20px;
}
.manufacturer-heading {
background: #F8F8F8;
font-size: 15px;
font-weight: bold;
padding: 5px 8px;
margin-bottom: 6px;
}
.manufacturer-content {
padding: 8px;
}
.manufacturer-list ul {
float: left;
width: 25%;
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 10px;
}
/* product */
.product-filter {
border-bottom: 1px solid #EEEEEE;
padding-bottom: 5px;
overflow: auto;
}
.product-filter .display {
margin-right: 15px;
float: left;
padding-top: 4px;
color: #333;
}
.product-filter .display a {
font-weight: bold;
}
.product-filter .sort {
float: right;
color: #333;
}
.product-filter .limit {
margin-left: 15px;
float: right;
color: #333;
}
.product-compare {
padding-top: 6px;
margin-bottom: 25px;
font-weight: bold;
}
.product-compare a {
text-decoration: none;
font-weight: bold;
}
.product-list > div {
overflow: auto;
margin-bottom: 15px;
}
.product-list .right {
float: right;
margin-left: 15px;
}
.product-list > div + div {
border-top: 1px solid #EEEEEE;
padding-top: 16px;
}
.product-list .image {
float: left;
margin-right: 10px;
}
.product-list .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-list .name {
margin-bottom: 3px;
}
.product-list .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
}
.product-list .description {
line-height: 15px;
margin-bottom: 5px;
color: #4D4D4D;
}
.product-list .rating {
color: #7B7B7B;
}
.product-list .price {
float: right;
height: 50px;
margin-left: 8px;
text-align: right;
color: #333333;
font-size: 12px;
}
.product-list .price-old {
color: #F00;
text-decoration: line-through;
}
.product-list .price-new {
font-weight: bold;
}
.product-list .price-tax {
font-size: 12px;
font-weight: normal;
color: #BBBBBB;
}
.product-list .cart {
margin-bottom: 3px;
}
.product-list .wishlist, .product-list .compare {
margin-bottom: 3px;
}
.product-list .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-list .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left 60% no-repeat;
}
.product-grid {
width: 100%;
overflow: auto;
}
.product-grid > div {
width: 175px;
display: inline-block;
margin:auto;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
postition:center;
}
.product-grid .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-grid .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
/* Product */
.product-info {
overflow: auto;
margin-bottom: 20px;
}
.product-info > .left {
float: left;
margin-right: 15px;
}
.product-info > .left + .right {
margin-left: 265px;
}
.product-info .image {
border: 1px solid #E7E7E7;
float: left;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}
.product-info .image-additional {
width: 260px;
margin-left: -10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
.product-info .description {
border-top: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
padding: 5px 5px 10px 5px;
margin-bottom: 10px;
line-height: 20px;
color: #4D4D4D;
}
.product-info .description span {
color: #38B0E3;
}
.product-info .description a {
color: #4D4D4D;
text-decoration: none;
}
.product-info .price {
overflow: auto;
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 10px;
font-size: 15px;
font-weight: bold;
color: #333333;
}
.product-info .price-old {
color: #F00;
text-decoration: line-through;
}
.product-info .price-new {
}
.product-info .price-tax {
font-size: 12px;
font-weight: normal;
color: #999;
}
.product-info .price .reward {
font-size: 12px;
font-weight: normal;
color: #999;
}
.product-info .price .discount {
font-weight: normal;
font-size: 12px;
color: #4D4D4D;
}
.product-info .options {
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 10px;
color: #000000;
}
.product-info .option-image {
margin-top: 3px;
margin-bottom: 10px;
}
.product-info .option-image label {
display: block;
width: 100%;
height: 100%;
}
.product-info .option-image img {
margin-right: 5px;
border: 1px solid #CCCCCC;
cursor: pointer;
}
.product-info .cart {
border-bottom: 1px solid #E7E7E7;
padding: 0px 5px 10px 5px;
margin-bottom: 20px;
color: #4D4D4D;
overflow: auto;
}
.product-info .cart div {
float: left;
vertical-align: middle;
}
.product-info .cart div > span {
padding-top: 7px;
display: block;
color: #999;
}
.product-info .cart .minimum {
padding-top: 5px;
font-size: 11px;
color: #999;
clear: both;
}
.product-info .review {
color: #4D4D4D;
border-top: 1px solid #E7E7E7;
border-left: 1px solid #E7E7E7;
border-right: 1px solid #E7E7E7;
margin-bottom: 10px;
}
.product-info .review > div {
padding: 8px;
border-bottom: 1px solid #E7E7E7;
line-height: 20px;
}
.product-info .review > div > span {
color: #38B0E3;
}
.product-info .review .share {
overflow: auto;
line-height: normal;
}
.product-info .review .share a {
text-decoration: none;
}
.review-list {
padding: 10px;
overflow: auto;
margin-bottom: 20px;
border: 1px solid #EEEEEE;
}
.review-list .author {
float: left;
margin-bottom: 20px;
}
.review-list .rating {
float: right;
margin-bottom: 20px;
}
.review-list .text {
clear: both;
}
.attribute {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.attribute thead td, .attribute thead tr td:first-child {
color: #000000;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.attribute tr td:first-child {
color: #000000;
font-weight: bold;
text-align: right;
width: 20%;
}
.attribute td {
padding: 7px;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.compare-info {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.compare-info thead td, .compare-info thead tr td:first-child {
color: #000000;
font-size: 14px;
font-weight: bold;
background: #F7F7F7;
text-align: left;
}
.compare-info tr td:first-child {
color: #000000;
font-weight: bold;
text-align: right;
}
.compare-info td {
padding: 7px;
width: 20%;
color: #4D4D4D;
text-align: center;
vertical-align: top;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.compare-info .name a {
font-weight: bold;
}
.compare-info .price-old {
font-weight: bold;
color: #F00;
text-decoration: line-through;
}
.compare-info .price-new {
font-weight: bold;
}
/* wishlist */
.wishlist-info table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.wishlist-info td {
padding: 7px;
}
.wishlist-info thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.wishlist-info thead .image {
text-align: center;
}
.wishlist-info thead .name, .wishlist-info thead .model, .wishlist-info thead .stock {
text-align: left;
}
.wishlist-info thead .quantity, .wishlist-info thead .price, .wishlist-info thead .total, .wishlist-info thead .action {
text-align: right;
}
.wishlist-info tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.wishlist-info tbody .image img {
border: 1px solid #DDDDDD;
}
.wishlist-info tbody .image {
text-align: center;
}
.wishlist-info tbody .name, .wishlist-info tbody .model, .wishlist-info tbody .stock {
text-align: left;
}
.wishlist-info tbody .quantity, .wishlist-info tbody .price, .wishlist-info tbody .total, .wishlist-info tbody .action {
text-align: right;
}
.wishlist-info tbody .price s {
color: #F00;
}
.wishlist-info tbody .action img {
cursor: pointer;
}
.login-content {
margin-bottom: 20px;
overflow: auto;
}
.login-content .left {
float: left;
width: 48%;
}
.login-content .right {
float: right;
width: 48%
}
.login-content .left .content, .login-content .right .content {
min-height: 190px;
}
/* orders */
.order-list {
margin-bottom: 10px;
}
.order-list .order-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.order-list .order-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.order-list .order-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.order-list .order-content div {
float: left;
width: 33.3%;
}
.order-list .order-info {
text-align: right;
}
.order-detail {
background: #EFEFEF;
font-weight: bold;
}
/* returns */
.return-list {
margin-bottom: 10px;
}
.return-list .return-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.return-list .return-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.return-list .return-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.return-list .return-content div {
float: left;
width: 33.3%;
}
.return-list .return-info {
text-align: right;
}
.return-product {
overflow: auto;
margin-bottom: 20px;
}
.return-name {
float: left;
width: 31%;
margin-right: 15px;
}
.return-model {
float: left;
width: 31%;
margin-right: 15px;
}
.return-quantity {
float: left;
width: 31%;
}
.return-detail {
overflow: auto;
margin-bottom: 20px;
}
.return-reason {
float: left;
width: 31%;
margin-right: 15px;
}
.return-opened {
float: left;
width: 31%;
margin-right: 15px;
}
.return-opened textarea {
width: 98%;
vertical-align: top;
}
.return-captcha {
float: left;
}
.download-list {
margin-bottom: 10px;
}
.download-list .download-id {
width: 49%;
float: left;
margin-bottom: 2px;
}
.download-list .download-status {
width: 49%;
float: right;
text-align: right;
margin-bottom: 2px;
}
.download-list .download-content {
padding: 10px 0px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.download-list .download-content div {
float: left;
width: 33.3%;
}
.download-list .download-info {
text-align: right;
}
/* cart */
.cart-info table {
width: 100%;
margin-bottom: 15px;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
.cart-info td {
padding: 7px;
}
.cart-info thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.cart-info thead .image {
text-align: center;
}
.cart-info thead .name, .cart-info thead .model, .cart-info thead .quantity {
text-align: left;
}
.cart-info thead .price, .cart-info thead .total {
text-align: right;
}
.cart-info tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.cart-info tbody .image img {
border: 1px solid #DDDDDD;
}
.cart-info tbody .image {
text-align: center;
}
.cart-info tbody .name, .cart-info tbody .model, .cart-info tbody .quantity {
text-align: left;
}
.cart-info tbody .quantity input[type='image'], .cart-info tbody .quantity img {
position: relative;
top: 4px;
cursor: pointer;
}
.cart-info tbody .price, .cart-info tbody .total {
text-align: right;
}
.cart-info tbody span.stock {
color: #F00;
font-weight: bold;
}
.cart-module > div {
display: none;
}
.cart-total {
border-top: 1px solid #DDDDDD;
overflow: auto;
padding-top: 8px;
margin-bottom: 15px;
}
.cart-total table {
float: right;
}
.cart-total td {
padding: 3px;
text-align: right;
}
/* checkout */
.checkout-heading {
background: #F8F8F8;
border: 1px solid #DBDEE1;
padding: 8px;
font-weight: bold;
font-size: 13px;
color: #555555;
margin-bottom: 15px;
}
.checkout-heading a {
float: right;
margin-top: 1px;
font-weight: normal;
text-decoration: none;
}
.checkout-content {
padding: 0px 0px 15px 0px;
display: none;
overflow: auto;
}
.checkout-content .left {
float: left;
width: 48%;
}
.checkout-content .right {
float: right;
width: 48%;
}
.checkout-content .buttons {
clear: both;
}
.checkout-product table {
width: 100%;
border-collapse: collapse;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.checkout-product td {
padding: 7px;
}
.checkout-product thead td {
color: #4D4D4D;
font-weight: bold;
background-color: #F7F7F7;
border-bottom: 1px solid #DDDDDD;
}
.checkout-product thead .name, .checkout-product thead .model {
text-align: left;
}
.checkout-product thead .quantity, .checkout-product thead .price, .checkout-product thead .total {
text-align: right;
}
.checkout-product tbody td {
vertical-align: top;
border-bottom: 1px solid #DDDDDD;
}
.checkout-product tbody .name, .checkout-product tbody .model {
text-align: left;
}
.checkout-product tbody .quantity, .checkout-product tbody .price, .checkout-product tbody .total {
text-align: right;
}
.checkout-product tfoot td {
text-align: right;
border-bottom: 1px solid #DDDDDD;
}
.contact-info {
overflow: auto;
}
.contact-info .left {
float: left;
width: 48%;
}
.contact-info .right {
float: left;
width: 48%;
}
.sitemap-info {
overflow: auto;
margin-bottom: 40px;
}
.sitemap-info .left {
float: left;
width: 48%;
}
.sitemap-info .right {
float: left;
width: 48%;
}
/* footer */ 
#footer-container { 
margin-left: auto;
margin-right: auto;
text-align: left;
width: 980px;
}
#footer {
clear: both;
width:980px;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 10px solid #000000;
border-bottom: 10px solid #000000;
background:url("../image/foot.png") repeat;
}
#footer h3 {
color: #000000;
font-family: 'Lato', sans-serif;
text-transform:uppercase;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column {
float: left;
width: 25%;
min-height: 100px;
}
#footer .column ul {
margin-top: 0px;
margin-left: 8px;
padding-left: 12px;
}
#footer .column ul li {
margin-bottom: 3px;
}
#footer .column a {
text-decoration: none;
color: #000;
}
#footer .column a:hover {
text-decoration: underline;
}
#powered {
margin-top: 5px;
text-align: right;
clear: both;
}
/* banner */
.banner div {
text-align: center;
width: 100%;
display: none;
}
.banner div img {
margin-bottom: 20px;
}

 

Toby

where is this ?

 

#footer-container { 
margin-left: auto;
margin-right: auto;
text-align: left;
width: 980px;
}

 

in ur css?

if you scroll down to footer in the css you will see it,its near the bottom

 

Kind Regards

 

 

Toby

try this in ur footer.tpl

 

</div>

<div id="footer">
<div id="footer-container">
 <?php if ($informations) { ?>
<div class="column">
   <h3><?php echo $text_information; ?></h3>
   <ul>
     <?php foreach ($informations as $information) { ?>
     <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
     <?php } ?>
   </ul>
 </div>
 <?php } ?>
 <div class="column">
   <h3><?php echo $text_service; ?></h3>
   <ul>
     <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
     <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
     <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
   </ul>
 </div>
 <div class="column">
   <h3><?php echo $text_extra; ?></h3>
   <ul>
     <li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
     <li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
     <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
     <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
   </ul>
 </div>
 <div class="column">
   <h3><?php echo $text_account; ?></h3>
   <ul>
     <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
     <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
     <li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
     <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
   </ul>
 </div>
</div><!--footer-container-->[/color]
</div>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->
<div id="powered"><?php echo $powered; ?></div>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->

</body></html>

Edited July 11, 201214 yr by sash_oo7

why u added one extra footer-container class? in the footer.tpl?

 

try my footer.tpl in my last post

 

and change

 

#footer {
       clear: both;
       width:980px;
       overflow: auto;
       min-height: 100px;
       padding: 20px;
       border-top: 10px solid #000000;
       border-bottom: 10px solid #000000;
       background:url("../image/foot.png") repeat;
       }

this to

 

this in ur css

#footer {
       clear: both;
       width:100%;
       overflow: auto;
       min-height: 100px;
       padding: 20px;
       border-top: 10px solid #000000;
       border-bottom: 10px solid #000000;
       background:url("../image/foot.png") repeat-x;
       }

Edited July 11, 201214 yr by sash_oo7

Hi

 

Sorry for the late reply, as you may have seen it is working great now, thank you very much, most appreciated

 

Toby

Edited July 11, 201214 yr by tintin102

also set ul li style to none in footer and change anchor text color according to ur needs

Hi

 

I have changed the text color using the .column a class, is there any difference between this and the anchor text?

 

Also for some reason I am having trouble editing some other text on the website, it is the category-list .div a class

 

either it is the wrong class I am editing or something else, I am basically wanting to change the color of the text in the category-list div. I think I may be editing the wrong div as I see that the text is a bog standard link so it is inheriting its style from different places. I may have to create a new div and then customize it?

 

Kind Regards

 

Toby

what css u used to change the colors?

using stylesheet.css

 

line 1676

 

#footer .column a
text-decoration: none;
color: #b0b0b0;

 

Toby

#footer-container .column ul li a {
text-decoration: none;
color: #b0b0b0;
}

get rid of so much padding and margin on footer ul so that they be aligned with header?

 

#footer .column ul { 
list-style: none outside none;
margin-left: 8px;/*reduce*/
margin-top: 0px;
padding-left: 12px;/*no need*/
}

Cheers for that looks better now

 

One Last question , I am wanting to create a header bar at the top of the page like this:http://harnishdesign.net/my-theme/opencart/index.php?route=common/home

 

Now I can either do it 2 ways

 

1.Just add a bar to the background and then reposition the items, this is the quick and easy way

 

2. Or I can create a new class + div, this is the long way but better way, I think

 

Are those how you would go about doing it? Which one would you go for

 

Sorry for all of the questions

 

Toby

ya i would go with second way thats more semantically correct

Ok cheers

 

I am going to create a new div and then in order for it to be added to the header do i need to go into the header.tpl?

 

Toby

yes

Hi again

 

Thanks for your help btw for all the previous stiff, I now have a new problem,on the homepage when you click on the shopping cart button the drop down occurs however as soon as you hover over the search bar the shopping cart dissapears. Now I think it is to do with the z-index however I have played around with the index and nothing has changed, any ideas?

 

www.airsoft4you.com

 

Kind Regards

 

Toby