/*
Skin Name: Flip Skin
Skin URI: http://www.slidedeck.com/
Description: The skin used at slidedeck.com
Version: 1.5
Author: digital-telepathy
Author URI: http://www.dtelepathy.com/
Tags: flexible, white, black, multi-color
*/

/*
 * The frame surrounding the SlideDeck.
 * 
 * Customize the width, height, padding and background to customize the area 
 * surrounding your SlideDeck.
 */
.skin-flip {
    position: relative;
    padding: 16px 43px;
    overflow: hidden;
    background: url('noise.png');
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 20px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 20px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.3);
}
.skin-flip.chrome { background-image: url('noise-chrome.png'); }
.skin-flip .skin-flip-wrapper {
    position: relative;
    z-index: 10;
    float: left;
    width: 100%;
    background: url('deck-bg.png') left center repeat-x #000;
    padding: 8px 15px;
    margin: -8px -15px;
}
.skin-flip .sd-flip-nav {
    position: absolute;
    z-index: 9999;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 43px;
    text-indent: -1000em;
    overflow: hidden;
    background-repeat: no-repeat;
}
.skin-flip .sd-flip-nav.prev {
    left: 0;
    background-image: url('nav-prev.png');
    background-position: 10px 49.5%;
}
.skin-flip.chrome .sd-flip-nav.prev { background-image: url('nav-prev-chrome.png'); }
.skin-flip .sd-flip-nav.next {
    right: 0;
    background-image: url('nav-next.png');
    background-position: 22px 49.5%;
}
.skin-flip.chrome .sd-flip-nav.next { background-image: url('nav-next-chrome.png'); }
.skin-flip .slidedeck-slide-mask.mask-out {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,1) 100%);
}
.skin-flip .slidedeck-slide-mask.mask-in {
    background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.25)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 100%);
    background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 100%);
}

.skin-flip .sd-flip-overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.skin-flip.glass .sd-flip-overlay {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjRmOWZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjZjRmOWZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjRmOWZmIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmNGY5ZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGY5ZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(65deg, rgba(244,249,255,0) 0%, rgba(244,249,255,0) 49%, rgba(244,249,255,0.1) 50%, rgba(244,249,255,0.1) 51%, rgba(244,249,255,0.1) 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(244,249,255,0)), color-stop(49%,rgba(244,249,255,0)), color-stop(50%,rgba(244,249,255,0.1)), color-stop(51%,rgba(244,249,255,0.1)), color-stop(100%,rgba(244,249,255,0.1)));
    background: -webkit-linear-gradient(65deg, rgba(244,249,255,0) 0%,rgba(244,249,255,0) 49%,rgba(244,249,255,0.1) 50%,rgba(244,249,255,0.1) 51%,rgba(244,249,255,0.1) 100%);
    background: -o-linear-gradient(65deg, rgba(244,249,255,0) 0%,rgba(244,249,255,0) 49%,rgba(244,249,255,0.1) 50%,rgba(244,249,255,0.1) 51%,rgba(244,249,255,0.1) 100%);
    background: -ms-linear-gradient(65deg, rgba(244,249,255,0) 0%,rgba(244,249,255,0) 49%,rgba(244,249,255,0.1) 50%,rgba(244,249,255,0.1) 51%,rgba(244,249,255,0.1) 100%);
    background: linear-gradient(65deg, rgba(244,249,255,0) 0%,rgba(244,249,255,0) 49%,rgba(244,249,255,0.1) 50%,rgba(244,249,255,0.1) 51%,rgba(244,249,255,0.1) 100%);
    -webkit-box-shadow: inset 0 0 20px rgba(255,255,255,0.15), inset 0 1px 1px rgba(225,225,255,0.75), inset 0 -2px 5px rgba(225,225,255,0.5);
    -moz-box-shadow: inset 0 0 20px rgba(255,255,255,0.15), inset 0 1px 1px rgba(225,225,255,0.75), inset 0 -2px 5px rgba(225,225,255,0.5);
    -o-box-shadow: inset 0 0 20px rgba(255,255,255,0.15), inset 0 1px 1px rgba(225,225,255,0.75), inset 0 -2px 5px rgba(225,225,255,0.5);
    box-shadow: inset 0 0 20px rgba(255,255,255,0.15), inset 0 1px 1px rgba(225,225,255,0.75), inset 0 -2px 5px rgba(225,225,255,0.5);
}
.skin-flip.wood .sd-flip-overlay {
    width: auto;
    height: auto;
    border: solid #4e280e 34px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    -webkit-border-image: url('frame.jpg') 10 34 10 34 stretch stretch;
    -moz-border-image: url('frame.jpg') 10 34 10 34 stretch stretch;
    -o-border-image: url('frame.jpg') 10 34 10 34 stretch stretch;
    border-image: url('frame.jpg') 10 34 10 34 stretch stretch;
}

.skin-flip .sd-frame {
    position: absolute;
    display: block;
}
.skin-flip .sd-frame.sd-frame-nw {
    width: 34px;
    height: 10px;
    left: -34px;
    top: -10px;
}
.skin-flip .sd-frame.sd-frame-n {
    width: 100%;
    height: 10px;
    left: 0;
    right: 0;
    top: -10px;
}
.skin-flip .sd-frame.sd-frame-ne {
    width: 34px;
    height: 10px;
    right: -34px;
    top: -10px;
}
.skin-flip .sd-frame.sd-frame-e {
    width: 34px;
    height: 100%;
    right: -34px;
    top: 0;
    bottom: 0;
}
.skin-flip .sd-frame.sd-frame-se {
    width: 34px;
    height: 10px;
    right: -34px;
    bottom: -10px;
}
.skin-flip .sd-frame.sd-frame-s {
    width: 100%;
    height: 10px;
    left: 0;
    right: 0;
    bottom: -10px;
}
.skin-flip .sd-frame.sd-frame-sw {
    width: 34px;
    height: 10px;
    left: -34px;
    bottom: -10px;
}
.skin-flip .sd-frame.sd-frame-w {
    width: 34px;
    height: 100%;
    left: -34px;
    top: 0;
    bottom: 0;
}

/*
 * The SlideDeck element itself.
 * 
 * Customize the width and height to increase or decrease the size of
 * your SlideDeck. 
 */
.skin-flip dl.slidedeck {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

/*
 * The SlideDeck slide area.
 * 
 * You can specify a height for the slide area, but it is not required, width
 * will automatically be defined for the slide area and will vary depending on
 * how many slides you have in your SlideDeck.
 * 
 * To add space between a slide and the next slide's spine (slide title bar),
 * increase the border-right definition. To remove the space, just remove the
 * border definition.
 * 
 * SlideDeck slides are all given a unique class, so you can customize the
 * appearance of each slide individually by referencing a slide by its
 * numbered class name. For example:
 *    .slidedeck dd.slide_1
 *    .slidedeck dd.slide_2
 *    .slidedeck dd.slide_3
 *    etc...
 */
.skin-flip dl.slidedeck > dd {
    position: relative;
    background: #fff;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.skin-flip dl.slidedeck > dd dd {
    position: relative;
    margin: 0;
    padding: 0;
}

/*
 * The SlideDeck spine (slide title bar).
 * 
 * SlideDeck spines are rotated, so you will need to swap your directions. To
 * change the width of the spine, you will need to modify the spine height.
 * You will also need to make sure that any background imagery used is rotated
 * horizontally.
 * 
 * Like slides, spines are also given a unique class allowing for custom
 * appearance for each spine. This follows a similar naming convention:
 *     .slidedeck dt.slide_1
 *     .slidedeck dt.slide_2
 *     .slidedeck dt.slide_3
 *     etc...
 */
.skin-flip dl.slidedeck > dt { display: none !important; }

/*
 * The SlideDeck vertical slide style.
 * 
 * Veritcal slides will take over the entire content area of a horizontal slide
 * automatically. Padding will automatically be accommodated for. You can also
 * eliminate the padding definition to have your vertical slide content line
 * up flush against the containing slide content area edges.
 */
.skin-flip dl.slidedeck dd.slide ul.slidesVertical > li {
    overflow: hidden;
    padding: 10px;
}

/*
 * The SlideDeck vertical slide navigation container.
 * 
 * This is the container for the vertical slide navigation. You can position
 * this anywhere you want within the containing slide's area. If you try to
 * position it outside of the slide area it will not appear.
 */
dl.slidedeck dd.slide ul.verticalSlideNav {
    top: 10px;
    right: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * The SlideDeck vertical slide navigation link containers.
 * 
 * This is the container for a navigation link in the vertical slide navigation
 * element. You can adjust the width and height of this element to accommodate
 * for a larger vertical navigation button.
 * 
 * To increase the space between vertical navigation links, increase the bottom
 * and/or top padding of this element.
 */
dl.slidedeck dd.slide ul.verticalSlideNav li {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 0 3px;
    width: 12px;
    height: 12px;
    overflow: hidden;
    line-height: 12px;
    list-style: none;
    font-size: 1px; /* Stupid IE */
}

/*
 * The SlideDeck vertical slide position indicator.
 * 
 * This is the element that slides behind the default navigation link list to
 * show which is the current vertical slide being viewed. This should be given
 * similar dimensions to the vertical slide navigation links.
 */
dl.slidedeck dd.slide ul.verticalSlideNav li.arrow {
    position: absolute;
    display: block;
    z-index: 1;
    width: 10px;
    height: 0;
    padding-top: 10px;
    padding-bottom: 0;
    overflow: hidden;
    left: 0;
    border: 1px solid #333;
    background: #444;
    background-image: -moz-linear-gradient(top, #000, #444); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #444)); /* Saf4+, Chrome */
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -o-border-radius: 3px;
}

/*
 * The SlideDeck veritcal slide navigation links.
 * 
 * These are the vertical slide navigation links. By default these are a small
 * square that uses a sprite background image replacement method to hide the
 * default text that is placed in the link ("Nav 1", "Nav 2", "Nav 3").
 * 
 * To change the appearance of the navigation elements, you will need to use a
 * background image replacement as the text for the links cannot be changed.
 * Each vertical slide navigation link is given a unique class so they can be
 * styled individually. For example:
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_1
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_2
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_3
 *     etc....
 */
dl.slidedeck dd.slide ul.verticalSlideNav li a {
    position: relative;
    display: block;
    width: 10px;
    height: 0;
    overflow: hidden;
    padding-top: 10px;
    background: #fff;
    outline: none;
    text-decoration: none;
    border: 1px solid #ccc;
    opacity: 0.5;
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    -khtml-opacity: 0.5;
    -ms-filter: "Alpha(opacity=50)";
    filter: Alpha(opacity=50);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -o-border-radius: 3px;
}

/*
 * The SlideDeck vertical slide navigation link hover state.
 */
dl.slidedeck dd.slide ul.verticalSlideNav li a:hover {
    opacity: 0.75;
    -moz-opacity: 0.75;
    -webkit-opacity: 0.75;
    -khtml-opacity: 0.75;
    -ms-filter: "Alpha(opacity=75)";
    filter: Alpha(opacity=75); 
}