@import url("../../initialize.css") all;

/* by dario esteban brozzi -  http://www.dariobrozzi.com/ */

/* LAYOUT */

.wrapper { margin: 0 auto; }
.top, .bottom { clear: both; }

.content{ width: 780px; margin: 0 auto; padding: 0 0 0 20px; }
  #header .content{ padding-top: 60px; padding-bottom: 40px; }
  #footer .content{ padding-bottom: 60px; }
  .aboutMe .content{ padding: 0; width: 800px; }
  .aboutPage .content{ padding-bottom: 20px; }

.section{ clear: both; display: block; padding: 20px; }

.module{ float: left; display: inline; }
  #header .module.one{ width: 540px; }
  #header .module.two{ width: 140px; float: right; }
  .aboutPage .module.one{ width: 300px; padding-right: 20px;}
  .aboutPage .module.two{ width: 220px; padding-right: 20px;}
  .aboutPage .module.three{ width: 200px; }
  .aboutMe .module.one{ float: left; margin: 0 0 0 6px; }
  .aboutMe .module.two{ width: 540px; float: right; }
  #footer .module.one{ width: 300px; float: left; }
  #footer .module.two{ width: 220px; float: right; }
  .conversion .module.features{ width: 560px; margin-top: 20px; padding-bottom: 140px; }
  .conversion .module.testimonials{ width: 220px; margin-top: -167px; float: right; }

#header .intro{ width: 460px; float: left; margin-top: 20px; }
.section.conversion .intro{ width: 300px; }


/* TYPOGRAPHY / FONT FAMILY */

body{ font: 100%/160% Georgia, Constantia, "Lucida Bright", LucidaBright, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Times, Serif; }


/* ACCESIBILITY */

a:hover:after, a:focus:after { content: " [" attr(accesskey) "] "; }


/* STYLE */

body{ background: #FFF; color: #6F6D70; margin: 0; }

#header, #footer, .section{ border-left: 5px solid #4880C3; border-right: 30px solid #4880C3; }

.title{ margin-bottom: 10px; }
  .conversion .module.testimonials .title{ padding-top: 15px; }
  .aboutMe .title.l1{ margin-left: 22px; }
  .title span{ color: #4880C3; font-weight: normal; font-size: 135%; }
  .title.l2{ margin-bottom: 0; }
    .title.l2 span{ font-size: 105%; text-transform: uppercase; letter-spacing: 1px; }
  .navigation.secondary .title{ margin-bottom: 3px; margin-top: 9px;  line-height: 75%; }
    .navigation.secondary .title span{ font-size: 75%; }
  
#footer .policy{ font-size: 70%; font-style: italic; letter-spacing: 1px; margin-top: 20px; }
#footer .policy *{ font-size: 100%; letter-spacing: 1px; }
#footer .policy ul{ list-style: none; }
#footer .policy ul li{ display: inline; font-style: italic; }

a{ text-decoration: none; color: #6F6D70; border-bottom: 2px solid #D8D6D9; font-variant: normal; text-transform: lowercase; }
  a:hover{ border-color: #4880C3; }
  a.action, .action{ letter-spacing: 1px; cursor: pointer; }
    a.action, a.action span, .action, .action span{ color: #afadb0; border: 0; line-height: 110%;}
    a.action span, .action span{ font-size: 110%; }
    a.action:hover, .action:hover{ color: #6F6D70; }
    a.action:hover span, .action:hover span{ color: #4880C3; }
      .aboutPage a.action:hover span, .aboutPage .action:hover span{ color: #1D4624; }
      
.content p{ margin-bottom: 20px; }

.section.conversion, .section.conversion a:hover{ border-color: #DEAC54; }
.section.conversion .title span{ color: #DEAC54; }

.section.development, .section.development a:hover{ border-color: #A26114; }
.section.development .title span{ color: #A26114; }

.section.faq, .section.faq a:hover{ border-color: #792B29; }
.section.faq .title span{ color: #792B29; }

.section.aboutMe, .section.aboutMe a:hover{ border-color: #CA1100; }
.section.aboutMe .title span{ color: #CA1100; }

.section.aboutPage, .section.aboutPage a:hover{ border-color: #1D4624; }
.section.aboutPage .title span{ color: #1D4624; }


/* BACKGROUNDS */

#header .content{ background: transparent url(2.jpg) 547px bottom no-repeat; }
.section.aboutPage .content{ background: transparent url(1.jpg) 365px bottom no-repeat; }
.section.conversion .content{ background: transparent url(4.jpg) 345px 105px no-repeat; }
.section.conversion .module.features{ background: transparent url(5.jpg) 414px bottom no-repeat; }
.section.conversion .content .testimonials{ background: transparent url(quote.png) right 0 no-repeat; }
#footer .content{ background: transparent url(3.jpg) 393px bottom no-repeat; }


/* LISTS */

.list{ list-style: none; margin: 0 0 20px 0; }
  .list .item{  margin: 0; padding-left: 20px; background: transparent no-repeat; background-position: 6px 12px; line-height: 170%; }
 .features .list .item{ background-image: url(b1.gif); }
 .aboutPage .list .item{ background-image: url(b2.gif); }
 
.vcard *{ margin: 0; }
  .vcard .title{ margin-top: 20px; }

.logotype{ margin: 0; }
  .logotype span{ letter-spacing: 1px; font-size: 80%; }
.slogan{ margin: 0; }
  .slogan span{ font-variant: small-caps; font-size: 65%; letter-spacing: 2px; font-weight: normal; }

.intro{ font-variant: small-caps; }


/* NAVIGATION */

.navigation{ list-style: none; text-indent: 0; margin: 0; padding: 0; }
.navigation.language{ position: absolute; top: 0; right: 0; margin-right: 40px; margin-top: 10px; }
.navigation.language *{ font-variant: small-caps; }
.navigation.validates *, .navigation.designs{ text-transform: uppercase; }
.navigation.validates .item, .navigation.designs .item{ border-top: 1px dotted #AFADB0; }
.navigation.validates .item.first, .navigation.designs .item.first{ border-top: 2px solid #1D4624; }


/* TYPES */

.portrait{ background: transparent url(../../images/portrait_175.png) no-repeat 0 0; padding: 13px 21px 25px 23px; border: 0; display: block; width: 175px; height: 175px; }

.quotes{ list-style: none; margin-left: 0; }
  .quote { font-size: 90%; font-style: italic; margin: 0 0 20px 3px; border-left: 3px solid #f7f7f8; padding-left: 10px; }
    .quote .by { font-weight: bold; font-style: italic; }
    .quote .mark { font-size: 100%; }
    .quote em{ color: #5f5e60; letter-spacing: 1px; font-variant: small-caps; font-style: normal; }

.cloud{ padding: 0; }
  .cloud li{ display: inline; font-size: 90%; text-transform: uppercase; letter-spacing: 1px; }

.separator{ font-size: 140%; }
  .aboutMe .separator{ color: #CA1100; }


/* FOR DEVELOPER */

.grid{ position: absolute; z-index: 0; width: 100%; }
  .grid{ display: none; }
.grid .content{ margin: 0 auto; border: 0; padding: 0; width: 960px; }
.col{ width: 60px; float: left; display: block; margin: 0 10px;  background: green; height: 5000px; /*filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; */ }