﻿/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.#.com/
   TEMPLATE NAME:  NAME OF COMAPNY
   DATE:           Mar-28th-2008
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0 auto;
padding: 0px;
height: 100%; 
background-image: url('/images/bg.gif');
} 

img{border: none}
	

/* ----------Centered Container Or the Layout--------------------- */

#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
width: 1000px;
} 


/* --------------LABELS BUTTONS & FORMS-----------*/
 
label {
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #777;
}
 
.form, textarea {
width: 20em;
border: 1px solid #777;
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #5b3c25;
padding: 2px;
margin-bottom: 20px;
text-align: left;
}
 
.button {
width: 6em;
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #fff;      
background: #4fc2f0;
padding: 4px 5px;
border: 1px solid #46a1c6;
}

/* --------------HEADER------------- */

#header {
background-image: url('/images/logo.gif');
height: 251px;
width: 1000px;

}

/* --------------LOGO IN HEADER *always use this*------------- */

.logolink {
background-image: url('/images/logo.gif');
background-repeat: no-repeat;
height: 251px;
width: 1000px;
}
 
.logolink a { float: left;  }
 
#swap {background-image: url(/images/logo.gif);  width: 1000px;  height: 251px;  }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */

/* --------------TOPNAV------------- */

#topnav {
background-image: url('/images/topnavbg.gif');
height: 44px;
width: 887px;
margin-left: 56px;
}

#topnav .search {
width: 300px;
background: url('/images/search.gif') no-repeat;
float: left;
padding: 8px 0px 0px 37px;
text-align: center;
}

#topnav .navimages {
height: 44px;
width: 550px;
float: right;
}

#topnav .navimages a { float: left; }

#swap01 {background-image: url(/images/home2.gif);  width: 78px;  height: 35px; }
#swap02 { background-image: url(/images/customerservice2.gif); width: 160px;  height: 35px; }
#swap03 { background-image: url(/images/registry2.gif); width: 90px;  height: 35px; }
#swap04 { background-image: url(/images/aboutus2.gif); width: 103px;  height: 35px; }
#swap05 { background-image: url(/images/contactus2.gif); width: 119px;  height: 35px; }


.rollover { display: inline; } /* Allow setting widths and heights */
.rollover img { height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */





/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/

#main {
min-height: 100%; 
height: auto !important; 
height: 100%; 
width: 887px;
margin-left: 56px;
background: #fff url('/images/mainbg.gif');
}

#main .content {
margin-left: 242px;
padding-top: 25px;
padding-bottom: 25px;
margin-right: 25px;
min-height: 0px; 
font:  10pt 'century gothic', Sans-Serif;
color: #5b3c25;
}

#main .content a {
color: #3e88d1;
font:  10pt 'century gothic', Sans-Serif;
}

#main .content a:hover {
color: #a7c603;
}


#main .content h1 {
color: #aecf00;
font:  bold 14pt 'century gothic', Sans-Serif;
}

#main .content h2 {
color: #3e88d1;
font:  bold 14pt 'century gothic', Sans-Serif;
}


#main ol{
padding: 30px 30px 30px 50px;
}

#main ol li{
padding: 5px;
}


#main ul.bullet{
padding: 5px 15px 0px 15px;
}

#main .bullet li{
background: url(/images/pinkarrow.gif) no-repeat;
padding-left: 20px;
list-style-type: none;
display: block;
padding-top: 10px;
color: #fb3b82;
}

#main .bullet li a{
color: #fb3b82;
text-decoration: underline;
font: bold 10pt 'century gothic';
padding-top: 25px;
}

#main .bullet li a:hover{ /*hover state CSS*/
color: #fd87b3;
}

.pageheader {
background: url('/images/pghdbg.gif') repeat-x;
height: 29px;
width: 630px; 
margin-bottom: 20px;
clear: right;
}

.cartdisplay {
width: 620px; 
}

.homecategories {
width: 575px; 
}


.picright {
float: right;
width: 300px;
margin-left: 25px;
}


#main .navleft {
float:left; 
width: 192px;
margin-top: 25px;
margin-left: 25px;
padding: 0px;
}

.shoppingbag {
width: 192px;
background: url('/images/shoppingbag.gif') no-repeat;
padding: 65px 0px 0px 10px;
text-align: left;
color: #5b3c25;
font: bold 10pt 'century gothic', Sans-Serif;
}

.minibasket {
width: 107px;
float: right;
padding-left: 10px;
}

.viewbag {
float: left;
width: 75px;
}

.products {
width: 192px;
background: url('/images/products.gif') no-repeat;
float: left;
padding: 65px 0px 0px 0px;
margin-top: 25px;
text-align: left;
color: #5b3c25;
font: bold 10pt 'century gothic', Sans-Serif;
}

.vendortext {
width: 192px;
float: left;
text-align: left;
color: #eb6396;
font: bold 11pt 'century gothic', Sans-Serif;
height: 20px;
}

#vendorsearchbutton{
float: right;
}


#cbxvendor {
float: left;
color: #5b3c25;
font: 8pt 'century gothic', Sans-Serif;
}

#vendorsearchform {
height: 20px;
}


#main .bottom {
width: 885px;
height: 27px;
margin-left: 1px;
background: url('/images/footerbg.gif') repeat-x bottom;
}

#main .top {
width: 885px;
height: 6px;
margin-left: 1px;
background: url('/images/topedge.gif') repeat-x;
}


/* --------------FOOTER------------- */

.clear {
clear: left;
}

#footer, .push { 
clear: both;
width: 887px;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer {
background-color: #6e4a2f;
padding: 18px 0px 18px 18px;
height: auto;
min-height: 100px;
width: 869px;
margin-left: 56px;
}


#SEO {
height: auto;
text-align: left;
min-height: 30px;
width: 750px;
color: #6e4a2f;
font: 8pt 'century gothic', Sans-Serif;
}




#SEO2 {
height: auto;
text-align: center;
min-height: 30px;
width: 750px;
color: #6e4a2f;
font: 8pt 'century gothic', Sans-Serif;
}


#SEO a{
color: #6e4a2f;
text-decoration: none;
font: 8pt 'century gothic', Sans-Serif;
}



#SEO2 a{
color: #6e4a2f;
text-decoration: none;
font: 8pt 'century gothic', Sans-Serif;
}

#footer .content { 
margin: 0 auto; 
position: relative; 
}

/* --------------FOOTER INFO------------- */

#footer .customerservice { 
width: 175px; 
float: left;
height: 100px;
color: #d5e781;
font: bold 12pt 'century gothic', Sans-Serif;
line-height: 17px;

}

#footer .customerservice a{ 
text-decoration: none;
color: #fff;
font: 8pt 'century gothic', Sans-Serif;
}

#footer .customerservice a:hover{ 
text-decoration: none;
color: #d5e781;
}

#footer .shop { 
width: 501px; 
float: left;
background: url(/images/footerdash.gif) repeat-y;
height: 100px;
color: #d5e781;
font: bold 12pt 'century gothic', Sans-Serif;
line-height: 17px;
}

#footer .shop1 { 
width: 161px; 
float: left;
padding-left: 18px;

}

#footer .shop2 { 
width: 161px; 
float: left;
padding-top: 17px;

}

#footer .shop3 { 
width: 161px; 
float: right;
padding-top: 17px;
}



#footer .shop a{ 
text-decoration: none;
color: #fff;
font: 8pt 'century gothic', Sans-Serif;
}

#footer .shop a:hover{ 
text-decoration: none;
color: #d5e781;
}

#footer .aboutus { 
width: 175px; 
margin: 0px; 
float: right;
background: url(/images/footerdash.gif) repeat-y;
height: 100px;
padding-left: 18px;
color: #d5e781;
font: bold 12pt 'century gothic', Sans-Serif;
line-height: 17px;
}

#footer .aboutus a{ 
text-decoration: none;
color: #fff;
font: 8pt 'century gothic', Sans-Serif;
}

#footer .aboutus a:hover{ 
text-decoration: none;
color: #d5e781;
}



/* --------------FOOTER LINKS------------- */

#footerlinks {
text-align: center;
}


#footerlinks ul {
padding: 10px;
}


#footerlinks li {
display: block;
list-style-type: none;
}

#footerlinks li a {
color: #6e4a2f;
text-decoration: none;
padding: 0px 5px 0px 5px;
font: 8pt 'century gothic', Sans-Serif;
}

#footerlinks li a:hover {
text-decoration: underline;
}


/* ----------CART--------------------- */

table, td, tr { border: none; font: 10pt 'Century Gothic', Sans-serif; color: #5b3c25}
table b { color: #65604c; }
table a, tr a, td a, font a, .content table a {color: #3e88d1; font: 10pt "century gothic", Helvetica, Arial, Sans-Serif; }
table a:hover, tr a:hover, td a:hover, font a:hover, .content table a:hover {color: #3e88d1;}
table hr {border: none; border-bottom: 1px solid #a77c5b; height: 0px;}
font img { border: 0px margin-right: 10px; }


/* ----- NAVIGATION BAR ---------- */
.suckerdiv ul{
margin: 0;
margin-bottom: 300px;
padding: 0;
list-style-type: none;
width: 150px; /* Width of Menu Items */
background: #;
font: bold 10pt 'Century Gothic', Sans-serif;
color: #5b3c25;
height: 100%;
height: auto;
min-height: 100%;
}
	
.suckerdiv ul li{
position: relative;
padding: 2px 0px 3px 0px
}

	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 150px; /*sub menu width*/
top: 0;
visibility: hidden;
border: 1px solid #fff;
background: #3e88d1;
color: #fff;
padding: 0px 0px 0px 5px;
}

.suckerdiv ul li ul a {
color: #fff;
}

.suckerdiv ul li ul a:hover {
color: #fff;
text-decoration: underline
}

.suckerdiv ul li ul a:visited {
color: #fff;
}



/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #5b3c25;
text-decoration: none;
padding: 3px 0px 3px 0px;
border: 0px;
border-bottom: 1px solid #fff;
font: bold 9pt 'Century Gothic', Sans-serif;
}

.suckerdiv ul li a:visited{
text-decoration: none;
font: bold 9pt 'Century Gothic', Sans-serif;
}

.suckerdiv ul li a:hover{
text-decoration: underline;
color: #3e88d1;
font: bold 9pt 'Century Gothic', Sans-serif;
}

.suckerdiv .subfolderstyle{
}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */



/* ----------Featured Products--------------------- */

#featuredproducts { 
height: auto !important; 
height: 400px; 
} 

#featuredproducts .left { 
float: left;
width: 285px;
margin-bottom: 15px;
} 

#featuredproducts .right { 
float: right;
width: 285px;
margin-bottom: 15px;

} 

#featuredproducts .pic { 
float: left;
border: 1px solid #6e4a2f;
margin-right: 10px;
width: 130px;
text-align:center;
background-color: #fff;
} 

#featuredproducts .desc { 
float: left;
font: 8pt 'Century Gothic', Sans-serif;
color: #fff;
width: 140px;
line-height: 14px;

} 

#featuredproducts .title { 
float: left;
font: bold 12pt 'Century Gothic', Sans-serif;
color: #fff;
letter-spacing: 1px;
width: 140px;
} 

#featuredproducts .desc a{ 
float: left;
font: bold 8pt 'Century Gothic', Sans-serif;
color: #fff;
text-decoration: underline;
} 

#featuredproducts .desc a:hover{ 
float: left;
font: bold 8pt 'Century Gothic', Sans-serif;
color: #5b3c25;
text-decoration: underline;
} 











/* --------------FOOTER INFO HTMLCATALOG------------- */


#footerhc, .push { 
clear: both;
width: 887px;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footerhc {
background-color: #6e4a2f;
padding: 18px 0px 18px 18px;
height: auto;
width: 869px;
text-align: left;
margin-top: 50px;
}

#footerhc .content { 
margin: 0 auto; 
position: relative; 
}

#footerhc .customerservice { 
width: 175px; 
float: left;
height: 100px;
color: #d5e781;
font: bold 12pt 'century gothic', Sans-Serif;
line-height: 17px;

}

#footerhc .customerservice a{ 
text-decoration: none;
color: #fff;
font: 8pt 'century gothic', Sans-Serif;
}

#footerhc .customerservice a:hover{ 
text-decoration: none;
color: #d5e781;
}

#footerhc .shop { 
width: 501px; 
float: left;
background: url(/images/footerdash.gif) repeat-y;
height: 100px;
color: #d5e781;
font: bold 12pt 'century gothic', Sans-Serif;
line-height: 17px;
}

#footerhc .shop1 { 
width: 161px; 
float: left;
padding-left: 18px;

}

#footerhc .shop2 { 
width: 161px; 
float: left;
padding-top: 17px;

}

#footerhc .shop3 { 
width: 161px; 
float: right;
padding-top: 17px;
}



#footerhc .shop a{ 
text-decoration: none;
color: #fff;
font: 8pt 'century gothic', Sans-Serif;
}

#footerhc .shop a:hover{ 
text-decoration: none;
color: #d5e781;
}

#footerhc .aboutus { 
width: 175px; 
margin: 0px; 
float: right;
background: url(/images/footerdash.gif) repeat-y;
height: 100px;
padding-left: 18px;
color: #d5e781;
font: bold 12pt 'century gothic', Sans-Serif;
line-height: 17px;
}

#footerhc .aboutus a{ 
text-decoration: none;
color: #fff;
font: 8pt 'century gothic', Sans-Serif;
}

#footerhc .aboutus a:hover{ 
text-decoration: none;
color: #d5e781;
}

/* --------------TOPNAV HTML CATALOG------------- */

#topnavhc{
background-image: url('/images/topnavbg.gif');
height: 44px;
width: 887px;
margin-bottom: 50px;

}

#topnavhc .search {
width: 300px;
background: url('/images/search.gif') no-repeat;
float: left;
padding: 8px 0px 0px 50px;
text-align: center;
}

#topnavhc .navimages {
height: 44px;
width: 550px;
float: right;
}

#topnavhc .navimages a { float: left; }

#swap01 {background-image: url(/images/home2.gif);  width: 78px;  height: 35px; }
#swap02 { background-image: url(/images/customerservice2.gif); width: 160px;  height: 35px; }
#swap03 { background-image: url(/images/registry2.gif); width: 90px;  height: 35px; }
#swap04 { background-image: url(/images/aboutus2.gif); width: 103px;  height: 35px; }
#swap05 { background-image: url(/images/contactus2.gif); width: 119px;  height: 35px; }


.rollover { display: inline; } /* Allow setting widths and heights */
.rollover img { height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */





/* ----- Customer Cart TABLES ---------- */
#awscustomertables table{margin: 1em; border-collapse: collapse;}
#awscustomertables td{ padding: .3em; border: 1px #F2F2F2 solid; }
#awscustomertables th{ padding: .3em; border: 1px #F2F2F2 solid; background: #F2F2F2; }
