/**************************************************************************
*	 Zozo Tabs: Themes
*
*	 1. Black
*    2. Blue 
*    3. Crystal
*    4. DeepBlue
*	 5. Gray	
*	 6. Green
*	 7. Orange
*	 8. Red
*	 9. Silver
*	 10. White
*    
*   Feel free to delete/edit anything
* 
**************************************************************************/


/*#region ==========================================================================
     black
========================================================================== */
   
.z-tabs.black > ul, 
.z-tabs.black > ul > li > a, 
.z-tabs.black > .z-container{border-color: #343232; border-style: solid;}
.z-tabs.black > ul > li > a
{
    color: white;
    background: #333333; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#555555)); 
    background: -webkit-linear-gradient(top, #333333, #555555); 
    background: -moz-linear-gradient(top, #333333, #555555); 
    background: -ms-linear-gradient(top, #333333, #555555); 
    background: -o-linear-gradient(top, #333333, #555555);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#555555',GradientType=0 );      
}
.z-tabs.black > ul > li > a{color: white;-shadow: 0 -1px 0 rgba(0, 0, 0, .5);}
.z-tabs.black > ul > li > a:hover {background: #353434;}	
.z-tabs.black > ul > li.z-active > a
{ 
    background: #fff; 
    color: #3E3E3E;
    text-shadow: none;
    box-shadow: none;
    filter: none;
}


/*black2*/
.z-tabs.black2 {color: #F7F7F7;text-shadow: none;}
.z-tabs.black2 > .z-container {background: #222;}

.z-tabs.black2 > ul, 
.z-tabs.black2 > ul > li > a, 
.z-tabs.black2 > .z-container{border-color: #191919; border-style: solid;}
.z-tabs.black2 > ul > li > a
{
    color: #F7F7F7;
    background: #454545; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#303030), to(#262626)); 
    background: -webkit-linear-gradient(top, #303030, #262626); 
    background: -moz-linear-gradient(top, #303030, #262626); 
    background: -ms-linear-gradient(top, #303030, #262626); 
    background: -o-linear-gradient(top, #303030, #262626);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#262626',GradientType=0 );      
}
.z-tabs.black2 > ul > li a{color: #F7F7F7;text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);}
.z-tabs.black2 > ul > li.z-active > a {text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);}
.z-tabs.black2 > ul > li > a:hover {background: #353434;}	
.z-tabs.black2 > ul > li.z-active > a
{ 
    background: #222; 
    color: #dadada;
    text-shadow: none;
    box-shadow: none;
    filter: none;
}


/*#endregion*/




/*#region ==========================================================================
     blue
========================================================================== */
 
.z-tabs.blue > ul, 
.z-tabs.blue > ul > li > a, 
.z-tabs.blue > .z-container{border-color: #0487BD;border-style: solid;}
.z-tabs.blue > ul > li > a
{    
    background: #1abde7;
    background: -moz-linear-gradient(top,  #1abde7 0%, #1c9dd1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1abde7), color-stop(100%,#1c9dd1));
    background: -webkit-linear-gradient(top,  #1abde7 0%,#1c9dd1 100%);
    background: -o-linear-gradient(top,  #1abde7 0%,#1c9dd1 100%);
    background: -ms-linear-gradient(top,  #1abde7 0%,#1c9dd1 100%);
    background: linear-gradient(to bottom,  #1abde7 0%,#1c9dd1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1abde7', endColorstr='#1c9dd1',GradientType=0 );
}	
.z-tabs.blue > ul > li a {color: white;text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);}
.z-tabs.blue > ul > li.z-active > a {text-shadow: 0 1px 1px white;color: Black}
.z-tabs.blue > ul > li > a:hover {background: #21ADDF;}	
.z-tabs.blue > ul > li.z-active > a
{ 
    background: #fff; 
    color: #000F4D;
    text-shadow: 0 1px rgba(78, 78, 78, 0.1); 
    filter: none;
}


/*#endregion*/




/*#region ==========================================================================
     crystal
========================================================================== */
 
.z-tabs.crystal > ul, 
.z-tabs.crystal > ul > li > a, 
.z-tabs.crystal > .z-container
{
    border-color: #ddd; 
    border-color: #b4b4b4; 
    border-style: solid;
}
.z-tabs.crystal > ul > li > a
{ 
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );      
}
.z-tabs.crystal > ul > li > a:hover 
{ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
    background: whiteSmoke;
    background: -moz-linear-gradient(top,  #ffffff 0%, #ececec 50%, #e0e0e0 50%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ececec), color-stop(50%,#e0e0e0), color-stop(100%,#f2f2f2));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ececec 50%,#e0e0e0 50%,#f2f2f2 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#ececec 50%,#e0e0e0 50%,#f2f2f2 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#ececec 50%,#e0e0e0 50%,#f2f2f2 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#ececec 50%,#e0e0e0 50%,#f2f2f2 100%); 
}	
.z-tabs.crystal > ul > li.z-active > a
{ 
    background: #fff; 
    text-shadow: 0 1px 1px white;
    color: Black;
    filter: none;
}



/*#endregion*/




/*#region ==========================================================================
     deepblue
========================================================================== */
   
.z-tabs.deepblue > ul, 
.z-tabs.deepblue > ul > li > a, 
.z-tabs.deepblue > .z-container{border-color: #1E69DE;border-style: solid;}
.z-tabs.deepblue > ul > li > a
{    
    background: #479fed; /* Old browsers */
    background: -moz-linear-gradient(top,  #479fed 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#479fed), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #479fed 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #479fed 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #479fed 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #479fed 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#479fed', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

}	
.z-tabs.deepblue > ul > li > a {color: white;text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);}
.z-tabs.deepblue > ul > li.z-active > a {text-shadow: 0 1px 1px white;color: Black}
.z-tabs.deepblue > ul > li > a:hover {

    background: #238dea; /* Old browsers */
background: -moz-linear-gradient(top,  #238dea 0%, #54a3ee 50%, #3690f0 51%, #065cdd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#238dea), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#065cdd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #238dea 0%,#54a3ee 50%,#3690f0 51%,#065cdd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #238dea 0%,#54a3ee 50%,#3690f0 51%,#065cdd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #238dea 0%,#54a3ee 50%,#3690f0 51%,#065cdd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #238dea 0%,#54a3ee 50%,#3690f0 51%,#065cdd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238dea', endColorstr='#065cdd',GradientType=0 ); /* IE6-9 */

}	
.z-tabs.deepblue > ul > li.z-active > a
{ 
    background: #fff; 
    color: #000F4D;
    text-shadow: 0 1px rgba(78, 78, 78, 0.1); 
    filter: none;
}



/*#endregion*/




/*#region ==========================================================================
     gray
========================================================================== */
   
.z-tabs.gray > ul, 
.z-tabs.gray > ul > li > a, 
.z-tabs.gray > .z-container{border-color: #B3B3B3; border-style: solid;}
.z-tabs.gray > ul > li > a
{
    background: whiteSmoke;
    background: -moz-linear-gradient(top,  #dbdbdb 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#f2f2f2));
    background: -webkit-linear-gradient(top,  #dbdbdb 0%,#f2f2f2 100%);
    background: -o-linear-gradient(top,  #dbdbdb 0%,#f2f2f2 100%);
    background: -ms-linear-gradient(top,  #dbdbdb 0%,#f2f2f2 100%);
    background: linear-gradient(to bottom,  #dbdbdb 0%,#f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#f2f2f2',GradientType=0 );
}
.z-tabs.gray > ul > li > a:hover 
{ 
    background: #e8e8e8;
    background: -moz-linear-gradient(top,  #e8e8e8 0%, #f7f7f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(100%,#f7f7f7));
    background: -webkit-linear-gradient(top,  #e8e8e8 0%,#f7f7f7 100%);
    background: -o-linear-gradient(top,  #e8e8e8 0%,#f7f7f7 100%);
    background: -ms-linear-gradient(top,  #e8e8e8 0%,#f7f7f7 100%);
    background: linear-gradient(to bottom,  #e8e8e8 0%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#f7f7f7',GradientType=0 );
}	
.z-tabs.gray > ul > li.z-active > a
{ 
    background: #fff; 
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: 0 1px 1px white;
    filter:none;
}



/*#endregion*/




/*#region ==========================================================================
     green
========================================================================== */
  
.z-tabs.green > ul, 
.z-tabs.green > ul > li > a, 
.z-tabs.green > .z-container{border-color: #336c2b; border-style: solid;}
.z-tabs.green > ul > li > a
{
    color: white;
    background: #5fae53; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33)); 
    background: -webkit-linear-gradient(top, #5fae53, #3b7c33); 
    background: -moz-linear-gradient(top, #5fae53, #3b7c33); 
    background: -ms-linear-gradient(top, #5fae53, #3b7c33); 
    background: -o-linear-gradient(top, #5fae53, #3b7c33);
}
.z-tabs.green > ul > li > a {color: white;text-shadow: 0 1px 0 #387031;}
.z-tabs.green > ul > li.z-active > a{text-shadow: 0 1px 1px white;color: Black}
.z-tabs.green > ul > li > a:hover {background: #3b7c33;}	
.z-tabs.green > ul > li.z-active > a
{ 
    background: #fff; 
    color: #2C3F0A;
    text-shadow: none;
    box-shadow: none;
    filter: none;
}



/*#endregion*/




/*#region ==========================================================================
     orange
========================================================================== */
   
.z-tabs.orange > ul, 
.z-tabs.orange > ul > li > a, 
.z-tabs.orange > .z-container{border-color: #D64817; border-style: solid;}
.z-tabs.orange > ul > li > a
{ 
    background: #F2825B;
    background: -moz-linear-gradient(top, #F2825B 0%, #E55B2B 50%, #F07146 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2825B), color-stop(50%,#E55B2B), color-stop(100%,#F07146));
    background: -webkit-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: -o-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: -ms-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: linear-gradient(to bottom, #F2825B 0%,#E55B2B 50%,#F07146 100%);  
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=0 );  
}
.z-tabs.orange > ul > li > a:hover 
{ 
    background: #F2825B;
    background: -moz-linear-gradient(top, #F2825B 0%, #E55B2B 50%, #F07146 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2825B), color-stop(50%,#E55B2B), color-stop(100%,#F07146));
    background: -webkit-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: -o-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: -ms-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: linear-gradient(to bottom, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=0 );
}	
.z-tabs.orange > ul > li.z-active > a{ background: #fff;text-shadow: 0 1px 1px white;color: Black;filter: none;}
.z-tabs.orange > ul > li > a {color: white;text-shadow: 0 1px #5E1902;}
.z-tabs.orange > ul > li.z-active > a {color: black;text-shadow: 0 1px white;}

/*#endregion*/




/*#region ==========================================================================
     red
========================================================================== */
  
.z-tabs.red > ul, 
.z-tabs.red > ul > li > a, 
.z-tabs.red > .z-container{border-color: #951100; border-style: solid;}
.z-tabs.red > ul > li > a
{ 
    color: #fff;
    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
    background: #d84a38;
    background: -moz-linear-gradient(top,  #dd4b39 0%, #d14836 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4b39), color-stop(100%,#d14836));
    background: -webkit-linear-gradient(top,  #dd4b39 0%,#d14836 100%);
    background: -o-linear-gradient(top,  #dd4b39 0%,#d14836 100%);
    background: -ms-linear-gradient(top,  #dd4b39 0%,#d14836 100%);
    background: linear-gradient(to bottom,  #dd4b39 0%,#d14836 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4b39', endColorstr='#d14836',GradientType=0 );
}	
.z-tabs.red > ul > li > a:hover 
{ 
    background: #d34332;
    background: -moz-linear-gradient(top,  #dd4b39 0%, #c53727 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4b39), color-stop(100%,#c53727));
    background: -webkit-linear-gradient(top,  #dd4b39 0%,#c53727 100%);
    background: -o-linear-gradient(top,  #dd4b39 0%,#c53727 100%);
    background: -ms-linear-gradient(top,  #dd4b39 0%,#c53727 100%);
    background: linear-gradient(to bottom,  #dd4b39 0%,#c53727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4b39', endColorstr='#c53727',GradientType=0 );
}	
.z-tabs.red > ul > li.z-active > a
{ 
    background: white;
    color: #951100;
    text-shadow: none;
    filter: none;
}
.z-tabs.red > ul > li > a {color: white;text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);}
.z-tabs.red > ul > li.z-active > a {text-shadow: 0 1px 1px white;color: Black}



/*#endregion*/




/*#region ==========================================================================
     silver
========================================================================== */
 
.z-tabs.silver > ul, 
.z-tabs.silver > ul > li > a, 
.z-tabs.silver > .z-container{border-color: #CECECE;border-style: solid;}
.z-tabs.silver > ul > li > a
{   
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FDFCFC', endColorstr='#FBF9F9');
    background-color: #F2F0F0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FDFCFC), to(#F2F0F0), color-stop(0.5, #FBF9F9), color-stop(0.5, #F7F5F6));
    background-image: -webkit-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
    background-image: -moz-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
    background-image: -o-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
    background-image: -ms-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
    
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.z-tabs.silver > ul > li > a{ color:#444;text-shadow: 0 1px #eee;}
.z-tabs.silver > ul > li > a:hover 
{ 
    background: #fcfcfc;
    background: -moz-linear-gradient(top,  #fcfcfc 0%, #fbf9f9 50%, #f7f5f6 50%, #fcfcfc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(50%,#fbf9f9), color-stop(50%,#f7f5f6), color-stop(100%,#fcfcfc));
    background: -webkit-linear-gradient(top,  #fcfcfc 0%,#fbf9f9 50%,#f7f5f6 50%,#fcfcfc 100%);
    background: -o-linear-gradient(top,  #fcfcfc 0%,#fbf9f9 50%,#f7f5f6 50%,#fcfcfc 100%);
    background: -ms-linear-gradient(top,  #fcfcfc 0%,#fbf9f9 50%,#f7f5f6 50%,#fcfcfc 100%);
    background: linear-gradient(to bottom,  #fcfcfc 0%,#fbf9f9 50%,#f7f5f6 50%,#fcfcfc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fbf9f9',GradientType=0 );
}	
.z-tabs.silver > ul > li.z-active > a{filter: none;background: #fff; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
.z-tabs.silver > ul > li.z-active > a{color:black;text-shadow: 0 1px #fff;}




/*#endregion*/




/*#region ==========================================================================
     white
========================================================================== */
  
.z-tabs.white > ul, 
.z-tabs.white > ul > li > a, 
.z-tabs.white > .z-container{border-color: #CECECE; border-style: solid;}
.z-tabs.white > ul > li > a{background: #fff;color:#333;text-shadow: 0 1px #f5f5f5;}
.z-tabs.white > ul > li.z-active > a {text-shadow: 0 1px 1px white;color: #333;}	
.z-tabs.white.mobile > ul > li.z-active > a {font-weight: bold;}	


/*#endregion*/


