/* ********************************************************
SLIDVID CSS
***********************************************************/

/* It isn't designed to be customizable by clients.  */

/* *********************************************************************************
HIGH LEVEL SLIDVID STUFF
********************************************************************************* */

/* body {
   look at body style in index.html 
} */

html, body {
    width:100vw; 
    height:100vh;
    margin:0px; 
    padding:0px;
    border:none;
    overflow-y: hidden; /* This prevents page reload in Android on swipe down.  */
    position: fixed;  /* This prevents scrolling the body on touchmove in ipad */
}

.sv_Container {
    /* div that contains Slidvid */
    position:relative;
    width:100vw;
    height:100vh;
    margin:0;
    border:none;
}

.sv_Canvas {
    /* The Slidvid canvas */
    position:relative;
    background-color: transparent;
    width:100%;
    height:100%;
    margin:0;
    border:none;
}

.sv_NoSelect {
    /* Makes an element unselectable */
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}

/* ------------------------------------------------------ */

.sv_Invisible {
    /* Used to make ZIndex layers invisible */
    visibility:hidden;
    opacity:0;
    transition:visibility 1s linear, opacity 1s linear;
}

.sv_Visible {
    /* Used to make ZIndex layers visible */
    visibility:visible;
    opacity:1;
    transition:visibility 1s linear, opacity 1s linear;
}

/* ------------------------------------------------------ */

.sv_initialLoadingText {
    /* Attached to initial text that says slideshow will start
    after first image is loaded. */
    position: absolute;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: normal;
    text-align: center;
    text-shadow: 1px 1px black;
    padding:15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width:250px;
    width:50%;
    max-width:300px;
    color:white;
    border: 1px double white;
    border-radius:20px;
    background-color:rgba(0,0,0,0.98);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3c3c3c+0,000000+50,282828+100&0.7+0,0.7+100 */
    background: -moz-linear-gradient(-45deg,  rgba(60,60,60,0.7) 0%, rgba(0,0,0,0.7) 50%, rgba(40,40,40,0.7) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(60,60,60,0.7) 0%,rgba(0,0,0,0.7) 50%,rgba(40,40,40,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(60,60,60,0.7) 0%,rgba(0,0,0,0.7) 50%,rgba(40,40,40,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b33c3c3c', endColorstr='#b3282828',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* *********************************************************************************
CONTROLS
********************************************************************************* */

.sv_Controls {
    /* Container of the row of buttons at the bottom of
    Slidvid, ie, the Back, Play, Forward, etc buttons
    (7 of them) */
    position:fixed;
    display:grid;
    grid-template-columns: auto auto auto auto auto auto;
    text-align: center;
    width:100%;
    height:60px;
    bottom:0px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#282828+0,5a5a5a+50,282828+100 */
    background: #282828; /* Old browsers */
    background: -moz-linear-gradient(top,  #282828 0%, #5a5a5a 50%, #282828 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #282828 0%,#5a5a5a 50%,#282828 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #282828 0%,#5a5a5a 50%,#282828 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}

/* ------------------------------------------------------ */

.sv_Button {
    /* All the Slidvid buttons have this style */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    height:60px;
    border-right: 1px solid black;
    padding: 0;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    margin-bottom:0px;
    line-height: 60px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    background-color:transparent;
}

/* ------------------------------------------------------ */

.sv_Back {
    /* The Back button */
    background-image: url(images/sv_BackUp.png);
    opacity:0.5;
    transition: opacity 1s, background-color 1s;
}

.sv_Back:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_Back:active {
    background-image: url(images/sv_BackDown.png);
}

.sv_Back:visited {
    background-image: url(images/sv_BackUp.png);
}

/* ------------------------------------------------------ */

.sv_Paused {
    /* The Paused button */
    background-image: url(images/sv_PausedUp.png);
    opacity:0.5;
    transition: opacity 1s, background-color 1s;
}

.sv_Paused:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_Paused:active {
    background-image: url(images/sv_PausedDown.png);
}

.sv_Paused:visited {
    background-image: url(images/sv_PausedUp.png);
}

/* ------------------------------------------------------ */

.sv_Playing {
    /* The Playing button */
    background-image: url(images/sv_PlayingUp.png);
    opacity:0.5;
    transition: opacity 1s, background-color 1s;
}

.sv_Playing:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_Playing:active {
    background-image: url(images/sv_PlayingDown.png);
}

.sv_Playing:visited {
    background-image: url(images/sv_PlayingUp.png);
}

/* ------------------------------------------------------ */

.sv_Forward {
    /* The Forward button */
    background-image: url(images/sv_ForwardUp.png);
    opacity:0.5;
    transition: opacity 1s, background-color 1s;
}

.sv_Forward:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_Forward:active {
    background-image: url(images/sv_ForwardDown.png);
}

.sv_Forward:visited {
    background-image: url(images/sv_ForwardUp.png);
}

/* ------------------------------------------------------ */

.sv_Fullscreen {
    /* The Fullscreen button */
    background-image: url(images/sv_FullscreenUp.png);
    opacity:0.5;
    transition: opacity 1s, background-color 1s;
}

.sv_Fullscreen:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_Fullscreen:active {
    background-image: url(images/sv_FullscreenDown.png);
}

.sv_Fullscreen:visited {
    background-image: url(images/sv_FullscreenUp.png);
}

/* ------------------------------------------------------ */

.sv_Options_button {
    /* The Options button */
    background-image: url(images/sv_OptionsUp.png);
    opacity:0.5;
    transition: opacity 1s, background-color 1s;
}

.sv_Options_button:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_Options_button:active {
    background-image: url(images/sv_OptionsDown.png);
}

.sv_Options_button:visited {
    background-image: url(images/sv_OptionsUp.png);
}

/* ------------------------------------------------------ */

.sv_About {
    /* The ? button */
    background-image: url(images/sv_BurgerUp.png);
    opacity:0.5;
    transition: opacity 1s, background-color 1s;
}

.sv_About:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_About:active {
    background-image: url(images/sv_BurgerDown.png);
}

.sv_About:visited {
    background-image: url(images/sv_BurgerUp.png);
}

/* ------------------------------------------------------ */

.sv_PicNum {
    /* The pic num button */
    background-image: url(images/sv_PicNumUp.png);
    opacity:0.6;
    cursor: default;
    border-right:none;
}

/* *********************************************************************************
OPTIONS WINDOW
********************************************************************************* */

.sv_Options {
    /* Options window container  */
    position:absolute;
    display:block;
    box-sizing: border-box;
    top:30px;
    left:30px; 
	width:100%;
    max-width:350px;
    padding:0px;
    margin:0px;
	border: 1px solid #c0c0c0;
    background-color:#202020;
}

.sv_Options_handle {
	/* The Options window's title bar */
    width:calc(100%-10px);
    height:40px; 
	padding:5px;
	padding-left:10px;
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
    font-size:15px;
    line-height: 40px;
	cursor:move;
}

.sv_Options_handle {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5d5d5e+0,020202+100 */
    background: rgb(93,93,94); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(93,93,94,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(93,93,94,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(93,93,94,1) 0%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5e', endColorstr='#020202',GradientType=0 ); /* IE6-9 */
}

.sv_Options_close {
	/* The Options window close button */
	position: absolute;
	top: 10px;
	right: 10px;
	cursor:pointer;
    width:60px; 
    height:30px; 
    background-image: url(images/x2.gif);
}

.sv_Options_subContainer1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px #000000;
	color: #FFF;
    text-decoration: none;
    padding:10px; 
    padding-top:0px;
    /* width:100%; */
    opacity:0.8;
}

.sv_Options_subContainer2 {
    /* The controls in the Options window are in a 
    grid that has two columns.  */
    display:inline-grid;
    grid-template-columns: 110px 200px;
	background-color:#333;
    /* width:calc(100%-10px); */
    width:100%;
	border: 1px solid #FFF;
	padding-top:20px;
}

.sv_Options_line {
    /* Applied to divs in the Options window that hold controls.  */
    padding-bottom:20px;
    padding-left:10px;
    /* margin: auto; */
    height:30px;
    line-height:30px;
}

.sv_Options_buttonLastLine {
    /* Applied to the last line in the Options window  */
    margin-bottom:10px;
}

.sv_Options_StretchMode {
    /* The Options window dropdown menu  */
    width:100px;
    height:30px;
    font-size:18px;
    color:white;
    background-color: rgb(56, 56, 56);
    text-shadow: 1px 1px black;
    cursor: pointer;
}

.sv_Options_StretchMode option {
    /* For the options in the dropdown menu  */
    background-color:rgba(93,93,94,1);
    cursor: pointer;
}

.sv_Diagonal_Gradient {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5d5d5e+0,020202+100 */
    background: rgb(93,93,94); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(93,93,94,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(93,93,94,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(93,93,94,1) 0%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5e', endColorstr='#020202',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.svVerticalGradient {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#444444+0,111111+100 */
    background: rgb(68,68,68); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(68,68,68,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(17,17,17,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(68,68,68,1) 0%,rgba(17,17,17,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
}

.sv_Options_Input_Box {
    /* For the editable text boxes  */
    width:100px;
    height:30px;
    font-size:20px;
    color:white;
    text-align: center;
}

/* Slider  ---------------------------------------------------------*/

.sv_SliderContainer {
    /* The slider is in the Options window. It's for zooming.  */
    width: 100%;
}
  
.sv_Slider {
    -webkit-appearance: none;
    width: 100%;
    max-width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    cursor: pointer;
}

.sv_Slider:hover {
    opacity: 1;
}

.sv_Slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 40px;
    border-radius: 20%;
    background: gray;
    cursor:grab;
}

.sv_Slider::-webkit-slider-thumb:hover {
    background:maroon;
}

.sv_Slider::-webkit-slider-thumb:active {
    background:red;
    cursor:grabbing;
}

.sv_Slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: gray;
    cursor: grab;
}

.sv_Slider::-moz-range-thumb:hover {
    background:maroon;
}

.sv_Slider::-moz-range-thumb:active {
    background:red;
    cursor:grabbing;
}

.sv_SliderLabel {
    text-align: center;
}

/* *********************************************************************************
ABOUT WINDOW
********************************************************************************* */

.sv_AboutContainer {
    /* Comes up when you click the question mark button  */
    position: absolute;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px black;
    padding:15px;
    padding-top:10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width:300px;
    width:70%;
    max-width:500px;
    height:450px;
    color:white;
    border: 1px double white;
    border-radius:20px;
    background-color:rgba(0,0,0,0.98);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3c3c3c+0,000000+50,282828+100&0.7+0,0.7+100 */
    background: -moz-linear-gradient(-45deg,  rgba(60,60,60,0.7) 0%, rgba(0,0,0,0.7) 50%, rgba(40,40,40,0.7) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(60,60,60,0.7) 0%,rgba(0,0,0,0.7) 50%,rgba(40,40,40,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(60,60,60,0.7) 0%,rgba(0,0,0,0.7) 50%,rgba(40,40,40,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b33c3c3c', endColorstr='#b3282828',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.sv_AboutTopMenu {
    /* The container of the About window tab menu. */
    display:table;
    position:relative;
    height:40px;
    margin-top: -30px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom:15px;
    border-radius:20px 20px 0px 0px;
    line-height: 40px;
    border-bottom: 1px solid black;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#282828+0,5a5a5a+50,282828+100 */
    background: #282828; /* Old browsers */
    background: -moz-linear-gradient(top,  #282828 0%, #5a5a5a 50%, #282828 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #282828 0%,#5a5a5a 50%,#282828 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #282828 0%,#5a5a5a 50%,#282828 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}

.sv_AboutTabItem {
    /* Each tab item in the About window tab menu has this style. */
    display:table-cell;
    padding:5px;
    max-width: 60px;
    width:60px;
    text-align: center;
    border-left: 1px solid black;
    opacity:0.7;
    transition: opacity 1s, background-color 1s;
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: center center;
    background-color:transparent;
}

.sv_AboutTabItem:hover {
    opacity:1;
    background-color:#ff00002c;
}

.sv_AboutTabItem:active {
    opacity:1;
    color:orange;
    background-color:#ff00002c;
}

/* -------------------------------------------- */

.sv_AboutTopMenuHelp {
    background-image: url(images/sv_AboutUp.png);
}

.sv_AboutTopMenuHelp:active {
    background-image: url(images/sv_AboutDown.png);
}

.sv_AboutTopMenuHelp:visited {
    background-image: url(images/sv_AboutUp.png);
}

/* -------------------------------------------- */

.sv_AboutTopMenuAbout {
    background-image: url(images/sv_SoftwareUp.png);
}

.sv_AboutTopMenuAbout:active {
    background-image: url(images/sv_SoftwareDown.png);
}

.sv_AboutTopMenuAbout:visited {
    background-image: url(images/sv_SoftwareUp.png);
}

/* -------------------------------------------- */

.sv_AboutTopMenuSlideshow {
    background-image: url(images/sv_InfoUp.png);
}

.sv_AboutTopMenuSlideshow:active {
    background-image: url(images/sv_InfoDown.png);
}

.sv_AboutTopMenuSlideshow:visited {
    background-image: url(images/sv_InfoUp.png);
}

.sv_aboutSlideshow {
    /* This is a class for the div that contains 
    the user text about the slideshow; */
    /* overflow-y: scroll; */
    /* height:100%; */
}

/* -------------------------------------------- */

.sv_AboutTopMenuOptions {
    background-image: url(images/sv_OptionsUp.png);
}

.sv_AboutTopMenuOptions:active {
    background-image: url(images/sv_OptionsDown.png);
}

.sv_AboutTopMenuOptions:visited {
    background-image: url(images/sv_OptionsUp.png);
}

/* -------------------------------------------- */

.sv_AboutCloseButton {
    /* The close button in the About window. */
    border-radius:0px 20px 0px 0px;
    background-image: url(images/x2.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.sv_AboutTopMenuHandle {
    display:table-cell;
    width: 100%;
    border-radius:20px 0px 0px 0px;
    /* background-color: red; */
    cursor: move;
}

/*------------------------------------------------*/

.sv_AboutContent {
    /* position:relative; */
    overflow-y: auto;
    height:330px;
    padding:15px;
}

.sv_boldgold {
    /* Attached to the orange headers in the Help text.  */
    font-weight: bold;
    font-size: 15px;
    text-shadow: 1px 1px black;
    color: orange;
}

.sv_BlackTransparentGradient {
    /* Background of the boldgold title  */
    margin-top:0;
    padding:10px;
    border:solid 1px silver;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2b2b2b+0,000000+100&1+47,0+100 */
    background: -moz-linear-gradient(left,  rgba(43,43,43,1) 0%, rgba(23,23,23,1) 47%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(43,43,43,1) 0%,rgba(23,23,23,1) 47%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(43,43,43,1) 0%,rgba(23,23,23,1) 47%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

.sv_DropCap2 {
    /* Dropcap in About text. Used in City on the Other Side.  */
    float:left;
    margin-right:5px;
}

.sv_DropCap3 {
    float:left;
    margin-right:5px;
    margin-top:-5px;
}

.sv_DropCap4 {
    float:left;
    margin-right:5px;
    margin-top:8px;
    /* margin-bottom:15px; */
}

.flexible_image {
    max-width: 100%;
    height: auto;
    text-align: center;
}

.sv_helpImage {
    /* Used to display the image in the ? tab  */
    background-image: url("images/help1.jpg");
    width:350px;
    height:215px;
}

h3 {
    /* The h3 header in the Help, About Slidvid, and About Slideshow tabs.  */
    color:orange;
    padding:0px;
    margin-top:0px;
    text-shadow: 1px 1px black;
}

.about {
    /* Style for links in the 'About Slideshow', 'Help', and 'About Slidvid' texts. */
    color:#ffffff;
    cursor: pointer;
}

.about:hover {
    color:red;
}

.sv_AboutLogoDiv {
    /* Attached to the div that holds the logo in the About window  */
    position: absolute;
    bottom:5px;
    right:5px;
    cursor: pointer;
}

.sv_LogoLink {
    cursor: pointer;
}

.sv_Logo {
    cursor: pointer;
}

/* *********************************************************************************
NOTES
********************************************************************************* */

.sv_PhotoNote {
    /* Applied to photo notes that display at top right.  */
    position: absolute;
    top:5px;
    right:5px;
    max-width: 100%;
    text-shadow: 1px 1px black;
    text-align: right;
    color:white;
    font-size:0.8em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: rgba(0,0,0,0.7);
    padding:2px;
    padding-left:10px;
    padding-right: 10px;
    border-radius:10px;
}

/* *********************************************************************************
CAROUSEL 
********************************************************************************* */

.sv_CarouselContainer {
    /* The div that contains the carousel.  */
    position: absolute;
    top:0px;
    left:0px;
    width:33%;
    height:calc(100% - 60px);
    /* The -60px is cuz of the bottom grey controls.  */
    opacity:1;
    outline:none;
    transition: opacity 1s;
    border:none;
}

.sv_CarouselBigThumbOverlay {
    /* This is for the thing that's overtop of the big middle thumb.  */
    position: absolute;
    border-radius: 20px;
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    opacity:0.7;
    transition-property: background-color, opacity, border;
    transition-duration: 500ms;
    transition-timing-function: linear;
    box-sizing: border-box;
}

.sv_CarouselBigThumbOverlay:hover {
    /* When the user hovers over the big thumb overlay, it displays a red border.  */
    border: 5px solid #800000;
    cursor: pointer;
}

.sv_CarouselBigThumbOverlay:active {
    background-color: rgba(92, 0, 0, 0.5);
}

.sv_CarouselThumb {
    /* Attached to each carousel thumb.  */
    position:absolute;
    border:1px solid black;
    padding:0;
    margin:0;
    border-radius: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:12px;
    font-weight: bold;
    text-align:center;
    color:white;
    text-shadow: 1px 1px 1px black;
    box-sizing: border-box;
    transition-property: top width height;
    transition-duration: 500ms;
    transition-timing-function: linear;
    background-image: url(images/loading.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    cursor:pointer; 
}

.sv_CarouselThumb:hover {
    border:2px solid maroon;
}

.sv_CarouselThumbNumberSpan {
    /* To each thumb there's an invisible span attached that holds its number. */
    display:none;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left:100%;
    text-shadow: 1px 1px black;
    text-align: right;
    color:white;
    font-size:0.8em;
    line-height: 1;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: rgba(0,0,0,0.5);
    padding:3px;
    border-radius:3px;
}

.sv_CarouselOverlayNumber {
    /* Number to the right of the biggest thumb.  */
    position: absolute;
    /*display: none;   temporary */
    left:100%;
    margin: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-shadow: 1px 1px black;
    color:white;
    font-size:1.2em;
    line-height: 100%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: rgb(0,0,0);
    padding-top:3px;
    padding-bottom:3px;
    padding-left:5px;
    padding-right:5px;
    border-radius:5px;
    border: 1px solid white;
}