/* 
    Document   : vertical-slider
    Created on : Sep 2, 2012, 1:27:42 PM
    Author     : Hermes
    Description:
        Normal implementation no longer followed. Did away with the vertical slider.
        Now just acts as a regular image gallery.
*/
#vertical-slider {
    text-align:left; 
    background-color: rgba(239, 239, 239, 0.5); 
    -moz-box-shadow:inset 0px 0px 13px #ffffff;
    -webkit-box-shadow:inset 0px 0px 13px #ffffff;
    box-shadow:inset 0px 0px 13px #ffffff, 0px 0px 40px -10px #000;
    border:1px solid #ccc; 
    width:800px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    margin:20px 40px 0px 40px;
    font-family:arial;
    padding: 5px;
    display: inline-block;
}

#vertical-slider .panel { 
    width:550px; 
    height:250px; 
    text-align:left;
}
#vertical-slider .mask { 
    float:left; 
    width: 550px; 
    height:250px; 
    margin:20px 0 0 0px; 
    overflow:hidden;
    border-left: 15px solid transparent;
}



/* 
  Horizontal Slider
*/
/*
    Page style
*/
#horizontal-slider {
    width:800px;
    height:305px;
    position:relative;
}
/*
    Slideshow
*/
#slides, #slides-2, #slides-3, #slides-4, #slides-5 {
    position:absolute;
    top:0px;
    left:0px;
    z-index:100;
}
/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/
.slides_container {
    width:800px;
    overflow:hidden;
    position:relative;
    display:none;
    border-radius: 10px;
}
/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/
.slides_container div.slide {
    width:800px;
    height:305px;
    display:block;
    
}
/*
    Next/prev buttons
*/
#slides .next,#slides .prev,
#slides-2 .next,#slides-2 .prev,
#slides-3 .next,#slides-3 .prev,
#slides-4 .next,#slides-4 .prev,
#slides-5 .next,#slides-5 .prev{
    position:absolute;
    top:100px;
    left: 0px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
    
    -webkit-box-shadow: 0px 0px 10px 1px rgba(14,14,14,0.6);
    -moz-box-shadow: 0px 0px 10px 1px rgba(14,14,14,0.6);
    box-shadow: 0px 0px 10px 1px rgba(14,14,14,0.6);
    
    -webkit-border-radius: 0px 24px 24px 0px;
    -moz-border-radius: 0px 24px 24px 0px;
    border-radius: 0px 24px 24px 0px;
    
    background: #3C3C3C;
}
#slides .next,
#slides-2 .next,
#slides-3 .next,
#slides-4 .next,
#slides-5 .next{
    left:776px;
    
    -webkit-border-radius: 24px 0px 0px 24px;
    -moz-border-radius: 24px 0px 0px 24px;
    border-radius: 24px 0px 0px 24px;
}
/*
    Pagination
      hide pagination. Not wanted
*/
.pagination {
    display: none;
}
/*
    Anchors
*/
.slide a {
    display:block;
    position: relative;
}
.slide a::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);
    box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.slide a img{
        height:100%;
        width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}