﻿/* *************************************************************************
Title : CSS main styles
Author : Atomic Studio

CSS TOC
=HTML SELECTORS
=LAYOUT
=NAVIGATION
=SECTION SPECIFIC
************************************************************************* */

/* =PAGE CONTENT */ 
@import url("content.css");

/* html tags {{1 */


* {margin: 0;padding: 0;}

html {min-height:100%;}

/* General Tag specifications */
BODY {min-height:100%;color: #333333; font-family: Century Gothic, Arial, sans serif; font-size: 10pt;text-align:center; background-color: #D4D4D4; /* for IE */margin:0 auto; /* for the rest */ }

}
P {
    color: #575757;
    font: 85%/116% arial, sans;
}
A {
    text-decoration: none;
}
HR {
    clear:both;
    height: 1px;
    border: none;
    border-top: 1px solid #DDDDDD;
}




/* Info Box WITHOUT Headings */
.CPbox1            {color: #333333}
.CPbox1 A:link     {color: #333333; font-size: 8pt; text-decoration: none}
.CPbox1 A:visited  {color: #333333; font-size: 8pt; text-decoration: none}
.CPbox1 A:hover    {color: #996666; font-size: 8pt; text-decoration: underline}

/* Info Box WITH Headings ( H = Heading cell ; B = Body cell ) */
.CPbox2            {color: #333333}
.CPbox2H           {color: #333333; padding: 1px}
.CPbox2H B         {color: #333333;}
.CPbox2B           {color: #333333;}
.CPbox2B A:link    {color: #333333; font-size: 10px; text-decoration: none}
.CPbox2B A:visited {color: #333333; font-size: 10px; text-decoration: none}
.CPbox2B A:hover   {color: #996666; font-size: 10px; text-decoration: underline}


.CPbox2HProdView   {color: #333333; border: 1px solid #c9c9c9; padding: 10px;}
.CPbox2BProdView   {color: #333333; padding: 1px}


.CPbox4            {color: #333333}
.CPbox4 A:link     {color: #333333; font-size: 14pt; font-weight: normal; text-decoration: none}
.CPbox4 A:visited  {color: #333333; font-size: 14pt; font-weight: normal; text-decoration: none}
.CPbox4 A:hover    {color: #996666; font-size: 14pt; font-weight: normal text-decoration: underline}


.CPbox5            {color: #333333}
.CPbox5 A:link     {color: #333333; font-size: 20pt; font-weight: normal; text-decoration: none}
.CPbox5 A:visited  {color: #333333; font-size: 20pt; font-weight: normal; text-decoration: none}
.CPbox5 A:hover    {color: #996666; font-size: 20pt; font-weight: normal text-decoration: underline}


.CPCatbox            {color: #333333}
.CPCatbox A:link     {color: #333333; font-size: 16pt; font-weight: bold; text-decoration: none}
.CPCatbox A:visited  {color: #333333; font-size: 16pt; font-weight: bold; text-decoration: none}
.CPCatbox A:hover    {color: #996666; font-size: 16pt; font-weight: bold text-decoration: underline}


/* Box - General Headings */
.CPgenHeadings {BACKGROUND-COLOR: #EEEEEE}


/* Category List */
.CPcatDescList {}

/* Category Description - No products linked to it */
.CPcatDesc {}

/* Category Description - Has products linked to it */
.CPcatDescProd {font-size: 16px}



/* simple classes {{1 */
.blue { color: #3FA4E7 !important }
.orange { color: #C47E47 !important }
.nocss { display: none }
.left { float: left; }
.right { float: right;}
.display-none { display: none }
.display-block { display: block }
.visible { visibility: visible }
.invisible { visibility: hidden}
.clear-both { clear: both;overflow: auto;}
.nomargin { margin:0;}



/* site-wide classes {{1 */
.page-content { 
    margin-top: 0;
    top: 5px;
    clear: both;
    overflow: auto;
}

/* content boxes {{2 */

.box-top-907, .box-top-596, .box-top-299 {
    margin-bottom: 10px;
    overflow-x: hidden;
}
.box-top-907 {
    /* adjust width for DIV.content padding */
    width: 873px;
    background: #FFF url('icontent-box-top-907px.png') no-repeat 0 top;
}
.box-top-596 {
    /* adjust width for DIV.content padding */
    width: 562px;
    background: #FFF url('img/content-box-top-596px.png') no-repeat 0 top;
}
.box-top-299 {
    /* adjust width for DIV.content padding */
    width: 265px;
    background: #FFF url('img/content-box-top-299px.png') no-repeat 0 top;
}
.box-bottom-907, .box-bottom-596, .box-bottom-299 {
    overflow: hidden;
    height: 6px;
    margin-left: -17px;
    margin-top: 20px;
    overflow-x: hidden;
}
.box-bottom-907 {
    width: 907px;
    background: #FFF url('img/content-box-bottom-907px.png') no-repeat 0 top;
}
.box-bottom-596 {
    width: 596px;
    background: #FFF url('img/content-box-bottom-596px.png') no-repeat 0 top;
}
.box-bottom-299 {
    width: 265px;
    background: #FFF url('img/content-box-bottom-299px.png') no-repeat 0 top;
}



/* DIV.content {{2 */
DIV.content {
    padding: 0 17px;
    padding-top: 12px;
}
DIV.content A {
    color: #C44747
}
DIV.content A:hover {
    text-decoration: underline;
}
DIV.content UL {
    margin: -2px 0 16px 0;
}
DIV.content UL LI {
    background: url('../link-list-bullet.png') no-repeat 0 6px;
    padding-left: 10px;
    font-size: 85%;
    line-height: 153.9%;
    margin-bottom: 5px; list-style-type:none
}
DIV.content H1 {
    color: #AF0000;
    line-height: 23px;
}
DIV.content H2 {
    color: #000000;
    line-height: 16px;
}
DIV.content H3 {
    color: #000000;
    line-height: 14px;
}
DIV.content H1 {
    font-size: 153.9%;
    font-weight: bold;
    margin: 10px 0 5px 0;
}
DIV.content H2 {
    font-size: 105%;
    font-weight: bold;
    margin: 10px 0 5px 0;
}
DIV.content H3 {
    font-size: 105%;
    font-weight: bold;
    margin: 10px 0;
}
DIV.content H3.subtitle {
    font-size: 116%;
    font-weight: normal;
    color: #626262;
    margin-top: -12px;
}
DIV.content H4 {
    color: #4993C5;
    font-size: 85%;
    font-weight: normal;
    margin-bottom: 0.5em;
}






/* page elements {{1 */
#wrapper { 
    width: 907px;
    margin: 0 auto;
}



/* header {{2 */
#header {
height: 80px;
overflow: hidden;
background: url('img/header-bg.gif') repeat-x 0 0;
}

#logo {
float: left;
width: 133px;
height: 76px;
margin: 0;
background: url('img/home_logo.gif') repeat-x 0 0;
}

#logo A {
    float: left;
    width: 100%;
    height: 100%;
}

#contact {
    font-size: 85%;
    font-weight: normal;
    color: #707070;
    margin: 10px 0px 3px 0px;
}
#header-contact {
    margin-top: 15px;
    margin-left: 70px;
    float: left;
}


/*#header-contact H2:hover {
    color: #F37321;
}*/




#header-search {
    margin-top: 25px;
    padding: 0 70px;
}




#header P {
font-weight: bold;
font-size: 85%;
margin: 0;
line-height: 18px;
}

#header DIV.item P {
color: #252525;
}

#header-cart {
margin-top: 20px;
padding: 0 4px;
}

/*#header-cart H2:hover {
    color: #F37321;
}*/



/* Navigation */

#outside{
border:1px solid #000000;
background:#000000;
z-index: 1000;
}

#navigation-1 {
padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 8pt verdana, arial, helvetica;
}

#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:148px;
}

#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#000000;
color:#ffffff;
width:148px;
height:13px;
}

#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background:#666666;
color:#ffffff;
width:146px;
height:13px;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
}

#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:146px;
position:absolute;
top:21px;
left:-1px;
border:1px solid #000000;
border-top:none;
}

#navigation-1 li:hover ul.navigation-2 {
display:block;
}

#navigation-1 li ul.navigation-2 li {
width:146px;
clear:left;
width:146px;
}

#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#000000;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}

#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#666666;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #000000;
border-left:1px solid #000000;
background:#ffffff;
z-index:900;
}

#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#000000;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#666666;
}

#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}

#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}





/* Website Footer */

#footer {
    overflow: auto;
    clear: both;
    width: 907px;
    padding: 4px 0 15px 0;
}
#footer P {
    margin-bottom: 0;
    font-size: 80%;
}



