/* Room customizer */ div.roomcustomizer { width: 940px; height: 651px; position: relative; background: url('/widgets/assets/customrooms/interface/bg_room_customizer.png') scroll no-repeat center bottom; overflow: hidden; font-size: 0.8em; } div.roomcustomizer #customRoomBuilderClose { position: absolute; top: 0; right: 90px; background: transparent url('/widgets/assets/customrooms/interface/btn_close.png') scroll no-repeat left top; width: 42px; height: 42px; } div.roomcustomizer #customRoomBuilderClose span { display: none; } div.roomcustomizer .saveButton { display: block; position: absolute; top: 0; left: 428px; background: transparent url('/widgets/assets/customrooms/interface/btn_save.png') scroll no-repeat left top; width: 84px; height: 36px; } a.backButton { display: block; width: 42px; height: 42px; position: absolute; top: 0; left: 90px; background: transparent url('/widgets/assets/customrooms/interface/btn_left.png') scroll no-repeat left top; } a.backButton span { display: none; } #customroombuilderholdercontainer { background: #000; width: 585px; height: 457px; position: absolute; top: 100px; left: 177px; } #customroombuilder, .roomHolder, #viewerSceneHolder { width: 572px; height: 440px; position: relative; margin: 9px 0 0 7px; } .roomHolder { cursor: pointer; } #customroombuilder .assetHolder, .roomHolder .assetHolder, #petshop #roomcontainer .customroom .assetHolder, #viewerSceneHolder .assetHolder { position: absolute; border: none; } #customroombuilder .assetHolder { cursor: pointer; } #customroombuilder .assetHolder.background { cursor: default; } #customroombuilder .assetHolder.background.selected { border: none; margin: 0; } #customroombuilder .assetHolder.selected { border: 3px solid #d2117c; margin: -3px 0 0 -3px; } #customroombuilder .assetHolder a.deleteAssetButton { display: none; } #customroombuilder .assetHolder.selected a.deleteAssetButton { display: block; height: 42px; width: 42px; background: transparent url('/widgets/assets/customrooms/interface/btn_close.png') scroll no-repeat left top; position: absolute; top: -21px; right: -21px; } /* Background selector */ #roombuilderholder { width: 940px; height: 651px; position: absolute; top: 0; } #premaderoomsholder { width: 90%; height: 724px; position: absolute; top: 21px; left: 5%; } #premaderoomsholder .container { width: 675px; height: 660px; overflow-y: scroll; margin: 10px auto 0; } #customroombackgrounds { margin-top: 20px; top: 0; } #customroombackgrounds div.bgPage { position: relative; } #customroombackgrounds .bgholder { float: left; margin: 14px; height: 234px; width: 300px; } /* Music controls */ .roomcustomizer .musicholder { display: block; width: 96px; height: 39px; position: absolute; top: 117px; left: 190px; background: transparent url('/widgets/assets/customrooms/interface/img_music_control_holder.png') scroll no-repeat left top; z-index: 200; } .roomcustomizer .panelFeedback .musicholder { top: 168px; left: 307px; } .roomcustomizer #premaderoomscontainer .musicholder { display: none; } .roomcustomizer .musicholder a { display: block; width: 25px; height: 25px; background: transparent url('/widgets/assets/customrooms/interface/thumbnail_no_music.png') scroll no-repeat left top; } .roomcustomizer .musicholder a.play { position: absolute; right: 7px; top: 7px; background-image: url('/widgets/assets/customrooms/interface/btn_music_control_play.png'); } .roomcustomizer .musicholder a.play.pause { background-image: url('/widgets/assets/customrooms/interface/btn_music_control_pause.png'); } .roomcustomizer .musicholder span.songid { display: block; width: 28px; height: 25px; position: absolute; left: 34px; top: 8px; font-family: Thingamajig; color: #fff; font-size: 1.6em; letter-spacing: 1px; } a.customizerNav.addScene { display: block; width: 135px; height: 36px; padding: 15px 10px 0 85px; position: absolute; top: 0; left: 90px; background: transparent url('/widgets/assets/customrooms/interface/btn_action_customizer_new.png') scroll no-repeat left top; font-family: 'CenturyGothic-Bold'; color: #fff; font-weight: bold; font-size: 1.4em; text-decoration: none; text-transform: uppercase; } a.customizerNav.addScene.mediumtext { font-size: 1.2em; padding-top: 16px; height: 35px; } a.customizerNav.addScene.longtext { font-size: 1em; padding-top: 11px; height: 40px; } /* Existing room selection */ #panelModePick p.title { font-size: 3em; margin: 0; text-align: center; position: relative; top: 45px; } #panelModePick div.sceneContainer { width: 780px; height: 491px; padding: 30px 0 0; background: #000 url('/widgets/assets/customrooms/interface/bg_room_assets_items_container.png') scroll no-repeat 8px 10px; position: absolute; left: 80px; top: 130px; } #panelModePick div.sceneHolder { width: 700px; height: 451px; margin: 20px 0 0 50px; padding: 20px 0 0; position: relative; overflow-y: scroll; overflow-x: hidden; } #panelModePick div.sceneHolder .room { width: 300px; height: 231px; margin: 0 0 20px 20px; float: left; position: relative; } #panelModePick div.sceneHolder .room .assetHolder { position: absolute; } #panelModePick div.sceneHolder .room .unpinpanel, #panelModePick div.sceneHolder .room .unpinbutton, #panelModePick div.sceneHolder .room .editbutton, #panelModePick div.sceneHolder .room .movebutton { display: none; } #panelModePick div.roomInfo { position: absolute; width: 290px; height: 51px; left: 6px; top: -6px; background: transparent url('/widgets/assets/customrooms/interface/btn_room_customizer_action_wide.png') scroll no-repeat left top; background-size: 100% 100%; z-index: 5; } #panelModePick div.roomInfo div { width: 40px; height: 40px; position: relative; left: 20px; top: 4px; border: 2px solid #000; background: #fff; } #panelModePick div.roomInfo div img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #panelModePick div.roomInfo span { position: absolute; top: 17px; left: 72px; font-family: Thingamajig; color: #fff; letter-spacing: 1px; font-size: 1.25em; } #panelModePick div.roomHolder { zoom: 0.52; -moz-transform: scale(0.52); position: absolute; z-index: 4; margin: 0; width: auto; height: auto; } #panelModePick p#premaderoomsempty { display: none; width: 70%; margin: 0 15%; position: relative; top: 150px; color: #fff; font-family: 'CenturyGothic-Bold'; font-size: 1.5em; } /* */ .roomcustomizer p, .roomcustomizer h1, .roomcustomizer h2 { text-align: center; } .roomcustomizer p.title { width: 100%; position: absolute; top: 35px; margin-top: 0; font-size: 3em; letter-spacing: 1px; font-family: Thingamajig; color: #fff; } .roomcustomizer .separator { background: transparent url('/widgets/assets/customrooms/interface/separator_line.png') scroll no-repeat left top; width: 515px; height: 35px; position: absolute; top: 341px; left: 222px; color: #fff; text-align: center; font-family: 'CenturyGothic-Bold'; } .roomcustomizer .separator span { display: block; margin-top: 15px; } #panelModeBuildBackground a.roomcustomizerup, #panelModePick a.roomcustomizerup { background: transparent url('/widgets/assets/customrooms/interface/btn_up.png') scroll no-repeat left top; display: block; height: 42px; width: 42px; position: absolute; left: 866px; top: 120px; } #panelModeBuildBackground a.roomcustomizerdown, #panelModePick a.roomcustomizerdown { background: transparent url('/widgets/assets/customrooms/interface/btn_down.png') scroll no-repeat left top; display: block; height: 42px; width: 42px; position: absolute; left: 869px; top: 600px; } #panelModeBuildBackground a.roomcustomizerup.disabled, #panelModeBuildBackground a.roomcustomizerdown.disabled, #panelModePick a.roomcustomizerup.disabled, #panelModePick a.roomcustomizerdown.disabled { visibility: hidden; } #panelModeSelection { position: relative; width: 940px; height: 651px; } #panelModeSelection #btnModeSelectBuild { width: 575px; height: 260px; background: transparent url('/widgets/assets/customrooms/interface/btn_new_scene.png') scroll no-repeat left top; position: absolute; top: 60px; left: 179px; color: #fff; font-family: 'CenturyGothic-Bold'; text-align: center; text-decoration: none; } #panelModeSelection #btnModeSelectBuild span.selectionButton { position: absolute; top: 113px; left: 48px; font-size: 4em; letter-spacing: 1px; font-family: Thingamajig; display: block; width: 500px; } #panelModeSelection #btnModeSelectBuild span.selectionButton.longtext { top: 87px; } #panelModeSelection #btnModeSelectBuild span.selectionAction { margin: 232px 0 0 230px; display: block; width: 147px; text-transform: uppercase; } #panelModeSelection #btnModeSelectBuild span.selectionAction.longtext { margin-top: 226px; } #panelModeSelection #btnModeSelectPick { width: 595px; height: 214px; background: transparent url('/widgets/assets/customrooms/interface/btn_other_rooms.png') scroll no-repeat left top; position: absolute; bottom: 47px; left: 172px; color: #fff; font-family: 'CenturyGothic-Bold'; text-align: center; text-decoration: none; } #panelModeSelection #btnModeSelectPick span.selectionButton { position: absolute; top: 73px; left: 65px; font-size: 3.5em; letter-spacing: 1px; font-family: Thingamajig; display: block; width: 475px; } #panelModeSelection #btnModeSelectPick span.selectionButton.longtext { top: 47px; } #panelModeSelection #btnModeSelectPick span.selectionAction { margin: 186px 0 0 230px; display: block; width: 146px; text-transform: uppercase; } #panelModeSelection #btnModeSelectPick span.selectionAction.longtext { margin-top: 179px; } #roomassetcategories { width: 940px; height: 87px; } #roomassetcategories ul { margin: 0 0 0 80px; padding: 0; width: 940px; height: 87px; } #roomassetcategories li { list-style-type: none; float: left; margin: 0 21px 0 0; } #roomassetcategories li:last-child { margin: 0; } #roomassetcategories a { display: block; background: transparent scroll no-repeat left 10px; background-image: none; width: 140px; height: 87px; } #roomassetcategories a.backgrounds { background-image: url('/widgets/assets/customrooms/categories/btn_category_decor.png'); } #roomassetcategories a.furniture { background-image: url('/widgets/assets/customrooms/categories/btn_category_furniture.png'); } #roomassetcategories a.objects { background-image: url('/widgets/assets/customrooms/categories/btn_category_objects.png'); } #roomassetcategories a.pets { background-image: url('/widgets/assets/customrooms/categories/btn_category_pets.png'); } #roomassetcategories a.music { background-image: url('/widgets/assets/customrooms/categories/btn_category_music.png'); } #roomassetcategories a:hover, #roomassetcategories a:active { background-position: left top; } #roomassets { position: absolute; left: 0; bottom: 0; height: 87px; width: 940px; } #roomassetitems { display: block; position: absolute; left: 80px; bottom: -585px; width: 780px; height: 563px; padding: 20px 0 0; z-index: 1000; -webkit-transition: bottom .25s ease-out; -moz-transition: bottom .25s ease-out; -ms-transition: bottom .25s ease-out; -o-transition: bottom .25s ease-out; transition: bottom .25s ease-out; } #roomassetitems.noTransition { transition: none; } #roomassetitems.open { display: block; bottom: 0; } #toolboxcontainer { width: 780px; height: 543px; padding: 30px 0 0; background: #000 url('/widgets/assets/customrooms/interface/bg_room_assets_items_container.png') scroll no-repeat 8px 10px; } #roomassetitems .closeButton { position: absolute; top: 3px; right: -12px; background: transparent url('/widgets/assets/customrooms/interface/btn_close.png') scroll no-repeat left top; width: 42px; height: 42px; } #roomassetitems .toolbox { width: 750px; height: 525px; overflow-y: scroll; overflow-x: hidden; } #toolboxcontainer .toolbox:before { display: block; width: 744px; height: 10px; position: absolute; top: 50px; left: 18px; content: ""; /* Gradient for a smoother scrolling experience */ background: -moz-linear-gradient(top, rgba(254,236,162,1) 0%, rgba(254,236,162,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,236,162,1)), color-stop(100%,rgba(254,236,162,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(254,236,162,1) 0%,rgba(254,236,162,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(254,236,162,1) 0%,rgba(254,236,162,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(254,236,162,1) 0%,rgba(254,236,162,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(254,236,162,1) 0%,rgba(254,236,162,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feeca2', endColorstr='#00feeca2',GradientType=0 ); /* IE6-9 */ } #toolboxcontainer .toolbox:after { display: block; width: 744px; height: 10px; position: absolute; bottom: 8px; left: 18px; content: ""; /* Gradient for a smoother scrolling experience */ background: -moz-linear-gradient(top, rgba(254,236,162,0) 0%, rgba(254,236,162,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,236,162,0)), color-stop(100%,rgba(254,236,162,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(254,236,162,0) 0%,rgba(254,236,162,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(254,236,162,0) 0%,rgba(254,236,162,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(254,236,162,0) 0%,rgba(254,236,162,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(254,236,162,0) 0%,rgba(254,236,162,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00feeca2', endColorstr='#feeca2',GradientType=0 ); /* IE6-9 */ } #roomassetitems ul { width: 740px; } #roomassetitems li { list-style-type: none; float: left; margin: 20px 14px; } #roomassetitems li a { border: none; width: 140px; height: 65px; display: block; padding: 1px; } #roomassetitems li a.selected { padding: 0; border: 1px solid #d2117c; } #roomassetitems a img { display: block; width: 140px; height: 65px; } #panelModePick ul { display: none; } /* #panelFeedbackAdded */ .feedbackCustomRoom { background: #000; width: 330px; height: 258px; position: absolute; left: 304px; top: 164px; } .feedbackCustomRoom .holder { position: relative; margin: 5px auto auto 6px; width: 322px; height: 248px; } .feedbackCustomRoom .holder div.room { zoom: 0.56; -moz-transform: scale(0.56); position: absolute; z-index: 4; margin: 0; width: auto; height: auto; } .feedbackCustomRoom .holder div.room div.assetHolder { position: absolute; } .feedbackActions { position: absolute; margin: 0; top: 395px; width: 940px; height: 200px; z-index: 10; text-align: center; } .feedbackActions .button { display: block; margin: 0; background: transparent url('/widgets/assets/customrooms/interface/btn_action_customizer.png') scroll no-repeat left top; width: 230px; height: 36px; padding-top: 15px; font-family: 'CenturyGothic-Bold'; color: #fff; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 1.4em; } .feedbackActions .button.mediumtext { font-size: 1.2em; height: 35px; padding-top: 16px; } .feedbackActions .button.longtext, .feedbackActions .button.action.longtext { font-size: 1em; height: 33px; padding-top: 18px; } .feedbackActions .button.action.replaceOldest, .feedbackActions .button.action.replaceChoice { background-image: url('/widgets/assets/customrooms/interface/btn_room_customizer_action_wide.png'); width: 300px; } .feedbackActions .button.action { position: absolute; top: 80px; font-size: 1.2em; } .feedbackActions .button.action.replaceOldest { left: 160px; } .feedbackActions .button.action.signup, .feedbackActions .button.action.removeItem { left: 200px; } .feedbackActions .button.action.replaceChoice { right: 160px; } .feedbackActions .button.action.login, .feedbackActions .button.action.saveFinish { right: 200px; } .feedbackActions .button.download { width: 300px; background-image: url('/widgets/assets/customrooms/interface/btn_action_customizer_download.png'); margin: 0 auto; } .feedbackActions .button.new { width: 135px; padding-left: 80px; padding-right: 15px; background-image: url('/widgets/assets/customrooms/interface/btn_action_customizer_new.png'); position: absolute; left: 220px; top: 146px; text-align: left; } .feedbackActions .button.new.mediumtext { } .feedbackActions .button.new.longtext { height: 39px; padding-top: 12px; } .standalone .feedbackActions .button.new { left: 0; margin: 0 auto; position: relative; top: 95px; } .feedbackActions .button.view { position: absolute; right: 200px; top: 146px; } .standalone .feedbackActions .button.view { display: none; } .feedbackActions .button .format { font-weight: lighter; } .feedbackActions .button.link { display: inline-block; width: auto; height: auto; position: relative; top: 150px; background: none; color: #fff; text-decoration: underline; } .feedbackActions .button.link:active, .feedbackActions .button.link:hover { color: #d2117c; } .feedbackActions .separator { top: 85px; } .panelFeedback h1, #pagecontents h2, #pagecontents p, .roomcustomizer h2, .roomcustomizer p { color: #fff; text-align: center; font-family: Thingamajig; } #header h2.longtext { font-size:3.5em; } #pagecontents h2 { color:#d3007f; } .fancybox-overlay h2, .fancybox-overlay p { margin-top: 1em; } .panelFeedback h1 { font-size: 3.5em; margin: 45px 0 0; font-weight: normal; } .panelFeedback h2 { font-size: 1.75em; } .panelFeedback h2.scene_title { font-family: 'CenturyGothic-Bold'; font-weight: normal; font-size: 1.5em; text-transform: uppercase; margin: 17px 0 0; } .panelFeedback p { font-size: 1.5em; margin: 0; letter-spacing: 1px; } /* Viewer */ #panelViewerSingleScene #viewerSceneFrame { position: absolute; left: 177px; top: 104px; width: 585px; height: 457px; background: #000; z-index: 0; } #panelViewerSingleScene p.title { position: relative; top: 45px; font-size: 3em; letter-spacing: 1px; margin: 0; } #panelViewerSingleScene #viewerButtons { z-index: 1; } #panelViewerSingleScene a.viewerNavButton, #panelViewerSingleScene a.viewerActionButton { display: block; position: absolute; background: transparent scroll no-repeat left top; } #panelViewerSingleScene a.viewerNavButton { top: 302px; width: 60px; height: 60px; } #panelViewerSingleScene a.viewerActionButton { top: 534px; width: 40px; height: 40px; } #panelViewerSingleScene a#viewerPrevScene { left: 80px; background-image: url('/widgets/assets/customrooms/interface/btn_viewer_button_prev.png'); } #panelViewerSingleScene a#viewerNextScene { right: 80px; background-image: url('/widgets/assets/customrooms/interface/btn_viewer_button_next.png'); } #panelViewerSingleScene a#viewerEdit { top: 528px; left: 440px; width: 60px; height: 60px; background-image: url('/widgets/assets/customrooms/interface/btn_viewer_button_edit.png'); } #panelViewerSingleScene a#viewerSave { left: 380px; background-image: url('/widgets/assets/customrooms/interface/btn_viewer_button_save.png'); } #panelViewerSingleScene a#viewerOrder { right: 380px; background-image: url('/widgets/assets/customrooms/interface/btn_viewer_button_order.png'); } #panelViewerSingleScene a#viewerDelete { right: 165px; background-image: url('/widgets/assets/customrooms/interface/btn_viewer_button_delete.png'); } #panelViewerSingleScene .viewerPanel { display: none; width: 585px; height: 457px; position: absolute; top: 0; left: 0; background: transparent scroll no-repeat left top; z-index: 1000000; } #panelViewerSingleScene a.panelCloseButton { display: block; position: absolute; top: -21px; right: -21px; background: transparent url('/widgets/assets/customrooms/interface/btn_close.png') scroll no-repeat left top; width: 42px; height: 42px; } #panelViewerSingleScene #viewerSceneSavePanel { background-image: url('/widgets/assets/customrooms/interface/bg_scene_save.png'); } #panelViewerSingleScene #viewerSceneSavePanel a.viewerSaveButton { display: block; width: 340px; height: 35px; padding: 16px 0 0; position: absolute; left: 123px; background: transparent url('/widgets/assets/customrooms/interface/btn_scene_save.png') scroll no-repeat left top; font-weight: bold; text-align: center; color: #fff; font-size: 1.3em; text-decoration: none; text-transform: uppercase; } #panelViewerSingleScene #viewerSceneSavePanel a.viewerSaveButton span { font-weight: normal; } #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadJPG { top: 36px; } #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadPDF { top: 107px; } div.roomcustomizer[lang="es-mx"] #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadPDF { height: 33px; padding-top: 18px; font-size: 1.1em; } #panelViewerSingleScene #viewerSceneDeletePanel { background-image: url('/widgets/assets/customrooms/interface/bg_scene_delete.png'); } #panelViewerSingleScene #viewerSceneDeletePanel p.title { font-family: 'CenturyGothic-Bold'; color: #d3007f; font-size: 2em; text-transform: uppercase; } #panelViewerSingleScene #viewerSceneDeletePanel a.viewerDeleteButton { display: block; width: 129px; height: 30px; padding: 10px 0 0; position: absolute; top: 120px; background: transparent scroll no-repeat left top; font-weight: bold; text-align: center; color: #fff; font-size: 1.3em; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; } #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteCancel { left: 148px; background-image: url('/widgets/assets/customrooms/interface/btn_scene_delete_cancel.png'); } #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteConfirm { right: 148px; background-image: url('/widgets/assets/customrooms/interface/btn_scene_delete_confirm.png'); } #panelViewerSingleScene #viewerSceneDeletePanel a.viewerDeleteButton.mediumtext { width: 105px; height: 26px; padding: 14px 12px 0; font-size: .8em; } #panelViewerSingleScene #viewerSceneDeletePanel a.viewerDeleteButton.longtext { width: 105px; padding: 10px 12px 0; font-size: .8em; } /* Order & story viewer & replace */ #panelOrderScenes p.title, #panelViewerStory p.title, #panelReplaceScene p.title { font-size: 3em; margin: 0; text-align: center; position: relative; top: 45px; } #panelOrderScenes p.subtitle, #panelViewerStory p.subtitle, #panelReplaceScene p.subtitle { font-size: 1.5em; margin: 0; text-align: center; position: relative; top: 45px; letter-spacing: 1px; } #panelOrderScenes div.sceneContainer, #panelViewerStory div.sceneContainer, #panelReplaceScene div.sceneContainer { width: 780px; height: 491px; padding: 30px 0 0; background: #000 url('/widgets/assets/customrooms/interface/bg_room_assets_items_container.png') scroll no-repeat 8px 10px; position: absolute; left: 80px; top: 130px; } #panelOrderScenes div.sceneHolder, #panelViewerStory div.sceneHolder, #panelReplaceScene div.sceneHolder { width: 700px; height: 440px; margin: 20px 0 0 50px; padding: 20px 0 0; overflow-y: scroll; overflow-x: hidden; color: #fff; font-family: Thingamajig; } #panelOrderScenes div.sceneHolder .room, #panelViewerStory div.sceneHolder .room, #panelReplaceScene div.sceneHolder .room { width: 142px; height: 109px; margin: 0 0 20px 20px; float: left; } #panelViewerStory div.sceneHolder .room, #panelReplaceScene div.sceneHolder .room { position: relative; } #panelReplaceScene div.sceneHolder .room.selected:before { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .33) url('/widgets/assets/customrooms/interface/img_replace_selected.png') scroll no-repeat center center; z-index: 117; content: ""; } #panelOrderScenes div.sceneHolder .room .roomContents, #panelViewerStory div.sceneHolder .room .roomContents, #panelReplaceScene div.sceneHolder .room .roomContents { position: absolute; width: 142px; height: 109px; } #panelOrderScenes div.sceneHolder .room .customroomobjects, #panelViewerStory div.sceneHolder .room .customroomobjects, #panelReplaceScene div.sceneHolder .room .customroomobjects { -moz-transform: scale(0.25); zoom: 0.25; position: absolute; } #panelOrderScenes div.sceneHolder .room .assetHolder, #panelViewerStory div.sceneHolder .room .assetHolder, #panelReplaceScene div.sceneHolder .room .assetHolder { position: absolute; } #panelOrderScenes div.sceneHolder .room .unpinpanel, #panelViewerStory div.sceneHolder .room .unpinpanel, #panelReplaceScene div.sceneHolder .room .unpinpanel, #panelOrderScenes div.sceneHolder .room .unpinbutton, #panelViewerStory div.sceneHolder .room .unpinbutton, #panelReplaceScene div.sceneHolder .room .unpinbutton, #panelOrderScenes div.sceneHolder .room .editbutton, #panelViewerStory div.sceneHolder .room .editbutton, #panelReplaceScene div.sceneHolder .room .editbutton, #panelViewerStory div.sceneHolder .room .movebutton, #panelReplaceScene div.sceneHolder .room .movebutton { display: none; } #panelOrderScenes div.sceneHolder .room .movebutton { display: block; width: 26px; height: 26px; position: absolute; top: -8px; left: -8px; background: transparent url('/widgets/assets/customrooms/interface/btn_scene_order_move.png') scroll no-repeat left top; z-index: 100; } #panelOrderScenes div.sceneHolder div.room.ui-draggable-dragging, #panelViewerStory div.sceneHolder div.room.ui-draggable-dragging { z-index: 1000; -webkit-box-shadow: 0px -1px 10px 0px rgba(230, 30, 130, 0.9); -moz-box-shadow: 0px -1px 10px 0px rgba(230, 30, 130, 0.9); box-shadow: 0px -1px 10px 0px rgba(230, 30, 130, 0.9); } #panelOrderScenes div.sceneHolder div.room.ui-droppable.hovered, #panelViewerStory div.sceneHolder div.room.ui-droppable.hovered { border: 3px solid #f0f; margin: -3px -3px 17px 17px; } #panelViewerStory div.scenenumber { position: absolute; bottom: -18px; left: 50%; padding: 8px 0 0; margin-left: -18px; width: 36px; height: 28px; background: transparent url('/widgets/assets/interface/bg_scenenumber_holder.png') scroll no-repeat left top; color: #fff; font-family: 'CenturyGothic-Bold'; font-weight: bold; font-size: 1.2em; z-index: 150000; text-align: center; } a.replaceButton { display: block; width: 230px; height: 35px; position: absolute; top: 0; left: 90px; background: transparent url('/widgets/assets/customrooms/interface/btn_action_customizer.png') scroll no-repeat left top; color: #fff; font-size: 1.25em; text-decoration: none; font-weight: bold; text-align: center; padding-top: 16px; } .roomcustomizer .exitConfirmationPanel { display: none; width: 940px; height: 651px; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,.75); z-index: 1000; } .roomcustomizer .exitConfirmationPanel div.popupHolder { width: 382px; height: 275px; position: absolute; top: 193px; left: 279px; background-color: #fff; } #panelModeBuild .exitConfirmationPanel p.title, #panelOrderScenes .exitConfirmationPanel p.title, #panelReplaceScene .exitConfirmationPanel p.title { position: relative; top: 30px; font-family: 'CenturyGothic-Bold'; color: #d3007f; text-transform: uppercase; font-size: 1.5em; font-weight: bold; text-align: center; } .roomcustomizer .exitConfirmationPanel a.orderConfirmationButton { display: block; width: 319px; height: 30px; position: absolute; left: 32px; padding: 10px 0 0; background: transparent scroll no-repeat left top; color: #fff; font-size: 1.5em; font-weight: bold; text-decoration: none; text-transform: uppercase; text-align: center; letter-spacing: 1px; } .roomcustomizer .exitConfirmationPanel a.orderConfirmationButton.longtext { height: 28px; padding-top: 12px; font-size: 1.2em; } .roomcustomizer .exitConfirmationPanel a.orderConfirmationButton.save { top: 91px; background-image: url('/widgets/assets/customrooms/interface/btn_order_confirmation_save.png'); } .roomcustomizer .exitConfirmationPanel a.orderConfirmationButton.cancel { top: 151px; background-image: url('/widgets/assets/customrooms/interface/btn_order_confirmation_quit.png'); } .roomcustomizer .exitConfirmationPanel a.orderConfirmationButton.quit { top: 211px; background-image: url('/widgets/assets/customrooms/interface/btn_order_confirmation_quit.png'); } div.fancybox-skin { background: transparent; box-shadow: none !important; } div.fancybox-inner { min-height: 1px; } #tutorialHolder { width:100%; height:100%; padding-top:120px; text-align:center; margin:auto;} #tutorialHolder .BrightcoveExperience { height:480px; } /* tablet */ @media screen and (max-width: 1023px) { div.roomcustomizer { width: 706px; height: 477px; padding-top: 20px; background: transparent url('/widgets/assets/customrooms/interface/bg_room_customizer_tablet.png') scroll no-repeat center bottom; } div.roomcustomizer p.title { top: 24px; margin: 0; font-size: 2.5em; text-align: center; } div.roomcustomizer .panelTutorial p.title { top: 40px; } div.roomcustomizer h1 { font-size: 2.5em; } div.roomcustomizer .saveButton { left: 326px; } div.roomcustomizer .musicholder { top: 108px; left: 147px; } #panelModeSelection, #roombuilderholder { width: 100%; height: 477px; } #panelOrderScenes #orderSceneConfirmationPanel { width: 100%; height: 100%; } /* Mode selection panel */ #panelModeSelection #btnModeSelectBuild { width: 432px; height: 196px; left: 138px; top: 46px; background-size: 100% 100%; } #panelModeSelection #btnModeSelectBuild span.selectionButton { width: 390px; top: 83px; left: 25px; font-size: 3em; } #panelModeSelection #btnModeSelectBuild span.selectionButton.longtext { top: 56px; } #panelModeSelection #btnModeSelectBuild span.selectionAction { width: 100px; margin: 173px 0 0 180px; } #panelModeSelection #btnModeSelectBuild span.selectionAction.longtext { margin-top: 168px; font-size: .8em; } .roomcustomizer .separator { top: 250px; left: 100px; } #panelModeSelection #btnModeSelectPick { width: 447px; height: 166px; left: 130px; bottom: 20px; background-size: 100% 100%; } #panelModeSelection #btnModeSelectPick span.selectionButton { width: 350px; top: 27px; left: 57px; font-size: 3em; } #panelModeSelection #btnModeSelectPick span.selectionButton.mediumtext { top: 33px; } #panelModeSelection #btnModeSelectPick span.selectionButton.longtext { top: 40px; font-size: 2.5em; } #panelModeSelection #btnModeSelectPick span.selectionAction { width: 105px; margin: 144px 0 0 175px; } #panelModeSelection #btnModeSelectPick span.selectionAction.mediumtext { margin-top: 144px; font-size: .9em; } #panelModeSelection #btnModeSelectPick span.selectionAction.longtext { margin-top: 138px; font-size: .8em; } /* Custom scene builder panel */ #customroombuilderholdercontainer { width: 380px; height: 295px; top: 80px; left: 163px; } #customroombuilder { -moz-transform: scale(0.65); zoom: 0.65; -moz-transform-origin: left top; transform-origin: left top; } #roomassets { height: 62px; } #roomassetcategories { width: 706px; height: 62px; } #roomassetcategories ul { width: 596px; margin: 0 0 0 64px; } #roomassetcategories li { margin: 0 5px 0 0; } #roomassetcategories a { width: 110px; height: 62px; background-size: 100% 100%; } #toolboxcontainer { width: 586px; background-image: url('/widgets/assets/customrooms/interface/bg_room_assets_items_container_tablet.png'); } #roomassetitems { left: 62px; width: 586px; height: 394px; } #roomassetitems .toolbox { width: 570px; height: 364px; } #roomassetitems ul { width: 580px; } #toolboxcontainer .toolbox:before { width: 540px; top: 49px; height: 20px; } #toolboxcontainer .toolbox:after { width: 540px; bottom: 0; height: 20px; } #roombuilderholder p.title { top: 60px; } #customroombuilderholdercontainer { top: 120px; } .roomcustomizer .exitConfirmationPanel div.popupHolder { top: 100px; left: 162px; } /* Feedback panels */ .roomcustomizer .panelFeedback .musicholder { top: 134px; left: 210px; } .roomcustomizer .panelFeedback p { width: 90%; margin: 0 5%; } .roomcustomizer .panelFeedback p.longtext { width: 98%; margin: 0 1%; } .feedbackCustomRoom { width: 260px; height: 200px; left: 223px; top: 150px; } .feedbackCustomRoom .holder { width: 199px; height: 154px; } .feedbackCustomRoom .holder div.room { zoom: 0.434; -moz-transform: scale(0.434); } .feedbackActions { width: 706px; height: 130px; top: 330px; } .feedbackActions .button.download, .feedbackActions .button.new, .feedbackActions .button.view { height: 29px; padding-top: 12px; background-size: 100% 100%; font-size: 1em; } .feedbackActions .button.download { width: 230px; } .feedbackActions .button.download.longtext { height: 29px; padding-top: 12px; font-size: .9em; } .feedbackActions .separator { top: 55px; } .feedbackActions .button.new, .feedbackActions .button.view { width: 184px; top: 100px; } .feedbackActions .button.new { left: 110px; width: 107px; height: 28px; padding: 13px 10px 0 67px; } .feedbackActions .button.new.longtext { width: 107px; height: 35px; padding: 6px 10px 0 67px; } .feedbackActions .button.view { right: 110px; } .feedbackActions .button.view.longtext { width: 164px; height: 35px; padding: 6px 10px 0 10px; } .feedbackActions .button.action { height: 29px; padding-top: 12px; background-size: 100% 100%; font-size: 1em; } .feedbackActions .button.action.replaceOldest, .feedbackActions .button.action.replaceChoice { width: 240px; margin-left: -120px; left: 50%; } .feedbackActions .button.action.replaceOldest { top: 0; } .feedbackActions .button.action.replaceChoice { top: 55px; } .feedbackActions .button.link { top: 100px; font-size: 1em; } .feedbackActions .button.action.signup, .feedbackActions .button.action.login, .feedbackActions .button.action.removeItem, .feedbackActions .button.action.saveFinish { width: 184px; top: 45px; } .feedbackActions .button.action.signup, .feedbackActions .button.action.removeItem { left: 135px; } .feedbackActions .button.action.login, .feedbackActions .button.action.saveFinish { right: 135px; } .feedbackActions .button.longtext, .feedbackActions .button.action.longtext { height: 36px; padding-top: 5px; } /* Viewer */ #panelViewerSingleScene #viewerSceneFrame { width: 438px; height: 341px; margin-left: -219px; left: 50%; top: 110px; } #viewerSceneHolder { zoom: 0.748; -moz-transform: scale(0.748); -moz-transform-origin: left top; transform-origin: left top; } #panelViewerSingleScene a.viewerNavButton { top: 50%; } #panelViewerSingleScene a#viewerNextScene { right: 40px; } #panelViewerSingleScene a#viewerPrevScene { left: 40px; } #panelViewerSingleScene a.viewerActionButton { top: auto; bottom: 30px; } #panelViewerSingleScene a#viewerSave { left: 35%; } #panelViewerSingleScene a#viewerEdit { margin-left: -30px; top: auto; bottom: 22px; left: 50%; } #panelViewerSingleScene a#viewerOrder { right: 35%; } #panelViewerSingleScene a#viewerDelete { right: 120px; } div.roomcustomizer #panelViewerSingleScene .musicholder { top: 95px; left: 120px; } #panelViewerSingleScene .viewerPanel { width: 440px; height: 342px; background-size: 100% 100%; } #panelViewerSingleScene #viewerSceneDeletePanel a.viewerDeleteButton { top: 105px; } #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteCancel { left: 15%; } #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteConfirm { right: 15%; } #panelViewerSingleScene #viewerSceneSavePanel a.viewerSaveButton { width: 272px; height: 28px; margin-left: -136px; padding-top: 13px; left: 50%; background-size: 100% 100%; font-size: 1.04em; } div.roomcustomizer[lang="es-mx"] #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadPDF { height: 27px; padding-top: 14px; font-size: .9em; } #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadJPG { top: 30px; } #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadPDF { top: 90px; } /* Story viewer and order panels */ #panelOrderScenes div.sceneContainer, #panelViewerStory div.sceneContainer, #panelReplaceScene div.sceneContainer { width: 650px; margin-left: -325px; top: 140px; left: 50%; background-image: url('/widgets/assets/customrooms/interface/bg_room_assets_items_container_tablet.png'); background-size: 98% 100%; } #panelOrderScenes div.sceneHolder, #panelViewerStory div.sceneHolder, #panelReplaceScene div.sceneHolder { width: 620px; height: 302px; margin: 5px 15px 0 15px; } #panelOrderScenes div.sceneHolder .room, #panelViewerStory div.sceneHolder .room, #panelReplaceScene div.sceneHolder .room { margin: 0 5px 20px; } a.replaceButton { left: 45px; } a.replaceButton.longtext { font-size: 1.1em; } #panelOrderScenes #orderSceneConfirmationPanel div.popupHolder { margin: -137px 0 0 -191px; left: 50%; top: 50%; } /* Pre-made scene selector */ #panelModePick div.sceneContainer { width: 650px; margin-left: -325px; top: 140px; left: 50%; background-image: url('/widgets/assets/customrooms/interface/bg_room_assets_items_container_tablet.png'); background-size: 98% 100%; } #panelModePick div.sceneHolder { width: 620px; height: 302px; margin: 5px 0 0 15px; } #panelModePick div.sceneHolder .room { margin: 0 5px 20px; } #tutorialHolder { padding-top: 80px; } #tutorialHolder .BrightcoveExperience { height: 360px; } } /* mobile */ @media screen and (max-width: 767px) { .fancybox-lock .fancybox-overlay { overflow-y: hidden !important; } div#wrongviewportorientation { display: none; } div.roomcustomizer { width: 320px; height: 455px; padding-top: 0; background: transparent url('/widgets/assets/customrooms/interface/bg_room_customizer_mobile.png') scroll no-repeat left bottom; } div.roomcustomizer #customRoomBuilderClose { right: 10px; top: 0; } div.roomcustomizer .saveButton { left: 118px; top: 0; z-index: 1; } #roombuilderholder p.title { margin: 0; } a.backButton { left: 10px; top: 0; z-index: 1; } #panelModeSelection { width: 100%; height: 398px; position: absolute; top: 57px; left: 0; background: none; } .roomcustomizer .separator { width: 227px; height: 32px; background-image: url('/widgets/assets/customrooms/interface/separator_line_mobile.png'); top: 210px; left: 46px; } .roomcustomizer .separator span { margin-top: 12px; margin-left: -2px; } #panelModeSelection p.title { margin: 0 auto; } #panelModeSelection p.title.longtext { font-size: 2em; top: 10px; } #panelModeSelection #btnModeSelectBuild { width: 288px; height: 135px; background-image: url('/widgets/assets/customrooms/interface/btn_new_scene_mobile.png'); background-size: 100% 100%; top: 60px; left: 15px; } #panelModeSelection #btnModeSelectBuild span.selectionButton { top: 55px; width: 250px; left: 22px; font-size: 2em; } #panelModeSelection #btnModeSelectBuild span.selectionButton.longtext { top: 38px; } #panelModeSelection #btnModeSelectBuild span.selectionAction { margin: 114px 0 0 95px; } #panelModeSelection #btnModeSelectBuild span.selectionAction.longtext { margin-top: 108px; font-size: .8em; } #panelModeSelection #btnModeSelectPick { width: 315px; height: 120px; background-image: url('/widgets/assets/customrooms/interface/btn_other_rooms_mobile.png'); background-size: 100% 100%; bottom: 21px; left: 3px; } #panelModeSelection #btnModeSelectPick span.selectionButton { top: 20px; left: 46px; width: 230px; font-size: 2em; } #panelModeSelection #btnModeSelectPick span.selectionButton.longtext { top: 20px; } #panelModeSelection #btnModeSelectPick span.selectionAction { margin: 98px 0 0 104px; } #panelModeSelection #btnModeSelectPick span.selectionAction.longtext { font-size: .8em; margin-top: 92px; } #customroombuilderholdercontainer, #panelViewerSingleScene #viewerSceneFrame { width: 94%; height: 233px; margin-left: 0; top: 75px; left: 3%; } #customroombuilder, .roomHolder, #viewerSceneHolder { width: 100%; height: 100%; margin: 3px; zoom: 1; -moz-transform: scale(1); } #customroombuilder { -moz-transform: scale(0.525); zoom: 0.525; -moz-transform-origin: left top; transform-origin: left top; position: absolute; } #customroombuilder, .roomHolder { margin: 0; } #roombuilderholder .assetHelper, #panelViewerSingleScene .assetHolder { -moz-transform: scale(0.515); zoom: 0.515; -moz-transform-origin: left top; transform-origin: left top; } #roomassetcategories { width: 320px; height: 48px; } #roomassetcategories ul { margin: 0; } #roomassetcategories li { margin: 0; } #roomassetcategories a { width: 64px; height: 48px; background-size: 100% 100%; } #roomassets { width: 320px; height: 48px; } #roomassetitems { width: 96%; height: 75%; left: 0; margin: 0 2%; padding: 0; } #toolboxcontainer { width: 100%; height: 100%; background-image: url('/widgets/assets/customrooms/interface/bg_room_assets_items_container_mobile.png'); } #roomassetitems.backgrounds { height: 95px; margin-top: -15px; } #roomassetitems .closeButton { top: -21px; right: 10px; } #roomassetitems .toolbox { width: 98%; height: 311px; } #toolboxcontainer .toolbox:before { width: 86%; left: 6%; top: 30px; } #toolboxcontainer .toolbox:after { width: 86%; left: 6%; bottom: 0; } #roomassetitems ul { width: 100%; } #roomassetitems li { margin: 6px 3px; } #roomassetitems li a { width: 108px; height: 50px; } #roomassetitems a img { width: 100%; height: 100%; } #panelViewerSingleScene a.customizerNav.addScene, #panelViewerStory a.customizerNav.addScene { width: 42px; height: 42px; padding: 0; left: 20px; background-image: url('/widgets/assets/customrooms/interface/btn_action_customizer_new_short.png'); color: rgba(0,0,0,0); } .panelFeedback { width: 320px; height: 100%; background: none; } .panelFeedback #feedbackAddedActions h1 { font-size: 3.5em; } .roomcustomizer .exitConfirmationPanel div.popupHolder { width: 320px; top: 17%; left: 0; } .roomcustomizer .exitConfirmationPanel a.orderConfirmationButton { width: 280px; left: 20px; background-size: 100% 100%; } /* Pre-made rooms browser */ #premaderoomsholder, #roombuilderholder { width: 100%; height: 398px; position: absolute; top: 62px; left: 0; background: none; } #roombuilderholder p.title, #panelModePick p.title { margin: 0; position: relative; top: 50px; font-size: 2.5em; } #roombuilderholder p.title { top: 5px; } #roombuilderholder p.title.longtext { top: 10px; font-size: 2em; } #panelModePick p.title.longtext { font-size: 2em; } #panelModePick div.sceneContainer { width: 100%; height: 311px; margin-left: 0; top: 114px; left: 0; background-image: url('/widgets/assets/customrooms/interface/bg_room_assets_items_container_mobile.png'); background-size: 96% 100%; } #panelModePick div.sceneHolder { width: 85%; height: 301px; margin: 0 0 0 10%; padding: 10px 0 0; } #panelModePick div.sceneHolder .room { width: 250px; height: 188px; margin: 5px 5px 10px; } #panelModePick div.roomInfo { width: 232px; height: 36px; } #panelModePick div.roomInfo div { width: 30px; height: 30px; top: 1px; } #panelModePick div.roomInfo span { top: 12px; left: 61px; font-size: .9em; } #panelModePick div.sceneHolder .room .roomHolder { width: 250px; height: 188px; zoom: 0.43; -moz-transform: scale(0.43); } #panelViewerSingleScene p.title.longtext, #panelOrderScenes p.title.longtext, #panelViewerStory p.title.longtext, #panelReplaceScene p.title.longtext { font-size: 2em; } #panelModeBuild .exitConfirmationPanel p.title, #panelOrderScenes .exitConfirmationPanel p.title, #panelReplaceScene .exitConfirmationPanel p.title { font-size: 1.5em; } /* Feedback panels */ .feedbackCustomRoom { background: #000; width: 257px; height: 198px; left: 32px; top: 140px; padding: 3px; position: absolute; } .feedbackCustomRoom .holder { width: 257px; height: 198px; position: relative; margin: 0; } .feedbackCustomRoom .holder div.room { zoom: 0.45; -moz-transform: scale(0.45); } .feedbackActions { margin: 0; width: 320px; height: 120px; top: 325px; } .feedbackActions#feedbackAddedActions { margin-top: 0; } .feedbackActions .button { width: 139px; height: 22px; margin: 0; padding-top: 8px; position: absolute; background-size: 100% 100%; font-size: 1em; z-index: 1; } .feedbackActions .button.longtext { font-size: .8em; } .feedbackActions .button span span { font-weight: normal; font-family: 'CenturyGothic'; } .feedbackActions .button.download { width: 200px; height: 28px; left: 63px; padding-top: 12px; } .feedbackActions .button.view { top: 80px; right: 15px; } .feedbackActions .button.new { top: 80px; left: 15px; width: 84px; height: 22px; padding: 9px 5px 0 50px; font-size: 0.7em; } .feedbackActions .button.new.longtext { width: 84px; height: 22px; padding: 7px 5px 0 50px; font-size: 0.5em; } .feedbackActions .separator { top: 44px; left: 48px; } #feedbackFullActions .button.action, #feedbackTooManyItemsActions .button.action { width: 200px; height: 21px; padding-top: 8px; margin-left: -100px; left: 50%; font-size: .9em; } #feedbackFullActions .button.action.replaceOldest, #feedbackTooManyItemsActions .button.action.saveFinish { top: 25px; } #feedbackFullActions .button.action.replaceChoice, #feedbackTooManyItemsActions .button.action.removeItem { top: 65px; } #feedbackFullActions .button.action.replaceOldest, #feedbackFullActions .button.action.replaceChoice { font-size: .8em; } #feedbackFullActions .button.link { top: 97px; } .feedbackActions .button.action.signup, .feedbackActions .button.action.removeItem, .feedbackActions .button.action.login, .feedbackActions .button.action.saveFinish, .feedbackActions .button.view { width: 129px; height: 22px; padding: 9px 5px 0 5px; font-size: 0.7em; } .feedbackActions .button.action.signup.longtext, .feedbackActions .button.action.removeItem.longtext, .feedbackActions .button.action.login.longtext, .feedbackActions .button.action.saveFinish.longtext, .feedbackActions .button.view.longtext { width: 129px; height: 22px; padding: 9px 5px 0 5px; font-size: 0.7em; } .feedbackActions .button.action.signup, .feedbackActions .button.action.removeItem { left: 15px; } .feedbackActions .button.action.login, .feedbackActions .button.action.saveFinish { right: 15px; } #feedbackNotLoggedInActions .button.action.longtext { height: 26px; padding-top: 3px; font-size: .7em; } #feedbackNotLoggedInActions .button.action { top: 45px; font-size: .9em; } #feedbackNotLoggedInActions .button.link { top: 85px; } .panelFeedback h1 { text-align: center; margin-bottom: 9px; font-size: 2.5em; } .panelFeedback h1.longtext { font-size: 2em; } .panelFeedback#panelFeedbackFull h1, .panelFeedback#panelFeedbackNotLoggedIn h1 { font-size: 2.25em; } .panelFeedback#panelFeedbackFull h1.longtext, .panelFeedback#panelFeedbackNotLoggedIn h1.longtext { font-size: 2em; } .panelFeedback p { width: 280px; margin: 0 0 0 20px; text-align: center; font-size: 1.1em; } /* Viewer */ #panelOrderScenes div.sceneContainer, #panelViewerStory div.sceneContainer, #panelReplaceScene div.sceneContainer { width: 98%; height: 311px; margin-left: 0; top: 145px; left: 1%; background-image: url('/widgets/assets/customrooms/interface/bg_room_assets_items_container_mobile.png'); background-size: 96% 100%; } #panelOrderScenes div.sceneHolder, #panelViewerStory div.sceneHolder, #panelReplaceScene div.sceneHolder { width: 88%; height: 271px; margin: 0 0 0 8%; padding: 10px 0 0; } #panelOrderScenes div.sceneHolder .room, #panelViewerStory div.sceneHolder .room, #panelReplaceScene div.sceneHolder .room { width: 114px; height: 88px; margin: 5px 5px 10px; } #panelOrderScenes div.sceneHolder .room .roomContents, #panelViewerStory div.sceneHolder .room .roomContents, #panelReplaceScene div.sceneHolder .room .roomContents { width: 114px; height: 88px; } #panelOrderScenes div.sceneHolder .room .customroomobjects, #panelViewerStory div.sceneHolder .room .customroomobjects, #panelReplaceScene div.sceneHolder .room .customroomobjects { zoom: 0.2; -moz-transform: scale(0.2); } #panelViewerStory div.scenenumber { width: 18px; height: 14px; padding-top: 4px; margin-left: -9px; bottom: 0; background-size: 100% 100%; font-size: .8em; } #panelOrderScenes div.sceneHolder div.room.ui-droppable.hovered, #panelViewerStory div.sceneHolder div.room.ui-droppable.hovered { margin: 2px 2px 7px 2px; } a.replaceButton { width: 230px; height: 20px; padding-top: 5px; top: 115px; left: 45px; background-size: 100% 100%; } #panelOrderScenes #orderSceneConfirmationPanel div.popupHolder { width: 300px; margin: 0; top: 80px; left: 10px; } #panelOrderScenes #orderSceneConfirmationPanel a.orderConfirmationButton { width: 90%; left: 5%; background-size: 100% 100%; } #panelViewerSingleScene #viewerSceneFrame { top: 110px; } #panelViewerSingleScene .viewerPanel, #panelViewerSingleScene a.viewerNavButton, #panelViewerSingleScene a.viewerActionButton { background-size: 100% 100%; } #panelViewerSingleScene a.viewerNavButton { top: 400px; } #panelViewerSingleScene a.viewerNavButton, #panelViewerSingleScene a.viewerActionButton { width: 40px; height: 40px; } #panelViewerSingleScene a#viewerPrevScene { left: 15px; } #panelViewerSingleScene a#viewerNextScene { right: 15px; } #panelViewerSingleScene a#viewerSave { top: 320px; left: 60px; } #panelViewerSingleScene a#viewerEdit { top: 310px; left: 50%; margin-left: -30px } #panelViewerSingleScene a#viewerOrder { top: 400px; left: 50%; margin-left: -20px; } #panelViewerSingleScene a#viewerDelete { top: 320px; right: 60px; } #panelViewerSingleScene #viewerSceneSavePanel, #panelViewerSingleScene #viewerSceneDeletePanel { width: 100%; height: 100%; } #panelViewerSingleScene a.panelCloseButton { top: -21px; right: 0; } #panelViewerSingleScene #viewerSceneSavePanel a.viewerSaveButton { width: 80%; height: 22px; left: 10%; margin-left: 0; padding: 12px 0 0; background-size: 100% 100%; font-size: .9em; } #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadJPG { top: 20px; } #panelViewerSingleScene #viewerSceneSavePanel a#viewerDownloadPDF { top: 66px; } #panelViewerSingleScene #viewerSceneDeletePanel p.title { top: 25px; letter-spacing: 0; } #panelViewerSingleScene #viewerSceneDeletePanel p.title.longtext { font-size: 1.5em; } #panelViewerSingleScene #viewerSceneDeletePanel a.viewerDeleteButton { top: 70px; } #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteCancel { left: 15px; } #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteConfirm { right: 15px; } #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteCancel.longtext, #panelViewerSingleScene #viewerSceneDeletePanel a#viewerDeleteConfirm.longtext { font-size: .75em; width: 105px; padding: 10px 12px 0; } /* Music holder */ .roomcustomizer .musicholder { top: 112px; left: 15px; } .roomcustomizer .panelFeedback .musicholder { top: 124px; left: 15px; } .roomcustomizer #panelViewerSingleScene .musicholder { top: 93px; } .flowfix { height: 0; } #tutorialHolder { padding-top:140px; } #tutorialHolder .BrightcoveExperience { height:240px; } } /* swapping images for higher pixel ratio displays */ @media only screen and ( -webkit-min-device-pixel-ratio: 2) and (min-width: 768px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 768px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 768px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 768px), only screen and ( min-resolution: 192dpi) and (min-width: 768px), only screen and ( min-resolution: 2dppx) and (min-width: 768px) { } @media only screen and ( -webkit-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and ( min-device-pixel-ratio: 2) and (max-width: 767px), only screen and ( min-resolution: 192dpi) and (max-width: 767px), only screen and ( min-resolution: 2dppx) and (max-width: 767px) { }