coronavirus project showcase - need to reduce complexity of CSS file - need to get simple JavaScript code for slideshow later

product.css

/*  April 27, 2020
    I like to spend time to review code, separate CSS code from html code

    January 16, 2017 Julia worked on the style of CSS based on the style - 
    https://github.com/airbnb/css#css
*/
/*Render Container*/
#render_container{
	position:relative;
	height:370px;
	margin-bottom:46px;
}

.render_container_stickyMode{
	position:relative;
	height:370px;
	margin-bottom:46px;
	margin-top:64px;
}

#image_wrapper{
	position:relative;
	height:370px;
	margin-bottom:10px;
}

#dimension_layer{
	position:absolute;
	z-index:2;
	display:none;
}

#render_layer{
	position:absolute;
	z-index:0;
}

#render_layer .slide .mount_id, 
.product_view #render_layer .mount_id{
	position:absolute;
	font-family: 'OpenSansLight', Arial;
	font-size:32px;
	margin-top:366px;
	margin-left:80px;
	z-index:2;
} 

/*for L103 and L104*/
/* added on April 28, 2020 change class name to subTitle*/
.product_view #render_layer .slide .mount_id.subTitle{
	position:absolute;
	font-family: 'OpenSansLight', Arial;
	font-size:13px;
	margin-top:393px;
	margin-left:10px;
	z-index:2;
    overflow:visible;
} 

/*wine rack*/
.product_view #render_layer .slide .mount_id.wine_rack {
   display:none;
}

#render_caption_div{
	margin-top:-15px;
}

#r_caption{
	font-family:/*'OpenSansLight'*/'OpenSansRegular', Arial;
	font-size:32px;   /*used to be 36px;*/
	margin-left:-3px;
	margin-bottom:10px;
    width: 300px;
/*font-weight:bolder;*/
}

#render_caption_div_oneline{
	margin-top:-8px; 
    z-index:100;
}

#render_caption_div_twoline{
	margin-top:-26px;
    z-index:100;
}

#r_caption_nonsub{
	font-family:/*'OpenSansLight'*/'OpenSansRegular', Arial;
	font-size:24px;   /*24 px - updated April 9, 2020 - used to be 36px;*/
	margin-left:-3px;
	margin-bottom:5px;
	/*line-height:20pt;*/
    z-index:100;
    position:relative;
    /*font-weight:bolder;*/
    line-height:0.9;
}

#r_sub{
	font-size:13px; 
    min-width:350px; 
    margin-left:-1px;
}

#dimension_btn{
	text-align:right;
	margin-left:-1px;
}

#d_toggle{
	font-size:9pt; /* hover animation at Row 67*/
}

#overview_toggle {
    float: right;
    height: 11px;
    margin-top: 3px;
    width: 11px;
}

.overview_toggle_on{
	/*background: url('../img/assets/indicator.gif') no-repeat 0px 0px;*/
    background: url('../img/assets/indicator.png') no-repeat -11px 0px!important;
}
.overview_toggle_off{
	/*background: url('../img/assets/indicator.gif') no-repeat -17px 0px;*/
    background: url('../img/assets/indicator.png') no-repeat 0px 0px;
}
/*DATA Container*/

/*General*/
#data_container{
	position:relative;
}

#data_container div,
#data_container div:hover{
    cursor:default!important;
}

#data_container div#product_overview_section:hover, 
#data_container div#product_overview_section div:hover{
    cursor:pointer!important;
}

#data_container .data_rows{
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid transparent;
	/*padding-top:10px;
	padding-bottom:10px;*/
    padding-top:7px;
	padding-bottom:7px;
	margin-top:-1px;
	-webkit-transition: all 0.3s linear;    
	-moz-transition: all 0.3s linear;   
	-o-transition: all 0.3s linear;   
	-ms-transition: all 0.3s linear;   
	transition: all 0.3s linear;
	color:#000000;
	font-size:12px;
}

#data_container span, 
#data_container a, 
#d_toggle, 
.speclist li a{
	-webkit-transition: all 0.2s linear;    
	-moz-transition: all 0.2s linear;   
	-o-transition: all 0.2s linear;   
	-ms-transition: all 0.2s linear;   
	transition: all 0.2s linear;
}

#data_container .row_title{
	font-weight:400;
	color:#838383;
	text-shadow:none;
}

/*#data_container div#r_spec:last-child {
    margin-bottom:50px;    
}*/

/*#data_container .data_rows:nth-child(odd){
	background-color: rgba(0, 0, 0, 0.04);
}*/
/*Overview*/
#data_container .size240{
	width:300px;
}

#data_container .size240 > .row_title, #data_container .size240 .row_title{
	font-weight:400;
	color:#838383;
	text-shadow:none;
}

#data_container .size240 > div,#data_container .size240 div{
	/*margin-top:12px;*/
   /*line-height:13px;*/
	line-height:1.4em;
	margin-bottom:12px;
    color: #000000;
}

#data_container .size240 > div:last-child{
	margin-bottom:4px;
}

/*Application*/
#data_container .thumbnail{
	display:block;
	margin-bottom:8px;
	margin-top:4px;
}

.mountlist img, 
.mountlist a {
    border-color:#ffffff;
}

.mountlist.border_on img, 
.mountlist.border_on a {
    border-color:#D9D9D9!important;
}

#data_container .app_image_box:hover .app_image_link{
    color:#D9D9D9;
}

/*Collasped Row*/
#data_container .ce_enabled{
	padding-bottom:0px;
}

/* julia added on 4/8/2013 */
#data_container .ce_enabled_version2{
	padding-bottom:0px;
}

#data_container .space_holder{
	/*height:16px;*/
    height:0px;
}

#data_container .ce_list{
	/*padding-bottom:16px;*/
    padding-bottom:10px;
}

#data_container .ce_list_accesoryShade{
	/*padding-bottom:16px;*/
    padding-bottom:10px;
}

#data_container .ce_btn:hover{
    color:#D9D9D9;
}

#data_container .ce_btn_selected, 
.mount_cap{
	color:#000000;
    font-weight:bold;
}

#data_container .ce_btn_deselected{
	color:#838383;
}

/*SPECIFICATION Hidden List*/
#data_container .speclist li{
	float:left;
	margin-right:41px;
}

#data_container .speclist li a{
    color:#000000;
	/*font-weight:normal;*/
    font-weight:bold;
	font-size:12px;
	text-shadow:none;
}

#data_container .speclist li a:hover{
    color:#D9D9D9;
}

#data_container .hdlist li{
	float:left;
	margin-right:41px;
}

#data_container .hdlist li a{
	font-weight:normal;
	font-size:12px;
	text-shadow:none;
	color:#000000;
}

#data_container .hdlist li a:hover{
    color:#D9D9D9;
}

/*Mount Hidden List*/
#data_container .mountlist li{
	float:left;
	margin-right:67px;
	font-weight:normal;
	font-size:12px;
	color:#838383;
	text-shadow:none;
}

#data_container .mountlist li:nth-child(5),
#data_container .mountlist li:nth-child(6),
#data_container .mountlist li:nth-child(7){
	margin-top:10px;
}

#data_container .mount_cap {
	margin-top:8px;
}

/* June 17, 2015 LSBF in 2nd row align to left in 1st row */
.ceList_accessoryShade_SlideUpAuto .mountlist  div:nth-child(9) {
    padding-right:50px; 
}

.ceList_accessoryShade_SlideUpAuto .mountlist  div:nth-child(10) {
    margin-left:0px; 
}

/*DATA Container Animation
#data_container:hover .data_rows{
	background: none;
}

#data_container .data_rows:hover{
	background-color: rgba(0, 0, 0, 0.04);
	border-top: 1px solid #d5d5d5;
	border-bottom: 1px solid #d5d5d5;
}*/

#data_container:hover .data_rows{
	background: none;
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
}

#data_container .data_rows:hover{
	background-color: rgba(0, 0, 0, 0.06);
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	cursor:pointer;
}

#data_container:hover .data_rows:last-child{
	border-bottom: 1px solid transparent;
}

#data_container .data_rows:last-child:hover{
	border-bottom: 1px solid #d9d9d9;
}

.product_view #render_layer img, 
.HW_view #render_layer img, 
.HW-view #render_layer img{ 
    width:1008px; 
    padding-right:0; 
    padding-left:0; 
    margin-right:0; 
    margin-left:0;
}

.product_view #image_wrapper,
.HW_view #image_wrapper,
.HW-view #image_wrapper{ 
    margin-right:0; 
    margin-left:0; 
    width:1008px;
}

.product_view #render_caption_div {
    z-index: 10; 
    position: relative;
}

/* .product_view #slides .pagination {z-index: 1000; position: relative; /*margin: -9px 0 0 0 top:-33px; margin-right:0; margin-left:0;} */
/*.product_view #render_caption_div { margin-top: -10px; margin-bottom:20px;}*/

.product_view #render_layer.slides_container .slides_control { 
    height:430px !important;
}

.product_view #render_layer .slide .mount_id, 
.product_view #render_layer .mount_id{ 
    margin-top:365px;  
    margin-left:85px;
}

.product_view #render_layer .slide .toLeft ,
.product_view #render_layer .toLeft { 
    margin-top:365px;  
    margin-left:68px!important;
}

/* added on April 27, 2020 */
.product_view #render_layer .slide .specifiedFor3 {
    margin-top:365px;  
    margin-left:68px;
}

.product_view #render_layer .slide .specifiedFor4 {     
    margin-top:365px;  
    margin-left:92px;
}

.product_view #render_layer .slide .specifiedFor5 {     
    margin-top:365px;  
    margin-left:110px;
}

.product_view #render_layer .slide .specifiedFor8 {     
    margin-top:365px;  
    margin-left:150px;
}

.product_view #render_layer .slide specifiedFor9 { 
    margin-top:365px;  
    margin-left:160px;
}

.product_view #render_layer .ProductCodeLogtoLeft { 
    margin-top:200px;  
    margin-left:15px;
}

/*
#ProductCodeLgoID { margin-top:365px;  margin-left:115px!important;}
#ProductCodeLgoID_B { margin-top:365px;  margin-left:190px!important;}
    */
#ProductCodeLgoID { 
    margin-top:325px!important; 
    margin-left:10px!important;
    z-index:1; 
}

#ProductCodeLgoID_B { 
    margin-top:325px!important;  
    margin-left:10px!important;
    z-index:1;
}

#ProductCodeLgoIDStatic {
    position: absolute;
    top:15px; /* added on 7/22/2014*/
    left:0px; /* added on 7/22/2014*/
    margin-top: 310px;   /*  310px, lower 3px*/
    
    z-index: 1; 
}

#NewProductSignID {  /* added on June 26, 2015*/
    position: absolute;
    top:15px;  
    left:0px;  
    margin-top: 321px;   /*  310px - 313px*/
    
    z-index: 1; 
}

.newProductSign {
    color:#fcb31c; 
    /*font:bold; */
    font-size:13px; 
}

.productCodeLogoCss {
    max-width:70px;
    max-height:26px;
    display:none; /*  do not display logo, instead, showing in overview section on May 14, 2015*/
}

.HW_view #r_sub { margin-bottom:18px;}

/*slide test*/
a.prev {
    position:absolute; 
    top:50px;
}

a.next {
    position:absolute; 
    top:0px; 
    left:0px; 
    width:1008px; 
    height:370px;
}

#render_container {
    /*background-image:url('../img/slideshow/loading.gif');
    background-repeat:no-repeat; background-position:50% 50%;*/
    background-color:white;
    /*padding-bottom:30px;*/
}

.app_image_link {
 display:none;}

/*finish*/

#finish_wrapper {
    position:absolute; 
    top:105px; 
    right:0px; 
    width:155px; 
    height:305px; /*background-color:grey;*/ 
    z-index:1000;
}

.HW_view #finish_wrapper {
    position:absolute; 
    top:105px; 
    right:155px; 
    width:155px; 
    height:305px; /*background-color:grey;*/ 
    z-index:1000;
}

#finish_thumb_wrapper, #finish_full_wrapper {
    position:relative;
}

#finish_full_wrapper {
    float:left; 
    position:relative; 
    width:110px; 
    height:305px;
    /*background-color:pink;*/ 
}

#finish_thumb_wrapper {
    float:left; 
    position:relative; 
    width:35px; 
    height:305px; 
    /*background-color:grey;*/ 
}

#finish_thumb_wrapper .W, 
.finish_full_image img[src*="W_Lg"] {
    border-style: solid;
    border-width:1px;
    border-color:#aaaaaa;
}

#finish_thumb_wrapper ul {
    position:absolute; 
    bottom:0;
}

#finish_thumb_wrapper ul li {
  margin-top:2px; 
  cursor:pointer; 
  list-style: none; 
  margin-bottom:0px;
}

#finish_full_wrapper ul li {
  list-style: none; 
  margin:0px;
}

.finish_full {
    display:none; 
    position:absolute;
}

.finish_full_image {
    float:left; 
    position:relative; 
    width:90px; 
    overflow:hidden; 
    /*height:90px;*/ /*background-color:pink;*/
}

.finish_full_image img {
    width:87px; 
    height:87px;
}

.finish_arrow {
    float:left; 
    position:relative; 
    width:20px;  
    height:116px; /*background-color:yellow;*/
}

.finish_arrow img {
    position:absolute; /*top:87px;*/ 
    left:5px;   
}

.finish_title {
    font-size:11px; 
    color:#333333; 
    line-height:1.2; 
    margin-bottom:3px;
}

/* April 27, 2020 - extract css class from html*/
#toggleDiv {
    position: relative; 
    top: 22px; 
    right: 20px; 
    z-index:10;
}

.extraSpacing {
    padding-top: 10px; 
}