/* top right bottom left */ /* tiffany aqua #00cccc */ /* mid purple #8d72a4 */ /* light purple #faf4ff */ /*------------------------------------------------- Page Reset -------------------------------------------------*/ html {margin:0px;padding:0px;height:100%;} body {background:#fff;margin:0px;padding:0px;height:100%;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;font-style:normal;font-weight:400;} h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {margin:0px;padding:0px;border:0px;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;font-style:normal;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;} table {border-collapse:collapse;border-spacing:0px;} /*------------------------------------------------- Page Defaults -------------------------------------------------*/ html {background:#fff;} body { background:#fff;color:#000;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;font-style:normal;font-weight:400;} /*------------------------------------------------- Page Positioning -------------------------------------------------*/ .fl {float:left;} .fr {float:right;} .fn {float:none!important;} .tl {text-align:left!important;} .tr {text-align:right!important;} .tc {text-align:center!important;} .clear {clear:both;line-height:1px;height:0px;} .minheight {min-height:650px;} a {text-decoration:none;color:#00cccc;} .purple {color:#00cccc;text-align:center;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:10px;font-style:normal;line-height:9px;padding:0px;margin:3px 0px 0px 0px;} .red {color:#900!important;} .noborder {border:none!important;} .nomargin {margin:0px!important;} .nopadding {padding-right:0px!important;} .margintop {margin-top:10px!important;clear:both;} .marginbottom {margin-bottom:10px!important;clear:both;} .margintop30 {margin-top:30px!important;} .marginright {margin-right:10px!important;} .marginleft {margin-left:10px!important;} .marginleft5 {margin-left:5px!important;} .nomargintop {margin-top:0px!important;} img {border:0px;} .w150 {width:150px!important;} /*------------------------------------------------- Page Structure -------------------------------------------------*/ #pagewrapper {width:1000px;height:auto;margin:0px auto 0px auto;padding-bottom:100px;z-index:10;display:block;position:relative;} #logo { width:224px;height:100px;margin:-40px auto 20px auto;display:block;position:relative;background:url(../images/karmar_logo.jpg)} #topnav {width:1000px;height:26px;margin:20px auto;z-index:10;display:block;position:relative;} #topnav ul{margin:0;padding:0;float:right;} #topnav ul li{display:inline;} #topnav ul li a{float:left;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:10px;text-transform:uppercase;text-decoration:none;color:#000;padding:10px 0px 0px 20px;color:#333;vertical-align:top;} #topnav ul li img {margin-top:-8px;} #shoppingbag {display:block; width:7px; height:8px; padding:5px!important; margin:7px 0px 0px 5px!important; line-height:8px; background: #00cccc; color:#FFF!important;} #mainnavwrapper {width:100%; background:#00cccc; margin-bottom:0px;z-index:100000;} #mainnav {width:1000px;height:60px;margin:0px auto;z-index:10;display:block;position:relative;border-top:1px solid #ccc;} #mainnav ul{margin:0;padding:0;} #mainnav ul li{display:inline;} #mainnav ul li a{float:left;display:block;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;letter-spacing:1px;font-size:17px;font-weight:600;text-transform:uppercase;text-decoration:none;color:#fff;padding:23px 30px 25px 0px;} #mainnav ul li a:hover {color:#666;} #viewmore {display:block; position:relative; margin-bottom:10px;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:uppercase; font-size:10px;color:#000; width:1000px!important; height:20px!important; text-align:right} /*------------------------------------------------- Search -------------------------------------------------*/ .search-field { float: right; display: block; width: 40px; width:30px\9;padding: 10px 0px 10px 10px; text-indent:35px;background-color: #fff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDIuMSAxMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMi4xIDEwMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgo8IVtDREFUQVsKCS5zdDB7ZmlsbDojRkZGRkZGO30KXV0+Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMS40LDY2LjJjNy4zLDcuMywxNy4xLDExLjQsMjcuNCwxMS40YzkuNCwwLDE4LjMtMy4zLDI1LjMtOS40TDk3LDEwMS4xYzAuNiwwLjYsMS40LDAuOSwyLjEsMC45CglzMS41LTAuMywyLjEtMC45YzEuMi0xLjIsMS4yLTMuMSwwLTQuMkw2OC4zLDY0YzYtNyw5LjMtMTUuOCw5LjMtMjUuMmMwLTEwLjQtNC0yMC4xLTExLjQtMjcuNEM1OC45LDQsNDkuMiwwLDM4LjgsMAoJUzE4LjcsNCwxMS40LDExLjRDLTMuOCwyNi41LTMuOCw1MS4xLDExLjQsNjYuMnogTTE1LjYsMTUuNkMyMS44LDkuNCwzMCw2LDM4LjgsNnMxNywzLjQsMjMuMiw5LjZjNi4yLDYuMiw5LjYsMTQuNCw5LjYsMjMuMgoJYzAsOC44LTMuNCwxNy05LjYsMjMuMmMtNi4yLDYuMi0xNC40LDkuNi0yMy4yLDkuNnMtMTctMy40LTIzLjItOS42QzIuOCw0OS4yLDIuOCwyOC40LDE1LjYsMTUuNnoiLz4KPC9zdmc+) 7px 7px no-repeat #00cccc; background-size: 18px; background-position: 10px; font-size: 14px; border: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-backface-visibility: hidden; } .search-field:focus, .search-field:hover { outline: none; width: 300px; color: #fff;z-index:1000; } .search-field::-ms-clear {width : 0;height: 0;} #search-text:focus, #search-text:hover { color:#fff!important; } #search-bar {position:absolute; right:0px;z-index:1000000;margin-top:-3px;} .search-field::-webkit-input-placeholder {color: #fff;} .search-field:-moz-placeholder {color: #fff;} .search-field::-moz-placeholder {color: #fff;} .search-field:-ms-input-placeholder {color: #fff;} .ms-container {margin-top:0px!important; padding-top:0px;background:#00cccc!important;} #index {margin-bottom:50px; min-height:300px;} .indexcol {width:490px; min-height:300px; float:left; display:block; padding:0px; margin:0px;} #promowrapper {width:1000px;height:190px;position:relative;display:block; margin:40px 0px 30px 0px;} .promo{width:300px;height:190px;position:relative;display:block;float:left;margin-right:50px; border-top:1px solid #00cccc;} .promo:nth-child(3n+3) {margin-right:0px;} .promo div {margin:-10px auto 10px auto; display:block; background:#fff; height:20px; width:100px; text-align:center; font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:15px; color:#00cccc;} .productrange {display:block; position:relative; width:100%; margin:35px 0px; text-align:center;} .productrange a {display:inline-block; width:23.8%;box-sizing: content-box;text-align:center;font-size:14px; text-transform:uppercase;text-decoration:none;border:1px solid #fff; padding-bottom:20px; overflow:hidden;} .productrange a span {z-index:1000000!important;display:block;position:relative;} .productrange a img{border:0;max-width:100%;height:auto;width:auto\9;/* ie8 */ -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; z-index:1;} .productrange a img:hover{-webkit-transform: scale(1.1); /* Safari and Chrome */ -moz-transform: scale(1.1); /* Firefox */ -ms-transform: scale(1.1); /* IE 9 */ -o-transform: scale(1.1); /* Opera */ transform: scale(1.1); z-index:1;} .productrange a:hover {border:1px solid #00cccc;} .productrange h1 {border-top:3px solid #00cccc;border-bottom:3px solid #00cccc;text-transform:uppercasce; letter-spacing:5px; font-size:30px; padding:20px; font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; color:#000; } #footerwrapper{width:100%; background:#00cccc; bottom:0px; position:relative; display:block;border-top:3px solid #00cccc;} #footer {display:block;position:relative;width:1000px;height:220px; margin:0px auto; padding-bottom:20px;z-index:10;} #footer div { float:left;display:inline;position:relative;width:235px;padding:0px;margin-right:20px;height:100%;} #footer div:nth-child(4n+4) {margin-right:0px;} #footer div h6{display:block;margin:20px 0px;padding:0;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:15px; font-weight:600;color:#00cccc;text-transform:uppercase; color:#fff;} #footer div a {display:block;margin-bottom:5px;padding:0;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;text-transform:uppercase;text-decoration:none;color:#666;} #footer div p {display:block;margin-bottom:5px;padding:0;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;line-height:14px;text-decoration:none;color:#666;} #footer span label {display:block;margin-bottom:5px;padding:0;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;text-transform:uppercase;text-decoration:none;color:#666;} .st_facebook_custom{position:relative; display:block;background: url("/images/icon_facebook.png") no-repeat scroll left top transparent;background-size:24px 24px;width:24px; height:24px; margin-bottom:5px;} .st_twitter_custom{position:relative; display:block;background: url("/images/icon_twitter.png") no-repeat scroll left top transparent;background-size:24px 24px;width:24px; height:24px; margin-bottom:5px;} .st_pinterest_custom{position:relative; display:block;background: url("/images/icon_pinterest.png") no-repeat scroll left top transparent;background-size:24px 24px;width:24px; height:24px; margin-bottom:5px;} .st_facebook_custom label, .st_twitter_custom label, .st_pinterest_custom label {margin:0px 0px 0px 32px;} #page {min-height:600px!important;width:1000px;display:inline-block;position:relative;z-index:10!important;padding:30px 0px 100px;} /*------------------------------------------------- Buttons & Form Elements -------------------------------------------------*/ #login {display:block; position:right;} #login input {width:100px; border: 1px solid #00cccc; background:#fff; font-size:12px; height:14px;} #login a {display:inline-block;width:45px;height:10px;background:#00cccc;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:10px;line-height:12px; color:#FFF!important;text-transform:uppercase;text-align:center;padding:3px;border:1px solid #00cccc;} #inputId:-webkit-autofill { background-color: white !important;} .buttonwrap, .footerbuttonwrap, .smallbuttonwrap {border:3px solid #00cccc;width:200px;display:inline-block;height:20px;} .buttonwrap a, .footerbuttonwrap a, .smallbuttonwrap a {display:block;width:192px;height:12px;background:#00cccc;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;line-height:12px; color:#FFF!important;text-transform:uppercase;text-align:center;padding:3px;border:1px solid #00cccc;} .footerbuttonwrap {width:180px; } .footerbuttonwrap a {width:178px;height:18px; line-height:18px;} .smallbutton { display:block;background:#00cccc;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:10px;line-height:12px; color:#FFF!important;text-transform:uppercase;text-align:center;padding:3px;border:1px solid #00cccc;width:89px;} input, textarea {width:200px;color:#000;border:none;border-bottom:#00cccc 1px dotted;margin:5px 0px;padding-left:2px;display:inline-block;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;text-decoration:none;} *:focus {outline: none;} input{margin:0px;} select {width:200px;height:18px;color:#000;background:#faf4ff;border:#faf4ff 1px solid;margin:5px 0px;padding-left:2px;display:inline-block;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;text-transform:capitalize;text-decoration:none;} .addressblock{padding:5px 0px 5px 0px;line-height:1.5em;vertical-align:top;border:none!important;} .formlabel{width:120px;padding:5px 5px 0px 5px;white-space:nowrap;vertical-align:top;border:none!important;color:#000;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;font-style:normal;font-weight:400;} .formfield{padding:5px 5px 0px 5px;vertical-align:top;border:none!important;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;font-style:normal;font-weight:400;} /*------------------------------------------------- Product -------------------------------------------------*/ #sidebarmenu {position:absolute;display:block;width:150px;padding:40px 0px 0px 0px;margin:20px 0px 0px 0px;z-index:1000; border-bottom:3px solid #00cccc;} #sidebarinfo {position:absolute;display:block;width:150px;padding:0px;margin:300px 0px 0px 0px;z-index:1000;} #sidebarcontactinfo {position:absolute;display:block;width:150px;padding:0px;margin:250px 0px 0px 0px;z-index:1000;} #sidebarmenu a {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-style:normal;font-weight:400;font-size:13px;text-transform:uppercase;text-decoration:none;color:#00cccc;padding:12px 0px 12px 6px;display:block; } #sidebarmenu a:hover{background:#00cccc;color:#fff;} #sidebarheader {position:relative;display:block;background:#FFF; padding:10px 0px 10px 6px;z-index:1000; margin:0px; border-top:3px solid #00cccc;border-bottom:3px solid #00cccc;text-transform:uppercasce; letter-spacing:5px; font-size:20px; line-height:22px; font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; color:#000; text-transform:uppercase;} #sidebartext {position:absolute;display:block;float:left;padding:20px 0px 0px 0px;margin-left:0;margin-top:10px;z-index:1000; font-size:30px;line-height:20px;font-style:normal;font-weight:100;text-transform:capitalize;color:#00cccc;} #products {margin:0px;padding:0px 0px 50px 240px;display:table-cell; position:relative;} #products a {float:left;width:172px;height:340px;margin-left:10px;padding:2px;display:inline-block;overflow:hidden;} #products img{width:166px; height:235px; border:1px solid #fff;padding:2px;margin:0px;} #products img:hover{cursor:pointer;} #products h2, #products h3 {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;color:#333;text-transform:capitalize;text-align:center;} #products h2 {height:38px;width:166px;display:inline-block;margin:5px 0px 0px 0px;} #products h3 {color:#666;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;font-weight:400;margin:5px 0px 10px 0px;} #products span {color:#000;text-transform:lowercase;text-decoration:line-through;} .newproduct {background:url(../images/icon_newproduct.png) no-repeat;width:76px;height:76px!important;margin:165px 0px 0px 97px;display:block;float:left;position:absolute;z-index:1000000;} .viewdetails {background:#00cccc;width:100px;height:20px!important;margin:110px 0px 0px 37px;display:block;float:left;position:absolute;z-index:1000000; color:#FFF; text-transform:uppercase; line-height:20px; text-align:center; font-size:10px;opacity:0.0;-moz-opacity:0.0;filter:alpha(opacity=0);} /*------------------------------------------------- Product Details -------------------------------------------------*/ #productinfo{position:absolute;float:left;width:460px;height:620px;padding:0px;margin:0px 0px 0px 490px;overflow:hidden;z-index:110!important;} #details, #yourorder {margin-bottom:20px;display:block;} #productinfo h2 {font-size:20px;line-height:20px;color:#333;font-style:normal;font-weight:normal;text-transform:capitalize;height:20px;width:460px;display:inline-block;margin:5px 0px 30px 0px;color:#00cccc;} #accordionwrapper {display:block;height:374px; margin:0px; padding:0px; } #accordion {margin-top:0px;z-index:130;} #accordion h5 {vertical-align:top;margin:0px;padding:3px 0px;border-top:1px solid #DCDCDC;-webkit-appearance: none; -webkit-border-radius: 0; outline: none;} /* accordian titles */ #accordion h5 em, h4 em, h4 span {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;line-height:12px;font-weight:600;text-transform:uppercase;display:block; background:#F7F7F7; padding: 6px; color:#00cccc;} #accordion div {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;line-height:12px;line-height:18px;color:#000;margin:10px 0px;} #accordion div table {border:1px solid #CCC;padding:1px; width:430px;} #accordion div table th {width:90px;white-space:nowrap;text-align:center;border-bottom:1px solid #CCC;padding:1px;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:600;} #accordion div td {width:70px;white-space:nowrap;text-align:center;padding:3px;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;} #accordion div p {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;line-height:16px;} h4 {margin:20px 0px 15px 0px;padding:3px 0px;border-top:1px solid #DCDCDC;border-bottom:1px solid #DCDCDC;} #size {overflow:hidden;margin:0px;padding:10px 0px;height:160px!important;width:470px;} #productinfo p {font-size:12px;line-height:13px;margin-bottom:15px} #productinfo #price{margin:15px 0px 10px 0px;display:inline-block;width:350px;height:30px;width:500px;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;} #productinfo #price p{font-size:16px;color:#333;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;} #productinfo #price em{font-size:16px;color:#0d58a8;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;} #productinfo #price span {font-size:16px;display:inline-block; text-decoration:line-through;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;} #multibuy{margin:15px 0px 10px 0px;display:inline-block;color:#00cccc;margin-left:50px;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:10px;} .webexclusiveimage {background:url(../images/icon_web_exclusive.png) no-repeat;width:76px;height:76px!important;margin:424px 0px 0px 284px;display:block;float:left;position:absolute;z-index:140;} #MagicZoom {position:absolute;float:left;display:block;width:1000px;height:620px;padding:0px;margin:0px;overflow:hidden;_z-index:115!important;*_z-index:115!important;z-index:115\9!important;} .MagicZoom img {border:0px !important;padding:0px 10px 0px 10px !important;margin:0 !important;position:relative;z-index:120!important;} .MagicZoomHint { background:url(../images/hint.gif) no-repeat 10px 2px;padding:2px 2px 2px 30px !important;min-height:24px;margin:0;display:none;} .MagicZoomPup { border:1px solid #00cccc;background:#faf4ff;cursor:move;z-index:150!important;} .MagicZoomLoading { border:1px solid #ccc;background:#fff url(../images/loader.gif) no-repeat 2px 50%;padding:4px 4px 4px 24px !important;margin:0;} .MagicZoomBigImageCont{position:absolute;float:left;width:470px!important;height:600px!important;margin:0px 0px 0px 110px!important;background:#FFF;border:1px solid #00cccc;padding:2px;z-index:120!important;} #MagicZoomAltImages { width:365px;height:100px;margin:10px 0px 20px 0px;display:block;position:relative;overflow:hidden;z-index:110;text-align:center;} #MagicZoomAltImages img{width:64px;border:1px solid #fff;padding:2px;margin:0px 9px;display:inline-block;} #MagicZoomAltImages img:hover{cursor:pointer;border:1px solid #00cccc;} /*------------------------------------------------- Wear It With -------------------------------------------------*/ #wearitwith {position:relative;display:block;width:1000px;text-align:center;height:300px;margin-bottom:50px;} #wearitwith a{width:250px;margin: 0px;display:block; float:left; text-align:center;} #wearitwith img{width:172px;border:1px solid #fff;padding:2px;margin:0px auto;display:block;} #wearitwith img:hover{cursor:pointer;border:1px solid #00cccc;} #wearitwith h3 { font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;line-height:15px;color:#333;text-transform:capitalize;text-align:center;font-weight:400; vertical-align:top; width:200px;display:block;width:230px; height:29px; overflow:hidden; margin:5px auto;border:none;} #wearitwith h4 em {text-align:center;} /*------------------------------------------------- Company Pages -------------------------------------------------*/ /* top right bottom left */ #body {margin:20px 0px 0px 220px;padding:0px;padding:0px 0px 50px 0px;display:block; position:relative; } #body p {line-height:16px;font-size:13px;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;} #pageindex {padding:0px;display:block;position:relative;overflow:hidden;list-style:none;margin-bottom:30px;} #pageindex li { padding:5px 6px;margin-left:0px;border-top:1px solid #DCDCDC;} #pageindex li:last-child {border-bottom:1px solid #DCDCDC;} #pageindex li a {color:#00cccc; font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;} .col {width:330px; margin:0px 40px 40px 0px; float:left; display:inline-block; text-align:top;} .col table {border:1px solid #CCC;padding:1px;width:330px;} .col table th {width:90px;white-space:nowrap;text-align:center;border-bottom:1px solid #CCC;padding:1px!important;font-size:12px!important;line-height:16px;color:#333;font-style:normal;font-weight:normal;text-transform:capitalize;} .col td {width:90px;white-space:nowrap;text-align:center;padding:1px!important;font-size:12px!important;line-height:16px;} .size table {border:1px solid #CCC;padding:1px;width:780px!important;} .size table th {width:90px;white-space:nowrap;text-align:center;border-bottom:1px solid #CCC;border-right:1px solid #CCC;padding:1px!important;font-size:12px!important;line-height:20px;color:#333;font-style:normal;font-weight:bold;text-transform:capitalize;} .size td {width:90px;white-space:nowrap;text-align:center;border-bottom:1px solid #CCC;padding:1px!important;font-size:12px!important;line-height:16px;} #publications {margin:20px 0px 0px 0px;padding:0px;} #publications a {float:left;width:px;height:164px;margin:0px 20px 20px 0px;display:inline-block;overflow:hidden; background:url(../images/publications_on.png) no-repeat; } #publications a:last-child {margin-right:0px;} #publications img{width:239px; height:134px;} #publications h2 {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;color:#333;font-style:normal;font-weight:normal;text-transform:capitalize;text-align:center;margin:5px 0px 0px 0px;} h1 {font-size:20px;line-height:20px;font-style:normal;font-weight:normal;text-transform:uppercase;height:20px;display:block;margin:45px 0px 25px 0px;color:#00cccc;} h1:first-child{margin-top:5px!important;} h2 {font-size:16px;line-height:16px;font-style:normal;font-weight:normal;text-transform:capitalize;display:block;margin:20px 0px 10px 0px;color:#00cccc;} h3 {display:block;font-size:13px;line-height:24px;font-style:normal;font-weight:bold;text-transform:capitalize;color:#000;} p {line-height:18px;font-size:12px;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;margin-bottom:10px;color:#000;} a {line-height:18px;font-size:12px;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;} .message {color:#900;} /*------------------------------------------------- Shopping Bag My Account -------------------------------------------------*/ #myaccount {padding-bottom:50px;} #myaccount th, #checkout th, #signup th {margin:25px 0px 15px 0px;padding:3px 0px;border-top:1px solid #DCDCDC;border-bottom:1px solid #DCDCDC;} #myaccount th span, #checkout th span, #signup th span {display:inline-block; width:100%; background:#F7F7F7; margin:0px; padding: 6px 0px; color:#00cccc; font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase; text-align:left; } #myaccount td{vertical-align:top;padding:2px;border-bottom:1px solid #DCDCDC; white-space:normal; font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;} #myaccount td em{font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#00cccc; font-weight:400; font-size:14px;} span small input {width:10px; margin-left:10px;} span small {color:#000!important; font-size: 10px; text-transform:uppercase; display:inline-block;} #myaccount .tabletotal{padding:3px 3px 0px 3px;border:none!important;font-weight:600; font-size:12px} .registrationradiobutton {width:20px; display:inline-block; background:#c3cdd5;border:#333 1px solid;} /*------------------------------------------------- Private Client details confirm -------------------------------------------------*/ #privateclients{margin:0px auto;padding:20px;width:450px;min-height:555px;border:1px solid #ccc;opacity:0;filter:alpha(opacity=0);} #popuplogo {background:url(../images/karmar_logo_small.jpg) no-repeat top left;width:250px;height:33px;display:block;margin:10px auto 20px auto;} #popupnav {height:20px;width:400px;margin:20px auto 40px auto;text-align:center;display:block;border-top:4px solid #00cccc;} #popupnav a{text-align:center;display:inline-block;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;font-weight:400;text-transform:uppercase;text-decoration:none;color:#333;padding:4px 8px 4px 8px;} #privateclients p, #privateclients .error, #privateclients .message {font-size:12px;color:#000;margin:0px 0px 3px 0px;padding:0px;} #privateclients .error ul, #privateclients .message {list-style:none;color:#C00;margin-top:5px;} #privateclients .formlabel, #privateclients .formfield {display:inline-block;font-size:12px;color:#00cccc;margin:0px;padding:0px;} #privateclients .formlabel {width:100px;} #privateclients input{width:330px;border:#ccc 1px solid;padding-left:5px;} #privateclients .registrationdroplist {width:338px;} #privateclients .registrationradiobutton {width:20px;} #privateclients h3 {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;text-decoration:none;color:#00cccc;padding:8px 0px 0px 0px;} #privateclients p {padding-bottom:8px;line-height:14px;} #newweb{width:77px;height:77px;display:block;position:absolute;bottom:25px;right:25px;background:url(../images/new_website.png);} /*------------------------------------------------- Admin -------------------------------------------------*/ #admin th{height:20px;margin:0px;padding:2px 5px;border-top:1px solid #00cccc;border-bottom:1px solid #00cccc;color:#00cccc;text-transform:uppercase;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;} .adminsearch {border:1px dotted #00cccc;} .adminsearch .buttonwrap {margin-top:-2px;} #admin td {vertical-align:top;padding:3px 5px;white-space:normal;font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;} #admin td img{display:inline;border:dotted 1px #00cccc;padding:2px;margin-bottom:-4px;} #admin p {font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12px;} .rows td {border-bottom:dotted 1px #ccc;} .textfield, .registrationformfield {width:106px;margin-right:2px;} .droplist, .registrationdroplist, .adminsearchdroplist, .creditcarddroplist {width:110px;height:22px;margin-right:2px;margin-top:-2px; font-size:12;text-transform:capitalize;} .registrationdroplist {width:204px;margin:0px;} .registrationformfield {width:200px;margin:0px;} .admintextarea {height:60px;width:200px;margin:0px;} .adminsearchdroplist {width:200px;float:left;position:relative;display:inline-block;vertical-align:top;margin:0px;padding:0px;} .creditcarddroplist {width:99px;margin:0px;} .adminsearchradio {width:15px;font-size:10px;} .adminfile {border:0px;background:none;} /*------------------------------------------------- As Modal -------------------------------------------------*/ .emailproduct { position:relative; background:#fff; width:480px; height:50px; padding:20px;} .modal-container { position: fixed; top: 0; left: 0; z-index: 10001; display: block; width: 100%; height: 100%; text-align: center; } .modal-container:before { display: inline-block; height: 100%; margin-right: -.25em; vertical-align: middle; content: "";/* Adjusts for spacing */ /* For visualization background: #808080; width: 5px; */ } .modal-contentWrap { position: relative; z-index: 505; display: inline-block; max-width: 100%; margin: 0 auto; text-align: left; vertical-align: middle; } .modal-overlay { position: fixed; top: 0; left: 0; z-index: 10000; display: none; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); opacity: 0; } .modal_error { border: 1px solid green; } .modal-container { display: none; } .modal_open { display: block !important; } .modal_animateActive { visibility: visible; } /* fadeScale: Fade in and scale up */ .modal_fadeScale .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); } .modal_animateActive.modal_fadeScale .modal-content { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* slideRight: Slide from the right */ .modal_slideRight .modal-content { opacity: 0; -webkit-transition: all .3s cubic-bezier(.25, .5, .5, .9); transition: all .3s cubic-bezier(.25, .5, .5, .9); -webkit-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); } .modal_animateActive.modal_slideRight .modal-content { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* slideBottom: Slide from the bottom */ .modal_slideBottom .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); } .modal_animateActive.modal_slideBottom .modal-content { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* newspaper: Newspaper */ .modal_newspaper .modal-content { opacity: 0; -webkit-transform: scale(0) rotate(720deg); -ms-transform: scale(0) rotate(720deg); transform: scale(0) rotate(720deg); } .modal_animateActive.modal_newspaper ~ .modal-overlay, .modal_newspaper .modal-content { -webkit-transition: all .5s; transition: all .5s; } .modal_animateActive.modal_newspaper .modal-content { opacity: 1; -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } /* fall: fall */ .modal_fall.modal-modal { -webkit-perspective: 1300px; perspective: 1300px; } .modal_fall .modal-content { opacity: 0; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; -ms-transform: translateZ(600px) rotateX(20deg); -webkit-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .modal_animateActive.modal_fall .modal-content { opacity: 1; -webkit-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); } /* slideFall: side fall */ .modal_slideFall.modal-modal { -webkit-perspective: 1300px; perspective: 1300px; } .modal_slideFall .modal-content { opacity: 0; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); transform: translate(30%) translateZ(600px) rotate(10deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .modal_animateActive.modal_slideFall .modal-content { opacity: 1; -webkit-transform: translate(0%) translateZ(0) rotate(0deg); transform: translate(0%) translateZ(0) rotate(0deg); } /* slideTop: slide and stick to top */ .modal_slideTop { top: 0;/* here fix position issue */ /*transform: translateX(-50%);*/ } .modal_slideTop .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } .modal_animateActive.modal_slideTop .modal-content { border-radius: 0 0 3px 3px; opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } /* flipHorizontal: 3D flip horizontal */ .modal_flipHorizontal.modal-modal { -webkit-perspective: 1300px; perspective: 1300px; } .modal_flipHorizontal .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .modal_animateActive.modal_flipHorizontal .modal-content { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } /* flipVertical: 3D flip vertical */ .modal_flipVertical.modal-modal { -webkit-perspective: 1300px; perspective: 1300px; } .modal_flipVertical .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .modal_animateActive.modal_flipVertical .modal-content { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } /* sign: 3D sign */ .modal_sign.modal-modal { -webkit-perspective: 1300px; perspective: 1300px; } .modal_sign .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .modal_animateActive.modal_sign .modal-content { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } /* superScaled: Super scaled */ .modal_superScaled .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } .modal_animateActive.modal_superScaled .modal-content { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* rotateBottom: 3D Rotate from bottom */ .modal_rotateBottom.modal-modal { -webkit-perspective: 1300px; perspective: 1300px; } .modal_rotateBottom .modal-content { opacity: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .modal_animateActive.modal_rotateBottom .modal-content { opacity: 1; -webkit-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); } /* rotateLeft: 3D Rotate in from left */ .modal_rotateLeft.modal-modal { -webkit-perspective: 1300px; perspective: 1300px; } .modal_rotateLeft .modal-content { opacity: 0; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .modal_animateActive.modal_rotateLeft .modal-content { opacity: 1; -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); } /* blur: Blur */ .modal_animateActive.modal_blur ~ .modal-overlay { background: rgba(180, 46, 32, .5); } .modal_animateActive.modal_blur ~ .container { -webkit-filter: blur(3px); filter: blur(3px); } .modal_blur .modal-content { opacity: 0; -webkit-transform: translateY(-5%); -ms-transform: translateY(-5%); transform: translateY(-5%); } .modal_animateActive.modal_blur ~ .container, .modal_blur .modal-content { -webkit-transition: all .3s; transition: all .3s; } .modal_animateActive.modal_blur .modal-content { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }