/* 
    Document   : default
    Created on : Jan 10, 2015, 3:43:46 PM
    Author     : Jeff
    Description:
        Purpose of the stylesheet follows.
*/

div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    padding: 0px;
    
    font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
    
    /* fix fuzzy images for img and background-image */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: crisp-edges;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}

body.full-height {
    display: flex;
    flex-direction: column;
}

body.full-height .content {
    flex-grow: 100;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

a {
    color: #cc0000;
    font-weight: bold;
    text-decoration: none;
    
    transition: color 300ms;
}

a:hover {
    color: #666666;
}

input[type="submit"],
select,
button {
    font: inherit;

    padding: 0.25em 0.5em;
    margin: 0.25em 0.25em;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    
    background: lightgray;
    color: black;
    outline: 0;
    border: 1px solid gray;
    border-radius: 0.125em;
    
    transition: background-color 300ms,
        color 300ms,
        border-color 300ms;
}

input[type="submit"]:not([disabled]):hover,
select:hover,
button:hover {
    background: darkgray;
    color: white;
    outline: 0;
    border: 1px solid gray;
    cursor: pointer;
}

input[type="submit"][disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

select,
select:hover {
    background-image: url("/images/icons/font-awesome_4-6-3_caret-down_32_0_000000_none.png");
    background-size: 1em;
    background-position: right 0.5em center;
    background-repeat: no-repeat;
    padding-right: 2em;
}

select option {
    color: white;
}

.somethingelse {
    background: #cc0000;
    color: white;
    outline: none;
    border: none;
    
    text-transform: uppercase;
    font-weight: bold;
    
    transition: background-color 0.3s, color 0.3s;
}

.somethingelse:hover,
.somethingelse:focus {
    cursor: pointer;
    background: #cc0000;
    color: white;
}

ul.page-list {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

ul.page-list li {
    display: inline-block;
    padding: 0.125em 0.25em;
}

#footer {
    margin: 2.5em 0 0;
    padding: 3em 2em;
    background: black;
    color: gray;
}

#footer #footer-credits {
    font-size: 0.8em;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#footer #footer-credits a {
    color: gray;
}

#footer #footer-credits a:hover {
    color: #cc0000;
}

div.faux-header {
    display: none;
}

div.header {
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
}

div#wrap.downloadinputs {
    transition: background-color 100ms;
}

div#wrap.downloadinputs.sticky {
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    margin: 0;
    padding: 0.25em calc(5% + 0.25em);
    width: 100%;
    text-align: center;
    
    box-shadow: 0px 0px 16px 4px rgba(0,0,0,0.2);
    transition: box-shadow 500ms;
}

div.header div.title, div.header div.downloadinputs {
    float: left;
    
    text-align: center;
    margin: 0.25em;
}

div.header div.pages, div.header div.photocount {
    float: right;
    
    text-align: center;
    margin: 0.25em;
}

div.header div.photocount {
    margin-top: 0.8125em;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.content {
    margin: 0 auto;
    max-width: calc(100% - 1em);
    width: 1000px;
}

.photoboxes {
    text-align: center;
}

div.photobox {
    margin: 1px;
    padding: 5px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

div.photo-selected {
    background: #F4FA58;
}

div.photobox span.caption {
    max-width: 150px;
    display: block;
    padding: 0.375em 0.125em 0.25em;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.header h2 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin: 0;
}

.largesquare {
    width: 150px;
    height: 150px;
}

.header {
    background: white;
    
    top:0px;
    width: 100%;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

#sb-title-inner a {
    color: lightskyblue;
}

#sb-title-inner {
    font-size: 14px;
}

#sb-title-inner-download {
    font-size: 70%;
}

#sb-title, #sb-title-inner {
    height:26px;
    line-height:13px;
}

table.borders {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 80%;
    border-collapse: collapse;
    border: 3px solid #cc0000;
    
    margin: 1em auto;
}

table.borders th, table.borders td {
    border: 1px solid #cc0000;
    padding: 0.25em 0.75em;
}

table.borders th {
    background: #cc0000;
    color: #fff;
}

table.borders tr:nth-child(odd) { 
    background-color: #e6e6e6;
}

table.borders tr form {
    display: inline;
    margin: 0;
    padding: 0;
}

table.borders tr td.album .album-label {
    height: 5em;
    
    display: flex;
    align-items: center;
    justify-content: flex-start;
	
	transition: all 300ms;
}

table.borders tr td.album a.album-label:hover img {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

table.borders tr td.album .album-label img {
    max-width: 5em;
    max-height: 100%;
    margin-right: 0.75em;
	
	transition: inherit;
}

.column-url {
    display: none;
}

.validation-error {
    width: 24em;
    max-width: calc(100% - 2em);
    margin: 2em auto 0.5em;
    
    text-align: center;
}

.validation-error:before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(https://farm6.staticflickr.com/5454/9675419119_a809220d69_k_d.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.validation-error-title {
    font-size: 1.25em;
    
    display: inline;
}

.validation-error-title:after {
    content: ", ";
}

.validation-error-message {
    line-height: 1.2;
    font-size: 1.25em;
    margin-bottom: 1em;
    
    display: inline;
    
}

.validation-error-link {
    text-align: center;
    text-transform: uppercase;
    margin: 1em 0 0.5em;
}

.validation-error-link a {
    color: #cc0000;
    font-weight: bold;
    text-decoration: none;

    transition: color 300ms;
}

.validation-error-link a:hover {
    color: #707070;
}

#info-blob {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    

    /*background-color: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) );*/
}

#info-blob .info-blob-content {
    padding: 2em 1.5em;
    width: 24em;
    max-width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    background-color: rgba(255, 255, 255, .6);
}

#info-blob .info-blob-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em 0;
    line-height: 1.2;
    text-align: center;
}

#info-blob .info-blob-content ul li {
    display: block;
    margin-bottom: 0.5em;
}

#info-blob .info-blob-content ul li:last-of-type {
    margin-bottom: 0;
}

#sb-nav a {
    margin-left: 16px;
}

.keyboard-keys .keyboard-key .title {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
}

.keyboard-keys .keyboard-key .description {
    font-size: 0.75em;
    text-transform: lowercase;
}

button#slideshow-start {
    padding: 0.5em 1em;
    margin-bottom: 1em;
    
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-align-items: center;
    align-items: center;
    
    -webkit-align-content: center; 
    align-content: center; 
    
    justify-content: center;
}

button#slideshow-start .icon {
    display: block;
    font-size: 2em;
    margin: 0.25em;
}

button#slideshow-start .label {
    display: block;
    margin: 0.5em;
}

input[name="photo-duration-seconds"] {
    font: inherit;
    padding: 0.5em 0 0.5em;
    text-align: right;
    width: 4em;
}