* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color: #d6eaf1;
 margin-top: 10px;
 background-image:url(../images/bg-shadow.jpg); background-position:top center; background-repeat:no-repeat; background-attachment:fixed;
 }
 
a { outline: none; }

#wrapper { 
 width: 960px;
 margin: 0 auto;
 background-color:#fff;
}

/* HEADER */

#header {
 color: #333;
 width: 940px;
 float: left;
 padding: 10px;
 height: 125px;
 margin: 0px 0px 0px 0px;
 background-color:#FFF;
}

#headermenu {
 float: right;
 width: 600px;
 height: 18px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 text-align: right;
 color: #666;
 margin: 18px 5px 0 0;
 padding: 0px;
}

#headermenu a{ color:#7799a4; text-decoration:none; font-weight:bold; padding: 2px; }
#headermenu a:hover{ text-decoration:underline; }

#headersocial {
 float: right;
 width: 40px;
 height: 18px;
 margin: 18px 13px 0 0;
 padding: 0px;
}

#headerbanner {
 float:right; width:572px; height: 70px; margin:10px 10px 0 5px;
}

/* NAVIGATION */

#navigation {
 float: left;
 width: 950px;
 color: #333;
 padding: 10px 5px;
 margin: 0px 0px 0px 0px;
 border-bottom: 1px solid #e1e1e1;
 background-image:url(../images/bg-navigation.gif); background-position:bottom left; background-repeat:repeat-x;
}

.topnavtabs{
float: left;
padding: 0px;
margin-left: 5px;
font: 14px arial;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.topnavtabs li{
display: inline;
margin: 0;
}

.topnavtabs li a{
text-decoration: none;
padding: 9px 18px;
margin-left: 1px;
color: #252525;
}

.topnavtabs li a:hover{
color: #252525;
background-color:#e3e3e3;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; 
border-top-left-radius: 5px; border-top-right-radius: 5px;
}

.topnavtabs li.selected a{ /*selected tab effect*/
position: relative;
color: #fff;
background-color:#9e0b0f;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; 
border-top-left-radius: 5px; border-top-right-radius: 5px;
}

/* HERO IMAGES */

#hero { 
 color: #333;
 background: #fff;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 450px;
 width: 960px;
 float: left;
 border-top: 1px solid #b6b6b6;
 border-bottom: 1px solid #b6b6b6;
}

#herosub { 
 color: #333;
 background: #fff;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 width: 960px;
 float: left;
 border-top: 1px solid #e1e1e1;
}

#herosubitem {
 float:left;
 width:225px;
 margin: 6px;
}

#herosubitem h3{ padding: 2px 10px; font: Arial, Helvetica, sans-serif; font-size:14px; color:#7799a4; }
#herosubitem p{ padding: 2px 10px; font: Arial, Helvetica, sans-serif; font-size:11px; line-height: 150%; color:#252525; }
#herosubitem p.price{ padding: 10px 10px 0px 10px; font: Arial, Helvetica, sans-serif; font-size:12px; color:#7799a4; text-decoration:line-through; }
#herosubitem p.discount{ padding: 0px 10px 2px 10px; font: Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#7799a4; }
#herosubitem a{ color:#7799a4; text-decoration:none; }
#herosubitem a:hover{ text-decoration:underline; }
#herosubitem img {margin: 10px 3px;}

/* HOME CONTENT */

#content{
 width: 940px;
 float: left;
 color: #333;
 background: #fff;
 margin: 0px;
 padding: 10px;
}

#content h1{ padding: 10px; font: Arial, Helvetica, sans-serif; font-size:24px; color:#7799a4; }
#content h2{ padding: 10px; font: Arial, Helvetica, sans-serif; font-size:18px; color:#7799a4; }
#content h3{ padding: 10px; font: Arial, Helvetica, sans-serif; font-size:16px; color:#7799a4; }
#content p{ padding: 10px; font: Arial, Helvetica, sans-serif; font-size:14px; color:#252525; line-height: 175%; }
#content ul{ margin-left: 45px; font: Arial, Helvetica, sans-serif; font-size:14px; color:#252525; line-height: 175%; }
#content a{ font: Arial, Helvetica, sans-serif; font-size:14px; color:#7799a4; text-decoration:none; font-weight:bold; }
#content a:hover { color:#7799a4; text-decoration:underline; }

#blocks{
 width: 940px;
 float: left;
 color: #333;
 background: #fff;
 margin: 0px;
 padding: 10px;
}

#blocks img {float: left; margin: 8px; padding: 5px; border: 1px solid #CCC; }

/* PRODUCT DISPLAY */

#productcontainer { 
 width: 940px;
 color: #333;
 background: #fff;
 margin: 0px;
 padding: 10px;
 float: left;
}

#productcontainer h1{ padding: 10px; font: Arial, Helvetica, sans-serif; font-size:24px; color:#7799a4; }

#productrow { width:100%; float:left; }
#productbox { float:left; width: 200px; margin: 10px; padding: 5px; border: 1px solid #CCC; position: relative; }
#productbox li { font-size:10px; list-style:none; margin-left: -15px;}
#productbox img.tn { padding-bottom: 10px; border-bottom: 1px solid #CCC; border-top: none; border-left: none; border-right: none; }
#productbox img:hover.tn { cursor: url(http://www.loadsofliving.co.za/icons/zoom.cur), pointer; }
#tagnew { background-color:#000; padding: 5px; margin: 0px; position:absolute; top: 10px; left: -5px; color: #fff; font-size: 10px; }
#tagsale { background-color:#F00; padding: 5px; margin: 0px; position:absolute; top: 10px; left: -5px; color: #fff; font-size: 10px; }

/* PRODUCT SPLASH */

#productsplash {
 float:right;
 margin: 20px 10px;
 }
 
#productsplash p { font-family:Arial, Helvetica, sans-serif; font-size: 10px; color: 252525; text-align:center; margin: 0px; padding:0px;}
#productsplash a { font-size: 10px; color: #7799a4; text-decoration:none;}
#productsplash a:hover { text-decoration: underline;}

/* APPLICATION FORMS */

#applicationforms {
 float:right;
 width: 275px;
 padding: 5px;
 margin: 5px 10px;
 background-color: #e3f0f4;
 border: 1px solid #7799a4;
 }
 
#applicationforms img { margin: 15px 5px 0 0;}

/* NEWSLETTERS */

#newsletter {
 float:left;
 width: 435px;
 padding: 5px;
 margin: 10px;
 background-color: #e3f0f4;
 border: 1px solid #7799a4;
 }
 
#newsletter img { margin: 5px 10px 0 10px;}

/* STORE LOCATOR */

#storelocator { width:915px; border-top: 1px solid #CCC; padding: 10px; margin: 10px 0 0 0; }
#storelocator h3 { padding: 10px; font: Arial, Helvetica, sans-serif; font-size:16px; color:#252525; }
#storelocator img { border: 1px solid #CCC; margin:10px 20px; padding: 3px;}

/* FOOTER */

#footer { 
 width: 958px;
 float: left;
 color: #fff;
 /* background: #d6ebf2;*/
 margin: 0px 0px 10px 0px;
 padding: 10px 0 0 0;
 border-top: 1px solid #b4cdd5;
}

#footer h2{ padding: 2px 10px; font: Arial, Helvetica, sans-serif; font-size:20px; color:#7799a4; }
#footer h3{ padding: 2px 10px; font: Arial, Helvetica, sans-serif; font-size:14px; color:#7799a4; }
#footer p{ padding: 2px 10px; font: Arial, Helvetica, sans-serif; font-size:11px; line-height: 150%; color:#777; }
#footer a{ color:#7799a4; text-decoration:none; }
#footer a:hover{ text-decoration:underline; }

#footeradvice {
 width: 290px;
 float:left;
 margin: 10px 10px 5px 10px;
 padding: 0px;
 text-align:center;
 /* border-right: 1px solid #777; */
}

#footerebucks {
 width: 290px;
 float:left;
 margin: 10px 10px 5px 10px;
 padding: 0px;
 text-align:center;
 /* border-right: 1px solid #777; */
}

#footerrcs {
 width: 290px;
 float:left;
 margin: 10px 10px 5px 10px;
 padding: 0px;
 text-align:center;
}

#footerbtm {
 float:left;
 width: 940px;
 margin: 10px;
 padding: 20px 0 0 0;
 background-image: url(../images/bg-footer.png); background-position:top center; background-repeat:no-repeat;
}

#footerlinks {
 float:left;
 width: 680px;
}

#footerlinks p{ padding: 2px 10px; font: Arial, Helvetica, sans-serif; font-size:12px; line-height: 150%; color:#777; }
#footerlinks a{ color:#777; text-decoration:none; }
#footerlinks a:hover{ text-decoration:underline; }

#webguru {
 float:right;
 width: 220px;
}

#webguru p{ padding: 2px 10px; font: Arial, Helvetica, sans-serif; font-size:12px; line-height: 150%; color:#777; text-align:right; }
#webguru a{ color:#777; text-decoration:none; }
#webguru a:hover{ text-decoration:underline; }
