/******************************************************************************
* Title: styling.css
* Author: Hunter Schoonver ~ Web Designer ~ hunter@skoonie.com
* 
* Purpose:
* 
* This cascading stylesheet provides styling for the index/home page, which is
* why it is in the root folder.
*
* Example usage:
* 		<link rel="stylesheet" href="styling.css">
*
*/

#container {
    width: 100%;
    height: 100%;
	text-align: center; 
}

#fileName {
    width: 100%;
    display: inline-block;
    text-align: center;
}

#slideshow {
    width: 100%;
    max-width: 600px;
    display: inline-block;
}

#slideshow-buttons {
    display: inline-block;
    padding: 20px 0;
}

#slideshow-buttons a {
    color: #5656ff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#slideshow-buttons a:link { 
	color: #5656ff; 
	text-decoration: none;
}
#slideshow-buttons a:hover {
    text-decoration: underline;
}

#slideshow-buttons #startAutoBtn {
    display: inline-block;
    visibility: visible;
}

#slideshow-buttons #stopAutoBtn {
    display: none;
    visibility: hidden;
}

#slideshow-images {
    width: 100%;
    display: table;
    padding: 20px 0;
}

#slideshow-images .slideshowImage {
    width: 100%;
    height: 100%;
    display: table-cell;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

#slideshow-images .slideshowImage img {
    max-width: 100%;
}

#statusMessage {
    width: 100%;
    display: inline-block;
    text-align: right;
}