/* CSS for furniture ordering page */
/* Sam Boulby, August 2018 */

#introSection, #browseSection, #orderSection, #tableOfProducts{display: none;}	
body.jsEnabled #jsMessage{display: none;}

body.jsEnabled{overflow-y: scroll;}

#ofTabs{border-bottom: 5px solid #c8a019; margin: -1px -20px 20px -20px; padding: 0px 20px 0px 20px;}

.ofTab{width: 25%; display: inline-block; transition: all 0.2s linear; padding: 10px; background-color: #d9d9da; margin: 0px 10px 0px 0px; border-bottom: 2px solid white; font-weight: bold;}
.ofTab:hover{cursor: pointer; background-color: #b2b3b5;}

.ofTab.selected{background-color: #c8a019; color: white; border-bottom: 2px solid #c8a019;}
.ofTab.selected:hover{cursor: default, background-color: #c8a019;}

.ofItem{margin-bottom: 20px;}

.ofItemTitle{font-weight: bold; font-size: 110%;}
.ofPrice{font-weight: bold; font-size: 110%;}

#ofTypeMenu{margin-bottom: 20px;}

.ofTypeMenuButton{display: inline-block; background: #d9d9da; margin: 0px 10px 10px 0px; padding: 10px; transition: all 0.2s linear;}
.ofTypeMenuButton:hover{cursor: pointer; background-color: #b2b3b5;}

.ofTypeMenuButton.selected{background-color: #c8a019; color: white;}
.ofTypeMenuButton.selected:hover{cursor: default; background-color: #c8a019;}

.ofTypeInfo{display: inline-block; margin: 0px 10px 10px 0px;}

#introSection{width: 75%;}

.ofBasketTotal{font-weight: bold; margin: 1em 0px 20px 0px;}

.ofQuantityAdd, .ofQuantityRemove{display: inline-block; width: auto; margin-right: 10px; transition: all 0.2s linear;}
.ofQuantityAdd:hover, .ofQuantityRemove:hover{cursor: pointer; color: black;}

.ofOption:first-child{margin-top: 10px;}

#image-modal .image-controls{display: none !important;}

.ofItemImage img{max-height: 200px;}
.ofItemImage img:hover{cursor: moz-zoom-in; cursor: webkit-zoom-in; cursor: zoom-in;}

/* SS edit 07/10/20 to hide order summary text box */
#for6{display: none;}
label[for="for6"]{display: none;}