/* Instructions on how to change the width of the images.
----------------------------------------------------------------
	Example: Suppose you want the maximum width each image to be 100px.

	The maximum height has to be the same, so it would be 100px.

	The hidden container (shown below) is written by lightboxslider.asp.
		lightboxslider.js gets the value of its width and margin-left and
		then hides the container. These values represent the total width
		of each item so the paging is correct.
		The width of each item is set in "width".
		The spacing between each two items is set in "margin-left".

	The two classes (shown below) are written by lightboxslider.js.
	The four IDs (shown below) are written by lightboxslider.asp.

	You set the two classes to be the actual width and height (they have to be the same).
	You set the four IDs to be 45px greater than the height.

	It's 45px greater because...
	There are 10px between the images and the top of the container.
	There are 35px between the images and the bottom of the container.

	So 10px + 35px = 45px.
	Within the 35px, 10px is the bottom border.

	So you would set the CSS elements to be:

	(The hidden container)
	#LightboxSliderItemContainer {width: 100px; margin-left: 10px;}

	(The two classes)
	.LightboxSliderItemContainerWidth {width: 100px;}
	.LightboxSliderItemContainerHeight {height: 100px;}

	(The four IDs)
	#LightboxSliderBtm {height: 145px; ...}
	#LightboxSliderBtmWrap {height: 145px; ...}
	#CartSliderBtm {height: 145px; ...}
	#CartSliderBtmWrap {height: 145px; ...}
*/

/* Main Lightbox Slider Divs
---------------------------------------------------------------- */
#LightboxSlider {position: fixed; bottom: 0; width: 100%; z-index: 3;}
#LightboxSliderItemContainer {width: 70px; margin-left: 10px;}

/* Lightbox and Cart Item Containers
---------------------------------------------------------------- */
.LightboxSliderItemContainerWidth {width: 70px;}
.LightboxSliderItemContainerHeight {height: 70px;}

/* Lightbox
---------------------------------------------------------------- */
#LightboxSliderWrap {display: none;}
#LightboxSliderTabs {position: absolute; left: 0; top: -25px; width: 250px; height: 25px; background: none;}
.LightboxSliderTab {float: left; width: 75px; height: 26px; margin-left: 15px; border-left: #808080 1px solid; border-top: #808080 1px solid; border-right: #808080 1px solid; border-radius: 5px 5px 0 0; background: #c6c6c6; font-size: 14px;}
.LightboxSliderTabOff {float: left; width: 75px; height: 26px; margin-left: 15px; border-left: #808080 1px solid; border-top: #808080 1px solid; border-right: #808080 1px solid; border-bottom: #808080 1px solid; border-radius: 5px 5px 0 0; background: #ffffff; font-size: 14px; cursor: pointer;}
.LightboxSliderTabOff:hover {color: #ffffff; background: #333333;}
#LightboxSliderTop {height: 35px; border-top: #000 1px solid; padding-left: 15px; background: #c6c6c6;}
#LightboxSliderBtm {height: 115px; background: #ffffff;}

#LightboxSliderLiftup {position: relative; float: left; box-sizing: border-box; width: 150px; height: 27px; margin-top: 4px; border: #cccccc 1px solid; background: white;}
#LightboxSliderLiftupPBWrap {width: 96px;}
#LightboxSliderLiftupPB {width: 86px; overflow: hidden;}
#LightboxSliderLiftupMenu {box-sizing: border-box; position: absolute; left: -1px; bottom: 25px; width: 300px; border: #cccccc 1px solid; background: white; display: none;}
#LightboxSliderLiftupMenuList {list-style-type: none; margin: 0; padding: 0}
.LightboxSliderLiftUpMenuItem {padding:5px 10px 5px 10px; cursor: pointer; line-height:15px; }
.LightboxSliderLiftUpMenuItem:hover {background: #f5f5f5; color: #333333;}
.LightboxSliderLiftUpMenuItemSelected {background: #3b5e8d; color: white;} /* This is dynamically written in lightboxslider.js. */

#LightboxSliderDropdown {float: left;}
#LightboxSliderDropdownContent {padding-top: 5px;}
#LightboxSliderPagination {float: right;}
#paginationPB {margin: 0 10px 0 10px; padding-top: 3px;}
#LightboxSliderBtmWrap {height: 115px; padding: 10px 0 10px 0; border-right: #f0f0f0 10px solid; border-bottom: #f0f0f0 10px solid; border-left: #f0f0f0 10px solid; background: white;}
#LightboxSliderBtmContent {background: white; margin-right: 10px;}

#btn-openlightbox {display: none;}
#btn-openlightboxmobile {display: none;}
#btn-newlightbox {display: none;}
#btn-newlightboxmobile {display: none;}

#SelectLightboxSliderPB {float: left; width: 100px; height: 20px; display: none;}
.LightboxSliderLinks {float: left; margin: 5px 0 0 15px; color: #21361f; font-size: 12px; cursor: pointer;}
.LightboxSliderLinks:hover {color: #c23172;}

#SelectLightboxSliderPB {width: 100px;}

@media (min-width: 400px) {
	#SelectLightboxSliderPB {width: 100px;}
	#LightboxSliderLiftup {width: 200px;}
	#LightboxSliderLiftupPBWrap {width: 146px;}
	#LightboxSliderLiftupPB {width: 136px;}
}

@media (min-width: 480px) {
	#SelectLightboxSliderPB {width: 150px;}
}

@media (min-width: 600px) {
	#btn-openlightboxmobile {display: block;}
	#btn-newlightboxmobile {display: block;}
}

@media (min-width: 769px) {
	#btn-openlightbox {display: block;}
	#btn-openlightboxmobile {display: none;}
	#btn-newlightbox {display: block;}
	#btn-newlightboxmobile {display: none;}
}

@media (min-width: 992px) {
	#SelectLightboxSliderPB {width: 200px;}
	#LightboxSliderLiftup {width: 300px;}
	#LightboxSliderLiftupPBWrap {width: 246px;}
	#LightboxSliderLiftupPB {width: 236px;}
}

/* Project
---------------------------------------------------------------- */
#ProjectSliderWrap {display: none;}
#ProjectSliderTabs {position: absolute; left: 0; top: -25px; width: 250px; height: 25px; background: none;}
.ProjectSliderTab {float: left; width: 75px; height: 26px; margin-left: 5px; border-left: #808080 1px solid; border-top: #808080 1px solid; border-right: #808080 1px solid; border-radius: 5px 5px 0 0; background: #c6c6c6; font-size: 14px;}
.ProjectSliderTabOff {float: left; width: 75px; height: 26px; margin-left: 5px; border-left: #808080 1px solid; border-top: #808080 1px solid; border-right: #808080 1px solid; border-bottom: #808080 1px solid; border-radius: 5px 5px 0 0; background: #ffffff; font-size: 14px; cursor: pointer;}
.ProjectSliderTabOff:hover {color: #ffffff; background: #333333;}
#ProjectSliderTop {height: 35px; border-top: #000 1px solid; padding-left: 15px; background: #c6c6c6;}
#ProjectSliderBtm {height: 115px; background: #ffffff;}

#ProjectSliderLiftup {position: relative; float: left; box-sizing: border-box; width: 150px; height: 27px; margin-top: 4px; border: #cccccc 1px solid; background: white;}
#ProjectSliderLiftupPRWrap {width: 96px;}
#ProjectSliderLiftupPR {width: 86px; overflow: hidden;}
#ProjectSliderLiftupMenu {box-sizing: border-box; position: absolute; left: -1px; bottom: 25px; width: 300px; border: #cccccc 1px solid; background: white; display: none;}
#ProjectSliderLiftupMenuList {list-style-type: none; margin: 0; padding: 0}
.ProjectSliderLiftUpMenuItem {padding:5px 10px 5px 10px; cursor: pointer; line-height:15px; }
.ProjectSliderLiftUpMenuItem:hover {background: #f5f5f5; color: #333333;}
.ProjectSliderLiftUpMenuItemSelected {background: #3b5e8d; color: white;} /* This is dynamically written in lightboxslider.js. */

#ProjectSliderDropdown {float: left;}
#ProjectSliderDropdownContent {padding-top: 5px;}
#ProjectSliderPagination {float: right;}
#paginationPR {margin: 0 10px 0 10px; padding-top: 3px;}
#ProjectSliderBtmWrap {height: 115px; padding: 10px 0 10px 0; border-right: #f0f0f0 10px solid; border-bottom: #f0f0f0 10px solid; border-left: #f0f0f0 10px solid; background: white;}
#ProjectSliderBtmContent {background: white; margin-right: 10px;}

#btn-openproject {display: none;}
#btn-openprojectmobile {display: none;}
#btn-newproject {display: none;}
#btn-newprojectmobile {display: none;}

#SelectProjectSliderPR {float: left; width: 100px; height: 20px; display: none;}
.ProjectSliderLinks {float: left; margin: 5px 0 0 15px; color: #21361f; font-size: 12px; cursor: pointer;}
.ProjectSliderLinks:hover {color: #c23172;}

#SelectProjectSliderPR {width: 100px;}

@media (min-width: 400px) {
	#SelectProjectSliderPR {width: 100px;}
	#ProjectSliderLiftup {width: 200px;}
	#ProjectSliderLiftupPRWrap {width: 146px;}
	#ProjectSliderLiftupPR {width: 136px;}
}

@media (min-width: 480px) {
	#SelectProjectSliderPR {width: 150px;}
}

@media (min-width: 600px) {
	#btn-openprojectmobile {display: block;}
	#btn-newprojectmobile {display: block;}
}

@media (min-width: 769px) {
	#btn-openproject {display: block;}
	#btn-openprojectmobile {display: none;}
	#btn-newproject {display: block;}
	#btn-newprojectmobile {display: none;}
}

@media (min-width: 992px) {
	#SelectProjectSliderPR {width: 200px;}
	#ProjectSliderLiftup {width: 300px;}
	#ProjectSliderLiftupPRWrap {width: 246px;}
	#ProjectSliderLiftupPR {width: 236px;}
}

/* Cart
---------------------------------------------------------------- */
#CartSliderWrap {display: none;}
#CartSliderTabs {position: absolute; left: 0; top: -25px; width: 250px; height: 25px; background: none;}
.CartSliderTab {float: left; width: 75px; height: 26px; margin-left: 5px; border-left: #808080 1px solid; border-top: #808080 1px solid; border-right: #808080 1px solid; border-radius: 5px 5px 0 0; background: #c6c6c6; font-size: 14px;}
.CartSliderTabOff {float: left; width: 75px; height: 26px; margin-left: 5px; border-left: #808080 1px solid; border-top: #808080 1px solid; border-right: #808080 1px solid; border-bottom: #808080 1px solid; border-radius: 5px 5px 0 0; background: #ffffff; font-size: 14px; cursor: pointer;}
.CartSliderTabOff:hover {color: #ffffff; background: #333333;}
#CartSliderTop {height: 35px; border-top: #f5f5f5 1px solid; padding-left: 15px; background: #c6c6c6;}
#CartSliderBtm {height: 115px; background: #ffffff;}

#CartSliderDropdown {float: left;}
#CartSliderDropdownContent {padding-top: 10px;}
#CartSliderPagination {float: right;}
#paginationCT {margin: 0 10px 0 10px; padding-top: 3px;}
#CartSliderBtmWrap {height: 115px; padding: 10px 0 10px 0; border-right: #f0f0f0 10px solid; border-bottom: #f0f0f0 10px solid; border-left: #f0f0f0 10px solid; background: #ffffff;}
#CartSliderBtmContent {background: white; margin-right: 10px;}

#CartSliderDropdown {float: left; color: black; font-size: 12px;}
#CartSliderNumPix {float: left;}
#btn-opencart {display: none;}
#btn-opencartmobile {display: none;}
.CartSliderLinks {float: left; margin: 0 0 0 15px; color: #21361f; font-size: 12px; cursor: pointer;}
.CartSliderLinks:hover {color: #c32172;}

@media (min-width: 480px) {
	#btn-opencartmobile {display: block;}
}

@media (min-width: 769px) {
	#btn-opencart {display: block;}
	#btn-opencartmobile {display: none;}
}