/*-------------------------------------------------------
   BODY
-------------------------------------------------------*/
body {
   text-align: center;
   background: #c2c2c2;
   font-family: Helvetica, Arial, sans-serif;
   color: #727272;
   font-size: 12px;
}

/*--------------------------------------------------
	CLEAR FIX
--------------------------------------------------*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/*-------------------------------------------------------
   TYPOGRAPHY and BASIC ELEMENTS
-------------------------------------------------------*/
/* headings */
h1, h2, h3, h4, h5, h6 {
   
}

h1 {
	/*text-indent: -9999px;*/
	background: url(../images/bg-h1.gif) no-repeat top left;
	width: 193px;
	height: 207px;
}

h2 {
   text-indent: -9999px;
   margin-bottom: 20px;
}

   #about h2 {
      width: 256px;
      height: 72px;
      background: url(../images/h2-about.gif) no-repeat top left;
   }
   
   #contact h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-contact.gif) no-repeat top left;
   }
   
   #locations h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-locations.gif) no-repeat top left;
   }
   
   #products h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-products.gif) no-repeat top left;
   }
   
   #prevention h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-prevention.gif) no-repeat top left;
   }
   
   #join h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-join.gif) no-repeat top left;
   }
   
   #eye-disorders h2 {
      width: 256px;
      height: 72px;
      background: url(../images/h2-eye-disorders.gif) no-repeat top left;
   }
   
   #vision h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-vision.gif) no-repeat top left;
   }
   
   #par-child h2 {
      width: 256px;
      height: 72px;
      background: url(../images/h2-par-child.gif) no-repeat top left;
   }
   
   #sitemap h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-sitemap.gif) no-repeat top left;
   }
   
   #privacy h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-privacy.gif) no-repeat top left;
   }
   
   #ethics h2 {
      width: 212px;
      height: 72px;
      background: url(../images/h2-ethics.gif) no-repeat top left;
   }

h3 {
   font-weight: bold;
   font-size: 13px;
   margin-bottom: 20px;
}

   #locations h3 {
      padding-left: 18px;
      background: url(../images/bg-h3-locations.gif) no-repeat center left;
      margin-bottom: 10px;
   }

h4 {
   font-weight: bold;
   font-style: italic;
   font-size: 12px;
   margin-bottom: 10px;
}

h5 {
   font-weight: normal;
   font-style: italic;
   margin-bottom: 5px;
}

h6 {
   font-weight: normal;
   font-style: normal;
   margin-bottom: 5px;
}

/* paragraphs etc. */
p {
   line-height: 1.5;
   padding-bottom: 20px;
}

p.top {
   text-align: right;
}

strong, b {
   font-weight: bold;
}

em, i {
   font-style: italic;
}

/* lists */
#content ul {
   list-style: disc outside;
   padding-left: 25px;
   padding-bottom: 20px;
   line-height: 1.5;
}

#content ul ul {
   padding-bottom: 0;
   list-style-type: circle;
}

#content ol {
   
}

/* links */
#content a, #content a:visited {
   text-decoration: none;
   color: #00456b;
}

#content a:hover {
   color: #8f8e8e;
}

/* images */
img.left {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

img.right {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

img.center {
	margin: 10px auto;
	display: block;
}

/* horizontal rule */
hr {
   
}

/* tables */
.addresses {
   width:675px;
   margin-bottom: 20px;
}

.addresses td {
   width: 50%;
   padding: 5px 0;
   line-height: 1.2;
   vertical-align: top;
}



/*-------------------------------------------------------
   CONTAINER / 972px
-------------------------------------------------------*/
#container {
   width: 972px;
   margin: 15px auto;
   background: url(../images/bg-container.gif) repeat-y top left;
   text-align: left;
}

/*-------------------------------------------------------
   LEFT-COL / 193px
-------------------------------------------------------*/
#left-col {
   float: left;
   width: 193px;
}

/*-------------------------------------------------------
   MAIN NAVIGATION
-------------------------------------------------------*/
#mainnav {
   margin-top: 8px;
}

#mainnav li a, #mainnav li a:visited {
   text-indent: -9999px;
   display: block;
   width: 193px;
   height: 30px;
}

#mainnav li a.home {
   background: url(../images/nav-home.gif) no-repeat bottom left;
}

   #mainnav li a:hover.home, 
   #home #mainnav li a.home,
   #ethics #mainnav li a.home,
   #privacy #mainnav li a.home,
   #sitemap #mainnav li a.home {
      background: url(../images/nav-home.gif) no-repeat top left;
   }

#mainnav li a.locations {
   background: url(../images/nav-locations.gif) no-repeat bottom left;
}

   #mainnav li a:hover.locations, #locations #mainnav li a.locations {
      background: url(../images/nav-locations.gif) no-repeat top left;
   }

#mainnav li a.about {
   background: url(../images/nav-about.gif) no-repeat bottom left;
}

   #mainnav li a:hover.about, #about #mainnav li a.about {
      background: url(../images/nav-about.gif) no-repeat top left;
   }

#mainnav li a.eye-disorders {
   background: url(../images/nav-eye-disorders.gif) no-repeat bottom left;
}

   #mainnav li a:hover.eye-disorders, #eye-disorders #mainnav li a.eye-disorders {
      background: url(../images/nav-eye-disorders.gif) no-repeat top left;
   }

#mainnav li a.vision {
   background: url(../images/nav-vision.gif) no-repeat bottom left;
}

   #mainnav li a:hover.vision, #vision #mainnav li a.vision {
      background: url(../images/nav-vision.gif) no-repeat top left;
   }

#mainnav li a.products {
   background: url(../images/nav-products.gif) no-repeat bottom left;
}

   #mainnav li a:hover.products, #products #mainnav li a.products {
      background: url(../images/nav-products.gif) no-repeat top left;
   }

#mainnav li a.par-child {
   background: url(../images/nav-par-child.gif) no-repeat bottom left;
}

   #mainnav li a:hover.par-child, #par-child #mainnav li a.par-child {
      background: url(../images/nav-par-child.gif) no-repeat top left;
   }

#mainnav li a.prevention {
   background: url(../images/nav-prevention.gif) no-repeat bottom left;
}

   #mainnav li a:hover.prevention, #prevention #mainnav li a.prevention {
      background: url(../images/nav-prevention.gif) no-repeat top left;
   }

#mainnav li a.join {
   background: url(../images/nav-join.gif) no-repeat bottom left;
}

   #mainnav li a:hover.join, #join #mainnav li a.join {
      background: url(../images/nav-join.gif) no-repeat top left;
   }

#mainnav li a.contact {
   background: url(../images/nav-contact.gif) no-repeat bottom left;
}

   #mainnav li a:hover.contact, #contact #mainnav li a.contact {
      background: url(../images/nav-contact.gif) no-repeat top left;
   }

/*-------------------------------------------------------
   Quote
-------------------------------------------------------*/
#quote {
   padding-bottom: 59px;
   background: url(../images/quote-bottom.gif) no-repeat bottom left;
}

#quote blockquote {
   padding: 79px 20px 0 20px;
   background: url(../images/quote-top.gif) no-repeat top left;
   font-style: italic;
   color: #FFF;
}

#quote blockquote p {
   line-height: 2.5;
}

/*-------------------------------------------------------
   RIGHT-COL / 779px
-------------------------------------------------------*/
#right-col {
   float: left;
   width: 779px;
}

/*-------------------------------------------------------
   MASTHEAD
-------------------------------------------------------*/
#masthead {
   width: 779px;
   height: 326px;
   border-bottom: 2px solid #00456b;
   float: left;
}

#home #masthead,
#ethics #masthead,
#privacy #masthead,
#sitemap #masthead {
   background: url(../images/masthead-home.jpg) no-repeat top left;
}

#about #masthead {
   background: url(../images/masthead-about.jpg) no-repeat top left;
}

#contact #masthead {
   background: url(../images/masthead-contact.jpg) no-repeat top left;
}

#locations #masthead {
   background: url(../images/masthead-locations.gif) no-repeat top left;
}

#products #masthead {
   background: url(../images/masthead-products.jpg) no-repeat top left;
}

#prevention #masthead {
   background: url(../images/masthead-prevention.jpg) no-repeat top left;
}

#join #masthead {
   background: url(../images/masthead-join.jpg) no-repeat top left;
}

#eye-disorders #masthead {
   background: url(../images/masthead-eye-disorders.jpg) no-repeat top left;
}

#vision #masthead {
   background: url(../images/masthead-vision.jpg) no-repeat top left;
}

#par-child #masthead {
   background: url(../images/masthead-par-child.jpg) no-repeat top left;
}

/*-------------------------------------------------------
   CONTENT / 779px
-------------------------------------------------------*/
#content {
   width: 682px;
   padding: 0 48px 60px 49px;
   position: relative;
   float: left;
}

/* Subnav */
#subnav {
   font-size: 11px;
   position: absolute;
   top: 50px;
   left: 310px;
}

#prevention #subnav, #locations #subnav {
   left: 280px;
}

#subnav ul {
   list-style-type: none;
   padding-left: 0;
   padding-bottom: 0;
   line-height: 1;
   margin-top: 0px;
}

#subnav li {
   float: left;
}

#subnav a {
   padding: 0 3px;
   font-weight: bold;
}

/* content padding */
.padding {
   padding-left: 32px;
   float: left;
}

/* Home */
#home .box {
   float: left;
   width: 212px;
}

#home .box p {
   padding: 0 18px 10px;
}

#uniqueness, #benefits {
   margin-right: 23px;
}

#uniqueness {
   background: url(../images/bg-uniqueness.gif) no-repeat bottom left;
   padding-bottom: 25px;
}

#benefits {
   background: url(../images/bg-benefits.gif) no-repeat bottom left;
   padding-bottom: 25px;
}

#evidence {
   background: url(../images/bg-evidence.gif) no-repeat bottom left;
   padding-bottom: 25px;
   margin-right: -3px;
}

#uniqueness h2, #benefits h2, #evidence h2 {
   height: 74px;
   width: 212px;
   margin-bottom: 10px;
}

#uniqueness h2 {
   background: url(../images/h2-uniqueness.gif) no-repeat top left;
}

#benefits h2 {
   background: url(../images/h2-benefits.gif) no-repeat top left;
}

#evidence h2 {
   background: url(../images/h2-evidence.gif) no-repeat top left;
}

#home .box a.more {
   width: 212px;
   height: 22px;
   display: block;
   text-indent: -9999px;
}

#uniqueness a.more {
   background: url(../images/link-uniqueness.gif) no-repeat top left;
}

#benefits a.more {
   background: url(../images/link-benefits.gif) no-repeat top left;
}

#evidence a.more {
   background: url(../images/link-evidence.gif) no-repeat top left;
}

/* About */
#about .box {
   float: left;
}

.first {
   padding-left: 32px;
   width: 325px;
   clear: both;
}

.second {
   padding-left: 20px;
   width: 305px;
}
/*-------------------------------------------------------
   FOOTER
-------------------------------------------------------*/
#footer {
   float: left;
   width: 779px;
   padding-left: 193px;
   height: 27px;
   background: url(../images/bg-footer.gif) no-repeat top left;
   color: #FFF;
   text-align: center;
}

#footer p {
   padding: 0 20px;
   line-height: 27px;
}

#footer a, #footer a:visited {
   color: #FFF;
   text-decoration: none;
   margin-right: 30px;
}

#footer a:hover {
   text-decoration: underline;
}