/**
 *
 * Lightbox Tray
 *
 */
/******************************************************************
Site Name: Lisa Yuskavage
Author: Tinymill

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*==================================
=            Typography            =
==================================*/
/*=====  End of Typography  ======*/
/*============================
=            etc.            =
============================*/
/*=====  End of etc.  ======*/
/*===============================
=            Extends            =
===============================*/
/*=====  End of Extends  ======*/
#drop_area {
    position: fixed;
    width: 100%;
    height: 350px;
    background-color: #fff;
    border-top: 1px solid #E2E4E6;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: -350px;
    z-index: 1000;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    padding: 1.3rem;
    z-index: 6000; }
    @media (min-width: 780px) {
      #drop_area {
        height: 230px;
        bottom: -275px; } }
  
  #toggle_lightbox {
    position: fixed;
    bottom: 2.8rem;
    right: 1rem;
    cursor: pointer;
    z-index: 7005; }
  
  .toggle_lightbox {
    cursor: pointer; }
  
  body.tray-open #drop_area {
    bottom: 0; }
  
  .imagetoload.gu-transit,
  .imagetoload.gu-mirror {
    list-style: none; }
    .imagetoload.gu-transit .list_item_meta,
    .imagetoload.gu-mirror .list_item_meta {
      display: none !important; }
  
  .send-to-pdf {
    cursor: pointer; }
    .send-to-pdf:hover {
      color: #171717; }
  
  .lightbox-artworks.imagetoload {
    display: inline-block;
    padding: 5px; }
  
  #drop_area img {
    max-width: 100%;
    /* height: auto; */
    max-height: 150px;
    min-height: 150px;
    height:150px;
    width: auto; }
  
  .grabbable {
    cursor: move;
    /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab; }
  
  .ligthbox_header {
    margin: 0 1em 1em 0;
    padding-left: 1em; }
    .ligthbox_header ul {
      margin-top: 0; }
      .ligthbox_header ul li {
        text-transform: uppercase; }
        .ligthbox_header ul li a {
          text-decoration: none; }
    @media (min-width: 780px) {
      .ligthbox_header {
        padding-left: 240px; }
        .ligthbox_header ul li {
          display: inline-block; }
          .ligthbox_header ul li:after {
            padding: 0 10px;
            content: "|"; }
          .ligthbox_header ul li:last-of-type:after {
            content: "";
            padding: 0; } }
  
  .lightbox-tray-toggle {
    font-family:'canada-type-gibson', sans-serif;
    font-weight:300;
    padding-left: 1em; }
    @media (min-width: 780px) {
      .lightbox-tray-toggle {
        float: left; } }
  
        .lightbox-artworks .imagetoload h3 {
          display:none;
        }
  .lightbox-artworks {
    overflow-y: scroll;
    white-space: nowrap; }
    .lightbox-artworks .imagetoload {
      display: inline-block;
      max-height: 150px; }
      .lightbox-artworks .imagetoload .grabbable {
        width: auto;
        padding-right: 15px; }
      .lightbox-artworks .imagetoload .list_item_meta {
        display: none; }
    @media (min-width: 780px) {
      .lightbox-artworks {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        padding-left: 235px;
        height: 150px; } }
  
  .grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing; }
  
  .clear-lightbox {
    cursor: pointer; }
  
  .btn {
    border: 0 none;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    margin: 10px;
    padding: 7px 10px;
    text-transform: none;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    text-align: center;
    background: none repeat scroll 0 0 #444444;
    padding: 15px; }
  
  .btn a {
    color: #FFFFFF;
    text-decoration: none; }
  
  .main_artwork_thumb {
    display: none; }
  
  #statetarget .statetoload,
  #statetarget .statetoload .grabbable {
    float: left;
    display: inline; }
  
  #statetarget .statetoload {
    padding-right: 15px; }
  
  #statetarget .statetoload .grabbable {
    background-color: #efefef;
    min-height: 20px;
    min-width: 20px; }
  
  .display_none {
    display: none; }

.fa-eye {
    font-size:24px;
}