@import url("reset.css");

/*
  Project: Etat Luma, LLC (el01)
  Style URI: /css/common.css
  Description: Common styles for Eta Luma Website
  Version: 2009-07-26
  Author: ReShun Davis < www.reshun.com >
*/

body {
  font: 0.9em/1 Arial, sans-serif; 
  color: #666; 
  background: #D1D1D1 url('/img/bg_highlight.jpg') no-repeat top center;
}

body.home {
/*  background-image: url('/img/bg_body_yellow.png');*/
}

body.products {
/*  background-image: url('/img/bg_body_blue.png');*/
}

body.contact {
/*  background-image: url('/img/bg_body_red.png');*/
}

body.news {
/*  background-image: url('/img/bg_body_green.png');*/
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px 0;
  padding: 0;
}

h1 {
  margin-bottom: 15px;
  line-height: 1em;
  font-size: 1.75em;
  color: #FF9933;
}

h2 {
  font-size: 1.5em;
  line-height: 1.5em;
  color: #333;
}

h3 {
  font-size: 1.25em;
  line-height: 1.25em;
  color: #666;
}

h4 {
  font-size: 1em;
  line-height: 1em;
  color: #999;
}

h5 {
  font-size: 1em;
  line-height: 1em;
  color: #AAA;
}

h6 {
  font-size: 1em;
  line-height: 1em;
  color: #CCC;
}

a,
a:link,
a:visited {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #666;
  text-decoration: none;
}
a img     {border: none;}

.clean {
  clear: both;
  height: 1px;
  font-size: 1px;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  line-height: 1px
}
.section {
  margin-bottom: 30px;
}

.hidden {
  display: none !important;
}

#container {
  width: 962px;
  margin: 0 auto;
}

#header {
/*  height: 200px;*/
}

#header .contact-bar {
  padding: 7px 30px;
  text-align: right;
  font-size:  0.8em;
  background-color: #F1F1F1;
  border-left: 1px solid #D1D1D1;
  border-bottom: 1px solid #D1D1D1;
  border-right: 1px solid #D1D1D1;
  
}

#header .contact-bar li {
  position: relative;
  display: inline;
  margin-left: 50px;
}

#header .contact-bar a {
  position: relative;
}

#header .contact-bar a span {
  float: left;
  position: absolute;
  top: -1px;
  left: -20px;
  height: 16px;
  width: 16px;
  background: transparent url('/img/bg_contact_follow_icons.png') no-repeat 0 0;
}

#header .contact-bar a span.mail {
  background-position: 0 0;
}

#header .contact-bar a:hover span.mail {
  background-position: 0 -16px;
}

#header .contact-bar a span.twit {
  background-position: 0 -32px;
}

#header .contact-bar a:hover span.twit {
  background-position: 0 -48px;
}

#header .contact-bar a span.face {
  background-position: 0 -64px;
}

#header .contact-bar a:hover span.face {
  background-position: 0 -80px;
}

#header .logo {
  float: left;
  margin: 15px 0 15px 30px;
}

#header .logo a {
  display: block;
  height: 47px;
  width: 175px;
  background: transparent url('/img/bg_logo_matte.png') repeat 0 0;
}

#header .logo a:hover {
  background-position: left bottom;
}


#nav {
  float: right;
  margin: 21px 30px 0 0;
  list-style: none;
  bottom: 25px;
  font-size: 1em;
  font-weight: bold;
  color: #666;
  z-index: 10;
}

#nav li {
  position: relative;
  display: inline;
  float: left;
  background: transparent url('/img/bg_active_page.png') no-repeat center -200px;
}

#nav a {
  float: left;
  position: relative;
  display: block;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
/*  width: 100px;*/
/*  zoom: 1;*/
}

#nav a span {
  display: block;
  padding: 10px 0;
}

#nav a:hover {
  background-position: center bottom;
  color: #fff;
}

#nav li:hover {
  background-position: center bottom;
}

#nav ul {
  position: absolute;
  top: -999px;
  left: 0;
  width: 150px;
  height: 1px;
  overflow: hidden;
  list-style: none;
}

#nav ul li {
  float: none;
}

#nav li:hover ul {
  top: 34px;
  width: 150px;
  height: auto;
  overflow: visible;
}

#nav li:hover ul a {
  float: none;
}

#nav li:hover ul li {
  background: none;
  color: #fff;
}

#nav ul a {
  padding: 10px;
  background: #666;
  color: #fff;
  z-index: 10;
}

#nav ul a:hover {
  background: #CCC;
  z-index: 10;
}

#content {
/*  min-height: 500px;*/
  color: #999;
  border-left: 1px solid #D1D1D1;
  border-top: 1px solid #D1D1D1;
  border-right: 1px solid #D1D1D1;
  background-color: #FFF;
/*  background: #FFF url('/img/bg_content.jpg') no-repeat center top;*/
}

#content a,
#content a:link,
#content a:visited {
  text-decoration: underline;
  color: #F93;
}

#content a:hover {
  text-decoration: none;
}

#content strong {
  color: #666;
}

#content .cta {
  height: 150px;
  margin-bottom: 30px;
  border: 1px solid #F1F1F1;
  background-color: #CCC;
}

#content p {
  font-size: 1em;
  line-height: 1.3em;
  margin-bottom:  1.5em;
}

#content .breadcrumb {
  padding: 5px 30px;
  background-color: #EEE;
  color: #a1a1a1;
  font-size: 0.85em;
  z-index: 1;
/*  width: 600px;*/
  zoom: 1;
}

#content .breadcrumb span {
  color: #666;
}

#content .breadcrumb a {
  color: #999;
}

#content .copy {
/*  background-color: #FFF;*/
  padding: 30px;
}

#content .col-1-1 .uno {
  float: left;
  width: 435px;
  margin-right: 30px;
}

#content .col-1-1 .dos {
  float: left;
  width: 435px;
}

#content .col-2-1 .uno {
  float: left;
  width: 570px;
  margin-right: 30px;
}

#content .col-2-1 .dos {
  float: left;
  width: 300px;
}

#content .flash-message {
  background-color: #FF9933;
  color: #FFF;
  margin: 30px 30px 0 30px;
  padding: 5px 15px;
}

#content .flash-message.flash-message-error {
  background-color: #FF0000;
}

#footer {
  padding: 30px 30px 0 30px;
  background-color: #333;
  color: #707070;
  background: #D1D1D1 url('/img/bg_shadow.png') no-repeat center top;
  font-size: 0.85em;
}

#footer a,
#footer a:link,
#footer a:visited {
  text-decoration: underline;
/*  color: #fff;*/
}

#footer a:hover {
  text-decoration: none;
  color: #666;
}

#footer h6 {
  padding-bottom: 5px;
  font-size: 1.25em;
  border-bottom: 1px solid #AAA;
  color: #666;
}

#footer p {
  line-height: 1.25em;
}

#footer .col {
  float: left;
/*  height: 200px;*/
  width: 220px;
  margin-right: 30px;
  padding: 0 0 30px 0;
/*  background-color: blue;*/
}

#footer .col .inner {
  padding: 15px 30px 15px 0;
}

#footer .footer-links {
/*  border-right: 1px solid #aaa;*/
}

#footer .footer-links a {
  display: block;
  margin-bottom: 5px;
}


#footer .footer-contact {
/*  float: right;*/
  width: 220px;
  margin: 0;
/*  border-right: 1px solid #aaa;*/
}

#footer .footer-contact .contact {
  margin-bottom: 15px;
  padding-left: 30px;
  zoom: 1;
}

#footer .footer-contact .last {
  margin-bottom: 0;
}

#footer .footer-contact .address {
  background: transparent url('/img/icons/icn_address_book.png') no-repeat 0 0;
}

#footer .footer-contact .phone {
  background: transparent url('/img/icons/icn_horn.png') no-repeat 0 0;
}

#footer .footer-contact .email {
  background: transparent url('/img/icons/icn_at.png') no-repeat 0 0;
}

#footer .footer-contact span {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

#footer .footer-contact p {
  line-height: 1.25em;
}

#footer .footer-updates {
  margin: 0;
  width: 432px;
}

#footer .footer-updates .inner {
  padding-right: 0;
}

#footer .newsletter {
  padding-right: 0;
  margin-bottom: 15px;
}

#footer .newsletter .updates-form {
  margin: 5px 0 0 0;
  padding: 15px;
  background-color: #DDD;
  color: #333;
}

#footer .newsletter .updates-form .input {
  margin-bottom: 5px;
}


#footer .newsletter .updates-form label {
  padding: 0 5px;
}

#footer .newsletter .updates-form .text-field {
  padding: 2px 5px;
  width: 100px;
  border: 1px solid #666;
  background-color: #CCC;
  color: #666;
}

#footer .newsletter .updates-form .submit {
  margin-left: 15px;
  padding: 2px 5px;
  width: 60px;
  border: 1px solid #CCCCCC;
  cursor: pointer;
}

#footer .social-updates {
  padding-right: 0;
}

#footer .social-updates .social-icon {
  display: block;
  float: left;
  margin-right: 15px;
  width: 60px;
  height: 60px;
}

#footer .social-updates .social-icon span {
  display: none;
}

#footer a#footer-twitter {
  background: transparent url('/img/bg_footer_twitter.png') no-repeat 0 0;
}

#footer a#footer-facebook {
  background: transparent url('/img/bg_footer_facebook.png') no-repeat 0 0;
}

#footer a#footer-twitter:hover,
#footer a#footer-facebook:hover {
  background-position: left bottom;
}

#copyright {
  display: none;
  margin: 15px 0 0;
  padding: 5px 15px;
  background-color: #FF9933;
  color: #FFF;
  font-size: 0.85em;
  text-align: right;
}

#copyright a,
#copyright a:link,
#copyright a:visited {
  text-decoration: none;
  color: #666;
}

#copyright a:hover {
  color: #333;
}