@charset "utf-8";
/* CSS Document */

body {
	margin:0px;
	background-image:url(images/pageBackground.jpg);
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#000;
}

a {
	outline:none;
	text-decoration:none;
}

p {
	padding:0px;
	margin:0px;
}

#container {
	position:absolute;
	padding:0px 0px 0px 4px;
	margin:auto;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	width:964px;
	height:420px;
	overflow:hidden;
}

#openTimeline {
	width:780px;
}

.slideUL {
	padding:0px;
	margin:0px;
	list-style:none;
}

.slideLI {
	float:left;
	padding:0px;
	margin:0px;
	display:block;
}

#oral div h2 {
	background-image:url(images/timelineBackground.jpg);
	background-position:0px center;
}

#oral div div ul {
	height:360px;
	background-image:url(images/timelineBackground.jpg);
	background-position:-60px center;
}

#written div h2 {
	background-image:url(images/timelineBackground.jpg);
	background-position:-780px center;
}

#written div div ul {
	height:360px;
	background-image:url(images/timelineBackground.jpg);
	background-position:-840px center;
}

#printed div h2 {
	background-image:url(images/timelineBackground.jpg);
	background-position:-1560px center;
}

#printed div div ul {
	height:360px;
	background-image:url(images/timelineBackground.jpg);
	background-position:-1620px center;
}

#digital div h2 {
	background-image:url(images/timelineBackground.jpg);
	background-position:-2340px center;
}

#digital div div ul {
	height:360px;
	background-image:url(images/timelineBackground.jpg);
	background-position:-2400px center;
}



.eraContainer {
	display:block;  
	padding:0px;
	margin:0px;
	height:360px;
	width:60px;
	overflow:hidden;
}

.eraTitle {
	position:absolute;
	padding:0px;
	margin:0px;
	height:360px;
	width:60px;
	cursor:pointer;
}

.eraTimeline {
	padding:0px;
	margin:0px;
	height:360px;
	width:720px;
	display:block;
	margin-left:60px;
}

.eraTimeline ul {
	padding:0px;
	margin:0px;
	height:360px;
	width:720px;
	list-style-type:none;
}

.eraTimeline ul li {
	display:inline-block;
	height:360px;
	width:1px;
	vertical-align:top;
}

.ui-draggable {
	cursor:pointer;
}

.ui-draggable-dragging {
	padding:0px;
	margin:0px;
	overflow:hidden;
	list-style-type:none;
	cursor:move;
}

#dropZone {
	position:absolute;
	width:960px;
	height:60px;
	bottom:0px;
	overflow:hidden;
	background-image:url(images/dropzone1.png);
}

#dropZone ul {
	height:60px;
	padding:0px;
	margin:0px;
	list-style-type:none;
}

#dropZone ul li {
	height:60px;
	padding:0px;
	margin:0px;
}

.ui-state-default {
	background-image:url(images/dropzone2.png);
}

.ui-state-active {
	background-image:url(images/dropzone3.png);
}

/* * * Placement of events on timeline * * */
/* oral */
#o1 div {
	margin:120px 0px 0px 20px;
}

#o2 div {
	margin:180px 0px 0px 350px;
}

#o3 div {
	margin:60px 0px 0px 400px;
}

#o4 div {
	margin:260px 0px 0px 560px;
}

/* written */
#w1 div {
	margin:200px 0px 0px 10px;
}

#w2 div {
	margin:40px 0px 0px 170px;
}

#w3 div {
	margin:130px 0px 0px 210px;
}

#w4 div {
	margin:80px 0px 0px 320px;
}

#w5 div {
	margin:200px 0px 0px 400px;
}

#w6 div {
	margin:80px 0px 0px 520px;
}

#w7 div {
	margin:260px 0px 0px 570px;
}

/* printed */
#p1 div {
	margin:80px 0px 0px 10px;
}

#p2 div {
	margin:40px 0px 0px 190px;
}

#p3 div {
	margin:160px 0px 0px 230px;
}

#p4 div {
	margin:230px 0px 0px 290px;
}

#p5 div {
	margin:180px 0px 0px 400px;
}

#p6 div {
	margin:50px 0px 0px 450px;
}

#p7 div {
	margin:260px 0px 0px 500px;
}

#p8 div {
	margin:160px 0px 0px 560px;
}

/* digital */
#d1 div { /*computer*/
	margin:245px 0px 0px 20px;
}

#d2 div { /*xerox*/
	margin:40px 0px 0px 40px;
}

#d3 div { /*internet*/
	margin:190px 0px 0px 100px;
}

#d4 div { /*daisy*/
	margin:30px 0px 0px 180px;
}

#d5 div { /*dot*/
	margin:150px 0px 0px 190px;
}

#d6 div { /*laser*/
	margin:80px 0px 0px 220px;
}

#d7 div { /*email*/
	margin:235px 0px 0px 260px;
}

#d8 div { /*ps*/
	margin:40px 0px 0px 320px;
}

#d9 div { /*www*/
	margin:245px 0px 0px 380px;
}

#d10 div { /*aol*/
	margin:190px 0px 0px 400px;
}

#d11 div { /*google*/
	margin:55px 0px 0px 430px;
}

#d12 div { /*wiki*/
	margin:100px 0px 0px 484px;
}

#d13 div { /*friendster*/
	margin:230px 0px 0px 490px;
}

#d14 div { /*my space*/
	margin:65px 0px 0px 496px;
}

#d15 div { /*facebook*/
	margin:20px 0px 0px 502px;
}

#d16 div { /*twitter*/
	margin:135px 0px 0px 508px;
}

#d17 div { /*kindle*/
	margin:180px 0px 0px 514px;
}

#d18 div { /*nook*/
	margin:270px 0px 0px 520px;
}