/*
Stylesheet for:
ESL Jewellery Design and Manufacture


*/

/* ------------- RESET ------------- */

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, ol, ul, li,
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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none; 
}

a{text-decoration: none;}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{border: 0px; display: block;}

b, strong{font-weight: bold;}

address
{
    padding-bottom: 20px; 
    /*color: #66768d;*/
	color: #485362;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 18px;    
}

/*left shift fix safari and firefox*/

html { min-height: 100%; margin-bottom: 1px; }

html { overflow: -moz-scrollbars-vertical !important; }

/*left shift fix IE */

html { overflow-y: scroll; }

/* LAYOUT */

.clearboth{clear: both;}

#container{width: 1024px; margin: 0 auto;}

#header{}

#header{
	padding-bottom: 30px;
	border-bottom: solid 1px #e5e5e5;
	height: 100px;
	
	}

#header a img{float: left;}

#header a.logo img {margin-left: 445px;}

#content{}

#content.engagement{margin: 30px 0px 0px 10px;}

#content.about{background: url("img/about-bg.jpg") no-repeat right 50px;}
#content.repairs{background: url("img/repairs-bg.jpg") no-repeat right 50px;}
#content.valuations{background: url("img/valuations-bg.jpg") no-repeat right 50px;}


#slideshow{width: 1024px; height: 700px;}

#slide1{width: 1024px; height: 700px; background: url("img/image1.jpg") no-repeat top left;}

#slide2{width: 1024px; height: 700px; background: url("img/image2.jpg") no-repeat top left;}

#slide3{width: 1024px; height: 700px; background: url("img/image3.jpg") no-repeat top left;}

#slide4{width: 1024px; height: 700px; background: url("img/image4.jpg") no-repeat top left;}



/* #slidecontact1{width: 1024px; height: 530px; background: url("img/contact1.jpg") no-repeat top left;} */




#footer{width: 668px; margin: 0 auto;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{}


#content.contact p{font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 21px; font-style: normal; width: 340px; margin-bottom: 30px; margin-left: 20px;}
#content.contact p.top{width: 500px; margin-top: 30px; margin-bottom: 60px; margin-left: 20px; font-family: Times New Roman, Georgia, sans-serif;  font-size: 21px; font-weight: lighter;  line-height: 28px; color: #BDB8B4;}

#content.about p{font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 21px; font-style: normal; width: 340px; margin-bottom: 30px; margin-left: 20px;}
#content.about p.top{width: 500px; margin-top: 30px; margin-bottom: 60px; margin-left: 20px; font-family: Times New Roman, Georgia, sans-serif;  font-size: 21px; font-weight: lighter;  line-height: 28px; color: #BDB8B4;}

#content.repairs p{font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 21px; font-style: normal; width: 340px; margin-bottom: 30px; margin-left: 20px;}
#content.repairs p.top{width: 500px; margin-top: 30px; margin-bottom: 60px; margin-left: 20px; font-family: Times New Roman, Georgia, sans-serif;  font-size: 21px; font-weight: lighter;  line-height: 28px; color: #BDB8B4;}

#content.valuations p{font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 21px; font-style: normal; width: 340px; margin-bottom: 30px; margin-left: 20px;}
#content.valuations p.top{width: 500px; margin-top: 30px; margin-bottom: 60px; margin-left: 20px; font-family: Times New Roman, Georgia, sans-serif;  font-size: 21px; font-weight: lighter;  line-height: 28px; color: #BDB8B4;}


/* this effects the homepage and contact us images */
#slidecontact1 h2, 
#slidecontact2 h2,
#slidecontact4 h2,
#slidecontact3 h2{display: inline-block; font-family: Times New Roman, Georgia, serif;  font-size: 21px; font-weight: lighter; color:#ffffff; line-height: 30px; margin-top: -40px; margin-left: 20px;}



#footer p{float: left; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: 12px; color: #bdb8b4; margin: 30px 60px 20px 0px;}





/* LINKS */

a{font-family: Times New Roman, Georgia, serif; font-size: 13px; color: #bdb8b4;}

a:hover{
	color: #717174;
}

a.active{
	color: #717174;
}

#footer p a{font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #bdb8b4;}

#footer p a:hover{
	color: #717174;
}




ul li a{display: block; padding-right: 0px; padding-bottom: 70px;}

ul li a.image{padding-right: 6px;}

ul li a.hover{color: #717174;}

li:hover li a:hover{color: #717174;}


ul li a.active{color: #717174;}

ul li ul li a{padding-bottom: 0px;}



#slide1 h2 a, #slide2 h2 a,
#slide3 h2 a, #slide4 h2 a, #slide5 h2 a{display: inline-block; font-family: Times New Roman, Georgia, serif;  font-size: 34px; font-weight: lighter; color:#bdb8b4; line-height: 40px; margin-top: 30px; margin-left: 20px;}

/*
#slidecontact1 h2 a, #slidecontact2 h2 a, #slidecontact4 h2 a,
#slidecontact3 h2 a{display: inline-block; font-family: Times New Roman, Georgia, serif;  font-size: 34px; font-weight: lighter; color:#ffffff; line-height: 40px; margin-top: 30px; margin-left: 20px;}





/* LISTS */

ul{ margin-top: 0px; margin-left: 70px; clear:left}

ul li{float: left; display: block; position: relative; margin-right: 60px;}

ul li:hover{display: block;}

ul li ul{display: none; margin-left: 0px;} 

ul li.image{margin-right: 0px;}

ul li:hover ul{display: block; position: absolute; z-index: 100; top: 30px; background-color:#FFF} 

ul li:hover li{float: none; margin-bottom: 15px; width: 10px; padding-left: 0px}






/* IMAGES 

#slidecontact1 h2 a img, 
#slidecontact2 h2 a img,
#slidecontact4 h2 a img,
#slidecontact3 h2 a img{display: inline; margin-left: 10px;}
*/

#slide1 h2 a img, 
#slide2 h2 a img,
#slide3 h2 a img,
#slide5 h2 a img,
#slide4 h2 a img{display: inline; margin-left: 10px;}

#content.engagement a.next img{float: right; display: block; margin: 10px 20px 0px 8px;}
#content.engagement a.previous img{float: left; display: block; margin: 10px 20px 0px 8px;}

#content.about img{float: right; margin-top: 40px;}
#content.repairs img{float: right; margin-top: 40px;}
#content.valuations img{float: right; margin-top: 40px;}



/* MOSAIC STYLES */

.mosaic-block {
	float:left;
	position:relative;
	overflow:hidden;
	width:312px;
	height:236px;
	margin:10px 10px 30px 10px;
	background-color: #111;
	border:1px solid #e5e5e5;
}

	.mosaic-backdrop {
		display:none;
		position:absolute;
		top:0;
		height:100%;
		width:100%;
		background:#111;
	}
	
	.mosaic-overlay {
		display:none;
		z-index:5;
		position:absolute;
		width:100%;
		height:100%;
		background:#f7f7f7;
	}
	
		.bar2 .mosaic-overlay {
			bottom:-50px;
			height:115px;
		}
		
			.bar2 .mosaic-overlay:hover {
				opacity:1;
				height:100%;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter:alpha(opacity=100);
			}
	
	.clearfix{ display: block; height: 0; clear: both; visibility: hidden; }
						
	.details{ margin:10px 15px; }	
		h4{ font:bold 15px 'Times New Roman', Helvetica, Arial, sans-serif; color:#717174; }
		p{ font:normal 15px 'Times New Roman', Tahoma, Verdana, sans-serif; color:#BDB8B4; font-style: italic;}
		p.desc{font-size: 13px; line-height: 21px; margin-bottom: 20px;}
		a{ text-decoration:none; }

/*
*
* contact form
*
*/
#content.contact{
	display: inline-block;
 }
 .contactform
 {
 	display: inline-block;
 	width: 40%;
 }
 .contactform {
	background-color: #e4dcca;
}
.contactform ul {
	padding: 25px 5px;
	padding-bottom: 0;
	margin-left: 40px;
}
.contactform ul li {
	list-style: none;
	margin-bottom: 14px;
}
.contactform ul li.end {
	margin-top: 21px;
	margin-bottom: 17px;
}
.contactform  :-moz-placeholder {
	color: #BDB8B4;
	font-size: 16px;
	line-height: 31px;
	font-weight: lighter;	
}
.contactform  ::-moz-placeholder {
	color: #BDB8B4;
	font-size: 16px;
	line-height: 31px;
	font-weight: lighter;	
}
.contactform  {
	color: #BDB8B4;
	font-size: 16px;
	line-height: 31px;
	font-weight: lighter;	
}
.contactform  /* Text field style */ 
{  
	color: #BDB8B4;
	font-size: 16px;
	line-height: 31px;
	vertical-align: top;
	margin-top: 30px;
}
.contactform input[type=text], .contactform textarea, .contactform label {
	border: 0;
	width: 0%;
	background-color: #fff;
	padding: 4px;
	margin: 0;
}
.contactform label {	
	padding:4px;
	text-transform: uppercase;
}
.contactform input[type=text] {
	height: 31px;
}
.contactform label.query {
	width: 100%;
}
.contactform textarea {
	height: 75px;
	width: 153%;
}
.contactform input[type=text]  {
	margin-bottom: 5px;
}
.contactform label.merge {
	width: 72px;
	vertical-align: text-top;
}
.contactform input.merge  {
	width: 200%;
	vertical-align: text-top;
}
.contactform input[type=submit] {
	background: #343438;
	color: #fff;
	border: 0;
	border-radius: 2px;
	margin-bottom: 0;
}




#snowflakeContainer {
    position: absolute;
    left: 0px;
    top: 0px;
}
.snowflake {
    padding-left: 15px;
    font-family: Times Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif, Georgia, serif;
    font-size: 14px;
    line-height: 24px;
    position: fixed;
    color: #FFFFFF;
    user-select: none;
    z-index: 1000;
}
.snowflake:hover {
    cursor: default;
}