/* fontmarks  */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #FFF200; color: #000; text-shadow: none; }
::selection { background: #FFF200; color: #000; text-shadow: none; }

a { color: #000; text-decoration:none;}
a:visited { color: #000; }
a:hover { color: #000; background: #FFFF00;}
a:focus { outline: thin dotted; background: #FFFF00;}
a:hover, a:active { background: #FFFF00;}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }





label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #FFFF00; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* template */

html {
    overflow-y: scroll;
}

body {
font-family: 'Karla', sans-serif;;
}

.container {
width: 782px;
margin: 40px auto 20px auto;
background: white;
padding: 10px;
}

.introduction .col-a {
    float: left;
    margin-right: 22px;
    width: 380px;
}

.introduction .col-b {
    float: left;
    width: 380px;
}

.introduction #signup #email { 
	border:none;background:#FFFF00;font-family:karla;
    width: 330px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.introduction #signup .btn {
    background: none repeat scroll 0 0 #000000;
    border: medium none;
    color: #FFFFFF;
    font-family: karla;
    font-size: 0.8em;
    padding: 4px 8px;
    text-transform: uppercase;
}

.footer {
border-top: 1px  #000;
margin-top: 40px;
padding-top: 10px;
text-align:center;
}

.footer p {
text-align:center;
font-size: 0.7em;
}

.footer a {
background: #ffff00;
}

.icons {
	width:100%;
	size:60%;
	text-align:center;
	margin:1em;
	float:center;
}

.container .content {
min-height: 400px;
margin-top: 16px;
padding-top: 16px;
}

/* banner */

#logo {
width: 268px;
height: 93px;
position: relative;
color: white;
font-size:0px;
left: 255px;
margin-bottom: 40px;
}

#logo span {
background: url('../img/logo.png') no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

/* typography */

h1 a {
text-decoration: none;
}
h2 {
font-size: 1.2em;
text-transform:uppercase;
font-weight: normal;
padding:0;
margin:0 0 0 0;
}

h2 span {
font-size: 0.6em;
text-transform:uppercase;
font-weight: normal;
padding:0;
margin:0 0 0 0;
}


p, li {
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.introduction a {
background: #FFFF00;
color: #000;
text-decoration:none;
}

a:hover {
color: #000;
background-color: #FFFF00;
}
ol{
padding:0 0 0 20px;
margin:0;
}

h4 {
    font-size: 0.9em;
    font-weight: normal;
    text-transform: uppercase;
}

h5 {
font-size: 0.9em;
text-transform:uppercase;
font-weight: normal;
padding:0;
margin:10px 0 10px 0;
}

/* homepage */

.main-promo {
border: 1px;
margin-top: 10px;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.products-container {
margin-top:60px;

}
.products-container .col-a, 
.products-container .col-b, 
.products-container .col-c {
width: 186px;
float:left;
margin-right: 10px;
}
.products-container .col-d {
width: 186px;
float:left;
}
.products-container .product {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border: 1px;
margin-bottom: 20px;
width: 188px;
}

.products-container .product a p span {
margin-left: 5px;
}

.products-container .product a:hover p span {
background-color: #FFFF00;
}

.list {
	margin-top:20px;	
}


.list p span{
margin-top:60px;
}

.list a:hover p span{
background-color: #FFFF00;
}

/* craft */

.craft-image {
margin-bottom: 20px;
}

/* products */

#product .collection-details {
margin-bottom: 20px;
}

#product .content h2 a{
    background: none repeat scroll 0 0 #FFFF00;
    font-size: 0.7em;
}

#product .collection-details .col-a {
float: left; 
width: 68%;
margin-right: 2%;
}

#product .content .col-a ul {
padding-left: 20px;
margin:0;
}

#product .content ul li {
font-size: 0.8em;
}

#product .content ul li a{
background: #ffff00;
}

#product .collection-details .col-b {
float: left; 
width: 30%;
margin-right: none;
margin-right: 0px;
}

.product-details {
padding-left: 20px;
}

.glass{
    left: 764px;
    position: relative;
    top: -6px;
}

.battersea .glass {
    left: 764px;
    position: relative;
    top: 12px;
}

.product-primary, 
.product-secondary, 
.product-tertiary,
.product-quaternary,
.product-quinary,
.product-senary,
.product-septenary {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border: 1px;
margin-bottom: 20px;
width: 780px;
height: 551px;
overflow: hidden;
}

#collections .ui-accordion-header {
    border-bottom: 1px dashed #000000;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 1.5em;
    margin: 0;
    padding: 8px 0 24px;
    text-transform: uppercase;
}

#collections .ui-accordion-header a {
background:none;
color: #000;
}

#collections .ui-accordion-header.ui-state-active a, 
#collections .ui-accordion-header a:hover {
background:#FFFF00;
color: #000;
text-decoration:none;
}

#collections .ui-accordion-content {
margin: 20px 0px 0px 0px;
padding-bottom: 20px;
}

#collections a:hover h4 span{
    background: #ffff00;
}

/* craft */
#craft .content {
padding-top: 5px;
}
#craft .content {
padding-top: 5px;
}
#craft .content p,
#craft .content li {
    padding-top: 10px;
	font-size: 0.8em;
    width: 600px;
}
/* friends */
.content .col-a, 
.content .col-b{
width: 245px;
float:left;
margin-right: 10px;
}

.content .col-c  {
margin-right: 0px;
float:left;
}

/* contact */
.col-contact {
text-transform: uppercase;
font-size: 12px;
line-height: 16px;
float:left;
width:520px;
margin-top:20px;
}
.col-contact a {
background: #FFFF00;
color: #000;
text-decoration:none;
}
.col-contact a:hover {
text-decoration:underline;
}
.faq .question{
display:block;
}

.faq li {
margin-bottom: 15px;
}

#contact .statement {
    margin-bottom: 1em;
}

#contact .content p,
#contact .content li {
    font-size: 0.8em;
    width: 600px;
} 

#contact p a {
    background: #ffff00;
}

#contact .content ol li, 
#contact .content p {
    padding-bottom: 16px;
}

#response {
text-transform:uppercase;
  font-size: 0.9em;
}


/* friends */

.col-friends-a {
text-transform: uppercase;
font-size: 12px;
line-height: 16px;
float:left;
width:360px;
margin-top:20px;
}

.col-friends-a a {
color: #000;
text-decoration:none;
}

.col-friends-a a:hover {
background: #FFFF00;
color: #000;
}

.friends-list {
list-style:none;
padding:0;
margin:0;
}

/* smart phone responsive css */

@media only screen and (min-width : 0px) and (max-width : 480px){
    #craft img {
     width:100%;
    }
    #craft .container {
        background: none repeat scroll 0 0 white;
        margin: 0;
        padding: 8px;
        width: 304px;
    }
    #craft .introduction .col-a {
        float: none;
        margin-right: 0px;
        width: 100%;
    }
    #craft .introduction .col-b {
        float: none;
        width: 100%;
    } 
    #craft #logo {
        color: white;
        font-size: 0;
        height: 93px;
        left: 0;
        margin-bottom: 16px;
        position: relative;
        width: 268px;
    }
    #craft p, 
    #craft li {
        background: none repeat scroll 0 0 #FFFFFF;
        font-size: 1em;
        line-height: 1.5em;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
    #craft .introduction #formail #mail {
        border: 1px dashed #000000;
        font-family: karla;
        margin-top: 8px;
        text-transform: uppercase;
        width: 234px;
    }
    #craft .content {
        padding-top: 8px;
    }
    #craft .craft-image {
        margin-bottom: 8px;
    }
    #craft .footer-icon img {
        width: 20px;
    }
    #craft .footer p {
        font-size: 0.8em;
    }
}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}