/*
Though @font-face has been around for several years now, browsers have been slow to properly (and consistently) support the standard for using any font type in web pages. To learn more visit Tim Brown's Nice Web Type at http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
*/
@font-face {
  font-family: 'DakotaRegular';
  src: url('../styles/type/dakota__.eot'); /* .eot must come first for IE */
  src: local('Dakota Regular'), local('Dakota'),
    url('../styles/type/dakota__.woff') format('woff'),
    url('../styles/type/dakota__.ttf') format('truetype'),
    url('../styles/type/dakota__.svg#Dakota') format('svg');
}
/* NOTE: Need to define both a roman and italic versions of our typeface as two different typefaces when they are actually two different styles of the same typeface. This is done because IE ignores the font-style: italic; attribute and Opera actually appears messed up.
*/
@font-face {
  font-family: 'DakotaItalic';
  src: url('../styles/type/dakota__.eot'); /* .eot must come first for IE */
  src: local('Dakota Italic'), local('Dakotai'),
    url('../styles/type/dakota__.woff') format('woff'),
    url('../styles/type/dakota__.ttf') format('truetype'),
    url('../styles/type/dakota__.svg#Dakota') format('svg');
}

/** RESET **/
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, a, font, img, form {
	margin: 0;
	padding: 0;
	border: 0;
}

/** GLOBALS **/
a {
	font-weight: bold;
	text-decoration: none; 
	color: #569aca;
}

a:hover {
	text-decoration: underline; 
	color: #23428d;
}

body {
	margin: 0;
	padding: 0;
	font-size: 62.5%; /* Resets 1em to 10px */
	font: normal 14px/24px arial, verdana, helvetica, sans-serif; 
	text-align: center;
	background: #FFF url("../images/bg.jpg") repeat-y top center;
	color: #333;
}

.special {
	font: bold 18px/24px "DakotaRegular", arial, verdana, helvetica, sans-serif; 
	color: #666;
}

.headcolor1 {
	font: normal 21px/21px arial, verdana, helvetica, sans-serif;
	background-color: transparent;
	color: #71754C; 
}

.headcolor2 {
	font: italic 18px/21px arial, verdana, helvetica, sans-serif;
	background-color: transparent;
	color: #999; 
}

h1, h2, h3, h4, h5, h6 {
/* CSS shorthand: top right bottom left */
	padding: 5px 0px 10px 0px;
	font: normal 21px/21px arial, verdana, helvetica, sans-serif;
	background-color: transparent;
	color: #71754C; 
}

h2, h3, h4, h5, h6 {
	font: normal 18px/21px arial, verdana, helvetica, sans-serif;
	background-color: transparent;
	color: #666; 
}

/** MAIN **/
#wrapper {
	margin: 0 auto; /* need auto to center */
	padding: 0;
	width: 100%;
	text-align: center;
	background-color: transparent;
}

#masthead {
	margin: 0;
	padding: 0;
	width: 876px;
	height: 160px; 
	background-color: transparent;
}

/* Nav Elements */
#navbar {
	margin: 0;
	padding: 0;
	width: 876px; 
	height: 50px;
	background: #81ae09;
}

.anchors {
	margin: 0; 
	padding: 0;
	height: 50px;
	list-style:none;
}

.anchors li {
	float: left;
	margin: 0; 
}

.anchors .divider {
	width: 4px;
	height: 50px;
	background-color: #FFF;
}

.anchors a {
	position: relative;
	margin: 0; 
	padding: 0;
	width: 106px;
	height: 50px;
	text-decoration: none; 
	background: transparent url("../images/nav.gif") no-repeat 0 0; /* need a background for IE6 */
	display: block;
}

.anchors .nav1 a:link, .anchors .nav1 a:visited {background: url("../images/nav01.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}
.anchors .nav2 a:link, .anchors .nav2 a:visited {background: url("../images/nav02.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}
.anchors .nav3 a:link, .anchors .nav3 a:visited {background: url("../images/nav03.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}
.anchors .nav4 a:link, .anchors .nav4 a:visited {background: url("../images/nav04.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}
.anchors .nav5 a:link, .anchors .nav5 a:visited {background: url("../images/nav05.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}
.anchors .nav6 a:link, .anchors .nav6 a:visited {background: url("../images/nav06.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}
.anchors .nav7 a:link, .anchors .nav7 a:visited {background: url("../images/nav07.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}
.anchors .nav8 a:link, .anchors .nav8 a:visited {background: url("../images/nav08.gif") no-repeat 0 0; width: 106px; height: 50px; position: static;}

.anchors .nav1 a:hover, .anchors .current1 a:link, .anchors .current1 a:visited {background: url("../images/nav01.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
.anchors .nav2 a:hover, .anchors .current2 a:link, .anchors .current2 a:visited {background: url("../images/nav02.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
.anchors .nav3 a:hover, .anchors .current3 a:link, .anchors .current3 a:visited {background: url("../images/nav03.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
.anchors .nav4 a:hover, .anchors .current4 a:link, .anchors .current4 a:visited {background: url("../images/nav04.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
.anchors .nav5 a:hover, .anchors .current5 a:link, .anchors .current5 a:visited {background: url("../images/nav05.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
.anchors .nav6 a:hover, .anchors .current6 a:link, .anchors .current6 a:visited {background: url("../images/nav06.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
.anchors .nav7 a:hover, .anchors .current7 a:link, .anchors .current7 a:visited {background: url("../images/nav07.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
.anchors .nav8 a:hover, .anchors .current8 a:link, .anchors .current8 a:visited {background: url("../images/nav08.gif") no-repeat 0 -50px; width: 106px; height: 50px; position: static;}
/* End Nav Elements */

#page {
	margin: 0 auto; /* need auto to center */
	padding: 0;
	width: 876px;
	text-align: left;
}

#content {
	margin: 0;
/* CSS shorthand: top right bottom left */
	padding: 20px 0px 0px 0px;
	width: 876px;
}

#footer {
	margin: 0;
/* CSS shorthand: top right bottom left */
	padding: 20px 0px 0px 0px;
	width: 876px;
	height: 146px; 
	background: transparent url("../images/cut_sew_pin_thread.jpg") no-repeat bottom center;
}

#copyright {
	margin: 0;
/* CSS shorthand: top right bottom left */
	padding: 20px 0px 20px 0px;
 	width: 876px; 
	text-align: center;
	font: normal 11px/14px arial, verdana, helvetica, sans-serif; 
	background: transparent;
	color: #666;
 	clear: both; /* clear elements next to this one, need when using float elsewhere */
	overflow: hidden;
}

#popup {
	margin: 0;
	padding: 5px;
	width: 600px;
	text-align: left;
}

#popupheader {
	margin: 0;
	padding: 0;
	width: 600px;
	height: 60px;
	background: #FFF url("../images/bg_popup.gif") no-repeat top center;
}

/** MISC. CLASSES **/
.clearbreak {
	margin: 0;
    padding: 0;
	height: 1px;
 	clear: both; /* clear elements next to this one, need when using float elsewhere */
	overflow: hidden;
}

.greentext {
	font-size: 21px;
	color: #71754C; 
}


.graytext {
	color: #666;
}

.hor {
	margin: 0;
	padding: 0;
	width: 870px;
	height: 40px;
	text-align: center;
	background: transparent url("../images/stitch.gif") no-repeat top center;
}

.thick {
	padding: 4px;
	border:  4px solid #dfe1ce;
}

.slideshow, .slideshow2, .slideshow3, .slideshow4, .slideshow5, .slideshow6 { 
	margin: auto;
	width: 250px; 
	height: 370px; 
}