/************/
/*  GLOBAL  */
/************/

/* NON-HEADER */ 
.page-container,body{background-color:#fff}
.footer,.page-container{font-size:1em;width:100%}
.footer,.main,.main-content{width:100%}
.footer,.header{position:relative}
.footer,.header-middle,.main-content,.main-navigation{overflow:visible!important}*{padding:0;margin:0}body{padding:0 10px;font-size:62.5%;font-family:Muli,arial,helvetica,sans-serif}
.page-container{max-width:1200px;margin:10px auto;border:1px solid #969696}
.menu-mobile{display:none}
.main{clear:both;padding-bottom:0;background:0 0}
.main-navigation{display:table-cell;vertical-align:top;background-color:#fff;border-left:1px solid #ddd;border-right:1px solid #ddd}
.main-content{display:table;margin:0;padding:0;border:0}
.footer{clear:both;padding:10px 0 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#f7f7f7}
.header{margin:0}
.header-top{width:inherit}
.header-middle{display:none;width:100%;height:150px}
.header-bottom{width:auto;background:#fff}
.header-breadcrumbs{display:none;clear:both;max-width:900px;width:100%;height:2px;background:url(../img/bg_main_withoutnav.jpg) repeat-y}
.banner-fixed-source img,.logo_mobile_div img{animation:1s logo_anim}

@keyframes logo_anim {
    from {opacity: 0.5; transform: scale(0.75); }
    to {opacity:1; transform: scale(1);}
}

/********************/
/*  HEADER SECTION  */
/********************/
.sitelogo{width:60px;height:40px;position:absolute;z-index:1;margin:22px 0 0 20px;background:url(../img/bg_head_top_logo.jpg)}

.sitename{width:300px;height:45px;position:absolute;z-index:1;margin:20px 0 0 90px;overflow:visible!important}
.sitename h1{font-size:240%}
.sitename h2{margin:-4px 0 0;color:#7d7d7d;font-size:120%}
.sitename a{text-decoration:none;color:#7d7d7d}
.sitename a:hover{text-decoration:none;color:#323232}

.nav1 ul li,.nav1 ul li.button{list-style:none;z-index:auto!important;float:left}
.nav1 ul li a,.nav1 ul li a:hover{text-decoration:none}
.nav1{width:100%;height:inherit;position:absolute;z-index:3;margin:0}
.nav1 table{width:inherit;height:inherit;padding:0}
.nav1 ul{float:left;font-weight:400}
.nav1 ul li.button{position:relative;padding:0 5px;min-width:60px}
.nav1 ul li a{padding:0 5px 0 15px;color:#ddd;font-size:120%;line-height:32px}
.nav1 ul li ul{box-shadow:10px 10px 15px rgba(92,128,128,.5);display:none}
.nav1 ul li ul li{width:180px;border-bottom:1px solid #d1d1d1}
.nav1 ul li ul li:last-child{border-bottom:0}
.nav1 ul li ul li a{border-left:2px solid #acc}
.nav1 ul .tel-text a{float:left;padding:0 3px 0 25px;background:url(../img/website/tel2.png) 3px 5px/auto 19px no-repeat}
.nav1 ul .shoppingcart a{float:left;padding:0 10px 0 30px;background:url(../img/cart/shoppingcart5.png) 3px 6px/auto 18px no-repeat}
.nav1 ul .trackorder a{float:left;padding:0 10px}
.nav1 ul li span.nav1text{display:block;float:left;padding:2px 5px;color:#000;font-size:120%}
.nav1 ul li:hover{background-color:rgba(0,250,250,.2)}
.nav1 ul li:hover ul{display:block;position:absolute;z-index:999;top:31px;left:0}
.nav1 ul li:hover ul li a{display:block;height:auto;line-height:27px;margin-left:0;padding:4px 16px;background-color:#f7f7f7;font-weight:400;color:#323232}
.nav1 ul li ul li a:hover{background-color:#f7ffff;text-decoration:none;border-left-color:#01aca7}

/* For mobile formatting */
.more-td {width:19%;}
.tel-td {width:25%; text-align:left;}
.fb-td1 {width:35%; text-align:center;}
.cart-td {width:15%; text-align:right; }

.bigPicBtn_w2:hover,.bigPicBtn_w2:hover .lightbar_btn{-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s}
.bigPicBtn_w2{position:relative;width:48%;float:left;margin-top:5px;margin-right:2%}
.bigPicBtn_w2:hover{opacity:1;filter:contrast(115%);transition:.4s}
.bigPicBtn_w2:hover .lightbar_btn{background-color:#37b;transition:.4s}
.bigPicBtn_w2:active .lightbar_btn{background-color:#4cd}
.bigPicBtn_w2:hover .shade_btn{background-color:#37b;opacity:0;-webkit-transition:.4s;-moz-transition:.4s;-o-transition:.4s;transition:.4s}                  
.lightbar_btn,.shade_btn{position:absolute;left:0;top:0;width:100%}
.shade_btn{height:100%}

.style-brief-description { font-size:130%; padding-left:10px; padding-top:2px; color:#007;}
.genders {padding-left:10px;} .genders p {display:inline; padding-top:2px; } 
.style-price {padding-left:10px;} .style-price p {display:inline; color:#22B }
.cell-vert-mid {display:table-cell; vertical-align:middle;}

.style-arrow-text{position:absolute; right:3px; bottom:30px; width:50px; color:#567; text-align:right;}

.bigbuttonstyle{border:0px solid blue; width:24%; min-width:150px; float:left; margin:2px 0.5%; background-color:#def;}
.bigbuttonimagediv {opacity:1; min-height:100px;}
.bigbuttonstyle:hover .bigbuttonimagediv {opacity:1; filter:contrast(115%); -webkit-transition:400ms ease;
            -moz-transition:400ms ease;
            -o-transition:400ms ease;            
             transition:400ms ease;}

.shadebutton {position:absolute; left:0; top:0; width:100%; height:100%; }
.bigbuttonstyle:hover .shadebutton {background-color:#37b; opacity:0.0; /* setting it to 0 with transition creates a cool effect while it goes back to 0 opacity */
                                    -webkit-transition:400ms ease;
                                       -moz-transition:400ms ease;
                                         -o-transition:400ms ease;            
                                            transition:400ms ease; }
                                            
.bigbuttonstyle:hover .highlightbar {background-color:#37b; 
                                    -webkit-transition:200ms ease;
                                       -moz-transition:200ms ease;
                                         -o-transition:200ms ease;            
                                            transition:200ms ease;}

.bigbuttonstyle:active .highlightbar {background-color:#4cd; }

.style-brief-description-new {font-size:120%;}
.genders-new {font-size:110%;} 
.style-price-new {color:#449; font-size:120%;}
.cell-vert-mid-new {display:table-cell; border:0px solid green; text-align:center; position:absolute; width:100%; font-size:1.5em; color:#555;}

.rings-layout-scroll-wrap2{overflow:hidden}
.rings-layout-scroll-wrap3{overflow:hidden}


@media screen and (max-width:950px){.bigbuttonstyle{width:32%}}
@media screen and (max-width:785px){.main-content{padding:0}.cell-vert-mid-new{font-size:1.3em}}
@media screen and (max-width:700px){.cell-vert-mid-new{font-size:1.2em}}
@media screen and (max-width:625px){.cell-vert-mid-new{font-size:1.1em}}
@media screen and (max-width:575px){.cell-vert-mid-new{font-size:1em}}
@media screen and (max-width:550px){.main-content{padding:0}.bigbuttonstyle{width:48%}.cell-vert-mid-new{font-size:1.4em}}
@media screen and (max-width:500px){.cell-vert-mid-new{font-size:1.3em}}
@media screen and (max-width:450px){.cell-vert-mid-new{font-size:1.2em}}
@media screen and (max-width:425px){.cell-vert-mid-new{font-size:1.1em}}
@media screen and (max-width:400px){.cell-vert-mid-new{font-size:1em}}
@media screen and (max-width:375px){.cell-vert-mid-new{font-size:1em}}
@media screen and (max-width:360px){.main-content{padding:0}}
@media screen and (max-width:350px){.cell-vert-mid-new{font-size:.9em}}
@media screen and (max-width:325px){.bigbuttonstyle{width:98%}.cell-vert-mid-new{font-size:1.5em}}

.sitemessage {width:400px; height:120px; position:absolute; z-index:1; margin:20px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important; /*Activate if Firefox print problems*/ overflow:hidden /*IE6*/;}
.sitemessage h1 {width:400px; text-align:right; font-size:230%;}
.sitemessage h2 {float:right; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;}
.sitemessage h3 {float:right; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;}
.sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);}
.sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);}

.nav2 ul li ul li a,.nav2 ul.home li a{height:33px;line-height:33px}
.nav2,.nav2 ul.gallery li{width:100%}
.nav2 ul li,.nav2 ul.gallery li,.nav2 ul.home li{float:left;position:relative;z-index:auto!important}
.nav2 ul li a,.nav2 ul.gallery li a,.nav2 ul.home li a{float:none!important;display:block;text-decoration:none}
.nav2 ul li a,.nav2 ul li ul li a:hover,.nav2 ul li:hover>a,.nav2 ul.home li a{text-decoration:none}
.nav2{float:left;font-size:150%;border-top:1px solid #fff;border-right:1px solid #fff}
.nav2 a{color:#555;border-left:1px solid #fff;border-bottom:1px solid #fff}
.nav2 ul,.nav2 ul.gallery,.nav2 ul.home{list-style-type:none}
.nav2 ul li{width:auto;min-width:25%;text-align:center}
.nav2 ul li a{height:40px;line-height:40px}
.nav2 ul li ul{display:none;margin-top:35px;height:auto;visibility:collapse;width:176px;border:0 solid #acc;box-shadow:10px 10px 15px rgba(92,128,128,.5)}
.nav2 ul li ul li{background-color:#f8f8f8}
.nav2:hover,.nav2:hover li{border-color:#e1e1e1}
.nav2:hover a{border-left:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1}
.nav2 a:hover{color:#009}
.nav2 ul li:hover>a{background-color:#f2f2f2;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s}
.nav2 ul li:hover>ul{display:block;visibility:visible;position:absolute;z-index:999;top:0;left:50px;background-size:175px 19px;padding-bottom:0}
.nav2 ul li:hover ul li a{display:block;width:175px;margin-left:-1px;border-left:2px solid #acc;border-bottom:0 solid #d8d8d8}
.nav2 ul li:hover ul li{border-bottom:1px solid #d8d8d8}
.nav2 ul li:hover ul li:first-child{border-top:1px solid #d8d8d8}
.nav2 ul li ul li:hover>a{background-color:#f7ffff;border-left-color:#01aca7}
.nav2 div.home{width:9.75%;display:inline;float:left}
.nav2 div.middle{width:80%;display:inline;float:left}
.nav2 div.track{width:20%;display:inline;float:left}
.nav2 ul.home li a{text-align:center;font-weight:700;color:#646464}
.nav2 ul.gallery li a{text-align:center;height:40px;line-height:40px}


/* --- For alternative headers END PASTE here --- */

/******************/
/*  MAIN SECTION  */
/******************/

/* MAIN NAVIGATION */
.main-navigation .round-border-topright {width:10px; height:10px; position:absolute; z-index:10; margin:0 0 0 190px; background:url(../img/bg_corner_topright.gif) no-repeat;}

/* MAIN CONTENT */
.column1-unit { margin-left:10px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column2-unit-left {float:left; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column2-unit-right {float:right; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column3-unit-left {float:left; width:186px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/}
.column3-unit-middle {float:left; width:186px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:40px;}
.column3-unit-right {float:right; width:186px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}

/********************/
/*  FOOTER SECTION  */
/********************/
.footer p {line-height:1.3em; text-align:center; color:#228; font-weight:normal; font-size:110%;}
.footer p.credits {font-weight:normal;}
.footer a {text-decoration:underline; color:#008; font-weight:normal;}
.footer a:hover {text-decoration:none; color:#008; font-weight:normal;}
.footer a:visited {color:#008;}

.footer-center {min-width:50%;}
.footer-left {min-width:25%;}
.footer-right{min-width:18%} /* full 100% total not supported by Safary */
.addthisdiv { float:right; padding-top:5px; padding-right:7px;}
.sslgodaddydiv {}

/******************/
/*  CLEAR FLOATS  */
/******************/
.page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-navigation:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear-contentunit {clear:both; width:640px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);}

/********************************/
/*  PRINTING and MISCELLANEOUS  */
/********************************/
@media print {.header-top {width:900px; height:80px; background:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}}
@media print {.header-middle {display:none;}}
@media print {.header-bottom {display:none;}}
@media print {.header-breadcrumbs {width:900px; background:transparent;}}
@media print {.nav2 {float:left; width:900px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}} /*Color navigation bar normal mode*/
@media print {.main {clear:both; width:900px; padding-bottom:30px; background:transparent;}}
@media print {.main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:199px; border-right:solid 1px rgb(200,200,200); border-bottom:solid 1px rgb(200,200,200); background-color:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE*/;}}
@media print {.footer {clear:both; width:900px; height:3.7em; padding:1.1em 0 0; background:rgb(240,240,240); font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}}

/******************/
/*  MAIN SECTION  */
/******************/
@
/* MAIN NAVIGATION */
.nav3-grid{width:199px;border-bottom:1px solid #c8c8c8}
.nav3-grid dt a,
.nav3-grid dt a:visited{display:block;min-height:2em;height:auto!important;line-height:2em;padding:0 10px 0 20px;border-top:1px solid #c8c8c8;text-decoration:none;color:#467aa7;font-weight:700;font-size:120%}
.nav3-grid dd a,.nav3-grid dd a:visited{display:block;min-height:1.7em;height:auto!important;line-height:1.7em;padding:0 10px 0 40px;border:none;font-weight:400;text-decoration:none;color:#467aa7;font-size:120%}
.nav3-bullet dd a,.nav3-bullet dd a:visited,.nav3-bullet dt a,.nav3-bullet dt a:visited{line-height:1.7em;padding:0 0 0 10px;text-decoration:none;font-weight:400;font-size:120%}
.nav3-grid dd a:hover,.nav3-grid dt a:hover{background-color:#e1e1e1;color:#2a5a8a;text-decoration:none}
.nav3-bullet,.nav3-nobullet{width:170px;margin:10px 0 0 20px}
.nav3-bullet dt a,.nav3-bullet dt a:visited{background:url(../img/bg_bullet_full_1.gif) 0 50% no-repeat;color:#008}
.nav3-bullet dd a,.nav3-bullet dd a:visited{margin:0 0 0 15px;background:url(../img/bg_bullet_half_1.gif) 0 50% no-repeat;color:#467aa7}
.nav3-bullet dt a:hover{background:url(../img/bg_bullet_full_2.gif) 0 50% no-repeat;text-decoration:underline;color:#008}
.nav3-bullet dd a:hover{background:url(../img/bg_bullet_half_2.gif) 0 50% no-repeat;text-decoration:underline;color:#2a5a8a}.navL-bullet dt a{font-size:12px}.navL-bullet dt a:hover{text-decoration:none}.navL-bullet dt a div{line-height:20px;padding-left:30px;background:url(../img/bg_bullet_full_1.gif) 20px center no-repeat}.navL-bullet dt a div:hover{background:url(../img/bg_bullet_full_2.gif) 20px center no-repeat #c9dae0}
.nav3-nobullet dt a,.nav3-nobullet dt a:visited{line-height:2em;text-decoration:none;color:#467aa7;font-weight:700;font-size:120%}
.nav3-nobullet dd a,.nav3-nobullet dd a:visited{line-height:1.7em;margin:0 0 0 15px;text-decoration:none;color:#467aa7;font-weight:400;font-size:120%}
.nav3-nobullet dd a:hover,.nav3-nobullet dt a:hover{text-decoration:underline;color:#2a5a8a}

.main-navigation .loginform {width:160px; margin:-10px 20px 0 20px;}
.main-navigation .loginform p {clear:both; margin:0; padding:0;}
.main-navigation .loginform fieldset {width:160px; border:none;}
.main-navigation .loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;}
.main-navigation .loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/ font-size:110%;}
.main-navigation .loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-size:110%;}
.main-navigation .loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
.main-navigation .loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; color:rgb(150,150,150); font-size:110%;}
.main-navigation .loginform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

.main-navigation .searchform {width:160px; margin:0 20px 0 20px;}
.main-navigation .searchform fieldset {border:none;}
.main-navigation .searchform input.field {float:left; width:158px; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:1px solid rgb(200,200,200); font-size:120%;}
.main-navigation .searchform input.button {float:left; width:3.0em; margin-top: 0.5em; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; color:rgb(150,150,150); font-size:120%;}
.main-navigation .searchform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

.main-navigation h1.first {clear:both; margin:0px; padding:4px; text-align:center; background: rgb(35,42,59); color:rgb(255,255,255); font-weight:bold; font-size:150%;}
.main-navigation h1 {clear:both; margin:30px 0 20px 0; padding:4px 20px 3px 20px; background:rgb(190,190,190); color:rgb(255,255,255); font-weight:bold; font-size:150%;}

.main-navigation h2 {clear:both; width:188px; padding:10px 0px 5px 0px; color:rgb(100,100,100); font-weight:bold; font-size:150%;}
.main-navigation h2 a.subtitle {color:rgb(75,75,75); font-weight:bold;}
.main-navigation h2 a.subtitle div {padding-left:20px; line-height:25px;}
.main-navigation h2 a:hover div {background-color:#ddd;}

.main-navigation h3 {clear:both; margin:10px 10px 5px 20px; color:rgb(80,80,80); font-weight:bold; font-size:110%;} /* Note: h2 not existent, to make identical to formats for main-navigation for easier exchange */
.main-navigation p {clear:both; margin:0 10px 10px 20px; color:rgb(80,80,80); line-height:1.3em; font-size:110%;}
.main-navigation p.center {text-align:center;}
.main-navigation p.right {text-align:right;}

.main-navigation ul {list-style:none; margin:0.5em 10px 1.0em 20px;}
.main-navigation ul li {margin:5px 0 0.2em 2px; padding:0px 0px 0 11px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.4em; line-height:1.2em; font-size:110%;}
.main-navigation ol {margin:0.5em 10px 1.0em 40px !important /*Non-IE6*/; margin:0.5em 10px 1.0em 45px /*IE6*/;}
.main-navigation ol li {list-style-position:outside; margin:0 0 0.4em 0; font-size:110%;}

/* MAIN CONTENT */
.main-content h1.pagetitle {margin:0.5em 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); color:rgb(100,100,100); font-weight:bold; font-size:220%;}
.main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190);  color:rgb(255,255,255); font-weight:bold; font-size:220%;}
.main-content h1 {clear:both; margin:1.0em 0 0.5em 0; color:rgb(80,80,80); font-weight:normal; font-size:210%;}
.main-content h2 {clear:both; margin:1.0em 0 0.5em 0; color:rgb(80,80,80); font-weight:normal; font-size:170%;}
.main-content h3 {clear:both; margin:-1.0em 0 0.5em 0; color:rgb(125,125,125); font-weight:normal; font-size:130%;}
.main-content h1.side {clear:none;}
.main-content h2.side {clear:none;}
.main-content h3.side {clear:none;}

.main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-weight:normal; font-size:170%;}
.main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-size:140%;}
.main-content h6 {margin:1.2em 0 0.2em 0; color:rgb(80,80,80); font-weight:bold; font-size:120%;}

.main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;}
.main-content p.center {text-align:center;}
.main-content p.right {text-align:right;}
.main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;}
.main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;}

.main-content table td.tabledivider {text-align:center; background-color:#354259;}

.main-content ul {list-style:none; margin:0.5em 0 1.0em 0;}
.main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;}
.main-content ol {margin:0.5em 0 1.0em 20px !important /*Non-IE6*/; margin:0.5em 0 1.0em 25px /*IE6*/;}
.main-content ol li {list-style-position:outside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;}

.main-content span.mediumtext{font-size:130%}
.main-content span.text{font-size:120%}
.main-content span.tabledividertext{font-size:120%; color:#FFFFFF}
.content-literal {min-height:100px; /*even if empty*/}
.content-literal h1 {padding-top:15px; margin:0 0 10px 0;}

.contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);}
.contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
.contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
.contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;}
.contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-size:110%;}
.contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-size:110%;}
.contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-size:110%;}
.contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; color:rgb(150,150,150); font-size:110%;}
.contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

/********************/
/*  COMMON CLASSES  */
/********************/
.main img.left {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:none;}
.main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:none;}
.main img.right {clear:both; float:right; margin:3px 0 7px 10px; padding:1px; border:none;}

.main a {color:#008; font-weight:normal; text-decoration:none;}
.main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;}
.main a:hover {color:#008; text-decoration:underline;}
.main a:visited {color:#008;}

.main a img {border:none;}
.main a:hover img {border:none;}

/********************/
/*  DUNHAM CUSTOMS  */
/********************/

/* Selectable Ring Models */

.RingModel {width:160px;}                                          
.RingModel {cursor:pointer;  margin:0 auto; padding:3px 2px 2px 1px; border:1px solid #eee; background-color:#fdfdfd;
            -webkit-transition:400ms ease;
            -moz-transition:400ms ease;
            -o-transition:400ms ease;            
             transition:400ms ease; }
.RingModel:hover {background-color:#e8e8e8; border-color:#ccc;}                     

.RingModelTitle{width:auto; height:100px; text-align:center; vertical-align:top; padding-top:5px; /*background-color:#fdfdfd;*/}
.RingModel a{font-size:120%; font-weight:bold; }
.RingModel a:hover{text-decoration:none;}
.RingModelCat{font-size:120%; color:#007;}
.RingModelPrice{font-size:120%; font-weight:bold; color:#555;}

/* RING STYLES single height*/
.main-content .ring-styles-title {height:inherit; vertical-align:bottom; display: table;}
.main-content .ring-styles-title h1 {margin:10px 0 0 0; font-size:180%; text-align:center;}
.main-content .ring-styles-title h1 a {text-decoration:none; color:rgb(35,42,59);}
.main-content .ring-styles-title h1 a:hover {color:rgb(35,42,59); text-decoration:none;}
.main-content .ring-styles-title h1 a:visited{color:rgb(35,42,59);}

.ringsTitlePanelDiv {background-position:right 80%; background-color:#fcfcfc; transition:all 0.2s;}
.ringsTitlePanelDiv:hover {background-position:97% 80%; background-color:RGBA(200,235,245,0.3); border:1px solid red; }

.main-content .ring-styles-title h3 {margin:0px 0 0 10px; text-align:left;}
.main-content .ring-styles-title h3 a {font-size:125%; text-decoration:none; color:rgb(50,50,100); font-weight:bold;}
.main-content .ring-styles-title h3 a:hover {color:rgb(50,50,150); text-decoration:none;}

/* RING SYLES 1.5 times the height*/
.main-content .ring-styles2-title {position:absolute; left:50%; width:400px; margin-left:-200px; top:50%; height:50px; margin-top:-65px;}
.main-content .ring-styles2-title h1 {margin:10px 0 0 0; font-size:180%; text-align:center;}
.main-content .ring-styles2-title h1 a {text-decoration:none; color:rgb(35,42,59);}
.main-content .ring-styles2-title h1 a:hover {color:rgb(35,42,59); text-decoration:none;}
.main-content .ring-styles2-title h1 a:visited{color:rgb(35,42,59);}

.main-content .ring-styles2-title h3 {margin:15px 0 0 0; text-align:center;}
.main-content .ring-styles2-title h3 a {font-size:125%; text-decoration:none; color:rgb(50,50,100); font-weight:bold;}
.main-content .ring-styles2-title h3 a:hover {color:rgb(50,50,150); text-decoration:none;}

.main-content .top-panel-designs-title {border:none; text-align:center; vertical-align:middle; display:table-cell; background-image:url(/img/website/arrow-down-2.png); background-repeat:no-repeat; background-position:right center; padding:0px 0 0 0;
                                        transition:all 0.2s;}
.main-content .top-panel-designs-title:hover { background-position:97% center; background-color:rgb(230,232,235);}
    
.main-content .top-panel-designs-title a {text-decoration:none; font-size:130%; font-weight:bold; color:rgb(35,42,59);}
.main-content .top-panel-designs-title a:hover {color:rgb(35,42,59); text-decoration:none;}
.main-content .top-panel-designs-title a:visited {color:rgb(35,42,59);}

/* View SHOPPING CART */
div.shopItemTitle{
	padding: 3px;
	/*font-family: Arial, Helvetica, Sans-Serif;*/
	font-size: 120%;
	color:#FFF;
	text-align:center;
}

div.shopItemDescription{
	padding: 3px;
	/*font-family: Arial, Helvetica, Sans-Serif;*/
	font-size: 120%;
}

div.shopNote{
	padding: 3px;
	/*font-family: Arial, Helvetica, Sans-Serif;*/
	font-size: 100%;
}

div.itemPrice{
	/*font-family: Arial, Helvetica, Sans-Serif;*/
	font-size: 120%;
	font-weight: bold;
}

.checkoutbtn{background-color:Transparent; border:none; width:200px; height:40px; background-position:0 -80px; cursor:pointer;}
.checkoutbtn-mouseover{background-color:Transparent; width:200px; height:40px; background-position:0 0; cursor:pointer;}

/* UPDATE PROGRESS */
.update-progress{border:solid 2px rgb(190,190,190); position:absolute; width:180px; height:65px; background-color:#FFF;}
.modal-progress{background-color:Gray;filter:alpha(opacity=70);opacity:0.7;}

/*Modal Popup*/
.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=25);
	opacity:0.25;
}

.modalPopup {
	background-color:#FFFFFF;
	border:1px solid #008;
	padding:5px;
	width:640px;
}

.panelTopRingsBtnCloseParent{float: right;}
.modalPopup .panelTopRingsBtnClose{background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;}
.modalPopup .panelTopRingsBtnCloseParent a:hover{color:Red; text-decoration:none;}

/* FORM BUTTONS */
.main .button {
	-moz-border-radius-bottomleft:2px;
	-moz-border-radius-bottomright:2px;
	-moz-border-radius-topleft:2px;
	-moz-border-radius-topright:2px;
	background:transparent url(../img/website/button_bg.png) repeat-x scroll 0 0;
	border:1px solid #C7C7C7;
	color:#3F3F3F;
	cursor:pointer;
	font-size:14px;
	font-weight:bold;
	margin:0;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
	padding: 5px 8px;
	text-decoration:none;
}

.main .button:hover {
	background:transparent url(../img/website/button_bg-over.png) repeat-x scroll 0 0;
	color:#585858;
}


/* BIG BUTTONS ON CLASS PAGES */
/* clickable */
div.clickable { position:relative; left:auto; width:212px; margin-left:0px; top:0px; height:268px; margin-top:0px;}
div.clickable h3 {color:rgb(50,50,100);  text-decoration:none;}
div.clickable h3 a {position:absolute; width:100%; height:228px; /*268-40 of padding */ padding-top:40px; top:0; left:0; /* z-index:2; /* raises anchor tag above everything else in div */
                    padding: 10 0 0 0; font-weight:bold; font-size:175%; text-decoration:none; text-align:center;
                    background-color:white; /*workaround to make clickable in IE */
}
div.clickable p {position:absolute; width:100%; height:7%; top:90px; left:0; text-decoration:none; /* Makes sure the link   doesn't get underlined */
                 z-index:2; /* raises anchor tag above everything else in div */
                 background-color:transparent; /*workaround to make clickable in IE */
                 padding: 10 0 0 0;
}

/* clickable3cs (three columns short)*/
div.clickable3cs {  position:relative; width:212px; height:230px;display:inline; float:left; }
div.clickable3cs h3 { }
div.clickable3cs h3 a { position:absolute; width:100%; height:215px; /*230-15 of padding */ padding-top:15px; /* z-index:2; /* raises anchor tag above everything else in div */
                        font-weight:bold; font-size:110%; text-align:center; background-color:white; /*workaround to make clickable in IE */ }

/* clickable3ct (three columns tall)*/
div.clickable3ct {  position:relative; width:212px; height:270px;display:inline; float:left; }
div.clickable3ct h3 { }
div.clickable3ct h3 a { position:absolute; width:100%; height:230px; /*270-40 of padding */ padding-top:40px; /* z-index:2; /* raises anchor tag above everything else in div */
                        font-weight:bold; font-size:133%; text-align:center; background-color:white; /*workaround to make clickable in IE */ }

/* clickable2c (two columns)*/
div.clickable2c {   position:relative; width:318px; height:270px; display:inline; float:left; }
div.clickable2c h3 { }
div.clickable2c h3 a {  position:absolute; width:100%; height:230px; /*270-40 of padding */ padding-top:40px; /*z-index:2; /* raises anchor tag above everything else in div */
                        font-weight:bold; font-size:175%;  text-align:center; background-color:white; /*workaround to make clickable in IE */ }

/* clickable-ch (one column)*/
div.clickable-ch {  position:relative;  width:636px; height:200px; display:inline; float:left; top:4px;} 
div.clickable-ch h3 { }
div.clickable-ch h3 a { position:absolute; width:100%; height:180px; /*200-20 of padding */ padding-top:20px; /*z-index:2; /* raises anchor tag above everything else in div */
                        font-weight:bold;  font-size:175%;  text-align:center; background-color:white; /*workaround to make clickable in IE */ }
                                                
.backtocatbtn{background-color:#179; border:none; border-radius:5px; color:#eee; font-size:16px; padding:12px 15px; background-position:0 -80px; clear:both; float:right; cursor:pointer;}
.backtocatbtn:hover{background-color:#29b;}
.backtocatbtn:active{background-color:#3bc;}
                                                
@font-face {
    font-family: college;
    src: url(/fonts/COLLEGE.ttf);
}

    .cincopa_slideshow {max-width:628px; margin-top:11px; }


@media screen and (max-width: 900px) /* 900px previous to removal/hiding of left navigation menu */
{    
    .main-content {}
    .page-container { margin-bottom:30px; }  /* for LiveChat tab at bottom */
    .main {clear:both; width:100%; padding-bottom: 10px; background:transparent; border:0px solid red;}
    .main-navigation {display:none; border:1px solid red; padding: 0 0 0 0;}   
    /*  for .main-content change inlayout1, layout2, and layout3 
        in layout2 the div floats to right while
        in layout3 the div floats to left.    */   
    .column1-unit {width:auto; margin:0 0px 0 0px; padding:0 3px 0 3px; !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}    
    .cincopa_slideshow{margin-left:12px;}
}




/* HHHHHHHHHHHHHHH */

    .anim_image_button_ch { width:16%; height:auto; position:relative; float:left; margin-right:0.5%; margin-top:5px; overflow:hidden;}
    .anim_image_ch{width:104%; height:auto; position:absolute; left:-2%; bottom:-3%; right:auto; transition: all .2s ease; -webkit-transition:all .2s ease; }    
    .anim_image_button_ch:hover .anim_image_ch {width:120%; z-index:+1; left:-10%; bottom:-7%; }  
    .highlightbar_btn {position:absolute; top:0; background-color:transparent; width:100%; height:100%;}        
    .anim_image_button_ch:active .highlightbar_btn {background-color:#2ee; opacity:0.1; }
                                  
    @media screen and (max-width: 1200px) 
    {    
        .anim_image_button_ch {width:32%; }
    } 
    @media screen and (max-width: 600px) 
    {    
        .anim_image_button_ch { width:49%;}
    }   
    
    .anim_image_button { width:32%; height:auto; position:relative; float:left; margin-left:0.65%; margin-right:0.65%; margin-top:5px; }
    .anim_image{width:75%; height:auto; position:absolute; left:12%; top:0%; right:auto; transition: all .2s ease; -webkit-transition:all .2s ease;}    
    .anim_image_button:hover .anim_image {width:90%; z-index:+1; left:5%; top:-9%; }    
        
    @media screen and (max-width: 1200px) 
    {    
        .anim_image_button { width:32%;}
    }

    .anim_image_button_10 { visibility: hidden; height:0px;}

    @media screen and (max-width: 600px) 
    {    
        .anim_image_button { width:48.6%;}
        .anim_image_button_10{ visibility:visible; height:auto;}
    }                            
    
	.anim_div {width:206px; height:158px; border:0px solid red; float:left; margin-right:5px; margin-bottom:5px;	
		padding-top:12px;			
		background-size:206px auto;
				
		background-repeat:no-repeat;
		background-color:#ccc;
	}
				
	.anim_item_div{						
		width:140px; height:111px; 			
		margin:0 auto 0 auto;
		background-position: center center;
		background-size:155px auto;
				
		border: 0px solid red;
		background-repeat:no-repeat;
		background-color:transparent;
				
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		-webkit-transition: all .2s ease;			
	}
	.anim_div:hover .anim_item_div {
		z-index:+1;
		transform:scale(1.3,1.3);

	}
			
		@media screen and (max-width: 640px) {
			.anim_div {width:160px; height:124px; border:0px solid red; float:left; margin-right:5px; margin-bottom:5px;				
				padding-top:8px;
				background-size:160px auto;
			}
				
			.anim_item_div{						
				width:118px; height:90px; 
				background-position: center center;
				background-size:122px auto;
		
			}
			.anim_div:hover .anim_item_div {

				transform:scale(1.25,1.25);
			}			

		}
			
									
/* Scroll Hints - For Sides, Centers, DBS, & Encristings*/
/*
.scroll-hint-wrap {position:relative; overflow:hidden; background-color:#b5b5b5; border:0px solid lime;}
*/
.scroll-hint-table {border:0px solid green; display:table; width:100%}
/*
.scroll-hint-content-cell {background:#fff;}

.scroll-hint-arrows-left, 
.scroll-hint-arrows-right {position:absolute; top:30px; bottom:35px; min-width:10px; background-size:10px auto; background-color:rgba(181, 181, 181, 0.3);}
.scroll-hint-arrows-left {left:0; background-image: url(../img/website/scroll_arrow_left2.png);}
.scroll-hint-arrows-right {right:0; background-image: url(../img/website/scroll_arrow_right2.png);}

@media screen and (min-width: 625px) 
{
    .scroll-hint-wrap {background-color:#fff;}  
    .scroll-hint-table {padding:0px;}  
    .scroll-hint-arrows-left, 
    .scroll-hint-arrows-right { display:none;}
}
*/

/* test for pairing ring models, like for executive style to always show side by side the model with stones and the model with no stones*/
/*
.scroll-hint-wrap {width:1005px; background-color:#DEF;}
@media screen and (max-width: 1004px) {.scroll-hint-wrap {width:670px;}}
@media screen and (max-width: 669px) {.scroll-hint-wrap {width:335px;}}
*/