/*
@font-face {
	font-family: 'roboto';
	font-style: normal;
	src:  local('roboto'), local('Roboto'),
	      url('/fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-bold';
	font-weight: bold;
	src:  local('roboto-bold'), local('Roboto-Bold'),
	      url('/fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-italic';
	font-style:  italic;
	src:  local('roboto-italic'), local('Roboto-Italic'),
	      url('../__fonts/Roboto-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-thin';
	font-style:  thin;
	src:  local('roboto-thin'), local('Roboto-Thin'),
	      url('../__fonts/Roboto-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-thinitalic';
	font-style:  thin;
	font-style:  italic;
	src:  local('roboto-thinitalic'), local('Roboto-ThinItalic'),
	      url('../__fonts/Roboto-ThinItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-bolditalic';
	font-weight: bold;
	font-style:  italic;
	src:  local('roboto-bolditalic'), local('Roboto-BoldItalic'),
	      url('../__fonts/Roboto-BoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-light';
	src:  local('roboto-light'), local('Roboto-Light'),
	      url('../__fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-lightitalic';
	src:  local('roboto-lightitalic'), local('Roboto-LightItalic'),
	      url('../__fonts/Roboto-LightItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-medium';
	src:  local('roboto-medium'), local('Roboto-Medium'),
	      url('../__fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-mediumitalic';
	src:  local('roboto-mediumitalic'), local('Roboto-MediumItalic'),
	      url('../__fonts/Roboto-MediumItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-black';
	src:  local('roboto-black'), local('Roboto-Black'),
	      url('../__fonts/Roboto-Black.ttf') format('truetype');
}
@font-face {
	font-family: 'roboto-blackitalic';
	src:  local('roboto-blackitalic'), local('Roboto-BlackItalic'),
	      url('../__fonts/Roboto-BlackItalic.ttf') format('truetype');
}
*/


/* ---------- General styles (apply to most pages) ---------- */
html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; }

.ssBody   { font-family: 'roboto-light', arial; color:RGB(10,10,10); font-size:12pt; width:100%; margin:0; padding:0; letter-spacing:0.05em; background-color:white; }
.ssBody::after { content:""; display:table; clear:both; }

.m_ssBody { font-family: 'roboto-light', arial; color:RGB(11,11,11); font-size:26pt; width:100%; margin:0; padding:0; letter-spacing:0.05em; background-color:white; }
.m_ssBody::after { content:""; display:table; clear:both; }

.ssSelect   { font-family: 'roboto'; font-size:14pt; }
.m_ssSelect { font-family: 'roboto'; font-size:20pt; }



/* ---------- Main content ---------- */
.ssContent { clear:both; position:relative; margin:8px auto 8px auto; min-width:1024px; max-width:2048px; width:98%; padding:0px; min-height:36em; background-color:white; }
.ssContent::after { content:""; display:table; clear:both; }

.m_ssContent { clear:both; position:relative; margin: 0 auto 0 auto; width:99%; padding:0px; min-height:30em; background-color:white; }
.m_ssContent::after { content:""; display:table; clear:both; }

.ssTitleBar           { clear:both; float:left; width:100%; margin:0; padding:0; }
.m_ssTitleBar         { clear:both; float:none; width:99%; margin:0 auto 0 auto; padding:0; }

.ssTitleLeft          { clear:none; float:left; width:12%; margin:0; padding:8px 0 2px 0; min-height:1em; text-align:center; }
.m_ssTitleLeft        { clear:none; float:left; width:22%; margin:0; padding:8px 0 2px 0; min-height:1em; text-align:center; }

.ssTitleRight         { clear:none; float:right; width:12%; margin:0; padding:8px 0 2px 0; min-height:1em; font-size:12pt; }
.m_ssTitleRight       { clear:none; float:right; width:22%; margin:0; padding:8px 0 2px 0; min-height:1em; font-size:18pt; text-align:center;  }

.ssTitleText          { clear:none; float:none; width:75%; margin:0 auto 0 auto; padding:12px 0 2px 0; text-align:center; font-family:'roboto-medium'; font-size:14pt; }
.m_ssTitleText        { clear:none; float:none; width:54%; margin:0 auto 0 auto; padding:12px 0 2px 0; text-align:center; font-family:'roboto-medium'; font-size:30pt; }

.ssSubtitleText       { clear:none; float:none; width:75%; margin:0 auto 0 auto; padding:2px 0 12px 0; text-align:center; font-family:'roboto-light'; font-size:12pt; }
.m_ssSubtitleText     { clear:none; float:none; width:54%; margin:0 auto 0 auto; padding:2px 0 12px 0; text-align:center; font-family:'roboto-light'; font-size:24pt; }

	.ssTitleLeft A:link       { color:RGB(220,0,0); text-decoration: none; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssTitleLeft A:visited    { color:RGB(220,0,0); text-decoration: none; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssTitleLeft A:hover      { color:RGB(220,0,0); text-decoration: none; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }

	.m_ssTitleLeft A:link     { color:RGB(220,0,0); text-decoration: none; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssTitleLeft A:visited  { color:RGB(220,0,0); text-decoration: none; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssTitleLeft A:hover    { color:RGB(220,0,0); text-decoration: none; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }


/* ---------- Select ---------- */
.ssCtrlLabel     { clear:none; float:left; margin:0; padding:3px 4px 0 0;   font-family:'roboto';       font-size:12pt; }
.m_ssCtrlLabel   { clear:none; float:none; display:inline-block; margin:0; padding:3px 4px 0 6px; font-family:'roboto-light'; font-size:18pt; }

.ssCtrlSelect    { clear:none; float:left; margin:0; padding:0; }
.m_ssCtrlSelect  { clear:none; float:none; display:inline-block; margin:0; padding:0; }


/* ---------- Nav ---------- */
.ssNav           { clear:both; float:left; width:100%; margin:4px 0 4px 0; padding:8px 0 8px 0; text-align:center; }
.m_ssNav         { clear:both; float:none; width:99%;  margin:1em auto 1em auto; padding:8px 0 8px 0; text-align:center; }

.ssNavActive     { background-color:RGBA( 220, 0, 0, 0.15 ); }

.ssNavElement    { display:none; clear:none; float:none; min-width:1.2em; padding:2px; border:1px red solid; margin:0 0.2em 0.2em 0.2em;   cursor:pointer; border-radius:4px; }
.m_ssNavElement  { display:none; clear:none; float:none; min-width:1.2em; padding:6px; border:1px red solid; margin:0 0.75em 0.75em 0.5em; cursor:pointer; border-radius:6px; }


/* ---------- images ---------- */
.ssSetTitle     { font-family:'roboto-medium'; font-size: 112%; padding:2px 8px 2px 8px; display:inline-block; }

.ssSetMetaData   { clear:both: float:left; width:100%; padding:4px 0 4px 0; }

.ssSetMetaEntry  { clear:none; display:inline-block; padding:0 0 1px 0; text-align:left; border:0px #00f solid; margin-right:2em;  }

/* .ssSetMetaEntry  { clear:both: float:left; width:98%; padding:0 0 1px 0; text-align:center; } */

.ssSetMetaName   { font-family:'roboto-medium'; font-size: 106%; color:#000; }
.ssSetMetaValue  { font-family:'roboto-light' ; font-size: 106%; color:#000; }

.ssImgPane      { float:left; clear:both; width:100%; padding:0; margin:0 0 1em 0; }
.m_ssImgPane    { float:left; clear:both; width:100%; padding:0; margin:0 0 1em 0; }

.ssImg          { display:none; float:left; clear:none; margin:0; min-height:36px; min-width:36px; cursor:pointer; }
.m_ssImg        { display:none; float:left; clear:none; margin:0; min-height:36px; min-width:36px; cursor:pointer; }

.ssImgFrame     { clear:both; float:left; width:100%; margin:0 0 2px 0; padding:0; border:1px #000 solid; }
.m_ssImgFrame   { clear:both; float:left; width:100%; margin:0 0 4px 0; padding:0; border:1px #000 solid; }

.ssImgCaption   { clear:both; float:left; width:100%; margin:0; padding:0;         font-family:'roboto-light'; font-size:10pt; text-align:center; }
.m_ssImgCaption { clear:both; float:left; width:100%; margin:0; padding:0 3% 0 3%; font-family:'roboto-light'; font-size:20pt; text-align:center; }

	.ssImgCaption A:link       { color:RGB(220,0,0); text-decoration: underline; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssImgCaption A:visited    { color:RGB(220,0,0); text-decoration: underline; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssImgCaption A:hover      { color:RGB(220,0,0); text-decoration: none; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }

	.m_ssImgCaption A:link     { color:RGB(220,0,0); text-decoration: none; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssImgCaption A:visited  { color:RGB(220,0,0); text-decoration: none; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssImgCaption A:hover    { color:RGB(220,0,0); text-decoration: none; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }

.ssImageDiv     { display:none; clear:both; float:none; width:96%; margin:0 auto 1em auto; padding:0; height:6px; border-bottom:1px RGB(250,250,250) solid; }
.m_ssImageDiv   { display:none; clear:both; float:none; width:96%; margin:0 auto 1em auto; padding:0; height:6px; border-bottom:1px RGB(250,250,250) solid; }


/* ---------- main image ---------- */
.ssMainImagePane          { display:none; float:left; clear:both; width:100%; padding:0; margin:0 0 1em 0;       }
.m_ssMainImagePane        { display:none; float:none; clear:both; width:99%;  padding:0; margin:0 auto 1em auto; }

.ssMainImageFrame         { clear:both; float:left; width:100%; margin:0; padding:0; }
.m_ssMainImageFrame       { clear:both; float:left; width:100%; margin:0; padding:0; }

.ssMainImageCaption       { clear:both; float:left; width:94%; margin:1em 3% 1em 3%; padding:0; font-family:'roboto-light'; font-size:12pt; text-align:center; }
.m_ssMainImageCaption     { clear:both; float:none; width:94%; margin:1em 3% 1em 3%; padding:0; font-family:'roboto-light'; font-size:22pt; text-align:center; }

	.ssMainImageCaption A:link       { color:RGB(220,0,0); text-decoration: none; font-size:12pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssMainImageCaption A:visited    { color:RGB(220,0,0); text-decoration: none; font-size:12pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssMainImageCaption A:hover      { color:RGB(220,0,0); text-decoration: none; font-size:12pt; font-family:'roboto-medium'; letter-spacing:0.04em; }

	.m_ssMainImageCaption A:link     { color:RGB(220,0,0); text-decoration: none; font-size:22pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssMainImageCaption A:visited  { color:RGB(220,0,0); text-decoration: none; font-size:22pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssMainImageCaption A:hover    { color:RGB(220,0,0); text-decoration: none; font-size:22pt; font-family:'roboto'; letter-spacing:0.04em; }


/* ---------- info pane ---------- */
.ssInfoPane   { 
	clear:both; float:left; width:100%; padding:4px 0 4px 0; margin:2em 0 4em 0; 
	text-align:center; font-family:'roboto-light'; font-size:10pt; color:#999;
}

.m_ssInfoPane { 
	clear:both; float:left; width:100%; padding:8px 0 8px 0; margin:2em 0 4em 0; 
	text-align:center; font-family:'roboto-light'; font-size:18pt; color:#aaa;
}


/* ---------- index ---------- */

.ssIndex { clear:both; position:relative; margin:2em auto 8em auto; min-width:1024px; max-width:1152px; width:98%; padding:0px; }
.ssIndex::after { content:""; display:table; clear:both; }

.m_ssIndex { clear:both; position:relative; margin: 2em auto 4em auto; width:98%; padding:0px; min-height:30em; background-color:white; }
.m_ssIndex::after { content:""; display:table; clear:both; }

.ssIndexTitle   { clear:both; float:left; width:100%; margin:0 auto 0.2em auto; padding:0; font-family:'roboto'; font-size:12pt; text-align:left; }
.m_ssIndexTitle { clear:both; float:left; width:100%; margin:0 auto 0.2em auto; padding:0; font-family:'roboto'; font-size:28pt; text-align:center; }

.ssIndexSubTitle   { clear:both; float:left; width:100%; margin:0 auto 1em auto; padding:0; font-family:'roboto-light'; font-size:10pt; text-align:left; }
.m_ssIndexSubTitle { clear:both; float:left; width:100%; margin:0 auto 2em auto; padding:0; font-family:'roboto-light'; font-size:22pt; text-align:center; }

.ssYear    { clear:both; float:left; width:99%;  margin:0 0 1em 0;       padding:0; }
.m_ssYear  { clear:both; float:left; width:98%;  margin:0 auto 1em auto; padding:0; }

.ssYearLabel   { clear:both; float:left; margin:0; padding:0; font-family:'roboto'; font-size:12pt; }
.m_ssYearLabel { clear:both; float:left; margin:0; padding:0; font-family:'roboto'; font-size:22pt; } 

.ssYearGalleries   { clear:none; float:right; width:94%; margin:0; padding:0; border:1px #ccc solid; border-radius:4px; }
.m_ssYearGalleries { clear:none; float:right; width:90%; margin:0; padding:0; border:1px #ccc solid; border-radius:4px; }

.ssActiveGallery { color:RGB( 169,  30, 31 ); }

.ssSwipeNote   { clear:both; width:94%; margin:0.3em 0 0.5em 0;     padding:0; font-size:9pt;  font-family:'roboto-lightitalic'; color:#aaa; }
.m_ssSwipeNote { clear:both; width:94%; margin:1em auto 0.5em auto; padding:0; font-size:22pt; font-family:'roboto-lightitalic'; color:#000; }


.ssCaptionDate { color:#bbb; font-family:'roboto-lightitalic'; }

.ssEmphasis { color:#000; font-family:'roboto-lightitalic';  font-weight:bolder; }

.ssSetHeader { clear:both; width:100%; background-color:RGBA(240,240,240,0.5); margin:4px 0 8px 0; border:1px #ccc solid; border-radius:4px; }

.ssPlace { font-family:'roboto-lightitalic'; color:RGB(220,0,0); }


.ssGallery           { clear:none; float:left; width:47%; margin:0 0 0.80em 1%; padding:4px; }
.m_ssGallery         { clear:both; float:left; width:99%; margin:0 0 0.60em 0;  padding:4px; }

.ssGalleryImage      { clear:both; float:left; width:35%; margin:0; padding:0; border:1px #000 solid; cursor:pointer; }
.m_ssGalleryImage    { clear:both; float:left; width:30%; margin:0; padding:0; border:1px #000 solid; cursor:pointer; }

.ssGalleryTitle      { clear:none; float:left;  width:60%; margin:0 0 0 1%; padding:0.5em 0 0.3em 0;  font-family:'roboto-medium'; font-size:10pt; }
.m_ssGalleryTitle    { clear:none; float:right; width:68%; margin:0;        padding:0.2em 0 0.2em 0;  font-family:'roboto-medium'; font-size:20pt; }

.ssGalleryUrl        { clear:none; float:left;  width:60%; margin:0 0 0 1%; padding:0 0 0.3em 0;  font-family:'roboto-medium'; font-size:10pt; }
.m_ssGalleryUrl      { clear:none; float:right; width:68%; margin:0;        padding:0 0 0.2em 0;  font-family:'roboto-medium'; font-size:20pt; }

.ssGalleryLastMod    { clear:none; float:left;  width:60%; margin:0 0 0 1%; padding:0;            font-family:'roboto-light';  font-size:9pt;  color:#aaa; }
.m_ssGalleryLastMod  { clear:none; float:right; width:68%; margin:0;        padding:0;            font-family:'roboto-light';  font-size:18pt; color:#aaa; }

.ssGalleryLabel      { font-family:'roboto-medium'; font-size:9pt;  }
.m_ssGalleryLabel    { font-family:'roboto-light';  font-size:18pt; }

	.ssGalleryUrl A:link       { color:RGB(220,0,0); text-decoration: underline; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssGalleryUrl A:visited    { color:RGB(220,0,0); text-decoration: underline; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }
	.ssGalleryUrl A:hover      { color:RGB(220,0,0); text-decoration: underline; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.04em; }

	.m_ssGalleryUrl A:link     { color:RGB(220,0,0); text-decoration: underline; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssGalleryUrl A:visited  { color:RGB(220,0,0); text-decoration: underline; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }
	.m_ssGalleryUrl A:hover    { color:RGB(220,0,0); text-decoration: underline; font-size:20pt; font-family:'roboto'; letter-spacing:0.04em; }

.ssSony   { font-size:8pt; font-family: rockwell, egyptienne, serifa, memphis; color:RGB(10,10,10); }



/* ------- Custom overlay for modals ------- */

/* The very top - titlebar */
.ui-dialog-titlebar { display: none; }
.ui-dialog-titlebar-close { display: none; }

/* Stop the grey overlay at the top */
.ui-widget-content { background-color:white; background: url(''); }

/* The middle section of the dialog */
.ui-dialog { background-color:white; font:roboto; padding:4px; margin:0; z-index:6505; }

/* The dialog button pane at the bottom (above the buttonset)  */
.ui-dialog-buttonpane { display:none; } 

/* The container for the dialog buttons at the bottom */
.ui-dialog-buttonset  {
        border:none; margin:0 0 20px 0; width:100%; text-align:center; font-family:'roboto'; font-size:12pt; letter-spacing:0.06em; margin-bottom:3em;
}

/* The buttons themselves */
.ui-dialog-buttonset button { border:none; font-family:'roboto'; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        border: 1px solid #cccccc;
        background: #fff,
        font-family:'roboto-medium';
        color: RGB( 165, 206, 57 );
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus  {
        background: #f0f;
}

.ui-widget-overlay.slideshow-overlay { 
        background-color: black; background-image: none; opacity: 0.7; 
	position:fixed; left:0; top:0; width:100%; ; height:100%; 
}




/* ------ Modal Slideshow ------ */
#ModalSlideshow { display:none; }

.ssModal    { padding:10px; }
.m_ssModal  { padding:20px; }

.ssModalLeftNav     { 
	clear:none; float:left;  display:inline-block; width:3%; height:50px;  margin:0 0 10px 0;  cursor:pointer; color:#999; font-family:'roboto-thin'; font-size:26pt; text-align:center; 
}
.m_ssModalLeftNav   { 
	clear:none; float:left;  display:inline-block; width:5%; height:50px;  margin:0 0 10px 0;  cursor:pointer; color:#aaa; font-family:'roboto-thin'; font-size:26pt; text-align:center; 
}

.ssModalRightNav    { 
	clear:none; float:left;  display:inline-block; width:3%; height:50px;  margin:0 0 10px 1%; cursor:pointer; color:#999; font-family:'roboto-thin'; font-size:26pt; text-align:center; 
}
.m_ssModalRightNav  { 
	clear:none; float:left;  display:inline-block; width:5%; height:50px;  margin:0 0 10px 3%; cursor:pointer; color:#aaa; font-family:'roboto-thin'; font-size:26pt; text-align:center; 
}

.ssModalClose { 
		clear:none; float:right; display:inline-block; width:3%; height:50px;  margin:0 0 10px 0;  cursor:pointer; color:#999; 
		background: url("../__css/close_white_x_256_o60.png") 6px 10px no-repeat; background-size:auto 30px;
}	
.m_ssModalClose { 
	clear:none; float:right; display:inline-block; width:5%; height:50px;  margin:0 0 10px 0;  cursor:pointer; color:#999; 
		background: url("../__css/close_white_x_256_o60.png") 6px 10px no-repeat; background-size:auto 30px;
}


.ssModalLabel       { color:RGB(165,206,31); text-decoration: none; font-size:10pt; font-family:'roboto-medium'; letter-spacing:0.06em; }
.m_ssModalLabel     { color:RGB(165,206,31); text-decoration: none; font-size:20pt; font-family:'roboto';        letter-spacing:0.06em; }

.ssModalCaption     { 
	clear:none; float:left; width:85%; padding:0; margin:0 0 12px 1%; min-height:50px; padding:4px 0 4px 0;  font-family:'roboto-light'; font-size:12pt; text-align:center; letter-spacing:0.04em;
}
.m_ssModalCaption   { 
	clear:none; float:left; width:74%; padding:0; margin:0 0 12px 3%; min-height:50px; padding:8px 0 8px 0;  font-family:'roboto-light'; font-size:22pt; text-align:center; letter-spacing:0.04em;
}

.ssModalFrame       { clear:both; float:none; margin:0 auto 0 auto; width:100%; min-height:2px; }
.m_ssModalFrame     { clear:both; float:none; margin:0 auto 0 auto; width:100%; min-height:2px; }

	.ssModalCaption A:link       { color:RGB(165,206,31); text-decoration: none; font-size:12pt; font-family:'roboto-medium'; letter-spacing:0.06em; }
	.ssModalCaption A:visited    { color:RGB(165,206,31); text-decoration: none; font-size:12pt; font-family:'roboto-medium'; letter-spacing:0.06em; }
	.ssModalCaption A:hover      { color:RGB(165,206,31); text-decoration: none; font-size:12pt; font-family:'roboto-medium'; letter-spacing:0.06em; }

	.m_ssModalCaption A:link     { color:RGB(165,206,31); text-decoration: none; font-size:22pt; font-family:'roboto'; letter-spacing:0.06em; }
	.m_ssModalCaption A:visited  { color:RGB(165,206,31); text-decoration: none; font-size:22pt; font-family:'roboto'; letter-spacing:0.06em; }
	.m_ssModalCaption A:hover    { color:RGB(165,206,31); text-decoration: none; font-size:22pt; font-family:'roboto'; letter-spacing:0.06em; }