.arrow  { position: absolute; height: auto; opacity: 0.8; cursor: pointer; }
.arrow:hover  { opacity: 1; }
.arrow:active  { opacity: 0.9; }

.mainevent  { height: auto; background-color: #ffffff; position: absolute; cursor: pointer; overflow: hidden; }
.mainevent:hover .maineventimage  { opacity: 0.8; }
.mainevent:active .maineventimage  { opacity: 0.9; }
.maineventimage  { width: 100%; height: auto; }
.maineventsubs  { position: absolute; top: 55%; right: 3%; width: 17%; height: auto; }
.maineventsubs2  { position: absolute; top: 55%; right: 22%; width: 17%; height: auto; }
.maineventsubnum  { position: absolute; top: 61%; right: 3%; width: 17%; text-align: center; color: #ffffff; font-weight: bold; font-size: 90%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.maineventtitle  { width: 90%; background-color: #ffffff; color: #222222; display: table; padding: 1% 5%; box-sizing: content-box; }
.maineventtitle SPAN  { display: table-cell; vertical-align: middle; line-height: 125%; }
.maineventtitle SPAN STRONG  { font-weight: 900; }
.maineventcount  { background-color: #006600; position: absolute; right: 4%; bottom: 33%; }
.maineventcount SPAN  { color: #ffffff; display: block; width: 100%; padding-top: 10%; text-align: center; }
.themeimage  { position: relative; left: 50%; top: 30px; padding-bottom: 20px; transform: translateX(-50%); }

.story  { background-color: #006b00; color: #ffffff; width: 91%; }
.exports  { background-color: #bbbbbb; color: #111111; }
.population  { background-color: #bbbbbb; color: #111111; }
.minorevent  { width: 90%; margin: 0% 1% 1% 1%; padding: 6% 4% 2% 4%; background-color: #ffffff; float: left; position: relative; box-sizing: content-box; }
.minorevent H2  { margin-top: 0px; }
.minorevent H3  { padding-top: 1%; }
.minorevent P  { text-align: justify; }
.minoreventtype  { position: absolute; top: 0%; left: 0%; }
.minoreventimage  { width: 100%; height: auto; max-width: 400px; margin-left: 50%; margin-bottom: 6%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.minoreventvideo, .minoreventaudio  { width: 100%; height: auto; margin-bottom: 3%; }
 
.minoreventvideoplay  { position: absolute; top: 0%; left: 0%; padding-top: 12%; width: 40%; padding-left: 30%; height: auto; cursor: pointer; opacity: 0.9; box-sizing: content-box; }
.minoreventvideoplay:hover  { opacity: 1; }
.minoreventvideoplay:active  { opacity: 0.8; }
.minoreventaudiobutton  { width: 40%; height: auto; margin-top: 4%; opacity: 1; cursor: pointer; }
.minoreventaudiobutton:hover  { opacity: 0.8; }
.minoreventaudiobutton:active  { opacity: 0.9; }
.minoreventaudioplay  { position: absolute; top: 0%; left: 0%; padding-top: 12%; width: 40%; padding-left: 30%; height: auto; cursor: pointer; opacity: 0.9; box-sizing: content-box; }
.minoreventaudioplay:hover  { opacity: 1; }
.minoreventaudioplay:active  { opacity: 0.8; }
.minoreventtitle  { font-size: 120%; padding: 0%; margin: 0%; }
.source  { font-style: italic; font-size: 90%; line-height: 120%; padding-top: 2%; }
.minorevent UL  { list-style: outside; }
.minorevent UL LI, .minorevent OL LI  { margin-left: 15px; }
.questions  { font-weight: bold; }
.videovideo  { width: 100%; height: auto; }

.hidecount  { display: none; }
.minorevent TABLE TR TD, .minorevent TABLE TR TH  { padding: 5px 1%; background-color: #f2f2f2; }
.minorevent TABLE TR TD P, .minorevent TABLE TR TH P  { margin: 0%; line-height: 130%; }
#eventdescription .source  { padding-top: 0%; }
#eventdescription TABLE TR TD P  { margin: 0% 0%; line-height: 130%; }
#eventdescription TABLE TR TD, #eventdescription TABLE TR TH  { padding: 5px 1%; background-color: #f8f8f8; }

#timeline  { position: absolute; }
#viewport  { position: absolute; width: 100%; height: 100%; overflow: hidden; }
#toprow, #bottomrow  { display: block; position: relative; width: 200%; }
#whiteline  { border-top: 3px solid #ffffff; position: absolute; left: 0px; width: 100%; top: 49%; margin-top: 0px; margin-bottom: 0px; }
#dragger  { position: relative; top: 0px; left: 0px; }
#rightfade  { position: absolute; right: 0px; top: 0px; height: 100%; width: auto; z-index: 1; }
#leftfade  { position: absolute; left: 0px; top: 0px; height: 100%; width: auto; z-index: 1; display: none; }

#minorevents  { width: 80%; padding-left: 10%; padding-right: 10%; padding-bottom: 3%; background-color: #e9e9e9; position: absolute; z-index: 11; box-sizing: content-box; }
#minorevents HR  { margin-bottom: 2%; margin-top: 4%; border: 0px; height: 0px; border: 1px solid #bbbbbb; }
#eventdescription  { width: 80%; margin-left: 10%; text-align: left; margin-top: 3%; margin-bottom: 2%; text-align: justify; }
#eventdescription UL  { padding-left: 15px; }
#closeminorevents  { position: absolute; right: 0%; top: 0%; cursor: pointer; }
#closeminorevents:hover  { opacity: 0.8; }
#mystoryAudio  { margin-top: 5%; display: block; }
#mystoryVideo  { display: block; position: relative; margin-top: 5%; margin-bottom: 40px; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 100%; max-height: 100%; }


@media only screen and (min-width: 1900px) {
	#minorevents  { width: 1600px; padding-left: 150px; padding-right: 150px; left: 50%; transform: translateX(-50%); }
}
@media only screen and (min-width: 1450px) {
	#mypage  { height: 800px; }
	#timeline  { top: 220px; height: 510px; left: 6%; width: 88%; }
	#toprow, #bottomrow  { height: 220px; }
	#toprow  { margin-bottom: 47px; }
	#bottomrow  { margin-left: 140px; }
	#leftarrow  { left: -65px; }
	#rightarrow  { right: -65px; }
	#closeminorevents  { width: 60px; height: 60px; }
	#eventdescription, #mystoryAudio  { width: 900px; margin-left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
	.minorevent  { width: 980px; margin-left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 300px; -moz-column-count: 300px; column-width: 300px; -webkit-column-gap: 3em; -moz-column-gap: 3em; column-gap: 3em; }
	.maineventimage  { width: 240px; height: 160px; }
	.maineventcount  { width: 30px; height: 30px; border-radius: 30px; }
	.maineventcount SPAN  { padding-top: 2px; }
	.arrow  { width: 40px; top: 210px; }
	.maineventtitle  { height: 70px; }
	.minoreventtype  { width: 80px; height: 80px; }
	.toprow  { top: 465px; min-height: 300px; }
	.bottomrow  { top: 735px; min-height: 300px; }
}
@media only screen and (min-width: 980px) and (max-width: 1449px) {
	#mypage  { height: 690px; }
	#timeline  { top: 185px; height: 440px; left: 7%; width: 86%; }
	#toprow, #bottomrow  { height: 195px; }
	#toprow  { margin-bottom: 36px; }
	#bottomrow  { margin-left: 120px; }
	#leftarrow  { left: -60px; }
	#rightarrow  { right: -60px; }
	#eventdescription, #mystoryAudio  { width: 80%; margin-left: 10%; padding-top: 0%; padding-bottom: 10px; }
	#closeminorevents  { width: 50px; height: 50px; }
	.minorevent  { width: 800px; margin-left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 300px; -moz-column-count: 300px; column-width: 300px; -webkit-column-gap: 3em; -moz-column-gap: 3em; column-gap: 3em; }
	.maineventimage  { width: 210px; height: 140px; }
	.maineventcount  { width: 26px; height: 26px; border-radius: 26px; }
	.maineventcount SPAN  { padding-top: 1px; }
	.arrow  { width: 40px; top: 177px; }
	.maineventtitle  { height: 60px; }
	.minoreventtype  { width: 70px; height: 70px; }
	.toprow  { top: 395px; min-height: 300px; }
	.bottomrow  { top: 630px; min-height: 300px; }
}
@media only screen and (min-width: 650px) and (max-width: 979px) {
	#mypage  { height: 760px; }
	#timeline  { top: 240px; height: 390px; left: 0%; width: 100%; }
	#toprow, #bottomrow  { height: 172px; }
	#toprow  { margin-bottom: 30px; }
	#bottomrow  { margin-left: 100px; }
	#leftarrow  { right: 60%; }
	#rightarrow  { left: 60%; }
	#closeminorevents  { width: 40px; height: 40px; }
	#eventdescription, #mystoryAudio  { width: 84%; margin-left: 8%; padding-top: 0%; padding-bottom: 10px; }
	#minorevents  { width: 86%; padding-left: 7%; padding-right: 7%; padding-top: 15px; }
	.maineventimage  { width: 180px; height: 120px; }
	.maineventcount  { width: 22px; height: 22px; border-radius: 22px; }
	.maineventcount SPAN  { padding-top: 0px; }
	.arrow  { width: 35px; top: 410px; }
	.maineventtitle  { height: 60px; }
	.minoreventtype  { width: 60px; height: 60px; }
	.minorevent  { padding-top: 50px; padding-bottom: 15px; }
	.toprow  { top: 425px; min-height: 300px; }
	.bottomrow  { top: 630px; min-height: 300px; }
	.maineventsubs, .maineventsubs2  { top: 52%; }
	.maineventsubnum  { top: 58%; }	
}
@media only screen and (max-width: 649px) {
	#mypage  { height: 700px; }
	#timeline  { top: 245px; height: 350px; left: 0%; width: 100%; }
	#toprow, #bottomrow  { height: 164px; }
	#toprow  { margin-bottom: 20px; }
	#bottomrow  { margin-left: 80px; }
	#leftarrow  { right: 60%; }
	#rightarrow  { left: 60%; }
	#closeminorevents  { width: 40px; height: 40px; }
	#eventdescription, #mystoryAudio  { width: 100%; margin-left: 0%; padding-top: 15px; padding-bottom: 10px; text-align: left; }
	#minorevents  { width: 86%; padding-left: 7%; padding-right: 7%; }
	.maineventimage  { width: 150px; height: 100px; }
	.maineventcount  { width: 22px; height: 22px; border-radius: 22px; bottom: 38%; }
	.maineventcount SPAN  { padding-top: 0px; }
	.arrow  { width: 35px; top: 360px; }
	.maineventtitle  { height: 60px; }
	.minoreventtype  { width: 60px; height: 60px; }
	.minorevent  { width: 90%; margin: 0% 2% 2% 2%; padding: 55px 3% 20px 3%; }
	.minorevent P  { text-align: left; }
	.toprow  { top: 400px; min-height: 300px; }
	.bottomrow  { top: 585px; min-height: 300px; }
	.maineventsubs, .maineventsubs2  { top: 50%; }
	.maineventsubnum  { top: 56%; }
    .storyaudio.dbtn  { margin-top: 30px; }
}
@media only screen and (max-width: 400px){
	.minorevent  { width: 90%; margin: 0% 0% 3% 0%; padding: 50px 5% 20px 5%; }
}