605 lines
16 KiB
CSS
605 lines
16 KiB
CSS
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%;
|
|
} |