/*
HTML 5 Boilerplate used as template for Stylesheet.
visit http://html5boilerplate.com/ for more info.
 */

/* ==========================================================================
   ACHTUNG!!
   Box Model changed in ticom5 css to box-sizing: border-box; This should force browsers (like chrome and firefox) borders and padding to be included in width (like IE)
   ========================================================================== */
#tiHeader {
    padding-top:1px;
}
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Grid System - default 12 column - 1200px base
   ========================================================================== */

.ticom5 .row{
    margin: 0;
    position: relative;
    width: 100%;
}

.ticom5 .row.top{
    margin: 60px 0 0 0;
}

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12{
    margin: 10px 0.833333%;
    padding: 0 15px; 
}



/* no margin alternate ====================================================== */ 
.no-margin .c1, .no-margin .c2, .no-margin .c3, .no-margin .c4, .no-margin .c5, .no-margin .c6, .no-margin .c7, .no-margin .c8, .no-margin .c9, .no-margin .c10, .no-margin .c11, .no-margin .c12{
    margin: 0 0%;
}

/* width: [(col number x 80)+(number of gutters x 20)]/1200 ================= */ 
.c1{width:6.666667%;} 
.c2{width:15%;}
.c3{width:23.333333%;}
.c4{width:20%;}
.c5{width:40%;}
.c6{width:48.333333%;}
.c7{width:56.666667%;}
.c8{width:65%;}
.c9{width:73.333333%;}
.c10{width:81.666667%;}
.c11{width:90%;}
.c12{width:98.333333%;}

.push1{left:8.333333%;} 
.push2{left:16.666667%;}
.push3{left:25%;}
.push4{left:33.333333%;}
.push5{left:41.6666667%;}
.push6{left:50%;}
.push7{left:58.333333%;}
.push8{left:66.666667%;}
.push9{left:75%;}
.push10{left:83.333333%;}
.push11{left:91.666667%;}
.push12{left:100%;}

.push1{left:8.333333%;} 
.push2{left:16.666667%;}
.push3{left:25%;}
.push4{left:33.333333%;}
.push5{left:41.6666667%;}
.push6{left:50%;}
.push7{left:58.333333%;}
.push8{left:66.666667%;}
.push9{left:75%;}
.push10{left:83.333333%;}
.push11{left:91.666667%;}
.push12{left:100%;}

/* no margin alternate ====================================================== */ 
.no-margin .c1{width:8.333333%;} 
.no-margin .c2{width:16.666667%;}
.no-margin .c3{width:25%;}
.no-margin .c4{width:33.333333%;}
.no-margin .c5{width:41.6666667%;}
.no-margin .c6{width:50%;}
.no-margin .c7{width:58.333333%;}
.no-margin .c8{width:66.666667%;}
.no-margin .c9{width:75%;}
.no-margin .c10{width:83.333333%;}
.no-margin .c11{width:91.666667%;}
.no-margin .c12{width:100%;}

/* 10 column alternate ====================================================== */ 
/* width: [(col number x 100)+(number of gutters x 20)]/1200 ================ */
.ten-column .c1{width:8.333333%;} 
.ten-column .c2{width:18.333333%;}
.ten-column .c3{width:28.333333%;}
.ten-column .c4{width:38.333333%;}
.ten-column .c5{width:48.333333%;}
.ten-column .c6{width:58.333333%;}
.ten-column .c7{width:68.333333%;}
.ten-column .c8{width:78.333333%;}
.ten-column .c9{width:88.333333%;}
.ten-column .c10{width:98.333333%;}

.ten-column .push1{left:8.33%;} 
.ten-column .push2{left:15%;}
.ten-column .push3{left:23.333333%;}
.ten-column .push4{left:31.666667%;}
.ten-column .push5{left:40%;}
.ten-column .push6{left:48.333333%;}
.ten-column .push7{left:56.666667%;}
.ten-column .push8{left:65%;}
.ten-column .push9{left:73.333333%;}
.ten-column .push10{left:81.666667%;}
.ten-column .push11{left:90%;}
.ten-column .push12{left:98.333333%;}

/* no margin alternate ====================================================== */
.ten-column.no-margin .c1{width:10%;} 
.ten-column.no-margin .c2{width:20%;}
.ten-column.no-margin .c3{width:30%;}
.ten-column.no-margin .c4{width:40%;}
.ten-column.no-margin .c5{width:50%;}
.ten-column.no-margin .c6{width:60%;}
.ten-column.no-margin .c7{width:70%;}
.ten-column.no-margin .c8{width:80%;}
.ten-column.no-margin .c9{width:90%;}
.ten-column.no-margin .c10{width:100%;}


.ten-column.no-margin .push1{left:10%;} 
.ten-column.no-margin .push2{left:20%;}
.ten-column.no-margin .push3{left:30%;}
.ten-column.no-margin .push4{left:40%;}
.ten-column.no-margin .push5{left:50%;}
.ten-column.no-margin .push6{left:60%;}
.ten-column.no-margin .push7{left:70%;}
.ten-column.no-margin .push8{left:80%;}
.ten-column.no-margin .push9{left:90%;}
.ten-column.no-margin .push10{left:100%;}


/* nested grid c4 6 col base ================================================ */

.ticom5 .c4 .c1, .ticom5 .c4 .c2, .ticom5 .c4 .c3, .ticom5 .c4 .c4, .ticom5 .c4 .c5, .ticom5 .c4 .c6, .ticom5 .c4 .c7, .ticom5 .c4 .c8, .ticom5 .c4 .c9, .ticom5 .c4 .c10, .ticom5 .c4 .c11, .ticom5 .c4 .c12{
    margin: 10px 3%; /* 10/380 */
    padding: 0;
}

.c4 .c1{width:10.667%;} 
.c4 .c2{width:27.333%;}
.c4 .c3{width:44.0%;}
.c4 .c4{width:60.667%;}
.c4 .c5{width:77.333%;}
.c4 .c6{width:94.0%;}

/* nested grid c4 6 col base push classes =================================== */

.c4 .push1{left:19.667%;} 
.c4 .push2{left:36.333%;}
.c4 .push3{left:53.0%;}
.c4 .push4{left:69.667%;}
.c4 .push5{left:84.333%;}


/* ten column indented ====================================================== */
.indented{
    padding: 0 130px;
}

.indented .c2{
    padding:0;
    width: 17.916667%;
    margin: 0 1.041667%;
}

.indented .c2 p{
    font-size: .9em;
}

.indented img{
    margin: 0 0 20px 0;
}

/* ==========================================================================
   base styles:; a, h1-h6, p, body etc.
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #444;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.small p, .small li{
    font-size: .9em;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

a{
    transition: all .25s;
    -webkit-transition: all .25s;
}
/*********** PULLED FROM TICOM5-BASE.CSS ***********/
/* FIX LINE HEIGHT ON <sup> & <sub> */
sup, sub {vertical-align: baseline;position: relative;top: -0.4em;}
sub {top: 0.4em;}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 */

::-moz-selection {
    background: #0BC;
    text-shadow: none;
}

::selection {
    background: #0BC;
    text-shadow: none;
}

body, html{
    background-color: #b2b4b8; /* Old browsers */
    background-image: -moz-radial-gradient(center top, ellipse farthest-side,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%),-moz-linear-gradient(top,  #edf1f5 0%, #b2b4b8 100%); /* FF3.6+ */
    background-image: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf1f5), color-stop(100%,#b2b4b8)); /* Chrome,Safari4+ */
    background-image: -webkit-radial-gradient(center top, ellipse farthest-side,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -webkit-linear-gradient(top,  #edf1f5 0%,#b2b4b8 100%); /* Chrome10+,Safari5.1+ */
    background-image:-o-radial-gradient(center top, ellipse farthest-side,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -o-linear-gradient(top,  #edf1f5 0%,#b2b4b8 100%); /* Opera 11.10+ */
    background-image: -ms-radial-gradient(center top, ellipse farthest-side,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -ms-linear-gradient(top,  #edf1f5 0%,#b2b4b8 100%); /* IE10+ */
    background-image: radial-gradient( farthest-side at center top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), linear-gradient(to bottom,  #edf1f5 0%,#b2b4b8 100%); /* W3C */

    background-size: 2000px 300px,100% 1000px;
    background-repeat: no-repeat;
    background-position: center 70px, center 70px;
    font-family: 'Open Sans', arial, sans-serif;
    font-weight: 400;
    /*line-height: 1.8em; */
    height: 100%;
}

a:hover, a:active, a:focus, button:hover, button:active, button:focus { 
    text-decoration:none;
    outline:0;
    }

a.button:visited{color: #189;
}

a.button.noborder:hover{color: #c00;
}

html.lt-ie10, .lt-ie10 body{
    background-color: #b2b4b8;
}

body ol { 
    counter-reset: item;
    margin: 0;
}

body  ol li {
    display: block;
    padding-left:1em;
}

body ol li:before { 
    content: counters(item, ".") ; 
    counter-increment: item; 
    margin-left:-1em;
    position: absolute;
    color: #aaa;
}

body  ol li li {
    padding-left:2em;
}

body ol li li:before { 
    margin-left:-2em;
}


.ticom5 h1, .ticom5 h2, .ticom5 h3, .ticom5 .featurebox h3{
    font-weight: 300;
    color: #444;
    line-height: 1.3em;
    margin: 0.5em 0 0.5em 0;
    font-family: 'Roboto', arial, sans-serif;
}

.ticom5 p{
    line-height: 1.4em;
}

.ticom5 h4{
    font-weight: 600;
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 1.1em;
    margin: .5em 0;
    color:#444;
}

.ticom5 h5{
    font-weight: 600;
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 0.9em;
    margin: .5em 0;
    color:#444;
}

.ticom5 h1 a, .ticom5 h2 a, .ticom5 h3 a, .ticom5 h4 a, .ticom5 h5 a, .ticom5 .featurebox h3 a, .ticom5 h1 a:visited, .ticom5 h2 a:visited, .ticom5 h3 a:visited, .ticom5 h4 a:visited, .ticom5 h5 a:visited, .ticom5 .featurebox h3 a:visited{
    color: #444;
}
.ticom5 h1 a:hover, .ticom5 h2 a:hover, .ticom5 h3 a:hover, .ticom5 h4 a:hover, .ticom5 h5 a:hover, .ticom5 .featurebox h3 a:hover{
    color: #C00;
}

.ticom5 h1{
    font-family: 'Roboto', arial, sans-serif;
}

.ticom5 h2, .ticom5 .featurebox h2{
    font-size: 2.5em;
}

.ticom5 h3, .ticom5 .featurebox h3{
    font-size: 1.75em;
}
.ticom5 h3 span{
    font-size: 0.8em;
    font-family: 'Roboto', arial, sans-serif;
    color: #666;
}

.ticom5 ul{
    padding-left: 0px;
    margin: 0;

}

.row.ten-column.no-margin.meet ul li,.row.ten-column.no-margin.deviceFeatures ul li,.row.indented.soft .c4 ul li,.row.indented.soft .c6 ul li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    line-height: 1.2em;
    list-style-type: disc;
    margin-left: 15px;
    text-indent: -5px;
}

td.tivac ul.pdf li.tool {list-style-type: none !important;}

.ticom5 .button.red, .ticom5 .button.teal, .ticom5 .button.teal:hover{
    font-weight: 400;
    margin-right: 3px;
    font-size: 1em;
    margin: .5em 3px .5em 0;
}

.ticom5 .button.red span, .ticom5 .button.teal span, .ticom5 .button.teal span.pdf{
    font-size: 1em;
    font-weight: 400;
    background-position: 0 center;
    line-height: 1em;
    margin: 0;
}

#maincontainer{
    margin:0px auto 20px auto;
    width:1220px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
	font-size:0.85em;
}


.content-area{
    width:1220px;
    padding: 10px;
    margin: 0 0 20px 0;
    min-height: 150px;
    background: #f3f3f3;/*old browsers*/
    background: rgba(255,255,255,0.85);/*modern browsers*/
    font-family: 'Open Sans', arial, sans-serif;
    font-weight: 400;
    font-size: 1.3em;
    position: relative;
}

.ticom5 .button.bottom{
    position: absolute;
    bottom: 10px
}

.extlink, .e2elink, .filelink, .pdf, .wikilink {
    background: url("/assets/images/icons/icon_s_ext-link_a.png") no-repeat scroll 0 center transparent;
    padding: 0 0 0 1.4em;
    display: inline-block;
    }

.filelink{
    background: url("/assets/images/icons/icon_s_doc-download_a.png") no-repeat scroll 0 3px transparent;
}

.pdf{
    background: url("/assets/images/icons/icon_s_pdf_a.png") no-repeat scroll 0 -15px transparent;
}

.e2elink{
    background: url("/assets/images/icons/icon_s_blog_a.png") no-repeat scroll 0 center transparent;
}

.wikilink{
    background: url("/assets/images/icons/icon_s_wiki_a.png") no-repeat scroll 0 7px transparent;
}


.ticom5 .button.noborder.cart{
    background: url("/assets/images/icons/icon_s_cart_a.png") no-repeat scroll 0 center transparent;
    padding: 7px 0 7px 1.4em;
    display: inline-block;
}

.ticom5 .button.teal span.file{
    background: url(/assets/images/icons/icon_m_doc-download_btn_c.png) no-repeat 0 0;
    height: 20px;
    padding: 3px 0 0 25px;
    display: inline-block;
}


.ticom5 .divider-primary{
    background-position: center top;
}


/* kaltura video wrapper */
.k-vid{
    margin: 2em 0;
}

/* ==========================================================================
   header
   ========================================================================== */

#megaheader{
    background: #fff;
}

body #megaheader .container{
    width: inherit;
}

body #megaheader .container #tihdrtop, body #megaheader .container #nav{
    margin:0 auto;
    width: 1220px;
}

body #megaheader div.sub{
    left:50%;
    margin-left: -610px;
}

#megaheader #navsearch form {
    text-align: right;
}

/* ==========================================================================
   icons
   ========================================================================== */

/*.ticom5 ul.pdf li, .ticom5 ul.pdf li.tool{
    background-position: 0 0.4em;
}*/

/* ==========================================================================
   impact graphic (banner) area
   ========================================================================== */


#title{
    color: #444;
    z-index: 1;
    padding: 35px 0 0 40px;
}
#title span {
    color: #C00;
}

#title h1 {
    font-size: 4.2em;
    margin: 0;
}

#title h2 {
    margin: 0 0 .3em 0;
    font-weight: 400;
    font-size: 2.26em;
}

#title ul {
    font-family: 'Open Sans', arial, sans-serif;
    transition: all .5s;
    -webkit-transition: all height .5s;
    opacity: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.5em;
    width:320px;
}

#title ul>li{
    margin: 0 0 0.5em 0;
    padding-left: 0;
    list-style: none;
    background: none;
}

#title ul.playing{
    opacity: 0;
}


.tislides{
    height: 300px;
    width:1220px;
    border: none;
}

.noscript .tislides {overflow:hidden;width:1200px;height:350px;padding:0;margin:0;} /*width and height of a single slide */

.tisscontrols {
    width: 1200px;
    overflow: hidden;
    background: transparent;
}

.impact-graphic{
    position: relative;
    z-index: 0;
    margin-bottom: -49px;
    height: 400px;
    background: url(../video/video-01-fallback.png) no-repeat top center;
}

.lt-ie10 video{
    display: none;
}

.impact-graphic #title{
    position: absolute;
    top:0;
    z-index: 1;
}

.impact-graphic button{
    position: relative;
    z-index: 2;
}

.lt-ie9 .impact-graphic button{
    display: none;
}

.impact-graphic button#play{
    height:120px;
    width: 120px;
    position:absolute;
    z-index: 2;
    right:580px;
    top:130px;
    background: url('../img/icon-play.png');
    border:none;
    border-radius: 10px;
    transition: right 2.5s, top 2.5s, width 2.5s, height 2.5s;
    -webkit-transition: right .5s, top .5s, width .5s, height .5s; /* Safari */
}

.impact-graphic button#play.played{
    display: none;
}


.impact-graphic button#play2.playing{
    background: url('../img/icon-pause.png');
    background-size:40px 40px;
}

.impact-graphic button#play2{
    background: url('../img/icon-play.png');
    background-size:40px 40px;
    right:20px;
    bottom:20px;
    height:40px;
    width:40px;
    position: absolute;
    border:none;
    border-radius: 10px;
    z-index: 1;
    display: none;
}

.impact-graphic button#play2.played{
    display: inherit;
}


/* ==========================================================================
   Basic jQuery Slider
   ========================================================================== */

.ticom5 ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
.ticom5 li.bjqs-slide{position:absolute; display:none;}
.ticom5 ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
.ticom5 ul.bjqs-controls.v-centered li a{position:absolute;}
.ticom5 ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
.ticom5 ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
.ticom5 ol.bjqs-markers{list-style: none; padding: 0; margin: 40px 0 0 0 ; width:100%;}
.ticom5 ol.bjqs-markers.h-centered{text-align: center;}
.ticom5 ol.bjqs-markers li{display:inline;}
.ticom5 ol.bjqs-markers li a{display:inline-block;}
.ticom5 p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

ol.bjqs-markers li a{
    background: url(/assets/js/slideShow/img/counteroff.png) top left no-repeat;
    text-indent: -99999em;
    width: 9px;
    height: 9px;
    margin: 0 3px;
}

ol.bjqs-markers li.active-marker a{
    background: url(/assets/js/slideShow/img/counteron.png) top left no-repeat;
}


 ul li{
    list-style-type: none;
}

.ticom5 ol.bjqs-markers li{
    margin-left: 0;
    text-indent: 0;
}
.ticom5 ol.bjqs-markers li:before{
    content:none;
}

#feature {
	
    padding: 20px 80px;
    background: #FFF;
    margin-bottom: 80px;
    height:240px!important;
}

#feature .bjqs img{
    float: left;
}

#feature .bjqs div{
    position: relative;
    margin-left:220px;
    height: 200px;
}

ul li.bjqs-slide{
    margin: 0;
    padding: 0;
    background: none;
}

#feature .bjqs h3{
    margin: 0;
}

#feature .bjqs h4{
    margin-bottom: 0;
}

#feature .button.noborder{
    margin-bottom: 10px;
}

.ticom5 .bjqs-controls li{
    margin: 0;

}

.ticom5 .bjqs-controls li a{
    margin: 0;
    display: block;
    background: #CCC;
    background: rgba(0,0,0,0.2);
    height: 60px;
    width: 60px;
    line-height: 60px;
    color: #fff;
    text-align: center;
    -webkit-transition:background 0.3s;
    transition:background 0.3s;
}

.ticom5 .bjqs-controls li a:hover{
    background: #999;
    background: rgba(0,0,0,0.5);
    text-decoration: none;
}


/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs {
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 400;
    position: relative;
    z-index: 1;
    width: 1100px;
}

.tabs a, .tabs a:visited{
    font-size: 1.6em;
    font-weight: 400;
    display: inline-block;
    margin: 0 1px 0 0;
    background: #9fb0b3;/*old browsers*/
    background: rgba(0,0,0,0.3);/*modern browsers*/
    color: #FFF;
    padding: 10px 15px;
}

.tabs a:hover, .tabs a:active{
    background: #717d80;/*old browsers*/
    background: rgba(0,0,0,0.5);/*modern browsers*/
    color: #FFF;
    text-decoration: none;
}

#home .tabs a.home, #launchpads .tabs a.launchpads, #msp430 .tabs a.launchpads, #hercules .tabs a.launchpads, #c2000 .tabs a.launchpads, #tivac .tabs a.launchpads, #booster .tabs a.booster, #about .tabs a.about, #software .tabs a.software, #byob .tabs a.byob, #projects .tabs a.projects, #community .tabs a.community {
    background: #F5F5F5;/*old browsers*/
    background: rgba(255,255,255,0.9);/*modern browsers*/
    color: #C00;
    border-top:2px #C00 solid;
}



/* ==========================================================================
   sticky Launcher
   ========================================================================== */

#launcher{
    position: absolute;
    width:1220px;
    margin-left:-10px;
    padding: 10px;
    height:70px;
    background: transparent;
    background: rgba(255,255,255,0);
    box-shadow: 0 10px 10px rgba(0,0,0,0.0);
    z-index: 200;
    transition: all .5s;
    -webkit-transition: all .5s;
}

#launcher.byob, #launcher.projects{
    width: 1220px;
    height: 70px;
    text-align: center;
}

#launcher.byob:after, #launcher.projects:after{
    content: '';
    width: 1200px;
    height: 50px;
    background: #ddd;
    opacity: 0.5;
    position: absolute;
    top:10px;
    z-index: -1;
}

#launcher.sticky{
    position: fixed;
    top:0;
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    background: #FFF;
    background: rgba(255,255,255,1);
}


.launchpads .colorbar{
    padding-top: 70px;
}

#launcher a{
    background: #DDD;
    margin: 0;
    padding: 10px 10px 10px 60px;
    color: #444;
    line-height: 30px;
    width:400px;
    display: block;
    opacity: 0.5;
    transition: all .5s;
    -webkit-transition: all .5s;
}

#launcher.byob a, #launcher.projects a{
    width: auto;
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    color: #189;
}

#launcher.byob a.active, #launcher.projects a.active{
    background: #C8C8C8;
    background:rgba(0,0,0,0.05);
}


#launcher a:hover{
    color: #C00;
    text-decoration: none;
}

#launcher.byob a:hover, #launcher.projects a:hover{
    color: #C00;
    text-decoration: none;
    opacity: 1;
}

#launcher a:hover span {
    background: #189;
}

#launcher a.active{
    opacity: 1;
}

#launcher a.active span{
    background: #208186;
}

#top.content-area{
    padding-top: 0.1px;
}

#launcher a span{
    display: block;
    position: absolute;
    left:0px;
    top:0px;
    height:50px;
    width: 50px;
    background:#AAA;
    color: #FFF;
    text-align: center;
    line-height: 50px;
    font-size: 2em;
    transition: all .5s;
    -webkit-transition: all .5s;
}

/* ==========================================================================
   LaunchPad Color Bar
   ========================================================================== */

.ticom5 .colorbar h1, .ticom5 .colorbar h2, .ticom5 .colorbar h3, .ticom5 .colorbar h4, .ticom5 .colorbar .featurebox h3{
    margin: 0 0 0.5em 0;
}

.colorbar .c2,.colorbar .c3{
    padding: 0;
}

.colorbar .c2.msp430, .colorbar .c2.c2000, .colorbar .c2.tivac, .colorbar .c2.hercules, .colorbar .c2.launchpad, .colorbar .c3.msp430, .colorbar .c3.c2000, .colorbar .c3.tivac, .colorbar .c3.hercules, .colorbar .c3.launchpad{
    height: 240px;
    padding: 10px;
    display: block;
    overflow: hidden;
    position: relative;
}

.colorbar .c3.msp430, .colorbar .c3.c2000, .colorbar .c3.tivac, .colorbar .c3.hercules, .colorbar .c3.launchpad{
    padding: 20px;
}

.colorbar .c3.msp430, .colorbar .c3.c2000, .colorbar .c3.tivac, .colorbar .c3.hercules, .colorbar .c3.launchpad{
    height:320px;
}

.colorbar .msp430 h2, .colorbar .c2000 h2, .colorbar .tivac h2, .colorbar .hercules h2, .colorbar .launchpad h2{
    color: #FFF;
    opacity: 0.9;
    font-family: 'Roboto Condensed', 'Arial Narrow', arial, sans-serif;
    font-size: 1.3em;
    line-height: 1.2em;
    font-weight: 300;
}

.colorbar .c3.msp430 h2, .colorbar .c3.c2000 h2, .colorbar .c3.tivac h2, .colorbar .c3.hercules h2, .colorbar .c3.launchpad h2{
    font-size: 2em;
}


.colorbar a.msp430:hover, .colorbar a.c2000:hover, .colorbar a.tivac:hover, .colorbar a.hercules:hover, .colorbar a.launchpad:hover{
    text-decoration: none;
}

/* box backgrounds ========================================================== */



#msp430 .colorbar .c3.msp430{
    background: #178e91 url(../img/msp430-thumb-360.png) no-repeat center center; /* Old browsers */
    background: url(../img/msp430-thumb-360.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00bbb6 0%, #325e69 100%); /* FF3.6+ */
    background: url(../img/msp430-thumb-360.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00bbb6), color-stop(100%,#325e69)); /* Chrome,Safari4+ */
    background: url(../img/msp430-thumb-360.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/msp430-thumb-360.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Opera 12+ */
    background: url(../img/msp430-thumb-360.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* IE10+ */
    background: url(../img/msp430-thumb-360.png) no-repeat center center,radial-gradient(ellipse at center,  #00bbb6 0%,#325e69 100%); /* W3C */
}

.colorbar .msp430{
    background: #178e91 url(../img/launchpad-msp432-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/launchpad-msp432-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00bbb6 0%, #325e69 100%); /* FF3.6+ */
    background: url(../img/launchpad-msp432-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00bbb6), color-stop(100%,#325e69)); /* Chrome,Safari4+ */
    background: url(../img/launchpad-msp432-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/launchpad-msp432-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Opera 12+ */
    background: url(../img/launchpad-msp432-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* IE10+ */
    background: url(../img/launchpad-msp432-240.png) no-repeat center center,radial-gradient(ellipse at center,  #00bbb6 0%,#325e69 100%); /* W3C */
}


.colorbar .msp430.two{
    background: #197276 url(../img/msp430-4-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/msp430-4-thumb-240.png) no-repeat center center, -moz-radial-gradient(center, ellipse cover,  #039a97 0%, #2b5059 100%); /* FF3.6+ */
    background: url(../img/msp430-4-thumb-240.png) no-repeat center center, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#039a97), color-stop(100%,#2b5059)); /* Chrome,Safari4+ */
    background: url(../img/msp430-4-thumb-240.png) no-repeat center center, -webkit-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/msp430-4-thumb-240.png) no-repeat center center, -o-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Opera 12+ */
    background: url(../img/msp430-4-thumb-240.png) no-repeat center center, -ms-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* IE10+ */
    background: url(../img/msp430-4-thumb-240.png) no-repeat center center, radial-gradient(ellipse at center,  #039a97 0%,#2b5059 100%); /* W3C */
}


.colorbar .msp430.three{
    background: #197276 url(../img/msp430-bndl-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/msp430-bndl-thumb-240.png) no-repeat center center, -moz-radial-gradient(center, ellipse cover,  #039a97 0%, #2b5059 100%); /* FF3.6+ */
    background: url(../img/msp430-bndl-thumb-240.png) no-repeat center center, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#039a97), color-stop(100%,#2b5059)); /* Chrome,Safari4+ */
    background: url(../img/msp430-bndl-thumb-240.png)) no-repeat center center, -webkit-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/msp430-bndl-thumb-240.png) no-repeat center center, -o-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Opera 12+ */
    background: url(../img/msp430-bndl-thumb-240.png)) no-repeat center center, -ms-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* IE10+ */
    background: url(../img/msp430-bndl-thumb-240.png) no-repeat center center, radial-gradient(ellipse at center,  #039a97 0%,#2b5059 100%); /* W3C */
}



.colorbar .msp430.four{
    background: #126162 url(../img/msp430-2-thumb-360.png) no-repeat center center; /* Old browsers */
    background: url(../img/msp430-2-thumb-360.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00837f 0%, #234249 100%); /* FF3.6+ */
    background: url(../img/msp430-2-thumb-360.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00837f), color-stop(100%,#234249)); /* Chrome,Safari4+ */
    background: url(../img/msp430-2-thumb-360.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/msp430-2-thumb-360.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Opera 12+ */
    background: url(../img/msp430-2-thumb-360.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* IE10+ */
    background: url(../img/msp430-2-thumb-360.png) no-repeat center center,radial-gradient(ellipse at center,  #00837f 0%,#234249 100%); /* W3C */
}




.colorbar .msp430.five{
    background: #0f4b4d url(../img/msp430-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/msp430-thumb-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #006764 0%, #1b343a 100%); /* FF3.6+ */
    background: url(../img/msp430-thumb-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#006764), color-stop(100%,#1b343a)); /* Chrome,Safari4+ */
    background: url(../img/msp430-thumb-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/msp430-thumb-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* Opera 12+ */
    background: url(../img/msp430-thumb-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* IE10+ */
    background: url(../img/msp430-thumb-240.png) no-repeat center center,radial-gradient(ellipse at center,  #006764 0%,#1b343a 100%); /* W3C */
}



.colorbar .c2000{
    background: #197276 url(../img/c2000-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -moz-radial-gradient(center, ellipse cover,  #039a97 0%, #2b5059 100%); /* FF3.6+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#039a97), color-stop(100%,#2b5059)); /* Chrome,Safari4+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -webkit-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -o-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Opera 12+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -ms-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* IE10+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, radial-gradient(ellipse at center,  #039a97 0%,#2b5059 100%); /* W3C */
}

#c2000 .colorbar .c2.c2000{
    background: #178e91 url(../img/c2000-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/c2000-thumb-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00bbb6 0%, #325e69 100%); /* FF3.6+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00bbb6), color-stop(100%,#325e69)); /* Chrome,Safari4+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Opera 12+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* IE10+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center,radial-gradient(ellipse at center,  #00bbb6 0%,#325e69 100%); /* W3C */
}

#c2000 .colorbar .c2.c2000.two{
    background: #197276 url(../img/c2000-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -moz-radial-gradient(center, ellipse cover,  #039a97 0%, #2b5059 100%); /* FF3.6+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#039a97), color-stop(100%,#2b5059)); /* Chrome,Safari4+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -webkit-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -o-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Opera 12+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, -ms-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* IE10+ */
    background: url(../img/c2000-thumb-240.png) no-repeat center center, radial-gradient(ellipse at center,  #039a97 0%,#2b5059 100%); /* W3C */
}

#c2000 .colorbar .c2.c2000.three{
    background: #197276 url(../img/launchpad-c2000-f28069m-240-1.png) no-repeat center center; /* Old browsers */
    background: url(../img/launchpad-c2000-f28069m-240-1.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00837f 0%, #234249 100%); /* FF3.6+ */
    background: url(../img/launchpad-c2000-f28069m-240-1.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00837f), color-stop(100%,#234249)); /* Chrome,Safari4+ */
    background: url(../img/launchpad-c2000-f28069m-240-1.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/launchpad-c2000-f28069m-240-1.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Opera 12+ */
    background: url(../img/launchpad-c2000-f28069m-240-1.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* IE10+ */
    background: url(../img/launchpad-c2000-f28069m-240-1.png) no-repeat center center,radial-gradient(ellipse at center,  #00837f 0%,#234249 100%); /* W3C */
}

.colorbar .tivac{
    background: #126162 url(../img/tivac-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/tivac-thumb-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00837f 0%, #234249 100%); /* FF3.6+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00837f), color-stop(100%,#234249)); /* Chrome,Safari4+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Opera 12+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* IE10+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center,radial-gradient(ellipse at center,  #00837f 0%,#234249 100%); /* W3C */
}

#tivac .colorbar .c2.tivac.one{
    background: #178e91 url(../img/tivac-thumb-240-cc3200.png) no-repeat center center; /* Old browsers */
    background: url(../img/tivac-thumb-240-cc3200.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00bbb6 0%, #325e69 100%); /* FF3.6+ */
    background: url(../img/tivac-thumb-240-cc3200.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00bbb6), color-stop(100%,#325e69)); /* Chrome,Safari4+ */
    background: url(../img/tivac-thumb-240-cc3200.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/tivac-thumb-240-cc3200.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Opera 12+ */
    background: url(../img/tivac-thumb-240-cc3200.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* IE10+ */
    background: url(../img/tivac-thumb-240-cc3200.png) no-repeat center center,radial-gradient(ellipse at center,  #00bbb6 0%,#325e69 100%); /* W3C */
}

#tivac .colorbar .c2.tivac.two{
    background: #197276 url(../img/tivac-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/tivac-thumb-240.png) no-repeat center center, -moz-radial-gradient(center, ellipse cover,  #039a97 0%, #2b5059 100%); /* FF3.6+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#039a97), color-stop(100%,#2b5059)); /* Chrome,Safari4+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center, -webkit-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center, -o-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Opera 12+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center, -ms-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* IE10+ */
    background: url(../img/tivac-thumb-240.png) no-repeat center center, radial-gradient(ellipse at center,  #039a97 0%,#2b5059 100%); /* W3C */
}

#tivac .colorbar .c2.tivac.three{
    background: #197276 url(../img/tivac-2-thumb-360.png) no-repeat center center; /* Old browsers */
    background: url(../img/tivac-2-thumb-360.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00837f 0%, #234249 100%); /* FF3.6+ */
    background: url(../img/tivac-2-thumb-360.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00837f), color-stop(100%,#234249)); /* Chrome,Safari4+ */
    background: url(../img/tivac-2-thumb-360.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/tivac-2-thumb-360.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Opera 12+ */
    background: url(../img/tivac-2-thumb-360.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* IE10+ */
    background: url(../img/tivac-2-thumb-360.png) no-repeat center center,radial-gradient(ellipse at center,  #00837f 0%,#234249 100%); /* W3C */
}

#tivac .colorbar .c2.tivac.four{
    background: #0f4b4d url(../img/launchpad-cc3200mod-launchxl-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/launchpad-cc3200mod-launchxl-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #006764 0%, #1b343a 100%); /* FF3.6+ */
    background: url(../img/launchpad-cc3200mod-launchxl-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#006764), color-stop(100%,#1b343a)); /* Chrome,Safari4+ */
    background: url(../img/launchpad-cc3200mod-launchxl-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/launchpad-cc3200mod-launchxl-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* Opera 12+ */
    background: url(../img/launchpad-cc3200mod-launchxl-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* IE10+ */
    background: url(../img/launchpad-cc3200mod-launchxl-240.png) no-repeat center center,radial-gradient(ellipse at center,  #006764 0%,#1b343a 100%); /* W3C */
}

.colorbar .hercules{
    background: #178e91 url(../img/hercules-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/hercules-thumb-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00bbb6 0%, #325e69 100%); /* FF3.6+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00bbb6), color-stop(100%,#325e69)); /* Chrome,Safari4+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* Opera 12+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00bbb6 0%,#325e69 100%); /* IE10+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center,radial-gradient(ellipse at center,  #00bbb6 0%,#325e69 100%); /* W3C */
}

.colorbar .hercules.two{
    background: #197276 url(../img/hercules-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/hercules-thumb-240.png) no-repeat center center, -moz-radial-gradient(center, ellipse cover,  #039a97 0%, #2b5059 100%); /* FF3.6+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#039a97), color-stop(100%,#2b5059)); /* Chrome,Safari4+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center, -webkit-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center, -o-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* Opera 12+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center, -ms-radial-gradient(center, ellipse cover,  #039a97 0%,#2b5059 100%); /* IE10+ */
    background: url(../img/hercules-thumb-240.png) no-repeat center center, radial-gradient(ellipse at center,  #039a97 0%,#2b5059 100%); /* W3C */
}

.colorbar .hercules.four{
    background: #0f4b4d url(../img/hercules-rm46-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #006764 0%, #1b343a 100%); /* FF3.6+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#006764), color-stop(100%,#1b343a)); /* Chrome,Safari4+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* Opera 12+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #006764 0%,#1b343a 100%); /* IE10+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,radial-gradient(ellipse at center,  #006764 0%,#1b343a 100%); /* W3C */
}

.colorbar .hercules.three{
    background: #126162 url(../img/hercules-rm46-thumb-240.png) no-repeat center center; /* Old browsers */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #00837f 0%, #234249 100%); /* FF3.6+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00837f), color-stop(100%,#234249)); /* Chrome,Safari4+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* Opera 12+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #00837f 0%,#234249 100%); /* IE10+ */
    background: url(../img/hercules-rm46-thumb-240.png) no-repeat center center,radial-gradient(ellipse at center,  #00837f 0%,#234249 100%); /* W3C */
}




.colorbar .launchpad{
    background: #0a393b url(../img/launchpad-logo-240-white.png) no-repeat center center; /* Old browsers */
    background: url(../img/launchpad-logo-240-white.png) no-repeat center center,-moz-radial-gradient(center, ellipse cover,  #004a49 0%, #14262a 100%); /* FF3.6+ */
    background: url(../img/launchpad-logo-240-white.png) no-repeat center center,-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#004a49), color-stop(100%,#14262a)); /* Chrome,Safari4+ */
    background: url(../img/launchpad-logo-240-white.png) no-repeat center center,-webkit-radial-gradient(center, ellipse cover,  #004a49 0%,#14262a 100%); /* Chrome10+,Safari5.1+ */
    background: url(../img/launchpad-logo-240-white.png) no-repeat center center,-o-radial-gradient(center, ellipse cover,  #004a49 0%,#14262a 100%); /* Opera 12+ */
    background: url(../img/launchpad-logo-240-white.png) no-repeat center center,-ms-radial-gradient(center, ellipse cover,  #004a49 0%,#14262a 100%); /* IE10+ */
    background: url(../img/launchpad-logo-240-white.png) no-repeat center center,radial-gradient(ellipse at center,  #004a49 0%,#14262a 100%); /* W3C */
}

#msp430 .colorbar .c2.msp430{
    background-size: 200px 200px;
	
}


/* up arrow ================================================================= */ 


.colorbar .c2.msp430 div, .colorbar .c2.c2000 div, .colorbar .c2.tivac div, .colorbar .c2.hercules div, .colorbar .c2.launchpad div, .colorbar .c3.msp430 div, .colorbar .c3.c2000 div, .colorbar .c3.tivac div, .colorbar .c3.hercules div, .colorbar .c3.launchpad div{
    height: 170px;
    padding: 32px 10px 10px 10px;
    display: block;
    margin: -10px;
    background: url(../img/launchpad-color-bar-upvector.png) center 13px no-repeat;
    background-size: cover;
    position: absolute;
    top:192px;
    transition: top 0.5s, opacity 0.5s;
    opacity:0.5;
    width: 100%;
}

.colorbar .c3.msp430 div, .colorbar .c3.c2000 div, .colorbar .c3.tivac div, .colorbar .c3.hercules div, .colorbar .c3.launchpad div{
    margin: -20px;
    padding: 32px 20px 20px 20px;
    height: 170px;
    top:282px;
}

.colorbar .c2.msp430 div h3, .colorbar .c2.c2000 div h3, .colorbar .c2.tivac div h3, .colorbar .c2.hercules div h3, .colorbar .c2.launchpad div h3, .colorbar .c3.msp430 div h3, .colorbar .c3.c2000 div h3, .colorbar .c3.tivac div h3, .colorbar .c3.hercules div h3, .colorbar .c3.launchpad div h3{
    color:#444;
    text-align: center;
    font-size: 1.2em;
    font-family: 'Roboto Condensed', 'Arial Narrow', arial, sans-serif;
    font-weight: 300;
}

.colorbar .c2.msp430:hover div h3, .colorbar .c2.c2000:hover div h3, .colorbar .c2.tivac:hover div h3, .colorbar .c2.hercules:hover div h3, .colorbar .c2.launchpad:hover div h3, .colorbar .c3.msp430:hover div h3, .colorbar .c3.c2000:hover div h3, .colorbar .c3.tivac:hover div h3, .colorbar .c3.hercules:hover div h3, .colorbar .c3.launchpad:hover div h3{
    color:#0BC;
}

.colorbar a.c2.tivac div{
    top: 192px;
    height: 200px;
}

.colorbar a.c2.tivac:hover div{
    top: 50px;
    opacity: 0.9;
}

.colorbar a.c2.msp430:hover div, .colorbar a.c2.c2000:hover div, .colorbar a.c2.hercules:hover div, .colorbar a.c2.launchpad:hover div, .colorbar a.c3.msp430:hover div, .colorbar a.c3.c2000:hover div, .colorbar a.c3.tivac:hover div, .colorbar a.c3.hercules:hover div, .colorbar a.c3.launchpad:hover div{
    top:80px;
    opacity: 0.9;
}

.colorbar a.c3.msp430:hover div, .colorbar a.c3.c2000:hover div, .colorbar a.c3.tivac:hover div, .colorbar a.c3.hercules:hover div, .colorbar a.c3.launchpad:hover div{
    top:170px;
}

/* animation ================================================================ */ 

@keyframes pulse {
  0% {
    padding: 0 10px 0 0;
  }
  100% {
    padding: 0 12px 0 0;
  }
}

@-webkit-keyframes pulse {
  0% {
    padding: 0 10px 0 0;
  }
  100% {
    padding: 0 12px 0 0;
  }
}

p.more{
    background: url(/assets/images/iconMore.png) no-repeat 100% 60%;
    background-image: url(/assets/images/iconMore.svg), none;
    width: auto;
    padding: 0 10px 0 0;
    display: inline-block;
    animation-name: pulse;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: pulse;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    position: absolute;
    bottom: 0px
}

.c3 p.more{
    bottom: 10px;
}

a.c2000 p, a.tivac p, a.hercules p, a.launchpad p{
    color: #444;
    font-size: 0.9em;
    line-height: 1.3em;
    widows: 2;
    orphans: 2;
}

a.msp430 p {
    color: #444;
    font-size: 0.8em;
    line-height: 1.3em;
    widows: 2;
    orphans: 2;
}

a.msp430:hover p.more, a.c2000:hover p.more, a.tivac:hover p.more, a.hercules:hover p.more, a.launchpad:hover p.more{
    color: #189;
}

/* colorbar secondary nav =================================================== */ 
.colorbar .nav{
    position: absolute;
    z-index: 1;
}

.colorbar .nav a{
    display: block;
    padding: 10px;
    height: 80px;
    position: relative;
    background-image: none;
    -webkit-transition:all .2s;
    background-color: #0f4b4d;
    width:240px;
    background-image: -moz-radial-gradient(center bottom, ellipse farthest-side,  #006764 0%, #1b343a 100%); /* FF3.6+ */
    background-image: -webkit-gradient(radial, center bottom, 0px, center center, 100%, color-stop(0%,#006764), color-stop(100%,#1b343a)); /* Chrome,Safari4+ */
    background-image: -webkit-radial-gradient(center bottom, ellipse farthest-side,  #006764 0%,#1b343a 100%); /* Chrome10+,Safari5.1+ */
    background-image:-o-radial-gradient(center bottom, ellipse farthest-side,  #006764 0%,#1b343a 100%); /* Opera 11.10+ */
    background-image: -ms-radial-gradient(center bottom, ellipse farthest-side,  #006764 0%,#1b343a 100%); /* IE10+ */
    background-image: radial-gradient( farthest-side at center bottom, #006764 0%,#1b343a 100%); /* W3C */
}

.colorbar .nav a:hover, .colorbar.msp430 .nav a.msp430, .colorbar.c2000 .nav a.c2000, .colorbar.tivac .nav a.tivac,  .colorbar.hercules .nav a.hercules{
    opacity: 1;
    background-color: #126162;
    background-image: -moz-radial-gradient(center bottom, ellipse farthest-side,  #00837f 0%, #234249 100%); /* FF3.6+ */
    background-image: -webkit-gradient(radial, center bottom, 0px, center center, 100%, color-stop(0%,#00837f), color-stop(100%,#234249)); /* Chrome,Safari4+ */
    background-image: -webkit-radial-gradient(center bottom, ellipse farthest-side,  #00837f 0%,#234249 100%); /* Chrome10+,Safari5.1+ */
    background-image:-o-radial-gradient(center bottom, ellipse farthest-side,  #00837f 0%,#234249 100%); /* Opera 11.10+ */
    background-image: -ms-radial-gradient(center bottom, ellipse farthest-side,  #00837f 0%,#234249 100%); /* IE10+ */
    background-image: radial-gradient( farthest-side at center bottom, #00837f 0%,#234249 100%); /* W3C */
}

#msp430 .colorbar .nav a.msp430, #c2000 .colorbar .nav a.c2000, #tivac .colorbar .nav a.tivac,  #hercules .colorbar .nav a.hercules{
    cursor: default;
    opacity: 1;
    background-color: #178e91;
    background-image: -moz-radial-gradient(center bottom, ellipse farthest-side,  #00bbb6 0%, #325e69 100%); /* FF3.6+ */
    background-image: -webkit-gradient(radial, center bottom, 0px, center center, 100%, color-stop(0%,#00bbb6), color-stop(100%,#325e69)); /* Chrome,Safari4+ */
    background-image: -webkit-radial-gradient(center bottom, ellipse farthest-side,  #00bbb6 0%,#325e69 100%); /* Chrome10+,Safari5.1+ */
    background-image:-o-radial-gradient(center bottom, ellipse farthest-side,  #00bbb6 0%,#325e69 100%); /* Opera 11.10+ */
    background-image: -ms-radial-gradient(center bottom, ellipse farthest-side,  #00bbb6 0%,#325e69 100%); /* IE10+ */
    background-image: radial-gradient( farthest-side at center bottom, #00bbb6 0%,#325e69 100%); /* W3C */
}

.colorbar.msp430 .nav a.msp430 h2, .colorbar.c2000 .nav a.c2000 h2, .colorbar.tivac .nav a.tivac h2,  .colorbar.hercules .nav a.hercules h2{
    opacity: 1;
}

.colorbar .nav a:hover{
    opacity: 1;
}

.colorbar .nav a:hover:after{
   border-left: 20px solid rgba(255,255,255,1);
}

/* side arrow =============================================================== */ 
.colorbar .nav a:after{
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    top:20px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #FFF;
    border-left: 20px solid rgba(255,255,255,0.2);
}

.colorbar.msp430 .nav a.msp430:after, .colorbar.c2000 .nav a.c2000:after, .colorbar.tivac .nav a.tivac:after,  .colorbar.hercules .nav a.hercules:after{
    border-left: 20px solid rgba(255,255,255,.7);
}

.colorbar.msp430 .nav a.msp430:hover:after, .colorbar.c2000 .nav a.c2000:hover:after, .colorbar.tivac .nav a.tivac:hover:after,  .colorbar.hercules .nav a.hercules:hover:after{
    border-left: 20px solid rgba(255,255,255,.7);
}



/* colorbar secondary nav =================================================== */ 

@-webkit-keyframes arrow {
  0% {
    right:20px;
  }
  100% {
   right:25px;
  }
}

.colorbar .nav a:hover:after{
    animation-name: arrow;
    animation-duration: .35s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: arrow;
    -webkit-animation-duration: .35s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

.colorbar.msp430 .nav a.msp430:hover:after, .colorbar.c2000 .nav a.c2000:hover:after, .colorbar.tivac .nav a.tivac:hover:after,  .colorbar.hercules .nav a.hercules:hover:after{
    animation-name: none;
    animation-duration: 0;
    animation-iteration-count: none;
    animation-direction: none;
    animation-timing-function: none;
    -webkit-animation-name: none;
    -webkit-animation-duration: none;
    -webkit-animation-iteration-count: none;
    -webkit-animation-direction: none;
    -webkit-animation-timing-function: none;
}


/* ==========================================================================
   promo area
   ========================================================================== */
.promo-area{
    padding-top: 10px;
}

.promo-area .button{
    margin-left: 10px;
}



.promo-area .featurebox{
	width:31.666667%;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background: #DDD;
    background: rgba(0,0,0,0.1);
    padding: 0;
    margin:10px;
}

.promo-area a[title=Twitter], .promo-area a[title=Facebook], .promo-area a[title='43oh'], .promo-area a[title=Energia], .promo-area a[title=e2e]{
    width: 50%;
    float: left;
    padding: 5px;
}



/* ==========================================================================
   widget Area
   ========================================================================== */

.rssarea{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
}

.lt-ie10 .rssarea{
    display: table;
    border-spacing:20px;
    margin: 0 -20px;
}

.lt-ie10 .rssarea .rsswidget{
    display: table-cell;
    float: none;
    width: 50%;
}

.rsswidget h2 a, .rsswidget h2 a:visited{
    color: #FFF;
}
 .rsswidget h2{
    background: #208186;
    color: #FFF;
    display: block;
    margin:0 -30px .5em -30px;
    padding: 10px 10px 10px 30px;
}

.rsswidget h2 a:hover{
    color: #FFF;
}

.rsswidget h3{
    margin: 0.5em 0 0.25em 0;
}

.widget-panel-bottom{
    border-bottom: 1px dotted #999;
    margin: 1em 0 0 0;
}

.widget-panel-bottom a{
    margin: 0 0 1em 0;
}

.table-wrapper{
    display:table;
    height: 100%;
}

.table-wrapper .row:before{
    content: none;
    display: inline;
}


div.rsswidget{
    padding: 0 30px 30px 30px;
}


.rsswidget{
    line-height: 1.5em;
    background: #fff;
    padding-bottom:30px;
}

.rsswidget ul{
    padding: 0;
    margin: 0;
}

.rsswidget img.launchyourdesign{
    margin: 20px auto 0 auto;
    display: block;
}

.rsswidget em{
    color:#C00;
    font-style: normal;
}

/* ==========================================================================
   Accordion Styles
   ========================================================================== */
#accordion{
    margin: 0 0 30px 0;
}

#accordion div{
    position: relative;
}

#accordion h3{
    background: #D9D9D9; /* Old browsers */
    background: -moz-linear-gradient(top,  #f2f2f2 0%, #d1d1d1 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(99%,#d1d1d1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f2f2f2 0%,#d1d1d1 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f2f2f2 0%,#d1d1d1 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f2f2f2 0%,#d1d1d1 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #f2f2f2 0%,#d1d1d1 99%); /* W3C */
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 1.1em;
    color: #189;
    border-top:1px #bbb solid;
    border-bottom:1px #bbb solid;
    cursor: pointer;
    margin:0 0 -1px 0;
    text-indent: 16px;
    z-index: 2;
    position: relative;
    line-height: 34px;
    text-indent: 44px;
    padding: 0;
}

#accordion h3:hover{
    background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 100%); /* W3C */
    border-top:1px #999 solid;
    border-bottom:1px #999 solid;
    z-index: 3;
    }


#accordion h3:before{
    content:'+';
    position: absolute;
    display: inline-block;
    left: 0;
    height: 34px;
    line-height:34px; 
    width:34px;
    text-align: center;
    font-size: 1.3em;
    color:#fff;
    text-indent: 0;
    background: #b2b2b2; /* Old browsers */
    background: -moz-linear-gradient(top,  #d8d8d8 1%, #b2b2b2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#d8d8d8), color-stop(100%,#b2b2b2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d8d8d8 1%,#b2b2b2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d8d8d8 1%,#b2b2b2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d8d8d8 1%,#b2b2b2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d8d8d8 1%,#b2b2b2 100%); /* W3C */
}

#accordion h3:hover:before{
    background: #7f7f7f; /* Old browsers */
    background: -moz-linear-gradient(top,  #b2b2b2 0%, #7f7f7f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#7f7f7f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b2b2b2 0%,#7f7f7f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b2b2b2 0%,#7f7f7f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b2b2b2 0%,#7f7f7f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b2b2b2 0%,#7f7f7f 100%); /* W3C */
}

#accordion h3.active:before{
    content:'\2013';
}

#accordion div{
    overflow: hidden;
     max-height: 0;
}

#accordion div.active{
    max-height: 600px;
}


#accordion h3.last, #accordion h3.active{
    border-bottom:1px #bbb solid;
}

#accordion h3.last:hover, #accordion h3.active:hover{
    border-bottom:1px #999 solid;
}

#accordion td:nth-child(1){
    background:#cedadd;
}

#accordion td:nth-child(2){
    background:#c6cfd1;
}

#accordion td:nth-child(3){
    background:#c0cacc;
}

#accordion td:nth-child(4){
    background:#bac2c4;
}

#accordion td:nth-child(5){
    background:#b2bbbd;
}

#accordion .c10{
    float: none;
}

#accordion table{
    width: 100%;
    clear: both;
    margin-bottom: -1px;
}

#accordion td{
    width: 50%;
    padding: 10px;
    vertical-align: top;
    color: #333;
    background: #cedadd;
}

#accordion tr{
    border-bottom: 1px dotted #999;
}

#launchpads #accordion td{
    width: 20%;
}

#msp430 #accordion td{
    width: 20%;
}

#hercules #accordion td{
    width: 25%;
}

#tivac #accordion td{
    width: 25%;
}

#c2000 #accordion td{
    width: 33.33%;
}

#accordion.c1, #accordion.c2, #accordion.c3, #accordion.c4, #accordion.c5, #accordion.c6{
    padding: 0;
}

#accordion .c2{
    padding: 10px;
}

#price td{
    vertical-align: middle;
    text-align: right;
    font-size: 1.4em;
    line-height: 1em;
}

#price td .button{
    text-align: center;
    font-size: .714em;
    margin-left: 10px;
}

/* ==========================================================================
   top promo Styles
   ========================================================================== */

aside.promo, aside#contents{
    background: #fff;
    padding: 30px;
    border-radius: 10px;
}

aside#contents{
    font-size: 0.9em;
    padding: 20px;
}

aside.promo h3, aside#contents h3{
    margin-top: 0;
}

/* ==========================================================================
   launchpads Section Styles
   ========================================================================== */

.content .c4, .content .c3, .content .c6, .content .c8, .content h2 {
    padding: 30px;
}

.content .c12{
    padding: 0 30px;
}

#logos{
    text-align: center;
}

#logos img{
    display: inline-block;
}

/* ==========================================================================
   Energia Section Styles
   ========================================================================== */
   
.energia .c3{width:33.333%;}

/* ==========================================================================
   Software Section Styles
   ========================================================================== */

.third-party{
    text-align: center;
}

.third-party img{
    display: inline-block;
    margin: 0 20px;
}

.softwareandtools .c3{width:33.333%;}

/* ==========================================================================
   project Zero Styles
   ========================================================================== */

.content-wrapper-master{
    width:100%;
    overflow:hidden;
}

.content-slider{
    width:200%;
}


.content-wrapper-one, .content-wrapper-two{
    width:50%;
    float:left;
    position: relative;
    transition:all .5s;
	padding-left:20px;
}


.content-wrapper-one {
    margin-left:-50%;
    max-height: 0;
    overflow: hidden;
}


.content-wrapper-one.active {
    margin-left:0%;
    max-height: 100000px;
	padding-left:20px;
}

#launcher.zero a{
    width:300px;
}

.content-wrapper-two.pdfimg img{
    max-width: 75%;
}

.project0 a{
    display: block;
}

/* ==========================================================================
   about Section Styles
   ========================================================================== */

.answer { 
    float: left; 
    color: #C00; 
    font-size: 2.5em; 
    line-height: .8em; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: 'HelveticaNeueW01-45Ligh', arial, sans-serif;
}

#about .c3 img{
    position: absolute;
}
#about .c3 img.ee{
    position: absolute;
    margin-top: -100px;
}

/* ==========================================================================
   BoosterPack Section Styles
   ========================================================================== */

#booster-filter{

}

#booster-filter h4{
    margin: 0 0 0.1em 0;
}

#booster-filter select{
    margin: 0 0 1em 0;
    width: 100%;
}

#booster-filter input{
    margin: 0.5em 0 1em 0;
}

#boosterSelect{
    min-height: 385px;
    height: auto!important;
}

#boosterSelect .animate{
    float: left;
    width:0px;
    height:0px;
    margin: 0px;
    opacity: 0;
    overflow: hidden;
    background: #fff;
    padding: 0px;
    box-shadow: 3px 3px 10px #CCC;
    -webkit-transition: all .5s ease-out; 
    transition: all .5s ease-out;
}

#boosterSelect .animate.active{
    width:200px;
    padding: 20px;
    margin: 10px;
    height:390px;
    opacity: 1;
}

#boosterSelect .animate p, #boosterSelect .animate h4{
    width: 160px;
}

#boosterSelect p.ti{
    background: url(../img/ti-bug.png) left 3px no-repeat ;
    background-image: url(../img/ti-bug.svg),none ;
    text-indent: 20px
}

.no-results{
    height: 365px;
    display: none;
    position: absolute;
}

.no-results.active{
    display: block;
}

#boosterSelect .animate img{
    margin: -20px -20px 20px -20px;
    width:200px;
    max-width: inherit;
}

.animate.dupe{
    display:none;
}

.animate h4{
    font-weight: 600;
    font-family: 'Open Sans', arial, sans-serif;
    font-size: .9em;
    margin: 0 0 .5em 0;
}

.animate p{
    font-weight: 400;
    font-family: 'Open Sans', arial, sans-serif;
    font-size: .9em;
    margin: 0 0 .5em 0;
}

.animate a.button.noborder{
    font-size: .9em;
    margin: 0 0 .5em 0;
    padding:0;
}

.animate a.button.noborder span{
    padding:0 1em 0 0;
}
.animate a.button.noborder.cart{
    padding:0 0 0 1.4em;
}

.c7.packs{
    padding: 0;
    overflow: hidden;
}

/* ==========================================================================
   BYOB Section Styles
   ========================================================================== */
#design h3{
    margin-top: 1.5em;
}

.design1 img{
    padding: 10px;
}

.design2 img{
    padding: 20px 0;
}

.design2 img.rocket{
    width: 50%;
}

.design1 img.cc{
    float: left;
    padding: 0;
}

h4.cc{
    line-height: 31px; margin-left: 98px;
}

.c10 .c4{
    width: 30%;
    margin: 10px 1.5% 10px 1.5%;
    padding: 0;
}

.c10 .c3{
    width: 22%;
    margin: 10px 1.5% 10px 1.5%;
    padding: 0;
}

#designcollab .c4 img{
    display: block;
    margin: 0 0 20px 0;
}

.challenge img{
    float: left;
    margin-right: 20px;
}
.challenge a{
    line-height:2em;
}

/* pinout graphic =========================================================== */ 

.legend .c4, .legend aside{
    width: 33.3333%
}

.legend .c4{
    margin: 0;
    padding: 0 20px 0 0;
}

.legend aside.c4{
    padding: 10px;
    background: #ccc;
    background: rgba(0,0,0,0.1);
    border-radius: 5px;
}

.legend h5{
    margin: 0 0 .5em 0;
    display: inline-block;
    border: #444 1px solid;
    border-radius: 5px;
    padding: 0 10px;
}

.legend h5.pin{
    background: #fff;
}

.legend h5.gpio, .legend h5.interupt{
    background: #9dbeff;
}

.legend h5.i2c{
    background: #8eff8b;
}

.legend p{
    font-size: .9em;
}


/* ==========================================================================
   Launchpad Page styles
   ========================================================================== */

/* upverter tool ++========================================================== */

.eda_tool{
    margin: 1em 0;
}

.lt-ie9 .eda_tool, p.upverter{
    visibility: hidden;
    display: none;
}

.lt-ie9 p.upverter{
    visibility: visible;
    display: block;
}

/* ==========================================================================
   Community Page styles
   ========================================================================== */

.social-community img{
    width:40px;
    padding: 5px;
}

.social-community a{
    display: block;

}


/* ==========================================================================
   Footer Styles
   ========================================================================== */

 /* social footer =========================================================== */

.content-area .social-footer{
    text-align: center;
    margin: 0 0 30px 0;
}

.content-area .social-footer img{
    width: 60px;
    margin: 0 10px;
}

 /* ti footer =============================================================== */

#tiFooter{
    background: #FFF;
}

#tiFooter .container{
    padding: 0 20px;
    width:1220px;
    margin: 0 auto;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}