/****************************
 FDA 
 ****************************/
 
 
/****************************
 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;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
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: "" "";
}


/****************************
 website
 ****************************/
 
/* basic layout */

body {background: white url(../images/bg-chixpattern.gif) repeat 50% 57%;}

#wrapper {width: 1000px; height: 600px; margin: 0 auto 20px; background-color: white; padding: 10px;}
#wrapper.home {padding: 0;}

#navigation {width: 1000px; height: 380px; position: relative;}
#navigation #map {position: absolute; z-index: 9999;}
#navigation ul, #navigation ul a {font-family: Andale Mono,monospace; color: #999 !important; font-size: 14px;}
#navigation span {position: absolute; top: -9999px;}

#navigation ul {margin-top: 40px;}
#navigation ul li {width: 67px; height: 15px; overflow: hidden; margin-bottom: 5px;}
#navigation ul li a {width: 67px; height: 15px; background-position: 0 0 !important; background-repeat: no-repeat !important; display: block;}
#navigation ul li a:hover,
#navigation ul li.active a {background-position: 0 100% !important;}
#navigation ul li.purpose a {background-image: url(../images/nav-purpose.gif);}
#navigation ul li.craft a {background-image: url(../images/nav-craft.gif);}
#navigation ul li.proof a {background-image: url(../images/nav-proof.gif);}

#navigation #buttons {position: absolute; left: 45px; top: 70px;}

.backgrounds {width: 760px; height: 380px; position: absolute; top: 0; right: 0; overflow: hidden;}
.backgrounds img {position: absolute; top: 0; right: 0;}

#photos {position: relative; height: 114px; padding: 20px 0 0; background-color: #6e7067; overflow: hidden; width: 1000px; background-repeat: no-repeat;}
#photos ul li {float: left;}
#next, #prev {position: absolute; bottom: 0; width: 20px; height: 20px; background-repeat: no-repeat; background-position: 50% 50%; background-color: #333;}
#next {right: 0; background-image: url(../images/rightArrow.gif);}
#prev {left: 0; background-image: url(../images/leftArrow.gif);}

#photos ul.slideshow {
	height: 94px;
	position: relative;
}
#photos ul.slideshow li {
	left: 0;
	position: absolute;
	top: 0;
}
#photos ul {
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
#photos ul li {
	float: left;
}
#photos ul li a {
	float: left;
	display: block;
}
#photos ul li a img {
	display: block;
}

/* photos message backgrounds for different sections */
/*
.message0 {background: url(../images/message-purpose.gif);}
.message1 {background: url(../images/message-craft.gif);}
.message2 {background: url(../images/message-proof.gif);}
*/



#footer {position: relative; width: 1000px; height: 90px;}
#footer p {font-size: 10px; font-family: Arial, sans-serif; color: #8a8d85; position: absolute; bottom: 0;}
#footer p.copyright {left: 0;}
#footer p.contact {right: 0;}

#rooster {position: absolute; bottom: 0;}
/* rooster positions */
.index0 {left: 250px;}
.index1 {left: 375px;}
.index2 {left: 500px;}

a {color: #e39b25 !important; text-decoration: none;}


/* layout based on body class: index */

body.index #navigation {height: 600px;}


/* MODALS
 * -------------------------------------------------- */

#modalOverlay {
	background-color: #000;
}
#modalContainer {
	left: 0;
	position: absolute;
	text-align: center;
	top: 10%;
	width: 100%;
}
div.closeLink {
	bottom: -30px;
	left: 0;
	position: absolute;
	text-align: center;
	width: 100%;
}
a.modalCloseImg {
	color: #fff;
	font-weight: bold;
}
img.modalData {
	display: block;
	margin: 0 auto;
}
#modalContainer #contact {
	background-color: #fff;
	border: 5px solid #ddd;
	color: #333;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 1em;
	text-align: left;
	width: 400px;
}
#contact h2 {
	color: #000;
	font-size: 16px;
}

#largeimagewrap span {display: block; margin-top: 10px; color: white; font-family: Arial, serif; font-size: 10px;}