/***********************************************************************
  jQuery Coda-Slider v3.0 - kevinbatdorf.github.com/codaslider
  Copyright (c) 2012 Kevin Batdorf
  This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
************************************************************************/
/********************************************
SASS stylesheet.

No idea what CSS preprocessing is all about? No problem... just use the style.css file instead.
If you want to learn more, check out this article by Chris Coyier

css-tricks.com/musings-on-preprocessing/

********************************************/

.coda-slider-wrapper {
  /*******************************************************
  *
  * Most common stuff you'll need to change 
  * will be below this line.
  *
  ********************************************************/
  /******************************************************
  * 
  * Main wrapper padding 
  *
  *******************************************************/
  padding: 10px; 
         position: relative;
         padding-top: 80px;
         height: 280px;
         width: 940px;
}
  
  .coda-slider-wrapper .coda-slider {
    /******************************************************
    * 
    * Inner wrapper styles 
    *
    *******************************************************/
/*     background: #f2f2f2; */
    /******************************************************
    * 
    * Width of the container. Typically you will want to 
    * match this with the width of the panel as well. 
    *
    *******************************************************/
    width: 620px;
    margin: 10px; 
    position: relative;
  }
    
    .coda-slider-wrapper .coda-slider .panel {
      /******************************************************
      * 
      * Width of each individual panel. 
      * Typically you will want to match this with the width 
      * of the container as well. 
      *
      *******************************************************/
      width: 620px; 

    }
      
      .coda-slider-wrapper .coda-slider .panel .panel-wrapper {
        /******************************************************
        * 
        * Panel wrapper styles 
        *
        *******************************************************/
        padding: 0; 
      }
  
  .coda-slider-wrapper .coda-nav {
    /******************************************************
    * 
    * Tab styles 
    *
    *******************************************************/ 
    position: absolute;
    bottom: 0px;

    left: 70px;
    
  }
    
    .coda-slider-wrapper .coda-nav .current {
      /******************************************************
      * 
      * Current tab styles 
      *
      *******************************************************/
      color: #ec3432; 
    }
    
    .coda-slider-wrapper .coda-nav a {
      /******************************************************
      * 
      * Tab styles 
      *
      *******************************************************/
      width: 100px;
      height: 30px;
      color: #0974a2;
      margin: 5px;
      position: relative;
      padding-left: 30px;


    }

    
    .tab1 a:before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(../img/create-clear.png);
	width: 26px;
	height: 32px;
	background-color: #0974a2;
	margin-top: 0px;
	background-position: 0px -3px;
	    
    }
    
    .tab2 a:before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(../img/track-clear.png);
	width: 26px;
	height: 32px;
	background-color: #0974a2;
	margin-top: 0px;
	background-position: 0px -3px;
	    
    }
    
        .tab3 a:before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(../img/share-clear.png);
	width: 26px;
	height: 35px;
	background-color: #0974a2;
	margin-top: 0px;
	background-position: 0px -3px;
	    
    }
    
    .coda-nav a.current:before {
	    background-color: #ec3432;
    }
    
     .tab4 a:before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(../img/report-clear.png);
	width: 26px;
	height: 32px;
	background-color: #0974a2;
	margin-top: 0px;
	background-position: 0px -3px;
	    
    }

    
 /*
   .coda-slider-wrapper .coda-nav a:before {
	    content: '';
	   position: absolute;
	left: 0px;
	top: 0px;
	background-image: url(../img/sprites.png);
	width: 22px;
	height: 22px;
	background-position: -75px -145px;
	margin-top: 0px;
    }
*/
    
    .coda-slider-wrapper .coda-nav a:hover {
      /******************************************************
      * 
      * Tab styles 
      *
      *******************************************************/

      color: #ec3432;
      text-shadow: none; 
    }
    
    .coda-slider-wrapper .coda-nav a:hover:before {
	    background-color: #ec3432;
    }
  
  .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {
    /******************************************************
    * 
    * Arrow Styles 
    *
    *******************************************************/ 
  }
    
    .coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a {
      /******************************************************
      * 
      * Arrow Styles 
      *
      *******************************************************/

      color: #fff;
      padding: 5px;

     
    }
  
  .coda-slider-wrapper .coda-nav-left-arrow {
    /******************************************************
    * 
    * Graphical arrow styles 
    *
    *******************************************************/
    width: 25px;
    height: 25px;
    background: url(img/arrow-left.png) no-repeat top left; 
    margin-top:50px;
  }

.coda-slider-wrapper .coda-nav-left-arrow a {
    /******************************************************
    * 
    * Graphical arrow styles 
    *
    *******************************************************/
    width: 0;
    height: 0;
    border:none;
     margin-top: 30px;
  }

  .coda-slider-wrapper .coda-nav-left-arrow:hover {
    /************************************************
    * 
    * Graphical arrows hover left
    *
    *************************************************/
    background: url(../img/arrow.png) no-repeat bottom left; 
  }
  
  .coda-slider-wrapper .coda-nav-right-arrow {
    /******************************************************
    * 
    * Graphical arrow styles 
    *
    *******************************************************/
    width: 25px;
    height: 25px;
    
    margin-top:100px;
  }
.coda-slider-wrapper .coda-nav-right-arrow a {
    /******************************************************
    * 
    * Graphical arrow styles 
    *
    *******************************************************/
    width: 0;
    height: 0;
    background: none; 
    margin-top:0;
    border:none;
   
  }

  .coda-slider-wrapper .coda-nav-right-arrow:hover {
    /************************************************
    * 
    * Graphical arrows hover right
    *
    *************************************************/
    background: url(../img/arrow.png) no-repeat bottom right; 
  }

  .coda-slider-wrapper .coda-nav-left-arrow:active, .coda-slider-wrapper .coda-nav-right-arrow:active {
    /************************************************
    * 
    * Graphical arrows active
    *
    *************************************************/
    margin-top: 55px; 
  }
  
  .coda-slider-wrapper .loading {
    /******************************************************
    * 
    * Style for preloader 
    *
    *******************************************************/
    height: 100%;
    padding: 20px;
    text-align: center; 
  }
  
  .coda-slider > div img {
	  width: 140px;
	  height: 140px;
	  margin-top: -30px;
	  float: left;
	  border: none;
	  
  }
  
  .coda-slider > div p {
	  float: right;
	  width: 460px;
	  	font-family: 'Droid Sans', sans-serif;
	  	color: white;
	  	font-size: 14px;
	  line-height: 24px;
	  margin-top: 10px;
  }
  
  .coda-slider > div h3 {
	  float: right;
	  width: 460px;
	  font-weight: bold;
	  font-size: 24px;
	  color: white;
	  letter-spacing: 1px;
	  	font-family: 'Droid Sans', sans-serif;
  }
  
  .howto > section > a {
	  position: absolute;
	  bottom: -10px;
	  right: 80px;
	  	display: block;
	background-color: #ec3432;
	font-size: 14px;
	text-transform: uppercase;
	padding: 10px 5px;
	border-radius: 3px;

	color: white;
	width: 130px;
	font-family: 'Droid Sans', sans-serif;
	text-decoration: none;
	text-align: center;
			-webkit-transition: background-color .3s linear;
	-moz-transition: background-color .3s linear;
	transition: background-color .3s linear;
	  	z-index: 1;
  }

  


.arrows .coda-slider {
  /******************************************************
  * 
  * Margin between slider and arrows 
  *
  *******************************************************/
  margin: 0 10px; 
}

/**********************************************************************
*
* Don't change anything below here unless you know what you're doing 
*
***********************************************************************/

.coda-slider-wrapper {
  /************************************************
  * 
  * Wrapper styles 
  *
  *************************************************/
  clear: both;
  overflow: auto; 
}
  
  .coda-slider-wrapper .coda-slider {
    /************************************************
    * 
    * slider styles 
    *
    *************************************************/
    float: left;
    overflow: hidden;
    position: relative; 
  }
    
    .coda-slider-wrapper .coda-slider .panel-container {
      /************************************************
      * 
      * Panel container styles 
      *
      *************************************************/
      position: relative; 
    }
      
      .coda-slider-wrapper .coda-slider .panel-container .panel {
        /************************************************
        * 
        * Panel styles 
        *
        *************************************************/
        display: block;
        float: left; 
      }
  
  .coda-slider-wrapper .coda-nav {
    /************************************************
    * 
    * Navigation tabs 
    *
    *************************************************/ 
  


    
  }
    
    .coda-slider-wrapper .coda-nav ul {
      /************************************************
      * 
      * Navigation tabs 
      *
      *************************************************/
      clear: both;
      display: block;
 
      overflow: hidden; 
      width: 640px;
      height: 30px;
    }
      
      .coda-slider-wrapper .coda-nav ul li {
        /************************************************
        * 
        * Navigation tabs 
        *
        *************************************************/
        display: inline; 
          width: 140px;
          height: 30px;
          margin: 10px;
      }
      
      .coda-slider-wrapper .coda-nav ul li.tab1 {
      	display: inline; 
      	  width: 140px;
      	  height: 30px;
      	  margin: 10px;
      }
        
        .coda-slider-wrapper .coda-nav ul li a {
          /************************************************
          * 
          * Navigation tabs 
          *
          *************************************************/
          display: block;
          float: left;
          text-decoration: none; 

        }
  
  .coda-slider-wrapper .coda-nav-left-arrow, .coda-slider-wrapper .coda-nav-right-arrow {
    /************************************************
    * 
    * Graphical arrows 
    *
    *************************************************/
    cursor: pointer;
    float: left;
  }
  
  .title {
	  display: none;
  }
    
    .coda-slider-wrapper .coda-nav-left-arrow a, .coda-slider-wrapper .coda-nav-right-arrow a {
      /************************************************
      * 
      * Graphical arrows 
      *
      *************************************************/
      display: block; 
    }
  
  .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {
    /************************************************
    * 
    * Html arrows 
    *
    *************************************************/
    float: left; 
  }
    
    .coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a {
      /************************************************
      * 
      * Html arrow styles 
      *
      *************************************************/
      display: block;
      text-align: center;
      text-decoration: none; 
    }
  
  .coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-left-arrow {
    /************************************************
    * 
    * Html and graphical arrow styles 
    *
    *************************************************/
    clear: both; 
  }
  
  
      /******************************************************
    * 
    * LUKE HACK STYLES
    *
    *******************************************************/
    
  .coda-nav-right > a {
	   background: url(../img/arrow-right.png) no-repeat center center;
    width: 38px;
    height: 38px;
    margin-top: 60px;
    text-indent: -9999px;
    margin-right: 6px;
    margin-left: 77px;
  }
  
    .coda-nav-left > a {
	    background: url(../img/arrow-left.png) no-repeat center center;
    width: 38px;
    height: 38px;

    margin-right: 77px;
    margin-left: 6px; 
        margin-top: 60px;
    text-indent: -9999px;
    }
    
 @media screen and (max-width: 945px) {
 
 .coda-slider-wrapper .coda-slider {
 	width: 520px;
 }
 
 .coda-slider-wrapper .coda-slider .panel {
 	width: 520px;
 }
 
 .coda-slider-wrapper {
 margin: 0 auto;
 }
 
 .coda-slider > div h3 {
 	width: 74.1935%;
  }
 
 .coda-slider > div p {
 	width: 74.1935%;
 }
 
 .coda-slider > div img {
 	width: 22.580645%;
 	height: auto;
 }
 
 .coda-slider-wrapper .coda-nav {
 	left: 0;
 }
 
 .coda-slider-wrapper .coda-nav a {
 	width: 80px;
 }
 
 .howto > section > a {
 	right: 0;
 }
 
 }
 
  @media screen and (max-width: 680px) {
  	
  	div.coda-slider-wrapper {
  		display: none;
  	}
  	

  	
  	.coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-left-arrow {
  		display: none;
  	}
  	
  	.coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {
  		display: none;
  	}
  	
  	.coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a {
  	margin: 0;
  	padding: 0;
  	width: 0;
  	}
  	
  	.coda-slider-wrapper .coda-slider {

  	width: 300px;
  }
  
  .coda-slider > div p {
  	width: 50%;
  }
  
  .coda-slider-wrapper .coda-slider .panel {
  width: 300px;
  }
  
.coda-slider-wrapper .coda-nav {
	display: none;
	width: 0;
}

.coda-slider-wrapper .coda-nav ul {
width: 0;
}

.howto > section > a {
	display: none;
}
  
  .coda-nav-left > a {
  width: 0px;
  height: 0px;
  margin: 0px;
  }
  
  .coda-nav-right > a {
width: 0px;
height: 0px;
margin: 0px;  
  }
  }