body{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }
h1{font-family:Raleway, sans-serif; font-size:36px; font-weight:500; }
h2{font-family:Raleway, sans-serif; font-size:30px; font-weight:500; }
h3{font-family:Raleway, sans-serif; font-size:26px; font-weight:500; }
h4{font-family:Raleway, sans-serif; font-size:22px; font-weight:500; }
h5{font-family:Raleway, sans-serif; font-size:18px; font-weight:500; }
h6{font-family:Raleway, sans-serif; font-size:16px; font-weight:500; }
p{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }
span{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }
ul{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }
li{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }
ol{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }
div{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }
td{font-family:Raleway, sans-serif; font-size:14px; font-weight:500; }

img {max-width:100%}

.manufactureContainer 
{
  width:95%;
  height:auto;
  padding:8px 5px 5px 5px;
  border:0px solid #ff0000;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.manufacureBox 
{
  position: relative; 
  float: none; 
  display: inline-block; 
  height: 120px; 
  width: 170px; 
  padding: 10px; 
  margin: 5px 5px; 
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.manufacureBox .image { position:relative; text-align:center; border:0px solid #000000; }
.manufacureBox .image img { max-height:120px; vertical-align: top; z-index:9; }
.manufacureBox .description { position:absolute; top:110px; left:-5px; width:156px; height:26px; z-index:5; background:url(/components/com_showroom/assets/images/sticker_down_active.png); text-align:left; }
.manufacureBox .description_description { text-align:left; padding-left: 5px; line-height: 26px; white-space: nowrap; }

#structContainer { display:inline-block; line-height:32px; margin-left: 9px;}
#structSearchButton  { display:inline-block;vertical-align:top;width:32px;height:32px;cursor:pointer;background:url(/components/com_showroom/assets/images/searchbutton.png);margin-left:10px;}
#structSearchContainer { display:inline-block;vertical-align:top;width:190px;height:32px;cursor:pointer;border-left:1px solid #ccc;border-right:1px solid #ccc; }
#structTypeContainer { display:inline-block;vertical-align:top;width:121px;height:32px;cursor:pointer;border-left:1px solid #ccc;border-right:1px solid #ccc;margin-left:10px; }
#structBrandContainer { display:inline-block;vertical-align:top;width:121px;height:32px;cursor:pointer;border-left:1px solid #ccc;border-right:1px solid #ccc;margin-left:10px;}
#structCategoryContainer { display:inline-block;vertical-align:top;width:123px;height:32px;cursor:pointer;border-left:1px solid #ccc;border-right:1px solid #ccc;margin-left:10px;}
#structSubcategoryContainer { display:inline-block;vertical-align:top;width:121px;height:32px;cursor:pointer;border-left:1px solid #ccc;border-right:1px solid #ccc;margin-left:10px;}

#typeContainer { display: block; position: relative; margin:0px 0px 0px -1px;float: left; width:188px; background:#fff;z-index:10;border:1px solid #ccc;}
#brandContainer { display: block; position: relative; margin:0px 0px 0px -1px;float: left; width:564px; background:#fff;z-index:10;border:1px solid #ccc;}
#categoryContainer { display: block; position: relative; margin:0px 0px 0px -1px;float: left; width:376px; background:#fff;z-index:10;border:1px solid #ccc;}
#subcategoryContainer { display: block; position: relative; margin:0px 0px 0px -1px;float: left; width:376px; background:#fff;z-index:10;border:1px solid #ccc;}
#downloadPanelContainer { display: block; position: absolute; margin:-1px 0px 0px 0px;padding:10px 10px 10px 10px;float:left;width:230px; background:#fff;z-index:10;border:1px solid #ccc;}

.smallDownloadPanelContainer { display: block; position: absolute; bottom:0px;right:-14px;margin:-1px 0px 0px 0px;padding:2px 5px 2px 5px;float:left;width:185px; background:#fff;z-index:10;border:1px solid #ccc;}
.smallDownloadPanelContainer2 { display: block; position: absolute; bottom:26px;right:-3px;margin:-1px 0px 0px 0px;padding:2px 5px 2px 5px;float:left;width:185px; background:#fff;z-index:10;border:1px solid #ccc;}

#typeContainer label,
#brandContainer label,
#categoryContainer label,
#subcategoryContainer label,
#typeTitle label,
#brandTitle label,
#categoryTitle label,
#subcategoryTitle label { font-size:13px;}

#structContainer .back { float:left; display:inline-block; margin:0px; width:43px; height:32px; line-height:32px; vertical-align:top; text-align:center; }
#structContainer .back img { vertical-align:top; }

#structSearchContainer input 
{
  vertical-align:top;
  margin-right:0px 30px 0px 0px;
  width:100%;
  height:32px;
  line-height:32px;
  border:0px solid #ffffff;
  font-size:13px;
  font-family:'Ubuntu', sans-serif;
  background-color: #F0F0F0;
}

.column{display:inline-block;float:left;width:180px;padding-left:8px;}
.expanded {background: url(/components/com_showroom/assets/images/triangle-down.png) no-repeat 95% center;}
.collapsed {background: url(/components/com_showroom/assets/images/triangle-right.png) no-repeat 95% center;}

.showroom_search_pager {
  height:28px;
  line-height:28px;
  margin:10px 0px 5px 51px;
  border:0px solid #000000;
  vertical-align:top;
}

.showroom_search_result {
  float:left; 
  width:840px;
  margin:0px 0px 0px 45px;
  border:0px solid #000000;
  
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.showroom_search_result .contentBox {
  position:relative;
  width:170px;
  height:115px;
  padding: 10px 10px 10px 10px;
  margin: 8px 8px 8px 8px;
}

.showroom_search_result .image img { max-height:120px; vertical-align: top; z-index:9; max-width:100% }
.showroom_search_result .dd_pos1 { top:97px; left:154px; }
.showroom_search_result .dd_pos2 { top:107px; left:164px; }
.showroom_search_result .description_download {
  position:absolute;
  width:26px;
  height:26px;
  z-index:5;
  line-height: 26px;
}

.showroom_checkbox_multi {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  margin:0px 0px 0px 5px;
  vertical-align:top;
}

.showroom_checkbox_multi label {font-size:11px;}

.showroom_container {
  height:156px; 
  padding:8px 5px 5px 5px;
  position:relative;
  border:0px solid #ff0000;
}

.showroom_separator {
/*    background-image: url("/templates/system/images/diver_03.png"); */
    background-image: url("/components/com_showroom/assets/images/diver_03.png");
    background-repeat: repeat-x;
    clear: both;
    height: 1px;
    margin: 0px 0px 10px 0px;
}

.showroom_title { 
  position:absolute;
  top:0px;
  left:21px;
  width:170px;
  height:41px;
  border:0px solid #00ff00;
  z-index:5;
  background:url(/components/com_showroom/assets/images/sticker_up.png);
  color:#ffffff;
  text-transform:uppercase;
  font-weight: bold;
  overflow:hidden;
}

.showroom_title_level1 { background:url(/components/com_showroom/assets/images/sticker_up_1.png); }
.showroom_title_level2 { background:url(/components/com_showroom/assets/images/sticker_up_2.png); }
.showroom_title_level3 { background:url(/components/com_showroom/assets/images/sticker_up_3.png); }

.showroom_title_description {
  line-height:33px;
  font-size:12px;
}

.contentBox .image {
  position:relative;
  text-align:center;
  border:0px solid #000000;
}
 
.contentBox .description {
  position:absolute;
  top:106px;
  left:0px;
  width:156px;
  height:26px;
  z-index:5;
  background:url(/components/com_showroom/assets/images/sticker_down.png);
  text-align:left;
}

.contentBox .description_active {
  position:absolute;
  top:113px;
  left:0px;
  width:156px;
  height:26px;
  z-index:5;
  background:url(/components/com_showroom/assets/images/sticker_down_active.png);
  text-align:left;
}

.contentBox .description_description {
  text-align:left;
  padding-left: 5px;
  line-height: 26px;
  white-space: nowrap;
}

.contentBox .description_download {
  position:absolute;
  width:26px;
  height:26px;
  z-index:5;
  line-height: 26px;
}

.contentBox .dd_pos1 { top:97px; left:154px; }
.contentBox .dd_pos2 { top:107px; left:164px; }


.paddingBottom10 {
  float:left;
  padding-bottom:10px;
  border: 0px solid #0000ff;
}

.product_scroller {
  width:100%;
  float:left;
  padding-top:20px;
  border: 0px solid #0000ff;
}

.contentBox a {
  color:#000000;
}
.contentBox a:hover {
  color:#ea620f;
}


.family_menu {
  float:left;
  width:17%;
  border:0px solid #000000;
}

.search_container {
  width:100%;
}

.family_container {
  float:left; 
  width:83%;
  border:0px solid #000000;
  margin: 0px auto 0px auto;
  
	position: relative;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.family_menu ul {
  margin: 0px 0px 0px 10px;
  padding: 0px 0px 0px 0px;
}

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

.family_menu ul li a {
  color:#757575;
}

.family_menu ul li a:hover {
  color:#ea620f;
}

.family_menu .active {
  font-weight: bold;
  color: #ea620f;
}

.product_container {
  float:left;
  width:83%;
  border:0px solid #000000;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.product_container p {
  margin: 0px;
  padding: 0px;
}

.product_container .product_image_narrow {
  max-width:380px;
  vertical-align: top;
  display:inline;
  float:left;
}


.product_container .product_image_full {
  max-width:420px;
  vertical-align: top;
  display:inline;
  float:left;
}

.product_container .product_description {
  max-width:420px;
  display: inline;
  float:left;
  padding-left: 10px;
  border:0px solid #00ff00;
}

.product_container .product_description h5 {
  margin:0px;
  padding:0px;
}

.product_container .product_description h6 {
  margin:0px;
  padding:0px;
}

.product_container .full {
  width:420px;
}
.product_container .narrow {
  width:420px;
}


.product_container .product_download {
  background: no-repeat url(/components/com_showroom/assets/images/icon-download-48.png);
  width: 200px;
  margin-top: 0px; 
  border: 1px solid #ccc;
  line-height: 48px;
  padding-left: 50px;
  font-size: 20px;
  text-transform: uppercase;
  cursor:pointer;
}

.product_container a {
  color:#676767;
}

.product_container a:hover {
  text-decoration: none;
}

.showroom_search {
  width:100%;
  height:32px;
  top:-20px;
  border:0px solid #000000;
  margin-bottom:5px;
}

.showroom_search form {
  float:left;
  display:inline-block;
  margin: 0px 0px 0px 0px;
  padding-top:0px;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
}

.showroom_search form input { margin: 0px; }

.showroom_search input[type="checkbox"] { display:none; }
.showroom_search input[type="checkbox"] + label span {
    display:inline-block;
    width:16px;
    height:16px;
    vertical-align:middle;
    cursor:pointer;
    background:url("/components/com_showroom/assets/images/checkbox.png") bottom left no-repeat;
}
.showroom_search input[type="checkbox"]:checked + label span {
    display:inline-block;
    width:16px;
    height:16px;
    vertical-align:middle;
    cursor:pointer;
    background:url("/components/com_showroom/assets/images/checkbox.png") top left no-repeat;
}   

.showroom_search label { display:inline-block; margin:0px; }

.showroom_multi {
  float:right;
  border:0px solid #000000;
  margin:10px 20px 0px 0px;
}

.showroom_clear {
  clear:both;
  margin:0px;
  padding:0px;
  height:0px;
  width:0px;  
}

.showroom_back {
  display:inline;
  float:left;
  margin:0px;
  padding:0px;
  width:52px;
  height:26px;
  margin: 5px 0px 0px 10px;
  border:0px solid #000000;
}

.showroom_pager {
  height:28px;
  text-align:center;
  border:0px solid #000000;
  overflow:hidden;
}

.showroom_search_pager span,
.showroom_pager span {
  margin: 0px 2px; 
  line-height:26px;
  display:inline-block;
  width:26px;
  height:26px;
  text-align:center;
  vertical-align:middle;  
}

.showroom_search_pager span img,
.showroom_pager span img {
  vertical-align:top;  
}

.showroom_search_pager a,
.showroom_pager a {
  color:#676767;
}

.showroom_search_pager a:hover,
.showroom_pager a:hover {
  color:#ea620f;
  text-decoration: none;
}

.showroom_search_pager .active,
.showroom_pager .active {
  border:1px solid #ea620f;
  color:#ea620f;
  font-weight:bold;
}

.thinborder,
.showroom_search_pager .inactive,
.showroom_pager .inactive {
  border:1px solid #ccc;
}

.makeMeScrollable
{
	width:100%;
	height: 162px;
	position: relative;
	border: solid 0px #000;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.makeMeScrollable .contentBox { position: relative; float: left; display: block; height: 115px; width: 170px; padding: 10px; margin: 0px 5px; user-select: none; }
.makeMeScrollable .inactive { border: solid 1px #ccc; } 
.makeMeScrollable .active { border-top: solid 8px #ea620f; border-right: solid 10px #ea620f; border-bottom: solid 8px #ea620f; border-left: solid 10px #ea620f; background-color: #fff; }

.family_container .contentBox { position: relative; float: left; display: block; height: 115px; width: 170px; padding: 10px; margin: 0px 2px; user-select: none; }
.family_container .inactive { border: solid 1px #ccc; margin:8px; }
.family_container .active { border: solid 8px #ea620f;margin:1px;background-color: #fff; }

.makeMeScrollable .scrollableArea img,
.family_container img
{
	position: relative;
	float: center;
	margin: 0;
	padding: 0;
  max-height: 120px;
	user-select: none;
}

.makeMeScrollable .scrollableArea .grayscalefilter, 
.family_container .grayscalefilter 
{ 
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
}

/* Invisible left hotspot */
.makeMeScrollable .scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(/components/com_showroom/assets/images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(/components/com_showroom/assets/images/cursors/cursor_arrow_left.png), url(/components/com_showroom/assets/images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
.makeMeScrollable .scrollingHotSpotLeftVisible
{
	background-image: url(/components/com_showroom/assets/images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
.makeMeScrollable .scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(/components/com_showroom/assets/images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(/components/com_showroom/assets/images/cursors/cursor_arrow_right.png), url(/components/com_showroom/assets/images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
.makeMeScrollable .scrollingHotSpotRightVisible
{
	background-image: url(/components/com_showroom/assets/images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
.makeMeScrollable .scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.makeMeScrollable .scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}