.grnbutton {
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  color: #ffffff;
  background: #3fa535;
  padding: 5px;
  margin-top: 20px; margin-bottom: 20px;
  display: inline-block;
}

.grnbutton:hover {
  background: #3fa535;
  background-image: -webkit-linear-gradient(top, #3fa535, #318528);
  background-image: -moz-linear-gradient(top, #3fa535, #318528);
  background-image: -ms-linear-gradient(top, #3fa535, #318528);
  background-image: -o-linear-gradient(top, #3fa535, #318528);
  background-image: linear-gradient(to bottom, #3fa535, #318528);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3fa535', endColorstr='#318528',GradientType=0);
}

.grnbutton a {color: #ffffff; font-weight: bold; font-size: 18px; text-decoration: underline; cursor: auto; text-align: center; padding: 10px 20px 10px 20px;}
.tb100, .tb95, .tb80, .tb60, .tb50, .tb40, .tb30, .tb20 {height:auto; text-align: center; margin-bottom: 25px;}

.tb100 {width:100%;}
.tb95 {width:95%;}
.tb80 {width:80%;}
.tb60 {width:60%;}
.tb50 {width:50%;}
.tb40 {width:40%;}
.tb30 {width:30%;}
.tb20 {width:20%;}

.tabletitle {text-align: center; padding: 0.2rem;}

.videoleft {width:45%; float:left; margin-bottom: 30px; clear:both;}
.videoright {width:45%; float:right; margin-bottom: 30px;}
.videoleftplist {float:left; margin: 0; line-height: 20px; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; text-align: center;}

.videoleft p , .videoright p  { margin: 0;  clear: left; line-height: 20px; border-bottom: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; text-align: center; padding: 10px; margin-top: -10px;}
.videoleft p strong, .videoright p strong { font-weight:bold; }


.collapsible { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
.collapsible .collection { margin: 0; border: none;}
.collapsible {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin: 0.5rem 0 1rem 0;
  padding: 0px;
  list-style-type: none;
}

.collapsible-header {
  display: block;
  cursor: pointer;
  min-height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.collapsible-header i {
  width: 100%;
  font-size: 1.6rem;
  line-height: 3rem;
  display: block;
  float: left;
  text-align: center;
  margin-right: 1rem;
  list-style-type: none;
}
div.collapsible-header > p { margin:0px;}

.collapsible-body {
  display: none;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  list-style-type: none;
  padding-bottom: 5px;
  padding-top: 5px;
}

.collapsible-body p {
  margin: 0;
  padding: 0;
}

 div.collapsible-body  ul {
	padding-left: 28px;
    line-height: 18px;
    font-size: 14px;
 }
 
div.collapsible-body  ul li {
    padding-bottom: 5px;
    padding-top: 5px;
}

#twitter, #youtube, #linkedin, #googleplus { width:22%; height:auto;}

@media only all and (max-width: 80em) {
.tb50, .tb40, .tb30, .tb20 { width: 50%; }
#search-wiki {font-size: 30px; margin: 0px; margin-top: 12px;}
}

@media only all and (max-width: 47.938em) {
.grnbutton { width:50%; text-align: center;}
.tb100, .tb95, .tb80, .tb60, .tb50, .tb40, .tb30, .tb20 { width: 90%; }
.videoright, .videoleft {width: 90%; display:block; float:none; margin:0; margin-bottom: 25px; margin-top: 25px;}
}

@media only all and (max-width: 20em) {
.grnbutton { width:100%; text-align: center;}
.tb100, .tb95, .tb80, .tb60, .tb50, .tb40, .tb30, .tb20 { width: 100%; font-size: 12px; }
.videoright, .videoleft {width: 100%; display:block; float:none; margin:0; margin-bottom: 25px; margin-top: 25px;}
.videoleft p , .videoright p  {font-size: 12px;}
}

	/* TR home css */
.introbox {padding-top:10px; padding-bottom:10px; margin-bottom: 25px; border-bottom:solid 1px #F0F0F0; height:auto; width:100%; display:block; float:left; }
.introbox .introtxt { float: left; height: auto; width: 70%; display:block; float:left; font-size:16px;}
div.trptyltdlogo { display:block;}
.navmenubox { display: block; height: auto; width: 100%; margin-top: 20px;}

.videoleft, .videoright {width: 48%;}
#search-wiki { margin:0px; margin-top: 0px;}
#feature-videos {margin-top:0px}

	/* TR home Side Menu Box */
	
div.sidememu-box { float: left; height: auto; width: 100%; margin-bottom: 8px; margin-top: 0px; margin-right: 0px; margin-left: 0px; display: block; background: rgb(27,50,130); /* Old browsers */ background: -moz-linear-gradient(left,  rgba(27,50,130,1) 0%, rgba(3,77,162,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(27,50,130,1)), color-stop(100%,rgba(3,77,162,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left,  rgba(27,50,130,1) 0%,rgba(3,77,162,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left,  rgba(27,50,130,1) 0%,rgba(3,77,162,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left,  rgba(27,50,130,1) 0%,rgba(3,77,162,1) 100%); /* IE10+ */ background: linear-gradient(to right,  rgba(27,50,130,1) 0%,rgba(3,77,162,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b3282', endColorstr='#034da2',GradientType=1 ); /* IE6-9 */}
div.sidememu-box a:link, .sidememu-box a:visited { font-size: 18px; font-weight: 400;color: #FFF; text-decoration: none; padding: 12px; display: block;}
div.sidememu-box a:hover { color: #FFF; text-decoration: underline; cursor: pointer; padding: 12px; display: block; }

.left-navmenu { display: block; float: left; height: auto; width: 70%; }
.right-box { display: block; float: right; height: auto; width: 30%; border: 1px solid #CCC; text-align: center; vertical-align: middle; }
.green-boxlable { color: #FFF; background-color: #690; margin: 0px; padding: 10px; height: auto; display: block; font-weight: bold; }
.social-media-lable { display: block; float: left; margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; width: 100%; height: auto; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; }
.smtext-lable { float: left; height: auto; width: 65%; margin-right: 15px; margin-left: 15px; text-align: center; vertical-align: middle; }
.social-media-logos { text-align: center; vertical-align: middle; display: block; float: right; height: auto; width: 29%; }
.videosbox {display: block; float: left; height: auto; width: 100%;}

.left-videobox { text-align: center; vertical-align: middle; display: block; float: left; height: auto; width: 48%; padding-top: 10px; padding-bottom: 10px;}
.right-videobox { text-align: center; vertical-align: middle; display: block; float: right; height: auto; width: 48%; padding-top: 10px; padding-bottom: 10px;}
.newfeatures-box { text-align: center; vertical-align: middle; display: block; float: left; height: auto; width: 100%; }
.newproduct-leftbox { text-align: left; vertical-align: middle; display: block; float: left; height: auto; width: 69%; border: 1px solid #CCC; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; }
.newproduct-imgbox { display: block; float: left; height: auto; width: 30%; padding-right: 15px; }
.newproduct-txtbox { float: right; height: auto; width: 65%; }
.clearspace {clear:left;}

@media only all and (max-width: 800px) {
div.left-navmenu {width:100%;}
.videoleft, .videoright { width: 100%;}
div.sidememu-box { margin-right: 6px; margin-left: 6px;}
#search-wiki {font-size: 30px; margin: 0px; margin-top: 12px;}
}

@media screen and (max-width:510px) {
div.trptyltdlogo {display:none;}
.introbox .introtxt {width:100%;}

.right-box, .left-navmenu, .navmenubox {width:100%;}
div.sidememu-box {height: auto; width: 100%; margin-right: 0%; margin-left: 0%;}
}

@media screen and (max-width:350px) {
div.sidememu-box {height: 50px; width: 100%; margin-right: 0%; margin-left: 0%; font-weight: bold; line-height: 20px;}
.introbox .introtxt {font-size: 14px; width: 100%;}
.smtext-lable {width:100%; margin-right: 0px; margin-left: 0px; font-size: 14px;}
.social-media-logos { float: left; height: auto; width: 100%; font-size:14px; padding-bottom:10px; padding-top: 10px;}
}