/* Welcome to Susy. Use this file to define screen styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */

// Imports --------------------------------------------------------------*/

@import "defaults";

/* Layout --------------------------------------------------------------*/

@include susy;

// change '#page' to match your HTML container element(s)
#page {
  @include container;
  //@include show-grid("grid.png"); 
  @include sans-family;
}

// show-grid loads a 64+16x24 grid image by default
// For other grid settings, run `compass grid-img 30+10x20`
// Where 30 is the column width, 10 is the gutter width, 
// and 20 is the (optional) line-height.

/* Styles --------------------------------------------------------------*/

header#site-header {
  @include full;
  @include leader(6,32px);
  @include trailer(2,32px);
  #logo {
    @include columns(1,12);
    @include prefix(1);
    img {
      width: 64px;
      height: auto;
      
    }
  }
  #site-title {
    @include columns(5,12);
    h1{
      @include adjust-font-size-to(24px);
      color: black;
    }
  }
  #site-description {
    @include columns(5,12);
    h2 {
      @include adjust-font-size-to(24px);
      color: #ddd;
    }
  }
  #access {
    @include skip-link();
  }
  nav {
    @include trailer(1,32px);
    @include prefix(2);
    ul {
      @include inline-block-list(12px);
      li {
        @include slab-family;
      }
    }
  }
}

section#main {
  @include full;
  header#page_title
  {
    h1, h2 {
      @include adjust-font-size-to(48px);
      color: #aaa;
      @include prefix(2);
    }
  }
  section#content {
    min-height: 320px;
    @include prefix(0);
    @include columns(12,12);
    @include leader(1,32px);
    h1, h2 {
      @include adjust-font-size-to(24px);
    }
    article {
      @include trailer(2,32px);
      aside {
        color: #aaa;
        a {
          color: #999;
        }
      }
    }
  }
  aside#sidebar {
    @include columns(2,12);
    ul {
      @include no-style-list;
    }
  }
}

footer {
  @include prefix(2);
  @include full;
  @include slab-family;
}

section.subsection {
  @include columns(12,12);
  aside.submenu {
    @include columns(2,12);
    ul {
      @include no-style-list;
      @include adjust-font-size-to(12px);
    }
  }
  
  section.subpage {
    @include columns(9,12);
  }
}

#galleria_gallery {
  @include columns(10,10);
  #main_image {
    @include trailer(2,32px);
    min-height: 320px;
    min-width: 532px;
    background-color: #f6f6f6;
    text-align: center;
    padding: 16px;
    img {
      vertical-align: middle;
      @include box-shadow(0px, 0px, 32px, #aaaaaa);
    }
  }
  #gallery.gallery {
    @include columns(10,10);
    ul {
      @include no-style-list;
      li {
        display: inline-block;
      }
    }
  }
}

.posterous, .page {
  @include prefix(2);
}

.posterous {
  #pagination {
    @include leader(3,32px);
    @include trailer(3,32px);
    font-weight: bold;
  }
  @include columns(6,10);
  article {
    h2 > a {
      display: none;
    }
    h2.entry-title a {
      display: inline !important;
    }
  }
}

.linkedin{
  #additional-information{
    h2 + h3 {
      display: none;
    }
  }
  
  #additional-information {
    .websites {
      display: none;
    }
  }
  #contact-settings, .affiliation {
    display :none;
  }
  @include adjust-font-size-to(14px);
  .showhide-link, .connections, .recommended, hr {
    display: none;
  }
  h2 {
    @include adjust-font-size-to(32px);
    @include leader(2,32px);
    @include trailing-border(2px,1,32px, solid);
  }
  
  h3, dt {
    @include adjust-font-size-to(24px);
    @include slab-family;
  }
  
  ul.vcalendar {
    padding-left: 32px;
    background-color: #eee;
    @include padding-leader(1,32px);
    @include padding-trailer(1,32px);
  }
  
  #summary {
    
  }
  #overview {
    @include trailer(2,32px);
    @include columns(8,8);
    -moz-column-count: 2;
    -moz-column-gap: 32px;
    -webkit-column-count: 2;
    -webkit-column-gap: 32px;
    column-count: 2;
    column-gap: 32px;
    dl {
      dt {
        
      }
      dd {
        
      }
    }
  }
  
}



.page {
  iframe {
    width: 580px;
    height: 580px;
    background-color: #eee;
    padding: 32px;
    overflow: hidden;
    scroll: none;
  }
}

#testing {
  background-color: red;
}

section#errors {
  background-color: #ffdddd;
  padding: 0.5em;
  h2 {
    @include adjust-font-size-to(16px);
    color: #882222;
  }
  .reason {
    display: none;
  }
}