﻿/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.#.com/
   TEMPLATE NAME:  NAME OF COMAPNY
   DATE:           Mar-28th-2009
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0;
padding: 0px;
height: 100%; 
background: #f0f0f0 url(/images/bg.jpg) repeat-x; /* Main DIV Background Img */
} 


.line { border: none; border-bottom: 1px solid #4e5b28; height: 0px; margin: 0 auto }
.clear { clear: both; }


/* ----------CART--------------------- */
table{  background-color: transparent;}
font, table, tr, td { background-color: transparent;}
table, td, tr {  font: 9pt arial, Arial, sans-serif; color: #00223c; }
td { line-height: 20px; }
table b { color: #d40000; }
table a, tr a, td a, font a, .content table a {color: #d40000; font: 9pt arial, Arial, sans-serif; }
table a:hover, tr a:hover, td a:hover, font a:hover, .content table a:hover {color: #d40000;}
table hr {border: none; border-bottom: 1px solid #444343; height: 0px;}
font img { border: 0px; margin: 0px 15px 15px 0px; }
b { color: #d40000; }

#cart {width: 640px; } 



/* ----------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: 980px;
} 


/* --------------LABELS BUTTONS & FORMS-----------*/
 
label {
font: bold 12px Arial, Sans-serif;
color: #023865;
}
 
.form, textarea {
width: 20em;
border: 1px solid #777;
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #86878b;
padding: 2px;
margin-bottom: 20px;
}
 
.submitbutton { font: bold 12px Arial, Sans-Serif;color: #fff; background-color: #d6001e;padding: 7px 10px 7px 10px;border: 3px solid #bf011b;}


/* --------------HEADER------------- */

#header {height: 151px;}
#header .headermiddle { text-align: center;float: left; width: 300px; padding-top: 40px; color: #013053; font: bold 14px arial, Sans-Serif; margin-left: 90px; }
#header .headermiddle h1{ color: #bf011b; font: bold 16px arial, Sans-Serif;}
#header .newsletter{ float: right; width: 266px;}





/* --------------LOGO IN HEADER *always use this*------------- */

.logolink, #swap { width: 273px; height: 151px; float: left;}
.logolink { background-image: url('/images/logo.gif'); background-repeat: no-repeat;}
.logolink a { float: left;  }
 
#swap { background-image: url(/images/logo.gif); }
 
.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 {height: 70px;background: url(/images/navgraphic.jpg) no-repeat;}


#topnav ul{
padding: 25px 0px 0px 0px; 
width: 650px;
float: right;
margin-right: 50px;
}

#topnav li{list-style-type: none; display: inline; color: #534b4b; padding: 10px 0px 10px 0px;}

#topnav li a{
color: #fff;
text-decoration: none;
font: bold 14px arial, Sans-Serif;
padding: 0px 9px 0px 9px;
border-right: 1px #fff solid;
}

#topnav li a:hover{ color: #fff; background-color:#d6001e ;}


/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/

#main {
min-height: 100%; 
height: auto !important; 
height: 100%; 
background: url(/images/mainbg.png) repeat-y; /* Main DIV Background Img */
padding: 0px 30px 20px 0px;
}

#main .content {
padding: 20px;
margin: 0px;
margin-left: 230px;
margin-right: 0px;
min-height: 500px; /* Height of Background Img */
height: auto;
}

#main h1 {font: 20px arial, Sans-Serif; color: #023865; text-transform:uppercase; margin-bottom: 15px; border-bottom: 1px #023865 solid;}
#main h2 {font: bold 16px arial, Sans-Serif; color: #d6001e; margin-bottom: 15px; }

p {font: 12px arial, Sans-Serif; color: #00223c; margin-bottom: 20px; line-height:20px;}

a{text-decoration: underline; color: #d6001e;}
#main .left {width: 320px; float: left;}
#main .right {width: 320px; float: right;}

#main .right img {float: left; margin: 0px 20px 20px 0px;}


/* --------------LEFT NAVIGATION----------------*/

#navleft {float:left; width: 206px; margin: 0px 0px 0px 23px; padding: 0px; background: url(/images/leftnavbg.jpg) repeat-y;}
#navleft .search{float:left; width: 206px; margin: 0px; padding: 0px; background: url(/images/searchbg.png) repeat-x; height: 80px;}
#navleft .search p{float:left; color: #fff; width: 200px; font: bold 14px arial, Sans-Serif; padding: 12px 0px 0px 10px; margin-bottom: 0px;}
#navleft .search table{float:left; color: #fff; width: 200px; margin-left: 10px;}
#navleft .search td{padding: 0px 5px 0px 0px;}
#navleft INPUT[type="text"]{padding: 4px; width: 10em;}


#navleft .navbar{float:left; width: 206px; margin: 0px; padding: 0px;}


/* --------------FOOTER------------- */

#footer, .push { 
clear: both;
width: 100%;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer {
background: #005da5 url(/images/footerbg.gif) repeat-x;
min-height: 150px;
height: auto;
}

#footer .content { 
width: 960px; 
padding: 20px 0px 0px 0px;
text-align: center;
margin: 0 auto;
}


/* --------------FOOTER LINKS------------- */

#footer ul { padding: 10px 10px 10px 10px;}
#footer .links ul { margin: 0px; padding: 0px;}

#footer .links li {
display: inline;
list-style-type: none;
}

#footer .links li a {
color: #fff;
text-decoration: none;
padding: 0px 10px 0px 10px;
font: 12px arial, Sans-Serif;
}

#footer .links li a:hover { text-decoration: underline; }

#footer .asc ul { margin: 0px; padding: 0px;}
#footer .asc li {display: block;list-style-type: none;}
#footer .asc li a {color: #fff;text-decoration: none;padding: 0px 10px 0px 10px;font: 8px arial, Sans-Serif;}
#footer .asc li a:hover { text-decoration: underline; }


/* --------------FOOTER SEO LINKS------------- */


#footer .seo {
height: auto;
text-align: left;
min-height: 100px;
font: 8pt arial, Sans-Serif;
color: #fff;

}
 

#footer .seo a {
color: #fff;
text-decoration: none;
font: 8pt arial, Sans-Serif;
}



/* --------------NAVBAR------------- */

.suckerdiv ul{
margin-left: 10px;
padding: 0;
list-style-type: none;
width: 180px; /* Width of Menu Items */
}
	
.suckerdiv ul li{
position: relative;
padding: 1px 0px 0px 0px;
z-index: 5;
font: 10px arial, Sans-Serif;
color: #fff
}

	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 177px; /*sub menu width*/
top: 0;
padding: 0px;
visibility: hidden;
border: 1px solid #fff;
background: white;
z-index: 5;
margin-left: -5px;
}

.suckerdiv ul li ul a {
font: bold 12px arial, Helvetica, Sans-Serif;
color: #fff;
background-color: #d40000;
border-bottom: 1px #fff solid;
z-index: 5;

}

.suckerdiv ul li ul a:hover {
color: #fff;
text-decoration: underline;
z-index: 5;
background-color: #024f8d;
}


/* Sub level menu links style */
.suckerdiv ul li a{
color: #fff;
display: block;
padding: 8px 0px;
padding-left: 25px;
text-decoration: none;
font: bold 14px arial, Helvetica, Sans-Serif;
border-bottom: 1px #fff solid;
z-index: 5;

}

.suckerdiv ul li a:hover{
color: #fff;
z-index: 5;
text-decoration: underline;

}



.suckerdiv .subfolderstyle{
}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

#Jan2010{float: left; width: 395px; margin: 0px; padding: 0px;} 



/* ----------Featured Products--------------------- */


#featuredproducts {float: right; width: 260px; background-color: #dee1e3; margin: 0px; height: auto; min-height: 300px; padding-bottom: 20px;} 
#featuredproducts h5{background-color: #023865; font: bold 14px arial, Sans-serif;color: #fff; padding: 10px;} 

#featuredproducts .holder{width: 240px; padding: 10px; margin-bottom: 15px; margin-top: 15px;} 

#featuredproducts img{ 
float: left;
border: 5px solid #b1b9c0 ;
width: 100px;
height: auto;
text-align:center;
} 

#featuredproducts .desc { 
float: right;
width: 120px;
} 

#featuredproducts .desc p{ 
font: 10px arial, Sans-serif;
line-height: 14px;
margin: 7px 0px 7px 0px;
} 



#featuredproducts .desc h1{ 
font: bold 12px arial, Sans-serif;
color: #023865;
margin: 0px;
text-decoration: none;
border: 0px;
} 

#featuredproducts .desc a{ 
font: bold 9px arial, Sans-serif;
color: #d40000;
text-decoration: underline;
} 

#featuredproducts .desc a:hover{ color: #000;} 

/* ----- GREY BOX ---------- */

#greybox{ padding-top: 0px; } 
#greybox p{ color: #fff;font: 12px arial, Sans-serif; margin: 20px 0px 5px 0px;} 
#greybox h1{ color: #fff;font: bold 14px arial, Sans-serif;border-bottom: 1px #fff solid;text-transform:uppercase;} 
#greybox h2{ color: #fff;font: bold 14px arial, Sans-serif; margin-top: 20px;} 
#greybox h2 a{ color: #fff;font: bold 14px arial, Sans-serif; margin-top: 20px;} 

#greybox a{ color: #fff;font: 12px arial, Sans-serif; text-decoration:underline;} 
#greybox .left {width: 370px; float: left;background-color: #939da7; padding: 15px; min-height: 400px; height: 100%; height: auto;}
#greybox .right {width: 230px; float: right;background-color: #939da7; padding: 15px;}
#greybox img {float: left; border: 5px #b1b9c0 solid; margin: 0px 20px 20px 0px; width: 100px;}


/* ----- FORMTABLE---------- */
.formtable{ width: 680px;}
.formtable td{ padding: 3px; vertical-align:top;
white-space:normal;}



/* ----- LINKS & FONTS & IMAGE---------- */

.italicwhite {color: #fff;font: 12px arial, Sans-serif;font-style:italic;padding-left: 50px;}
.italic {font: 12px arial, Sans-serif;font-style:italic;padding-left: 50px;}
.boldcenter {color: #023865;font: bold 14px arial, Sans-serif; float: left;text-align: center; padding: 50px 0px 20px 0px; margin-bottom: 40px;}
.red {color: #d6001e;font: 12px arial, Sans-serif;}

.rightpic {float: right; border: 5px #b1b9c0 solid; margin: 10px;}


#main a.button:link { font: bold 12px Arial, Sans-Serif;color: #fff; background-color: #d6001e;padding: 7px 10px 7px 10px;border: 3px solid #bf011b;}
#main a.button:visited  {font: bold 12px Arial, Sans-Serif;color: #fff; background-color: #d6001e;padding: 7px 10px 7px 10px;border: 3px solid #bf011b; }
#main a.button:hover { background-color: #bf011b; border: 3px solid #d6001e;}


/* ----- BULLET---------- */
#main ul.bullet{
margin-left: 20px;
padding: 0px;
}

#main .bullet li{
padding-left: 25px;
background: url(/images/bullet.gif) no-repeat;
list-style-type: none;

display: block;
padding-bottom: 10px;
padding-top: 0px;
color: #00223c;
font: 12px Arial, Sans-Serif;
}

#main .bullet li a{
color: #00223c;
text-decoration: underline;
font: 12px Arial, Sans-Serif;
padding-top: 7px;
padding-bottom: 7px;
}

#main .bullet li a:hover{ /*hover state CSS*/
color: #94c43d;
}

/* ----- BULLETMulti---------- */
#main ul.bulletmulti{
float: left;
}

#main .bulletmulti li{
padding-left: 5px;
list-style-type:disc;
display: block;
padding-bottom: 3px;
padding-top: 0px;
color: #00223c;
font: 12px Arial, Sans-Serif;

}

#main .bulletmulti li a{
color: #00223c;
text-decoration: underline;
font: 12px Arial, Sans-Serif;
padding-top: 7px;
padding-bottom: 7px;
}

#main .bulletmulti li a:hover{ /*hover state CSS*/
color: #94c43d;
}

/* --------------GALLERY------------- */

#gallery{
width: 700px;
float: left;
}

#gallery .displayimage{
width: 210px;
height: 175px;
color: #00223c;
text-align:center;
margin: 10px;
float: left;
}

#gallery .displayimage img{
width: 200px;
border: 5px #b1b9c0 solid;
margin: 0px;
}

#gallery .displayimage p{
font: bold 8pt arial, sans-serif;
text-align:center;
margin-top: 5px;
}

#gallery .displayimage a{
text-decoration: none;
border-bottom: 0px;
}



/* ----- RECIPES ---------- */

#recipes{} 
#recipes .recipe{ float: left; margin: 20px 20px 20px 20px; width: 125px; text-align: center;} 
#recipes .instructions{ font: 12px arial, Sans-serif;float: left; width: 700px; margin-top: 25px;} 
#recipes .ingredients{ font: bold 12px arial, Sans-serif; float: left; width: 300px; line-height:25px; } 

#recipes .picture{ float: right; width:330px;} 

#recipes p{ color: #023865;font: bold 12px arial, Sans-serif; margin: 0px 0px 0px 0px; } 
#recipes a{ color: #023865;font: bold 12px arial, Sans-serif; text-decoration:underline;} 
#recipes img {float: left; border: 5px #b1b9c0 solid; margin: 0px 0px 15px 0px;}

/* ----- 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; }



