@import url(http://fonts.googleapis.com/css?family=Monda:400,700);

body { font-family: Monda, arial, sans-serif; color: #14003B; font-size: 12px; line-height: 14px; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5,p,ul { margin-top: 0; }
h5 { font-size: 12px; font-weight: bold }
td { vertical-align: top; text-align: left; padding-right: 20px; padding-bottom: 5px; }
ul.primary, ul.secondary { position: relative; border-bottom: none; z-index: 5; } 
#page { max-width: 1350px; margin-left: 66px; }

/* Header */
#header { position: fixed; top: 0; left: 44px; z-index: 100; background: white; width: 100px; }
.logged-in #header { top: 80px; }
#site-name { margin-top: 7px; margin-left: -4px;margin-bottom: 2px; }

#header .menu-open {
    background: white; font-weight: bold; font-size: 12px; z-index: 5; position: relative;
    letter-spacing: 5px; padding: 18px 20px 5px 20px; display: inline-block;
}
#header .main-menu {
    background: white; padding: 36px 36px 36px 66px; margin-left: -62px; margin-top: -782px; 
    width: 330px; height: 673px; font-size: 11px; font-weight: bold; display: block; 
}
#header .main-menu.open { margin-top: -32px; }      
#header .main-menu, #header .main-menu.open {
  transition: margin-top 1s;
  -webkit-transition: margin-top 1s; 
  -moz-transition: margin-top 1s; 
}
#block-system-main-menu { text-transform: lowercase; line-height: 15px; }
#header .main-menu h2 {
  font-size: 11px; text-transform: lowercase; margin-bottom: 0px;
  text-decoration: underline; cursor: pointer;
}
#header #block-views-projects-menu-block h2 { margin-bottom: -6px; }
#header .main-menu ul { padding: 0; margin-top: 0; margin-bottom: 4px; }
#header .main-menu li { list-style: none; }
#header .main-menu .item-list > ul > li { margin-top: 10px; }
#header .main-menu .item-list > ul > li > a {
    text-decoration: underline; text-transform: lowercase;
    display: inline-block; margin-bottom: 2px;
}
#header .main-menu .item-list > ul ul li { margin-top: 0; }
#header .main-menu .item-list > ul ul li a { text-decoration: none; margin: 0; }

  /* Drill menu */
  .main-menu .block li { display: none; cursor: pointer; }
  .main-menu .open li { display: block; }
  .main-menu .block li li { display: none; }
  .main-menu .block li.open li { display: block; }



/* Basic inner page */
.node-type-page #page { margin-top: 82px; }
.node-type-page h2 { font-size: 21px; margin-bottom: 34px; }
.node-type-page p, .node-type-page table { margin-bottom: 23px; }
.node-page { width: 740px; }
.node-type-page .sidebar {
  float: left; margin-bottom: 50px; margin-right: 20px;
  margin-top: 3px;
}

/* Project page */
#block-views-current-taxonomy-pager-block { display: none; }
.node-type-project #page { margin-top: 95px; }
.node-type-project .info { float: left; margin-right: 35px; margin-bottom: 35px; width: 370px; }
.node-type-project .title { font-size: 12px; line-height: 16px; margin-top: 13px; }
.node-type-project article > figure,
.node-type-project article > iframe { 
  float: left; padding-right: 35px; padding-bottom: 35px; position: relative; 
}

.node-type-project article > iframe {
  border: none; height: 360px;
}
.node-type-project article > figure a { display: block; outline: none; }
.node-type-project article > figure a + a { display: none; }
.node-type-project article > figure figcaption { position: absolute; bottom: 20px; left: 0; }

    /* Colorbox */
    #cboxWrapper { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
    #cboxNext, #cboxPrevious, #cboxClose,
    #cboxNext:hover, #cboxPrevious:hover, #cboxClose:hover,
    #cboxNext:active, #cboxPrevious:active, #cboxClose:active {
        width: 17px; height: 17px; background-repeat: no-repeat; background-position: 0 0;
    }
    #cboxNext, #cboxPrevious, #cboxNext:hover, #cboxPrevious:hover {
      position: fixed; top: 50%; width: 30px; height: 48px;
      background: url('../images/arrows-white.png'); opacity: 0.5;
    }
    #cboxPrevious { left: 20px; right: auto; }
    #cboxNext { left: auto; right: 20px; }
    #cboxNext:hover, #cboxPrevious:hover { opacity: 1; }
    #cboxNext, #cboxNext:hover { background-position: -30px 0; }
    #cboxPrevious, #cboxPrevious:hover { background-position: 0 0;  }
    #cboxClose, #cboxClose { background-image: url('../images/close.png'); }
    #cboxCurrent { color: #14003B; left: 0; }
    

/* Category page */
.page-category { margin-top: 208px;  }
.page-category #content > h2 { float: left; font-size: 15px; width: 480px; height: 130px; }
.page-category .views-row { float: left; margin-bottom: 50px; }
.page-category .views-row a { position: relative;padding-right: 0px; margin-right: 50px; display: block; }
.page-category .views-row img { display: block; }
.page-category .views-row .title { 
    position: absolute; font-size: 11px; text-align: center; display: none;
    top: 50px; background: white; line-height: 15px; padding: 5px 0; width: 100%;
}
.page-category .views-row:hover .title { display: block; }

/* Front */
.front .border { display: block; position: fixed; border: 13px solid white; top: 0; left: 0; z-index: 3; cursor: pointer; }
.front .main-logo-overlay, .front .main-logo {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
    opacity: 0.5; filter: alpha(opacity=50); background: black;
}
.front .main-logo {
    opacity: 1; filter: alpha(opacity=100);
    background: url('../images/front-logo.png') 50% 50% no-repeat;
}

    /* Pager and title */
    .front #slide-title {
        display: block; position: fixed; left: 58px; color: black; font-size: 14px; background: white;
        padding: 10px 29px 10px 13px; line-height: 16px; bottom: -80px;
    }
    .front.open-pager #slide-title { bottom: 38px; }
    
    .front #slide-title .content {
        background: url('../images/info-triangle.png') 123px 0 no-repeat;
        margin-top: -19px; padding-top: 19px; padding-right: 29px; max-width: 124px; 
    }

    .slideshow-pager { position: fixed; bottom: -80px; left: 58px; z-index: 10; }
    .open-pager .slideshow-pager { bottom: 10px; }
    .open-pager .slideshow-pager, .slideshow-pager, .front.open-pager #slide-title, .front #slide-title {
        -webkit-transition: bottom 0.5s ease-out;  /* Chrome 1-25, Safari 3.2+ */
           -moz-transition: bottom 0.5s ease-out;  /* Firefox 4-15 */
             -o-transition: bottom 0.5s ease-out;  /* Opera 10.50–12.00 */
                transition: bottom 0.5s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
        
    }
    .slideshow-pager a {
        display: inline-block; width: 22px; height: 22px; margin-right: 3px; cursor: pointer;
        background-color: white; background-position: 50% 50%; background-repeat: no-repeat;
        
    }
    .slideshow-pager .prev { background-image: url('../images/prev.png'); }
    .slideshow-pager .close { background-image: url('../images/close.png'); }
    .slideshow-pager .next { background-image: url('../images/next.png'); }
    
/* Mobile */
@media screen and (max-width: 600px) {
    #skip-link { position: absolute; }
    .html { margin: 0; border: 0; }
    body,html { overflow-x: hidden }
    .node { overflow: hidden }
    .html #page { margin: 16px 10px; }
    
    /* Header */
    #header { position: static; height: 170px; padding-top: 0; }
    
        /* Logo */    
        #header #site-name { margin-left: 0; margin-bottom: 17px; }
        #site-name img { display: none; }
        #site-name a {
            display: block; background: url('../images/mobile-logo.png'); background-size: contain;
            width: 164px; height: 50px;
        }
        
        /* Menus */
        #header .menu-open { display: none; }
        #header .main-menu { display: block; color: #666666; font-weight: normal; margin: 0; padding: 0; width: auto; height: auto; }
        #header .main-menu.open { margin: 0; }
        #header .main-menu .active, #header .main-menu .active-trail, #header .block-title.active-trail { color: black; font-weight: bold; }
        #header .main-menu .active-trail .item-list { font-weight: normal; }
        #header .main-menu h2, #header .main-menu .item-list > ul > li > a  { cursor: pointer; }

        #block-views-projects-menu-block { position: absolute; top: 83px; left: 87px; }
        #block-views-projects-menu-block .item-list { margin-left: -77px; width: 600px; margin-top: 11px; }
        #block-views-projects-menu-block .item-list .item-list { position: absolute; left: 0; top: 59px; }
        #header #block-views-projects-menu-block h2 { margin-bottom: -10px; }
        #header .item-list .item-list li, #header .menu li { display: inline-block; margin-right: 10px; }
        #header .main-menu .item-list > ul > li { margin-top: -2px; }
        
        #header .block > .item-list, #header .block > .menu { display: none; }
        #block-views-projects-menu-block > .item-list > ul > li > .item-list { display: none; }
        
    /* Simple pages */
    #page .node-page { width: auto; }
    #page .node-page * { font-size: 12px; line-height: 18px; }
    #page .node-page h2 { margin-bottom: 18px; }
    
    /* Category */
    .page-category .views-row .title { display: block; }
    .page-category #content > h2 { width: auto; height: auto; padding-bottom: 20px; font-size: 12px; }
    
    /* Single project */
    .node-type-project #block-views-current-taxonomy-pager-block { display: block; position: absolute; right: 12px; font-size: 11px; }
    .node-type-project #block-views-current-taxonomy-pager-block a { margin-left: 16px; }
    .node-type-project #header { height: 180px; }
    .node-type-project .node { padding-top: 40px; }
    .node-type-project .title { font-size: 11px; margin-top: 12px; margin-bottom: -16px; }
    .node-type-project article > a { padding-right: 0; padding-bottom: 12px; }
    .node-type-project article > figure,
    .node-type-project article > iframe { padding-right: 0; padding-bottom: 15px; width: 100% }
    .node-type-project article > iframe { height: 258px }
    .node-type-project article > figure a { display: none; }
    .node-type-project article > figure a + a { display: block; max-width: 640px; }
    
    /* Front page */
    .front .border, .front .main-logo-overlay, .front .main-logo { display: none; }
    .node-home-page { overflow: hidden; }
    .node-home-page img { cursor: pointer; }
    .slideshow-pager { display: block; position: static; margin-left: -7px; margin-top: 4px; }
    .slideshow-pager .close { display: none; }
    .front #slide-title .content, .front #slide-title { position: static; background: none; padding: 0; margin: 0; max-width: 100%; }
    .front #slide-title { display: block; float: right; margin-top: -26px; font-size: 11px; cursor: pointer; }
}