#dyo-builder .dyo-container.dyo-webgl ::-moz-selection { background: transparent; }
#dyo-builder .dyo-container.dyo-webgl img::-moz-selection { color:rgba(0,0,0,0); }
#dyo-builder .dyo-container.dyo-webgl ::selection { background: transparent; }
#dyo-builder .dyo-container.dyo-webgl img::selection { color:rgba(0,0,0,0); }

/* Bodging the fabric selector
*/

#hoverbox
{
  padding-right:10px!important;
}

.hoverboxClose
{
  cursor:pointer;
  right: 5px;
  position: absolute;
  top: 5px;
}

.hoverboxClose span
{
  position:absolute;
  top:8px;
  right:45px;
}

#fabricSelector
{
  width: 100%;
  max-width: 828px;
  left: 80px;
  position: absolute;
  top: 100px;
  padding: 0 15px;
  box-sizing: border-box;
  z-index: 20;
  display: none;
}

.fabric_selected_tick {
  pointer-events: none !important;
}

#fabricSelector .lightBoxY
{
  background-color:#fff;
  background-color:#F7EADE;
  padding-bottom:5px;
  padding-top:13px;
  height:auto;
  width:auto;
  left:88px;
  top:65px;
  pointer-events:auto;
  border:1px solid #222;
  display:block;
}

#secondaryOff
{
  float: right;
  position: static;
  padding-right: 40px;
}

.singleTick
{
  float: right;
  margin-left: 5px;
  position: static;
}

#fabricBlurb
{
  color:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  float: left;
}

/* THREE.js related elements
*/

#webGLContainer
{
  width:100%;
  height:535px;
  position:absolute;
  border-radius:inherit;
  margin:0;
  padding:0;
}

#webGLContainer > span
{
  color:#EEE;
  text-shadow:0px 0px 2px #222;
  width:inherit;
  text-align:center;
  position: absolute;
  top:40%;
  font-size:40pt;
  pointer-events:none;
  z-index: 1;
}

#webGLContainer canvas
{
  /* NOTE this is the DOM element's size, NOT THE RENDER SIZE. it will warp the image if they have different ARs!!! */
  width: inherit;
  height: inherit;
  border-radius: 2px;
  opacity:0.000001;
}

/* UI containers
*/
#webGLBuilder
{
  background:#F7EADE;
  overflow:hidden;
  width:950px;
  height:535px;
  position:relative;
  color:#EEE;
  font-family: Helvetica;
  font-size:9pt;
}

@media (max-width:800px) {
  .scrollShield {
    background-color: #f7eade;
    background-image:url("../Assets/Images/scrollShield.png");
    background-position: 50%;
    background-repeat: no-repeat;
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: fill;
  }
}

#initialLoadMask
{
  position:absolute;
  pointer-events:none;
  display:block;
  left:50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  max-width:none;
  max-height:100%;
}

#webGLFrame
{
  border:5px solid rgba(250,250,250,0.8);
  left:0px;
  top:0px;
  bottom:0px;
  right:0px;
  position:absolute;
  pointer-events:none;
}

.builderPanel
{
  width:calc(100% - 20px);
  max-width:930px;
  height:505px;
  /*background:rgba(0,0,0,0.9);*/
  background:rgba(248,245,241,0.97);
  position:absolute;
  left:10px;
  top:15px;
  box-shadow:0px 0px 50px #000;
  display:none;
  z-index:21; // place on top of the fabric selector.
}

.builderPanelSmall
{
  width:400px;
  height:130px;
  background:rgba(0,0,0,0.9);
  position:absolute;
  left:245px;
  top:205px;
  box-shadow:0px 0px 50px #000;
  display:none;
  z-index:5;
}

#frameLogo
{
  position:absolute;
  left:50%;
  margin-left:-120.5px;
  top:35px;
}
@media (max-width: 276px) {
  #frameLogo {
    margin-left: -104.5px;
  }
}

/* the "how to" panel
*/
#webGLHowTo
{
  width:942px;
  height:527px;
  left:4px;
  top:4px;
  display:none;
  /*background: rgba(0,0,0,0.95);*/
  background:rgba(248,245,241,0.95);
}

#prevHelp
{
  font-size: 20px;
  top: 50%;
  left: 2px;
  position: absolute;
  margin-top: -10px;
}

#prevHelp:hover
{
  font-size:24px;
  margin-top:-12px;
  text-shadow:0 0 10px #fff;
}

#nextHelp
{
  font-size: 20px;
  top: 50%;
  right: 2px;
  position: absolute;
  margin-top: -10px;
}

#nextHelp:hover
{
  font-size:24px;
  margin-top:-12px;
  text-shadow:0 0 10px #fff;
}

#helpDots
{
  bottom: 0px;
  position: absolute;
  width: inherit;
  text-align:center;
}

#helpDots span
{
  font-size:11px;
}

#helpDots .current
{
  font-size:15px;
}

/* The "Save" panel
*/

#loginButton
{
  width:295px;
  max-width:100%;
  height:50px;
  line-height:50px;
  margin:auto;
  padding-top:205px;
  cursor:pointer;
}

.builderButton img
{
  width:inherit;
  height:inherit;
  display:block;
  position:absolute;
}

.builderButton p
{
  top: 0px;
  left: 0px;
  width: inherit;
  height: inherit;
  line-height:inherit!important;
  text-align: center;
  display: block;
  color: #000!important;
  position:relative;
  font-size:21pt!important;
  margin:0;
}
@media (max-width: 768px) {
  .builderButton p {
    width: auto;
  }
}

#createAccountButton
{
  width:295px;
  max-width:100%;
  height:50px;
  line-height:50px!important;
  margin:auto;
  padding-top:70px;
  cursor:pointer;
}

/* Create account panel
*/

.builderBlue
{
  color:#4399CA!important;
}

.builderRed
{
  color:#DD1414!important;
}

.panelTitle
{
  width:inherit;
  text-align:center;
  font-size:25pt!important;
  padding-top:130px;
  margin-bottom:0;
}

.panelClause
{
  width:inherit;
  text-align:center;
}

@media (max-width: 276px) {
  .panelTitle, .panelClause {
    width:auto;
  }
}

#emailInput
{
  margin:auto;
  display:table;
}

#emailInput p
{
  position:absolute;
  line-height:50px!important;
  margin:0;
  margin-left:-83px;
  font-size:20pt!important;
}

.builderInput
{
  background-image:url("../Assets/Images/buttonBack.png");
  height:50px;
  width:295px;
  background-repeat:no-repeat;
  text-indent:10px;
  font-size:18pt!important;
  box-sizing:border-box;
  padding:8px;
  padding-right:5px;
  cursor:text;
  color:#4399CA;
}

@media (max-width: 768px) {
  .builderInput {
    width:100%;
  }
}

.builderInput::selection
{
  background:#ffb7b7;
}

#createSubmit
{
  left:50%;
  margin-left:-81px;
  position:absolute;
  padding-top:40px;
  cursor:pointer;
}

.panelFooter
{
  text-align:center;
  bottom:5px;
  position:absolute;
  width:inherit;
  font-size:15pt!important;
}

/* The Save naming panel
*/

#nameInput
{
  margin:auto;
  display:table;
  padding-top:40px;
}

#nameInput p
{
  position:absolute;
  line-height:50px!important;
  margin:0;
  margin-left:-140px;
  font-size:18pt!important;
}

#saveSubmit
{
  left:50%;
  margin-left:-81px;
  position:absolute;
  padding-top:75px;
  cursor:pointer;
}

/* The loaded sofa name list
*/

#loadList
{
  text-align:center;
  font-size:16pt!important;
  max-height:275px;
  overflow-y:auto;
  margin-right:5px;
  padding-top:20px;
}

#loadList span
{
  width:inherit;
  display:block;
  padding-bottom:4px;
  cursor:pointer;
  color:#444;
}

/* The login panel
*/

#loginInput
{
  margin:auto;
  display:table;
  padding-top:25px;
}

@media (max-width: 768px) {
  #loginInput {
    padding:25px 5px 0 5px;
    max-width:100%;
  }
}

#loginInput p
{
  position:absolute;
  line-height:50px!important;
  margin:0;
  margin-left:-170px;
  font-size:18pt!important;
}

@media (max-width: 768px) {
  #loginInput p {
    position: static;
    margin-left:5px;
  }
}

#loginSubmit
{
  left:50%;
  margin-left:-81px;
  position:absolute;
  padding-top:42px;
  cursor:pointer;
}

/* The Scaling iFrame
*/

#shareFrame
{
  width: 100%;
  max-width: 100%;
  height:inherit;
  display:none;
  position:absolute;
  z-index:10;
}

#closeShare
{
  right:20px;
  top:25px;
  font-size:9pt;
  position:absolute;
  font-weight:bold;
  /*border:2px solid #FFF;*/
  border:2px solid #000;
  color:#000;
  border-radius:10px;
  width:20px;
  height:20px;
  text-align:center;
  line-height:20px;
  /*background:#000;*/
  background:rgb(247,234,222);
  z-index:11;
  display:none;
}

.closePanel
{
  right:10px;
  top:10px;
  font-size:9pt;
  position:absolute;
  font-weight:bold;
  /*border:2px solid #FFF;*/
  border:2px solid #000;
  color:#000;
  border-radius:10px;
  width:20px;
  height:20px;
  text-align:center;
  line-height:20px;
  /*background:#000;*/
  background:#f8f5f1;
  cursor:pointer;
}

#topPieces
{
  width:inherit;
  height:80px;
  position:absolute;
  color:#333;
  pointer-events:none;
  margin:5px 0 0 5px;
}

#topPieces
{
  top: 0px; transition: 1s; -webkit-transition: 1s;
}

#topPieces.slide
{
  top: -80px; transition: 1s; -webkit-transition: 1s;
}

#leftPieces
{
  height:inherit;
  position:absolute;
  top:0px;
  pointer-events:none;
}

#leftPieces
{
  left: 0px; transition: 1s; -webkit-transition: 1s;
}

#leftPieces.slide
{
  left: -265px; transition: 1s; -webkit-transition: 1s;
}

#rightPieces
{
  height:inherit;
  position:absolute;
  right:0px;
  top:0px;
}

#bottomPieces
{
  max-width: 950px;
  height:auto;
  /*position:absolute;*/
  position:relative;
  overflow:hidden;
  pointer-events:none;
  margin-top:5px;
  background-color:#F7EADE;
  font-family: Helvetica;
}

/* The sofa type selector
*/

#sofaTypes
{
  float:left;
  left:0px;
  top:0px;
  height:inherit;
  width:290px;
  margin-right:65px;
}

.stylisedTickbox
{
  border:1px solid #333;
  width:20px!important;
  height:20px!important;
  line-height:20px!important;
  text-align:center;
  left:0px;
  top:21px;
  font-size:13pt;
  pointer-events:auto;
}

.stylisedTickbox:hover
{
  background:rgba(202, 202, 202, 0.6);
}

.sofaType
{
  height:65px;
  position:relative;
  float:left;
  margin:10px 10px 0 0;
  width:83px;
}

.sofaType:first-of-type
{
  margin-left:7px;
}

.sofaType img
{
  left:36px;
  top:7px;
  position:absolute;
  pointer-events:auto;
}

.sofaType:first-of-type img
{
  top:20px;
}

.sofaType span
{
  bottom:0px;
  width:inherit;
  left:0px;
  text-align:center;
  padding:0px;
  margin:0!important;
}

#sofaTypes span
{
  margin: 5px 0 0 5px;
  position:absolute;
}

/* The texture Selectors
*/

.textureSelector .heading
{
  left:5px;
  margin-top:5px;
}

.textureSelector
{
  float:left;
  height:inherit;
  width:290px;
  position:relative;
}

.scrolling_list div
{
  position:relative;
  margin:0;
  /*padding: 15px 5px;*/
  padding:5px 5px 30px 5px;
  overflow:hidden;
}

.textureSelector span
{
  display:block;
  position:relative; 
  color:inherit;
}

.dropdownIcon
{
  width:auto!important;
  height:100%!important;
}

.textureSelector div img
{
  position:absolute;
  right:0px;
  top:0px;
  height:auto;
  width:100%;
}

.textureSelector .selected
{
  background:rgba(255, 255, 255, 0.5);
  margin-top:-10px;
  padding-top:10px;
  margin-bottom:-10px;
  padding-bottom:10px;
  padding-left:5px;
  margin-left:-5px;
  margin-right:-5px;
}

.textureSelector img
{
  position:absolute;
  right:14px;
  top:7px;
  width:50px;
  height:50px;
  background:#000;
}

.textureThumbnail
{
  pointer-events:auto;
}

.stylisedDropdown
{
  position:absolute;
  border: 1px solid #333;
  height:30px;
  line-height:30px;
  width:200px;
  margin-left:5px;
  background:rgba(240,240,240,0.1);
  overflow:hidden;
  pointer-events:auto;
}

.stylisedDropdown:hover
{
  background:rgba(202, 202, 202, 0.6);
}

.stylisedDropdown span
{
  width:inherit;
  height:inherit;
  line-height:inherit;
  text-indent:10px;
  pointer-events:none;
  margin:0;
}

.stylisedDropdown img
{
  right:0px;
  top:0px;
  height:inherit;
  width:auto;
  background:none;
  pointer-events:none;
}

.stylisedDropdownOption
{
  border-bottom:1px solid #333;
  padding-bottom: 5px;
  margin-left: 0px!important;
  /*text-indent: 15px;*/
  color:#FFF;
  text-shadow: 0px 0px 10px #000;
}

.stylisedDropdownOption span
{
  pointer-events:none;
  font-size:12pt;
}

.stylisedDropdownOption:hover:first-of-type
{
  margin-top:0px;
}

.stylisedDropdownOption:last-of-type
{
  margin-bottom:-5px;
}

.stylisedDropdownOption:hover
{
  color: #E5E5E5!important;
}

.stylisedDropdownList
{
  background: rgba(240,240,240,0.3);
  height:400px;
  width: 270px;
  margin-left: 5px;
  bottom:-385px;
  position: absolute;
  border:1px solid #333;
  display:none;
  overflow:hidden;
  pointer-events:auto;
}

.stylisedDropdownList .scrollMask
{
  width:inherit;
  height:inherit;
  overflow:hidden;
}

.stylisedDropdownList .scrolling_list
{
  z-index:2;
}

.stylisedDropdownList .scrollbar
{
  width:15px;
  border-left:inherit;
  border-left-width: 2px;
  height:inherit;
  right:0px;
  top:0px;
  position:absolute;
  background:#999;
}

.stylisedDropdownList .scrollbar .scrollUp
{
  width:inherit;
  margin:0;
  padding:0;
  left:0px;
  top:0px;
  height:auto;
  background:rgba(0,0,0,0.0001);
}

.stylisedDropdownList .scrollbar .scrollDown
{
  width:inherit;
  margin:0;
  padding:0;
  left:0px;
  height:auto;
  background:rgba(0,0,0,0.0001);
  top:auto;
  bottom:0px;
  position:absolute;
}

.stylisedDropdownList .scrollbar .scroller
{
  position:absolute;
  width:inherit;
  background:rgba(80,80,80,0.7);
  min-height:10px;
  top:10px;
}

.scrolling_list
{
  top:0px;
  left:0px;
  width:inherit;
  height:inherit;
  overflow-y:auto;
  padding-right:17px;
}

.scrollCollider
{
  height:inherit;
  display:none;
  z-index:1;
  position:relative;
}

/* Sofa section selector
*/

#sofaSections
{
  position:absolute;
  pointer-events:auto;
  overflow:hidden;
  border: 1px solid #443535;
  border-bottom: 0;
}

@media (max-width:1200px) { #sofaSections {
  width:100%;
  top:0;
  left:0;
  border:0;
  margin:1px 5px 0 0;
}}

@media (min-width:1201px) { #sofaSections {
  width:253px;
  bottom:10px;
  left:10px;
  border-bottom: 0;
}}

#sofaPiecesList
{
  width:245px;
  height:440px;
  background-color:rgba(247,234,222,0.62);
  bottom :12px;
  position:absolute;
  left:275px;
  pointer-events:auto;
  display:none;
  z-index:1;
}

@media (max-width:300px) {
  #sofaPiecesList {
    width: 90%;
  }
  #sofaPiecesList .scrollMask, .scrolling_list{
    width: 100% !important;
  }
}

.sofaPartOption
{
  width:inherit;
  height:121px;
  border-bottom:1px solid #443535;
  color:#443535;
  position:relative;
  padding:0!important;
  cursor: pointer;
}

.sofaPartOption:last-of-type
{
  border-bottom:0;
}

.sofaPartOption.selected
{
  background:rgba(255,255,255,0.5);
}

.sofaPartOption:hover
{
  background:rgba(100,100,100,0.5);
}

.invalidPart
{
  opacity:0.5;
  pointer-events:none!important;
  background:#FA8888;'
}

.sofaPartOption span
{
  width:130px;
  position:absolute;
  left:5px;
  pointer-events:none;
  font-size:10pt;
}

.sofaPartWhy
{
  bottom:5px;
  left:5px;
  background:#FFF;
  font-weight:bold;
  color:#000;
  padding:5px;
  z-index:1;
  width:208px!important;
  text-align:center;
}

.sofaPartOption .sofaPartName
{
  top:10px;
}

.sofaPartOption .sofaPartSubname
{
  bottom:10px;
  /*font-weight:bold;
  font-size:12pt;*/
}

.sofaPartOption img
{
  position:absolute;
  pointer-events:none;
}

.sofaPartOption img.sofa
{
  height:110px;
  top:0px;
  right:18px;
}

.sofaPartOption img.check
{
  display:none;
  left:20px;
  bottom:26px;
}

.sofaPartOption.selected img.check
{
  display:block;
}

#sofaPiecesList .scrollMask
{
  width:inherit;
  height:inherit;
  overflow:hidden;
  z-index:0;
  border:1px solid #443355;
}

#sofaPiecesList .scrollbar
{
  width:15px;
  border:1px solid #443535;
  height:inherit;
  right:-2px;
  top:0px;
  position:absolute;
  background:#999;
  z-index:1;
}

#sofaPiecesList .scrollbar .scrollUp
{
  width:inherit;
  margin:0;
  padding:0;
  left:0px;
  top:0px;
  height:auto;
  background:rgba(0,0,0,0.0001);
}

#sofaPiecesList .scrollbar .scroller
{
  position:absolute;
  width:inherit;
  background:rgba(80,80,80,0.7);
  min-height:10px;
  top:10px;
}

#sofaPiecesList .scrollbar .scrollDown
{
  width:inherit;
  margin:0;
  padding:0;
  left:0px;
  height:auto;
  background:rgba(0,0,0,0.0001);
  top:auto;
  bottom:0px;
  position:absolute;
}

/* Generic bits of the selector pieces
*/

.extensionButton
{
  background-image: url('../Assets/Images/extendButton.png');
  background-repeat: no-repeat;
  width: 25px;
  height: inherit;
  position: absolute;
  right: 0px;
  top: inherit;
  border-left: 1px solid;
}

.extensionButton:hover
{
  background-image: url('../Assets/Images/extendButtonHover.png')!important;
}

.extensionOption .selNumber
{
  width:45px;
}

.selNumber
{
  width:54px;
  font-size:54px;
  height:inherit;
  line-height:inherit;
  text-align:center;
  display:block;
  float:left;
  pointer-events:none;
}

.selLabel
{
  line-height:normal;
  font-size:12px;
  margin-right:5px;
  width:32px;
  display:table;
  height:inherit;
  text-align:center;
  float:left;
  pointer-events:none;
}

.selLabel p
{
  color:inherit!important;
  font-size:inherit!important;
}

.selLabel p
{
  display:table-cell;
  vertical-align:middle;
}

.selName
{
  line-height:normal;
  width:130px;
  margin-right:5px;
  position:absolute;
  left:90px;
  top:16px;
  font-size:12px;
  text-align:center;
  float:left;
  pointer-events:none;
}

.selName p
{
  color:inherit!important;
  font-size:inherit!important;
}

.cornerPiece
{
  pointer-events:none;
  background:rgba(0,0,0,0.1);
}

#standardPieces > div, #cornerPieces > div, #uPieces > div {
  position: relative;
}

@media (max-width:1200px) {
  #sofaTypes {
    display: none;
  }
  
  #topHideButton {
    display: none;
  }

  #webGLFrame {
    top: 85px;
    bottom: 60px;
  }

  #webGLBuilder {
    height: 680px;
  }

  #webGLContainer {
    top: 85px;
  }

  #topPieces {
    top: 615px;
  }

  #leftPieces {
    width: 100%;
  }

  #sofaSections > div {
    text-align: center;
    white-space: nowrap;
  }

  #standardPieces > div {
    display: inline-block !important;
    width: calc(33.3% - 5px);
    height: 80px !important;
    border: 1px solid #443535;
  }

  #cornerPieces > div {
    display: inline-block !important;
    width: calc(20% - 5px);
    height: 80px !important;
    border: 1px solid #443535;
  }

  #uPieces > div {
    display: inline-block !important;
    width: calc(20% - 5px);
    height: 80px !important;
    border: 1px solid #443535;
  }

  #uPieces > div.cornerPiece {
    display: none !important;
  }

  #leftPieces .selNumber {
    position: absolute;
    top: 25px;
    width: 40px;
    overflow: hidden;
    text-align: left;
    left: 5px;
  }

  .uPieces-4 .selNumber::before {
    content: "3 ";
  }

  .uPieces-6 .selNumber::before {
    content: "4 ";
  }

  .uPieces-7 .selNumber::before {
    content: "5 ";
  }

  .selLabel {
    position: absolute;
    display: inline;
    left: 10px;
    top: 5px;
    white-space: nowrap;
    font-weight: bold;
  }

  .selName {
    top: 30px;
    left: 10%;
  }

  #leftHideButton {
    display: none;
  }

  #sofaPiecesList {
    left: 10px;
    height: 513px;
    bottom: 92px;
  }

}

@media (max-width:980px) {
 #leftPieces .selNumber {
    top: 0px;
    width: 20px;
    font-size: 30px;
    line-height: 1.3;
    text-align: left;
    left: 50%;
    margin-left: -10px;
  }

  .selLabel {
    left: 0;
    top: 35px;
    width: 100%;
  }

  .selLabel p {
    display: inline;
  }

  .selName {
    top: 50px;
    left: 0;
    height: auto;
    width: 100%;
  }

  #cornerPieces > div.cornerPiece {
    display: none !important;
  }

  #cornerPieces > div {
    width: calc(25% - 5px);
  }

  .cornerPieces-4 .selNumber::before {
    content: "3 ";
  }

  .cornerPieces-5 .selNumber::before {
    content: "4 ";
  }

}

@media (min-width:768px) and (max-width:980px) {

  /* fix visual misalignment */

  .standardPieces-2 .selNumber { left:calc(50% - 10px) !important; }
  .standardPieces-2 .selLabel { width:calc(100% - 25px); }
  .standardPieces-2 .selName  { width:calc(100% - 25px); }

  .cornerPieces-2 .selNumber { left:calc(50% - 10px) !important; }
  .cornerPieces-2 .selLabel { width:calc(100% - 25px); }
  .cornerPieces-2 .selName  { width:calc(100% - 25px); }

  .cornerPieces-4 .selNumber { left:calc(50% - 10px) !important; }
  .cornerPieces-4 .selLabel { width:calc(100% - 25px); }
  .cornerPieces-4 .selName  { width:calc(100% - 25px); }

  .uPieces-2 .selNumber { left:calc(50% - 10px) !important; }
  .uPieces-2 .selLabel { width:calc(100% - 25px); }
  .uPieces-2 .selName  { width:calc(100% - 25px); }

  .uPieces-4 .selNumber { left:calc(50% - 10px) !important; }
  .uPieces-4 .selLabel { width:calc(100% - 25px); }
  .uPieces-4 .selName  { width:calc(100% - 25px); }

  .uPieces-6 .selNumber { left:calc(50% - 10px) !important; }
  .uPieces-6 .selLabel { width:calc(100% - 25px); }
  .uPieces-6 .selName  { width:calc(100% - 25px); }

}

@media (max-width:767px) {
  #sofaTypes {
    display: none;
  }

  #sofaTypes,
  .textureSelector {
    height: auto;
  }

  #sofaTypes {
    margin-bottom: 10px;
  }

  #webGLFrame {
    top: 155px;
    bottom: 75px;
  }

  #webGLBuilder {
    height: 600px;
  }

  #webGLContainer {
    top: 155px;
    height: 365px;
  }

  #topPieces {
    top: 520px;
    height: 80px;
  }

  .textureSelector#primaryTextureSelector {
    clear: left;
  }

  #standardPieces > div {
    height: 150px !important;
  }

  #cornerPieces > div {
    height: 150px !important;
  }

  #uPieces > div {
    height: 150px !important;
  }

  .selLabel {
    top: 45px;
  }

  .selName {
    white-space: normal;
    width: 80%;
    left: 10%;
    top: 75px;
  }

  .selName p {
    min-height: 30px;
  }

  .extensionButton {
    width: 100%;
    float: none;
    bottom: 0px;
    height: 25px;
    border-top: 1px solid black;
    background-image: url('../Assets/Images/extendButton2.png');
    background-position-x: 50%;
  }

  .extensionButton:hover {
    background-image: url('../Assets/Images/extendButtonHover2.png')!important;
  }

  #fabricSelector {
    top: 20px;
  }

  #sofaPiecesList {
    height: 343px;
  }

}

@media (max-width:640px) {

  #fabricBlurb {
    max-width: 60%;
  }

  /* fold fabric selectors in two rows */

  #topPieces {
    width: 50%;
    height: 160px;
  }

  #webGLFrame {
    bottom: 140px;
  }

  #webGLBuilder {
    height: 660px;
  }

  .textureSelector {
    height: 60px;
  }

  #sofaPiecesList {
    bottom: 172px;
  }

}

@media (max-width:500px) {

  #webGLFrame, #webGLContainer {
    top: 170px;
  }

  #webGLContainer {
    height: 350px;
  }

  #sofaPiecesList {
    height: 328px;
  }

  #standardPieces > div, #cornerPieces > div, #uPieces > div {
    height: 165px !important;
  }

  .selName p {
    min-height: 50px;
  }

  .selLabel {
    white-space: normal;
    width: 40px;
    margin-left: -20px;
    left: 50%;
    top: 40px;
  }

  /* do not let hoverbox float on small screen */

  #hoverbox {
    background-color: transparent;
    border-width: 0px;
    min-height: 225px;
    position: static;
    float: left;
  }

  #hoverbox .hoverbox_close {
    display: none;
  }

  /* shorten the names */

  .selName .hide {
    display: none;
  }

  #secondaryOff {
    float: left;
    margin-top: 10px;
    padding-left: 5px;
  }
}

.selName .nobr {
  white-space: nowrap;
}


/* The "Standard" sofa selector pieces
*/

#standardPieces
{
  width:inherit;
  display:none;
  background-color:rgba(247,234,222,0.62);
}

#standardPieces > div
{
  height:60px;
  line-height:60px;
  border-bottom:1px solid #443535;
  color:#443535;
}

#standardPieces div:hover
{
  background-color:rgba(100,100,100,0.5);
}

#standardPieces .selected
{
  background:rgba(255,255,255,0.5);
}

/* The Corner sofa selector pieces
*/

#cornerPieces
{
  width:inherit;
  display:none;
  background-color:rgba(247,234,222,0.62);
}

#cornerPieces > div
{
  border-bottom:1px solid #443535;
  color:#443535;
  height:60px;
  line-height:60px;
}

#cornerPieces div:hover
{
  background-color:rgba(100,100,100,0.5);
}

#cornerPieces .selected
{
  background:rgba(255,255,255,0.5);
}

/* The U-shaped sofa selector pieces
*/
#uPieces
{
  width:inherit;
  height:inherit;
  display:none;
  background-color:rgba(247,234,222,0.62);
}

#uPieces > div
{
  border-bottom:1px solid #333;
  overflow:hidden;
  height:60px;
  line-height:60px;
  color: #443535;
}

#uPieces div:hover
{
  background-color:rgba(100,100,100,0.5);
}

#uPieces .selected
{
  background:rgba(255,255,255,0.5);
}


/* Sofa Details (size, price et al)
*/

#leftHideButton
{
  position: absolute;
  left: 275px;
  top:483px;
  background-color: rgba(247,234,222,0.62);
  color:#333;
  width: 20px;
  text-align: center;
  pointer-events:auto;
  height: 40px;
  line-height: 40px;
  border:1px solid #333;
  background-image: url("/builder/webGL/Assets/Images/arrowLeft.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 60% auto;
}

.slide #leftHideButton
{
  background-image: url("/builder/webGL/Assets/Images/arrowRight.png");
}

#leftHideButton img
{
  display: none;
}

#topHideButton
{
  position:absolute;
  left:50%;
  margin-left:-20px;
  width:40px;
  background-color:rgba(240,240,240,0.4);
  border:1px solid #333;
  color:#333;
  height: 20px;
  line-height: 20px;
  text-align:center;
  pointer-events:auto;
  background-image: url("/builder/webGL/Assets/Images/arrowUp.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 60%;
}

.slide #topHideButton
{
  background-image: url("/builder/webGL/Assets/Images/arrowDown.png");
}

#topHideButton
{
  top: 60px; transition: top 1s; -webkit-transition: top 1s;
}

.slide #topHideButton
{
  top: 90px; transition: top 1s; -webkit-transition: top 1s;
}

#topHideButton img
{
  display: none;
}

#topHideButton:hover
{
  background-color:rgba(202,202,202,0.6);
}

#leftHideButton:hover
{
  background-color:rgba(100,100,100,0.5);
}

#sofaDetails
{
  float:left;
  font-size:13pt;
  margin:11px 0px 0px 11px;
  color:#443535;
  width: 330px;
}

#sofaDetails .sofaPriceContainer,.sofaSizeContainer
{
  float:left;
  text-align:center;
}

#sofaDetails .sofaSizeContainer
{
  width:200px;
  white-space:nowrap;
}

#sofaDetails .detailsHeader
{
  text-decoration:underline;
  margin-right:8px;
}

#sofaDetails #sofaCost
{
  font-size:30pt;
  line-height:1;
  font-weight:bold;
}


#sofaDetails #sofaWidthHeight
{
  font-size:15pt;
  line-height:2.5;
  font-weight:bold;
}

/* "Bottom bits" ( Share buttons & howTo icon & confirm button )
*/

#confirmBtn
{
  position:absolute;
  left:50%;
  top:17px;
  display:block;
  pointer-events:auto;
}

#confirmBtn.button
{
  background-image:url(/builder/webGL/Assets/Images/customise.png);
  cursor: pointer;
  margin-left:-146px !important;
  width: 293px;
  height: 47px;
}

#confirmBtn.progress
{
  background-color:#049804;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  -webkit-background-size:80px 80px;
  background-size:80px 80px;
  width: 283px;
  height: 37px;
  margin-left: -142px;
  margin-top: 4px;
  border: 1px solid #044904;
  outline: 4px solid white;
}

@keyframes progress
{
  from { background-position:  0px; }
  to   { background-position: 80px; }
}

#confirmBtn.progress
{
  animation: progress 1s linear infinite;
}

@-webkit-keyframes progress
{
  from { background-position:  0px; }
  to   { background-position: 80px; }
}

#confirmBtn.progress
{
  -webkit-animation: progress 1s linear infinite;
}

#rightSideIcons
{
  float:right;
  width:220px;
  margin: 10px 5px 5px;
  pointer-events:auto;
}

#rightSideIcons img
{
  float: right;
  margin: 0 12px 6px 0;
}


@media (max-width:980px) {
  /* make u-sofa > £ 1K fit */
  #sofaDetails #sofaCost {
    font-size: 20pt; line-height: 1.6;
  }

  #sofaDetails {
    transform: scale(0.9) translateX(-15px); -webkit-transform: scale(0.9) translateX(-15px);
  }

  /* smaller confirm button */
  #confirmBtn.button {
    background-size: contain;
    width: 220px; height: 35px;
    margin-left: -80px !important;
  }

  #confirmBtn.progress {
    transform: scale(0.75) translate(39px,-8px); -webkit-transform: scale(0.75) translate(39px,-8px);
  }
}


@media (max-width:767px) {

  /* lose help button */

  #rightSideIcons img:first-child {
    display: none;
  }

  /* fold botton pieces in three rows */

  #bottomPieces {
    height: 200px;
  }

  #sofaDetails, #rightSideIcons {
    position: absolute;
    left: 50%; float: none;
  }

  #sofaDetails.sofaType1 {
    transform: scale(0.9) translateX(-135px); -webkit-transform: scale(0.9) translateX(-135px);
  }

  #sofaDetails.sofaType2 {
    transform: scale(0.9) translateX(-145px); -webkit-transform: scale(0.9) translateX(-145px);
  }

  #sofaDetails.sofaType3 {
    transform: scale(0.9) translateX(-175px); -webkit-transform: scale(0.9) translateX(-175px);
  }

  #sofaDetails.sofaType3 .sofaPriceContainer {
    width: 90px; /* same width for $xxx and $xxxx */
  }

  #rightSideIcons {
    width: 162px;
    margin-left: -81px;
    bottom: 0
  }

  #confirmBtn {
    top: 80px;
  }

  #confirmBtn.button {
    margin-left: -110px !important;
  }

  #confirmBtn.progress {
    transform: scale(0.75) translate(-2px,-8px); -webkit-transform: scale(0.75) translate(-2px,-8px);
  }
}

/* The seat extension GUI
*/

#seatExtensions
{
  display:none;
  width:100px;
  bottom:10px;
  right:10px;
  position:absolute;
  pointer-events:auto;
  overflow:hidden;
  border:1px solid #443535;
  border-bottom:0;
  background-color:rgba(247,234,222,0.62);
}

@media (max-width:1200px) {
  #seatExtensions {
    bottom: 90px;
  }
}

@media (max-width:640px) {
  #seatExtensions {
    bottom: 170px;
  }
}

.extensionOption
{
  height:60px;
  line-height:60px;
  border-bottom:1px solid #443535;
  color:#443535;
  pointer-events:auto;
}

.extensionOption:hover
{
  background:rgba(100,100,100,0.5);
}

.extensionOption .stylisedTickbox
{
  float: right;
  margin: 19px 15px;
}

/* Some misc classes
*/

.guiArrowUp
{
  height:50%;
  margin-top:13%;
}

.guiArrowDown
{
  height:50%;
  margin-top:13%;
}

.guiArrowLeft
{
  width:50%;
  margin-left:13%;
  margin-top:14px;
}

.guiArrowRight
{
  width:50%;
  margin-left:13%;
  margin-top:14px;
}

@media (min-width: 0px) and (max-width:878px) {
  #container {
    top: 5px;
    left: 0;
  }
  img {
    max-width: 100%;
  }
  img#preview {
    height: auto;
    /*width: auto; display: block; float: right;*/
    width: 100%;
    left: initial;
    right: 15px;
  }
}

@media (min-width: 0px) and (max-width:715px) {
  img#logo {
    bottom: 75px;
  }
}

@media (max-width:340px) {

  /* lose swatches (clipped on iphone 5) */
  #primaryFabricImage, #secondaryFabricImage { display: none; }
  /* 200% because it gets multiplied by 50% width of #topPieces */
  #primaryTextureSelector, #secondaryTextureSelector { width: 200%; }
  #mainFabric, #altFabric { width: 90%; }

}