html,
body {
	width: 100%;
	height: 100%; /*Effectively min height for IE5+/Win*/
}
html>body #wrap {
	height: auto; /*Hides IE hack from IE with child selector*/
}

body {
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #222;
	/* [disabled]background-image: url(../graphics/bgmottle1260.gif); */
	background-repeat: repeat-y;
	background-position: center;
	color:#000;
}
table {
	padding: 0px;
	border: 0px;
	border-spacing: 0px;
}

#icopy,
#foot,
.push {
	height: 54px;
}
#padd {
	min-height: 100%;
	height: 100%;
}
#padd #wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -54px;
}
#padd #wrap,
#padd #foot {
	width: 99.9%;
	max-width: 1280px;
	min-width: 924px;
}
#padd #foot {
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
#foot {
	background-color: #444;
	-webkit-box-shadow: inset 0px 12px 12px -6px rgba(17,17,17,1);
	-moz-box-shadow: inset 0px 12px 12px -6px rgba(17,17,17,1);
	box-shadow: inset 0px 12px 12px -6px rgba(17,17,17,1);
	overflow: hidden;
}
#main,
#padd #wrap {
	background-color: #F0F0F0;
}
#main {
	position: relative;
	width: 100%;
	min-height: 780px; /* = inav height + leftBox top */
	padding-bottom: 12px;
}

#leftBox {
	position: absolute;
	top: 140px;
	width: 148px;
	z-index: 4;
}
#leftSpace {
	text-align: left;
	margin-right: 0px;
	padding-left: 24px;
	font-size: 12px;
	color: #CCCCCC;
}

#centerBox {
	position: relative;
	left: 0px;
	z-index: 2;
}
#centerSpace {
	height: 100%;
	padding-right: 16px;
	padding-left: 15px;
	margin-top: 0px;
	margin-right: 148px;
	margin-bottom: 0px;
	margin-left: 148px;
}
#centerIndex {
	height: 100%;
	margin: 0px 0px 0px 148px;
	padding-right: 16px;
	padding-left: 16px;
}
#centerSize {
	margin-right: auto;
	margin-left: auto;
}

#rightBox {
	position: absolute;
	z-index: 3;
	top: 0px;
	/* [disabled]right: 24px; */
	right: 4%;
	/* [disabled]left: 90%; */
}
/* NN4 collapses the right column if the width is specified
Other bowsers collapse if it isn't */
#rightBox {
	width: 68px;
}
#rightSpace {
	font-size: 12px;
	text-align: center;
	padding-top: 152px;
	color: #996666;
}
#rightSpace a {
	color: #906060;
	text-decoration: none;
}
#rightSpace a:hover {
	color: #c33;
	padding-bottom: 0px;
	border-bottom: 1px dotted #C33;
}

#head {
	width: 100%;
	max-width: 1260px;
	margin-right: auto;
	margin-left: auto;
	top: 0px;
	background-color: #dddde0;
	height: 42px;
	font-size: 24px;
	text-align: center;
	color: #779;
	padding-top: 15px;
	border-bottom: 1px solid #bababf;
}
#intro,
#hist #intro2 {
	padding-left: 5px;
	padding-right: 10px;
	margin-bottom: 16px;
	margin-top: 12px;
}
#intro p,
#intro td,
#hist #intro2 td {
	font-size: 13px;
	line-height: 1.5em;
	text-align: justify;
	padding-left: 10px;
	border-left: 4px solid #ccc;
}
#intro a,
#hist #intro2 a {
	color: #2b2b2b;
	text-decoration: none;
	border-bottom: 1px dotted #2b2b2b;
	padding-bottom: 1px;
}
#intro a:hover,
#hist #intro2 a:hover {
	color: #CC3333;
	border-bottom: 1px dotted #CC3333;
}
#intro,
#caption,
#hist #intro2,
#hist .caption {
	width: 90%;
	color: #2b2b2b;
	vertical-align: top;
	margin-right: auto;
	margin-left: auto;
}

#caption,
#hist .caption {
	padding-left: 1px;
	margin-bottom: 0px;
}
#caption td,
#hist .caption td {
	font-size: 12px;
	line-height: 1.5em;
	text-align: justify;
	padding-left: 20px;
	padding-right: 8px;
	color: #404040;
}
#caption p,
#hist .caption p {
	margin-top: 0px;
	margin-bottom: 12px;
}
#caption ul {
	margin-top: -6px;
	list-style-type: none;
}
#caption a,
#hist .caption a {
	color: #333333;
	text-decoration: none;
	border-bottom: 1px dotted #666666;
}
#caption a strong {
	color: #556;
}
#caption a:hover,
#hist .caption a:hover {
	color: #CC3333;
	border-bottom: 1px dotted #CC3333;
}
#caption img {
	float: right;
	border: 1px solid #DDDDDD;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 12px;
}
#caption .here {
	/* [disabled]font-size: inherit; */
	text-align: left;
	color: #663333;
	padding-top: 6px;
	/* [disabled]white-space: nowrap; */
	text-indent: -13px;
	padding-left: 14px;
}
#caption .here a {
	color: #663333;
	text-decoration: none;
	border-bottom: 1px dotted #663333;
}
#caption .here a:hover {
	border-bottom: 1px dotted #CC3333;
	color: #CC0000;
}

#photo,
#photo2 {
	width: 624px;
	margin-right: auto;
	margin-left: auto;
}
#photo td,
#photo2 td {
	text-align: center;
}
#photo .pic {
	height: 444px;
	vertical-align: middle;
	z-index: 1;
}
#photo .pic img {
	border: 1px solid #aaa;
	padding: 0px;
	/* [disabled]margin-top: 24px; */
}
#photo .pic .theImage {
	background-repeat: no-repeat;
	background-position: center center;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]border: 1px solid #999; */
}
#photo .pic .theImage:hover,
#photo2 .theImage:hover {
	cursor: pointer;
}

#photo .title,
#photo2 .title {
	font-size: 16px;
	color: #444477;
	padding-top: 24px;
	font-weight: bold;
	padding-bottom: 15px;
}
#photo img {
	/* [disabled]margin-top: 24px; */ /* legacy */
}
#photo .arrbox img {
	margin-top: 0;    /* legacy */
}

.arr {
	width: 32px;
	padding-top: 0px;
}
#mobBack {
	/* [disabled]height: 32px; */
	/* [disabled]width: 32px; */
	/* [disabled]overflow: hidden; */
	display: none;
}
.arrbox img {
	border-style: none;
	margin-top: 0;
}
.arr .next {
 	background: transparent url(../jquery-skins/photo/next-horizontal.png) no-repeat -128px 0;
}
.arr .next:hover {
	background-position: -32px 0;
}
.arr .next:active {
	background-position: -64px 0;
}
.arr .prev {
	background: transparent url(../jquery-skins/photo/prev-horizontal.png) no-repeat -128px 0;
}
.arr .prev:hover {
	background-position: -32px 0;
}
.arr .prev:active {
	background-position: -64px 0;
}

#inav {
	height: 675px;
	width: 130px;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
}
#nav {
	color: #ABABAB;
	white-space: nowrap;
	overflow: hidden;
	/* [disabled]font-size: 12px; */
	/* [disabled]font-weight: bold; */
}
#nav a {
	color: #ABABAB;
	text-decoration: none;
}
#nav .navdim a {
	color: #CCCCCC;
}
#nav a:hover {
	color: #CC3333;
	border-bottom: 1px dotted #CC3333;
}
#nav .button a:hover,
#nav .buttonH a:hover,
#nav .buttonB a:hover {
	border-bottom: none;
}
#nav .navsub {
	font-weight: normal;
	padding-left: 6px;
	margin-top: -6px;
}
#nav .navsub a {
	color: #a3a3a3;
}
#nav .navsub a:hover {
	color: #CC3333;
	font-weight: bold;
}
#nav .navsub1 {	/*Rule between sections */
	padding-top: 12px;
	border-top: 1px solid #CCCCCC;
	margin-top: 14px;
	margin-right: 1.5em;
} 

#icopy {
	width: 100%;
	border: 0;
	position: relative;
	z-index: 9;
}

#iarch {
	width: 68px;
	border: 0px;
	margin-right: -9px;
}
#iotm #iarch {
	margin-right: 0px;
}
#iarch,
.scrollWrapper {
	height: 675px;
}

.pinky {
	width: 64px;
	border-bottom: 4px solid #d0c0c0;
}
.pinky a img {
	border-style: none;
	margin-bottom: 0px;
	margin-left: 3px;
}
.pinky p {
	margin-top: 4px;
	margin-bottom: 8px;
}
.pinky .gall {
	margin-left: -2px;
	margin-top: -3px;
	margin-bottom: 12px;
	font-weight: bold;
}
.pinky .gall a {
	color: #9e7878;
}
.pinky #crop, .pinky .crop {
	height: 64px;
	width: 64px;
	overflow: hidden;
	text-align: center;
	margin-left: 0px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 110%;
}
.pinky .crop:hover {
	cursor: pointer;
}
.pinky #crop img, .pinky .crop img { /* legacy */
	margin-top: -18px;
	margin-left: -21px;
	position: relative;
}
#prnto {
	margin-top: 48px;
	width: 64px;
	margin-left: 2px;
}
#prnto a:hover {
	text-decoration: none;
}
#prnti {
	width: 60px;
	border: 2px solid #bfbbbb;
	background-color: #e1dddd;
	padding-top: 4px;
	padding-bottom: 4px;
	color: #AA7466;
}
#prnti:hover {
	background-color: #F5F5F5;
	border-color: #bfbbbb;
	color: #9d6b5e;
}

#lightbox,
#lightbox2 {
	width: 96%;
	border-left: 1px dotted #CCCCCC;
	padding-left: 7px;
	/*background-image: none;*/
	background-repeat: no-repeat;
	background-position: 50.5% 160px;
	margin-right: auto;
	margin-left: auto;
}
#lightbox td,
#lightbox2 td {
	text-align: center;
	vertical-align: bottom;
	/* [disabled]height: 144px; */
	width: 25%;
}
.lightboxWide td {
	padding-top: 6px;
	padding-bottom: 6px;
	height: 136px; /* during screen draw */
}
#lightbox .vert {
	padding-top: 0px;
}

#lightbox img,
#lightbox2 img {
	border: 1px solid #F0F0F0;
	padding: 15px;
}
#lightbox a img:hover {
	border: 1px solid #BBBBBB;
}

#photo .jsp {
	font-size: 24px;
	line-height: 26px;
	padding-top: 27px;
	padding-bottom: 30px;
	color: #9999BB;
	text-align: center;
	vertical-align: top;
	margin-right: auto;
	margin-left: auto;
}
#photo .jsp p {
	margin-top: 0px;
	margin-bottom: 0px;
}
#photo .jsp a {
	color: #9999BB;
	text-decoration: none;
}
#photo .jsp a:hover {
	border-bottom: 1px dotted #9999BB;
}
h1,
#photo .jsp .pagehead,
#photo2 .pagehead {
	font-size: 18px;
	font-weight: bold;
	color: #444477;
	/* [disabled]vertical-align: top; */
	/* [disabled]padding-bottom: 16px; */
	text-align: center;
}
h1,
#photo .jsp .pagehead {
	margin-top: 28px;
	margin-bottom: -16px;
}

.txtnorm {
	font-weight: normal;
}
.txtbord {
	border-bottom: 1px solid #5d6080;
}
.rpsbadge img {
	margin-top: 18px;
	margin-left: 1px;
	border: 1px solid #666;
}
.port .rpsbadge {
	display:none;
}
.redbold {
	font-weight: bold;
	color: #990000;
}
.nowrap {
	white-space: nowrap;
}

li.menu {   /* noscript fix */
	display:none
}
#vertMenuButt li {
	/* [disabled]display: none; */
}


@media only screen 
and (min-device-width: 768px) and (max-device-width: 1024px) {

#centerSpace {
	margin-right: 120px;
}

#intro,
#caption {
	width: 94%;
	padding-right: 6px;
	padding-left: 0px;
}
#intro p,
#intro td,
#hist #intro2 td {
	/* [disabled]font-size: 14px; */
	padding-left: 8px;
}
#caption td,
#hist .caption td {
	font-size: 13px;
	padding-left: 12px;
	padding-right: 0px;
}
#lightbox {
	width: 100%;
	padding-left: 0px;
}
#lightbox td, #lightbox2 td {
	padding-top: 0px;
	padding-bottom: 0px;
}
#leftBox {
	top: 120px;
}
#rightSpace {
	font-size: 13px;
	padding-top: 132px; /* #leftBox:top + 12 */
}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

#photo .jsp {
	font-size: 28px;
}
h1,
#photo .jsp .pagehead,
#photo2 .pagehead {
	font-size: 21px;
}
#centerSpace {
	margin-left: 12px;
	margin-right: 12px;
}
#intro,
#caption {
	padding-right: 0px;
}
#caption td,
#hist .caption td {
	font-size: 15px;
	padding-left: 3px;
}
#intro p,
#intro td,
#hist #intro2 td {
	font-size: 16px;
}
#lightbox {
	border-left: none;
}
#rightBox {
	display: none;
}
#leftBox {
	top: 0px;
	left: 18px;
	/* [disabled]visibility: hidden; */
}
#inav {
	width: 200px;
	height: 120px;
}
.notVert {
	display: none;
}

}

@media only screen and (max-device-width: 40em) {

body {
  font-size: 175%; /* resets the page font size */
}

#icopy,
#foot,
.push {
	height: 5.5em;
}
#padd #wrap {
	margin-bottom: -5.5em;
}
#padd #wrap,
#padd #foot {
	max-width: none;
}
#iotm #main,
#iotm #padd #wrap {
	/* [disabled]background-color: #bfbfbf; */
}


#centerSpace {
	margin-right: 0px;
	margin-left: 0px;
/*	padding-right: 0.2em;
	padding-left: 0.2em;*/
	padding-right: 0em;
	padding-left: 0em;
}
#leftBox, 
#rightBox {
	width: 0px;
	overflow: hidden;
	visibility: hidden;
}
#rightBox {
	position: relative;
	left: 0px;
	width: 100%;
	right: 0px;
	visibility: visible;
}
#rightSpace {
	width: 100%; /* for mob test */
	height: 100%;
	padding-top: 0px;
	font-size: 1.1em;
}
#rightSpace a {
	color: #e5e5e5;
}

#photo .jsp {
	font-size: 2em;
	line-height: 1em;
	padding-top: 0.8em;
	padding-bottom: 0.9em;
	background-color: #38383c;
}
#photo .jsp a,
#mobBack a {
	color: #9696a8;
}
#iotm #photo .jsp a,
#iotm #mobBack a {
	color: #bcbcc0;
}
#hist #photo .jsp a,
#hist #mobBack a::before {
	color: #9ba39b;
}
h1,
#photo .jsp .pagehead,
#photo2 .pagehead {
	font-size: 0.8em;
	line-height: 1em;
	color: #f0f0f0;
	/* [disabled]padding-bottom: 1.3em; */
	margin-top: 0.8em;
	margin-bottom: 0.1em;
}

#iotm #photo .jsp {
	background-color: #666;
}
#hist #photo .jsp,
#hist #photo2 {
	background-color: #373e37;
}


#hist .subHead {
	margin-top: -1.5em;
	margin-bottom: -0.5em;
}
#hist .subHead .pagehead {
	font-size: 1.4em;
	line-height: 1.2em;
	width: 12%;
	text-align: center;
}

#intro,
#caption,
#hist #intro2,
#hist .caption {
	width: 94%;
}

#intro,
#hist #intro2 {
	padding-right: 0px;
	padding-left: 0px;
	margin-bottom: 1.5em;
	/* [disabled]margin-right: 0.1em; */
}
#intro,
#hist #intro2 {
	margin-top: 1.5em;
}
#hist #intro {
	/* [disabled]margin-top: 0.8em; */
}
#intro p,
#intro td,
#hist #intro2 td {
	font-size: 1em;
	line-height: 1.5em;
	padding-top: 0.6em;
	padding-right: 1em;
	padding-bottom: 0.6em;
	padding-left: 1em;
	color: #111;
	border: none;
}

#photo,
#photo2 {
	width: 100%;
}
#photo img,
#photo2 .theImage img {
	width: 80%;
	height: auto;
}
#photo .pic {
	width: 88%;
}
#photo .pic .theImage {
	background-size:contain;
	width: 100% !important;
	border: none !important;
}
#photo2 .theImage {
	background-size:contain;
	border-width: 2px;
}
#photo .title,
#photo2 .title {
	font-size: 1.5em;
	padding-top: 1em;
	/* [disabled]padding-bottom: 0.5em; */
}

.arr {
	width:6%;
}
.arr .next,
.arr .prev {
	background-repeat: no-repeat;
	background-position: center center;
}
.arr .next,
.arr .next:hover,
.arr .next:active {
	background-image: url(../jquery-skins/photo/mob-next.png);
	margin-left: -100%;
	background-position: right center;
}
.arr .prev,
.arr .prev:hover,
.arr .prev:active {
	background-image: url(../jquery-skins/photo/mob-prev.png);
	margin-right: -100%;
	background-position: left center;
}
#hist .arr .next,
#hist .arr .next:hover,
#hist .arr .next:active {
	background-image: url(../jquery-skins/photo/mob-next-hist.png);
}
#hist .arr .prev,
#hist .arr .prev:hover,
#hist .arr .prev:active {
	background-image: url(../jquery-skins/photo/mob-prev-hist.png);
}
.arrbox {
	width: 200%;
	height: 400px;
}
.arrbox img {
	height: 100% !important;
	width: 100% !important;
}

#caption,
#hist .caption {
	margin-top: 1em;
}
#hist .caption {
	margin-top: 2em;
}
#caption td,
#iotma .caption,
#hist .caption td {
	font-size: 1.1em;
	line-height: 1.5;
	padding-bottom: 0.5em;
	padding-left: 10px;
	text-align: left;
}
#caption p,
#iotma .caption p,
#hist .caption p {
	margin-bottom: 0.8em;
}
#caption .here {
	font-size: inherit;
	text-indent: -1.25em;
	white-space: normal;
	margin-left: 3.3%;
	margin-top: 1.3em;
	margin-bottom: 1.3em;
}
#caption img {
	height: auto;
	width: 25%;
	margin-left: 1em;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}
#caption a,
#caption .here a {
	border-bottom-width: thin;
	border-bottom-style: solid;
}

#iotma,
#lightbox,
#lightbox2 {
	padding-left: 0px;
	border-left-style: none;
	margin-bottom: -2em;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0.5em;
}
#iotma {
	border-spacing: 1em;
	/* [disabled]margin-top: 0.3em; */
	margin-bottom: 0px;
	max-width: none;
	border-top: 0.3em solid #f0f0f0;
}
#iotma .caption {
	padding-left: 0px;
	padding-right: 0px;
}
#iotma .caption p {
	line-height: 1.4em;
	margin-top: -0.3em;
	margin-bottom: 0em;
}
#iotma .head,
#iotma .arch {
	display: none;
}

#lightbox td,
#iotma .pic {
	padding-top: 0px;
	padding-bottom: 0px;
}
#lightbox td {
	vertical-align: middle;
}

#lightbox td div,
#lightbox2 td div,
#iotma .pic div {
	overflow: hidden;
	position: relative;
}

#lightbox img,
#iotma .pic img {
	padding: 0px;
	border-style: none;
	position: absolute;
	margin: 0px;
}
#lightbox img:hover {
	border-style: none;
	padding: 0px;
	margin: 0px;
}
#hist #lightbox,
#hist #lightbox2,
#iotm #iotma {
	background-color: #f0f0f0;
}


#mobBack {
	position: absolute;
	left: 0.2em;
	top: 0.05em;
	width: 3em;
	height: 2.5em;
	font-size: 2.4em !important;
	z-index: 5;
	display: inline;
}
#mobBack a {
	text-decoration: none;
	display: block;
	padding-top: 0.4em;
}
#mobBack .gall {
	font-weight: normal;
	text-align: left;
	height: 100%;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
}
#mobBack .gall a {
	display: block;
	font-size: 0.9em;
	visibility: hidden;
}
#mobBack .gall a:hover {
	color: #9999BB;
	border-bottom: none;
}
#mobBack a::before {
	content: "<";
	margin-right: 3em;
	visibility: visible;
}
#hist #mobBack a {
	color: #c2ccc2;
}

.scrollWrapper {
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
	margin-top: 1.3em;
	margin-bottom: 3em;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

#iotm #arch {
	width: 100%;
}
#iotm #arch .dropdown {
	border: none;
	margin: 0px;
	padding: 0px;
}
#iotm #arch li {
	margin-bottom: 0px;
}

#iarch {
	width: 100%;
}

/*#comp,*/
.rightMenu {
	font-size: 1.1em;
	width: 100%;
}
#comp::before {
	content: "Other years:";
	font-size: 1.35em;
	color: #333;
}
#arch::before {
	content: "Archives:";
	font-size: 1.35em;
	color: #333;
}
#time::before {
	content: "t i m e l i n e";
	font-size: 1.35em;
	color: #fefefe;
	padding-left: 0.4em;
}
.rightMenu .dropdown {
	font-size: 1.35em;
	border-left: none;
	margin-left: auto;
	width: 100%;
	margin-right: auto;
	margin-top: 0.5em;
}
.rightMenu .dropdown ul {
	padding-left: 0px;
}
.rightMenu li {
	background-color: #848484;
	margin-bottom: 0.5em;
}
#time li,
#iotm .arch li {
	background-color: #bdbfbd;
}
.rightMenu li a {
	display: block;
	border: none;
}
.rightMenu li a:hover {
	background-color:inherit;
}
.rightMenu li a,
.rightMenu li a:hover,
.rightMenu li .thisPage,
#iotm #rightSpace a:hover {
	color: #e5e5e5;
	border: none;
	font-weight: bold;
	padding-top: 0.4em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	text-decoration: none;
}
#time li a {
	color: #7F8F7F;
}
.rightMenu li a::after {
	content: "    >";
	padding-left: 1em;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1em;
}
.rightMenu li .thisPage {
	color: #b3b3b3;
	margin-left: 0px;
	border-left-style: none;
	background-color: #9b9b9b;
}
#time li .thisPage {
	background-color: #9ea89e;
}
.rightMenu li .thisPage:hover {
	border-style: none;
	color: #b3b3b3;
}
.rightMenu li .thisPage::after {
	content: "";
}
.rightMenu #end {
	display: none;
}
.pinky {
	width: 100%;
	background-color: transparent;
	border-bottom-style: none;
}
.pinky p {
	margin-top: 0px;
}
.pinky .next,
.pinky .prev,
#prnto {
	display: none;
}

.notmob {
	display: none;
}

}