/********************/ /* tags etc */ /********************/ body {margin:0; font:80%/150% Trebuchet, Arial, sans-serif; background:#fff} h1, h2, h3, h4, h5, h6, p {padding:0; margin:15px 0; color:#000; letter-spacing:-2px} h2 {margin:0 0 -10px 0; padding:0} h1 {margin-top:10px} h1, h2 {color:#98cacf; font-size:280%} h3 {font-size:110%} p {letter-spacing:normal} .index-page h1, .index-page h2 {letter-spacing:normal} a, a:link, a:active, a:visited {color:#6c9094; text-decoration:none} a:hover, a:focus {text-decoration:underline} img {border:none} form {padding:0; margin:0} select:focus, textarea:focus, input[type=text]:focus, input[type=password]:focus {background:#ffc} input[type=reset], input[type=submit], input[type=button] {width:73px; height:23px; padding:0 0 2px; color:#fff; font-weight:bold; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; border:none; background:transparent url(/vision/visionimages/strips_buttons.gif) 0 -131px no-repeat; cursor:pointer} input[type=reset]:hover, input[type=submit]:hover, input[type=button]:hover {background-position:0 -108px} noscript {position:absolute; top:10px; left:10px; z-index:1001} noscript p {padding:5px; margin:0; color:#f00; background:1px scroll #f00; background:#fff} #record_paging_no_results {font-size:140%; font-weight:700; text-align:center} #status {position:absolute; display:none; width:400px; top:160px; left:50%; padding:10px; margin:0 0 0 -200px; text-align:center; background:#ddfcbf; border:4px #B4DD8D solid; z-index:99999} .success {color:#090} .failure {color:#f00} #main-container #body-container .loading-spinner {display:inline; border:none} .image-border-1 {padding:4px; margin:4px 7px; background:#ccc} .text-blue {color:#98CACF} .text-grey {color:#666666} .credits, .credits a:link, .credits a:active, .credits a:visited {text-align:right; color:#aaa} .credits a:hover {color:#c00} #main-container {position:relative; width:950px; margin:0 auto; background:url(../images/bg/bg-body.png) 0 235px repeat-x} /********************/ /* head container */ /********************/ #head-container {position:relative; width:950px; height:230px; top:0; clear:both; z-index:2} #head-container q {position:absolute; width:318px; height:20px; top:147px; left:0; padding:0; margin:0; letter-spacing:-1000em; text-indent:-999em; background:transparent url(../images/sprites/sprites-common.png) -355px 0 no-repeat} #head-container p {position:absolute; width:355px; height:185px; top:0; right:0; margin:0; padding:0; letter-spacing:-1000em; text-indent:-999em; background:transparent url(../images/sprites/sprites-common.png) 0 0 no-repeat} #head-container ul {position:absolute; top:197px; margin:0; list-style:none} #head-container li {position:relative; float:left} #head-container li a, #head-container li a:link, #head-container li a:active, #head-container li a:visited {display:block; height:33px; letter-spacing:-1000em; text-indent:-999em; background:transparent url(../images/sprites/sprites-menu.png) no-repeat} #head-container li a:hover, #head-container li a:focus {text-decoration:none} #head-container #skip-nav {width:41px; background-position:-294px 0} #head-container #home-nav {width:74px; background-position:0 0} #head-container #about-nav {width:100px; background-position:-74px 0} #head-container #contact-nav {width:120px; background-position:-174px 0} #head-container #artists-nav {width:75px; background-position:-335px 0} #head-container #framing-nav {width:87px; background-position:-700px 0} #head-container #printing-nav {width:163px; background-position:-787px} #head-container #jewellery-nav {width:98px; background-position:-602px 0} #head-container #gift-nav {width:94px; background-position:-508px 0} #head-container #furniture-nav {width:98px; background-position:-410px 0} #head-container #home-nav:hover {background-position:-950px 0} #head-container #about-nav:hover {background-position:-1024px 0} #head-container #contact-nav:hover {background-position:-1124px 0} #head-container #artists-nav:hover {background-position:-1285px 0} #head-container #framing-nav:hover {background-position:-1650px 0} #head-container #printing-nav:hover {background-position:-1737px 0} #head-container #jewellery-nav:hover {background-position:-1552px 0} #head-container #gift-nav:hover {background-position:-1458px 0} #head-container #furniture-nav:hover {background-position:-1360px 0} #head-container ul.left {left:0; padding:0} #head-container ul.left li:first-child {position:absolute; width:41px; height:33px; left:294px; padding:0; background:transparent url(../images/sprites/sprites-menu.png) -294px 0 no-repeat} #head-container ul.left li:first-child a {display:none} #head-container ul.right {right:0; padding:0} #head-container ul.right li:first-child ul {left:-34px} #head-container ul.right ul {position:absolute; display:none; width:230px; top:33px; left:0; padding:0; margin:0} #head-container ul.right ul li {position:relative; float:none; padding:0; background:#98cacf} #head-container ul.right ul li:first-child {padding:0} #head-container ul.right ul li:first-child a:link, #head-container ul.right ul li:first-child a:active, #head-container ul.right ul li:first-child a:visited {border:none} #head-container ul.right ul li:first-child span {top:0} #head-container ul.right ul span {position:absolute; display:block; width:30px; height:30px; top:1px; left:0; background:transparent url(../images/sprites/sprites-common.png) -400px -20px no-repeat} #head-container ul.right ul ul {top:0; left:231px} #head-container ul.right ul li.hover a.hover:hover {background:#acacac} #head-container ul.right ul li.hover a.hover span {background-position: -430px -20px} #head-container ul.right ul a:link, #head-container ul.right ul a:active, #head-container ul.right ul a:visited {display:block; height:auto; padding:6px 0 5px 35px; color:#fff; font-size:100%; font-weight:700; letter-spacing:normal; text-indent:0; text-align:left; border-top:1px solid #fff; background:none} #head-container ul.right li:hover {background:#acacac} #head-container .right ul a {zoom:1} /* IE6/7 fix */ /********************/ /* body container */ /********************/ #body-container {width:890px; clear:both; padding:15px 30px 30px; margin:5px 0 0} #body-container .left {width:260px; overflow:hidden; float:left} #body-container .left h2 {color:#acacac} #body-container .right {width:580px; overflow:hidden; float:right} #body-container .left p img {margin-bottom:20px} /* home page featured */ .featured {position:relative; min-height:333px; overflow:hidden; margin:0 0 15px} .featured p + img {position:absolute; top:58px; left:0} .featured h3, .featured h3 + p {position:relative; width:150px; top:-10px; left:277px; padding:10px 10px 0; margin:0; color:#fff; background:#98cacf} .featured h3 + p em {display:block; padding:10px 0 7px; font-style:normal} .featured img + img {position:absolute; top:58px; left:453px} .featured img + p {position:relative; width:285px; left:285px; margin:5px 0; font-weight:700} .featured h3 + p a:link, .featured h3 + p a:active, .featured h3 + p a:visited {position:relative; width:auto; left:285px; padding:3px 5px; color:#fff; font-size:85%; font-weight:700; text-decoration:none; background:#98cacf} .featured h3 + p a:hover, .featured h3 + p a:focus {background:#f93} .featured h3 + p em a:link, .featured h3 + p em a:active, .featured h3 + p em a:visited {left:auto; padding:0; font-size:100%; font-weight:normal; text-decoration:underline; background:none} .featured div#thumbs-adv ul.thumbs {display:none} .featured div#gallery-adv {width:270px; min-height:270px} .editor div#thumbs-adv, .featured div#gallery-adv img {width:270px; height:270px} .editor div#thumbs-adv, .featured div#gallery-adv {position:absolute; top:58px; left:0} .editor div#thumbs-adv + img, .featured div#thumbs-adv + img {position:absolute; top:58px; left:453px} .editor div#thumbs-adv ul.thumbs {display:block} .editor div#gallery-adv {display:none} /* artists page list */ .artists-list-page #body-container .right ul {overflow:hidden; margin-bottom:20px} .artists-list-page #body-container .right li {width:40%; float:left} /*.portraits {overflow:hidden; clear:both} .portraits img {margin:5px}*/ .artists-list-page #body-container div#thumbs-adv ul.thumbs {display:none} .artists-list-page #body-container div#gallery-adv {width:250px; min-height:300px; margin:10px 0 0} /* contact page */ .contact-page #contact-form ul {padding:0; margin:0; list-style:none} .contact-page #contact-form #contact-details li {float:left; width:48%; padding:3px 0} .contact-page #contact-form #contact-verify li {padding:3px} .contact-page #contact-form #contact-submit {margin:10px 0} .contact-page #contact-form #name {width:94%; background:#cbe4e7} .contact-page #contact-form #email {width:100%; background:#cbe4e7} .contact-page #contact-form #code {width:100px; background:#cbe4e7} .contact-page #contact-form textarea {width:200%; background:#cbe4e7} .contact-page #contact-form #name:focus, .contact-page #contact-form #email:focus, .contact-page #contact-form #code:focus, .contact-page #contact-form textarea:focus {background:#E1F0F1} .contact-page #contact-form label {width:150px; float:left} .contact-page #contact-form fieldset {border:none} .contact-page #contact-form #contact-verify {width:90%; margin-left:9px; border:1px solid #ACACAC} .contact-page #contact-form legend {display:none} .contact-page .left h2 {margin-top:10px} /* for the editor */ .featured.editor h3, .featured.editor h3 + p {top:20px} .featured.editor img + p {top:20px} .featured.editor a:link, .featured.editor a:active, .featured.editor a:visited {top:20px} /********************/ /* foot container */ /********************/ #foot-container {position:relative; width:930px; overflow:hidden; clear:both; padding:0 10px 10px; border:#f00; background:url(../images/bg/bg-foot.png) repeat-x} #foot-container ul {height:30px; overflow:hidden; padding:0; margin:0; border-top:1px solid #ccc; border-right:none; border-left:none; list-style:none} #foot-container li {float:left; padding:5px 0 1px 30px; margin:0} #foot-container li:first-child {padding-left:0; padding-right:3px} #foot-container li a, #foot-container li a:link, #foot-container li a:active, #foot-container li a:visited {color:#acacac; font-size:140%} #foot-container img {left:0; position:relative;float:left; margin:15px 10px 0 0} #foot-container address {margin:15px; color:#acacac; font-weight:700; font-style:normal} #foot-container a, #foot-container a:active, #foot-container a:visited {color:#acacac} #foot-container q {position:absolute; width:145px; height:65px; top:45px; right:20px; padding:0; margin:0; letter-spacing:-1000em; text-indent:-999em; background:transparent url(../images/logos/logo-footer-trans.png) no-repeat} /*******************************/ /* comments styles /*******************************/ #comments-form label {width:25%; height:20px; float:left; padding:4px; margin:0 5px 0 0; color:#fff; font-weight:700; background:#999} #comments-form label[for=comment] {width:100%} #comments-form input[type=submit] {width:107px; background-position:0 -177px} #comments-form input[type=submit]:hover {padding:2px 0 0 2px; background-position:0 -154px} #comments-form input[type=text] {width:70%; border:5px solid #ccc} #comments-form input#cd {width:20%} #comments-form #status {position:relative; top:0; left:0; margin:10px auto} #delete-comments p:first-child {text-align:right} #delete-comments input {float:right} #delete-comments input#selectall {float:none} #main-container h2#comments+p {font-weight:400; text-align:left} /*******************************/ /* common advanced search styles /*******************************/ #vision_search_form input#search {width:98%} #vision_advanced_search {position:absolute; min-width:205px; overflow:visible; padding:7px; margin:14px 2px; display:none; background:#ccc; border:1px #c00 solid; z-index:98} #vision_advanced_search_show, #vision_advanced_search_hide {cursor:pointer} #vision_advanced_search select {display:block; width:205px; margin:5px 0} /*******************************/ /* common categories/arcvhive column styles /*******************************/ .left ul {padding:0; margin:0 0 15px; list-style:none} .left ul ul {font-size:110%; font-weight:700; border-bottom:1px solid #ccc} .left ul ul ul {margin:0 0 0 15px; font-size:90%; border:none} /*******************************/ /* carousel gallery styles /*******************************/ .carousel-page #body-container .right {position:relative; height:655px; overflow:hidden} .carousel-page #body-container #delete-form .options, .carousel-page #body-container #images-info .options {text-align:center} .carousel-page #body-container h1 {position:relative; text-align:center} .carousel-page #body-container h1.sifr {position:relative; margin:0} .carousel-page #body-container h1 a, .carousel-page #body-container h1 a:active, .carousel-page #body-container h1 a:visited {color:#000; text-decoration:underline} .carousel-page #body-container h1 a:hover {text-decoration:none} .carousel-page #body-container h1 + p {text-align:center} .carousel-page #body-container h2 {text-align:center} .carousel-page #body-container h2 + ul {padding:0 0 10px; margin:10px 0; text-align:center; border-bottom:1px solid #ccc} .carousel-page #body-container ul {padding:0; margin:0 0 1em; list-style:none} .carousel-page #body-container li {display:inline} .carousel-page #body-container dl {overflow:hidden; clear:both; padding:0; margin:0} .carousel-page #body-container dt, .carousel-page #body-container dd {display:inline; margin:0} .carousel-page #body-container h2 + dl {text-align:left; border-bottom:1px solid #ccc} .carousel-page #body-container dl + ul {position:relative; float:right; margin:-20px 0; text-align:right; z-index:2} .carousel-page #body-container .rotdir, .carousel-page #body-container ul + p {position:absolute; width:100%; height:160px; bottom:85px; margin:0; text-align:center} .carousel-page #body-container ul + p img {border:5px solid #ccc} .carousel-page #body-container #description + dl {border:none} .carousel-page #body-container .options li {padding:0 10px} .carousel-page #body-container p .nyroModal {clear:both} .carousel-page #body-container .rotdir span {position:absolute; top:20px; left:250px; width:80px} .carousel-page #body-container ul#images {position:absolute; display:none; width:600px; height:360px; left:0; padding:0; margin:0; list-style:none; z-index:1} .carousel-page #body-container ul#images li {position:absolute; width:160px} .carousel-page #body-container ul#images li ul {display:none} .carousel-page #body-container ul#images li dl {display:none} .carousel-page #body-container ul#images li span {display:inline; font-weight:700} .carousel-page #body-container ul#images + p {bottom:35px; margin:0 0 60px; text-align:center; font-weight:700} .carousel-page #body-container #images-info {overflow:hidden; margin:25px 0; text-align:left} .carousel-page #body-container #images-info * {opacity:1} .carousel-page #body-container #images-info a:link, .carousel-page #body-container #images-info a:active, .carousel-page #body-container #images-info a:visited {color:#000} .carousel-page #body-container #images-info dt {display:block; margin:10px 0; color:#acacac; font-size:140%; font-weight:700} .carousel-page #body-container #images-info dd {display:block} .carousel-page #body-container #images-info .title a:link, .carousel-page #body-container #images-info .title a:active, .carousel-page #body-container #images-info .title a:visited {display:block; margin:10px 0 2px; color:#000; font-size:140%; font-weight:700} .carousel-page #body-container #images-info .price {margin:5px 0 0; font-size:160%; font-weight:700} .carousel-page #body-container #images-info .about a:link, .carousel-page #body-container #images-info .about a:active, .carousel-page #body-container #images-info .about a:visited {display:block; width:186px; height:30px; padding:5px 30px; margin:15px 0; vertical-align:bottom; letter-spacing:-1000em; text-indent:-999em; background:url(../images/icons/icon-artist-trans.png) no-repeat} .carousel-page #body-container #images-info .buy a:link, .carousel-page #body-container #images-info .buy a:active, .carousel-page #body-container #images-info .buy a:visited {display:block; width:141px; height:30px; padding:5px 30px; margin:15px 0; vertical-align:bottom; letter-spacing:-1000em; text-indent:-999em; background:url(../images/icons/icon-how-to-buy-trans.png) no-repeat} .carousel-page #body-container #images-info ul {float:none; clear:both; padding:0; margin:0 10px; text-align:left} .carousel-page #body-container #images-info img {width:250px; height:250px} .carousel-page #body-container #images-info span {font-size:140%; font-weight:700} .carousel-page #body-container .right ul#images li img.loading-spinner {display:inline; border:none} .carousel-page #body-container .ca {position:relative; margin-bottom:0; text-align:center} .carousel-page #body-container .subcats {position:relative; text-align:center} .carousel-page #body-container .subcats li {padding:0 5px 0 8px; border-left:1px solid #333} .carousel-page #body-container .subcats li:first-child {border:none} #main-container.artists-email-form,#main-container.jewellery-email-form,#main-container.furniture-email-form,#main-container.giftware-email-form {width:100%; float:right} .artists-email-form textarea,.jewellery-email-form textarea,.furniture-email-form textarea,.giftware-email-form textarea {height:100px} .artists-email-form label,.jewellery-email-form label,.furniture-email-form label,.giftware-email-form label {width:150px; float:left} .artists-email-form form,.jewellery-email-form form,.furniture-email-form form,.giftware-email-form form {margin:0 20px} .artists-email-form div,.jewellery-email-form div,.furniture-email-form div,.giftware-email-form div {overflow:hidden} .artists-email-form h1,.jewellery-email-form h1,.furniture-email-form h1,.giftware-email-form h1 {width:355px; height:185px; float:right; clear:both; padding:0; margin:0; letter-spacing:-1000em; text-indent:-999em; background:transparent url(../images/sprites/sprites-common.png) 0 0 no-repeat} .artists-email-form h2,.jewellery-email-form h2,.furniture-email-form h2,.giftware-email-form h2 {margin:75px 20px 30px} .artists-email-form em,.jewellery-email-form em,.furniture-email-form em,.giftware-email-form em {margin:0 20px} .artists-email-form p,.jewellery-email-form p,.furniture-email-form p,.giftware-email-form p {margin:7px 0} .artists-email-form #status,.jewellery-email-form #status,.furniture-email-form #status,.giftware-email-form #status {top:25px; opacity:0.8; filter:alpha(opacity=80)} /*******************************/ /* jewellery styles /*******************************/ .jewellery-page #body-container .paging {position:relative; height:20px; font-weight:700; text-align:center} .jewellery-page #body-container .paging a[rel=prev] {} .jewellery-page #body-container .paging a[rel=next] {} /* reset tag styles */ .jewellery-page #body-container p {clear:both; margin:15px 0 0} .jewellery-page #body-container h1, .jewellery-page #body-container h1 + p, .jewellery-page #body-container h2 {text-align:center; clear:both; margin-bottom:15px} .jewellery-page #body-container h2 + ul {padding:0 0 10px; margin:10px 0; text-align:center; border-bottom:1px solid #ccc} .jewellery-page #body-container h2 + ul li {display:inline; float:none} .jewellery-page #body-container h2 a:link, .jewellery-page #body-container h2 a:active, .jewellery-page #body-container h2 a:visited {color:#fff} .jewellery-page #body-container ul.thumbs {padding:0; margin:0; list-style:none} .jewellery-page #body-container ul.thumbs img {display:block; float:none; clear:both; width:auto; margin:auto} .jewellery-page #body-container ul.thumbs li {float:left; width:18%; padding:12px; margin:10px 15px; text-align:center; border:1px solid #ccc} .jewellery-page #body-container ul.thumbs ul.options {text-align:center} .jewellery-page #body-container ul.thumbs ul.options li {padding:0; margin:0 2px} .jewellery-page #body-container ul.thumbs ul.options input {margin:0} .jewellery-page #body-container ul.options {clear:both; padding:0; margin:0; list-style:none} .jewellery-page #body-container ul.options li {display:inline; float:none; width:auto; margin:0 6px 0 0; border:none} .jewellery-page #body-container ul.options ul {position:absolute; display:none; width:150px; padding:10px; margin:0; list-style:none; border:1px solid #c00; background:#fff} /* details page additional options menu (won't work in ie6) */ .jewellery-page #body-container h2 + ul.options {text-align:right} /* list page options (won't work in ie6) */ .jewellery-page #body-container h2#description + ul.options {text-align:center} .jewellery-page #body-container p.image {text-align:center} /* details lists */ .jewellery-page #body-container ul.thumbs dt, .jewellery-page #body-container ul.thumbs dd {display:block; padding:0; margin:0; text-align:left} .jewellery-page #body-container ul.thumbs dd.title {height:40px; padding:2px 5px; margin:2px 0 0; color:#fff; font-size:110%; font-weight:700; background:#98CACF} .jewellery-page #body-container ul.thumbs dd.title a, .jewellery-page #body-container ul.thumbs dd.title a:link, .jewellery-page #body-container ul.thumbs dd.title a:active, .jewellery-page #body-container ul.thumbs dd.title a:visited {color:#fff} .jewellery-page #body-container ul.thumbs dl {text-align:center} .jewellery-page #body-container dl {overflow:hidden; clear:both; padding:0; margin:0} .jewellery-page #body-container dt, .jewellery-page #body-container dd {display:inline; margin:0} /*******************************/ /* framing-examples styles /*******************************/ .framing-examples-page #body-container .paging {position:relative; height:20px; font-weight:700; text-align:center} .framing-examples-page #body-container .paging a[rel=prev] {position:absolute; left:0} .framing-examples-page #body-container .paging a[rel=next] {position:absolute; right:0} /* reset tag styles */ .framing-examples-page #body-container p {clear:both; margin:15px 0 0} .framing-examples-page #body-container h1, .framing-examples-page #body-container h1 + p, .framing-examples-page #body-container h2 {text-align:center; clear:both; margin-bottom:15px} .framing-examples-page #body-container h2 + ul {padding:0 0 10px; margin:10px 0; text-align:center; border-bottom:1px solid #ccc} .framing-examples-page #body-container h2 + ul li {display:inline; float:none} .framing-examples-page #body-container h2 a:link, .framing-examples-page #body-container h2 a:active, .framing-examples-page #body-container h2 a:visited {color:#fff} .framing-examples-page #body-container ul.thumbs {padding:0; margin:0; list-style:none} .framing-examples-page #body-container ul.thumbs img {display:block; float:none; clear:both; width:auto; margin:auto} .framing-examples-page #body-container ul.thumbs li {float:left; width:28.4%; padding:12px; margin:10px 8px; text-align:center; border:1px solid #ccc} .framing-examples-page #body-container ul.thumbs ul.options {text-align:center} .framing-examples-page #body-container ul.thumbs ul.options li {padding:0; margin:0 2px} .framing-examples-page #body-container ul.thumbs ul.options input {margin:0} .framing-examples-page #body-container ul.options {clear:both; padding:0; margin:0; list-style:none} .framing-examples-page #body-container ul.options li {display:inline; float:none; width:auto; margin:0 6px 0 0; border:none} .framing-examples-page #body-container ul.options ul {position:absolute; display:none; width:150px; padding:10px; margin:0; list-style:none; border:1px solid #c00; background:#fff} /* details page additional options menu (won't work in ie6) */ .framing-examples-page #body-container h2 + ul.options {text-align:right} /* list page options (won't work in ie6) */ .framing-examples-page #body-container h2#description + ul.options {text-align:center} .framing-examples-page #body-container h1 + p img {display:block; margin:0 auto 10px} /* details lists */ .framing-examples-page #body-container ul.thumbs dt, .framing-examples-page #body-container ul.thumbs dd {display:block; padding:0; margin:0; text-align:left} .framing-examples-page #body-container ul.thumbs dd.title {padding:2px 5px; margin:2px 0 0; color:#fff; font-size:110%; font-weight:700; background:#98CACF} .framing-examples-page #body-container ul.thumbs dd.title a, .framing-examples-page #body-container ul.thumbs dd.title a:link, .framing-examples-page #body-container ul.thumbs dd.title a:active, .framing-examples-page #body-container ul.thumbs dd.title a:visited {color:#fff} .framing-examples-page #body-container ul.thumbs dl {text-align:center} .framing-examples-page #body-container dl {overflow:hidden; clear:both; padding:0; margin:0} .framing-examples-page #body-container dt, .framing-examples-page #body-container dd {display:inline; margin:0} /*******************************/ /* printing services /*******************************/ .printing-services-page #printing-services-price {width:100%; margin:auto; border-collapse:collapse} .printing-services-page #printing-services-price td {width:40%; margin:4%; vertical-align:top} .printing-services-page #printing-services-price td:first-child {border-right:1px solid #ccc} .printing-services-page #printing-services-price table {width:90%; margin:20px auto} .printing-services-page #printing-services-price thead {font-weight:700} .printing-services-page #printing-services-price thead tr:first-child {font-size:120%} .printing-services-page #printing-services-price table td {padding:0 5px; border:none} .printing-services-page #printing-services-price table td:first-child {border:none}