/************* JIC CSS *************/ /* ******* Modal Window ***************/ /******Multibox - for MooTools 1.2 ******/ .mb img{display:block;border:none;} .mbClear{clear:both;width:100%;height:20px;} .mbHidden{display:none;} .multiBoxDesc{display:none;} *:focus { -moz-outline-style: none;outline: none } a:active, a:hover{outline: none} a:focus{-moz-outline-style: none;} /***** Pop-up styles ****/ .MultiBoxContainer{position:absolute;background:#FFF;display:none;z-index:999999;text-align:left;} .MultiBoxLoading{background:url(../img/mb_Components/loader.gif) no-repeat center;} .MultiBoxContent{position:relative;width:100%;height:100%;} .MultiBoxClose{display: block;position:absolute;top:10px;right:10px;background:url(../img/but_close.gif) no-repeat;width:51px;height:23px;cursor:pointer;z-index:0;} .MultiBoxControlsContainer{overflow:hidden;height:0px;position:relative;} .MultiBoxControls{width:100%;height:auto;position:relative;background:#111;font-family:Verdana,Arial,Helvetica,sans-serif;color:#FFF;} .MultiBoxDownload a, .MultiBoxDownload a:link, .MultiBoxDownload a:visited, .MultiBoxDownload a:hover, .MultiBoxDownload a:active{ font-size:9px;color:#CCC;margin:5px 0 0 35px;display:block;text-decoration:none; } .MultiBoxDownload a:hover{color:#FFF;} .MultiBoxPrevious{position:absolute;background:url(../img/mb_Components/left.png) no-repeat;width:24px;height:24px;left:0px;margin:5px 0 0 0;cursor:pointer;} .MultiBoxNext{position:absolute;background:url(../img/mb_Components/right.png) no-repeat;width:24px;height:24px;right:0px;margin:5px 0 0 0;cursor:pointer;} .MultiBoxNextDisabled{cursor:default;background:url(../img/mb_Components/rightDisabled.png) no-repeat;} .MultiBoxPreviousDisabled{cursor:default;background:url(../img/mb_Components/leftDisabled.png) no-repeat;} /**** Bottom text ****/ .MultiBoxTitle{position:relative;margin:10px 0 0 35px;float:left;font-size:11px;font-weight:bold;text-align:left;display:inline;} .MultiBoxNumber{position:relative;width:90px;margin:10px 35px 0 0;float:right;font-size:11px;text-align:right;display:inline;} .MultiBoxDescription{clear:left;position:relative;margin:0 35px 0 35px;padding:5px 0 0 0;font-size:11px;text-align:left;} /**** Overlay icon ****/ .Overlay{position:absolute;right:-5px;top:-5px;width:17px;height:17px;/*background:transparent url(../img/mb_Components/MagIcon.png) left top no-repeat;*/} /*img, div, input { behavior: url(../img/iepngfix.htc) }*/ /*.popup {border:0px;font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size: 12px;display: none;position: absolute;width: 588px;background:#fff;z-index: 60;color:#999999;} #popup { top: 100px; left: 50px; } */ /*******Home content*****/ #tbl { position: relative; } #tbl td { color: #999999; font-family: Arial; font-size: 12px; font-weight: normal; letter-spacing: 1px; } #tbl .line { width: 1px; } #tbl .hline { height: 31px; vertical-align: middle; } #tbl .hline2 { height: 31px; vertical-align: right; } #tbl div { width: 100%; height: 100%; position: relative; display: block } #tbl span.container { position: relative; } #tbl #gift-finder { } #tbl #jewelry-trends { } #tbl #jewelry-trends-img {} #tbl #jewels-in-the-news {} #tbl #jewels-in-the-news-img { display: block; position:absolute; text-indent: -9999px; } #tbl .cell2 { padding-left: 24px; } #tbl .cell2 table.product { margin-top: 13px; } #tbl .cell2 .title { font-size: 12px; text-transform: uppercase; } #tbl .cell2 .description { font-size: 8px; text-transform: uppercase; } #tbl .cell2 .designer { font-size: 10px; text-transform: uppercase; line-height: 20px; } #tbl .cell4 {/*padding-left: 20px;*/ } #tbl .cell4 img { margin-top: 2px; margin-bottom: 5px; } #tbl .cell4 p { margin-bottom: 10px; } #tbl .cell4 #btn-vote-now { display: block; width: 76px; height: 19px; text-indent: -9999px; background: url(../img/btn-vote-now.png) no-repeat; margin-top: 15px; } #tbl .cell5 { padding-left: 24px; } #tbl .cell5 img.title { margin-top: 5px;} #tbl .cell5 p { text-transform: uppercase; margin-top: 10px; line-height: 18px; margin-bottom: 12px; } #tbl .cell5 .bigger { font-size: 14px; font-weight: bold; } #tbl .cell5 #btn-submit-now { display: block; width: 80px; height: 19px; background: url(../img/btn-submit-now.png) no-repeat; text-indent: -9999px; } #tbl .cell5 #btn-more-info { display: block; width: 100px; height: 19px; background: url(../img/JIC_home_sweeps_moreInfo_btn_001.gif) no-repeat; text-indent: -9999px; } #tbl a { text-decoration:none; color:#acacac; font-weight:bold; font-size:11px;} #tbl a:hover {color:#c5960b;} /********Carousel ******/ #carousel { display: block; width: 910px; position: absolute; top: 155px; left: 15px; z-index: 0;} /******Menu Top*******/ #nav { display: block; margin: 0; padding: 0; position: relative;z-index:1;} #nav li {list-style: none; margin: 0; padding: 0; float: left; position: relative;z-index:2; } #nav a { display: block; } #nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; z-index:2;} * html #nav ul { line-height: 0; } /* IE6 "fix" */ #nav ul a { zoom: 1; } /* IE6/7 fix */ #nav ul li { float: none; } #nav ul ul { top: 0; } #nav ul { width: 185px; } #nav ul ul { left: 185px; } /* Everything else is theming */ #nav { background-color: #003e7e; height: 22px; text-align:left; } #nav *:hover { background-color: none; } #nav a { color: white; font-size: 11px; padding: 6px 10px; line-height: 10px; text-decoration:none; } @media screen and (-webkit-min-device-pixel-ratio:0) { #nav a { color: white; font-size: 10px; padding: 6px 10px; text-decoration:none; }} * html #nav a, * +html #nav a{color: white; font-size: 10px; padding: 6px 10px;line-height: 10px; text-decoration:none; } *html #nav li { display: inline; } #nav a, x:-moz-any-link, x:default{color: white; font-size: 10px; padding: 6px 10px;line-height: 10px; text-decoration:none; } #nav li.hover a { background-color: #798289; text-decoration:none;} #nav ul { top: 22px; } #nav ul li { margin: 0; padding: 0;} #nav ul li a { background-color: #798289; text-decoration:none; margin: 0px;} #nav ul a.hover { background-color: #464646; } #nav ul a { border-right: none; opacity: 0.9; filter: alpha(opacity=90); } /* #nav ul a { border-bottom: none; } - I also needed this for IE6/7 */ .navbg {background: url(../img/aleft.gif) no-repeat 175px 8px} /************** Star Rating *****************/ .rating2{width:80px;height:16px;margin:0 0 5px 0;padding:0;list-style:none;position:relative;background: url(../img/star-matrix.gif) no-repeat 0 0;z-index:0} /* add these classes to the ul to effect the change to the correct number of stars */ .nostar2 {background-position:0 0} .onestar2 {background-position:0 -16px} .twostar2 {background-position:0 -32px} .threestar2 {background-position:0 -48px} .fourstar2 {background-position:0 -64px} .fivestar2 {background-position:0 -80px} ul.rating2 li {cursor: pointer;float:left;text-indent:-999em;} ul.rating2 li a {position:absolute;left:0;top:0;width:16px;height:16px;text-decoration:none;z-index: 200;} ul.rating2 li.one a {left:0} ul.rating2 li.two a {left:16px;} ul.rating2 li.three a {left:32px;} ul.rating2 li.four a {left:48px;} ul.rating2 li.five a {left:64px;} /* the default rating is placed as a background image in the ul */ /* use the background position according to the table above to display the required images*/ .rating{width:80px;height:16px;margin:0 0 5px 0;padding:0;list-style:none;clear:both;position:relative;background: url(../img/star-matrix.gif) no-repeat 0 0;z-index:0} /* add these classes to the ul to effect the change to the correct number of stars */ .nostar {background-position:0 0} .onestar {background-position:0 -16px} .twostar {background-position:0 -32px} .threestar {background-position:0 -48px} .fourstar {background-position:0 -64px} .fivestar {background-position:0 -80px} ul.rating li {cursor: pointer;float:left;text-indent:-999em;} ul.rating li a {position:absolute;left:0;top:0;width:16px;height:16px;text-decoration:none;z-index: 200;} ul.rating li.one a {left:0} ul.rating li.two a {left:16px;} ul.rating li.three a {left:32px;} ul.rating li.four a {left:48px;} ul.rating li.five a {left:64px;} ul.rating li a:hover {z-index:2;width:80px;height:16px;overflow:hidden;left:0; background: url(../img/star-matrix.gif) no-repeat 0 0} ul.rating li.one a:hover {background-position:0 -176px;} ul.rating li.two a:hover {background-position:0 -192px;} ul.rating li.three a:hover {background-position:0 -208px} ul.rating li.four a:hover {background-position:0 -224px} ul.rating li.five a:hover {background-position:0 -240px} /* end rating code */ h3{margin:0 0 2px 0;font-size:110%} /*********Form ***********/ .formbutton{cursor:pointer;border:outset 1px #ccc;background:#fff; background:url(../img/but_submit_purple.jpg) repeat-x left top; } body { margin:15px 0 15px 0; background:#fff; font-family:Arial; font-size:12px; color:#666666; line-height:16px; } img{border:none;} a {color:#666666; text-decoration:none;border:none} a:hover {color:#c5960b;} .designgallery { border: solid 10px #dedede;} .designgallery:hover { border: solid 10px #c4c4c4;} h1 {margin:0px 0px 10px 0px; padding:0px; font-weight:normal; color:#c5960b; font-size:16px; text-transform:uppercase;} h2 {margin:0px 0px 10px 0px; padding:0px; font-weight:normal; color:#c5960b; font-size:13px; text-transform:uppercase;} #cssTop { font-size:9px; text-transform:uppercase; line-height:16px; color:#959595; } #cssTop a {color:#999999; text-decoration:none;} #cssTop a:hover {text-decoration:underline;} #cssTop input {margin:0; padding:0; border:0px; color:#e5e5e5;} #cssTop .txtField {width:110px; background:url(../img/bg_search.jpg) no-repeat top left #e5e5e5; height:17px; font-size:10px; color:#a1a1a1; border:0px; padding-top:3px; padding-left:5px;} #cssBuyersTable .normal {background:#dedede;} #cssBuyersTable .over {background:#c4c4c4;} #cssBuyersTable img {margin:10px;} #cssPag {font-weight:bold; font-size:13px;} #cssPag a {padding:0px 5px; color:#999999; text-decoration:none;} #cssPag a:hover {color:#c5960b;} #cssPag .selected {color:#c5960b;} #cssRelated a {font-size:11px; color:#666666; text-transform:uppercase; text-decoration:none;} #cssRelated a:hover {color:#c5960b;} #cssSlide {color:#959595; font-size:12px; text-transform:uppercase;} #cssSendFriend .txtField { width:210px; height:20px; background:url(../img/bg_input.jpg) no-repeat; border:0; padding:0px; margin:0px;} #cssStories textarea {color:#898989; background:url(../img/bg_textarea.jpg) no-repeat; width:370px; height:80px; padding:10px; border:0; margin:0;} #cssTopPop {text-transform:uppercase; color:#898989; font-size:11px;} #cssTopPop a {color:#898989; text-decoration:none; padding:5px 10px;} #cssTopPop a:hover {background:#e5e5e5;} #footer {color:#999999; font-size:11px; text-transform:uppercase;} #footer a {color:#999999; font-size:11px; text-transform:none; text-decoration:none; padding:0 6px; font-weight:bold;} #footer a:hover {text-decoration:underline;} /* ************** */ .txtRed {color:#c5960b;} .txtOrange {color:#c5960b;} .txtWhite {color:#fff;} .txtBlue {color:#4e2683;} .txtBlue2 {color:#3366ff;} .txtGrey {color:#a1a1a1;} .txtGrey2 { color:#999999; } /* i am aware this modification in the css will also change the text for other elements on the site, but that is my intentions */ .txtGrey3 {color:#898989;} .txtGrey4 {color:#707070;} .txtGrey5 {color:#999999;} .txtGrey6 {color:#666666;} .txtGrey7 {color:#b8b8b8;} .txtGrey8 {color:#8a8a8a;} .txtBU {text-transform:uppercase; font-weight:bold;} .txtU {text-transform:uppercase;} .txtBU11 {text-transform:uppercase; font-weight:bold; font-size:11px} .txt24 {font-size:24px;} .txt29 {font-size:29px;} .txt28 {font-size:28px;} .txt26 {font-size:26px;} .txt18 {font-size:18px;} .txt17 {font-size:17px;} .txt16 {font-size:16px;} .txt14 {font-size:14px;} .txt13 {font-size:13px;} .txt11 {font-size:11px;} .txt10 {font-size:10px;} /* *************** */ #cssProductList a { text-decoration:none; color:#acacac; font-weight:bold; font-size:11px;} #cssProductList a:hover {color:#c5960b;} .txtField2 { background:url(../img/d1.jpg) no-repeat top left #ebebeb; height:15px; font-size:10px; color:#a1a1a1; border:0px; padding-top:3px; padding-left:5px;} .txtField3{color:#898989; background:url(../img/textarea2.jpg) repeat-y; width:395px; height:243px; padding:0px 15px 0px 5px; border:0; margin:0;overflow:auto;} /* ********************* */ span.checkbox { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(../img/checkbox.gif) no-repeat; display: block; clear: left; float: left; } span.radio { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(../img/radio.gif) no-repeat; display: block; clear: left; float: left; } span.select { position: absolute; width: 89px; /* With the padding included, the width is 190 pixels: the actual width of the image. */ height: 15px; padding: 0 14px 0 2px; color: #666666; font: 10px/21px arial,sans-serif; text-transform:uppercase; font-weight:bold; cursor:pointer; background: url(../img/select.jpg) no-repeat ; overflow: hidden; } span.select4{ position: absolute; /*width: 150px; With the padding included, the width is 190 pixels: the actual width of the image. */ height: 18px; padding: 0 14px 3px 2px; color: #acacac; font: 10px/21px arial,sans-serif; text-transform:uppercase; font-weight:bold; cursor:pointer; background: url(../img/arrow_down.jpg) no-repeat 100%; overflow: hidden; z-index:5; } span.select2 { position: absolute; /*width: 150px; With the padding included, the width is 190 pixels: the actual width of the image. */ height: 18px; padding: 0 14px 3px 2px; color: #8a8a8a; font: 11px/21px arial,sans-serif; text-transform:uppercase; cursor:pointer; overflow: hidden; z-index:5; } span.select3 { position: absolute; /*width: 89px; With the padding included, the width is 190 pixels: the actual width of the image. */ height: 18px; padding: 0 14px 3px 2px; color: #8a8a8a; font: 11px/21px arial,sans-serif; text-transform:uppercase; cursor:pointer; /*background: url(../img/arrow_down.jpg) no-repeat 100%;*/ overflow: hidden;z-index:1; } span.select4 , span.select9{ position: absolute; /*width: 89px; With the padding included, the width is 190 pixels: the actual width of the image. */ height: 18px; padding: 0 14px 0px 2px; color: #666666; font: 11px arial,sans-serif; text-transform:uppercase; font-weight:bold; cursor:pointer; background: url(../img/arrow_down.jpg) no-repeat 100% 15%; overflow: hidden; z-index:1; } span.select5{ position: absolute; /*width: 89px; With the padding included, the width is 190 pixels: the actual width of the image. */ height: 18px; padding: 0 14px 0px 2px; color: #666666; font: 11px arial,sans-serif; text-transform:uppercase; font-weight:bold; cursor:pointer; background: url(../img/arrow_down.jpg) no-repeat 100% 15%; overflow: hidden;z-index:1; } #accordion { margin:5px 0px; } h3.toggler { cursor: pointer; font-size: 12px; background: #D2E0E6; color: #528CE0; margin: 0 0 2px 0; padding: 7px 5px 1px; height:25px; } div.element p, div.element h4 { margin:0px; padding:4px; } blockquote { padding:5px 20px; } div.slider1, div.slider2, div.slider3, div.slider4, div.slider5 { width:365px; height:27px; background: url(../img/slide02.jpg) no-repeat 0px -2px; float:left;display:inline-table; } div.slider1 div.knob1, div.slider2 div.knob2, div.slider3 div.knob3, div.slider4 div.knob4, div.slider5 div.knob5 { background: url(../img/slide_button.jpg) no-repeat ; width: 46px; height: 27px; } div{margin: 0px;} /* Scrollbar & content css */ #content1, #content2, #content3{height: 240px;width: 540px;float:left;overflow:hidden;} #content1 p{margin: 10px;} .scrollbar-vert{ background: url(../img/handlerbody.jpg) no-repeat;height: 240px;width: 20px;float:left;} .handle-vert{height: 61px;width: 20px;background: url(../img/handler.gif) no-repeat 3px;} #content2 p{width: 1000px;} .scrollbar-hor{background-color: #d2e8ff;height: 20px;width: 300px;float:left;} .handle-hor{height: 20px;width: 42px;background: url(../img/handle-hor.gif) no-repeat;} #content3 p{width: 700px;} /*begin - added by AH 1_07_10*/ .sloc {width:45%;float:left;} .scom {width:45%;float:right;} .spacer{clear:both} .locres{width:360px;float:left;} .mapres{width:520;float:right;} .goldlet{ font:Arial; font-size:20px; color:#c59606} /*end - added by AH 1_07_10*/ /* ************* 01.31.2010 ************* */ #register {color:#666666; font-weight:bold; font-size:11px;} #register .txtF01 { background: url(../img/newregister/bg_txt01.jpg) no-repeat top left; height:18px; width:190px; font-size:11px; color:#a1a1a1; font-weight:normal; border:0px; padding-top:3px; padding-left:5px; margin:10px 0; } #register .txtF02 { background: url(../img/newregister/bg_txt02.jpg) no-repeat top left; height:18px; width:42px; font-size:11px; color:#a1a1a1; font-weight:normal; border:0px; padding-top:3px; padding-left:5px; margin:10px 0; } #register .txtF03 { background: url(../img/newregister/bg_txt03.jpg) no-repeat top left; height:18px; width:56px; font-size:11px; color:#a1a1a1; font-weight:normal; border:0px; padding-top:3px; padding-left:5px; margin:10px 0; } #register .txtF04 { background: url(../img/newregister/bg_txt04.jpg) no-repeat top left; height:88px; width:361px; font-size:11px; color:#a1a1a1; font-weight:normal; border:0px; padding-top:3px; padding-left:5px; margin:5px 0; } #login {} #login a {font-size:10px; color:#c5960b; text-decoration:underline;} #login .txtF01 { background: url(../img/newregister/bg_txt01.jpg) no-repeat top left; height:18px; width:145px; font-size:10px; color:#a1a1a1; font-weight:normal; border:0px; padding-top:3px; padding-left:5px; margin:10px 0; } .txtArea01 { background: url(../img/newregister/bg_txt06.jpg) no-repeat top left; height:115px; width:396px; font-size:10px; color:#a1a1a1; font-weight:normal; border:0px; padding-top:3px; padding-left:5px; margin:5px 0; } a.goldheader {color:#c59606} a.goldheader :link{color:#c59606} a.goldheader :visited{color:#c59606} a.goldheader :active{color:#c59606} a.goldheader :hover{color:#c59606} #jwtable{width:410px;height:70px;position:relative;} div#jwtable a{float:left; margin-right:5px; padding-bottom:3px; padding-left:3px; padding-right:3px; padding-top:3px; position:relative;} div#jwtable a.hover1:hover{ background-color:transparent; background-image:url("/files/contentimages/jewelry_trends/54x67.jpg"); background-position:0 0; background-repeat:no-repeat;} div#jwtable a.selected:visited{ background-color:transparent; background-image:url("/files/contentimages/jewelry_trends/54x67.jpg"); background-position:0 0; background-repeat:no-repeat;} }