/*----------------------------------------
 Main stylesheet for: PCA
 ----------------------------------------*/ 
 
 /*----------------------------------------  
 Stylesheet structure:
 
 > Styles reset, HTML & body
 > Main layout
 > Type and inline styling
 > Section/page details
    --> Nav
    --> Main content area       
    --> Scrollbars       
 > Misc     
 ----------------------------------------*/ 
 
 /*----------------------------------------
 Color master list:
   Main text (grey): #5b5b5b;
   Dark pink: #431908;
   Dark blue: #104b7d
   Blue Links: #17578d 
   Green: #11b34a;
   Pink: #e431d1;
 ----------------------------------------*/     
    
/* Styles reset, HTML & body styling -------------------------------------------------------------------------------------  */     

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, apress, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, p, ol, ul, li, title
fieldset, form, legend
{
    border: 0;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: normal;                
    margin: 0;
    outline: 0;     
    padding: 0;
}

/************************** HTML and BODY ************************/

html
{
   background: #FFFFFF url(../images/background-stripe.jpg) top left repeat-x;   
}
  
body 
{                   
   background: url(../images/background.png) center top no-repeat;  
}

/************************** MAIN LAYOUT ************************/ 
#wrapper
{
   width: 980px;
   margin: 0px auto;
   position: relative;
}

   #header
   {
      padding: 0 10px;
   }
   
      #header img
      {
         margin: 10px 0;
      }
   
      #header ul
      {
         list-style-type: none;
      }
      
         #header ul li
         {
            float: left;
            margin-left: 10px;
         }
         
      #header .member-login
      {
         display: block;
         width: 150px;
         height: 34px;
         background: url('../images/member-login.png') top left no-repeat;
         margin-top: -5px;
      }
         
   #content-wrapper
   {
      margin-left: 10px; 
   }
         
      ul#nav
      {
         list-style-type: none;
         width: 960px;
         margin-top: 5px;
      }
      
      #directory ul#nav
      {
         background: url('../images/bk_nav.png') top left no-repeat;
         height: 48px;   
      }
      
      #mainsite ul#nav
      {
         height: 47px;
         z-index: 1;   
      }      
      
         ul#nav li
         {
            float: left;
         }
         
            ul#nav li a
            {
               display: block;
               height: 47px;
            }
            
               ul#nav li a:hover, #nav li:hover a
               {
                  background-position: bottom;
               }
      
         #nav-home
         {
            height: 47px;
            width: 39px;
            background: url('../images/nav-home.png') top left no-repeat;
         }
         
         #nav-about
         {
            width: 98px;
            background: url('../images/nav-about.png') top left no-repeat;
         }
         
         #nav-membership
         {
            width: 115px;
            background: url('../images/nav-membership.png') top left no-repeat;
         }
         
         #nav-packagingcovenant
         {
            width: 173px;
            background: url('../images/nav-packaging.png') top left no-repeat;
         }  
         
         #nav-sustainability
         {
            width: 124px;
            background: url('../images/nav-sustainability.png') top left no-repeat;
         } 
         
         #nav-packaginginfo
         {
            width: 134px;
            background: url('../images/nav-packaginginfo.png') top left no-repeat;
         }
         
         #nav-awards
         {
            width: 83px;
            background: url('../images/nav-awards.png') top left no-repeat;
         }
        
         #nav-awards-only
         {
            width: 83px;
            background: url('../images/nav-awards-orig.png') top left no-repeat;
         }

         #nav-events
         {
            width: 80px;
            background: url('../images/nav-events.png') top left no-repeat;
         }
         
         #nav-exhibitions
         {
            width: 114px;
            background: url('../images/nav-exhibitions.png') top left no-repeat;
         } 
         
         /* Directory Nav */
         #nav-introduction
         {
            height: 48px !important;
            width: 129px;
            background: url('../images/nav-introduction.png') top left no-repeat;
         } 
         
         #nav-howtouse
         {
            height: 48px !important;
            width: 200px;
            background: url('../images/nav-howtouse.png') top left no-repeat;
         }  
         
         #nav-companylistings
         {
            height: 48px !important;
            width: 146px;
            background: url('../images/nav-companylisting.png') top left no-repeat;
         } 
         
         #nav-categories
         {
            height: 48px !important;
            width: 108px;
            background: url('../images/nav-categories.png') top left no-repeat;
         }
         
         #nav-addcompany
         {
            height: 48px !important;
            width: 154px;
            background: url('../images/nav-addyourcompany.png') top left no-repeat;
         } 
         
         #nav-directorylogin
         {
            height: 48px !important;
            width: 143px;
            background: url('../images/nav-directorylogin.png') top left no-repeat;
         }
         
       #banner-wrapper
       {
			 position: relative;
       }                                                                                      
       
       #hero
       {
          width: 660px;
          height: 230px;
          background: url('../images/pca-hero.jpg') top left no-repeat;
          position: relative;
          padding-top: 30px;
          padding-left: 300px;          
       }
       
       #content
       {
          padding: 10px;
          width: 703px;
          min-height: 550px;
          background-color: #FFFFFF; 
          padding-left: 17px;
       }
       
		#content-right
		{
			width: 510px;
		}       
       
       #directory #content
       {
          padding-left: 0px !important;
          width: 720px !important;
          padding: 10px !important;
       }
       
         #directory #content ul
         {
            margin-left: 0px !important;   
         }
       
         #directory-header
         {
            width: 714px;
            height: 43px;
            background: url('../images/bk_header.jpg') top left no-repeat;
            padding-top: 20px;
            padding-left: 17px;
         }
         
         #page-banner
         {
            width: 714px;
            height: 43px;
            padding-top: 20px;
            padding-left: 17px;
            background: url('../images/bk_header_about.jpg') top left no-repeat;
         }
         
      #submenu
      {
         width: 177px;
      	padding: 0 !important;
      	margin: 0 !important;
      }         
         
		#submenu ul
      {
         list-style-type: none;
         margin-top: 5px;
         margin-left: 0px !important;
      }
      
         #submenu ul li
         {
            border-bottom: 1px solid #CCCCCC;
            padding: 5px;           
         }
         
         #submenu ul li:first-child
         {
            border-top: 1px solid #CCCCCC;   
         }
         
            #submenu ul li a
            {
               color: #8b8a8a;
               text-decoration: none;
            }         
         
            #submenu ul li.selected a
            {
               color: #3b89bd;
               text-decoration: none;
            }         
         
         
       
   #right-panel
   {
       width: 215px;
       min-height: 300px;
       position: absolute;
       top: 150px;
       left: 750px;
       
   }
   
   #footer
   {
      margin-top: 50px;
      padding-bottom: 20px;
   }
   
      #footer ul
      {
         list-style-type: none;
         margin-left: 20px;
      }
      
         #footer ul li
         {
            float: left;
            margin-right: 10px;
            color: #5b5b5b;
            font-size: 9pt;
         }
         
            #footer ul li a
            {
               color: #5b5b5b;
            }
       
         
/*********************** TYPEOGRAPHY *********************/
body
{
   font-family: arial;
   font-size: 0.8em;
   line-height: 1.25em;
   color: #5b5b5b;
}

#header
{
   font-weight: bold;
   font-size: 0.9em;
}

   #header a
   {
      text-decoration: none;
   }
   
   #header a:hover
   {
      text-decoration: underline;
   }   

a
{
   color: #5b5b5b;
   text-decoration: underline;  
}

#content a
{
   color: #17578d;
   font-weight: bold;
}

   #content a:hover
   {
      color: #333333;
      font-weight: bold;
   }
   
   #content a:visited
   {
      color: purple;
   }   

#right-panel a
{
   color: #17578d;
   text-decoration: underline;
   font-weight: bold;    
}

   #right-panel a:hover
   {
      color: #333333;
   }

h1
{
   color: #104b7d; 
   font-size: 26px;
   line-height: 1em;
   padding-bottom: 5px;
}

#hero h2
{
   color: #c5135f;
   font-size: 28px;
}

h3
{
   padding-bottom: 4px;
   font-weight: bold;
   font-size: 11pt;
   color: #000000;
}

   h3.pink
   {
      color: #e431d1;
   }
   
   h3.green
   {
      color: #11b34a;
   }
   
h5
{
   font-weight: bold;
   color: #17578d;
   font-size: 12pt;
}      

.subtle
{
   color: #939598;
}

strong
{
   font-weight: bold;
}

.small-text
{
	font-size: 8pt !important;
}


/************************** MISC ************************/
.left
{
   float: left;
}

.right
{
   float: right;
}

.clear
{
   clear: both;
}

.hidden
{
   display: none;
}

.block
{
   display: block;
}

.sprite:hover
{
   background-position: bottom left !important;
}

ul.no-bullet
{
   list-style-type: none;
}

ul.no-margin
{
   margin-left: 0 !important;
}

.btn-learnmore
{
   margin-top: 5px;
   display: block;
   width: 197px;  
   height: 40px;
   background: url('../images/btn-learnmore.png') top left no-repeat; 
}

.btn-home
{
   display: block;
   width: 1215px;  
   height: 58px;
   background: url('../images/btn-home.png') top left no-repeat; 
}

ul.news li
{
   padding: 5px 0;
   border-top: 1px dashed #d7d7d7;
}

div.divider
{
   border-top: 1px dashed #d7d7d7; 
}

.top-margin
{
   margin-top: 15px;
}

.top-margin-sm
{
   margin-top: 5px;
}

.top-margin-vsm
{
   margin-top: 2px;
}

.left-margin
{
   margin-left: 10px;
}

.bottom-space
{
   padding-bottom: 15px;
}

.greybox
{
   width: 367px;
   height: 167px;
   display: block;
   background: url('../images/greylarge.jpg') top left no-repeat;
   padding: 5px 10px;
}

.greyboxsm
{
   width: 367px;
   height: 80px;
   display: block;
   background: url('../images/greysmall.jpg') top left no-repeat;
   padding: 5px 10px;
}

.greybox-thin
{
   width: 280px;
   height: 110px;
   display: block;
   background: url('../images/greysmallthin.jpg') top left no-repeat;
   padding: 5px 10px;
}



.btn-signup
{
   display: block;
   width: 102px;
   height: 29px;
   background: url('../images/btn-signup.png') top left no-repeat;
}

.btn-search
{
   display: block;
   width: 122px;
   height: 29px;
   background: url('../images/btn-searchdir.png') top left no-repeat;
}

.btn-continue
{
   display: block;
   width: 102px;
   height: 29px;
   background: url('../images/btn-continue.png') top left no-repeat;
   margin-right: 15px;
}

.btn-save
{
   display: block;
   width: 102px;
   height: 29px;
   background: url('../images/btn-save.png') top left no-repeat;
   margin-right: 15px;
}

.btn-login
{
   display: block;
   width: 102px;
   height: 29px;
   background: url('../images/btn-login.png') top left no-repeat;
   margin-right: 15px;
}

.btn-pay
{
   display: block;
   width: 102px;
   height: 29px;
   background: url('../images/btn-pay.png') top left no-repeat;
   margin-right: 15px;
}

#print-email
{
   list-style-type: none;
}

   #print-email li
   {
      float: left;
      margin-left: 10px;
   }      

      #print-email li a
      {
         color: #8b8a8a;
         font-size: 10pt;
      }
      
      #print-email li a.btn-font-size
      {
         display: block;
         background-color: #F4F4F4;
         height: 18px;
         width: 20px;
         text-align: center;
         text-decoration: none;
      }
      
#emailToFriend
{
   
}

   #emailToFriend #etfHeader
   {
      background-color: #CCCCCC;
      color: #333333;   
      padding: 10px;
      text-align: center;
      width: 280px;
      font-weight: bold;
      font-size: 12pt;
   }
   
   #emailToFriend #frmEmail
   {
      padding: 10px;
      width: 270px;
      text-align: left;
   }
   
      #emailToFriend #frmEmail label
      {
         display: block;
         font-weight: bold;
         margin: 5px 0 2px 0;
      }
      
      #emailToFriend #frmEmail input[type="text"], #emailToFriend textarea
      {
         width: 250px;
      } 
      
#signup
{
   
}

   #signup .modalHeader
   {
      background-color: #CCCCCC;
      color: #333333;   
      padding: 10px;
      text-align: center;
      width: 580px;
      font-weight: bold;
      font-size: 12pt;
   }
   
   #signup form
   {
      padding: 10px;
      width: 570px;
      text-align: left;
   }
   
      #signup form label
      {
         display: block;
         font-weight: bold;
         margin: 5px 0 2px 0;
      }
      
      #signup input[type="text"], #signup textarea
      {
         width: 250px;
      } 
      
      #signup span.required
      {
         color: red;
      }
      
      #signup ul
      {
         list-style-type: none;
      }


/* ERRROR*/

label.error 
{ 
    padding: 2px; 
    width: 260px !important; 
    color: #3E9EFE;
    font-weight: bold;
    text-align: left !important;
    background-color: #FFFFFF;     
}

div.error
{
   width: 260px;
   float: left;
   margin-left: 200px;
}

.error_message
{
    color: #3E9EFE;
    border: 1px solid green;
    padding: 10px;
    margin-bottom: 10px;
}

.user_message
{
	border: 1px solid #104b7d;
	padding: 10px;
	font-weight: bold;
}

/* END ERROR */

.slide_out_box 
{
    background:transparent url(../images/slide_out_box_header.png) no-repeat scroll 0 0;
    border:medium none;
    display:block;
    height:30px;
    width:660px;
    color:#FFFFFF;
    font-weight:bold;
    padding-top:5px;    
    padding-left:20px;
    cursor: pointer;
}

.slide_out_box_category
{
    background:transparent url(../images/slide_out_box_header_category.png) no-repeat scroll 0 0;
    border:medium none;
    display:block;
    height:30px;
    width:450px;
    color:#FFFFFF;
    font-weight:bold;
    padding-top:5px;    
    padding-left:20px;
    cursor: pointer;
}

.align_right   
{
    text-align: right;
}


label.my {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input.my {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    overflow: hidden;
}

#content-right p img
{
   padding-right: 5px;
}

#content-right ul, #content ul
{
   margin-left: 20px;
}

#user_message
{
   padding: 10px;
   border: 1px solid #11b34a;
   margin-bottom: 10px;
}

#divLogin
{
   position: absolute; 
   top: 0px; 
   left: 450px;
   padding: 5px;
   display: none;
}

#frmLoginTop
{

}

   #frmLoginTop label
   {
      display: block;
      width: 75px;
   }

   #frmLoginTop label, #frmLoginTop input[type="text"], #frmLoginTop input[type="password"]
   {
      padding: 1px !important;
      margin-top: 3px;
      float: left;
   }

   #frmLoginTop input[type="text"], #frmLoginTop input[type="password"]
   {
      width: 120px;
   }

   #frmLoginTop a
   {
      margin-left: 80px;
   }
   
   #frmLoginTop label.error
   {
      display: none !important;
   }
   
   #frmLoginTop input.error
   {
      border: 1px solid red !important;
   }
   
#ulLogos, #ulMediaGlance, #ulPodcasts
{
	list-style-type: none;
}

.modalHeader
{
   background-color: #CCCCCC;
   color: #333333;   
   padding: 10px;
   text-align: center;
   width: 410px;
   font-weight: bold;
   font-size: 12pt;
   margin-bottom: 10px;
}

div.article
{
	margin-top: 10px;
	border-top: 1px solid #CCCCCC;
	padding: 3px 0;
}

.packnews
{
	width: 630px;
	background-color:#E0F3FE;
	padding: 10px;
}

#directory #content ul li
{
	margin-left: 20px;
	padding-bottom: 3px;
}

.number-button
{
	display: block;
	height: 24px;
	width: 25px;
}

.number-1
{
  background: url('../images/number-1.png') top left no-repeat;
}

.number-2
{
  background: url('../images/number-2.png') top left no-repeat;
}

.number-3
{
  background: url('../images/number-3.png') top left no-repeat;
}

.number-4
{
  background: url('../images/number-4.png') top left no-repeat;
}

.btn-addcompany
{
	display: block;
	width: 115px;
	height: 31px;
	background: url('../images/directory-company.jpg') top left no-repeat;
}

a.small-text {
	cursor : pointer;	
}