﻿
/*--------------------------------------------------------------------

[Master Stylesheet]

- Project:    Snyders Honey
- Version:    1.0

- Author: 	Jason W. Ng


-------------------------------------------------------------------*/



/*---------------------( 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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
	font-size:0.625em;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}




.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*----------------GENERAL-------------*/
span.divider {
border-bottom: 1px solid #ffffff;}

.categorybox, .categorybox2 {
	width:300px; background-color:#e7af13; padding:10px 0px 10px 0px; margin-top:40px;
	box-shadow: 0px 2px 5px #a89154;
-moz-box-shadow: 0px 2px 5px #a89154;
-webkit-box-shadow: 0px 2px 5px #a89154;
position:relative;
}

.categorybox2 {margin-top:100px;}

span.shadow {
border-color: transparent transparent transparent #85660e;
border-style: solid;
border-width: 0px 0px 35px 36px;
height: 0px;
width: 0px;
position:absolute;
right:0px;
bottom:-35px;
}
 }

* { margin: 0px; padding: 0px;}

h1 {font-weight:bold; font-size:4.8em;}
h2{font-size:3.6em;}
h3{font-size:2.4em;}
h4 {font-size:2.1em;}
h5,p {font-size:1.8em;}
h6 {font-size:1.6em;}

body {
	background-color:#d2b76e;
	font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
}

#wrapper {
	background: url(../img/headerbg.png) center #ffcc42;
	position:relative;
	height:240px;
	padding-top:30px;

}

#headwrap {
	width:960px;
	margin:0 auto;
	position:relative;

}

#logo {
	background: url(../img/snydershoney_logo.svg) no-repeat;
	width:250px;
	height:191px;
	margin:0 auto;
	position:relative;
	top:-30px;
	padding-bottom:0px;
	cursor:pointer;
}

h1#logo {
	text-indent:-9999px;
	overflow:hidden;
}



/*NAVIGATION*/



ul#mainnav{
	width:535px;
	height:63px;
	list-style:none;
	margin: 0 auto;
	margin-top:-28px;
}


ul#mainnav li {
	display:inline;
	float:left;

}

ul#mainnav li a{
	text-decoration:none;
	color:#ffffff;
	font-size:2.5em;
	display:block;
	padding-top:15px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	text-shadow: 0px -1px 0px #745a13;
}

ul#mainnav li a:hover{
		background: url(../img/navbg.png) repeat-x transparent;
		background-position:0 -60px;
		color:#000000;
		text-shadow: 0px -1px 0px #745a13;
}

ul#mainnav li  a.current{
		background: url(../img/navbg.png) repeat-x transparent;
		background-position:0 -60px;
		color:#000000;
		text-shadow: 0px -1px 0px #745a13;

		}

/* MAIN*/
#mainwrapper {
		width:960px;
		margin:0 auto;
		position:relative;
		height:auto;

}
/* GALLERY*/

.contentbox {
		width:800px;
		height:240px;
		margin:0 auto;
		background-color:white;
		box-shadow: 1px 1px 10px #999;
		-moz-box-shadow: 1px 1px 10px #999;
		-webkit-box-shadow: 1px 1px 10px #999;

}


.stepcarousel{
position: relative; /*leave this value alone*/
border: none;
overflow: scroll; /*leave this value alone*/
width: 790px; /*Width of Carousel Viewer itself*/
height: 230px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 800px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

/*BODY*/



h2#mission {
	background: url(../img/headline.png) no-repeat;
	width:799px;
	height:141px;
	text-indent:-9999px;
	margin:0 auto;
	margin-top:10px;
	display:block;
}

#leftcont {
	width:460px;
	float:left;
	margin-left:80px;
	margin-top:20px;
	margin-right:20px;

}

#rightcont {
	width:300px;
	height:340px;
	background-color:#e3d586;
	float:left;
	padding: 0px 0px 20px 20px;
	box-shadow: 1px 0px 10px #a89154;
-moz-box-shadow: 1px 0px 10px #a89154;
-webkit-box-shadow: 1px 0px 10px #a89154;

}

/*FOOTER*/

#footerwrap {
clear:both;
width:auto;
background: ;
background: url(../img/footer.png) repeat-x;
position:relative;
}

#footer {
width:960px;
background: url(../img/footerbg.png) repeat-x;
height:auto;
margin:0 auto;
padding-top:20px;
}

#footer p {
text-align:center;
font-size:1.2em;
line-height:1.5;
}

#footer p a{
text-decoration:none;
color:black;
}

#footer p.footlinks a{font-weight:bold;}

#footer p a:hover{
text-decoration:underline;
}

/*CONTACT*/

#leftcontact {text-align:center;
height:auto;
}

ul.products {
font-style:italic;
font-size:2.2em;
text-align:center;
padding-bottom:50px;
padding-top:10px;
margin-top:20px;
}

ul.products li {
list-style:none;
display:inline;
padding-right:10px; padding-left:10px;
border-right: 1px dashed #000000;
text-shadow: 0px -1px 0px #745a13;
}

ul.products li:first-child {border-left: 1px dashed #000000;}

p.mail {padding-bottom:30px;}

p.mail a{text-decoration:none; color:#000000;}
p.mail a:hover {color:#000000; background-color:#e7af13;}


/*ABOUT*/
#rightabout{width:300px;height:auto;float:left;padding: 10px 0px 0px 20px;}
#leftabout{width:640px; height:auto;float:left; margin-top:20px;}
#leftabout h3, #factsleft h3 {font-size:3.0em; padding-bottom:20px;text-shadow: 0px -1px 0px #745a13;}

.ann,.bill {width: 200px; height:296px; border:10px solid white; margin-left:30px;margin-bottom:15px;
box-shadow: 1px 0px 10px #a89154;
-moz-box-shadow: 1px 0px 10px #a89154;
-webkit-box-shadow: 1px 0px 10px #a89154;
}

/*FACTS*/

#factsleft {width:640px; height:auto;float:left; margin-top:20px;padding-right:20px; padding-bottom:20px;}
#factsleft p {font-size:1.8em; line-height:1.3; padding-bottom:15px;}

#factsleft dt {color:#000000;font-weight:bold;font-size:2.0em;line-height:1.5;padding-bottom:15px;padding-top:15px;}
#factsleft dt span{font-style:italic;font-size:16px;}
#factsleft dd {font-size:1.8em;line-height:1.3;}
#factsright{float:left; width:260px; height:650px; background-color: #e3d586; border-left:3px solid #ffffff; border-bottom:3px solid #ffffff; border-right:3px solid #ffffff; position:relative;
box-shadow: 0px 2px 10px #a89154;
-moz-box-shadow: 0px 2px 10px #a89154;
-webkit-box-shadow: 0px 2px 10px #a89154;
}

#factsright ul {width:260px; height:100px; margin-top:30px;}
#factsright ul li{padding:15px 30px 15px 5px; background-color:#eedf8d; border-top:1px dashed #ffffff;}
#factsright ul li:last-child {border-bottom:1px dashed #ffffff;}
#factsright ul li:hover {background-color:#e7af13;color:#ffffff;}
#factsright ul li a {text-decoration:none; font-size:1.2em;}

#reading li {line-height:2.5	; font-size:1.8em;}
