/********************************************************************
    File:   
        slider_a.css
    Brief:  
        -
    Author:
        DigitalCavalry
    Author URI:
        http://themeforest.net/user/DigitalCavalry
*********************************************************************/

/*********************************************************************
    SLIDER A CSS STYLES
**********************************************************************/

#slider-a-container
{
    width:960px;
    height:300px;
    background-color:#000000;
    overflow:hidden;
    position:relative;
    margin-bottom: 15px;
}

#slider-a-container .async-img
{
    background-color:#000000;
    background-image:url('../img/ajax/12.gif');
    background-position:center center;
    display:block;
}

#slider-a-container .slide
{
    width:960px;
    height:300px;
    position:absolute;
    top:420px;
    left:0px;
    display:block;
    background-color:black;
}

#slider-a-container .slide img
{
    border:none;
}

#slider-a-container .prev
{
    width:20px;
    height:20px;
    z-index:20;
    position:absolute;
    bottom:9px;
    right:70px;
    display:block;
    background-color:transparent;
    background-image:url(../img/slider_progress/prev.png);
    background-position:0px 0px;
    background-repeat:no-repeat;
    opacity:0.4;
    filter:alpha(opacity=40);
    cursor:pointer;
}

#slider-a-container .prev:hover
{
    opacity:1.0;
    filter:alpha(opacity=100);
}  

#slider-a-container .next
{
    width:20px;
    height:20px;
    z-index:20;
    position:absolute;
    bottom:9px;
    right:20px;
    display:block;
    background-color:transparent;
    background-image:url(../img/slider_progress/next.png);
    background-position:0px 0px;
    background-repeat:no-repeat;        
    opacity:0.4;
    filter:alpha(opacity=40);
    cursor:pointer;
}

#slider-a-container .next:hover
{
    opacity:1.0;
    filter:alpha(opacity=100);
}

#slider-a-container .play
{
    width:20px;
    height:20px;
    z-index:20;
    position:absolute;
    bottom:9px;
    right:45px;
    display:block;
    background-color:transparent;
    background-image:url(../img/slider_progress/play.png);
    background-position:0px 0px;
    background-repeat:no-repeat;        
    opacity:0.4;
    filter:alpha(opacity=40);
    cursor:pointer;
    display: none;
}

#slider-a-container .play:hover
{
    opacity:1.0;
    filter:alpha(opacity=100);
}

#slider-a-container .pause
{
    width:20px;
    height:20px;
    z-index:20;
    position:absolute;
    bottom:9px;
    right:45px;
    display:block;
    background-color:transparent;
    background-image:url(../img/slider_progress/pause.png);
    background-position:0px 0px;
    background-repeat:no-repeat;        
    opacity:0.4;
    filter:alpha(opacity=40);
    cursor:pointer;
}

#slider-a-container .pause:hover
{
    opacity:1.0;
    filter:alpha(opacity=100);
}

#slider-a-container .black-bar
{
    width:960px;
    height:38px;
    position:absolute;
    bottom:0px;
    left:0px;
    /* background-color:#000000; */
    background-color: tranparent !important; /* <---- I'm making the background visibility hidden since I no linde want the thumbnails to show up, This gives me the full 300px hight to play with.  - RACE */
    opacity:0.95;
    filter:alpha(opacity=95);
    z-index:15;
    border-top:0px solid #111;
}

#slider-a-container .thumb-bar
{
    width:955px;
    height:38px;
    position:absolute;
    bottom:0px;
    padding-left:15px;
    left:0px;
    background-color:transparent;
    z-index:16;
}

#slider-a-container .thumb
{
    width:59px;
    height:26px;
    display:block;
    background-color:#000000;
    border:1px solid #000000;
    margin-top:5px;
    margin-left:5px;
    float:left;
    cursor:pointer;
    overflow: hidden;
    position: relative;
} 

#slider-a-container .thumb .color
{
    display: block;
    position: absolute;
    left:0px;
    top:0px;
    width:59px;
    height:26px;
    display:none;
    overflow: hidden;
}     

#slider-a-container .thumb .black
{
    display: block;
    position: absolute;
    left:0px;
    top:0px;
    width:59px;
    height:26px;
    opacity:0.6;
    filter:alpha(opacity=60);    
}

#slider-a-container .desc
{
    z-index:10;
    display:none;
    position:absolute;
    left:0px;
    top:0px; 
    opacity:0.90;
    filter:alpha(opacity=90);         
}

#slider-a-container .desc .btn-bar
{
    height:22px;
    background-color:transparent;
    margin-top:3px;
}

#slider-a-container .desc .btn-left
{    
    padding-left:15px;
    padding-right:15px;
    padding-top:2px;
    padding-bottom:2px;
    height:18px;
    display:block;
    float: left;
    /* background-color:#000000; */
    
    background: rgb(63,63,63); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(63,63,63,1) 10%, rgba(13,13,13,1) 31%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(45,45,45,1) 90%, rgba(27,27,27,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(63,63,63,1)), color-stop(31%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(90%,rgba(45,45,45,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
         
    margin-right:3px;
    text-align: center;
    text-decoration: none;
    font: normal 11px/18px Verdana; 
    color:#FFFFFF;
    font-weight: bold;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
}

#slider-a-container .desc .btn-right
{    
    padding-left:15px;
    padding-right:15px;
    padding-top:2px;
    padding-bottom:2px;    
    height:18px;
    display:block;
    float: right;
    /* background-color:#000000;  */
    
    background: rgb(63,63,63); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(63,63,63,1) 10%, rgba(13,13,13,1) 31%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(45,45,45,1) 90%, rgba(27,27,27,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(63,63,63,1)), color-stop(31%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(90%,rgba(45,45,45,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(63,63,63,1) 10%,rgba(13,13,13,1) 31%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(45,45,45,1) 90%,rgba(27,27,27,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
          
    margin-left:3px;
    text-align: center;
    text-decoration: none;
    font: normal 11px/18px Verdana; 
    color:#FFFFFF;
    font-weight: bold;    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  
   
    
}

#slider-a-container .desc .btn-left:hover, 
#slider-a-container .desc .btn-right:hover
{ 
    color:#ffffff !important;
    background-color:#3399CC;
    font-weight: bold;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    
    background: rgb(81,225,250); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(81,225,250,1) 0%, rgba(161,226,234,1) 12%, rgba(161,226,234,1) 18%, rgba(34,179,221,1) 31%, rgba(34,151,214,1) 45%, rgba(34,151,214,1) 64%, rgba(81,225,250,1) 92%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,225,250,1)), color-stop(12%,rgba(161,226,234,1)), color-stop(18%,rgba(161,226,234,1)), color-stop(31%,rgba(34,179,221,1)), color-stop(45%,rgba(34,151,214,1)), color-stop(64%,rgba(34,151,214,1)), color-stop(92%,rgba(81,225,250,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(81,225,250,1) 0%,rgba(161,226,234,1) 12%,rgba(161,226,234,1) 18%,rgba(34,179,221,1) 31%,rgba(34,151,214,1) 45%,rgba(34,151,214,1) 64%,rgba(81,225,250,1) 92%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(81,225,250,1) 0%,rgba(161,226,234,1) 12%,rgba(161,226,234,1) 18%,rgba(34,179,221,1) 31%,rgba(34,151,214,1) 45%,rgba(34,151,214,1) 64%,rgba(81,225,250,1) 92%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(81,225,250,1) 0%,rgba(161,226,234,1) 12%,rgba(161,226,234,1) 18%,rgba(34,179,221,1) 31%,rgba(34,151,214,1) 45%,rgba(34,151,214,1) 64%,rgba(81,225,250,1) 92%); /* IE10+ */
    background: linear-gradient(top, rgba(81,225,250,1) 0%,rgba(161,226,234,1) 12%,rgba(161,226,234,1) 18%,rgba(34,179,221,1) 31%,rgba(34,151,214,1) 45%,rgba(34,151,214,1) 64%,rgba(81,225,250,1) 92%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51e1fa', endColorstr='#51e1fa',GradientType=0 ); /* IE6-9 */
    	
    
    text-shadow: 0 0 2px #000000;
    
}

#slider-a-container .desc .head
{
    width: 240px;
    padding-left:15px;
    padding-right:15px;
    padding-top:5px;
    padding-bottom:5px;
    background-color: #ECECEC;
    display:table-cell;
    color:#FFFFFF;
}

#slider-a-container .desc .head h3
{
   /*font: normal 20px/20px 'Lucida Grande','Lucida Sans Unicode',Tahoma,Arial,san-serif;   */
   font-size:20px;
   line-height:20px;
   vertical-align: middle;   
   margin-bottom:0px;
   padding:0px;
   color: inherit;     
}

#slider-a-container .desc .foot
{
    background-color:#000000;
    /* I'm turning off the backgroinud color for the Main Slider Disctiption. The Theme interface is broken and wont allow changes in the theme.  - RACE */ 
    padding:15px;
    padding-top:10px;
    padding-bottom:10px;
    width:240px;
    margin-top:3px;    
}

#slider-a-container .desc .foot h3
{
    font: normal 20px/20px 'Lucida Grande','Lucida Sans Unicode',Tahoma,Arial,san-serif;
    margin-bottom:5px;
    margin-top:0px;
    padding:0px;
    color:#FFFFFF;
}

#slider-a-container .desc .foot .text
{
    color:#EEEEEE; 
    font: normal 11px/14px Verdana;    
}

#slider-a-container .desc .x, 
#slider-a-container .desc .y, 
#slider-a-container .desc .width,
#slider-a-container .desc .hbgcolor,
#slider-a-container .desc .hcolor 
{
    display:none;
}