/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.thefulfillmentplace.com/
   TEMPLATE NAME:  The Fulfillment Place
   DATE:           Oct-9th-2008
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0;
padding: 0px;
height: 100%; 
background: #fff url('/images/bg.gif') repeat-x;
} 

.subbg {
background: #fff url('/images/subbg.gif') repeat-x;
}

/* ----------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: 960px;
padding-top: 37px;
} 


/* --------------LABELS BUTTONS & FORMS-----------*/
 
label {
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
}
 
input, textarea {
width: 12em;
border: 1px solid #514f4f;
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #514f4f;
padding: 4px;
margin-bottom: 8px;
}
 
.button {
width: 8em;
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #fff;      
background: #045a8e;
padding: 6px;
border: 1px solid #045a8e;
}

/* --------------HEADER------------- */

#logonav {
width: 375px;
float: left;
padding-top: 40px;
}

#header {
height: 244px;
}


/* --------------SUBTOP------------- */

#subtop {
height: 98px;
background: url('/images/subtop_bg.gif') no-repeat left top;
}

/* --------------IMG RTR------------- */
.rtr {
float: right;
width: 542px;
height: 244px;
background: url('/images/header_rtr.jpg') no-repeat;
}

.rtrpics {
margin: 30px 0px 0px 129px;
}

/* --------------LOGO IN HEADER *always use this*------------- */

.logolink {
background-image: url('/images/logo.gif');
background-repeat: no-repeat;
height: 125px;
width: 373px;
padding-bottom: 18px;
}
 
.logolink a { float: left;  }
 
#swap {background-image: url(/images/logo.gif);  width: 373px;  height: 125px;  }
 
.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------------- */

.images {
height: 60px;
}

.images a { float: left; }

#swap01 {background-image: url(/images/topnav_on_home.gif);  width: 80px;  height: 37px; }
#swap02 { background-image: url(/images/topnav_on_company.gif); width: 118px;  height: 37px; }
#swap03 { background-image: url(/images/topnav_on_faq.gif); width: 72px;  height: 37px; }
#swap04 { background-image: url(/images/topnav_on_contact.gif); width: 103px;  height: 37px; }

.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 THREE BLOCKS----------------*/

#threeblocks {
font: 9pt 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
color: #e9eff2;
height: 214px;
clear: both;
background: url(/images/threeblocks_line.gif) no-repeat center top; /* Main DIV Background Img */
}

#threeblocks a {
color: white;
}

#threeblocks p.one {
padding: 0px 30px 0px 13px;
text-align:justify
}

#threeblocks p.two {
padding: 0px 20px 0px 20px;
text-align:justify
}

#threeblocks p.three {
padding: 0px 10px 0px 30px;
text-align:justify
}

#threeblocks .experience {
float: left;
width: 320px;
margin: 0px;
padding: 0px;
clear:right
}

#threeblocks .flexible {
float: left;
width: 320px;
margin: 0px;
padding: 0px;
clear:right;
}

#threeblocks .flexible p {
text-align:left
}


#threeblocks .onesource {
float: left;
width: 300px;
margin: 0px;
padding: 0px;
clear:right
}

#threeblocks .onesource img, #threeblocks .flexible img {
padding-left: 20px;
}

/* --------------MAIN CONTENT----------------*/

#main {
min-height: 100%; 
height: auto !important; 
height: 100%; 
background: #FFF url(/images/mainbg.gif) no-repeat; /* Main DIV Background Img */
}

#mainsub {
min-height: 520px; 
height: auto !important; 
height: 100%; 
background: #FFF url(/images/submainbg.gif) no-repeat; /* Main DIV Background Img */
}

#main .content, #mainsub .content {
padding-left: 20px;
margin-bottom: 30px;
margin-left: 244px;
margin-right: 0px;
min-height: 277px; /* Height of Background Img */
height: auto;
}

#main .holder,  #mainsub .holder {
padding: 10px 0px 0px 20px;
}

#main h1,  #mainsub h1 {
font: 22pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
letter-spacing: 1px;
}

.line {
border: none;
border-bottom: 1px solid #d3d2ce;
height: 0px;
width: 100%;
margin-bottom: 15px;
width: 650px;
text-align: left
}


#main p, #mainsub p {
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.45em;
color: #514f4f;
padding: 0px 30px 20px 0px;
}

#main a,  #mainsub a {
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
}

.map {
float: right;
margin: 12px;
}


/* --------------FAQ----------------*/

.faq li {
font: bold 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
list-style-type: none;
background: url(/images/icon_block.gif) no-repeat top left; /*custom bullet list image*/
padding-left: 25px;
}



/* --------------Call Center----------------*/

h2 {
font: bold 12pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
}

.callcenter ul, .pickpack ul, .web ul, .sitemap ul {
margin: 0px;
padding: 0px;
}

.callcenter li {
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
list-style-type: none;
background: url(/images/bullet_disc.gif) no-repeat center left; /*custom bullet list image*/
padding-left: 15px;
}


/* --------------PicknPack----------------*/

.pickpack li {
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
list-style-type: none;
background: url(/images/icon_box.gif) no-repeat left; /*custom bullet list image*/
padding-left: 24px;
}

/* --------------WEBDESIGN----------------*/

.web li {
font: 10pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
list-style-type: none;
background: url(/images/icon_web.gif) no-repeat left; /*custom bullet list image*/
padding-left: 24px;
}


/* --------------SITEMAP----------------*/

.sitemap li {
list-style-type: none;
}

.sitemap li a {
background: url(/images/icon_arrow.gif) no-repeat center left; /*custom bullet list image*/
padding-left: 18px;
}



/* --------------LEFT NAVIGATION----------------*/


#main .navleft, #mainsub .navleft {
float:left; 
width: 244px;
height: 500px;
margin: 0px;
padding: 0px;
background: url(/images/leftnav_bg.gif) no-repeat bottom left; /*custom bullet list image*/
}


#leftnav {
width: 244px; /*width of menu*/
}

#leftnav h1 {
font: bold 12pt 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #045a8e;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
padding: 4px 0 0px 10px; /*header text is indented 10px*/
}

#leftnav ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

#leftnav ul li a{
color: #045a8e;
background: url(/images/icon_arrow.gif) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 8px 6px 8px 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #d3d2ce;
font-size: 90%;
font: 9pt 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
}

#leftnav ul li.current a {
color: #514f4f;
text-decoration:underline;
background-color: #f5f5f5;
}

#leftnav ul li a:hover{ /*hover state CSS*/
background-color: #f5f5f5;
}


/* --------------FOOTER------------- */

.clear {
clear: both;
}

#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-color: #514f4f;
height: 100px;
height: auto;
}

#footer .content { 
width: 960px; 
margin: 0 auto; 
position: relative; 
padding-top: 10px;
padding-bottom: 10px;
}

/* --------------FOOTER LINKS------------- */

#footer ul {
padding: 10px;
}

#footer .links ul {
margin: 0px;
padding: 0px;
}

#footer .links li {
display: inline;
list-style-type: none;
}

#footer .links li a {
color: #e9eff2;
text-decoration: none;
padding: 0px 15px 0px 15px;
font: 9pt 'Lucida Sans Unicode', Helvetica, 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: #a9a9a9;
text-decoration: none;
padding: 0px 10px 0px 10px;
font: 9pt 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
}







/* ----- 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; }