/*==== teal color  skin  ====*/


/* This are the primary elements that you need to change if you want to create your own color scheme, 
beside this elements properties, you also need to change the borderColor from the script.js for the 
hover effect, and IE Css files for respective color more about how to create or change the color scheme in the documentation file*/


/*================================================
	===== General typography text color ====
================================================*/
h1, h3, #footer h5, span.hightlight, h5, .features_columns a, .features_columns a span, #form .overlayForm-wrap h2, #form .overlayForm-wrap .offer span, .offer span, .features a, .features a span { color:#05b0bb; }
.title { background: url(../images/teal/ribbon.png) no-repeat; }
.title-center { background: url(../images/teal/ribbon-bottom.png) no-repeat; }
/*================================================
	===== General typography text color ====
================================================*/

/*================================================
	=====Header, Product Features Column and Social Share ====
================================================*/
#outside-top-wrapper { border-top:4px solid #05b0bb; }
#main-subscribe input, #main-subscribe textarea {  border: 1px solid #05b0bb;}
#main-subscribe label {  color:#05b0bb; }
#main-subscribe textarea:focus, #main-subscribe input:focus { border: 1px solid #028088;}
#main-subscribe .submit-button {  background: url(../images/btn.jpg) no-repeat;  text-shadow: 0px 1px 1px #028088;  }
/*#product { background: url(../images/teal/slider-bg.png) no-repeat; }*/
.tagline { background:#05b0bb; text-shadow:1px 1px 0px #028088; -moz-box-shadow:0px 1px 1px #028088; -webkit-box-shadow:0px 1px 1px #028088; box-shadow:0px 1px 1px #028088; }
.call h5 { background:#05b0bb; -moz-box-shadow:0px 1px 1px #028088; -webkit-box-shadow:0px 1px 1px #028088; box-shadow:0px 1px 1px #028088; }
.app-button { background: url(../images/teal/buy.png) no-repeat; text-shadow:1px 1px 1px #028088; }
/*================================================
	===== End Features Column and Social Share ====
================================================*/


/*================================================
	===== Forms and image hovers ====
================================================*/
#overlayForm textarea:focus, #overlayForm input:focus { border: 1px solid #05b0bb; }
.intro-check ul li { background: url(../images/teal/check.png) left center no-repeat; color:#05b0bb; }
.bottom-action { border-top:4px solid #05b0bb; }
#product ul.check li { background: url(../images/teal/check.png) left center no-repeat; }
.app-image li span.video { background:  url(../images/teal/play.png) center no-repeat; }
.app-image li span.video:hover { background:#fff url(../images/teal/play.png) center no-repeat; }
.app-image li span.zoom { background:  url(../images/teal/zoom.png) bottom right no-repeat; }
.app-image li span.zoom:hover { background:#fff url(../images/teal/zoom.png) bottom right no-repeat; }
.hover-zoom { background: #fff url(../images/teal/small-zoom.png) center no-repeat; }
#subscribe-footer textarea, #subscribe-footer input { border:1px solid #05b0bb; }
#overlayForm .submit-button { background: url(../images/btn.jpg) no-repeat; }
#subscribe-footer .subscribe-button { background:url(../images/teal/subscribe.png) no-repeat;text-shadow: 0px 1px 1px #028088; }
.contact-form input.input-button { background:url(../images/teal/contact-btn.png) no-repeat;text-shadow: 0px 1px 1px #028088; }
.contact-form textarea:focus, .contact-form input:focus { border:1px solid #05b0bb; }
/*================================================
	===== End Forms and image hovers ====
================================================*/

/*================================================
	===== Tabs Navigation color( also you need to change the ie file for the respective color (ex: teal.css and ie-teal.css, ie-teal.css(more in the documentation file)  ====
================================================*/
/* active */
ul.tab_nav li a.active { border: 1px solid #028088;  background:-moz-linear-gradient(top, #09afbb, #058f99 25px ); background: -webkit-gradient(linear, left top, left 50, from(#09afbb), to(#058f99)); text-shadow:0px 1px 0px #028088; }
/* active */

/* hover */
ul.tab_nav li a:hover { border: 1px solid #028088;  background:-moz-linear-gradient(top, #09afbb, #058f99 25px ); background: -webkit-gradient(linear, left top, left 50, from(#09afbb), to(#058f99)); text-shadow:0px 1px 0px #028088; }
/* End hover */

/*================================================
	===== End Tabs Navigation color ====
================================================*/