@charset "UTF-8";
/* CSS Document */
/*
 * CSS Styles that are used on the jScrollPane demo site - these are custom to the site and
 * you shouldn't need to use them in your own implementations of jScrollPane.
 */
#timeline_content {
	position: relative;
	float: left;
	width: 900px;
	clear: left;
	min-height: 500px;
	line-height: 16px;
	font-size: 12px;
	height: auto;
}

.scroll-pane
			{
	width: 900px;
	height: 500px;
	overflow: auto;
	float: left;
	clear: left;
	border-width: 1px;
	border-style: solid;
	border-color: #999;
			}


.icons{
	width: auto;
	height : 100px;
}

.resize{
	width: 80px; 
	height: auto;
	margin: 0px 10px 10px 0px;
	float: left;
	-moz-box-shadow: 2px 3px 4px #000;
	-webkit-box-shadow: 2px 3px 4px #000;
	box-shadow: 2px 3px 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	border: 1px solid #FFF;
}
.resize:hover{
	margin: 0px 10px 10px 0px;
	float: left;
	-moz-box-shadow: 1px 1px 1px #000;
	-webkit-box-shadow: 1px 1px 1px #000;
	box-shadow: 1px 1px 1px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	border: 1px solid #999;
}

.img_left{
	float: left;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	height: 500px;
}

.resize2 {
	height : auto;
	width : 300px;
	margin: 5px;
}
.resize3 {
	width: 50px;
	height: auto;
	margin: 0px 10px 10px 0px;
	float: left;
	-moz-box-shadow: 2px 3px 4px #000;
	-webkit-box-shadow: 2px 3px 4px #000;
	box-shadow: 2px 3px 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	border: 1px solid #FFF;
}
.resize3:hover {
	-moz-box-shadow: 1px 1px 1px #000;
	-webkit-box-shadow: 1px 1px 1px #000;
	box-shadow: 1px 1px 1px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

.resize6 {
	width: 25px;
	height : 25px;
	margin: 0px 10px 10px 0px;
	float: left;
	-moz-box-shadow: 2px 3px 4px #000;
	-webkit-box-shadow: 2px 3px 4px #000;
	box-shadow: 2px 3px 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	border: 1px solid #FFF;
}
.resize6:hover {
	width: auto;
	height : 25px;
	margin: 0px 10px 10px 0px;
	float: left;
	-moz-box-shadow: 1px 1px 1px #000;
	-webkit-box-shadow: 1px 1px 1px #000;
	box-shadow: 1px 1px 1px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
	border: 1px solid #FFF;
}




.resize4 {
	height: 60px;
	width : 60px;
	margin: 5px 10px 5px 0px;
}
.resize5 {
	height: 300px;
	width : 300px;
	margin: 0px;
}

ul.dates{
	list-style-type: none;
	float: left;
	margin: 0px;
	padding: 0px;
}
ul.dates li{
	width:189px;
	height:20px;
	font-weight:bolder;
	text-align:center;
	padding:5px;
	position:relative;
	background-color:#DDD;
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
	}



.timeline h1
{
	font-size: 116%;
	color: #fff;
	background: #50506d;
	margin: 0 0 1em;
	padding:4px 8px 5px;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.timeline h2
{
	clear: left;
	font-size: 100%;
	color: #fff;
	background: #8b8b9f;
	margin: 1em 0;
	padding:4px 8px 5px;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.timeline h2 span.setting-type
{
	font-weight: normal;
}

p
{
	font-size: 93%;
	margin: 1em 0;
}

p.intro
{
	font-size: 116%;
	padding: 10px;
	background: #fff;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

}



ul
{
	padding: 0 0 0 1em;
}

ul li
{
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0em;
	margin-left: 0;
}

ul.link-list li
{
	margin: 0;
}

ul p
{
	margin: 0;
}

/* For the form demo page */


.tl_holder {
	float: left;
	height: 130px;
	width: 179px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
	padding: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	color: #333;
}
.thumb_holder {
	margin: 2px;
	float: left;
	width: 155px;
}
.tl_holder2 {
	float: left;
	height: 110px;
	width: 100px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
	padding: 30px 10px 10px 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	color: #333;
	
}

#ceramics{
	float: left;
	width:2242px;
}
#fiber{
	float: left;
	width:2242px;
}
#glass{
	float: left;
	width:2242px;
}
#metal{
	float: left;
	width:2242px;
}

#paper{
	float: left;
	width:2242px;
}
#woodcraft{
	float: left;
	width:2242px;
}
#crosscraft{
	float: left;
	width:2242px;
}
#mainstream{
	float: left;
	width:2242px;
}
#influences{
	float: left;
	width:2242px;
}

#ceramics2{
	float: left;
	width:2650px;
}
#fiber2{
	float: left;
	width:2650px;
}
#glass2{
	float: left;
	width:2650px;
}
#metal2{
	float: left;
	width:2650px;
}

#paper2{
	float: left;
	width:2650px;
}
#woodcraft2{
	float: left;
	width:2650px;
}
#crosscraft2{
	float: left;
	width:2650px;
}
#mainstream2{
	float: left;
	width:2650px;
}
#influences2{
	float: left;
	width:2650px;
}
#years{
	float: left;
	width:2242px;
}
#years2{
	float: left;
	width:2650px;
}

#nav2{
	list-style:none;
	font-weight:bold;
	/* Clear floats */
	float:left;
	width:100px;
	position:relative;
	z-index:5;
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 0px;
		margin-bottom:5px;
padding: 0px;
	}
#nav2 li{
	float:left;
	position:relative;
}
#nav2 a{
	display:block;
	padding:5px;
	color:#333;
	text-decoration:none;
	width: 80px;
	border: 1px solid #999;
}
#nav2 a:hover{
	color:#fff;
	background:#999;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav2 ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	margin: 0px;
	padding: 0px;
}
#nav2 ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
	margin: 0px;
}
#nav2 ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav2 li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav2 li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#999;
		color:#FFF;
	text-decoration:underline;
}
#nav2 li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav2 li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
		color:#FFF;

}#droparea {
	float: left;
	width: 200px;
}
#tl_nav {
	float: left;
	height: 50px;
	width: 100%;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
#timeline {
	float: left;
	width: 900px;
}
.thumbnails {
	float: left;
	width: 110px;
	margin: 5px;
	height: 110px;
}
.year_start {
	width:110px;
	height:20px;
	font-weight:bolder;
	text-align:center;
	padding:5px;
	position:relative;
	background-color:#DDD;
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
}
.timline_info {
	float: left;
	width: 900px;
}
.timeline_key {
	float: left;
	width: 280px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
.timeline_copy {
	padding: 20px;
	float: left;
	width: 860px;
	font-size: 16px;
	line-height: 20px;
	font-family: georgia, times, serif;
}
.tl_footer_nav {
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	float: left;
	text-align: right;
	width: 900px;
}
.key_data {
	float: left;
	padding-bottom: 5px;
	font-family: georgia, times, serif;
	font-size: 48px;
	margin-right: 30px;
	height: 60px;
	line-height: 48px;
}
.key_icons{
	float: left;
	padding-right: 10px;
	margin-right: 10px;
	width: 50px;
}
ul#gallery {
	padding:0;
	margin:0px;
	width:300px;
	height:390px;
	position:relative;
	border: 1px solid #CCC;
	background-image: url(http://www.americancraftmag.org/timeline/graphics/image_bg.gif);
	background-repeat: no-repeat;
  }
#gallery li {
	list-style-type:none;
	width:75px;
	height:75px;
	float:left;
	z-index:100;
	padding-top: 305px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	    margin: 0px 10px 5px 0px;
  }
#gallery li.lft {
  float:left; 
  clear:left;
  }
#gallery li.rgt {
  float:right; 
  clear:right;
  }
#gallery a {
  position:relative; 
  width:75px; 
  height:75px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
    margin: 0px 10px 5px 0px;
  }
#gallery a img {
  position:relative; 
  width:75px; 
  height:75px; 
  z-index:100;
  margin: 0px 10px 5px 0px;
  }
#gallery a:hover {
  }
#gallery a:hover img {
	position:relative;
	border:1px solid #999;
	z-index:20;
	margin: 0px 10px 5px 0px;
  }
#gallery a:active, #gallery a:focus {
  background:transparent; 
  width:300px; 
  height:300px; 
  padding:0px 0px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:active img, #gallery a:focus img {
  background:#999; 
  position:relative; 
  width:300px; 
  height:300px; 
  border:0; 
  z-index:10;
  }
/* hack for Internet Explorer */
#gallery li.pad {
  height:0; 
  display:block; 
  margin-top:-0px; 
  width:300px; 
  font-size:0;
  }
  
  #slideshow1{
	float: left;
	width: 100%;
	margin: 0px 0px 10px 0px;
  }
ul.thumb{
	list-style-type: none;
	float: left;
	margin: 0px;
	padding: 0px;
}
ul.thumb li{
	list-style-type: none;
	float: left;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
.tl_datefooter {
	float: left;
	width: 780px;
	padding-left: 120px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.endate {
	float: left;
}
.startdate {
	float: left;
	width: 740px;
}
.learnmore, .learnmore a,  .learnmore a:visited{
	color: #0d3251;
	text-decoration: none;
	font-size: 14px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}
 .learnmore a:hover{
	color: #0d3251;
	text-decoration: underline;
	font-size: 14px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}
#stuff{
		float: left;
}
#decades{
	float: left;
	width: 900px;
	margin-bottom: 20px;
	height: 200px;
}