#tabs { width: 99.4%; height: 600px; overflow-x: hidden; overflow-y: scroll; background: #EDE4A5; border-bottom: 1px solid black; } .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; background: #EDE4A5; border: none; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.15), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.15);} .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; background: #BAB283; border: none; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; width: 40em; margin-top: -27px; margin-left: 140px; margin-right: auto; } #tabs #tabs_first { position: relative; left: 80px; width: 240px; } #albumSlotsPerPageSelection { height: 140px; background: #EDE4A5; border-top: 1px solid black; border-bottom: 1px solid #333; } /*#albumSlotsPerPageSelection div ul.oneOption { margin-left: 40.75%; } #albumSlotsPerPageSelection div ul.twoOptions { margin-left: 36.75%; } #albumSlotsPerPageSelection div ul.thrOptions { margin-left: 32.75%; } #albumSlotsPerPageSelection div ul.forOptions { margin-left: 28.75%; } #albumSlotsPerPageSelection div ul.fivOptions { margin-left: 24.25%; } */ /*#albumSlotsPerPageSelection div ul li { display: inline; float: left; margin-left: 35px; margin-top: -7px; } #albumSlotsPerPageSelection div ul li:hover { display: inline; float: left; margin-left: 35px; margin-top: -7px; cursor: pointer; }*/ #albumSlotsPerPageSelection div ul { position: relative; left: -15px; top: -15px; } #albumSlotsPerPageSelection div ul li { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px; } #albumSlotsPerPageSelection div ul li:hover { cursor: pointer; } #albumSlotsPerPageSelection div ul li .albumSlotsPerPageOption { width: 60px; height: 80px; border-radius: 9%; border: 3px solid black; background: #FFD59B; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.25), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.25);} #albumSlotsPerPageSelection div ul li .albumSlotsPerPageOption:hover { width: 60px; height: 80px; border-radius: 9%; border: 3px solid #BB0000; } #albumSlotsPerPageSelection div ul li .albumSlotsPerPageOption div { position: relative; top: 10px; left: 0px; font-size: 24px; font-weight: bold; } #albumPageHeaderSelection { background: #EDE4A5; height: 180px; border-top: 1px solid black; border-bottom: 1px solid #333; overflow-y: hidden; } #albumPageHeaderTextGroupP { display: flex; position: relative; justify-content: center; margin-left: auto; margin-right: auto; top: -20px; } #prevAlbumPageHeaderTextSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: 65px; margin-inline: auto; left: -175px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);} #prevAlbumPageHeaderTextSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #prevAlbumPageHeaderTextSelect #pAPHTS { position: relative; top: 1px; left: -2px; font-weight: bold; color: #006600; } #albumPageHeaderTextSelected { width: 275px; height: 85px; border: 3px solid black; border-radius: 7%; background: #FFD59B; position: relative; top: -5px; margin-inline: auto; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.25), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.25);} #albumPageHeaderTextSelected div { font-weight: bold; font-size: larger; padding-inline: 40px; margin-top: 8px; } #nextAlbumPageHeaderTextSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: -52px; margin-inline: auto; left: 175px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #nextAlbumPageHeaderTextSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #nextAlbumPageHeaderTextSelect #nAPHTS { position: relative; top: 1px; left: 1px; font-weight: bold; color: #006600; } #albumPageHeaderTextGroupH { position: fixed; left: -10000px; } #albumPageHeaderTextPopupList { width: 450px; height: 80%; overflow-y: scroll; background: #EDE4A5; z-index: 42; display: flex; position: fixed; justify-content: center; margin-inline: auto; top: 10%; } #albumPageHeaderTextPopupList p { font-family: Arial, Helvetica, sans-serif; font-size: larger; text-align: center; } #albumPageHeaderTextPopupList ul { position: absolute; top: 35px; left: 25px; } #albumPageHeaderTextPopupList ul li { width: 300px; min-height: 45px; background: #FFD59B; border: 1px solid black; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: larger; text-align: center; border-radius: 5%; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.25), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.25);} #albumPageHeaderTextPopupList ul li:hover { background: #DEFFCC; } #albumPageHeaderTextPopupList ul li span { padding-top: 5px; padding-bottom: 5px; } #albumColorSelection { height: 105px; background: #EDE4A5; border-top: 1px solid black; border-bottom: 1px solid #333;} /*#albumColorSelection div ul { margin-left: 27.5%; } #albumColorSelection div ul li { display: inline; float: left; margin-left: 35px; margin-top: -7px; } #albumColorSelection div ul li:hover { display: inline; float: left; margin-left: 35px; margin-top: -7px; cursor: pointer; }*/ #albumColorSelectP { text-align: center; } #albumColorSelection div ul { position: relative; left: -15px; top: -15px; } #albumColorSelection div ul li { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px; } #albumColorSelection div ul div ul li:hover { cursor: pointer; } #albumColorSelection div ul li .albumColorOption { width: 30px; height: 30px; border-radius: 15%; border: 3px solid black; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.5), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.25);} #albumColorSelection div ul li .albumColorOption:hover { width: 30px; height: 30px; border-radius: 15%; border: 3px solid #BB0000; } #albumColorSelection div ul li #albumRed { background: red; } #albumColorSelection div ul li #albumOrange { background: orange; } #albumColorSelection div ul li #albumYellow { background: yellow; } #albumColorSelection div ul li #albumGreen { background: green; } #albumColorSelection div ul li #albumBlue { background: blue; } #albumColorSelection div ul li #albumViolet { background: violet; } #albumFrontCoverImageSelection { height: 300px; background: #EDE4A5; border-top: 1px solid black; border-bottom: 1px solid #333; overflow: hidden; } /*#albumFrontCoverImageSelection div ul { margin-left: 25%; margin-top: 7px; } #albumFrontCoverImageSelection div ul li { display: inline; float: left; padding-left: 5px; padding-right: 5px; margin-top: -7px; } #albumFrontCoverImageSelection div ul li:hover { display: inline; float: left; margin-top: -7px; cursor: pointer; }*/ #albumFrontCoverImageSelection div ul { position: relative; left: -15px; top: -15px; } #albumFrontCoverImageSelection div ul li { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px; } #albumFrontCoverImageSelection div ul div ul li:hover { cursor: pointer; } .albumCoverImageOverlay { mix-blend-mode: multiply; width: 180px; height: 240px; } #albumFrontCoverImageOverlay { width: 180px; height: 240px; background: red; position: relative; top: -352px; left: -7px; } #albumBackCoverImageOverlay { width: 180px; height: 240px; background: red; position: relative; top: -352px; left: -7px; } #albumFrontCoverImageSelection div ul li #albumFrontCoverImage div img { width: 115px; height: 112px; position: relative; top: -210px; left: -3px; } #albumFrontCoverImageSelection div ul li #albumBackCoverImage div img { width: 115px; height: 112px; position: relative; top: -210px; left: -9px; } /*#albumFrontCoverImageSelection div ul li #albumBackCoverImage div img#britishWestAfricaShillingsBC { width: 180px; height: 240px; position: relative; top: -210px; left: -9px; }*/ #albumFrontCoverImageSelection div ul li .albumCoverTapeBar { height: 240px; width: 15px; background: #545454; } #albumFrontCoverImageSelection div ul li #albumFrontCoverTapeBar { position: relative; top: -592px; left: -7px; } #albumFrontCoverImageSelection div ul li #albumBackCoverTapeBar { position: relative; top: -592px; left: 158px; } #albumFrontCoverImageSelection div ul li #albumCoverText { position: relative; top: -665px; left: -1px; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; font-size: 14px; } .albumCoverWhite { width: 180px; height: 240px; background: white; position: relative; left: -7px; } #albumFrontCoverImageSelection div #prevAlbumFrontCoverSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: -180px; left: -1px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #albumFrontCoverImageSelection div #prevAlbumFrontCoverSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #albumFrontCoverImageSelection div #prevAlbumFrontCoverSelect #pAFCS { position: relative; top: 1px; left: -2px; font-weight: bold; color: #006600; } #albumFrontCoverImageSelection div #nextAlbumFrontCoverSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: -180px; left: -11px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #albumFrontCoverImageSelection div #nextAlbumFrontCoverSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #albumFrontCoverImageSelection div #nextAlbumFrontCoverSelect #nAFCS { position: relative; top: 1px; left: 2px; font-weight: bold; color: #006600; } #albumFrontCoverImageSelection div #prevAlbumBackCoverSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: -180px; left: 3px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #albumFrontCoverImageSelection div #prevAlbumBackCoverSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #albumFrontCoverImageSelection div #prevAlbumBackCoverSelect #pABCS { position: relative; top: 1px; left: -2px; font-weight: bold; color: #006600; } #albumFrontCoverImageSelection div #nextAlbumBackCoverSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: -180px; left: -12px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #albumFrontCoverImageSelection div #nextAlbumBackCoverSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #albumFrontCoverImageSelection div #nextAlbumBackCoverSelect #nABCS { position: relative; top: 1px; left: 2px; font-weight: bold; color: #006600; } #albumFrontCoverSelection { position: fixed; left: -3000px; } #albumBackCoverSelection { position: fixed; left: -3000px; } #albumCoverTextSelection { background: #EDE4A5; height: 150px; border-top: 1px solid black; border-bottom: 1px solid #333; overflow-y: hidden; } #albumCoverTextGroupP { display: flex; position: relative; justify-content: center; margin-left: auto; margin-right: auto; top: -20px; } #prevAlbumFrontCoverTextSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: 20px; margin-inline: auto; left: -175px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #prevAlbumFrontCoverTextSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #prevAlbumFrontCoverTextSelect #pAFCTS { position: relative; top: 1px; left: -2px; font-weight: bold; color: #006600; } #albumCoverTextSelected { width: 275px; height: 85px; border: 3px solid black; border-radius: 7%; background: #FFD59B; position: relative; top: -50px; margin-inline: auto; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.25), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.25);} #albumCoverTextSelected div { font-weight: bold; font-size: larger; padding-inline: 40px; margin-top: 8px; } #nextAlbumFrontCoverTextSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: -98px; margin-inline: auto; left: 175px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #nextAlbumFrontCoverTextSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #nextAlbumFrontCoverTextSelect #nAFCTS { position: relative; top: 1px; left: 1px; font-weight: bold; color: #006600; } #albumCoverTextPopupList { width: 450px; height: 80%; overflow-y: scroll; background: #EDE4A5; z-index: 42; display: flex; position: fixed; justify-content: center; margin-inline: auto; top: 10%; } #albumCoverTextPopupList p { font-family: Arial, Helvetica, sans-serif; font-size: larger; text-align: center; } #albumCoverTextPopupList ul { position: absolute; top: 35px; left: 25px; } #albumCoverTextPopupList ul li { width: 300px; min-height: 45px; background: #FFD59B; border: 1px solid black; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: larger; text-align: center; border-radius: 5%; padding-bottom: 5px; position: relative; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.25), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.25);} #albumCoverTextPopupList ul li:hover { background: #DEFFCC; } #albumCoverTextPopupList ul li span { padding-top: 5px; padding-bottom: 5px; } #albumCoverTextGroupH { position: fixed; left: -10000px; } #albumInsideCoverTextSelection { background: #EDE4A5; height: 415px; border-top: 1px solid black; border-bottom: 1px solid #333; overflow-y: hidden; } #albumInsideCoverTextGroupP { display: flex; position: relative; justify-content: center; margin-left: auto; margin-right: auto; } #albumInsideCoverTextSelected div .aICtitle { font-weight: bold; } #albumInsideCoverTextSelected div .aICtext { } #prevAlbumInsideCoverTextSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: 220px; margin-inline: auto; left: -175px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #prevAlbumInsideCoverTextSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #prevAlbumInsideCoverTextSelect #pAICTS { position: relative; top: 1px; left: -2px; font-weight: bold; color: #006600; } #albumInsideCoverTextSelected { width: 275px; height: 325px; border: 3px solid black; border-radius: 7%; background: #FFD59B; position: relative; top: -50px; margin-inline: auto; box-shadow: inset 0em 0.15em 0.15em 0 rgba(0,0,0,0.25), inset 0em -0.1em 0.1em 0 rgba(0,0,0,0.25);} #albumInsideCoverTextSelected div { position: relative; top: 8px; width: 265px; left: 10px; height: 290px; overflow: hidden; } #nextAlbumInsideCoverTextSelect { width: 30px; height: 26px; background: gold; border-radius: 35%; border: 2px solid #006600; position: relative; top: -130px; margin-inline: auto; left: 175px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.35);} #nextAlbumInsideCoverTextSelect:hover { width: 30px; height: 26px; background: #CCA200; border-radius: 35%; border: 2px solid #006600; cursor: pointer; } #nextAlbumInsideCoverTextSelect #nAICTS { position: relative; top: 1px; left: 1px; font-weight: bold; color: #006600; } #albumInsideCoverTextGroupH { position: fixed; left: -10000px; } #albumSummary { border: 2px solid #BAB28E; height: 180px; display: flex; position: relative; justify-content: center; margin-left: auto; margin-right: auto; } #albumSummary div { width: 200px; } #albumSummary ul { position: relative; left: -23px; } #albumSummary ul li { float: left; display: inline-block; } #albumSummary span { align: center; } #albumSummary div #albumSlotCount { width: 300px; font-size: large; color: black; } #albumSummary div #albumPageCount { width: 160px; font-size: medium; color: #454545; font-weight: bolder; } #albumSummary div #albumCost { width: 160px; font-size: larger; font-weight: bolder; color: #990000; } #albumSummary div#previewSpan { width: 160px; height: 36px; color: #00BB22; background: #00BB22; font-weight: bold; font-size: smaller; cursor: pointer; position: relative; margin-inline: auto; } #albumSummary div#previewSpan:hover { color: #FFFFCC; background: #003300; } #albumSummary div#previewSpan div { height: 30px; width: 154px; background: #EFFFEF; position: relative; top: 3px; left: 3px; overflow: hidden;} #albumSummary div#previewSpan div:hover { height: 30px; width: 154px; background: #00BB22; position: relative; top: 3px; left: 3px; overflow: hidden; } #albumSummary div#previewSpan div div { height: 30px; width: 154px; position: relative; top: 4px; left: 0px; } #albumSummary div#previewSpan div div:hover { height: 30px; width: 154px; position: relative; top: 4px; left: 0px; } #albumSummary div #addToOrder { width: 160px; height: 36px; color: white; background: #0022BB; font-weight: bold; font-size: smaller; cursor: pointer; position: relative; margin-inline: auto; top: 0px; } #albumSummary div #addToOrder:hover { color: #FFFFCC; background: #000033; } #albumSummary div #addToOrder div { height: 30px; width: 175px; position: relative; top: 10px; left: -5px; } #albumSummary div#updateAlbumSpan { width: 160px; height: 36px; color: #BB2200; background: #BB2200; font-weight: bold; font-size: smaller; cursor: pointer; position: relative; margin-inline: auto;} #albumSummary div#updateAlbumSpan:hover { color: #FFFFCC; background: #330000; } #albumSummary div#updateAlbumSpan div { height: 30px; width: 154px; background: #FFEFEF; position: relative; top: 3px; left: 3px; overflow: hidden;} #albumSummary div#updateAlbumSpan div:hover { height: 30px; width: 154px; background: #BB2200; position: relative; top: 3px; left: 3px; overflow: hidden; } #albumSummary div#updateAlbumSpan div div { height: 30px; width: 154px; position: relative; top: 4px; left: 0px; } #albumSummary div#updateAlbumSpan div div:hover { height: 30px; width: 154px; position: relative; top: 4px; left: 0px; } #albumSummary div#addToOrderAsNewSpan { width: 160px; height: 36px; color: #FFFFCC; background: #000033; font-weight: bold; font-size: smaller; cursor: pointer; position: relative; margin-inline: auto; } #albumSummary div#addToOrderAsNewSpan:hover { color: #FFFFCC; background: #000033; } #albumSummary div#addToOrderAsNewSpan div { height: 30px; width: 154px; background: #0022BB; position: relative; top: 3px; left: 3px; overflow: hidden;} #albumSummary div#addToOrderAsNewSpan div:hover { height: 30px; width: 154px; background: #000033; position: relative; top: 3px; left: 3px; overflow: hidden; } #albumSummary div#addToOrderAsNewSpan div div { height: 30px; width: 154px; position: relative; top: 0px; left: 0px; } #albumSummary div#addToOrderAsNewSpan div div:hover { height: 30px; width: 154px; position: relative; top: 0px; left: 0px; } /*#canvasHolder { position: fixed; list-style-type: none; z-index: 30; top: 0%; left: -1%; display: none; background: rgba(0,0,0,0.8); width: 125%; height: 100%; } #canvasHolder div#canvasHolderDivDiv { position: relative; top: 5px; left: 10%; width: 1800px; height: 2400px; background: #DDBBA2; } #canvasHolder #canvasA { position: absolute; top: 0px; left: 10%; z-index: 34; } #canvasHolder #canvasB { position: absolute; top: 0px; left: 10%; z-index: 34; } #canvasHolder #canvasC { position: fixed; top: 0px; left: 10%; z-index: 34; } */ #canvasHolder { position: fixed; list-style-type: none; z-index: 30; top: 0%; left: -1%; display: none; background: rgba(0,0,0,0.8); width: 105%; height: 100%; display: flex; justify-content: center; margin-left: auto; margin-right: auto; } #canvasHolder div#canvasHolderDivDiv { display: flex; position: absolute; justify-content: center; margin-left: auto; margin-right: auto; top: 5px; width: 1800px; height: 2400px; background: #DDBBA2; } #canvasHolder #canvasA { position: absolute; margin-inline: auto; top: 0px; z-index: 34; } #canvasHolder #canvasB { position: absolute; margin-inline: auto; top: 0px; z-index: 34; } #canvasHolder #canvasC { position: absolute; margin-inline: auto; top: 0px; z-index: 34; } #canvasHolder img { position: absolute; margin-inline: auto; top: 0px; z-index: 35; } #previewPageSelect { position: fixed; bottom: 1.65%; margin: auto; width: 100%; z-index: 34;} /*#previewPageSelect ul { margin-left: 45%; }*/ #previewPageSelect ul { display: flex; position: relative; top: 24px; justify-content: center; margin-left: auto; margin-right: auto; } #previewPageSelect ul li { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px; } #previewPageSelect ul li div.previewPageDot { width: 17px; height: 17px; background: #333; border-radius: 100%; border: 2px solid white; position: relative; top: 1px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(0,0,0,0.5), inset -0.2em -0.2em 0.2em 0 rgba(255,255,255,0.5);} #previewPageSelect ul li div.previewPageDot:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #CDCDCD; } #previewPageSelect ul li div#previewPreviousPage { width: 30px; height: 26px; background: white; border-radius: 35%; border: 2px solid white; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);} #previewPageSelect ul li div#previewPreviousPage:hover { width: 30px; height: 26px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewPageSelect ul li div#previewNextPage { width: 30px; height: 26px; background: white; border-radius: 35%; border: 2px solid white; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);} #previewPageSelect ul li div#previewNextPage:hover { width: 30px; height: 26px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewPageSelect ul li div.previewPageDotSelected { border: 2px solid #CDCDCD; cursor: pointer; background: #990000; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(0,0,0,0.5), inset -0.2em -0.2em 0.2em 0 rgba(255,255,255,0.5); } #previewPageSelect ul li div.previewPageDotSelected:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #DE0000; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(0,0,0,0.5), inset -0.2em -0.2em 0.2em 0 rgba(255,255,255,0.5);} #previewPageSelect ul li div#previewPreviousPage #pPPi { position: relative; top: 4px; left: 9px; font-weight: bold; } #previewPageSelect ul li div#previewNextPage #pNPi { position: relative; top: 4px; left: 9px; font-weight: bold; } #previewInsidePageSelect { position: fixed; bottom: 1.65%; left: 35%; width: 100%; z-index: 34;} /*#previewInsidePageSelect ul { margin-left: 45%; }*/ #previewInsidePageSelect ul li { display: inline; float: left; margin-left: 35px; margin-top: -5px; } #previewInsidePageSelect ul li div.previewInsidePageDot { width: 17px; height: 17px; background: #333; border-radius: 100%; margin-top: 5px; border: 2px solid white;} #previewInsidePageSelect ul li div.previewInsidePageDot:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #CDCDCD; } #previewInsidePageSelect ul li div#previewInsidePreviousPage { width: 30px; height: 26px; background: white; border-radius: 35%; border: 2px solid white; } #previewInsidePageSelect ul li div#previewInsidePreviousPage:hover { width: 30px; height: 26px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewInsidePageSelect ul li div#previewInsideNextPage { width: 30px; height: 26px; background: white; border-radius: 35%; border: 2px solid white; } #previewInsidePageSelect ul li div#previewInsideNextPage:hover { width: 30px; height: 26px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewInsidePageSelect ul li div.previewInsidePageDotSelected { border: 2px solid #CDCDCD; cursor: pointer; background: #990000; } #previewInsidePageSelect ul li div.previewInsidePageDotSelected:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #DE0000; } #previewInsidePageSelect ul li div#previewInsidePreviousPage #pIPPi { position: relative; top: 4px; left: 9px; font-weight: bold; } #previewInsidePageSelect ul li div#previewInsideNextPage #pINPi { position: relative; top: 4px; left: 9px; font-weight: bold; } /*Type Set CSS*/ #albumPreview { background: #EDE4A5; border-top: 1px solid black; border-bottom: 1px solid #333; width: 100%; height: 650px; } .albumPreview { background: #EDE4A5; border-top: 1px solid black; border-bottom: 1px solid #333; width: 100%; height: 650px; } #prevAlbumPageSelect { width: 30px; height: 26px; background: white; border-radius: 35%; border: 2px solid white; position: relative; top: 400px; margin-inline: auto; left: -275px; } #prevAlbumPageSelect:hover { width: 30px; height: 26px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #prevAlbumPageSelect #pAPS { position: relative; top: 4px; left: 2px; font-weight: bold; } #albumPreview #pageHolder { width: 450px; height: 600px; background: #DDBBA2; margin-inline: auto; top: -20px; } #nextAlbumPageSelect { width: 30px; height: 26px; background: white; border-radius: 35%; border: 2px solid white; position: relative; top: -220px; margin-inline: auto; left: 275px; } #nextAlbumPageSelect:hover { width: 30px; height: 26px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #nextAlbumPageSelect #nAPS { position: relative; top: 4px; left: 2px; font-weight: bold; } #albumPreviewPageGroupH { position: fixed; left: -10000px; } @media only screen and (max-width: 1000px) { /*body { background: lightblue; }*/ body {background: url(bg_e.png); } /* bg_c.png */ #albumDetailsTitle { font-size: x-large; } #albumDetailsDescription { font-size: x-large; } #tabs { width: 99%; } #tabs li { font-size: x-large; } #tabs #tabs_first { position: relative; left: 205px;} #tabs #tabs_first li { width: 350px; } #tabs .tabsDateSelect { positiion: relative; left: -160px; } .ui-tabs-vertical { width: 55em; } .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; background: #EDE4A5; border: none; } .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } .ui-tabs-vertical .ui-tabs-nav li a { display:block; } .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; background: #BAB283; border: none; } .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em; position: relative; left: -70px;} #albumColorSelection { height: 145px; background: #EDE4A5; border-top: 1px solid black; border-bottom: 1px solid #333;} #albumColorSelection #albumColorSelectP { height: 12px; font-size: xx-large; position: relative; top: -15px; } #albumColorSelection #albumColorGroupP { height: -30px; position: relative; top: -65px; } #albumColorSelection div ul { /*margin-left: -10px;*/ } #albumColorSelection div ul li { /*display: inline; float: left;*/ margin-left: 14px; } #albumColorSelection div ul li:hover { /*display: inline; float: left;*/ margin-left: 14px; margin-top: -7px; cursor: pointer; } #albumColorSelection div ul li .albumColorOption { width: 50px; height: 50px; border-radius: 15%; border: 3px solid black; } #albumColorSelection div ul li .albumColorOption:hover { width: 30px; height: 30px; border-radius: 15%; border: 6px solid #BB0000; } #albumColorSelection div ul li #albumRed { width: 50px; height: 50px; background: red; } #albumColorSelection div ul li #albumOrange { width: 50px; height: 50px; background: orange; } #albumColorSelection div ul li #albumYellow { width: 50px; height: 50px; background: yellow; } #albumColorSelection div ul li #albumGreen { width: 50px; height: 50px; background: green; } #albumColorSelection div ul li #albumBlue { width: 50px; height: 50px; background: blue; } #albumColorSelection div ul li #albumViolet { width: 50px; height: 50px; background: violet; } #albumFrontCoverImageSelection { width: 100%; position: relative; left: 0px; top: -5px; height: 325px; } #albumOrderSummaryTitle { font-size: xx-large; } #albumSummary { height: 200px; } #albumSummary div { width: 340px; } #albumSummary span { align: center; } #albumSummary ul li { width: 23%; float: left; display: inline-block; padding-left: 0%; } #albumSummary div #albumSlotCount { width: 300px; font-size: xx-large; color: black; } #albumSummary div #albumPageCount { width: 300px; font-size: xx-large; color: #454545; font-weight: bolder; left: -15%; } #albumSummary div #albumCost { width: 300px; font-size: xx-large; font-weight: bolder; color: #990000; } #albumSummary div #addToOrder { width: 160px; height: 36px; color: white; background: #0022BB; font-weight: bold; font-size: smaller; cursor: pointer; position: relative; left: 90px;} #albumSummary div #addToOrder:hover { color: #FFFFCC; background: #000033; } #albumSummary div #addToOrder div { height: 30px; width: 175px; position: relative; top: 10px; left: -5px; } #previewPageSelect { position: fixed; bottom: 1.65%; left: -8%; width: 80%; z-index: 34;} /*left 22%; */ #previewPageSelect ul { margin-left: 4%; } /* margin-left: 45% */ #previewPageSelect ul li { display: inline; float: left; margin-left: 35px; margin-top: -5px; } #previewPageSelect ul li div.previewPageDot { width: 35px; height: 35px; background: #333; border-radius: 100%; margin-top: 5px; border: 2px solid white;} #previewPageSelect ul li div.previewPageDot:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #CDCDCD; } #previewPageSelect ul li div#previewPreviousPage { width: 60px; height: 52px; background: white; border-radius: 35%; border: 2px solid white; } #previewPageSelect ul li div#previewPreviousPage:hover { width: 60px; height: 52px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewPageSelect ul li div#previewNextPage { width: 60px; height: 52px; background: white; border-radius: 35%; border: 2px solid white; } #previewPageSelect ul li div#previewNextPage:hover { width: 60px; height: 52px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewPageSelect ul li div.previewPageDotSelected { border: 2px solid #CDCDCD; cursor: pointer; background: #990000; } #previewPageSelect ul li div.previewPageDotSelected:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #DE0000; } #previewPageSelect ul li div#previewPreviousPage #pPPi { position: relative; top: 8px; left: 18px; font-weight: bold; font-size: xx-large;} #previewPageSelect ul li div#previewNextPage #pNPi { position: relative; top: 8px; left: 25px; font-weight: bold; font-size: xx-large; } #previewInsidePageSelect { position: fixed; bottom: 1.65%; left: 22%; width: 100%; z-index: 34;} #preivewInsidePageSelect ul { margin-left: 45%; } #previewInsidePageSelect ul li { display: inline; float: left; margin-left: 35px; margin-top: -5px; } #previewInsidePageSelect ul li div.previewInsidePageDot { width: 35px; height: 35px; background: #333; border-radius: 100%; margin-top: 5px; border: 2px solid white;} #previewInsidePageSelect ul li div.previewInsidePageDot:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #CDCDCD; } #previewInsidePageSelect ul li div#previewInsidePreviousPage { width: 60px; height: 52px; background: white; border-radius: 35%; border: 2px solid white; } #previewInsidePageSelect ul li div#previewInsidePreviousPage:hover { width: 60px; height: 52px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewInsidePageSelect ul li div#previewNextPage { width: 60px; height: 52px; background: white; border-radius: 35%; border: 2px solid white; } #previewInsidePageSelect ul li div#previewNextPage:hover { width: 60px; height: 52px; background: #CDCDCD; border-radius: 35%; border: 2px solid #CDCDCD; cursor: pointer; } #previewInsidePageSelect ul li div.previewInsidePageDotSelected { border: 2px solid #CDCDCD; cursor: pointer; background: #990000; } #previewInsidePageSelect ul li div.previewInsidePageDotSelected:hover { border: 2px solid #CDCDCD; cursor: pointer; background: #DE0000; } #previewInsidePageSelect ul li div#previewInsidePreviousPage #pIPPi { position: relative; top: 8px; left: 18px; font-weight: bold; font-size: xx-large;} #previewInsidePageSelect ul li div#previewInsideNextPage #pINPi { position: relative; top: 8px; left: 25px; font-weight: bold; font-size: xx-large; } }