/* CSS Document */
/* DD Jewellery Collection WEB STYLE SHEET DOCUMENT */
/* CREATED BY STORM APPLIED TECHNOLOGIES */

* {
  margin: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

html, body {
  height: 100%;
}

a { border:none; text-decoration:none }

h1, h2, h3, h4, h5, h6 { font-family:tahoma; }

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}

ul li { padding:0 0 15px 0; margin:0; }

/* ==================== GLOBAL CLASSES AND TAGS ============================ */

H1, H1 a:link, H1 a:hover, H1 a:visited {
  font-size: 2em;
  font-weight:normal;
  color: #F7B519;
  text-align:center;
  margin:10px 0 5px 0;
  text-align:left;
}

H2, H2 a:link, H2 a:hover, H2 a:visited {
  font-size: 1.5em;
  font-weight:normal;
  color: #A9ABAE;
  margin:10px 0 20px 0;
  text-align:center;
}

img { border:0}

body {  background:url(images/background.jpg) no-repeat center top #000000 fixed; font-family:tahoma; font-size: 100%; color:#ffffff; background-size:cover; }

/* =============== header and banner classes ============== */

#header-lines { width:100%; background:url(images/lines.png) no-repeat center top; height:99px; top:35px; position:absolute; z-index:-10 }
  .header {width:980px; margin:0 auto; height:131px; position:relative;  }
  .logo { width:238px; height:116px; position:absolute; left:62px; top:0; display:block; } 
  .payment-options { width:316px; height:31px; background:url(images/payment-icons.png) no-repeat; position:absolute; right:10px; top:3px}

#banner { width:673px; height:304px; margin:25px 0 20px 0; float:left }
#ad { width:283px; height:304; margin:25px 0 20px 10px; float:left }
  
  
/* =========== Wrapper and Content classes =============== */
  
#wrapper { width:980px; position:relative; margin:0 auto;
  min-height: 100%;
  margin-bottom: -76px;   /* equal to footer height  - for sticky footer design */
   }
   
#wrapper:after {  content: ""; display: block; height:84px; }


.white-box { display:block; border:4px solid #747474; width:449px; height:90px; font-size:0.8em; line-height:1.4em; color:#e6e6e6; float:left; padding:10px; margin:0 10px 20px 0;}
.white-box:last-child { margin-right:0; }
.white-box img { float:left; margin:0 10px 0 0; }

.white-box:hover { border:4px solid #F7B519; }



/* ======== MAIN MENU ========== */

#menu {width:675px; height:62px; margin:0; background:none; position:absolute; right:-9px; top:65px;}

#menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    right: 0;
    top: 0;
}



#menu ul li {
    display: inline-block;
    float: left;
    height: 32px;
    margin: 0;
    padding: 0;
    position: relative;
}

#menu ul li a{
  color: #ffffff;
  display: block;
  float: left;
  font-size: 13px;
  font-weight: bold;
    padding: 0 5px;
  margin: 4px 12px 0 12px;
  font-family: tahoma;
}

#menu ul li a:hover { color:#FADD61; }

.content-wrapper { 
width:980px; margin:0 auto;
clear:both; float:left;
}

.content-wrapper p { font-size:0.8em; line-height:1.4em; color:#e6e6e6; padding:0 0 20px 0;  }

.site-footer { 
  width:980px; height:76px; margin:0 auto;
  font-size:12px; font-weight:normal;
  position:relative; top:76px;
  color:#ffffff; text-align:left; font-family:tahoma; }

.site-footer  p { line-height:19px; float:left; }

.site-footer  a:first-child { margin-left: 0; }

.site-footer  a {
margin:0 10px 0 10px; color:#CCCCCC;
font-weight:bold; text-transform:uppercase; font-size:12px; }

.site-footer  a:hover { color:#ffffff; }

#logo-responsive { display:none }

.product, .frame-layout-product { 
  float:left; 
  width:313px; height:414px; 
  border:1px solid #616161; 
  margin:15px 10px 0 0;
  background:url(images/product-corner.png) no-repeat bottom right;
  font-size:14px; font-weight:bold; color:#F7B519
}
.product p, .frame-layout-product p { font-size:14px; font-weight:bold; color:#F7B519 }
.product img, .frame-layout-product img { margin-bottom:10px; }
.product form img, .frame-layout-product form img { margin-bottom:0px; margin-top:0; }


/* ====================================================================================== */
/* RESPONSIVE STYLE SHEET, PLEASE DO NOT DELETE ANY IDS AND CLASSES WITHOUT SPECIFIC REASON
/* ====================================================================================== */



@media          screen and      (min-width: 220px) and (max-width: 850px),
                screen and      (min-device-width: 480px) and (max-device-width: 850px),
                only screen and (max-device-width: 480px) and (orientation:portrait),
/* iphone 4*/   only screen and (-webkit-min-device-pixel-ratio : 1.5),   
/* iphone 5*/   only screen and (min-device-pixel-ratio : 1.5)
{
body {
  font-size: 140%;
  line-height:1.4;
}

  .payment-options {display:none;}

  .logo { margin:20px auto 30px auto; position:static; display:block; width:238px; height:auto; } 
.header { height:auto;width:99%; margin: 0 auto; }
#banner { float:none; width:99%; height:auto; margin:0 auto 25px auto; }
#banner img { width:100%; height:auto; }
#ad img { width:100%; height:auto; }
#ad { float:none; width:99%; height:auto; margin:0 auto 25px auto; }

#header-lines { display: none; }


.white-box { width:90%; height:auto; font-size:0.6em; line-height:1.2em; float:none; padding:10px; margin:0 auto 20px auto;}
.white-box:last-child { margin-right:0; }
.white-box img { float:left; margin:0 10px 0 0; }

.white-box:hover { border:4px solid #F7B519; }


#wrapper { width:98%;  
  min-height: 100%;
  margin-bottom: -76px;   /* equal to footer height  - for sticky footer design */
  border:none;
   }
   

.content-wrapper { 
width:90%; margin:0 auto;
border:none;
}

#menu {width:100%; height:auto; margin:0 0 30px 0;  position:static; background:none; float:none;}

#menu ul li {
    display: block;
    float: none;
    margin: 0;
  height:auto;
  padding:0;

  
}

#menu ul li a { height:auto;font-size:2.5em; float:none; text-align:center; display:block; border-bottom:1px dotted #cccccc;padding:0; margin:0; }

.site-footer { 
  width:99%; 
  font-size:0.6em; 
  }

} /* RESPONSIVE END */