.orderzipdownloadbutton a { padding: 16px; } .spinner24 { width: 24px; height: 24px; background-color: #999; margin: 4px auto; -webkit-animation: rotateplane 1.8s infinite ease-in-out; animation: rotateplane 1.8s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(24px) } 50% { -webkit-transform: perspective(24px) rotateY(180deg) } 100% { -webkit-transform: perspective(24px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(24px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(24px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(24px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(24px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(24px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(24px) rotateX(-180deg) rotateY(-179.9deg); } } .loadingspinner { height: 60px; width: 60px; margin: 94px auto 0 auto; position: relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left: 6px solid rgba(144, 144, 144, .15); border-right: 6px solid rgba(144, 144, 144, .15); border-bottom: 6px solid rgba(144, 144, 144, .15); border-top: 6px solid rgba(144, 144, 144, .8); border-radius: 100%; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .loadingspinnersmall { height: 24px; width: 24px; margin:auto; position: relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left: 6px solid rgba(144, 144, 144, .15); border-right: 6px solid rgba(144, 144, 144, .15); border-bottom: 6px solid rgba(144, 144, 144, .15); border-top: 6px solid rgba(144, 144, 144, .8); border-radius: 100%; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } #sitemessage { padding: 16px; text-align: center; box-sizing: border-box; width: 100%; } #sitemessage p { margin-bottom: 2px; } .extrafieldsspacing { margin-bottom: 16px; } .productoptionsname { font-weight: bold; margin-bottom: 8px; } #photoprodsinner { max-width: 1000px; margin: auto; } #photobuycontainer { max-width: 800px; margin: auto; } blockquote { margin: 0.25em 0; padding: 0.25em 40px; } .the-icons { font-size: 16px; line-height: 16px; color: #F2EADB; opacity: .8; text-shadow: #12100E 0px 0px 2px; } .the-icons:hover { opacity: 1; cursor: pointer; text-decoration: none;} .icon-cancel-circled {padding: 4px; margin-right: 4px; } .icon-text { font-size: 12px; color: #F2EADB;cursor: pointer; } .icon-text:hover { font-size: 12px; color: #F2EADB;cursor: pointer; text-decoration: none; } .icon-heart, .icon-eye-off { color: #db0b0b; } a.the-icons, a.the-icons:visited { color: #F2EADB; } .the-icons a, .the-icons a:visited , a.the-icons, a.the-icons:visited, the-icons a:link, a.the-icons:link { color: #F2EADB; } .the-icons-fullscreen { color: #F2EADB; text-shadow: #0A0908 0px 0px 2px; } #slideshowaudio { background-color: #0A0908;position: fixed; bottom: 0; left: 4px; z-index: 10000 } #slideshowaudio .the-icons { color: #F2EADB; text-shadow: #0A0908 0px 0px 2px; } .pageshare { width: auto; text-align: center; margin: auto;} .pageshare ul { margin: 0px auto; padding: 0px; list-style: none; text-align: center;} .pageshare ul li { display: inline-block; } .pageshare .the-icons { font-size: 24px; } #facebookloggedin { color: #FFFFFF; background:#3b5998; padding: 8px; width: auto; display: block; text-align: center; width: 360px; margin: auto; position: fixed; top: 0px; left :50%; margin-left: -180px;z-index: 600;display: none; } #facebookloggedin .the-icons { color: #FFFFFF; text-shadow: none; } #facebooklogin a { color: #FFFFFF; background:#3b5998; padding: 8px; width: auto; display: block; text-align: center; max-width: 400px; margin: auto; box-sizing: border-box; } #facebooklogin a:hover { background: #6d84b4; } #facebooklogin a .the-icons { color: #FFFFFF; text-shadow: none; } #ssheader { background: #12100E; border-top: solid 1px #2A251E; border-bottom: solid 1px #2A251E; position: fixed; width: 100%; left:0; top: 0; z-index:30; display: none; display: none; display: none; } #ssheaderinner { width: 100%; max-width: 1400px; margin: auto; color: #E8E0D0; font-family: 'Jost', Arial; font-size: 14px; position: relative; z-index: 33; } #ssheaderinner a { color: #E8E0D0; text-decoration: none; } #ssheaderinner a:hover { color: #BD8A40; text-decoration: underline; } #ssheaderinner #photomenu .the-icons { font-size: 24px; line-height: 16px; color: #E8E0D0; padding: 4px; margin-right: 4px; text-shadow: #12100E 0px 0px 2px; } #ssheaderinner #photomenu .the-icons:hover { color: #BD8A40; cursor: pointer; } #ssheaderinner #photomenu .icon-text { font-size: 12px;color: #E8E0D0; cursor: pointer; } #ssheaderinner #photomenu .icon-text:hover { color: #BD8A40; cursor: pointer; } #ssheaderinner .favoritesviewing .the-icons, #photographerfavoritefull .the-icons { font-size: 12x; line-height: 8px; color: #E8E0D0; text-shadow: #12100E 0px 0px 2px; } .photo-nav { font-size: 60px; } #ssNextPhoto { opacity: .6; display: none; cursor: pointer; } #ssPrevPhoto { opacity: .6; display: none; cursor: pointer; } #ssClose { position: absolute; right: 4px; top: 4px; z-index: 30; display: none; font-size: 48px; } #ssClose:hover { opacity: 1; } #ssNextPhoto:hover { opacity: 1; } #ssPrevPhoto:hover { opacity: 1; } #ssPlay { width: 200px; height: 55px; display: block; margin: auto; text-align: center;} #ssPause { width: 200px; height: 55px; display: block; margin: auto; text-align: center;} #ssPlay:hover { opacity: 1; } #ssPause:hover { opacity: 1; } #controls { background: transparent url('/sy-graphics/clear.gif')repeat; display: none;} #controls { display: none; color: #F2EADB; } #controls a { color: #F2EADB; } .pagephotostoreactions { display: none; } html { background-color: #12100E; -webkit-font-smoothing: antialiased; } html, body { background-color: #12100E; height: 100.1%; margin : 0; padding : 0; border : 0; color : #E8E0D0; font-family : 'Jost',Arial,Verdana,sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0px; } * {margin: 0;} png { border: none; } .center { text-align: center; } .left { float: left; } .right { float: right; } .cssClear, .clear { clear:both;font-size: 0px;line-height: 0px; width: 0px; height: 0px; } .hide { display: none; } .textright { text-align: right; } .textleft { text-align: left; } .field100 { width: 97%;} .padtopbottom { padding: 2px 0; } .reg,.normal { font-size: 13px; } p { margin: 0 0 16px 0; } .bold { font-weight: bold; } .large1 { font-size: 21px; } .large2 { font-size: 17px; } .from_message_to { display: none; } .contactformfields { margin-bottom: 16px; } .showsmall { display: none; } .p5 { width: 5%; } .p10 { width: 10%; } .p15 { width: 15%; } .p20 { width: 20%; } .p25 { width: 25%; } .p30 { width: 30%; } .p33 { width: 33.33333%; } .p35 { width: 35%; } .p40 { width: 40%; } .p45 { width: 45%; } .p50 { width: 50%; } .p55 { width: 55%; } .p60 { width: 60%; } .p65 { width: 65%; } .p70 { width: 70%; } .p75 { width: 75%; } .p80 { width: 80%; } .p85 { width: 85%; } .p90 { width: 90%; } .p95 { width: 95%; } .p100 { width: 100%; } .pointer { cursor: pointer; } .move { cursor: move; } .width100 { width: 100%; max-width: 1400px; margin: auto; } .cartonsale { font-style: italic; opacity: .7; font-size: .8em } .hiddenphoto { opacity: .25 !important; } #hidden-full-photo { position: absolute; padding: 8px; background: rgba(255,255,255,.8); color: #000000; text-align: center; size: 21px; margin: 8px auto; display: none; } .photographerfavorite { position: absolute; top: 4px; left: 4px; color: #FCF0A6; text-shadow: 0px 0px 1px #a15B00; } .hidesidebar { display: none !important; } .hidesidebarmain { width: 100% !important; } .packagemore { cursor: pointer; } .registryamount { font-size: 21px; } #giftcertificatecontainer { max-width: 480px; margin: auto; } #viewcartminilinks a { background: #CF9A44; border: solid 1px #8F6A2F;color: #000000!important; display: block; padding: 8px; text-align: center; margin-bottom: 8px; } #viewcartminilinks a:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E!important; } .addcartbutton { padding: 4px; display: inline-block; margin-right: 8px; background: #CF9A44; border: solid 1px #8F6A2F; text-shadow: none; color: #000000; cursor: pointer; size: 15px; } .addcartbutton:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; size: 15px; cursor: pointer; } img { -ms-interpolation-mode: bicubic; image-rendering: optimizeQuality; -webkit-user-select:none; -webkit-touch-callout:none; user-select: none; } .phototag { margin: 0 60px 0px 0; font-size: 17px; line-height: 60px; white-space:nowrap; float: left;} #pagephotosearch { float: right; } @media (max-width: 800px) { #pagephotosearch { float: none; } } .gallerysearchinput { display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto; vertical-align: top; font-size:17px; font-weight:400; width:100%; margin:0; box-sizing:border-box; } .gallerysearchsubmit { display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto; vertical-align: top; font-size:17px; font-weight:400; margin:0; box-sizing:border-box; float: right; } #gototop { position:fixed; bottom:8px; right: 8px; z-index: 2; display: none; cursor: pointer; } #bgFadeContainer { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; } #page-wrapper { min-height: 100%; z-index: 2; position: relative; } #page-wrapper-inner { } .headerheight { height: 0px; } .headerheightmobile { height: 0px; } #headerAndMenuInner { } #headerContainer { width: 100%; margin-left: auto; margin-right: auto; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7A4627,endColorstr=#ff7A4627); background-color: rgba(122,70,39,1.00); color: #F2EADB; } .mobileheaderbg { background-color: rgba(122,70,39,1.00); } #header { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; } #header .inner { padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px;font-family:'Cormorant Garamond'; font-size:44px; } #header .inner a { color: #F2EADB; } #header img { display: inline; } .headerName { font-size: 40px; font-weight: bold; padding: 6px; } #menucontainerouter { position: relative; width:100%; } /* ################################################ PHOTO PRODUCTS ############################################################### */ .productviewname, .productviewprice, .productviewqty { padding: 8px 0px; box-sizing: border-box; text-align: center;} #croptabs { text-align: center; margin: 12px 0 ;} #croptabs .tab { padding: 8px; margin-right: 8px; background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; } #croptabs .tab:hover { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; } #croptabs .tabon { padding: 8px; margin-right: 8px; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; } .discount { display: none; background: #12100E; border: solid 1px #12100E; position: absolute; box-shadow: 0 0 4px rgba(0,0,0,.4); z-index: 4;width: 250px; right: 16px; } .discount .inner { padding: 8px; } .proddiscount { display: none; background: #12100E; border: solid 1px #12100E; position: absolute; box-shadow: 0 0 4px rgba(0,0,0,.4); z-index: 4;width: 250px; } .proddiscount .inner { padding: 8px; } #enlargephoto { display: none; position: absolute; z-index: 200; box-shadow: 0 0 8px rgba(0,0,0,.5); } #photoprods, #photocrop, #photopackagecontainer { display: none; background: #12100E; width: 100%; max-width: 800px; left: 50%; margin-left: -400px; border: solid 1px #12100E; position: absolute; z-index: 301; box-shadow: 0 0 8px rgba(0,0,0,.5); } #photoproductsnexttophotobg { display: none; position: fixed; right: 0; top: 0; width: 28%; float: right; background: #12100E; height:100%; z-index: 19; } #photoproductsnexttophoto { display: none; position: relative; right: 0; top: 0; width: 28%; float: right; background: #12100E; height:100%; z-index: 20; } #photoproductsnexttophoto .inner { padding: 16px 24px; height:100%; } .photowithproducts{ width: 72%; float: left; } .ssheaderwithproducts { width: 72% !important; position: relative; } #photocrop { z-index: 400; } #loading { width:300px; position: fixed; left: 50%; margin-left: -174px; padding: 24px; text-align: center; top: 40%; display: none; z-index: 500; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; } #closebuyphototab { position: fixed; left: 0;width: 100%; text-align: center; top: 0; display: none; z-index: 1200; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; } #closebuyphototab .inner { padding: 12px; } #paymentdiv .inner { padding: 24px; width: 100%; max-width: 600px; margin: auto; } #photoprodsinner { padding: 24px; } #photocropinner { padding: 16px; } #singlephotopackagetab { display: none; padding: 8px 0;} #termsandconditions { display: none; background: #12100E; width: 800px; left: 50%; margin-left: -400px; border: solid 1px #12100E; position: absolute; z-index: 500; box-shadow: 0 0 8px rgba(0,0,0,.5); } #termsandconditionsinner { padding: 24px; } #afftermsandconditions { display: none; background: #12100E; width: 800px; left: 50%; margin-left: -400px; border: solid 1px #12100E; position: absolute; z-index: 500; box-shadow: 0 0 8px rgba(0,0,0,.5); margin-bottom: 24px;} #afftermsandconditionsinner { padding: 24px; } #commentsbackground { width:100%; height:100%; min-height: 100%; background-color: #0A0908; opacity:0.90; overflow: hidden; display: block; position: fixed; top: 0; left: 0; display: none; z-index: 200; } #commentscontainer { background: #12100E; } .commentsshowpage { display: block; margin: auto; max-width: 800px; width: 100%; } .commentsshowwindow { position: absolute; width: 80%; left: 50%; margin-left: -40%; z-index: 500; box-shadow: 0 0 24px rgba(0,0,0,.6); border: solid 1px #12100E; margin-bottom: 50px; } #commentscontainerinner { padding: 24px; } .commentstab { position: fixed; bottom: 0; left: 15%; padding: 8px; background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; } .salestrikethrough { text-decoration: line-through; opacity: .3; } .groupdescr, .group_sale_message, .listmessage, .listsalemessage { padding: 4px 16px; box-sizing: border-box; } #photopackageinner { padding: 16px; } #photopackagetab { display: none; text-align: center; padding: 8px 0;} #addonephoto { padding: 12px; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; } #addonephoto:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; } #addonephoto .the-icons { color: #000000; text-shadow: none; } #grouptabs { margin: 0 0 8px 0; text-align: center; } #grouptabs .tab { display: inline-block; padding: 6px 4px; margin: 0px 4px 8px 4px; background: #786A56; border: solid 1px #3A332A; color: #FFEACA; cursor: pointer; transition: background-color .3s; border-radius: 4px; } #grouptabs .tab:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; } #grouptabs .tabon { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; } .pricegroupingtitle { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; box-sizing: border-box; padding: 8px 16px; margin: 8px 0px; } #specialdateselect { margin-top: 16px; } #specialdateselect .tab { display: inline-block; padding: 6px; margin: 0px 0px 8px 0px; background: #786A56; border: solid 1px #3A332A; color: #FFEACA; cursor: pointer; width: 100%; box-sizing: border-box; } #specialdateselect .tab:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; } #specialdateselect .tabon { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; width: 100%; box-sizing: border-box; } .underlineonly { border-bottom: 2px solid #BD8A40; padding: 12px 8px; margin: 0px 0px 8px 0px; } .nounderlineonly { padding: 12px 8px; margin: 0px 0px 8px 0px; } .flyout { position: absolute; display:none} .addtocartqty { padding: 4px; width: 24px; } .adjustqty .the-icons { font-size: 12px;} .collectionpreviewdescription { font-size: 12px; } .nophotopackage { width: 100%; } .packageproducts { width: 60%; float: right; } .photoprod .name { width: 65%; float: left; font-weight: 600;} .photoprod .namenooptions { width: 65%; float: left; font-weight: 600;} .photoprod .options{padding: 4px 0px; } .photoprod .sub{ padding: 4px 0px; } .photoprod .options .inputdropdown { padding: 2px; } .photoprod .price { float: right; text-align:right; font-weight: 600;} .photoprod .qty { float: left; text-align:right;} .photoprod .qty input { padding: 2px; } .photoprod .cartbutton { float: right; margin-left: 16px;} .photoprod .the-icons { } .photoprod {} .photoprod .underline { border-bottom: 2px solid #BD8A40; padding: 16px; color: #D8CFBE; background: #1A1611; } .photoprod .underline:hover { background: #1A1611; color: #D8CFBE; } .photoprod .underline h3,.photoprod .underline h4 { text-shadow: none; font-weight: normal;} .photoprod .underlinecolumn { border-bottom: 2px solid #BD8A40; padding: 12px 8px;} .photoprod .underline:hover a { color: #BD8A40; } .photoprod .underline:hover a:hover { color: #E0B470; } .collectionproduct { font-weight: 700;} .syv2products { margin: 0px; padding: 0px; list-style: none; } .syv2products li { padding: 16px; cursor: pointer; border-bottom: 2px solid #BD8A40; color: #D8CFBE; background: #1A1611; } .syv2products li:hover {font-weight: bold; } .syv2products li .graphic { float: left; margin-right: 16px;} .syv2products li .name { float: left; } .syv2products li .price { float: right; } .syv2products li .arrow { float: right; margin-left: 16px; } .syv2products li h4 { font-weight: normal; } #splashcontainer { display: none; background: #12100E; width: 80%; left: 50%; margin-left: -40%; border: solid 1px #12100E; position: absolute; z-index: 200; box-shadow: 0 0 8px rgba(0,0,0,.5); margin-bottom: 24px; } #splashinner { padding: 24px; } #storeitemcontainer { display: none; background: #12100E; width: 80%; left: 50%; margin-left: -40%; border: solid 1px #12100E; position: absolute; z-index: 800; box-shadow: 0 0 8px rgba(0,0,0,.5); margin-bottom: 24px; } #storeiteminner { padding: 24px; } #mlsignuppopup { z-index: 900; } .signupbg { position: fixed; background-color: rgba(10,9,8,.95); top: 0; left: 0; width: 100%; height: 100%; z-index: 900; } .signupcontainer { position: fixed; top: 35%; left: 0; background:#12100E; width: 100%;z-index: 920; } .signupcontainerinner { padding: 24px; text-align: center; color: #E8E0D0;z-index: 920;} #emailsignupcancel .the-icons { text-shadow: none; font-size: 36px; } .signupcontainerblinner { padding: 24px; text-align: center; } .signupcontainerbl { position: fixed; bottom: 6%; left: 0; width: 100%;z-index: 999; } #emailsignupcancel .the-icons { text-shadow: none; font-size: 34px; } #buybackground, #affbackground, #paymentdivbg, #splashbackground, #storeitembackground,#clfthumbsbg { width:100%; height:100%; min-height: 100%; background-color: #000000; opacity:.7; overflow: hidden; display: block; position: fixed; top: 0; left: 0; display: none; z-index: 200; } .comparebar, .filteroption, .hiddenphotomessage { font-size: 15px; margin-top: 8px; text-align: center; } #comparephotos { z-index: 10000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; background-color: #0A0908; } #comparenav { background: #12100E; border-top: solid 1px #2A251E; border-bottom: solid 1px #2A251E; position: fixed; left: 0; top: 0; width: 100%; z-index: 10009; } #comparenavinner { padding: 16px; text-align: center; position: relative; z-index: 10010; } #comparephotosdisplaycontainer { position: absolute; z-index: 10001; } #comparephotosdisplay { top: 0; display: none; } #comparenavinner a { color: #E8E0D0; text-decoration: none; } #comparenavinner a:hover { color: #BD8A40; text-decoration: underline; } #comparenavinner .the-icons { font-size: 24px; line-height: 16px; color: #E8E0D0; padding: 4px; margin-right: 4px; text-shadow: #12100E 0px 0px 2px; } #comparenavinner .the-icons:hover { color: #BD8A40; cursor: pointer; } #comparenavinner.icon-text { font-size: 12px;color: #E8E0D0; cursor: pointer; } #comparenavinner .icon-text:hover { color: #BD8A40; cursor: pointer; } .compareactionscontainer { position: relative; left: 0; display: none; } .compareactions { list-style: none; margin: auto; padding: 0; text-align: center; top: 40%; left: 0; position: relative; } .compareactions li { float: left; padding: 8px; margin: 0px 8px 8px 0px; background: #786A56; border: solid 1px #3A332A; color: #FFEACA; cursor: pointer; } .compareactions li:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; } #singlephoto { width:100%; height:100%; min-height: 100%; background-color: #0A0908; opacity:0.90; overflow: hidden; display: block; position: fixed; top: 0; left: 0; z-index: 200; } /* ############################################### TOP MAIN MENU ##################################################################### */ #mobilemenubutton { padding: 8px; font-size: 24px; display: none; } #mobilemenubutton .icon-menu { font-size: 30px; } #mobilemenubutton .menutext { padding: 0px; position: relative; top: -2px; } #mobilemenubuttontop { padding-top: 0px; padding-bottom: 0px; font-size: 24px; display: none; } #mobilemenubuttontop .icon-menu { font-size: 30px; } #mobilemenubuttontop .menutext { padding: 0px; position: relative; top: -2px; } #mobilemenubuttontop .the-icons { text-shadow: none; color: #F2E5BA} #mobilemenu { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19E38862,endColorstr=#19E38862); background-color: #E38862; background-color: rgba(227,136,98,0.10); border: 1px solid #2A251E 0px; font-size: 27px; z-index: 20; color: #F2E5BA; position: relative; } #mobilemenu .the-icons { color: #F2E5BA; text-shadow: none; } #mobilemenu a, #mobilemenu a:active { text-decoration: none; color: #F2E5BA; font-size: 17px;} #mobilemenu a:link, #mobilemenu a:visited { text-decoration: none; color: #F2E5BA; font-size: 17px; } #mobilemenu a:hover { color: #BD8A40; text-decoration: underline; font-size: 17px; } #mobilemenulinks ul li a { padding: 8px 24px; border-top:1px solid #2A251E; display: block; background-color: #E38862; } #mobilemenulinks ul { list-style: none; margin: 0; padding: 0; text-align: left; } #mobilemenubutton .the-icons { text-shadow: none; color: #F2E5BA} #topMainMenuContainer { margin: auto; display: block; font-family: 'Jost', Arial; letter-spacing: -0.07px; font-weight: 400; position: abvsolute; width: 100%; font-size: 15px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19E38862,endColorstr=#19E38862); background-color: #E38862; background-color: rgba(227,136,98,0.10); border-bottom:1px solid #2A251E; border-top:1px solid #2A251E; color: #; text-align: center; text-shadow: 1px 1px 2px #000000; text-align: middle; z-index: 10; padding-top: 42px; padding-bottom: 42px; } .topMainMenuEnd { display:block; float:left; margin:auto; padding:6px; position:relative; border-left: solid 1px #2A251E; text-decoration:none; } .mobilemenubg { background-color: #E38862; } #topMainMenu { list-style:none; margin:auto; padding:0; z-index: 8; text-transform:uppercase; width:100%; max-width: 1400px; } #topMainMenu a, #topMainMenu a:active { text-decoration: none; color: #F2E5BA;} #topMainMenu a:link, #topMainMenu a:visited { text-decoration: none; color: #F2E5BA; } #topMainMenu a:hover { color: #BD8A40; text-decoration: underline; } #topMainMenu a .the-icons { font-size: 15px; color: #F2E5BA; text-shadow: 1px 1px 2px #000000; } #topMainMenu a .the-icons:hover { color: #BD8A40; text-decoration: none; } /* ############## MAIN MENU ########################### */ ul.dropdown { list-style: none; margin: 0; padding: 0; text-align: left; display: inline; } ul.dropdown { position: relative; z-index: 3;} ul.dropdown li { padding: 0; display: inline; margin: 0 0 0 0px ; box-sizing: border-box; } ul.dropdown li a { text-align: left; display: inline; zoom: 1; padding: 42px 6px ; } ul.dropdown li .text { text-align: left; display: inline; zoom: 1; padding: 42px 6px ; } ul.dropdown a:hover { ; } ul.dropdown a:active { } ul.dropdown li a { display: inline; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li:hover { position: relative; } ul.dropdown li.hover a { } /* LEVEL TWO */ ul.dropdown ul { line-height: 100%; width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; box-shadow: 0px 4px 5px rgba(0, 0, 0, .5); z-index: 2000; list-style: none; margin: 0; padding: 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19E38862,endColorstr=#19E38862); background-color: #E38862; background-color: rgba(227,136,98,0.10); margin-left: -96px; } ul.dropdown ul li { line-height: 100%; text-align: left; float: none; margin-left: 0; box-sizing: border-box; } ul.dropdown ul li:hover {float: none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a, ul.dropdown ul li .text { border-right: none; display: block; padding: 12px 6px 8px 6px ; box-sizing: border-box; } /* LEVEL THREE */ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; } /* LEVEL 4 */ ul.dropdown ul ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; } /* ################# END MAIN MENU ########################### */ #mainmenu{ margin: 0; z-index: 10; text-align: center; margin: auto; padding: 0px 96px 0px 96px ; display: block; vertical-align: middle; } #mainmenu li { margin: 0; padding: 0; list-style: none; float: none; margin: 0 12px 0 0; display: inline; } #mainmenu li a { color: #F2E5BA; text-align: center; text-decoration: none; text-transform:uppercase; } #mainmenu li a:hover { background: #} #photosmenu { display: block; visibility: visible; position: absolute; } #mainmenu div { z-index: 10; position: absolute; visibility: hidden; margin: 0; padding: 0; border-bottom: solid 1px #2A251E; border-left: solid 1px #2A251E; border-right: solid 1px #2A251E; border-top: solid 0px #2A251E; color: #E8E0D0; background-color: #; line-height: normal; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19E38862,endColorstr=#19E38862); background-color: rgba(227,136,98,0.10); display: block; -moz-border-radius: 0px; border-radius: 0px; } #mainmenu .photos { padding: 8px; display: block; clear: right; } #mainmenu span { display: block; } #mainmenu div .photos a { line-height: 30px; } #mainmenu div a { position: relative; padding: 5px 10px; text-align: left; text-decoration: none; clear: right; display: block; } #mainmenu div a:hover { background: #; color: #BD8A40; } /* ############################################### END TOP MAIN MENU AREA ################################################# */ /* ############################################### SHOP MENU ################################################# */ #shopmenucontainer { position: relative; z-index: 10; } #shopmenuinner { width: 100%; max-width: 1400px; margin: auto; color: #E8E0D0; font-family: 'Jost', Arial; font-size: 14px; letter-spacing: 0px; font-weight: 400; position: relative; z-index: 3; } #shopmenu { padding: 11px 36px; text-align: right; } #accountmenu { padding: 11px 36px; text-align: left; float: left; } #accountmenu ul { list-style-type: none; padding: 0px; margin: 0px; } #accountmenu ul li { display: inline; margin-right: 16px; } #accountloginresponse, #forgotloginresponse { display: none; font-size: 12px; margin-top: 4px; } #forgotemailmessage { font-size: 12px; font-family: 'Jost'; padding: 4px 0; } .loginform { float: left; padding: 11px 36px; } .forgotpassword { font-size: 12px; font-family: 'Jost'; } #shopmenuinner a { color: #E8E0D0; text-decoration: none; } #shopmenuinner a:hover { color: #BD8A40; text-decoration: underline; } #shopmenu .the-icons, #accountmenu .the-icons { color: #E8E0D0; font-size: 14px; text-shadow: none; } #shopmenu .the-icons:hover, #accountmenu .the-icons:hover { color: #BD8A40; } #shopmenu ul { list-style-type: none; padding: 0px; margin: 0px; } #shopmenu ul li { display: inline; margin-left: 16px; } #accountloginpage { max-width: 400px; margin: auto; } /* ################################################ H1 H2 TITLES & LINKS ############################################################# */ /* pageTitle - When someone is viewing a page or track details this is the page title */ h1 { font-family: 'Cormorant Garamond',Arial ; line-height: 1; letter-spacing: 0.3px; font-weight: 500; font-size: 40px; color: #F2EADB; border-bottom: 0px solid #F2EADB; } .title h1 { font-family: 'Cormorant Garamond',Arial ; line-height: 1; font-size: 40px; color: #F2EADB; border-bottom: 0px solid #F2EADB; letter-spacing: 0.3px; font-weight: 500; } a.pageTitle:active,h1 a ,h1 a:active { text-decoration: none; color: #F2EADB; } a.pageTitle:link, a.pageTitle:visited,h1 a:link,h1 a:visited { text-decoration: none; color: #F2EADB; } a.pageTitle:hover,h1 a:hover { color: #BD8A40; text-decoration: underline; } .pageSubTitle { font-size: 40px; color: #F2EADB; border-bottom: 0px solid #F2EADB; width: 100%; } a.pageSubTitle, a.pageSubTitle:active{ text-decoration: none; color: #F2EADB; } a.pageSubTitle:link, a.pageSubTitle:visited { text-decoration: none; color: #F2EADB; } a.pageSubTitle:hover { color: #BD8A40; text-decoration: underline; } h2 { font-family: 'Cormorant Garamond',Arial; font-size: 25px; color: #F2EADB; border-bottom: 0px solid #F2EADB; width: 100%; letter-spacing: 0.3px; font-weight: 500; line-height: 1; } h2 a,h2 a:active{ text-decoration: none; color: #F2EADB; } h2 a:link,h2 a:visited { text-decoration: none; color: #F2EADB; } h2 a:hover { color: #BD8A40; text-decoration: underline; } h3, .h3 { font-family: 'Cormorant Garamond', Arial; font-size: 17px; color: #F2EADB; border-bottom: 0px solid #F2EADB; width: 100%; letter-spacing: 0.3px; font-weight: 400; } h3 a,h3 a:active{ text-decoration: none; color: #BD8A40; } h3 a:link,h3 a:visited { text-decoration: none; color: #BD8A40; } h3 a:hover { color: #E0B470; text-decoration: underline; } h4 { font-size: 15px; } .checkoutshippingoptions { font-size: 17px; } a, a:active { text-decoration: none; color: #BD8A40; } a:link, a:visited { text-decoration: none; color: #BD8A40; } a:hover { color: #E0B470; text-decoration: underline; } /* ######################################################## END H1 TITLES & LINKS ################################################# */ /* ##################################################### CATEGORY LISTING STYLES ################################################ */ #listing-blog { } #listing-blog .preview .headline { padding: 0 4px; } #listing-blog .preview .sub {padding: 4px;} #listing-blog .preview .photos { padding: 4px; } #listing-blog .preview .comments { padding: 4px; } #listing-blog .preview .previewtext { padding: 4px; } #listing-first { padding: 27px; margin: 4px 4px 20px 0px;} #listing-first .content .headline { padding: 0 4px; } #listing-first .content .sub {padding: 4px;} #listing-first .content .photos { padding: 4px; } #listing-first .content .comments { padding: 4px; } #listing-first .content .previewtext { padding: 4px; } #listing-standard .preview { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#191A1611,endColorstr=#191A1611); background-color: rgba(26,22,17,0.10); border-bottom: 2px solid #BD8A40; -moz-border-radius: 2px; border-radius: 2px; color: #D8CFBE; height: 1%; margin: 4px 4px 20px 0px; padding: 27px; } #listing-standard .preview h2 a { color: #BD8A40; text-decoration: none; } #listing-standard .preview h2 a:hover { color: #E0B470; } #listing-standard .headline { font-size: 20px; font-family: 'Cormorant Garamond', Arial; } #regguestbook .preview { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#191A1611,endColorstr=#191A1611); background-color: rgba(26,22,17,0.10); border-bottom: 2px solid #BD8A40; -moz-border-radius: 2px; border-radius: 2px; color: #D8CFBE; height: 1%; margin: 4px 4px 20px 0px; padding: 27px; } #regguestbook .preview h2 a { color: #BD8A40; text-decoration: none; } #regguestbook .preview h2 a:hover { color: #E0B470; } #regguestbook .headline { font-size: 20px; font-family: 'Cormorant Garamond', Arial; } #ebmessage { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#191A1611,endColorstr=#191A1611); background-color: rgba(26,22,17,0.10); border-bottom: 2px solid #BD8A40; -moz-border-radius: 2px; border-radius: 2px; color: #D8CFBE; height: 1%; margin: 4px 4px 20px 0px; padding: 27px; text-align: center; } #ebmessage h3 { color: #D8CFBE; text-decoration: none; } #listing-standard .preview .thumbnail, #listing-standard .preview .thumbnailnoborder { width: 100%; max-width: 200px; height: auto; } .preview .image { } #listing-standard .preview .thumbnail { border: 1px solid #2A251E; display: block; float: left; margin: 6px 24px 24px 0; } #listing-standard .preview .thumbnailnoborder { border: 0px; display: block; float: left; margin: 6px 24px 24px 0; } #listing-standard .preview .headline { padding: 8px; } #listing-standard .preview .sub {padding: 8px; } #listing-standard .preview .previewtext { padding: 8px; } #listing-standard .preview .comments { padding: 8px; } #listing-thumbnail .preview { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2B0C05,endColorstr=#2B0C05); background-color: rgba(43,12,5,0.00); border: 0px solid #2A251E; color: #4A423A; height: 1%; padding: 14px; margin: 4px; width: 245px; height: 305px; -moz-border-radius: 2px; border-radius: 2px; float: left; text-align: center; display: block; } #listing-thumbnail .preview h2 a { color: #12100E; font-size: 18px; font-family: 'Cormorant Garamond',Arial; text-decoration: none; } #listing-thumbnail .preview h2 a:hover { color: #8A6410; } #listing-thumbnail .text div { padding: 4px; } #listing-thumbnail .preview .thumbimage { position: relative; text-align: center; vertical-align: bottom; margin: auto; width: 220px; height: 150px; line-height: 150px; } #listing-thumbnail .preview .text { padding-top: 14px;padding-bottom: 14px; } #listing-thumbnail .preview .comments { padding: 4px; } #listing-thumbnail .preview .thumbnail { margin: auto;vertical-align: bottom; border: 1px solid #2A251E;} #listing-thumbnail .text div { padding: 4px; } .pt { max-height:150px; width: auto; } .ls { max-width:220px; height: auto; } #thumbsj { } #thumbsj .thumbcontainer { float: left; clear: right;padding: 0; overflow: hidden; border: solid 0px #000000; position: relative;} #thumbsj .thumbcontainer .iconsinfo { position: absolute; bottom: 0; left: 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc12100E,endColorstr=#cc12100E); background-color: rgba(18,16,14,0.80); width: 100%; z-index: 5; padding: 8px; display: none; color: #F2EADB; } #thumbsj .thumbcontainer .iconsinfo .thumbnailactions .inner .the-icons { color: #F2EADB; opacity: .6; text-shadow: #12100E 0px 0px 2px;} #thumbsj .thumbcontainer .iconsinfo .thumbnailactions .inner .the-icons:hover { opacity: 1;} .justifiedthumbs .thumbactioncontainer { position: absolute; bottom: 0; left: 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc12100E,endColorstr=#cc12100E); background-color: rgba(18,16,14,0.80); width: 100%; z-index: 5; padding: 8px; display: none; color: #F2EADB; } .justifiedthumbs .thumbactioncontainer .inner .the-icons { color: #F2EADB; opacity: .6; text-shadow: #12100E 0px 0px 2px;} .thumbactionsstacked { position: absolute; bottom: 0; left: 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc12100E,endColorstr=#cc12100E); background-color: rgba(18,16,14,0.80); width: 100%; z-index: 5; padding: 8px; display: none; color: #F2EADB; } .thumbactionsstacked .thumbnailactions .inner .the-icons { color: #F2EADB; opacity: .6; text-shadow: #12100E 0px 0px 2px;} .thumbactionsstacked .iconsinfo .thumbnailactions .inner .the-icons:hover { opacity: 1;} #listing-onphoto { } #listing-onphoto .preview { border: 0px solid #2A251E; border-radius: 2px; background:#1A1611; float:left; position: relative; overflow: hidden; margin: 14px; padding:0; width: 300px; height: 300px; display: block; } #listing-onphoto .preview .text a{ color: #F2EADB; text-decoration: none; } #listing-onphoto .price { font-size: 21px; position: absolute; left: 8px; top: 8px; text-shadow: 1px 1px 1px #F2EADB; color: #12100E; } #listing-onphoto .preview .text { position: absolute; bottom: 0; left:0%; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc12100E,endColorstr=#cc12100E); background-color: rgba(18,16,14,0.80); width:100%; text-align: left; margin: auto; padding: 12px; } #listing-onphoto .the-icons { color: #F2EADB; } #listing-onphoto .preview h2 { font-size: 19px; } #listing-onphoto .preview .text .headline { padding: 2px 8px; color: #F2EADB; font-size: 19px; font-family: 'Cormorant Garamond',Arial; } #listing-onphoto .preview .text .previewtext { color:#D8CFBE; padding: 2px 8px; display: none; } #listing-onphoto .onphotophoto { display: none; } #listing-stacked { list-style-type: none; position: relative; text-align: left; } #listing-stacked .preview { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2B0C05,endColorstr=#2B0C05); background-color: rgba(43,12,5,0.00); border: 0px solid #2A251E; color: #4A423A; padding: 0px; margin: 4px; width: 245px; -moz-border-radius: 2px; border-radius: 2px; } #listing-stacked .preview h2 a { color: #12100E; font-size: 18px; font-family: 'Cormorant Garamond',Arial; text-decoration: none; } #listing-stacked .preview h2 a:hover { color: #8A6410; } #listing-stacked .preview div { padding: 0px; } #listing-stacked .preview .prevInner { padding: 16px; } #listing-stacked .preview .thumbnail { border: 1px solid 2A251E; text-align: center; width: 100%; display: block; } #listing-stacked .preview .headline { padding: 4px; } #listing-stacked .preview .sub {padding: 4px; } #listing-stacked .preview .previewtext { padding: 4px; } #listing-stacked .preview .comments { padding: 4px; } .stacked2text { padding: 16px !important; text-align: center; } .thumbnailactions { height: 20px;display: block;} .thumbnailactions .inner { position: relative; float: left; text-align: center; width: 100%; } .favlogin { display: none; position: absolute; margin: 0; text-align: left; z-index: 200; } .favlogin .inner { background: #2B0C05; border: solid 1px #2A251E; font-size: 12px; text-shadow: none; padding: 8px; } #listing-flex { margin: 24px 0px; } .flexthumbnails h3 { font-size: 18px; } .flexthumbnails { width: 24%; margin-bottom: 24px; text-align: center;} .flexthumbnails h3 a, .dyntitle h3 a { color: #12100E; font-size: 18px;} .flexthumbnails h3 a:hover, .dyntitle h3 a:hover { color: #8A6410; } .flexthumbnails h4 a, .dyntitle h4 a { color: #12100E; font-size: 18px;} .flexthumbnails h4 a:hover, .dyntitle h4 a:hover { color: #8A6410; } .flexthumbnails .colpad .ratiophoto { padding-top: 75%; overflow: hidden;} .flexthumbnails .colpad .ratiophotothumb { padding-top: 80%; overflow: hidden;} .flexthumbnails { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2B0C05,endColorstr=#2B0C05); box-sizing: border-box; background-color: rgba(43,12,5,0.00); border: 0px solid #2A251E; color: #4A423A; padding: 14px; -moz-border-radius: 2px; border-radius: 2px; text-align: center; } .flexgallerythumbs { width: 24%; margin-bottom: 24px; text-align: center;} .flexgallerythumbs h3 a, .dyntitle h3 a { color: #12100E; font-size: 18px;} .flexgallerythumbs h3 a:hover, .dyntitle h3 a:hover { color: #8A6410; } .flexgallerythumbs h4 a, .dyntitle h4 a { color: #12100E; font-size: 18px;} .flexgallerythumbs h4 a:hover, .dyntitle h4 a:hover { color: #8A6410; } .flexgallerythumbs .colpad .ratiophotothumb { padding-top: 80%; overflow: hidden;} .flexgallerythumbs { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2B0C05,endColorstr=#2B0C05); box-sizing: border-box; background-color: rgba(43,12,5,0.00); border: 0px solid #2A251E; color: #4A423A; padding: 14px; -moz-border-radius: 2px; border-radius: 2px; text-align: center; } @media (max-width: 1200px) { .flexthumbnails { width: 32%; } .flexgallerythumbs { width: 32%; } } @media (max-width: 1024px) { .flexthumbnails { width: 32%; } } @media (max-width: 800px) { .flexthumbnails { width: 48.5%; } .flexgallerythumbs { width: 100%; } .photocontainerbgthumb { background-size:cover; height:auto ; left:auto; position:relative; top:auto; width:auto; } .flexgallerythumbs .colpad .ratiophotothumb { padding-top: 0%; overflow: hidden;} } .styledthumbs { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff1A1611,endColorstr=#ff1A1611); background-color: rgba(26,22,17,1.00); border: 1px solid #2A251E; color: #A89C8A; height: 1%; padding: 8px; margin: 12px; width: 200px; height: 210px; -moz-border-radius: 2px; border-radius: 2px; float: left; text-align: center; display: block; } .styledthumbs a { color: #BD8A40; font-size: 12px; font-family: 'Cormorant Garamond',Arial; } .styledthumbs a:hover { color: #E0B470; } .styledthumbs .thumbimage { position: relative; text-align: center; vertical-align: bottom; margin: auto; width: auto; height: 155px; line-height: 155px; } .styledthumbs .text { padding-top: 8px;padding-bottom: 8px; } .styledthumbs .comments { padding: 4px; } .styledthumbs .thumbnail { margin: auto;vertical-align: bottom; border: 1px solid #2A251E;} #displayThumbnailPage { position: relative; text-align: left; } #displayThumbnailPage .stackedthumbs { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff1A1611,endColorstr=#ff1A1611); background-color: rgba(26,22,17,1.00); border: 1px solid #2A251E; color: #A89C8A; padding: 8px; margin: 12px; width: 200px; -moz-border-radius: 2px; border-radius: 2px; float: left; text-align: center; display: block; } #displayThumbnailPage .stackedthumbs a { color: #BD8A40; font-size: 12px; font-family: 'Cormorant Garamond',Arial; } #displayThumbnailPage .stackedthumbs a:hover { color: #E0B470; } #displayThumbnailPage .stackedthumbs .thumbimage { text-align: center; } #displayThumbnailPage .stackedthumbs .text { padding-top: 8px;padding-bottom: 8px; } #displayThumbnailPage .stackedthumbs .comments { padding: 4px; } #displayThumbnailPage .stackedthumbs .thumbnail { margin: auto; vertical-align: bottom; border: 1px solid #2A251E; text-align: center; width: 100%; } .thumbfitcontainer { width: 100%; height: auto; } .thumbfitcontainerh { height 100%; width: auto; } .tpt { max-height:155px; width: auto; } .tls { max-width:180px; height: auto; } /* ################################################## END CATEOGRY LISTING STYLES ##################################################### */ /* ################################################## PAGE DISPLAY STYLES ##################################################### */ #standardPage { } #standardPage .title { padding: 4px; } #standardPage .text { padding: 4px; } #standardPage .expire { padding: 4px; } #standardPage .photos { padding: 4px; } #blogPage { } #blogPage .title { padding: 4px; } #blogPage .categories { padding: 4px; } #blogPage .date { padding: 4px; } #blogPage .comments { padding: 4px; } #blogPage .text { padding: 4px; } #blogPage .photos { } #blogPage .tags { padding: 4px; } #blogPage .nextPrevious { padding: 4px; } #storePage {} #storePage .categories { padding: 4px; } #storePage .title { padding: 4px; } #storePage .text { padding: 4px; } #storePage .nextPrevious { padding: 4px; } #storePage .photos { float: left; width: 50%; } #storePage .photos .inner { padding: 16px; } #storePage .content { float: right; width: 50%; } #storePage .content .inner { padding: 16px; } #clientGalleries { } #clientGalleries .title { padding: 4px; } #clientGalleries .categories { padding: 4px; } #clientGalleries .expire { padding: 4px; } #clientGalleries .comments { padding: 4px; } #clientGalleries .text { padding: 4px; } #clientGalleries .photos { } #clientGalleries .nextPrevious { padding: 4px; } #homePage { } #homePage .title { padding: 4px; } #homePage .text { padding: 4px; } #homePage .photos { padding: 4px; } #homePage .subpages { padding: 4px; } #galleries { } #galleries .title { padding: 4px; } #galleries .categories { padding: 4px; } #galleries .comments { padding: 4px; } #galleries .text { padding: 4px; } #galleries .photos { } #galleries .nextPrevious { padding: 4px; } #registryPage {} #registryPage .title { padding: 4px 0px; } #registryPage .eventdate{ padding: 4px 0px; } #registryPage .text { padding: 4px; font-size: 17px; } #registryPage .regid { padding: 4px 0px; } #registryPage .goal { padding: 4px 0px; } #registryPage .shareonfb { padding: 4px 0px; } #registryPage .reginstructions{ padding: 4px 0px; } #registryPage .regguestbook{ padding: 4px 0px; } #registryPage .regaddtocart { padding: 4px 0px; } #registryPage .photos { float: left; width: 50%; } #registryPage .photos .inner { padding: 16px; } #registryPage .content { float: right; width: 50%; } #registryPage .content .inner { padding: 16px; } /* ################################################## END PAGE DISPLAY STYLES ##################################################### */ /* ################################################## CHECKOUT PAGE ##################################################### */ #checkoutside { width: 30%; float: left; } #checkoutside .inner { margin-right: 8px; padding-right: 8px; } #checkoutformcontainer { max-width: 600px; width: 100%; margin: auto; } #checkoutform { width: 70%; float: left; } #checkoutaddresswithship { width: 49%; float: left; } #checkoutaddressnoship { width: auto; } #shippingaddressside, #checkoutaddresses { max-width: 640px; width: 100%; } /* ################################################## PHOTO DISPLAY STYLES ##################################################### */ #photoWithMinis { } #photoWithMinis .photominis { float: left; width: 15%; text-align: center; } #photoWithMinis .photominis .pagemini { border: 1px solid #2A251E;} #photoWithMinis .photoContainerOuter { width: 85%; text-align: center; float: left; } #photoWithMinis .photoContainerOuterOne { text-align: center; float: left; width: 100%; } #photoWithMinis .photoContainerOuter .photoContainer { margin:auto ; position: relative; text-align: center; } #photoWithMinis .photoContainerOuter .pmphoto, #photoWithMinis .photoContainerOuterOne .pmphoto { border: solid 1px #2A251E; } #photoScrollerContainer { text-align: center; } #nextPrevContain { width: 100%; margin: auto; position: relative;display: block; } /* ################################################## END PHOTO DISPLAY STYLES ##################################################### */ /* ################################################## PAGE MENU NAVIGATION ##################################################### */ #pageMenu { text-align: right; margin: auto; padding: 4px; } #pageMenu .selectPage { background-color: #1A1611; padding: 4px 8px; margin: 2px; text-align: center; position: relative; white-space: nowrap; min-width: 16px; color: #; } #pageMenu .selectedPage { padding: 4px 8px; margin: 2px; text-align: center; position: relative; white-space: nowrap; min-width: 16px; font-weight: bold; } #pageMenu .unavailable { padding: 4px 8px; margin: 2px; text-align: center; position: relative; white-space: nowrap; min-width: 16px; } #pageMenu .totalResults { padding: 2px; margin: 2px; text-align: center; position: relative; white-space: nowrap; font-weight: bold; } /* ################################################## END PAGE MENU NAVIGATION ##################################################### */ /* ################################################## PAGE NEXT PREVIOUS NAVIGATION ##################################################### */ #pageNextPrevious { text-align: center; } #pageNextPrevious a{ } #pageNextPrevious h3{ display: inline; } #pageNextPrevious img{ border: 1px solid #2A251E; margin: 2px 10px 2px 10px; } #pageNextPrevious .oldnew { padding: 6px 10px 6px 10px; } #pageNextPrevious .older { float: right; width: 50%; padding: 27px; text-align: right; padding: 6px 0 6px 0; -moz-border-radius: 2px; border-radius: 2px; } #pageNextPrevious .older a { color: #BD8A40; } #pageNextPrevious .older a:hover { color: #E0B470; } #pageNextPrevious .older .inside { padding: 4px; } #pageNextPrevious .older img { float: right; } #pageNextPrevious .newer { float: left; width: 50%; padding: 27px; text-align: left; padding: 6px 0 6px 0; -moz-border-radius: 2px; border-radius: 2px; } #pageNextPrevious .newer a { color: #BD8A40; } #pageNextPrevious .newer a:hover { color: #E0B470; } #pageNextPrevious .newer .inside { padding: 4px; } #pageNextPrevious .newer img { float: left; } #pageNextPrevious h3{ text-align: center; padding: 4px; } /* ################################################## END PAGE NEXT PREVIOUS NAVIGATION ##################################################### */ /* ################################################## SUB PAGE LISTING ##################################################### */ #subPages { } #subPages .subPage { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#191A1611,endColorstr=#191A1611); background-color: rgba(26,22,17,0.10); border: solid 1px #BD8A40; color: #D8CFBE; height: 1%; margin: 0px 4px 20px 0px; padding: 27px; -moz-border-radius: 2px; border-radius: 2px; } #subPages .subPage a { color: #BD8A40; } #subPages .subPage a:hover { color: #E0B470; } #subPages .subPage .mini { float: left; margin: 0px 12px 0 0; border: 1px solid #2A251E; display: block; } #subPages .subPage .title { } /* ################################################## END SUB PAGE LISTING ##################################################### */ /* ################################################## FULL SCREEN PHOTO VIEWING ############################################## */ #viewPhotoContainer { z-index: 102; position: fixed; display: none; width: 1000px; height: 90%; margin: auto; left: 5%; top: 60px; background: #FFFFFF; border: solid 1px #999999; border-radius: 8px; } #viewPhoto { position: relative; display: block; width: 100%; height: 100%; } #viewPhotoOuter { width: 100%; height: 80%; text-align: center; position: absolute; } #viewPhotoInfoContainer {width: 100%; top: 0; left: 0; position: fixed; background: #000000; border: solid 1px 0 #000000; text-align: center; z-index: 103; -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); -goog-ms-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);} #viewPhotoInfo { padding: 4px; } .photoViewContainer {position: absolute; float: left; margin: auto; width: 100%; } #prevPhoto { position: fixed; width: 5%; height: 32px; text-align: left; left: 0; top: 40%; opacity:0.5; cursor: pointer; display: none;} #nextPhoto { position: fixed; width: 5%; height: 32px; text-align: right; right: 0; top: 40%; opacity:0.5; cursor: pointer; display: none;} #prevPhoto:hover { opacity:1; } #nextPhoto:hover { opacity:1; } #loadingMorePages { display: none; text-align: center; padding: 16px; } #loadingMore { position: fixed; bottom: 10px; width: 200px; padding: 12px; left: 50%; margin-left: -100px; z-index:50; display: none; text-align: center; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; } #successMessage{ background: #5bbc62; border: solid 1px #41a148; position: fixed; top: 10px; color: #FFFFFF; width: 500px; padding: 10px; left: 50%; margin-left: -250px; z-index:1000; display: none; text-align: center;} #errorMessage{ background: #d22c1a; border: solid 1px #ac2314; position: fixed; top: 10px; color: #FFFFFF; width: 500px; padding: 10px; left: 50%; margin-left: -250px; z-index:1000; display: none; text-align: center;} #loadingPage { display: none; top: 0; left: 0; position: fixed; z-index: 3000; text-align: center; background: url('/graphics/loading-page.gif') no-repeat center center; width: 100%; height: 100%; } #photoBGContainer { width:100%; height:100%; min-height: 100%; margin:0; position: fixed; z-index: 20; left: 0; top: 0; display: none; } #photoBG { width:100%; height:100%; min-height: 100%; opacity:0.90; position: absolute; overflow: hidden; display: block; } #photo-loading { display: none; top: 0; left: 0; position: fixed; z-index: 30; text-align: center; background: url('/sy-graphics/loading2.gif') no-repeat center center; width: 100%; height: 100%; } #photo-main { width: 100%; height: 100%; top: 0; left: 0; position: fixed; z-index: 25; text-align: center; } #photo-insert { display: table-cell; width: 80%; height: 100%; top: 0; left: 0; position: fixed; z-index: 25; text-align: center; } #photo-data { width: 19%; height: 100%; top: 0; left: 80%; position: fixed; z-index: 25; text-align: left; background: #FFFFFF; padding: 8px; } #photo-data { overflow: scroll; } #photo-filter { float: right; } #photo-results { float: left; } /* ################################################## END FULL SCREEN PHOTO VIEWING ############################################## */ /* ##################################################### STORE STUFF ############################################################## */ .checkoutpagetopbutton { float: right; text-align: right; padding: 4px; } @media (max-width: 1024px) { .checkoutpagetopbutton { float: none; text-align: center;margin: 16px 0px; } .checkoutpagetopbutton .checkoutcart { width: 100%; ; display: block; } } .checkouttitles { margin: 16px 0px 8px 0px; } .checkoutprogressdone { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; size: 15px; padding: 6px; margin: 6px; } .checkoutprogress { background: #786A56; border: solid 1px #3A332A; color: #FFEACA; size: 15px; padding: 6px; margin: 6px;} .checkout { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; padding: 6px; cursor: pointer; box-sizing: border-box; } .unblurphoto { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; padding: 6px; cursor: pointer; border-radius: 2px; box-sizing: border-box; } .unblurphoto:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; text-decoration: none; } .checkout .the-icons { color: #000000; text-shadow: none; } .nobutton { background: #786A56; border: solid 1px #3A332A; color: #FFEACA; padding: 6px; cursor: pointer; border-radius: 2px; box-sizing: border-box; } .nobutton:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; } .addproducttocart { display: block; margin: 8px auto; } .backtoproductlist { margin-bottom: 16px; text-align: center; padding: 4px; box-sizing: border-box; } .backtoproductlist a { background: #786A56; border: solid 1px #3A332A; color: #FFEACA; cursor: pointer; box-sizing: border-box; width: auto; border-radius: 4px; padding: 8px; display: inline-block; margin: auto; transition: background-color .3s; } .backtoproductlist a:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; } @media (max-width: 1024px) { .backtoproductlist { text-align: center; } } .addproducttocart .the-icons { color: #000000; text-shadow: none; opacity: 1; } .photoproductoption { padding: 4px; margin-bottom: 12px; } .accountmenu { width: 100%; display: block;box-sizing:border-box; margin: 0px 16px 8px 0px; padding: 4px 4px 4px 16px; } .checkoutcart , .gallerybuttons { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; padding: 8px 8px; font-size: 15px; cursor: pointer; text-decoration: none; box-sizing: border-box; } a.checkout, a.checkoutcart, a.checkout:visited, a.checkoutcart:visited, a.gallerybuttons, a.gallerybuttons:visited, a.gallerybuttons { color: #000000; text-decoration: none; } .checkout:hover, .checkoutcart:hover, .gallerybuttons:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; text-decoration: none; } .gallerybuttonson { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; text-decoration: none; padding: 8px 8px; font-size: 15px; cursor: pointer; cursor: pointer; margin: 12px 6px; display: inline-block; } .gallerybuttons { margin: 12px 6px; display: inline-block; } @media (max-width: 800px) { .gallerybuttons, .gallerybuttonson { width: 100%; box-sizing: border-box; display: block; margin-bottom: 8px; text-align: center; } } .gallerybuttonsmenu { text-align: center; } ul.proofbutton { list-style: none; margin: 0; padding: 0; clear: right;} ul.proofbutton li { padding: 4px; display: inline-block; margin: 4px; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; size: 15px; } ul.proofbutton li:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; size: 15px; cursor: pointer; } ul.productoption { list-style: none; margin: 0; padding: 0; clear: right;} ul.productoption li { padding: 4px; float: left; margin-right: 8px; background: #786A56; border: solid 1px #3A332A; color: #FFEACA; cursor: pointer; size: 15px; } ul.productoption li:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; size: 15px; cursor: pointer; } .productoption .on { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; size: 15px; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); } ul.productoptionselect { list-style: none; margin: 0; padding: 0; clear: right;} ul.productoptionselect li { padding: 4px; float: left; margin: 0px 8px 8px 0px; background: #786A56; border: solid 1px #3A332A; color: #FFEACA; cursor: pointer; size: 15px; } ul.productoptionselect li:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; size: 15px; cursor: pointer; } .productoptionselect .on { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; size: 15px; -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); } .productconfigs { padding: 4px; } .productconfigsoptions { padding: 4px; } .producttocart { display: block; } #addtocartloading { display: none; } #addtocart, .addtocart, .preregaddtocart { padding: 3px 8px; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; size: 15px; } #addtocart:hover, .addtocart:hover, .preregaddtocart:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; size: 15px; cursor: pointer; } .pointer { cursor: pointer; } #addtocartdisabled { padding: 3px 8px; float: left; background: #786A56; border: solid 1px #3A332A; color: #FFEACA; size: 15px; } .onsaleprice{ text-decoration: line-through; float: left; margin-right: 8px; font-size: 17px; } .productprice { font-size: 21px; font-weight: bold;} /* ##################################################### END STORES STUFF ############################################################## */ /* ################################################## VIEW CART CSS ##################################################### */ #viewcart .cartitem { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#191A1611,endColorstr=#191A1611); background-color: rgba(26,22,17,0.10); border-bottom: 2px solid #BD8A40; color: #D8CFBE; -moz-border-radius: 2px; border-radius: 2px; height: 1%; margin: 4px 4px 20px 0px; padding: 27px; } #viewcart .cartitem a { color: #BD8A40; } #viewcart .cartitem a:hover { color: #E0B470; } .preview .image { } #viewcartpagesubtotal { font-size: 21px; } #viewcart .cartitem .thumbnail { float: left; width: 30%; padding-right: 12px; text-align: center; } #viewcart .cartitem .thumbnail .thumb { border: 1px solid #2A251E; } #viewcart .cartitem .product { float: left; width: 50%; } #viewcart .cartitem .options { padding: 4px; } #viewcart .cartitem .qty { padding: 4px; } #viewcart .cartitem .name { padding: 4px; font-size: 20px; font-family: 'Cormorant Garamond', Arial; } #viewcart .cartitem .topname { padding: 4px; } #viewcart .cartitem .price { float: right; width: 10%; text-align: right; } #viewcart .cartitem .extprice { font-size: 20px; font-family: 'Cormorant Garamond', Arial; } #viewcart .cartitem .remove { padding: 4px; } #orderLogin { width:100%; max-width: 300px; margin: auto; } #orderitems .item { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#191A1611,endColorstr=#191A1611); background-color: rgba(26,22,17,0.10); border-bottom: 2px solid #BD8A40; color: #D8CFBE; -moz-border-radius: 2px; border-radius: 2px; height: 1%; margin: 4px 4px 20px 0px; padding: 27px; } #orderitems .item a { color: #BD8A40; } #orderitems .item a:hover { color: #E0B470; } #orderitems .item a.checkout, #orderitems .item a.checkoutcart, #orderitems .item a.checkout:visited, #orderitems .item a.checkoutcart:visited { color: #000000; } #orderitems .icon-download { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; text-decoration: none; box-sizing: border-box; margin: 6px 0px; text-shadow: none; display: block; text-align:center; padding: 8px; } #orderitems .icon-download a, #orderitems .icon-download a:hover { color: #000000; text-decoration: none;} .anypay { margin: 8px 0px 16px 0px; } #storeproductform { } #listCategories { margin: auto; font-size: 15px; text-align: center; } #listCategories .categoryTitle { } #listCategories a, #listCategories a:active { text-decoration: none; font-size: 15px; color: #000000; } #listCategories a:link, #listCategories a:visited { text-decoration: none; } #listCategories a:hover { text-decoration: underline; color: #009900; } #listCategories .displaygallerya { display: inline; position: relative; } #listCategories .displaygalleryb { padding: 16px; margin-bottom: 20px; position: relative; bottom: 0; left: 8px; display: inline-block; *display:inline; zoom: 1; float: none; } #listCategories .displaygalleryc { display: block; position: relative; bottom: 0; text-align: center; } #listCategories .displaygalleryd { position: absolute; bottom: 0;text-align: center; margin: auto; display: block; } #listCategories .displaygallerynamecontainer { z-index: 20; postion: relative; } #listCategories .displaygalleryname { padding: 4px; float: left; width: 100%; text-align: center; } #buycreditscontainer { text-align: left; } /* ################################################## END STORE CSS ##################################################### */ /* ################### V3 Photo View ############################ */ .collectioncount { opacity: .4; } .cartnotice { position: fixed; right: 24px; bottom: 24px; background: #343434; box-sizing: border-box; border-radius: 4px; box-shadow: 0px 0px 8px rgba(0,0,0,.4); padding: 16px; z-index: 5000; color: #B4B4B4; } .cartnoticecontent { margin: 16px auto; list-style: none; padding: 0; text-align: center;} .cartnoticecontent li { display: inline-block; margin-right: 16px; } .cartnoticecontent li a, .cartnoticecontent li a:visited { color: #FFFFFF; background: #393939; padding: 8px 12px; box-sizing: border-box; border-radius: 4px; } .cartnoticecontent li a:hover { background: #2c4782; } .cartnoticeproductname {padding: 4px; } .photoviewnameclose { position: fixed; top: 0; left: 0; box-sizing: border-box; width: 100%; background: #12100E; padding:2px 8px; z-index: 501; } #photoviewview { margin-top: 36px; } .singleprodgroupname { padding: 0px 16px; box-sizing: border-box; } .viewmycollection { padding: 8px; box-sizing: border-box; margin-bottom: 12px;} .photoviewoptions { list-style-type: none; padding: 0px; margin: 0px; text-align: center; } .photoviewoptions li { display: inline-block; text-align:center; margin: 0px 12px; font-size: 19px; } .photoviewoptions .icon-text { font-size: 12px; } .thephotocontainer { height: 77vh; display: flex; align-items: center; justify-content: center; flex-flow: row nowrap; position: relative; } .mobileviewmessage { padding: 8px; text-align: center; display: none; position: relative; } .mobileviewmessage div { position: relative; margin: auto; } .viewphototitle { padding: 4px; box-sizing: border-box; overflow: hidden; white-space:nowrap; margin: 4px auto; text-align: center; } .viewphotonumbercount { margin: 4px auto;padding: 4px; text-align: center; } .closephotoviewicon { float: right; text-align: right; margin: 0px; font-size: 24px; font-weight: 200; z-index: 2000; position: relative; display: inline; width: 15%; box-sizing: border-box;} @media (max-width: 1300px) { .thephotocontainer { height: 74vh; } } @media (max-width: 1150px) { .thephotocontainer { height: 70vh; } } @media (max-width: 1024px) { .thephotocontainer { height: 60vh; } .thephotocontainercustomer { height: 50VH !important; } .closephotoviewicon { font-size: 34px; } .mobileviewmessage { display: block; } .viewphototitle { margin-bottom: 8px; } .cartnotice { position: fixed; left: 0px; right: 0px; bottom: 36px; width: 100%; } .cartnoticeproductname { text-align: center; } .photoviewoptions .compareicon { display: none; } } .photoviewactions { max-width: 800px; margin: auto; } #photoviewview .photoviewpad .photofilename { float: left; text-align: right; padding: 4px 12px 4px 4px; margin-top: 8px; width: 50%; overflow: hidden; box-sizing: border-box;} #photoviewview .photoviewpad .photoshare { float: left; text-align: left; padding: 4px 4px 4px 12px; margin-top: 8px; width: 50%; box-sizing: border-box;} .sy-photo-nav-prev { position: absolute; left: 0px; top: 45%; font-size: 48px; z-index: 55; } .sy-photo-nav-next { position: absolute; right: 0px; top: 45%; font-size: 48px; z-index: 55; } .photocaption { padding: 24px; box-sizing:border-box; } .viewphotocartlink, .viewphotofavoriteslink { margin: 0px 8px; } .viewimageshoppingcart { position: fixed; bottom: 0; left: 0; box-sizing: border-box; width: 100%; background: #12100E; padding: 8px; z-index: 502; box-shadow: 0px 0px 8px rgba(0,0,0,.7); } .photoviewphoto { cursor: zoom-in; } .photoviewenlarged { cursor: zoom-out; } .icon-cart-plus { font-size: 19px; } .thephotocontainer { overflow: hidden; box-sizing: border-box; } #enlargecontainbackground { width:100%; height:1000%; background-color: rgba(0,0,0,.9); overflow: hidden; position: fixed; top: 0; left: 0; z-index: 1001; } #photoviewbg { width:100%; height:1000%; background-color: rgba(0,0,0,.7); overflow: hidden; position: fixed; top: 0; left: 0; z-index: 50; } .photoviewcontainer { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 51; width: 100%; box-sizing: border-box; display: none; } #photoview { background: #12100E; margin: 0px auto; width: 100%; box-sizing: border-box; min-height: 100VH; max-width: 100%; } /* @media (max-width: 1800px) { #photoview { max-width: 1686px; } } @media (max-width: 1700px) { #photoview { max-width: 1586px; } } @media (max-width: 1600px) { #photoview { max-width: 1486px; } } @media (max-width: 1500px) { #photoview { max-width: 1386px; } } @media (max-width: 1400px) { #photoview { max-width: 1286px; } } @media (max-width: 1300px) { #photoview { max-width: 1186px; } } @media (max-width: 1200px) { #photoview { max-width: 1024px; } } */ #photoviewinner { padding: 8px; max-width: 1800px; box-sizing: border-box; margin: auto; } /* #stockphotopageview { margin: auto; } */ #photoviewtitle { vertical-align:bottom; display: table; width: 100%; } #photoviewtitle h1, .stockpagetitle h1, .products h1, #photoviewtitle h2, .stockpagetitle h2, .products h2 { margin:0; padding:0; line-height: 110%; } #photoviewtitle .title { width: 60%; vertical-align:bottom; display: table-cell; box-sizing:border-box; padding: 0px 16px;} #photoviewtitle .stocksave { width: 20%; vertical-align:bottom; display: table-cell; box-sizing:border-box; padding: 0px 16px;} #photoviewtitle .share { width: 20%; text-align: right;vertical-align:bottom; display: table-cell; box-sizing:border-box; padding: 0px 16px;} #photoviewview .photocontainer { float: left; width: 65%; position: fixed; } @media (min-width: 1800px) { #photoviewview .photocontainer {max-width: 1170px; } } #photoviewview .products { float: right; width: 35%; } #photoviewview .photocontainernopurchase { width: 100%; box-sizing: border-box; max-width: 1800px;} #photoviewview .productsnopurchase { display: none; } #photoviewview .photoviewproducts { max-width: 480px; margin: auto; } #photoviewview .photoviewpad { padding: 16px; } #photoviewview .photoviewvphoto { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } #photoviewview .photoviewhphoto { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } #photoviewview .photocontainerfull { width: 100%; box-sizing: border-box; max-width: 1800px;} #photoviewview .productsfull { display: none; } .photocontainerclass { position: fixed; display: block; } .productsclass { float: right; } @media (max-width: 1024px) { #photoviewview .photocontainerclass { float: none; width: 100% !important; position: relative;} #photoviewview .productsclass { float: none; width: 100% !important; display: block !important;} #photoviewtitle .title { width: 100%; vertical-align:bottom; display: block; } #photoviewtitle .stocksave { width: 40%; vertical-align:bottom; display:inline-block; } #photoviewtitle .share { width: 60%; text-align: right;vertical-align:bottom; display: inline-block; } #photoviewinner { padding: 8px; } #photoviewview .photoviewproducts { max-width: 100%; margin: auto; } #photoviewview .photoviewpad { padding: 2px; } .buyphotoicon { display: none !important; } } #photoviewloading { position: absolute; left: 50%; margin: auto; height: 100%; margin-left: -30px; margin-top: 20%; } #closephotoview { position: fixed; top: 4px; right: 2px; z-index: 60;} #closephotoview .the-icons { color: #e4e4e4; font-size: 28px; text-shadow: none; } .stockenlargeicon { position: absolute; width: 100% height: 100%; text-align: center; top: 40%; left: 50%; margin-left: -30px; z-index: 2; display: none;} .photoviewviewphotocontainer { position: relative; } .photoviewviewphotocontainer:hover .stockenlargeicon { display: block; } .stockenlargeicon .the-icons { color: #ffffff; font-size: 50px; text-shadow: 1px 1px 1px rgba(0,0,0,.8); } .stocksave { cursor: pointer; } .stocksave .icon-star-1 { color: #ffe400; text-shadow: 0 1px 2px rgba(0,0,2,.80); transition: text-shadow 0.5s ease-out; } #photoviewcoverbackground {width:100%; height:100%; min-height: 100%; background-color: #000000; opacity:0.70; overflow: hidden; display: block; position: fixed; top: 0; left: 0; display: none; z-index: 300; } /* ######## STOCK PHOTO STUFF ############## */ #navstock { padding: 0px; margin: 0 auto; width: 100%; } #navstock .the-icons { text-shadow: none; color: #000000; } #navstock .tabdisabled { display: inline-block; padding: 6px; margin: 0px 0px 8px 0px; background: #786A56; border: solid 1px #3A332A; color: #FFEACA; width: 100%; min-width: 360px; box-sizing:border-box; display: block; padding: 8px; cursor:not-allowed; } #navstock .tab { background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; width: 100%; min-width: 360px; box-sizing:border-box; display: block; padding: 8px; } #navstock .tab:hover { background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; } #navstock select { padding: 4px; } @media (max-width: 1024px) { #navstock .tab,#navstock .tabdisabled { width: auto; min-width: auto;} } #showstockphotobg, #showstockphotobglarge { width:100%; height:1000%; background-color: rgba(0,0,0,.7); overflow: hidden; position: fixed; top: 0; left: 0; z-index: 50; } #showstockphoto { background: #12100E; width: 1400px; position: absolute; left: 50%; margin-left: -700px; top: 10%; z-index: 51; } @media (max-width: 1450px) { #showstockphoto { width: 90%; left: 5%; margin-left: 0px; } } #showstockphotoinner { padding: 24px; } #stockphotopageview { margin: auto; } #stockphototitle { vertical-align:bottom; display: table; width: 100%; } #stockphototitle h1, .stockpagetitle h1, .products h1, #stockphototitle h2, .stockpagetitle h2, .products h2 { margin:0; padding:0; line-height: 110%; } #stockphototitle .title { width: 60%; vertical-align:bottom; display: table-cell; box-sizing:border-box; padding: 0px 16px;} #stockphototitle .stocksave { width: 20%; vertical-align:bottom; display: table-cell; box-sizing:border-box; padding: 0px 16px;} #stockphototitle .share { width: 20%; text-align: right;vertical-align:bottom; display: table-cell; box-sizing:border-box; padding: 0px 16px;} #stockphotoview .photocontainer { float: left; width: 60%; } #stockphotoview .products { float: left; width: 40%; } .stockphotoviewpad { padding: 16px; } .stockvphoto { width: auto; max-height: 75vh; } .stockhphoto { width: 100%; height: auto;} @media (max-width: 1024px) { #stockphotoview .photocontainer { float: none; width: 100%; } #stockphotoview .products { float: none; width: 100%; } #stockphototitle .title { width: 100%; vertical-align:bottom; display: block; } #stockphototitle .stocksave { width: 40%; vertical-align:bottom; display:inline-block; } #stockphototitle .share { width: 60%; text-align: right;vertical-align:bottom; display: inline-block; } .stockvphoto { width: 100%; height: auto; max-height: 100%; } } #stockphotoloading { position: absolute; left: 50%; margin: auto; height: 100%; margin-left: -30px; margin-top: 20%; } #closestockphoto { position: fixed; top: 4px; right: 2px; } #closestockphoto .the-icons { color: #e4e4e4; font-size: 28px; text-shadow: none; } .stockenlargeicon { position: absolute; width: 100% height: 100%; text-align: center; top: 40%; left: 50%; margin-left: -30px; z-index: 2; display: none;} .stockphotoviewphotocontainer { position: relative; } .stockphotoviewphotocontainer:hover .stockenlargeicon { display: block; } .stockenlargeicon .the-icons { color: #ffffff; font-size: 50px; text-shadow: 1px 1px 1px rgba(0,0,0,.8); } .stocksave { cursor: pointer; } .stocksave .icon-star-1 { color: #ffe400; text-shadow: 0 1px 2px rgba(0,0,2,.80); transition: text-shadow 0.5s ease-out; } .stocksearchinput { display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto; vertical-align: top; font-size:17px; font-weight:400; width:100%; height:50px; padding: 8px 8px; margin:0; box-sizing:border-box; } .stocksearchsubmit { display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto; vertical-align: top; font-size:17px; font-weight:400; height:50px; padding: 8px 8px; margin:0; box-sizing:border-box; } #stockmenuoptions { padding: 0px 0px 8px 0px ; margin-top: -8px; margin-bottom: 16px; } #stockmenuoptions a { margin-right: 24px; font-size: 13px; } #stockmenuoptions .the-icons { font-size: 13px; } .stockthumbtitle { text-align: left; line-height: 100%; padding: 4px 0px; } .stockthumbtext { text-align: left; line-height: 100%; font-size: 12px; padding: 4px 0px; } .stockcategoryname { background: rgba(0,0,0,.7); color: #FFFFFF; z-index:50; position: absolute; bottom: 0; width: 100%; padding: 16px; box-sizing:border-box; } /* ############################################## THE FOLLOWING SECTION CONTROLS THE FORM STYLES ################################*/ #cookiewarning { position: fixed; bottom: 0; left: 0; padding: 8px; z-index: 1000; width: 100%; text-align: center; background-color: #12100E; color:#E8E0D0; font-family : 'Jost',Arial,Verdana,sans-serif; border: solid 1px #12100E; } textarea, input, select { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff42382B,endColorstr=#ff42382B); background-color: rgba(66,56,43,1.00); color:#E8E0D0; font-family : 'Jost',Arial,Verdana,sans-serif; border: solid 1px #3A332A; padding: 8px; font-size: 15px; border-radius: 4px; transition: border-color .3s; } .inputError { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff42382B,endColorstr=#ff42382B); background-color: rgba(66,56,43,1.00); color:#E8E0D0; font-family : 'Jost',Arial,Verdana,sans-serif; border: solid 1px #890000; padding: 8px; border-radius: 4px; transition: border-color .3s; font-size: 15px; -moz-box-shadow: 1px 1px 6px rgba(100, 0, 0, .5); box-shadow: 1px 1px 6px rgba(100, 0, 0, .5); } button { padding: 8px; font-family : 'Jost'; padding: 6px; cursor: pointer; box-sizing: border-box; font-size: 15px; } .submit { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffCF9A44,endColorstr=#ffCF9A44); transition: background-color .3s; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; size: 15px; } .submit:hover { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffFFCD80,endColorstr=#ffFFCD80); background: #FFCD80; border: solid 1px #BD8A40; color: #12100E; cursor: pointer; size: 15px; } .imagesubmit { background: none; border: solid 0px #8F6A2F; color: #000000; cursor: pointer; size: 15px; } input.checkbox,.toselect ,input.radio{ font-size: 15px; background-color: transparent; border: 0; margin: 0; } input[type=checkbox]:checked + label { font-weight: bold; } input[type=radio]:checked + label { font-weight: bold; } input.image { background-color: transparent; border: none; } .ff-default-value { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff42382B,endColorstr=#ff42382B); background-color: rgba(66,56,43,1.00); color:#E8E0D0; font-family : 'Jost',Arial,Verdana,sans-serif; border: solid 1px #3A332A; font-weight: normal; font-style: italic; } .disabledinput { background: #786A56; border: solid 1px #3A332A; color: #FFEACA; } .field100 { width: 100%; box-sizing:border-box; } .error { background-color: #CF1919; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #CF1919), color-stop(100%, #AF0909)); background-image: -webkit-linear-gradient(#CF1919, #AF0909); background-image: -moz-linear-gradient(#CF1919, #AF0909); background-image: -o-linear-gradient(#CF1919, #AF0909); background-image: -ms-linear-gradient(#CF1919, #AF0909); background-image: linear-gradient(#CF1919, #AF0909); border: solid: 1px #8A2424; color: #FFFFFF; padding: 16px; box-sizing: border-box; margin: 16px auto; } .error a {color: #FFFFFF !important; text-decoration: underline; ;} .error a:hover {color: #FF9999 !important; } .success { background: #4BAA48; border: solid: 1px #2F922C; color: #FFFFFF; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4BAA48), color-stop(100%, #2F922C)); background-image: -webkit-linear-gradient(#4BAA48, #2F922C); background-image: -moz-linear-gradient(#4BAA48, #2F922C); background-image: -o-linear-gradient(#4BAA48, #2F922C); background-image: -ms-linear-gradient(#4BAA48, #2F922C); background-image: linear-gradient(#4BAA48, #2F922C); color: #FFFFFF; padding: 16px; box-sizing: border-box; margin: 16px auto; } /* ###################################################### END FORM STYLES ##############################################################*/ /* ###################################################### SHARE STYLE ##############################################################*/ #socialShare { margin: 8px 0; } #socialShare .item { margin: 2px; float: left; } /* ###################################################### END SHARE STYLES ##############################################################*/ /* ######################################################### TOP STORE MENU ################################################ */ #viewcarttop { background-color: #1A1611; border-bottom: 2px solid #BD8A40; color: #D8CFBE; -moz-border-radius: 2px; border-radius: 2px; z-index: 801; width: 400px; float: right; display: none; position: fixed; left: 50%; margin-left: -200px; top:-2px; -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, .5); box-shadow: 1px 1px 6px rgba(0, 0, 0, .5); } #viewcartinner { padding: 27px; } #viewcarttop h3 { color: #BD8A40; } #viewcartinner a { color: #BD8A40; } #viewcartinner a:hover { color: #E0B470; } /* ######################################################## END TOP STORE MENU ############################################## */ /* ##################################################### TOOL TIPS ############################################################## */ .tooltip{ position:fixed; z-index:1999; color:#fff; background-color:#444444; border: solid 1px #343434; padding:1px; display: none; text-align: left; font-size: 13px; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); -moz-border-radius: 6px; max-width: 300px; text-shadow: none; font-weight: normal; } .tooltip div{ margin:0; padding:4px; padding:2px 7px; display: block; white-space: normal; } /* ##################################################### END TOOL TIPS ############################################################## */ /* ###################################################### SIDE MENU #################################################################### */ #sideMenuContainer { width: 13%; float: left; color: #A89C8A; padding-top: 4px; } #sideMenuContainer a, #sideMenuContainer a:active { text-decoration: none; color: #E8E0D0;} #sideMenuContainer a:link, #sideMenuContainer a:visited { text-decoration: none; color: #E8E0D0; } #sideMenuContainer a:hover { color: #BD8A40; text-decoration: underline; } #sideMenuContainer .header { color: #; } #sideMenuContainer #sideMenu { margin: 0px 49px 0px 0px; } #sideMenuContainer #sideMenu .label { font-family : 'Jost',Arial,Verdana,sans-serif; font-size: 15px; font-size: 17px; } #sideMenu ul { list-style-type: none; padding: 0px; margin: 0px; } #sideMenu ul li { border-bottom:1px dotted #2A251E; padding: 0 0px 0 0px; padding: 0px 0; font-size: 13px; } #sideMenu ul li.last{ border-bottom:0; padding: 0 0px 0 0px; padding: 0px 0 0 0; font-size: 13px; } #sideMenu ul li .sub { padding-left: 20px; } #sideMenu ul li .on { font-weight: bold; } #sideMenu ul li .mini { border: 1px solid #2A251E; margin-right: 8px; } #sideMenu ul li .date { padding: 2px 0; font-size: 15px; } .sidebaritem { margin: 0 0 24px 0 } .sidebarlabel { margin: 0 0 8px 0 } #pageContentContainer { width: 87%; display: inline; float: right; margin: 0 0 0 0; min-height: 100%; position: relative; } #pageContentContainer { width: 100%; margin: 0; } #sideMenuContainer { display: none; width: 0; padding: 0; margin: 0; } #som { size: 0 - 100% } #categoryList .item { padding: 4px 0; } #categoryList .item .on { font-weight: bold; } #linksMenuContainer, .blogSideMenuContainer { margin: 0 0 0 0; } #linksMenu, #categoryList { background: #1A1611; border: 1px solid #2A251E; border-radius:2px; color: #E8E0D0; padding: 10px; } #sideMenuAdditionalHtmlTop, #sideMenuAdditionalHtml { margin: 0px 49px 0px 0px; color: #A89C8A; } #linksMenu .menuHeader { color:#; padding: 6px; } #linksMenu .menuHeader .title { font-size: 17px; } .blogSideMenuContainer .header { margin: 0px 49px 0px 0px; color: #A89C8A; padding: 10px; } #linksMenu .sideMenuItem, #categoryList .item { border-bottom:1px dotted #2A251E; line-height: 0px; padding: 0 0px 0 0px; } #linksMenu .sideMenuItem .sub { text-indent:20px; } #linksMenu .sideMenuItem img { float: left; margin: 4px 6px 6px 0; border: 1px solid #2A251E; } #linksMenu .sideMenuItem .title { } #linksMenu .menuHeader img { float: left; margin: 0 6px 6px 0; border: 1px solid #2A251E; } /* ####################################################### END SIDE MENU AREA ##########################################################*/ /* ####################################################### SLIDESHOW ##########################################################*/ #thumbscroller { } .thumbscrollerpage { background: #; border: solid 1px #; margin-top: 16px; padding: 4px; color: #; } .thumbscrollerfullscreen { background: #; border: solid 1px #; margin-top: 16px; padding: 4px; position: fixed; bottom: 0; width: 100%; left: 0; z-index: 50;} #thumbscroller .fullscreen {} #scrollbar1 { width: 100%; clear: both; margin: 2px 0 0 0; bottom: 100px;} #scrollbar1 .viewport { width: 100%; height: 105px; overflow: hidden; position: relative; } #scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; } #scrollbar1 .thumb .end, #scrollbar1 .thumb { background-color: #; border-radius: 4px; height: 16px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: 2px; box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2) ,0px 0px 6px 6px rgba(255,255,255,0.3) inset; opacity: .6; } #scrollbar1 .thumb:hover { opacity: 1; } #scrollbar1 .scrollbar{ background: #; position: relative; margin: 0 0 0px; clear: both; height: 20px;border-radius: 4px; opacity: .8; } #scrollbar1 .scrollbar:hover{ background: #; position: relative; margin: 0 0 0px; clear: both; height: 20px;border-radius: 4px; opacity: 1; } #scrollbar1 .track { width: 100%; height:15px; position: relative; } #scrollbar1 .thumb .end{ overflow: hidden; height: 20px; width: 0px;} #scrollbar1 .disable{ display: none; } .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } .scrollthumbnail { border: 1px solid #2A251E; opacity: .6; } .scrollthumbnail:hover { opacity: 1; } .thumbon { border: 1px solid #2A251E; opacity: 1; } .photofull { margin: auto; border: solid 0px #222222; padding: 0px; background: #12100E; box-shadow: 0px 0px 15px 3px rgba(25,25,25,0.9) ; position: relative; margin: auto; } #ssbackground { width:100%; height:100%; min-height: 100%; background-color: #0A0908; opacity:0.90; overflow: hidden; display: block; position: fixed; top: 0; left: 0; display: none; z-index: 20; } #thumbscrollerclick { cursor: pointer; } #photomenu ul { list-style-type: none; padding: 0px; margin: 0px; } #photomenu ul li { display: inline-block; margin-left: 16px; } .thumbnailactions { text-align: center; } .thumbnailactions ul { list-style-type: none; padding: 0px; margin: 0px; text-align: center; } .thumbnailactions ul li { display: inline; margin-left: 2px; } #sscontainerloading { background: transparent url('/sy-graphics/loading-page.gif') center center no-repeat; width: 100%; height: 100%; position: absolute; z-index: 50; display: none;} .sscontainerfull { position: fixed; width: 100%; height: 100%; left:0; top: 0; z-index:30; } .controlsbg { } #fullscreen { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff12100E,endColorstr=#ff12100E); background-color: rgba(18,16,14,1.00); padding: 6px; margin: 4px; color: #F2EADB; text-align: center; border-radius: 2px; } .controlsbg a { color: #F2EADB; } .photocontainer { position: relative; } .photocaptioncontainer { z-index: 1602; position: absolute; bottom: 0; left: 0; width: 100%; display: none; } .photocaptioncontainer .inner{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff12100E,endColorstr=#ff12100E); background-color: rgba(18,16,14,1.00); padding: 16px; color: #F2EADB; text-align: center; } .photocaptioncontainer .inner h3 { font-family: 'Cormorant Garamond',Arial; font-size: 17px; text-shadow: none; color: #F2EADB; display: block; } .photo { border: solid 2px #2A251E; padding: 0px; background: #12100E; } .photoHidden { display: none; border: solid 2px #2A251E; padding: 0px; background: #12100E; } .photocaptionbelow { padding: 4px 0 24px; text-align: left; } #ssContainer { text-align: center; background: #890000;} .SSphotoViewContainer { position: absolute; margin: auto; width: 100%; } #ssViewPhotoOuter { position: relative; text-align: center; display: block; } #ssViewPhotoOuterFixed { position: fixed; text-align: center; width: 100%; display: block; } .SSphotoView { margin: auto; display: none; border: solid 2px #2A251E; padding: 0px; background: #12100E; } #ssControls { padding: 6px; } #ssControls ul { list-style-type: none; padding: 0px; margin: 0px; text-align: center; } #ssControls ul li { margin: 4px; display: inline; } .loadMore { display: block; padding: 12px; text-align: center; background: #CF9A44; border: solid 1px #8F6A2F; color: #000000; cursor: pointer; font-size: 17px; } .zoomCur { cursor: url('/sy-graphics/magnify.cur'), pointer; } .zoomClose { cursor: pointer; } #video { } #passwordSite { background:#12100E; padding: 20px; margin-top: 30px; } #slideShowDContainer { position: relative; background: url('/sy-graphics/loading.gif') center center no-repeat; } #slideShowDContainer .slideShowDPic { position: absolute; z-index: 2; text-align: center;} #slideShowDContainer .slideShowDPic img { margin: auto; } .viewfaq { background-color: #1A1611; padding: 8px; text-align: left; -moz-border-radius: 2px; border-radius: 2px; color: #000000; } .viewfaqcontainer { display: none; } .faqlink { font-size: 15px; } .viewfaqtext { padding: 20px; background: #FFFFFF; } .viewmedia { text-align: center; font-weight: bold; font-size: 17px;} li { margin: 0;} .blogPhotoView { position: relative; z-index: 3000; float: left; } .photoNextPrevious { } .blogPhotoCaptionOnPhoto { color: #F2EADB; background:#12100E; opacity: 1.00; filter:alpha(opacity=100); z-index: 1602; position: absolute; bottom: 0px; z-index: 9; text-align: left; margin: auto; left: 50%; display: none; } .blogPhotoCaptionFS { color: #F2EADB; width: %; position: absolute; bottom:px; margin: 0 100px 0 0; left: 5%; z-index: 10; background:#12100E; padding: 4px; display: block; -moz-border-radius: px; border-radius: px; opacity: 1.00; filter:alpha(opacity=100); overflow: hidden; border: solid 1px #; position: fixed; text-align: left;display: none; overflow: hidden; z-index: 1602; } .blogPhotoCaptionText { filter:alpha(opacity=100); opacity: 1; padding: 4px; z-index: 50; position: relative; padding: 16px; } #overlay1, #overlay2 { z-index: 1600; position: fixed; width: 100%; height: 100%;} #fullScreenContainer { display: none; } #logo { position: fixed; z-index: 5000; background: #7A4627; border: solid 1px #; color: #F2EADB; padding: 0px; } #fsTextHeader { background: #7A4627; border: solid 1px #; color: #F2EADB; padding: 0px; display: none; } #hideText {padding: 6px; text-align: center; cursor: pointer;} #comContainer, #fsHelp { margin: auto; width: 700px; height: 520px; background-color: #12100E; border: solid 1px #BD8A40; color: #E8E0D0; border: solid 2px #999999; padding: 12px; position: fixed; top: 3%; left: 50%; margin-left: -350px; display: none; -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); -goog-ms-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); z-index: 5500; -moz-border-radius: 6px; border-radius: 6px; } #thumbnailsContainer { position: fixed; display: none; overflow: hidden; bottom: 0; } #frameContainer { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: block; margin: auto; overflow: hidden; z-index: 1599; background: #12100E; } #showThumbnailMenu { background: transparent url('/sy-graphics/siteicons//tn-show-thumbs.png') no-repeat; width: 36px; height: 36px; border: none; cursor: pointer; display: block; float: left; } #closeThumbnailMenu { background: transparent url('/sy-graphics/siteicons//tn-close-thumbs.png') no-repeat; width: 36px; height: 36px; border: none; cursor: pointer; display: none; float: left; } .stopSlideshow { background: transparent url('/sy-graphics/siteicons//tn-pause.png') no-repeat; width: 36px; height: 36px; border: none; cursor: pointer; display: block; float: left; } .startSlideshow { background: transparent url('/sy-graphics/siteicons//tn-play.png') no-repeat; width: 36px; height: 36px; border: none; cursor: pointer; display: block; float: left; } .loadingbarsmall { width: 100%; float: left; display: block; } .loadingbar { position: absolute; width: 95%; float: left; bottom: 0; margin-bottom: -6px; } .loadingbar .inner { float: left; width: 100%; } .loadingbar .inner .bar { border: 0; width: 1px; height: 10px; } .displayPhotoContainer { text-align: center; margin: auto; position: relative; } .displayPhotoContainerOuter { width: 100%;margin: auto;position: absolute; } #loadingPage { background: transparent url('/sy-graphics/loading-page.gif') center center no-repeat; width: 100%; height: 100%; position: fixed; z-index: 1600; display: none; } #fsBottomMainMenu { list-style:none; margin:auto; padding:0; position:relative; text-align:top; z-index: 1602; } #fsBottomMainMenu a, #fsBottomMainMenu a:active { text-decoration: none; color: #F2E5BA;} #fsBottomMainMenu a:link, #fsBottomMainMenu a:visited { text-decoration: none; color: #F2E5BA; } #fsBottomMainMenu a:hover { color: #BD8A40; text-decoration: underline; } #fsBottomMainMenu #mainmenu li a, #fsBottomMainMenu #mainmenu li a:active { text-decoration: none; color: #F2E5BA; text-shadow: 1px 1px 2px #000000; text-transform:uppercase; } #fsBottomMainMenu #mainmenu li a:link, #fsBottomMainMenu #mainmenu li a:visited { text-decoration: none; color: #F2E5BA; } #fsBottomMainMenu #mainmenu li a:hover { color: #BD8A40; text-decoration: underline; } #fsBottomMainMenu #mainmenu{ margin: 0; padding: 0; z-index: 1602; } #fsBottomMainMenu #mainmenu li { list-style: none; float: left; margin: 0 1px 0 0; padding: 4px 8px 0 20px; z-index: 1602; } #fsBottomMainMenu #photosmenu { display: block; visibility: visible; position: absolute; z-index: 1602; } #fsBottomMainMenu #mainmenu div { z-index: 1602; position: absolute; visibility: hidden; padding: 0; border: 0; color: #E8E0D0; background: #E38862; display: block; -moz-border-radius: 0px; border-radius: 0px; } #fsBottomMainMenu #mainmenu span { display: block; z-index: 1602; } #fsBottomMainMenu #mainmenu .photos { display: block; z-index: 1602; } #fsBottomMainMenu #mainmenu .thumbnailsContainer { padding-top: 6px; float: left; z-index: 1602; } #fsBottomMainMenu #mainmenu div a { text-align: left; text-decoration: none; z-index: 1602; } #fsBottomMainMenu #mainmenu div a:hover { background: #; color: #BD8A40; z-index: 1602; } #slideshowCount { position: fixed; width: 100%; top: 5px; text-align: right; left: 0; height: 23px; z-index: 1600; color: #FFFFFF; text-shadow: #000000 1px 1px 1px; } #facebookLikeBoxFS { position: fixed; left: 0; top: 250px; z-index: 8; margin-left: -292px; } #likeBoxInner { float: left; width: 292px;background: #12100E; } #facebookTabInner{ float: left; position: relative; display: block; width: 60px; height: 289px; } #facebookTabInnerTab{ background: #3B5998; position: absolute; bottom: 0; padding: 8px; cursor: pointer; color: #FFFFFF; border-top-right-radius: 5px; -moz-border-radius-topRight: 5px;border-bottom-right-radius: 5px; -moz-border-radius-bottomRight: 5px; } #sideShare { position: fixed; right: 0; top: 250px; z-index: 8000; background: #890000; } #main_container { width: 100%; max-width: 1400px; margin: auto; margin-top: 4px; } #mobileContainer { } #mobileContainer .inner { padding: 10px; } #contentUnderMenu { padding: 49px; } #mainmenu .photos { width: 250px; } .toolTip { /* This is the hook that the jQuery script will use */ position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned */ } .toolTipWrapper { /* The wrapper holds its insides together */ padding: 4px;; position: absolute; /* Absolute will make the tooltip float above other content in the page */ top: -30px; display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */ border: solid 1px #2A251E; background:#E38862; color:#F2E5BA; font-weight: bold; font-size: 9pt; /* A font size is needed to maintain consistancy */ z-index: 10000; white-space:nowrap; -moz-border-radius: 2px; border-radius: 2px; } /* MAIN CONTENT AREA - The following controls the main content on the pages */ .pageContent, .pc { padding: 4px; } .pageContentBold { font-weight: bold; padding: 4px; } /* errorMessage - This is when an error is displayed */ .errorMessage { background-color: #f99999; border: solid 1px #890000; color: #490000; padding: 4px; } /* successMessage - This is when a success message is displayed */ .successMessage { background-color: #7AC494; border: solid 1px #469160; color: #000000; padding: 4px; } /* END MAIN CONTENT AREA */ /* THE FOLLOWING CONTROLS THE HOME PAGE */ #homePageLabels { font-size: 15px; color: #; } #homePageMore { width: 100%; text-align: right; } #homePageMore a, #homePageMore a:active { text-decoration: none; } #homePageMore a:link, #homePageMore a:visited { text-decoration: none; } #homePageMore a:hover { text-decoration: underline; } #newsSeparator { width: 95%; margin: auto; line-height: 10px; } #newsHome { } /* The #newsHeadlines is the font or link wiht news headlines */ #newsHeadlines { color: #F2EADB; font-size: 17px; } #newsHeadlines a, #newsHeadlines a:active { text-decoration: none; color: #F2EADB;} #newsHeadlines a:link, #newsHeadlines a:visited { text-decoration: none; color: #F2EADB; } #newsHeadlines a:hover { color: #BD8A40; text-decoration: underline; } .newsDate { color: #; font-size: 11px; } #subMenu { color: #E8E0D0; font-size: 10px; padding: 4px 0 0 0; } #subMenu a, #subMenu a:active { text-decoration: none; } #subMenu a:link, #subMenu a:visited { ; text-decoration: none; } #subMenu a:hover { text-decoration: underline; } /* PHOTO GALLERY STYLES */ #photo-preview { position: absolute; background-color: #12100E; border: 0px solid #2A251E; z-index: 200; box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); display: none; } #package-photo-preview { position: fixed; background-color: #12100E; border: 0px solid #2A251E; box-shadow: 1px 1px 10px rgba(0, 0, 0, .5); display: none; z-index: 2000; } #stackedThumbnails { list-style-type: none; position: relative; margin: 10px 0; text-align: center; } #stackedThumbnails .thumb { display: none; margin: 0; } #stackedThumbnails .styled { background-color: #1A1611; border: solid 1px #BD8A40; color: #D8CFBE; -moz-border-radius: 2px; border-radius: 2px; } #stackedThumbnails .styled a { color: #BD8A40; } #stackedThumbnails .styled a:hover { color: #E0B470; } #stackedThumbnails .thumb .inner{ padding: 12px; } #photoGallery { text-align: center; margin: auto; } #listGalleries { text-align: center; margin: auto; } #photoGallery .thumb { padding: 4px; margin: 4px; float: left; overflow: hidden; text-align: center; z-index: 0; } #photoGallery .styled { background-color: #1A1611; border: solid 1px #BD8A40; color: #D8CFBE; margin: 0; -moz-border-radius: 2px; border-radius: 2px; } #photoGallery .thumbContainer { background-color: #1A1611; border: solid 1px #BD8A40; color: #D8CFBE; margin: 0; -moz-border-radius: 2px; border-radius: 2px; padding: 8px; margin: 8px; } #photoGallery .styled a { color: #BD8A40; } #photoGallery .styled a:hover { color: #E0B470; } #photoGallery .thumbContainer a { color: #BD8A40; } #photoGallery .thumbContainer a:hover { color: #E0B470; } #photoGallery .thumbContainer td { text-align: center; } #photoGallery .thumbnail { border: solid 1px #2A251E; margin: auto; } #photoGallery .thumbContainer .thumbname { white-space: nowrap; overflow: hidden; padding: 4px;} #photoGallery .contain { margin:0; position: relative; vertical-align: middle; padding: 10px; } .photoAlbumOuter { margin: auto; display: inline; } .photoAlbum{ display: none; margin: 8px; text-align: center; color: #E8E0D0; } .photoAlbum a, .photoAlbum a:active { text-decoration: none; } .photoAlbum a:link, .photoAlbum a:visited { text-decoration: none; } .photoAlbum a:hover { text-decoration: underline; } .photoAlbum .thumbnails { border: 1px solid #2A251E; } .photoAlbum a { font-size: 17px; } #photoShowBGContainer { width:100%; height:100%; min-height: 100%; margin:0; position: fixed; z-index: 2000; left: 0; top: 0; } #photoShowBG { width:100%; height:100%; min-height: 100%; background-color:#12100E; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; position: absolute; overflow: hidden; display: block; } #photoShowImage { color:#E8E0D0; width: 100%; position: absolute; display: block; z-index: 21; left: 0; top: 35px; margin: auto; text-align: center; } .mainImage { margin: auto; border: solid 0px #222222; padding: 0px; background: #12100E; } .fsPhoto{ margin: auto; border: solid 0px #222222; padding: 0px; background: #12100E; } .theMainImage { margin: auto; } .thumbnails { border: 1px solid #2A251E; padding: 0px; margin: 0px; z-index: 0; } .homePageThumb { padding:0; margin: 4px 8px 4px 4px; float: left; text-align: center; border: 1px solid #2A251E; } /* END PHOTO GALLREY STYLES */ #commentsContainer { } #standardComments { margin: auto; display: block; padding: 4px; } #leaveCommentForm { margin: auto; padding: 4px; width: 65%; float: left; } #listStandardComments { float: right; width: 33%; } .showComment { padding: 4px; border-bottom: solid 1px #BD8A40; } #comments{ padding: 4px; margin: 0px; overflow-y: scroll; height: 200px; } #photoCartLogin{ background-color: #1A1611; border: solid 1px #BD8A40; padding: 4px; margin: 0px; color: #E8E0D0; } #facebookLikeBox { margin: auto; } .footerSpacer { height: 50px; } #footer { padding: 0px; font-size: 15px; color: #A89C8A; background-color: #FFEDC8; } #footer .the-icons { font-size: 32px; } #footerSpacer { height: 30px; } #footer img { border: 0; margin: 0 4px 0 4px; } #footer a, #footer a:active { text-decoration: none; color: #BD8A40;} #footer a:link, #footer a:visited { text-decoration: none; color: #BD8A40; } #footer a:hover { color: #E0B470; } #footerinner { width: 100%; max-width: 1400px; margin: auto; } #submitreviewcontainer-page { position: fixed; bottom: 0; background: #000000; color: #c4c4c4; padding: 8px; z-index: 53; left: 0; } #submitreviewcontainer-page a { color: #FFFFFF; text-decoration: underline; } /* ### Gallery Exclusive ### */ #gallerysharebg {width:100%; height:100%; min-height: 100%; background-color: #000000; opacity:0.70; overflow: hidden; display: block; position: fixed; top: 0; left: 0; display: none; z-index: 300; } #gallerysharebg #accloading { position: absolute; left: 50%; margin: auto; height: 100%; margin-left: -30px; } #galleryheader {top: 0; left: 0; background: #12100E; color: #E8E0D0; width: 100%; z-index: 20; } .galleryheaderfixed { position: fixed; } .galleryheader { position: relative; height: auto;} #galleryheader a, #galleryheader a:visited { color: #E8E0D0; } #galleryheader a:hover { color: #BD8A40; } #galleryheader .inner { padding: 12px; position: relative; height: auto;} #galleryheader .inner .logo { float: left; width: 20%;} #galleryheader .inner .logo p { margin: 0px 0px -12px 0px; padding: 0px 0px 12px 0px ;} #galleryheader .inner .menuouter { float: left; width: 80%; height: 100%; line-height: 100%; } #galleryheader .inner .menuouter .menu { height: 100%; line-height: 100%; vertical-align: middle; } #galleryheader .inner .menuouter .menu ul { list-style: none; line-height: 200%; margin: 0px; padding: 0px; vertical-align: middle;} #galleryheader .inner .menuouter .menu ul li { display: inline; margin: 0px 12px 0px 0px; vertical-align: middle; position: relative; white-space: nowrap;} #galleryheader .inner .menuouter .menu ul li a { color: #E8E0D0; vertical-align: middle; white-space: nowrap; border-bottom: solid 2px transparent; } #galleryheader .inner .menuouter .menu ul li a:hover{ color: #BD8A40; } #galleryheader .inner .menuouter .menu ul li a .the-icons { color: #E8E0D0; text-shadow: none; white-space: nowrap;} #galleryheader .inner .menuouter .menu ul li .title { position: absolute; background: #E8E0D0; color: #12100E; padding: 8px; opacity: 0; display: none;} #galleryheader .inner .menuouter .menu ul li .on { border-bottom: solid 2px #E8E0D0; color: #BD8A40;} #gallerymobileheader {top: 0; left: 0; background: #12100E; color: #E8E0D0; width: 100%; } #gallerymobileheader .inner { padding: 12px 12px; position: relative; height: auto; text-align: center;} #gallerymobileheader .inner ul { list-style: none; margin: 0px; padding: 0px; vertical-align: middle;} #gallerymobileheader .inner ul li { display: inline-block; margin: 0px 8px 0px 0px; vertical-align: middle; position: relative; white-space: nowrap;} #gallerymobileheader .inner ul li a { color: #E8E0D0; vertical-align: middle; white-space: nowrap; border-bottom: solid 2px transparent; } #gallerymobileheader .inner ul li a .the-icons { color:#E8E0D0; text-shadow: none; white-space: nowrap; font-size: 19px;} #gallerymobilemenu { position: relative; } #gallerymobilemenu .menu { position:relative; display: block;} #gallerymobilemenu .menu ul { margin: 0px; padding: 0px; list-style: none; } #gallerymobilemenu .menu ul li { margin: 0px; } #gallerymobilemenu .menu ul li a { display:block; margin: 0px 0px 0px 0px; background: #12100E; border-bottom: solid 1px #2A251E; padding: 16px; color: #E8E0D0; } #gallerymobilemenu .menu ul li a .the-icons { color: #E8E0D0; text-shadow: none; } .underlinemenu { display:block; margin: 0px 0px 0px 0px; background: #12100E; border-bottom: solid 1px #2A251E; padding: 16px; color: #E8E0D0; } .gallerymenuicon { font-size: 31px; text-shadow: none; color:#E8E0D0; } .customerwindows { background: #1A1611; padding: 16px; color: #D8CFBE; display: none; position: absolute; width: 360px; left: 50%; top: 0%;margin-left: -180px; z-index:301; box-sizing: border-box; padding: 16px; box-shadow: 0 0 8px rgba(0,0,0,.6); border-radius: 4px; text-align: left;} .customerwindows .the-icons{ color: #D8CFBE; text-shadow: none; } #useractions, #productactions { position: fixed; left: 0; bottom: 0; width: 100%; box-sizing: border-box; display: none; z-index: 51; text-align: center; background: #1A1611; padding: 16px; color: #D8CFBE; border-top: solid 1px #BD8A40; box-shadow: 0px 0px 12px rgba(0,0,0,.6); } #useractions .checkout, #productactions .checkout, #useractions .disabledbutton, #productactions .disabledbutton { margin: 0px 8px;} #useractions .customerselected, #productactions .customerselected { margin-bottom: 12px; } #useractions .disabledbutton, #productactions .disabledbutton { background: #786A56; border: solid 1px #3A332A; color: #FFEACA; padding: 6px; box-sizing: border-box; border-radius: 4px; } .gallerypopup .inner ul , .stylelist .inner ul { margin: 0px; padding: 0px; list-style: none; } .gallerypopup .inner ul li .stylelist .inner ul li { margin: 0px 0px; } .gallerypopup .inner ul li a, .stylelist .inner ul li a { display:block; margin: 0px 0px 0px 0px; background: #1A1611; border-bottom: solid 1px #BD8A40; padding: 16px; color: #D8CFBE; } .gallerypopup .inner ul li a .the-icons, .stylelist .inner ul li a .the-icons{ color: #D8CFBE; text-shadow: none; } .gallerypopup { display: none; position: absolute; width: 360px; left: 50%; top: 0%;margin-left: -180px; background: #12100E; z-index:301; } .numberCircle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; padding: 10px; font-size: 12px; line-height: 1em; border: 2px solid #E8E0D0; position: relative; display: inline-block; } .numberCircle .height_fix { margin-top: 100%; } .numberCircle .content { position: absolute; left: 0; top: 50%; height: 100%; width: 100%; text-align: center; margin-top: -7px; /* Note, this must be half the font size */ color: #F2EADB; } .numberCircleSmall { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; padding: 8px; font-size: 11px; line-height: 1em; border: 1px solid #F2EADB; position: relative; display: inline-block; margin-left: -2px; } .numberCircleSmall .height_fix { margin-top: 100%; } .numberCircleSmall .content { position: absolute; left: 0; top: 50%; height: 100%; width: 100%; text-align: center; margin-top: -5px; /* Note, this must be half the font size */ color: #F2EADB; } .carttotalcircle { font-size: 12px; margin-top: -6px; } .photo-message { position: absolute; top: 0; width: 100%; padding: 8px 0px; text-align: center; } .thumbtexttoopen { background: rgba(0,0,0,.6); color: #c4c4c4; font-size: 14px; position: absolute; width: 100%; left: 0; padding: 8px 4px; text-align: center; top: 0; cursor: pointer; box-sizing: border-box; } .thumbblurfilename { background: rgba(0,0,0,.6); color: #c4c4c4; font-size: 14px; position: absolute; width: 100%; left: 0; padding: 8px 4px; text-align: center; bottom: 0; cursor: pointer; overflow: hidden; box-sizing: border-box;white-space: nowrap; } .photo-header { position: relative; height: 1200px; background-color:#000000;} .photo-header .image{background-color:#000000; opacity: .7; background-position:50% 50%;background-repeat:no-repeat;-moz-background-size:cover;-o-background-size:cover;-webkit-background-size:cover;background-size:cover;height:100% ;left:0;position:absolute;top:0;width:100%} .photo-header .title { position: absolute; text-align: center; width: 100%; top: 40%; color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0,0,0,.6); } .photo-header .title h1 { color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0,0,0,.6); font-size: 60px; } .photo-header .title p { color: #FFFFFF; text-shadow: 1px 1px 1px rgba(0,0,0,.6); font-size: 21px; } .photo-header .title .the-icons { color: #FFFFFF; font-size: 60px;text-shadow: 1px 1px 1px rgba(0,0,0,.6); } @media (max-width: 1024px) { #galleryheader .inner .logo { width: 25%;} #galleryheader .inner .menuouter { width: 75%; } #galleryheader .inner .menuouter .menu { } } @media (max-width: 800px) { #galleryheader .inner .logo { width: 80%;} #galleryheader .inner .menuouter { width: 20%; } #galleryheader .inner .menuouter .menu { } } @media (max-width: 800px) { .photo-header .title h1 { font-size: 38px; } } #calHeader { display: block; width: 100%; } #calendarselect { max-width: 950px; margin: auto;} .dayscontainer { border-right: solid 1px #BD8A40; border-bottom: solid 1px #BD8A40; } .caldaycontainer { width: 14.28%; float: left; padding: 0px; overflow: hidden;} .caldaycontainerday { width: 14.28%; float: left; padding: 0px; overflow: hidden;} .callabel { margin-bottom: 8px; } .calday { padding: 8px; height: 100%; text-align: center; border-top: solid 1px #BD8A40; border-left: solid 1px #BD8A40; } .today { color: #12100E; background: #E8E0D0; font-weight: bold; } .notmonth {color: #12100E; } .unavailableday span { text-decoration: line-through; opacity: .4;} .selectdate { font-weight: bold; } #bookingcalendar { font-size: 13px; } #bookingcalendar a { } #bookingcalendar .the-icons { font-size: 13px; } .nofloat { float: none !important; width: 100% !important; margin: auto; text-align: center !important; } .nofloat div { text-align: center !important; } .nofloatlefttext { float: none !important; width: 100% !important; margin: auto; text-align: left !important; } .nofloatlefttext div { text-align: left !important; } @media (max-width: 1024px) { .hidesmall1024 { display: none !important; } } @media (max-width: 800px) { .hidesmall { display: none; } .showsmall { display: block; } .nofloatsmall { float: none !important; width: 100% !important; margin: auto;} .nofloatsmall div { } .nofloatsmallleft { float: none !important; width: 100% !important; margin: auto; text-align: left !important; } .nofloatsmallleft div { text-align: left !important; } #checkoutside .inner { margin-right: 0px; padding-right: 0px; } #photoprods, #photocrop, #photopackagecontainer { width: 90%; left: 50%; margin-left: -45%; } } @media (max-width: 800px) { #topMainMenuContainer { display: none; } #mobilemenubutton { display: block; } #mobilemenu { display: block; } #headerContainer { width: 100%; } } /* ######### Wall Designer ########### */ #sizemenu { } #wallprice { font-size: 40px; font-weight: bold; } .wallpricecontainer { margin-top: -20px; } #sizemenu .menu { position:relative; display: block;} #sizemenu .menu ul { margin: 0px; padding: 0px; list-style: none; } #sizemenu .menu ul li { margin: 0px; } #sizemenu .menu ul li a { display:block; margin: 0px 0px 0px 0px; background: #12100E; border-bottom: solid 1px #2A251E; padding: 16px; color: #E8E0D0; } #sizemenu .menu ul li a .the-icons { color: #E8E0D0; text-shadow: none; } .inlineli ul { margin: 0px; padding: 0px; list-style: none; } .inlineli ul li { display: inline; margin-right: 8px; } .inlineli ul li a { white-space:nowrap; } .inlineli .the-icons { font-size: 15px; } #roomviewer { display: none; } #roomcontain { position: relative; margin: auto; } #roombackground { margin: auto; position: absolute; top: 0; } .adjustphoto { display: none; z-index: 10000;} .adjustphoto .roomphotomoveup { position: absolute; top: 20px; width: 100%; text-align: center; transform: rotate(180deg);-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);} .adjustphoto .roomphotomovedown {position: absolute; bottom: 20px; width: 100%; text-align: center; } .adjustphoto .roomphotomoveleft { position: absolute; top: 40%;left: 2px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform:rotate(90deg); } .adjustphoto .roomphotomoveright { position: absolute; top: 40%; right: 2px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform:rotate(-90deg);} .adjustphoto .the-icons { color: #FFFFFF; text-shadow: 1px 1px 0px #000000; opacity: 1; } .borderframe { border: 10px solid #ffffff; } .roomphotocontainer { background: #242424; margin: auto; position : absolute; z-index: 2; background-position:50% 50%; background-repeat:no-repeat; -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; background-size:cover; display: none; } .canvasshadow { box-shadow: 0px 0px 6px rgba(55,55,55,.6), -3px 3px 0px rgba(55,55,55,.6), 0px 3px 0px rgba(55,55,55,.6),-3px 0px 0px rgba(55,55,55,.6); } .frameshadow { box-shadow: 0px 0px 6px rgba(55,55,55,.6); } .photoshadow { box-shadow: inset 0px 0px 4px rgba(0,0,0,.5); } .matshadow { box-shadow: inset 0px 0px 6px rgba(0,0,0,.7); } .roomphotomatte { background: #f4f4f4; } .collageshadow { box-shadow: 0px 0px 2px rgba(55,55,55,.6); } .roomphoto { background-position:50% 50%; background-repeat:no-repeat; -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; background-size:cover ; position: relative; opacity: .95; } .roomphotoinsert { background-position:50% 50%; background-repeat:no-repeat; -moz-background-size:cover; -o-background-size:cover; -webkit-background-size:cover; background-size:cover; position: absolute; display: none; box-shadow: inset 0px 0px 4px rgba(0,0,0,.5); } .roomphotoinfo { position: absolute; bottom: 2px; margin: auto; text-align: center; width: 100%; left: 0; background: rgba(0,0,0,.7); color: #FFFFFF; display: none; } .roomphotoinfoinner { padding: 2px; } .rotateinsert { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .rotatecanvas { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .selectedroomphoto { outline:4px solid rgba(255,255,0,.8); outline-offset: 3px; } .selectedprintsize { font-weight: bold; text-decoration: underline; } .selectedmatcolor { outline:4px solid rgba(255,255,0,.8); } .selectedframecolor { outline:4px solid rgba(255,255,0,.8); } .framecolorselections, .matcolorselections { cursor: pointer;border: solid 1px #CFCFCF; } #roompreviewcontain, .roompreviewcontain { position: relative; margin: auto; } .roompreviewbackground { margin: auto; position: absolute; top: 0; } .move { cursor: move; } @media (max-width: 500px) { #wallprice { font-size: 20px; font-weight: bold; } .wallpricecontainer { margin-top: 0px; } .canvasshadow { box-shadow: 0px 0px 4px rgba(55,55,55,.5), -2px 2px 0px rgba(55,55,55,.6), 0px 2px 0px rgba(55,55,55,.6),-2px 0px 0px rgba(55,55,55,.6); } } #roomphotoloading, #roomuploadbackground { display: none; z-index: 200; position: fixed; width: 100%; height: 100%; left: 0; top: 0; text-align: center; background: rgba(0,0,0,.6); padding-top: 20%; } .roomviewmenus { position: fixed; bottom: 0; left: 0; width: 100%; background: #12100E; z-index: 10000; text-align: center; box-shadow: -6px 0px 6px rgba(0,0,0,.5); border-top: solid 1px #2A251E; } .speech-bubble { background-color: #12100E; border: 1px solid #2A251E; border-radius: 5px; width: 100%; max-width: 360px; padding: 16px; position: fixed; bottom: 150px; display: none; z-index: 500; box-sizing:border-box; } .speech-bubble .arrow { border-style: solid; position: absolute; } .bottom { border-color: #2A251E transparent transparent transparent; border-width: 8px 16px 0px 8px; bottom: -8px; } #sidethumbsbg { position: fixed; width: 100%; height: 100%; left; 0; top: 0; background: rgba(0,0,0,.5); z-index: 5000; display: none; } #sidethumbs { position: absolute; right: 0; z-index: 5001; display: none; width: 100%; max-width: 480px; } #sidethumbsclose { max-width: 480px; height: 40px; width: 100%; right: 0; top: 0; background: #12100E; text-align: center; z-index: 5002; cursor: pointer; } #sidethumbsinner { background: #12100E; box-shadow: -12px -22px 12px rgba(0,0,0,.5); text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; padding: 12px; min-height: 1200px; } /* ####### End Wall Designer ######## */ .burnsin { animation:move 8s ease 1; /* Change this to alternate to stop the loop. Replace 1 with infinite or number of times*/ -ms-animation:move 8s ease 1; -webkit-animation:move 8s ease 1; -0-animation:move 8s ease 1; -moz-animation:move 8s ease 1; position: absolute; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes move { from { transform: scale(1); -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari and Chrome */ -o-transform: scale(1); /* Opera */ -moz-transform: scale(1); /* Firefox */ } to { transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari and Chrome */ -o-transform: scale(1.1); /* Opera */ -moz-transform: scale(1.1); /* Firefox */ } } .bursnoutstart { transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari and Chrome */ -o-transform: scale(1.1); /* Opera */ -moz-transform: scale(1.1); /* Firefox */ } .burnsout { animation:moveout 8s ease 1; /* Change this to alternate to stop the loop. Replace 1 with infinite or number of times*/ -ms-animation:moveout 8s ease 1; -webkit-animation:moveout 8s ease 1; -0-animation:moveout 8s ease 1; -moz-animation:moveout 8s ease 1; position: absolute; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes moveout { from { transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari and Chrome */ -o-transform: scale(1.1); /* Opera */ -moz-transform: scale(1.1); /* Firefox */ } to { transform: scale(1.0); -ms-transform: scale(1.0); /* IE 9 */ -webkit-transform: scale(1.0); /* Safari and Chrome */ -o-transform: scale(1.0); /* Opera */ -moz-transform: scale(1.0); /* Firefox */ } } .requiredgroupmessage { font-style: italic; opacity: .8; padding: 4px 0px; } #presellproducts { max-width: 1024px; margin-left: auto; margin-right: auto; margin-bottom: 24px; } .presellgroup { margin-bottom: 24px; } .presell .inner { padding: 16px; box-sizing: border-box; } .presellname { width: 50%; float: left; } .presellcart { width: 50%; float: left; text-align: right; } .presellgroup h3, .presellgroup .h3 { font-size: 17px; font-weight: bold; } .presellcart .inner { } .presellselectoptionsmessage { margin: 16px 0px; text-align: center; } .presellproductrow { border-bottom: 2px solid #BD8A40; padding: 16px; color: #D8CFBE; background: #1A1611; margin-bottom: 16px; } .presellpricecontainer {white-space: nowrap; } .presellgrouptitle { margin: 16px 0px; } .presellproductrow:hover { background: #1A1611; color: #D8CFBE; } .addtocart .the-icons, .preregaddtocart .the-icons { text-shadow: none; color: #000000; opacity: 1; } .addtocart { white-space: nowrap; } .presellspacing { margin-right: 16px; } .presellgraphiccontainer { margin: 0 24px 16px 0; float: left; max-width: 160px; width: 100%; height: auto; display: inline; } .presell .inner p, .presellgroupdescr { margin: 8px 0px; } .presellgraphic { max-width: 160px; width: 100%; height: auto; } .preselloptionscontainer { max-width: 400px; width: 100%; margin: auto; } .presellextraphotos { margin-bottom: 24px; } .presellgroupdescr { padding: 4px 0px; } @media (max-width: 1000px) { .presellname { width: 50%; float: left; } .presellcart { width: 50%; float: left; text-align: right;} .presellproductrow { padding: 6px; } .presell .inner { padding: 6px; } .presellspacing { margin-right: 4px; } .presellpricecontainer {white-space: wrap; } } @media (max-width: 1000px) { .presellname { width: 100%; float: none; } .presellcart { width: 100%; float: none; text-align: left;} .presellgraphic { max-width: 120px; width: 100%; height: auto; } .presellgraphiccontainer { margin: 0 24px 16px 0; float: left; max-width: 120px; width: 100%; height: auto; display: inline; } } /* ############# CUSTOMER UPLOAD CLASSES ################### */ #purchasephotoscontainer { max-width: 800px; margin: auto; } #presellproducts { max-width: 1024px; margin-left: auto; margin-right: auto; margin-bottom: 24px; } .customerphotosgroup { margin-bottom: 24px; } .customerphotos .inner { padding: 16px; box-sizing: border-box; } .customerphotosname { width: 65%; float: left; } .customerphotoscart { width: 35%; float: left; text-align: right;} .customerphotoscart .inner { } .customerphotosselectoptionsmessage { margin: 16px 0px; text-align: center; } .customerphotosproductrow { border-bottom: 2px solid #BD8A40; padding: 2px; color: #D8CFBE; background: #1A1611; } .customerphotosproductrow:hover { background: #1A1611; color: #D8CFBE; } .addtocart .the-icons { text-shadow: none; color: #000000; opacity: 1; } .addtocart { white-space: nowrap; } .customerphotosspacing { margin-right: 16px; } .customerphotosgraphiccontainer { margin: 0 24px 16px 0; float: left; max-width: 160px; width: 100%; height: auto; display: inline; } .customerphotosgraphic { max-width: 160px; width: 100%; height: auto; } .customerphotosoptionscontainer { max-width: 400px; width: 100%; margin: auto; } .customerphotosextraphotos { margin-bottom: 24px; } .customerphotosgroupdescr { padding: 4px 0px; } @media (max-width: 1100px) { .customerphotosname { width: 60%; float: left; } .customerphotoscart { width: 40%; float: left; text-align: right;} } @media (max-width: 800px) { .customerphotosgraphic { max-width: 120px; width: 100%; height: auto; } .customerphotosgraphiccontainer { margin: 0 24px 16px 0; float: left; max-width: 120px; width: 100%; height: auto; display: inline; } } .customerproductqty .the-icons {padding: 2px; box-sizing: border-box; color: #000000; text-shadow: none; } .customerproductqty span { margin-right: 4px; } .customerproductprice { font-weight: bold; } .customerphotopriceeach { opacity: .6; } .customerproductname { font-weight: bold; margin-bottom: 8px; font-size: 21px; color: #F2EADB } .customeraddtocartqty { box-shadow: 0 1px 2px rgba(0,0,0,0); transition: box-shadow 0.2s ease-in-out; opacity: .5; padding: 2px; width: 24px; } .animateqtychange { box-shadow: 0 0px 8px rgba(0,0,0,0.5); } .boldqty { font-weight: bold; opacity: 1; } .customerproductdescr { padding: 0px 16px; } #loadingbar { position: fixed; top: 0; left: 0; z-index: 1000;} .load-bar { position: relative; width: 100%; height: 6px; background-color: #fdba2c; } .bar { content: ""; display: inline; position: absolute; width: 0; height: 100%; left: 50%; text-align: center; } .bar:nth-child(1) { background-color: #da4733; animation: loading 3s linear infinite; } .bar:nth-child(2) { background-color: #3b78e7; animation: loading 3s linear 1s infinite; } .bar:nth-child(3) { background-color: #fdba2c; animation: loading 3s linear 2s infinite; } @keyframes loading { from {left: 50%; width: 0;z-index:100;} 33.3333% {left: 0; width: 100%;z-index: 10;} to {left: 0; width: 100%;} } #selectgsbackground { background: #000000; color: #FFFFFF; text-align: center; position: fixed; width: 300px; left: 50%; margin-left: -150px; bottom: 0; max-height: 460px; z-index: 1001 !important; cursor: pointer; box-shadow: 0px -8px 8px rgba(0,0,0,.2); border-top-left-radius: 4px; border-top-right-radius: 4px; } @media (max-width: 800px) { #selectgsbackground { right: 0; left: auto; margin-left: auto; width: auto; } } #gsinfo { position: fixed; width: 320px; left: 50%;margin-left: -160px; bottom: 60px; background: #DFDFDF; border: solid 1px #DFDFDF; text-align: center; color: #000000; z-index: 1001; box-shadow: 0 0 8px rgba(0,0,0,.4); } #gsinfobg { width:100%; height:100%;min-height: 100%; background-color: #000000; opacity:.7; overflow: hidden; display: block; position: fixed;top: 0;left: 0; z-index: 200; } .gsphotocontainer { position: relative; width: 49.6%; float: left; box-sizing: border-box; padding: 2px; } .gsphotoname { position: absolute; bottom: 0; left; 0; width: 100%; box-sizing: border-box; padding: 8px; text-align: center; font-size: 13px; color: #FFFFFF; text-shadow: 1px 1px 1px #000000; } .gsphotoname a, .gsphotoname a:visited { color: #FFFFFF; } .graphicoptioncheckout { max-height: 60px; width: auto; } .jumptothumbnailpage { text-align: center; margin: 8px auto 8px auto; } #blurinfo { position: fixed; width: 320px; left: 50%;margin-left: -160px; bottom: 60px; background: #DFDFDF; border: solid 1px #DFDFDF; text-align: center; color: #000000; z-index: 1001; box-shadow: 0 0 8px rgba(0,0,0,.4); } #blurinfobg { width:100%; height:100%;min-height: 100%; background-color: #000000; opacity:.7; overflow: hidden; display: block; position: fixed;top: 0;left: 0; z-index: 200; } .gsphotocontainer { position: relative; width: 49.6%; float: left; box-sizing: border-box; padding: 2px; } /* ######### Pre-Register Pre-Order ############## */ .preregfieldname { font-weight: 600; } .preregfielddescr { opacity: .8; } .preorderpagetitle { text-align: center; padding: 8px; margin: 4px auto 16px auto; max-width: 800px; width: 100%; } .preregistermaincontainer { max-width: 640px; width: 100%; margin: 16px auto; } .preregisterpreordermessage, .preregreviewmessage { padding: 4px; margin: 12px auto 12px auto; } .preregisterdonemessage { padding: 4px; margin: 24px auto 64px auto; } .preregaddtocart { border-radius: 8px; box-sizing: border-box; padding: 6px 16px; min-width: 160px; text-align: center; display: inline-block; margin: 0px 4px 6px 4px; } .preregreview { margin: 12px 0px; } .preregreview .label { opacity: .6; font-size: 90%; margin-bottom: 6px; } .preregreview .result { padding-left: 12px; } .preregmaxwidth { max-width: 800px; margin: auto; width: 100%; } .preregreviewcontainer { display: flex; flex-wrap: wrap; } .preregreviewcontainer > div { flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */ padding: 0px 8px; box-sizing: border-box; margin-bottom: 10px; } .preregreviewcontainer .address { width: 100%; } .preregcart { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .preregcart > div { flex: 50%; padding: 4px 8px; box-sizing: border-box; margin-bottom: 4px; } .preregcartqtydiv, .preregcartoptions { margin: 2px 0px; opacity: .5; font-size: 95%; } @media (max-width: 400px) { .preregreviewcontainer > div { flex: 100%; /* or - flex: 0 50% - or - flex-basis: 50% - */ } } @media (max-width: 800px) { .preregaddtocart { min-width: 150px; padding: 4px 6px; } } @media (max-width: 600px) { .preregaddtocart { min-width: 140px; font-size: 95%; } .preregaddtocart .the-icons{ font-size: 95%; } } @media (max-width: 500px) { .preregaddtocart { min-width: 130px; font-size: 90%; } .preregaddtocart .the-icons{ font-size: 90%; } } @media (max-width: 400px) { .preregaddtocart { min-width: 120px; font-size: 85%; } .preregaddtocart .the-icons{ font-size: 85%; } } .mainpreregcontainer { position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 1300; } .preregcontainer { padding: 0px 12px 2px 12px; box-sizing: border-box; color: #BD8A40; background: #E38862; box-shadow: 0px 0px 12px rgba(0,0,0,.5); } .preregname { padding: 12px 8px 4px 5px; color: #BD8A40; margin-bottom: 2px; } .preregname .the-icons { color: #BD8A40; } .preregnamename { font-weight: bold; } .deletepreregicon { background: rgba(255,255,255,.7); box-sizing: border-box; padding: 0px; color: #FF0000; border-radius: 2px; z-index: 3; } .deletepreregicon:hover { background: rgba(255,255,255,1); box-shadow: 0px 0px 4px rgba(0,0,0.7); } .deletepreregicon .the-icons { color: #FF0000; font-size: 16px; margin: 0; padding: 0; line-height: 16px; } /* ######### MANAGE PACKAGES ############## */ #mainpackagecontainer { position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 300; } @media (max-width: 1150px) { #packagecontainer { overflow-x: scroll; } } #packagecontainer { padding: 0px 12px 8px 12px; box-sizing: border-box; color: #BD8A40; white-space:nowrap; overflow-x: auto; background: #E38862; box-shadow: 0px 0px 12px rgba(0,0,0,.5); } .availableproduct { width: 80px; height: 80px; display: inline-block; background: #E38862; color: #000000; text-align: center; border: solid 1px #000000; margin: 2px 8px; position: relative; cursor: pointer; background-image: url('/sy-inc/icons/plus-sign-package-graphic-2.png'); background-size:80px; background-position: center center; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax for modern browsers */ } .packageextraphotos { width: 160px; height: 80px; display: inline-block; background: #E38862; color: #BD8A40; text-align: center; border: solid 1px #BD8A40; margin: 2px 8px; position: relative; cursor: pointer; background-size:80px; background-position: center center; } .packageextraphotostext { width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,.5); color: #FFFFFF; font-size: 12px; display: flex; position: absolute; bottom: 0; left: 0; overflow: clip; padding: 4px; box-sizing: border-box; white-space: wrap; align-items: center; } .packageitemname { width: 100%; text-align: center; background: rgba(0,0,0,.5); color: #FFFFFF; font-size: 12px; display: inline-block; position: absolute; bottom: 0; left: 0; overflow: hidden; padding: 4px 2px; box-sizing: border-box; white-space: wrap; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax for modern browsers */ } .deletepackageitemicon { position: absolute; left: -4px; top: -4px; background: rgba(255,255,255,.7); box-sizing: border-box; padding: 0px; color: #FF0000; border-radius: 2px; z-index: 3; } .deletepackageitemicon:hover { background: rgba(255,255,255,1); box-shadow: 0px 0px 4px rgba(0,0,0.7); } .deletepackageitemicon .the-icons { color: #FF0000; font-size: 16px; margin: 0; padding: 0; line-height: 16px; } .addtopackageinfo { text-align: center; color: #BD8A40; padding: 4px; box-sizing: border-box; } .packageselectpackagename { padding: 12px 8px 8px 5px; color: #BD8A40; border-bottom: solid 1px #BD8A40; margin-bottom: 8px; } .packageselectpackagename .the-icons { color: #BD8A40; } .packageselectpackagenamename { font-weight: bold; } .deletepackageicon { background: rgba(255,255,255,.7); box-sizing: border-box; padding: 0px; color: #FF0000; border-radius: 2px; z-index: 3; } .deletepackageicon:hover { background: rgba(255,255,255,1); box-shadow: 0px 0px 4px rgba(0,0,0.7); } .deletepackageicon .the-icons { color: #FF0000; font-size: 16px; margin: 0; padding: 0; line-height: 16px; } .packageselectcontainer { display: inline-block; margin-right: 48px; } #packageitemwindowbg {width:100%; height:100%; min-height: 100%; background-color: #000000; opacity:0.70; overflow: hidden; display: none; position: fixed; top: 0; left: 0; display: none; z-index: 1002; } #packageitemwindow { display: none; position: absolute; left: 50%; max-width: 600px; width: 96%; left: 50%; transform: translateX(-50%); background: #12100E; z-index:1003; box-shadow: 0px 0px 12px rgba(0,0,0,.8); } #packageitemwindow .inner { padding: 24px; } #packageactionmessages, #regactionmessages { background: #5bbc62; border-radius: 12px; position: fixed; left: 50%; max-width: 600px; width: 96%; left: 50%; transform: translateX(-50%); bottom:180px; z-index: 200; padding: 16px; box-sizing: border-box; color: #FFFFFF; display: none; } #packageactionerrormessage { background: #d22c1a; border-radius: 12px; position: fixed; left: 50%; max-width: 600px; width: 96%; left: 50%; transform: translateX(-50%); bottom:180px; z-index: 200; padding: 16px; box-sizing: border-box; color: #FFFFFF; display: none; } #packageactionerrormessagemessage { text-align: center; } #packagemessagebg { width:100%; height:100%; min-height: 100%; background-color: #000000; opacity:0.70; overflow: hidden; display: none; position: fixed; top: 0; left: 0; display: none; z-index: 199; } .managepackagescrollright { position: absolute; right: 4px; background: rgba(255,255,255,.8); color: #000000; top: 46%; padding: 2px; z-index: 601; border-radius: 50%; display: none; } .managepackagescrollright .the-icons { color: #000000; font-size: 16px; } .managepackagescrollleft { position: absolute; left: 4px; background: rgba(255,255,255,.8); color: #000000; top: 46%; padding: 2px; z-index: 601; border-radius: 50%; display: none; } .managepackagescrollleft .the-icons { color: #000000; font-size: 16px; } .managepackagetab { color: #BD8A40; background: #E38862; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-left: 4px; display: inline; box-sizing: border-box; padding: 4px 12px 8px 12px; z-index:1; position: relative; box-shadow: 0px -8px 8px rgba(0,0,0,.2); } .managepackagetab a { color: #BD8A40; } .managepackagetab .the-icons { color: #BD8A40; } .managepackagequantity { position: absolute; right: -4px; top: -4px; box-sizing: border-box; padding: 0px; border-radius: 2px; z-index: 3; } .managePackageQuantityCircle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; padding: 12px; font-size: 12px; line-height: 1em; background: #555555; opacity: .9; position: relative; display: inline-block; } .managePackageQuantityCircle .height_fix { margin-top: 100%; } .managePackageQuantityCircle .content { position: absolute; left: 0; top: 50%; height: 100%; width: 100%; text-align: center; margin-top: -7px; /* Note, this must be half the font size */ color: #CCCCCC; } .order_fee_details { font-size: 13px; opacity: .6; } .preregisterprice { margin-top: 16px; margin-bottom: 16px; } .gallerytermsconitions { margin: auto; max-width: 640px; line-height: 200%; } .gallery_agree_button { width: 100%; max-width: 340px; } #addtocart, .addproducttocart , .checkout, .addtocart, .gallerybuttonson, .gallerybuttons, .gallerybuttonson, .checkoutcart, .submit , .backtoproductlist, .backtoproducts a, .disabledinput, .btn , #orderitems .icon-download { border-radius: 4px; padding: 8px; transition: background-color .3s; } #addtocart: hover, .addproducttocart:hover , .checkout:hover, .addtocart:hover, .gallerybuttonson:hover, .gallerybuttons:hover, .gallerybuttonson:hover, .checkoutcart:hover, .submit:hover, .backtoproductlist: hover, .backtoproducts a: hover, .disabledinput: hover, .btn: hover { border-radius: 4px; padding: 8px;} #package-photo-qty, .addtocartqty { border-radius: 4px; } #createaccountbutton, #loginsubmitpage { width: 100%; } /* ####### Additional CSS ######## */ /* ============================================================ TRACI DAVENPORT PHOTOGRAPHY — Complete Additional CSS Paste this as the ENTIRE contents of the Additional CSS box (select all, delete, paste this, save). Updated Sep 23, 2026 ============================================================ */ /* ---- 1. Footer transparent (theme has no setting for this) ---- */ #footer { background: none !important; } /* ---- 3. Immersive look on Client Galleries + Equine Events (desktop) ---- Makes the menu bar transparent so the photo shows through, and shadows the menu text so it stays readable. The masthead stays on every page. */ @media (min-width: 769px) { /* CLIENT GALLERIES (category-101) */ body:has(.category-101) #headerAndMenu, body:has(.category-101) #headerAndMenuInner, body:has(.category-101) #headerContainer, body:has(.category-101) #header, body:has(.category-101) #menucontainerouter, body:has(.category-101) #topMainMenuContainer, body:has(.category-101) #topMainMenu { background: transparent !important; } body:has(.category-101) #topMainMenu a { text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.7); } /* EQUINE EVENTS (category-100) — uses the site's reining background */ body:has(.category-100) #headerAndMenu, body:has(.category-100) #headerAndMenuInner, body:has(.category-100) #headerContainer, body:has(.category-100) #header, body:has(.category-100) #menucontainerouter, body:has(.category-100) #topMainMenuContainer, body:has(.category-100) #topMainMenu { background: transparent !important; } body:has(.category-100) #topMainMenu a { text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.7); } } /* Masthead sits above Sytist's category background photo */ .tdph { position: relative; z-index: 5; } /* ---- 4. Phones: hide background photos (keeps dark + dust, no zoom-crop) ---- */ @media (max-width: 768px) { html { background-image: none !important; background-color: #12100E !important; } body { background-image: none !important; } #page-wrapper, #page-wrapper-inner { background-image: none !important; } .category-101::before { background-image: none !important; } } /* ---- 5. Hide gallery welcome/info box inside albums ---- Fires only on pages that show photos (#thumbsloading) and are NOT a gallery main page (#endsubgalleries). Some galleries have loose photos on the main page alongside the albums — that second test keeps the box visible there. Never touches .gallerybuttonsmenu: Download All / Buy All lives inside .text. */ body:has(#thumbsloading):not(:has(#endsubgalleries)) #clientGalleries .text > div:not(.gallerybuttonsmenu):not(#contentcontainer):not([style*="3px solid #FFC72C"]) { display: none !important; } /* ---- 6. Album pages: heart-your-favorites banner ---- Edit the wording inside the quotes; leave the rest alone. */ body:has(#thumbsloading):not(:has(#endsubgalleries)) #clientGalleries .photos::before { content: "❤️ Heart your favorites as you browse — best pricing when you buy them together!"; display: block; margin: 0 auto 16px; padding: 12px 18px; max-width: 660px; background: linear-gradient(90deg, #163F86 0%, #1D5E9E 50%, #11857A 100%); border: 2px solid #FFC72C; border-radius: 10px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,0.55); font-size: 16px; font-weight: 600; line-height: 1.45; text-align: center; box-shadow: 0 3px 12px rgba(0,0,0,0.45); } /* ---- 7. TD EVENT CARD ---- Styles the custom layout (Design → Layouts → TD Event Card). Photo sizing is Sytist's (Theme → Photo Ratio + Fill container). Theme Background Opacity stays 0.00 — the mat is painted here, inside the rounded card, so the corners stay round. Other colourways — swap the one background line marked below: Banner linear-gradient(135deg, #2A0660 0%, #0F2463 55%, #063D3D 100%) Wine linear-gradient(135deg, #4A0F2A 0%, #2A0660 100%) Arena dusk linear-gradient(135deg, #3B0A38 0%, #7A2418 100%) */ /* gutter between cards */ .td-card { padding: 8px !important; } /* the card — flex column so every name band bottoms out level */ .td-card .colpad { background: transparent !important; border-radius: 10px; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; height: 100%; transition: transform .18s ease, box-shadow .18s ease; } .td-card:hover .colpad { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.5); } /* ember matting behind the photo — never lets the photo be squeezed */ .td-card__photo { background: #2B0C05; flex: 1 0 auto; } /* Sytist centres each photo with an inline margin-top; pin it to the top */ .td-card__photo img { margin-top: 0 !important; vertical-align: top !important; } /* hover call-to-action over the photo */ .td-card__cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 12px 10px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #FFD23F; text-align: center; background: linear-gradient(180deg, rgba(18,16,14,0) 0%, rgba(18,16,14,.86) 100%); opacity: 0; transition: opacity .2s ease; pointer-events: none; } .td-card:hover .td-card__cta { opacity: 1; } /* the name band — SWAP THIS BACKGROUND LINE to change colourway. margin-top:auto holds it flush to the bottom of every card. */ .td-card__band { background: linear-gradient(135deg, #4A1208 0%, #8A3A10 100%); padding: 10px 13px 12px; overflow: hidden; margin-top: auto; } .td-card__title { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 18px; line-height: 1.14; } .td-card__title a { color: #FFFFFF !important; text-decoration: none; } .td-card:hover .td-card__title a { color: #FFD23F !important; } /* event name, line 1. min-height holds two lines, so one-line and two-line names make the same band height and the row lines up. */ .td-card__name { display: block; min-height: 2.28em; } /* date (and city, if the title has one), line 2 */ .td-card__date { display: block; margin-top: 4px; font-family: 'Jost', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); } .td-card:hover .td-card__date { color: rgba(255,210,63,.85); } /* status line — off by default so empty preview text can never stretch the card. Delete this one rule if you start using preview text. */ .td-card__meta { display: none !important; } /* ---- 8. MAIN MENU ---- */ #topMainMenuContainer{ background: linear-gradient(135deg, #2A0C05 0%, #4A1208 42%, #1C1813 100%) !important; border-top: 1px solid rgba(224,180,112,.35) !important; border-bottom: 1px solid rgba(224,180,112,.35) !important; padding: 0 !important; } #topMainMenu{ text-align:center !important; } #topMainMenu > ul > li{ position:relative !important; display:inline-block !important; } #topMainMenuContainer #topMainMenu > ul > li > a{ display:inline-block !important; position:relative !important; font-size:12.5px !important; font-weight:500 !important; letter-spacing:.16em !important; color:#EFE7D8 !important; padding:15px !important; transition:color .2s ease !important; } #topMainMenuContainer #topMainMenu > ul > li > a:hover{ color:#FFD23F !important; } #topMainMenu > ul > li > a::after{ content:""; position:absolute; left:15px; right:15px; bottom:9px; height:2px; border-radius:2px; background:linear-gradient(90deg,#8A3A10 0%,#BD8A40 55%,#FFD23F 100%); transform:scaleX(0); transform-origin:center; transition:transform .22s ease; } #topMainMenu > ul > li > a:hover::after{ transform:scaleX(1); } #topMainMenu > ul > li > ul{ top:100% !important; left:0 !important; min-width:220px !important; padding:6px 0 !important; background:linear-gradient(180deg,#2A0C05 0%,#1C1813 100%) !important; border:1px solid rgba(224,180,112,.35) !important; border-top:none !important; border-radius:0 0 8px 8px !important; box-shadow:0 12px 26px rgba(0,0,0,.55) !important; } #topMainMenu ul ul li{ display:block !important; } #topMainMenu ul ul a{ display:block !important; padding:9px 18px !important; font-size:12px !important; font-weight:500 !important; letter-spacing:.12em !important; color:#EFE7D8 !important; transition:background .15s ease, color .15s ease !important; } #topMainMenu ul ul a:hover{ background:rgba(189,138,64,.20) !important; color:#FFD23F !important; } /* current section stays lit, however deep you go */ body:has(#pageContentContainer.content-1047) #topMainMenu > ul > li > a[href="/"], body:has(#pageContentContainer.content-1603) #topMainMenu > ul > li > a[href="/request_event_photography/"], body:has(#pageContentContainer.content-1651) #topMainMenu > ul > li > a[href="/my_work/"], body:has(#pageContentContainer.content-1450) #topMainMenu > ul > li > a[href="/about_me/"], body:has(#pageContentContainer.category-100) #topMainMenu > ul > li > a[href="/events/"], body:has(#pageContentContainer .title a[href="/events/"]) #topMainMenu > ul > li > a[href="/events/"], body:has(#pageContentContainer .categories a[href="/events/"]) #topMainMenu > ul > li > a[href="/events/"], body:has(#pageContentContainer.category-101) #topMainMenu > ul > li > a[href="/portraits/"], body:has(#pageContentContainer .title a[href="/portraits/"]) #topMainMenu > ul > li > a[href="/portraits/"], body:has(#pageContentContainer .categories a[href="/portraits/"]) #topMainMenu > ul > li > a[href="/portraits/"]{ color:#FFD23F !important; } body:has(#pageContentContainer.content-1047) #topMainMenu > ul > li > a[href="/"]::after, body:has(#pageContentContainer.content-1603) #topMainMenu > ul > li > a[href="/request_event_photography/"]::after, body:has(#pageContentContainer.content-1651) #topMainMenu > ul > li > a[href="/my_work/"]::after, body:has(#pageContentContainer.content-1450) #topMainMenu > ul > li > a[href="/about_me/"]::after, body:has(#pageContentContainer.category-100) #topMainMenu > ul > li > a[href="/events/"]::after, body:has(#pageContentContainer .title a[href="/events/"]) #topMainMenu > ul > li > a[href="/events/"]::after, body:has(#pageContentContainer .categories a[href="/events/"]) #topMainMenu > ul > li > a[href="/events/"]::after, body:has(#pageContentContainer.category-101) #topMainMenu > ul > li > a[href="/portraits/"]::after, body:has(#pageContentContainer .title a[href="/portraits/"]) #topMainMenu > ul > li > a[href="/portraits/"]::after, body:has(#pageContentContainer .categories a[href="/portraits/"]) #topMainMenu > ul > li > a[href="/portraits/"]::after{ transform:scaleX(1) !important; } /* ---- 9. FOOTER EDGE TO EDGE ---- */ #footer{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; } #footerinner{ max-width:100% !important; } .tdf{ background: linear-gradient(180deg, rgba(189,138,64,.09) 0%, rgba(189,138,64,0) 55%, rgba(0,0,0,.25) 100%) !important; } /* ---- 10. SEARCH BOX FIRST ---- Makes the finder the loudest thing in the hero: bigger EVENT / RIDER labels everywhere, the headline followed by one instruction instead of a sales line, and on phones the repeated masthead copy comes out. */ /* bigger labels — phone AND desktop */ .tdhero__row label{ font-size:12px !important; letter-spacing:.1em !important; color:#4A423A !important; } /* the instruction line under the headline */ .tdhero__sub{ font-style:normal !important; font-size:clamp(17px,2.4vw,24px) !important; color:#E0B470 !important; margin-bottom:20px !important; white-space:normal !important; } .tdhero__bip{ font-size:12.5px !important; margin-top:12px !important; } @media (max-width:620px){ /* the masthead already says the disciplines 100px higher up */ .tdhero__eyebrow, .tdhero__place { display:none !important; } .tdhero{ padding:18px 14px 16px !important; margin-bottom:18px !important; } .tdhero__head{ font-size:26px !important; margin-bottom:.35em !important; } .tdhero__sub{ font-size:17px !important; margin-bottom:16px !important; } .tdhero__note{ font-size:14.5px !important; margin-top:12px !important; } /* wide tracking on tiny caps was the thing that was hard to read */ .td-card__date{ font-size:11px !important; letter-spacing:.06em !important; } } /* ============================================================ 11. NAVY + GOLD REPALETTE Colour only - no layout. Delete any line to get the old colour back. Contestant side = navy + gold. Producer side = deep green, no yellow. ============================================================ */ /* ---- 11a. HERO ---- */ .tdhero{ background: radial-gradient(120% 100% at 72% 12%, rgba(40,110,170,.30), transparent 62%), linear-gradient(170deg,#0A2440 0%, #05182F 68%) !important; border-color: rgba(255,210,63,.40) !important; } .tdhero__eyebrow{ color:#FFD23F !important; } .tdhero__place{ color:rgba(255,255,255,.60) !important; } .tdhero__head{ color:#FFFFFF !important; } .tdhero__sub{ color:#FFD23F !important; } .tdhero__sub em{ color:#FFFFFF !important; font-style:italic !important; } .tdhero__note{ color:rgba(255,255,255,.82) !important; } .tdhero__bip{ color:rgba(255,255,255,.74) !important; } .tdhero__bip a{ color:#FFD23F !important; border-bottom-color:rgba(255,210,63,.50) !important; } .tdhero__bip strong{ color:#7FD8C8 !important; } .tdhero__go{ background:#FFD23F !important; color:#05182F !important; } .tdhero__go:hover{ background:#FFFFFF !important; color:#05182F !important; } .tdhero__finder select:focus, .tdhero__finder input:focus{ outline-color:#2E7FC2 !important; } /* ---- 11b. SEE-ALL BUTTONS ---- */ body a.tdmore__btn{ background:#FFD23F !important; color:#05182F !important; } body a.tdmore__btn:hover{ background:#FFFFFF !important; color:#05182F !important; } body a.tdmore__alt{ color:rgba(255,255,255,.70) !important; border-bottom-color:rgba(255,255,255,.34) !important; } body a.tdmore__alt:hover{ color:#FFD23F !important; border-bottom-color:#FFD23F !important; } /* ---- 11c. MAIN MENU: blue ombre ---- */ #topMainMenuContainer{ background: linear-gradient(135deg, #05182F 0%, #0F3B66 45%, #0A2440 100%) !important; border-top: 1px solid rgba(255,210,63,.35) !important; border-bottom: 1px solid rgba(255,210,63,.35) !important; } #topMainMenuContainer #topMainMenu > ul > li > a{ color:#EAF2FB !important; } #topMainMenuContainer #topMainMenu > ul > li > a:hover{ color:#FFD23F !important; } #topMainMenu > ul > li > a::after{ background:linear-gradient(90deg,#2E7FC2 0%,#6FB3E8 52%,#FFD23F 100%) !important; } #topMainMenu > ul > li > ul{ background:linear-gradient(180deg,#0A2440 0%,#05182F 100%) !important; border-color:rgba(255,210,63,.35) !important; } #topMainMenu ul ul a{ color:#EAF2FB !important; } #topMainMenu ul ul a:hover{ background:rgba(47,127,194,.28) !important; color:#FFD23F !important; } /* the phone menu bar + its drop-down list */ #mobilemenu{ background:linear-gradient(135deg,#05182F 0%, #0F3B66 45%, #0A2440 100%) !important; border-top:1px solid rgba(255,210,63,.35) !important; border-bottom:1px solid rgba(255,210,63,.35) !important; } #mobilemenu .menutext, #mobilemenubutton{ color:#FFFFFF !important; } #mobilemenulinks a{ background:#0A2440 !important; color:#EAF2FB !important; } #mobilemenulinks a:hover{ background:#0F3B66 !important; color:#FFD23F !important; } /* ---- 11d. PRODUCER BAND: deep green, zero yellow ---- */ .tdprod{ background:linear-gradient(135deg,#072B33 0%, #0F5A55 46%, #1C7A5E 100%) !important; border-color:rgba(242,234,219,.28) !important; } /* the FOR SHOW PRODUCERS chip is now a button through to Request Event Coverage */ a.tdprod__eyebrow{ background:#F2EADB !important; color:#072B33 !important; border-color:#F2EADB !important; text-decoration:none !important; padding:11px 24px !important; transition:background .2s ease, transform .15s ease !important; } a.tdprod__eyebrow:hover{ background:#FFFFFF !important; color:#072B33 !important; border-color:#FFFFFF !important; transform:translateY(-1px) !important; } .tdprod__head{ color:#FFFFFF !important; } .tdprod__head em{ color:#A8ECC8 !important; } .tdprod__panel--us{ background:rgba(242,234,219,.10) !important; border-color:rgba(242,234,219,.55) !important; } .tdprod__panel--them{ background:rgba(255,255,255,.045) !important; border-color:rgba(255,255,255,.16) !important; } .tdprod__panel--us .tdprod__ptitle{ color:#F2EADB !important; } .tdprod__panel--them .tdprod__ptitle{ color:rgba(255,255,255,.62) !important; } .tdprod__panel--us .tdprod__num{ color:#A8ECC8 !important; } .tdprod__panel--them .tdprod__num{ color:#FFFFFF !important; } .tdprod__what{ color:rgba(255,255,255,.88) !important; } .tdprod__panel--them .tdprod__what{ color:rgba(255,255,255,.74) !important; } .tdprod__c h4{ color:#FFFFFF !important; } .tdprod__c p{ color:rgba(255,255,255,.74) !important; } .tdprod__also{ color:rgba(255,255,255,.66) !important; } .tdprod__ph{ color:rgba(255,255,255,.74) !important; } body .tdprod__c a{ color:#A8ECC8 !important; border-bottom-color:rgba(168,236,200,.45) !important; } body .tdprod__c a:hover{ color:#FFFFFF !important; border-bottom-color:#FFFFFF !important; } body a.tdprod__btn{ background:#F2EADB !important; color:#072B33 !important; } body a.tdprod__btn:hover{ background:#FFFFFF !important; color:#072B33 !important; } /* ============================================================ 12. EVENT CARDS IN THE POPPIER BLUE Affects every card site-wide - all years, all client galleries, all show proofs - they share the TD Event Card layout. Delete this whole block to get the ember back. ============================================================ */ /* pale mat behind the poster - the dark navy was the same value as the page behind it, so the cards had no edge. Band underneath stays blue. */ .td-card__photo{ background:linear-gradient(135deg,#D3E5F6 0%,#B5D1EC 55%,#98BEE0 100%) !important; } .td-card__band{ background:linear-gradient(135deg,#05182F 0%, #1A5FA0 100%) !important; } .td-card__cta{ color:#FFD23F !important; background:linear-gradient(180deg, rgba(5,24,47,0) 0%, rgba(5,24,47,.88) 100%) !important; } .td-card__title a{ color:#FFFFFF !important; } .td-card:hover .td-card__title a{ color:#FFD23F !important; } .td-card__date{ color:rgba(255,255,255,.78) !important; } .td-card:hover .td-card__date{ color:rgba(255,210,63,.90) !important; } /* ============================================================ 13. NAVY OMBRE BACKGROUND + HEADER + FOOTER Puts the whole page on the same navy as the hero and the menu, and moves the masthead and the footer onto it so the page reads as one piece. The gradient is a fixed layer behind everything, so it does not stretch or repeat on long gallery pages. Delete this whole block to get the old near-black back. ============================================================ */ html{ background-color:#040E1A !important; background-image:none !important; } body{ background-color:transparent !important; background-image:none !important; } body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(95% 55% at 50% 0%, rgba(47,127,194,.15) 0%, rgba(47,127,194,0) 62%), linear-gradient(180deg,#08182B 0%, #040E1A 48%, #020810 100%); } /* section 4 forces a near-black on phones - keep it navy there too */ @media (max-width:768px){ html{ background-color:#040E1A !important; } } /* Sytist paints a black vignette over the page - tint it navy */ #bgFade{ box-shadow:0 0 200px 0 rgba(1,6,12,.95) inset !important; } /* ---- masthead ---- */ .tdph{ --black:#05182F !important; --border:#16324F !important; background: radial-gradient(120% 180% at 50% -40%, rgba(255,210,63,.13) 0%, rgba(255,210,63,0) 55%), linear-gradient(180deg,#0A2340 0%, #04121F 76%) !important; border-bottom-color:rgba(255,210,63,.30) !important; } /* ---- footer ---- */ .tdf{ --black:#05182F !important; --panel:#0A2440 !important; --border:#16324F !important; background:linear-gradient(180deg, rgba(8,24,43,0) 0%, rgba(2,8,16,.88) 100%) !important; border-top-color:rgba(255,210,63,.28) !important; } /* the producer lead-in line under the headline */ .tdprod__sub{ font-size:17px !important; line-height:1.6 !important; color:rgba(255,255,255,.82) !important; max-width:660px !important; margin:0 auto !important; } .tdprod__sub b{ color:#FFFFFF !important; font-weight:500 !important; } .tdprod__head{ margin-bottom:14px !important; } /* the three points: a cream strip so dark navy type can carry them. Navy straight onto the teal only reaches 2.2-3.4:1 contrast; on this cream it is 14.9:1, and the light band gives the eye a break from the white-on-dark above and below it. */ .tdprod__grid{ text-align:center !important; justify-content:center !important; align-items:center !important; background:#F2EADB !important; border-top:0 !important; border-radius:8px !important; padding:16px 20px !important; margin-top:26px !important; gap:6px 26px !important; } .tdprod__c{ max-width:none !important; flex:0 1 auto !important; } .tdprod__c h4{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:600 !important; font-size:21px !important; color:#05182F !important; margin:0 !important; } /* a star before each point - separators across on desktop, a bullet list when they stack on a phone. The character is typed literally, not as a CSS escape, because Sytist strips backslashes on save. */ .tdprod__c h4::before{ content:"✦"; color:#1C7A5E; font-size:11px; margin-right:12px; vertical-align:middle; opacity:.75; } /* ============================================================ 14. TOP MINI MENU - the gift-card strip A slim bar between the masthead and the main menu. It only appears when there is a link in Design > Menu Links > Top Mini Menu; with none, nothing renders. ============================================================ */ #shopmenucontainer{ background:linear-gradient(90deg,#04121F 0%, #0A2440 50%, #04121F 100%) !important; border-bottom:1px solid rgba(255,210,63,.22) !important; } #shopmenucontainer, #shopmenuinner, #accountmenu, #accountmenu ul, #accountmenu li{ margin:0 !important; padding-top:0 !important; padding-bottom:0 !important; line-height:1 !important; } #shopmenuinner{ max-width:none !important; width:100% !important; } #accountmenu{ float:none !important; text-align:center !important; } #accountmenu li{ display:inline-block !important; } #shopmenucontainer #accountmenu a{ display:inline-block; font-family:'Jost',sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:#FFD23F !important; text-decoration:none !important; padding:10px 14px !important; line-height:1 !important; transition:color .2s ease !important; } #shopmenucontainer #accountmenu a:hover{ color:#FFFFFF !important; } #shopmenucontainer .the-icons{ margin-right:8px !important; } #shopmenuitems{ display:none !important; } /* ============================================================ 15. CARD PHOTO FIT Two faults this fixes: 1. Sytist sized some photo windows differently from others (216x183 against 216x162), so cards that should have matched did not. A fixed 4:3 window makes every card the same shape on every page. 2. Section 7 pinned images to the top with margin-top:0 to stop tall posters being squashed. That also cancelled Sytist's own centring, so short wide flyers sat jammed against the top edge with empty mat beneath them. object-fit:contain letterboxes rather than crops - a flyer never loses its show name. Swapping contain for cover would fill the window but cut the top and bottom off tall posters. ============================================================ */ .td-card__photo{ aspect-ratio:4 / 3 !important; height:auto !important; padding:0 !important; flex:0 0 auto !important; overflow:hidden !important; } .td-card__photo .photocontainerbg{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; } .td-card__photo img{ margin:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain !important; display:block !important; } /* ============================================================ 16. AUDIENCE BUTTONS (Selected Work, top and bottom) Each button wears the colour of the audience it is for - teal for producers, pale blue for clients - so a reader finds their own door before reading a word. Class name is tdtop, not tdpf__btn: that name is already taken by the Selected Work page's own stylesheet and the two collided. ============================================================ */ .tdtop{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:24px 0 4px; font-family:'Jost','Helvetica Neue',Arial,sans-serif; } .tdtop__btn{ display:block; text-align:center; padding:12px 26px; border-radius:4px; min-width:238px; border:1px solid transparent; text-decoration:none !important; transition:transform .15s ease, box-shadow .2s ease; } .tdtop__btn:hover{ transform:translateY(-2px); } .tdtop__label{ display:block; font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; opacity:.8; margin-bottom:3px; } .tdtop__text{ display:block; font-size:14.5px; font-weight:600; letter-spacing:.04em; } .tdtop__btn--prod{ background:linear-gradient(135deg,#0F5A55 0%,#1C7A5E 100%) !important; border-color:rgba(242,234,219,.42) !important; color:#F2EADB !important; } .tdtop__btn--prod:hover{ box-shadow:0 8px 20px rgba(28,122,94,.45); } .tdtop__btn--client{ background:linear-gradient(135deg,#D3E5F6 0%,#A9C9E8 100%) !important; border-color:rgba(255,255,255,.55) !important; color:#05182F !important; } .tdtop__btn--client:hover{ box-shadow:0 8px 20px rgba(169,201,232,.40); } @media (max-width:560px){ .tdtop__btn{ min-width:0; width:100%; } } /* ============================================================ 17. SELECTED WORK PAGE (/my_work/) These rules used to live in a <style> block inside the page content field. Sytist's editor strips <style> on save, which dumped the CSS onto the page as visible text. Moved here so it cannot happen again - the content field now holds markup only. ============================================================ */ .tdpf{ --bronze:#BD8A40; --bronze-l:#E0B470; --cream:#F2EADB; --dim:#A89C8A; margin:0 auto; padding:0; max-width:100%; font-family:'Jost','Helvetica Neue',Arial,sans-serif; } .tdpf__intro{ text-align:center; padding:10px 20px 40px; } .tdpf__eyebrow{ font-size:12px; letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; color:var(--bronze-l); margin:0 0 12px; } .tdpf__title{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:clamp(30px,5.4vw,52px); color:var(--cream); margin:0 0 10px; letter-spacing:.5px; } .tdpf__sub{ font-size:clamp(14px,2.2vw,16px); color:var(--dim); line-height:1.6; max-width:560px; margin:0 auto; } .tdpf__frame{ position:relative; width:100%; margin:0 auto 18px; text-align:center; } .tdpf__frame img{ max-width:100%; max-height:88vh; width:auto; height:auto; margin:0 auto; object-fit:contain; display:block; opacity:0; transform:scale(1.04); transition:opacity 1.1s ease, transform 1.6s ease; } .tdpf__frame.in img{ opacity:1; transform:scale(1); } .tdpf__end{ text-align:center; padding:46px 20px 30px; } .tdpf__end p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(18px,3vw,26px); color:var(--bronze-l); margin:0 0 18px; } .tdpf__btn{ display:inline-block; padding:14px 32px; border-radius:8px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-decoration:none !important; transition:.25s ease; background:var(--bronze); color:#12100E !important; border:1.5px solid var(--bronze); } .tdpf__btn:hover{ background:var(--bronze-l); border-color:var(--bronze-l); color:#12100E !important; transform:translateY(-2px); box-shadow:0 8px 22px rgba(189,138,64,.3); } @media (max-width:600px){ .tdpf__frame img{ max-height:64vh; } } /* The fade-in used a script in the content field that added .in as you scrolled. Sytist's editor strips <script> from that field, so the images stayed at opacity 0 and the page looked empty. Visible by default now - no script needed. */ .tdpf__frame img{ opacity:1 !important; transform:none !important; } /* ===== Make the "no account" checkbox impossible to miss ===== */ *:has(> #no_account){ background:#FFF6DA !important; border:3px solid #FFC72C !important; border-radius:10px !important; padding:16px 18px !important; margin:16px 0 !important; font-size:18px !important; font-weight:700 !important; color:#13294B !important; box-shadow:0 0 0 5px rgba(255,199,44,.25) !important; cursor:pointer; } *:has(> #no_account)::before{ /content:"1F449 No account needed? CHECK THIS BOX to check out as a guest:"; display:block; font-size:15px; font-weight:800; letter-spacing:.02em; color:#13294B; margin-bottom:10px; } #no_account{ width:28px !important; height:28px !important; accent-color:#13294B; vertical-align:middle; margin-right:10px !important; cursor:pointer; } label[for="no_account"]{ font-size:18px !important; font-weight:700 !important; color:#13294B !important; cursor:pointer; } *:has(> #no_account)::after{ content:"Want an account instead? Leave the box unchecked and create a password below."; display:block; font-size:15px; font-weight:600; color:#13294B; margin-top:10px; padding-top:10px; border-top:1px dashed #FFC72C; } /* TD-PACKAGE-BAR: readable package / favorites bar at bottom (was bronze text on peach) */ #packagecontainer, .preregcontainer{background:#13294B !important;color:#FFFFFF !important;border-top:2px solid #FFC72C !important;} .managepackagetab{background:#13294B !important;color:#FFC72C !important;border:2px solid #FFC72C !important;border-bottom:0 !important;font-weight:700 !important;} .managepackagetab a, .managepackagetab .the-icons{color:#FFC72C !important;} .managepackagetab a:hover{color:#FFFFFF !important;} .packageselectpackagename, .preregname, .addtopackageinfo{color:#FFFFFF !important;border-color:#FFC72C !important;} .packageselectpackagename a, .preregname a, #packagecontainer a{color:#FFC72C !important;font-weight:700 !important;} .packageselectpackagename .the-icons, .preregname .the-icons{color:#FFC72C !important;} .packageextraphotos, .availableproduct{background-color:#0D1D36 !important;border-color:#FFC72C !important;color:#FFFFFF !important;} .deletepackageicon .the-icons, .deletepreregicon .the-icons, .deletepackageitemicon .the-icons{color:#E00000 !important;} /* END TD-PACKAGE-BAR */ /* ============================================================ 18. SELECTED WORK - BRICK (MASONRY) LAYOUT (added Oct 2026) Sunset hero on top (.tdpf__feature), then the photos stagger in columns inside .tdpf__grid. To add a photo, paste another <figure class="tdpf__frame"><img src="..."></figure> line inside the grid. ============================================================ */ .tdpf__feature{ max-width:1240px; margin:0 auto 16px; padding:0 12px; } .tdpf__feature img{ width:100% !important; max-height:none !important; border-radius:6px; } .tdpf__grid{ column-count:3; column-gap:14px; max-width:1240px; margin:0 auto; padding:0 12px; } .tdpf__grid .tdpf__frame{ display:block; break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 14px; } .tdpf__grid .tdpf__frame img{ width:100% !important; max-height:none !important; border-radius:4px; } @media (max-width:900px){ .tdpf__grid{ column-count:2; column-gap:10px; } .tdpf__grid .tdpf__frame{ margin-bottom:10px; } } @media (max-width:420px){ .tdpf__grid{ column-count:1; } } /* END 18 */ /* ####### End Additional CSS ######## */ .faqs{ background-color: #1A1611; border: solid 1px #BD8A40; padding: 4px; margin: 0px; color: #E8E0D0; } .specialMessage { background-color: #EDE5AB; border: solid 1px #BAB066; font-weight: normal; color: #000000; padding: 4px; text-align: center; clear: both; } .specialMessage a { color: #890000; font-weight: bold; } .photoShowBGContainer { width:100%; height:100%; min-height: 100%; margin:0; position: fixed; z-index: 2000; left: 0; top: 0; } #photoShowBGSolid { width:200%; height:200%; min-height: 100%; background-color:#000000; position: absolute; display: block; } .photoShowBGImageContainer { width:100%; height:100%; min-height: 100%; margin:0; position: fixed; z-index: 2200; left: 0; top: 0; } .photoBG2 { position: fixed; display: block; width: 100%; height: 100%; min-height: 100%; left: 0; top: 0; } .mainImageDiv { z-index: 23; width: 100%; left: 0; top: 0; position: absolute; } .mainImageDivInner { margin: 30px auto 0 auto; text-align: center; } .imageCaption { position: absolute; bottom: 4px; left: 4px; background-color:#FFFFFF;z-index: 50; filter:alpha(opacity=40); opacity:0.4; text-align: left; margin: auto; } .imageCaptionText { filter:alpha(opacity=100); opacity: 0.9; padding: 4px; color: #000000; } .photoMessageContainer { margin: 200px auto 0 auto; z-index: 2999; position: fixed; width: 100%; left: 0; display: none; } .fb_ltr{ position: absolute !important; left: 0; z-index: 1; } .photoMessage { width: 200px; padding: 10px; background-color:#FFFFFF; z-index: 50; filter:alpha(opacity=80); opacity:0.8; text-align: center; margin: auto; color: #000000; } /* Comemnts box text color */ div.comment_body div.composer div.connected {color:#E8E0D0;} #listComments { } .connect_widget_not_connected_text {color:#E8E0D0;} div.comment_body div.composer div.connected div.UIImageBlock_Content {color#E8E0D0;} div.comment_body div.composer div.connected span.namelink a {color:#BD8A40;} div.comment_body div.post_area div.connected label {color:#E8E0D0;} div.comment_body div.show_connected a.editsettings {color:#BD8A40;} div.comment_body div.wallkit_postcontent h4 {color:#E8E0D0e;} div.comment_body div.wallkit_postcontent h4 a {color:#BD8A40;} div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#E8E0D0;} div.comment_body div.wallkit_postcontent div {color:#E8E0D0;} div.comment_body div.wallkit_postcontent div a {color:#BD8A40;} div.comment_body div.wallkit_actionset a {color:#E8E0D0 !important;} div.comment_body div.wallkit_subtitle div.post_counter {color:#E8E0D0;} div.comment_body div.wallkit_subtitle div.pager a {color:#BD8A40;} div.comment_body div.wallkit_subtitle div.pager a:hover {color:#E8E0D0;} div.comment_body div.connect_area div.or {color:#E8E0D0;} div.comment_body div.connect_area div.connect_button_text {color:#E8E0D0;} div.comment_body div.wall_captcha {color:#E8E0D0;} div.comment_body div.wall_captcha h3 {color:#E8E0D0;} div.comment_body div.wall_captcha a {color:#BD8A40;} div.comment_body div.wall_captcha label {color:#E8E0D0;} .bookingyearnav .the-icons { font-size: 12px; opacity: .6;} .sq-card-iframe-container { max-width: 400px; margin: auto; } .demselected { font-weight: bold !important; text-decoration: underline !important; } .selectdem { font-weight: normal; } #zipprogress { background: #3a7fc5; height: 12px; width:1%; transition: width .5s } #zipprogresscontainer { border: solid 1px #3069A3; width: 100%; } @keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:.2; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:.2; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:.2; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:.2; } 100% { opacity:1; } } .animate-flicker { -webkit-animation: flickerAnimation 5s infinite; -moz-animation: flickerAnimation 5s infinite; -o-animation: flickerAnimation 5s infinite; animation: flickerAnimation 5s infinite; }