html{
  margin:0;
  font-family: 'Roboto', sans-serif;
  font-size:16px;
  height:100%;
  min-width:320px;
}

body{
  margin:0;
  height:100%;
  background-color:#444;
}

#console{
  font-size:0.8em;
  position: fixed;
  top: 0;
  z-index: 1;
}
#console .messages{
  border:none;
  padding-left:60px;
  background-color:white;
  background-position: 8px 5px
}

div,img,a {
  margin:0;
  padding:0;
}

img{
}

a {
  text-decoration:none;
  color:#444;
  font-weight:normal;
}

input{
  font-family: 'Roboto', sans-serif;
}

#not-found,
#access-denied{
  padding:60px;
  color:white;
  font-size:3em;
  font-weight:bold;
}


/*Login*/
#user-login{
  padding:60px;
}

#user-login input.form-text{
  font-size:1.1em;
  padding:5px;
  margin:10px 0;
}

#user-login input.form-submit{
  background:none;
  border:1px solid #444;
  padding:5px;
  cursor:pointer;
  background-color:white;
  color:#444;
}

/*Header*/

#header{
  background-color:#444;
  color:white;
  font-family: 'Lora', serif;
  font-size:0.9em;
  height:41px;
  width:100%;
  /* min-width:1025px; */
  position:fixed;
  overflow:hidden;
}

#logo-wrapper{
  display:inline-block;
  height:41px;
  overflow:hidden;
}

#logo{
  display:inline-block;
  padding-left:60px;
  padding-right:40px;
  background-image: url('../img/rndrd-logo-grey.png');
  background-color:white;
  background-repeat: no-repeat;
  background-position: 60px;
  background-size:contain;
  width:229px;
  height:41px;
}

#logo.active{
  background-image: url('../img/rndrd-logo-white.png');
  background-color:#444;
}

#slogan{
  display:inline-block;
  vertical-align:top;
  letter-spacing:1px;
  color:#bbb;
  padding-top: 11px;
  padding-left: 11px;
}

#mobile-menu{
  display:none;
  float:right;
}
#mobile-menu .menu-icon{
  background-image: url('../img/menu.png');
  background-repeat: no-repeat;
  background-position: -2px;
  background-size: contain;
  width: 37px;
  height: 41px;
}
#about-slogan{
  display:none;
}

#right-wrapper{
  float:right;
  padding-top: 9px;
  height: 32px;
  overflow: hidden;
  margin-right:20px;
}

#feeds{
  display:inline-block;
  vertical-align: top;
}

#right-wrapper .label{
  display:inline-block;
  padding-top: 17px;
  padding-right:10px;
  color: #bbb;
}

#right-wrapper .feed{
  display:inline-block;
  height: 32px;
  width: 36px;
  background-size:contain;
}
#right-wrapper .feed:hover{
  opacity:.25;
}
#right-wrapper .feed.instagram{
  background-image: url('../img/instagram-white.png');
}
#right-wrapper .feed.pinterest{
  background-image: url('../img/pinterest-white.png');
}
#right-wrapper .feed.tumblr{
  background-image: url('../img/tumblr-white.png');
}
#right-wrapper .feed.twitter{
  background-image: url('../img/twitter-white.png');
}
#right-wrapper .feed.rss{
  background-image: url('../img/rss-white.png');
}

#right-wrapper .about{
  display:inline-block;
  margin-left:30px;
}
#right-wrapper .about a{
  display:inline-block;
  padding-top: 3px;
  padding-right:10px;
  color: #bbb;
}
#right-wrapper .about a:hover{
  color:#888
}


/*Page*/

#page,.region-content{
  height:100%;
  overflow:hidden;
}

#block-adjuster{
  display:inline-block;
  position:relative;
  left:-36px;
  cursor:pointer;
  background-image: url('../img/block-adjuster-right-grey.png');
  background-repeat: no-repeat;
  background-size: contain;
  height:61px;
  width:130px;
}

#block-adjuster:hover{
  /* opacity:.25 */
}

#block-adjuster.open{
  background-image: url('../img/block-adjuster-left.png');
  left:-123px;
}

#text-block-wrapper{
  display:inline-block;
  color:white;
  padding-top:102px;
  width:60px;
  min-width:60px;
  height: 100%;
  overflow:hidden;
}
#text-block-wrapper.open{
  width:410px;
}
#text-block-header{

}
#text-block{
  padding-left:60px;
  height: 100%;
}

/*Form*/
.form-item, .form-actions{
  margin:0;
}
input{
  -webkit-appearance: none;
  border:none;
  background-color:white !important;
  height:25px;
  padding:0;
}
input:focus,
select:focus{
  outline: none;
}

#filter-sort{
  margin-top:-1px;
  margin-bottom:15px;
  overflow: hidden;
  width:0;
  height: 125px;
}

#text-block-wrapper.open #filter-sort{
  width:auto;
}

#filter-sort .labels{
  display:inline-block;
  width:132px;
  font-weight:bold;
  letter-spacing:2px;
  font-size:1.1em;
  line-height: 1.3em;
  vertical-align: top;
}
#filter-sort .filter-label{
  padding: 2px 0 1px 0;
}

#filter-sort .values-wrapper{
  display:inline-block;
  overflow:hidden;
  height: 125px;
  width:216px;
  line-height: 1.2em;
  vertical-align: top;
  float: right;
}
#filter-sort .values{
  width:1000px;
}

#filter-sort .filter-value-text,
#filter-sort .sort-value-text{
  padding:1px 0 0 0;
  margin-left:13px;
  font-size:1em;
}

#filter-sort .filter-value,
#filter-sort .sort-value{
  padding:1px 0 0 0;
  margin-left:20px;
  height:24px;
}
#filter-sort a .filter-value,
#filter-sort .sort-value{
  color:#bbb;
}
#filter-sort .sort-value .form-type-select select{
  cursor:pointer;
}

#filter-sort a .filter-value:hover,
#filter-sort a .filter-value.clicked,
#filter-sort .sort-value.clicked,
#filter-sort .filter-value.selected,
#filter-sort .sort-value.selected{
  background-color:white;
  color:#888;
  cursor:pointer;
}
#filter-sort .filter-value.selected{
  font-style:italic;
  font-size:1em;
  cursor:default;
}

#filter-sort .sort-value select{
  padding: 0px 0px 0px 0;
  margin-left: 9px;
  vertical-align: middle;
  outline: none;
  border: none;
  background: #444;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  width: 188px;
}
#filter-sort .sort-value option{
  outline: none;
  border: none;
}

#filter-sort .filter-reset{
  display: inline-block;
  background-image: url('../img/reset.png');
  margin: 0 0 2px 10px;
  height:16px;
  width:16px;
  vertical-align: middle;
}
#filter-sort .filter-reset:hover{
  opacity:.5;
}

#search input.empty{
  color:#888;
  font-weight: normal;
  font-style:italic;
}

.filter-count{
  color:#888;
  padding-left:5px;
  font-size:.75em;
  font-style:italic;
  font-weight:bold;
}

#search{
  background-color:white;
  height: 25px;
  width: 260px;
  margin-left: -60px;
  margin-right:10px;
  padding-right:10px;
  color:#bbb;
  font-style:italic;
  padding-left:60px;
  display: inline-block;
  vertical-align: top;
}

#search input{
  width: 100%;
  font-size: 1em;
  font-family: 'Roboto', sans-serif;
  text-align: right;
}

#search .form-item-search-bar{
  width:100%;
}
#form-submit{
  vertical-align: top;
  display: inline-block;
  float: right;
}
#form-submit input{
  padding: 1px 6px 0 5px;
  font-weight: bold;
  font-size: 1.0em;
  line-height: 1.3em;
  height:25px;
  cursor:pointer;
  text-transform:lowercase;
  -webkit-appearance: none;
  border-radius:0px;
  margin:0 -1px 0 0;
}



/*List*/
#list-count{
  font-weight:bold;
  letter-spacing:2px;
  font-size:1.1em;
  margin-top:20px;
  margin-bottom:10px;
  height: 20px;
}
#list-wrapper{
  overflow: hidden;
  height: 35%;
  overflow-y: scroll;
  margin-right: -20px;
  margin-left: -15px;
  padding-right: 25px;
  width:auto;
  display:none;
}
#text-block-wrapper.open #list-wrapper{
  display:block;
}
#list-top-fade{
  -moz-box-shadow: inset 0px 25px 25px -12px #444;
  -webkit-box-shadow: inset 0px 25px 25px -12px #444;
  box-shadow: inset 0px 25px 25px -12px #444;
  height:30px;
  margin-bottom: -25px;
  z-index: 1;
  position: relative;
  pointer-events: none;
}
#list{
  padding:15px 0 30px 15px;
  list-style: circle;
}
#list-bottom-fade{
  -moz-box-shadow: inset 0px -25px 25px -12px #444;
  -webkit-box-shadow: inset 0px -25px 25px -12px #444;
  box-shadow: inset 0px -25px 25px -12px #444;
  height: 50px;
  margin-top: -50px;
  z-index: 1;
  position: relative;
  pointer-events: none;
}
.title a{
  font-size:.8em;
  color:#bbb;
  letter-spacing:1px;
  cursor:pointer;
  list-style:none;
}
.title.hover a{
  color:white;
}

.bullet{
  margin: 0 0 0 -15px;
  padding: 5px 5px;
  vertical-align: top;
  opacity:.5;
  height:10px;
  width:10px;
  background-image: url('../img/disc-empty.png');
  background-repeat: no-repeat;
  background-position:5px;
  display:inline-block;
}
.title.hover .bullet{

}

.title.hover .bullet.hover{
  opacity:1;
  background-image: url('../img/disc-blue.png');
  cursor:pointer;
}

.title.selected a{
  color:white;
}

.title.selected .bullet{
  opacity:1;
  background-image: url('../img/disc-blue.png');
}

.title-value{
  display:inline-block;
  width: 310px;
  padding: 0 0 10px 0;
  line-height: 1em;
}


/*Images*/

#throbber{
  background-color:red;
  background-color: transparent;
  position: fixed;
  top: 105px;
  z-index:0;
}

#throbber .throbber-image{
  background-image: url('../img/throbber.gif');
  background-color:transparent;
  background-repeat: no-repeat;
  background-size:contain;
  width:20px;
  height:20px;
  opacity:.75;
}

#image-block-wrapper{
  display:inline-block;
  width:66%;
  float:right;
  height:100%;
  background-color:white;
  margin-top:41px;
}
#image-block-header{
  float:right;
  text-align:right;
  margin:10px 60px 0px 0;
  vertical-align: middle
}
#image-block{
  margin: -4px -20px 0 30px;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#image-block-wrapper.open #image-block{
  margin-bottom:100px;
}

#image-block-header .layout-option{
  display: inline-block;
  height: 35px;
  width: 35px;
  background-color: #bbb;
  margin:2px 5px;
  opacity:.25;
}
#image-block-header .layout-option:hover{
  opacity:1;
}
#image-block-header .layout-option.selected{
  opacity:1;
}
#image-block-header .layout-option.full{
  background-image: url('../img/grid-full.png');
}
#image-block-header .layout-option.horizontal{
  background-image: url('../img/grid-horizontal.png');
}
#image-block-header .layout-option.vertical{
  background-image: url('../img/grid-vertical.png');
}
#image-block-header .layout-option.square{
  background-image: url('../img/grid-square.png');
}

#image-block-grid{
  opacity:0;
  margin: 4px 0 0 4px;
}

.image{
  display:inline-block;
  cursor:pointer;
  margin-bottom:4px;
  /* max-width:800px; */
}

.image.hover{
  outline:4px solid rgb(135, 97, 220);
}
.image.selected{
  outline:4px solid rgb(135, 97, 220);
  z-index:99;
}




/*Footer*/
#footer{
  letter-spacing:1px;
  position: fixed;
  bottom: 10px;
  overflow: hidden;
  z-index: 1;
  padding-top: 20px;
}
#text-block-wrapper.open #footer{
  /* background-color: #444; */
}

#pager-wrapper{
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 1.1em;
  margin-left: 80px;
  height: 19px;
  color:white;
}
#pager-wrapper .pager-prev,
#pager-wrapper .pager-next{
  display:inline-block;
  height:20px;
  width:54px;
  background-size:contain;
  background-repeat: no-repeat;
}
#text-block-wrapper.open #pager-wrapper .pager-prev{
  background-image: url('../img/left-arrow.png');
}
#pager-wrapper .pager-prev{
  background-image: url('../img/left-arrow-dark.png');
}
#text-block-wrapper.open #pager-wrapper .pager-next{
  background-image: url('../img/right-arrow.png');
}
#pager-wrapper .pager-next{
  background-image: url('../img/right-arrow-dark.png');
}

#pager-wrapper .pager-page{
  display:inline-block;
  margin:0 14px;
  vertical-align: bottom;
}
#pager-wrapper .pager-page{
  color:#444;
}
#text-block-wrapper.open #pager-wrapper .pager-page{
  color:white;
}

.pager-prev.on:hover,
.pager-next.on:hover,
.pager-prev.off,
.pager-next.off{
  opacity:.25
}


#footer-spacer-white{
  background-color:white;
  height: 12px;
  width: 389px;
  margin-left: -60px;
}
#footer-spacer-dark{
  background-color: #444;
  height: 12px;
  width: 270px;
  margin-top: -12px;
  margin-left: 60px;
  display:block;
}
#text-block-wrapper.open #footer-spacer-dark{
  display:none;
}
#footer-text{
  font-family: 'Lora', serif;
  font-size:0.85em;
  margin-top:5px;
  margin-left:170px;
  overflow: hidden;
  height:20px;
  width:auto;
}
#text-block-wrapper.open #footer-text{
  color:#444;
}

.footer-text{
  color:#888;
  display:inline-block;
}
.footer-text a{
  color:#bbb;
  font-weight: bold;
}
#footer-text a:hover{
  color:#888;
}


/*Years List*/
.decade-wrapper{
  margin-bottom:15px;
}
.decade-wrapper .decade{
  width:100px;
  margin-right:7px;
  display:inline-block;
  vertical-align:top;
  padding: 2px;
}
.decade-wrapper .decade-value{
  display:inline-block;
  font-size:.9em;
}
.decade-wrapper .decade:hover,
.decade-wrapper .decade.selected{
  background-color:white;
}
.decade-wrapper .decade.inactive{
  color:#888;
  font-style:italic;
}
.decade-wrapper .decade.inactive:hover{
  background-color:transparent;
}
.decade-wrapper a .decade{
  color:white;
}
.decade-wrapper a .decade:hover,
.decade-wrapper a .decade.selected{
  color:#444;
}
.decade-wrapper .decade-count{
  color:#888;
  display:inline-block;
  font-size:.7em;
  margin-left:3px;
  font-style:italic;
}
.decade-wrapper .years{
  vertical-align:top;
  width: 350px;
  border-top:1px solid #888;
}
.decade-wrapper .year{
  width: 60px;
  display: inline-block;
  padding: 2px;
}
.decade-wrapper .year-value{
  display:inline-block;
  font-size:.9em;
}
.decade-wrapper a .year.active:hover,
.decade-wrapper a .year.active.selected{
  background-color:white;
  color:#444;
}
.decade-wrapper a .year.active{
  color:white;
}
.decade-wrapper .year.inactive{
  color:#888;
  font-style:italic;
}
.decade-wrapper .year-count{
  color:#888;
  font-size:.7em;
  display:inline-block;
  margin-left:3px;
  font-style:italic;
}

/* Publications List */
#list-wrapper .publication{
  color:white;
  padding:5px;
  margin-right:-22px;
}
#list-wrapper .publication:hover{
  color:#444;
  background-color:white;
}
#list-wrapper .publication.inactive,
#list-wrapper .publication.inactive:hover{
  color:#888;
  font-style:italic;
  background-color:transparent;
}
#list-wrapper .publication-value,
#list-wrapper .publication-count{
  display:inline-block;
}
#list-wrapper .publication-count{
  color:#888;
  display:inline-block;
  font-size:.7em;
  margin-left:5px;
  font-style:italic;
}

/* Designers List */
#list-wrapper .designer{
  color:white;
  padding:5px;
  margin-right:-22px;
}
#list-wrapper .designer:hover{
  color:#444;
  background-color:white;
}
#list-wrapper .designer.inactive,
#list-wrapper .designer.inactive:hover{
  color:#888;
  font-style:italic;
  background-color:transparent;
}
#list-wrapper .designer-value,
#list-wrapper .designer-count{
  display:inline-block;
}
#list-wrapper .designer-count{
  color:#888;
  display:inline-block;
  font-size:.7em;
  margin-left:5px;
  font-style:italic;
}

/* Types List */
#list-wrapper .type{
  color:white;
  padding:5px;
  margin-right:-22px;
}
#list-wrapper .type:hover{
  color:#444;
  background-color:white;
}
#list-wrapper .type.inactive,
#list-wrapper .type.inactive:hover{
  color:#888;
  font-style:italic;
  background-color:transparent;
}
#list-wrapper .type-value,
#list-wrapper .type-count{
  display:inline-block;
}
#list-wrapper .type-count{
  color:#888;
  display:inline-block;
  font-size:.7em;
  margin-left:5px;
  font-style:italic;
}

/* Search Results List */
.results-field-wrapper{
  margin-bottom:20px;
  margin-right: -22px;
}

.results-field-wrapper .result-field{
  text-transform:uppercase;
  font-size:.85em;
  color:#888;
  margin-bottom:5px;
}

.results-field-wrapper .result{
  padding: 5px;
  color:white;
}
.results-field-wrapper .result:hover{
  color:#444;
  background-color:white;
}
.results-field-wrapper .count{
  color: #888;
  display: inline-block;
  font-size: .7em;
  margin-left: 5px;
  font-style: italic;
}


/*Single Image Page*/

#text-block-wrapper.single-image.open{
  width:570px;
}

#single-image-text{
  padding-left: 60px;
}
#single-image-text .text-sub {
  margin-top:15px;
}

#single-image-text .text-label{
  display:inline-block;
  line-height: 1.3em;
  vertical-align: top;
  padding: 2px 0 1px 0;
}
#single-image-text .text-main .text-label{
  font-size:1.1em;
  letter-spacing:2px;
  font-weight:bold;
  width:150px;
}
#single-image-text .text-sub .text-label{
  width:150px;
  letter-spacing:1px;
  font-size:.9em;
  /* text-align:right; */
  margin:5px 0 0 0;
  padding:0 0 0 0;
}

#single-image-text .text-value{
  display:inline-block;
  line-height: 1.3em;
  vertical-align: top;
  padding: 2px 20px 1px 13px;
  width:323px;
  color: #bbb;
}
#single-image-text .text-main .text-value{
  font-size:1em;
}
#single-image-text .text-sub .text-value{
  font-size:.8em;
  margin:3px 0 0 0;
}

#single-image-text .type-values{
  display:inline-block;
  width:323px;
  padding: 2px 20px 1px 13px;
}
#single-image-text .type-value{
  width:auto;
  padding:0;
  font-size:1em;
  color: #bbb;
  display:inline-block;
  line-height: 1.3em;
  vertical-align: top;
}

#image-block-wrapper.single-image{
}
#image-block-wrapper.single-image .image{
  cursor:auto;
}
#single-image-wrapper{
  margin: 0 0 60px 30px;
  overflow-y: scroll;
}


#single-image-title-wrapper{
  display:none;
  width:90%;
  overflow:hidden;
}
#image-block-wrapper.single-image.open #single-image-title-wrapper{
  display: inline-block;
  vertical-align: top;
  padding-top: 20px;
}
#image-block-wrapper.single-image #single-image-title-wrapper a{
  font-weight:bold;
  font-size: 1.3em;
}
#single-image-title{
  width:9999px;
}


#single-image-text a .text-value:hover{
  background-color:white;
  color:#888;
  cursor:pointer;
}

#socials{
  padding:0 60px;
}
#socials .social{
  display:inline-block;
}
#socials .social span{
  vertical-align:top;
}
#socials .social img{
  width:32px;
  cursor:pointer;
}

#related-images{
  position:fixed;
  bottom:60px;
  width: 60px;
  overflow: hidden;
}

#text-block-wrapper.open #related-images{
  width:100%;
}

#related-images .related-images-label{
  padding:2px 0 2px 60px;
  margin-bottom:20px;
  background-color:white;
  color:#888;
  width:310px;
}


#related-images .related-images-images{
  height: 160px;
}

.related-image{
  display:none;
}

#text-block-wrapper.open .related-image{
  display:inline-block;
  margin-left:20px;
}


/* About */
#about-text-wrapper{
  height:100%;
  background-color:white;
  margin-top:41px;
  overflow:scroll;
  font-family: 'Lora', serif;
  font-size:0.9em;
}
#about-text{
  padding:10px 60px;
  width:50%;
}
#about-icons{
  display:none;
}
#about-image{
  margin-bottom:60px;
}
#about-image img{
  width:100%;
}


/* Mobile */
@media only screen and (max-width: 1200px) {
  #slogan {
    display:none;
  }
  #about-slogan{
    display:block;
    padding:20px 60px 0;
    font-family: 'Lora', serif;
    font-size:0.9em;
  }
  #about-text{
    padding:10px 60px 60px;
    font-family: 'Lora', serif;
    font-size:0.9em;
  }
}
@media only screen and (max-width: 750px) {
  #image-block-header, #right-wrapper {
    display:none;
  }
  #logo{
    width:179px;
  }

  #mobile-menu{
    display:inline-block;
  }
  .page-about #mobile-menu{
    display:none;
  }

  #text-block-wrapper{
    width:40px;
    min-width:40px;
  }
  #text-block{
    padding-left:40px;
  }
  #filter-sort .values-wrapper{
    width: 128px;
  }
  #filter-sort .filter-value, #filter-sort .sort-value{
    margin-left:10px;
  }

  #about-icons{
    display:block;
    height: 33px;
    padding-right:10px
  }
  #about-icons .feeds{
    padding: 0px 30px;
  }
  #about-icons .feed{
    height: 33px;
    width: 36px;
    display:inline-block;
    background-size:contain;
  }
  #about-icons .feed.instagram{
    background-image: url('../img/instagram-dark.png');
  }
  #about-icons .feed.pinterest{
    background-image: url('../img/pinterest-dark.png');
  }
  #about-icons .feed.tumblr{
    background-image: url('../img/tumblr-dark.png');
  }
  #about-icons .feed.twitter{
    background-image: url('../img/twitter-dark.png');
  }
  #about-icons .feed.rss{
    background-image: url('../img/rss-dark.png');
  }

  #logo{
    background-position: 40px;
  }
  #about-text{
    width:80%;
    padding:10px 30px 60px;
    font-family: 'Lora', serif;
    font-size:0.9em;
  }

  #about-slogan{
    display:block;
    padding:20px 35px 20px;
    font-family: 'Lora', serif;
    font-size:0.9em;
  }

  #single-image-text{
    padding-left:40px;
    overflow:hidden;
  }
  #text-block-wrapper.open #single-image-text{
    overflow:scroll;
  }
  #single-image-text .type-values,
  #single-image-text .text-value{
    padding: 2px 0 0 0;
  }
  #single-image-text .text-main .text-label,
  #single-image-text .text-sub .text-label{
    width:140px;
  }
  #image-block-wrapper.single-image.open #single-image-title-wrapper{
    display:none;
  }

  #pager-wrapper{
    margin-left: 60px;
  }
  #footer-spacer-dark{
    margin-left: 40px;
  }
  #footer-text{
    margin-left: 120px;
  }
}


@media print {
  #text-block-wrapper,#right-wrapper,#mobile-menu,#block-adjuster,#image-block-header{
    display:none !important;
  }
  #image-block-wrapper,#image-block, #image-wrapper img, #image-block-grid{
    width:100% !important;
  }
  #image-wrapper{
    overflow:hidden;
  }
  #image-title-wrapper{
    display:inline-block;
    padding:20px;
  }
}