@font-face {
  font-family: 'WorkSans-Light';
  font-style: normal;
  font-weight: normal;
  src: url('WorkSans-Light.ttf');
  src: local('WorkSans-Light'), local('WorkSans-Light'), url('WorkSans-Light.ttf') format('truetype'); }
  
@font-face {
  font-family: 'Oswald-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('Oswald-Regular.ttf');
  src: local('Oswald-Regular'), local('Oswald-Regular'), url('Oswald-Regular.ttf') format('truetype'); }


BODY, HTML { font-family: 'WorkSans-Light'; margin: 0px; padding: 0px; height: 100%; width: 100%;}


BUTTON { border: solid 1px #888; padding: 4px 16px 4px 16px; font-family: 'WorkSans-Light'; margin: 0px 12px 20px 0px;
	background-color: #eee;  cursor: pointer; color: #666; }
BUTTON:hover{ background-color: #666; color: white; }
BUTTON:disabled { border: solid 1px #888; padding: 4px 16px 4px 16px; font-family: 'WorkSans-Light'; margin: 0px 12px 20px 0px;
	background-color: #eee;  cursor: not-allowed; }
BUTTON.slidebutton { margin: 0px 2px 0px 2px; }
.home { border: solid 1px #000; }
.inactive { color: #aaa; }
BUTTON.inactive:hover { cursor: default; background-color: #eee; color: #aaa; }

PRE { border-bottom: solid 1px red; } /* Array-testausta varten */

#slideleft { position: fixed; left: 2px; top: 48%; z-index: 1000; }
#slideright { position: fixed; right: 2px; top: 48%; z-index: 1001; }

INPUT[type='checkbox'] { border: solid 0px #888; background-color: #fff; }
.line { border: solid 1px #888; padding: 4px; background-color: #fff; width: 100px; } /* INPUT TEXT */
.line200 { width: 200px; background-color: #efefef; border: 1px solid #fff; border-bottom: solid 1px #888;}
.linetitle { width: 100px; text-align: center; display: inline-block; }
.wide { width: 300px; }
TEXTAREA.image_description { width: 400px; height: 30px; resize: none; font-family: 'WorkSans-Light'; font-size: 9pt;}
OPTION.showzoom { width: 200px; }
#showfiletable { display: inline-block; min-width: 200px; border: 0px; padding: 0px; vertical-align: top; margin-left: 20px; border-collapse: collapse; margin-bottom: 12px;}
.showfilecell { border: solid 1px #888; padding: 0px 12px 0px 12px; }
.sfcl { border-right: 0px; }
.sfcr { border-left: 0px; padding-right: 6px; }
.sfcdark { border: solid 1px #888; background-color: #888; color: white; text-align: left; }

.popup { display: block; padding: 20px 40px 20px 40px; margin-left: auto; margin-right: auto; border: solid 1px #888;
	width: 40%; position: fixed; top: 40%; left: 30%; z-index: 200; background-color: #fff; font-size: 9pt; box-shadow: 0px 0px 3px 3px #888; }

.info { font-size: 7pt; margin-top: 6px; margin-bottom: 12px; }

/* UUSI IMAGES-SIVU !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
#superframe {  width: 100%; }
#sizebuttons { z-index: 4109; position: sticky; top: 10px; display: block;}
IMG.images { border: 0px; margin-top: 1px; }
BUTTON.inactive_size { color: #fff; background-color: #aaa; }
BUTTON.inactive_size:disabled { background-color: #aaa; }
BUTTON.inactive_size:hover { cursor: default; background-color: #aaa; color: #fff; }
BUTTON#highlightbutton { margin-left: 0px; border: 0px; transform: rotate(90deg); padding: 6px; margin-left: 3px; -webkit-transform: rotate(90deg); }
.tag { background-color: #666; color: #fff; margin: 1px 2px 1px 0px; white-space: nowrap; padding: 2px 3px 2px 3px; text-decoration: none; display: inline-block; }
.choose { margin: 0px; }
/*DIV.imageframe INPUT.choose { position: absolute; top: 40px; left: 0px; } ÄÄÄH */

/* LOGIN */
.loginpage { text-align: center; height: 100%;  }
.loginpanel { text-align: center; display: block; padding: 20px 40px 20px 40px; margin-left: auto; margin-right: auto; margin-top: 150px; border: 0px; width: 30%; font-size: 9pt; box-shadow: 6px 6px 6px 1px #bbb; background-color: #fff;}

.headline { color: #777; font-size: 16pt; text-transform: uppercase; margin-bottom: 12px; display: block; flex: none; }

.main { margin: 0px 24px 18px 24px; padding: 0px; border-top: solid 0px #888; }

/* YLÄVALIKON punainen lätkä sivun nimellä */
.header { padding: 20px; color: white /*#999*/; font-size: 17pt; text-transform: uppercase; display: inline-block; background-color: rgb(228, 0, 30); margin-top: -0px; margin-left: -24px; font-family: 'Oswald-Regular', sans-serif;
 border-bottom: solid 1px white/*#ccc*/; font-weight: normal; letter-spacing: 2pt; min-width: 100px; text-align: center; }

.menu { padding: 0px 0px 24px 30px; display: inline-block; vertical-align: middle; font-family: 'Oswald-Regular'; }
.linkbrick { display: inline-block; padding: 20px 20px 0px 20px; border-bottom: 1px solid transparent; margin-bottom: 10px; font-family: 'Oswald-Regular'; }
.linkbrick:hover { border-bottom: solid 1px #000; }

.content { padding: 30px; border: solid 0px orange; }
.imageframe { padding-top: 8px; padding-right: 10px; overflow: hidden; position: relative;}

.cb_box { font-size: 9pt; line-height: 2.0em; -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px;
	-webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; display: block; margin-bottom: 20px; max-width: 800px; border-bottom: solid 0px #ccc;}

.cb_box_wider { font-size: 9pt; line-height: 2.0em; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px;
	-webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; display: block; margin-bottom: 30px; max-width: 1000px;}
	
.cb_box_350 { font-size: 10pt; line-height: 2.1em; -webkit-column-width: 350px; -moz-column-width: 350px; column-width: 350px;
	-webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; display: block; margin-bottom: 30px; max-width: 1000px;}

.taglist { border: solid 0px red; display: inline-block; padding-left: 30px;}

.publishing { border: solid 1px #ddd; max-width: 800px; padding: 6px; }

.paletext { color: #888; }
.small { font-size: 8pt; border-bottom: solid 1px #fff; } /* kuvan tiedot ja leimat */
.dname { text-decoration: none; line-height: 0.8em; }
.red { color: red; font-weight: bold; }

.newtab { display: inline; }

#totop { position: fixed; bottom: 2px; right: 2px; z-index: 2500; font-family: "Arial", sans-serif; padding: 3px; }

/* Keskelle formia ängettävä buttonilta näyttävä linkki */
A.voidbutton:hover { color: #fff; background-color: #666; }

.capacity { border: solid 1px #666; padding: 0px; display: block; min-width: 50%; max-width: 600px; margin-top: 6px; }
.capa_part { display: inline-block; margin: 0px; padding: 0px; }
.grid { border-top: 0px; max-height: 8px; }
.grid_div { box-sizing: border-box; max-height: 8px; width: 10%; display: inline-block; border-right: solid 1px #888; padding: 0px; }
.percentage { border: 0px; }

.erillisdiv { margin-top: 20px; padding-top: 20px; border-top: solid 1px #888;  border-left: solid 0px red; }
.irtodiv { margin-top: 20px; padding-top: 20px; }
.tummadiv { margin-top: 20px; padding-top: 20px; background-color: #eee; text-align: center; }

/* TRENDING */
BUTTON.plusmiinus { padding: 8px 12px; border: solid 1px #666; background-color: #fff; font-size: 12pt; border-radius: 50%; }
BUTTON.plusmiinus:hover { color: #fff; background-color: #666; }
.historiarivi { margin-bottom: 5px; white-space: nowrap; }

TABLE.kuvatilasto { border-collapse: collapse; }
.tilastosolu { border: 1px solid #aaa; padding: 2px 4px 2px 4px; }
.tilastosolutumma { background-color: #888; color: #fff; }

/* LIST */
TR.listrow:nth-child(odd) { background-color: rgb(250,250,250); }
TR.listrow:hover { background-color: rgb(240,240,240); }
TD.listcell { border-bottom: solid 1px #ddd; padding-right: 12px; }

/* SELECT */
.selecthover:hover { background-color: rgb(250,250,250); }

/* SHOW - erillinen ja automaattinen kuvienesityssivu */
#nimipalkki { position: fixed; top: 0px; z-index: 900; text-align: center; width: 99%; }
#replaydiv { max-height: 24px; padding: 3px 5px 3px 6px; text-align: center; display: inline-block; background-color: green; color: white; font-size: 12pt; position: fixed; top: 0px; left: 0px; z-index: 1002; }
#exitdiv { max-height: 24px; padding: 3px 5px 3px 6px; text-align: center; display: inline-block; background-color: red; color: white; font-size: 12pt; position: fixed; top: 0px; right: 0px; z-index: 1001; }
#exitbutton { margin-top: -3px; display: inline-block; }
#exitbutton:hover { cursor: default; }
#pausediv { max-height: 24px; padding: 3px 5px 3px 6px; text-align: center; display: inline-block; background-color: #888; color: white; font-size: 12pt; position: fixed; top: 0px; left: 0px; z-index: 1003; }
#pausebutton { margin-top: 0px; display: inline-block; }
#pausebutton:hover { cursor: default; }
#playdiv { max-height: 24px; padding: 1px 5px 1px 6px; text-align: center; display: inline-block; background-color: #888; color: white; font-size: 12pt; position: fixed; top: 0px; left: 0px; z-index: 1004; }
#playbutton { margin-top: 0px; display: inline-block; }
#playbutton:hover { cursor: default; }
#showarea { background-color: #000; text-align: center; height: 100%; width: 100%; position: relative; z-index: 100; }
#show_backbutton { position: fixed; top: 50%; left: 0px; z-index: 1000; padding: 6px 12px 6px 12px; background-color: #888; color: white; }
#show_forwardbutton { position: fixed; top: 50%; right: 0px; z-index: 1000; padding: 6px 12px 6px 12px; background-color: #888; color: white; }
#show_footer { background-color: black; color: white; position: fixed; bottom: 0px; width: 100%; height: 24px; text-align: center; z-index: 110; }


/* SLIDE */
BUTTON.go { border: solid 1px #888; padding: 2px 4px 2px 4px; font-family: 'WorkSans-Light'; margin: 0px;
	background-color: #eee;  cursor: pointer; }
#buttonbar { z-index: 123000; position: relative; }
.slidepage { margin: 0px 0px 6px 0px; padding: 0px; }
.slidebar { text-align: center; padding: 2px; border-bottom: solid 0px #666; margin-bottom: 12px; }
.slideimage { text-align: center; z-index: 10; }
IMG.slide { max-width: 90%; border: solid 1px #666; position: relative; z-index: 120000; }
.imagedata { margin-top: 3px; position: relative; z-index: 122999;}
.imagecounter { background-color: #666; color: #fff; padding: 1px 4px 1px 4px; margin-right: 4px; }
.imagename {  background-color: #fff; }
/*#rotatebutton { background: none; border: 0px; font-size: 15pt; margin-right: 0px; }
#rotatebutton:hover { color: #000; font-weight: bold; }
#invertbutton { background: none; border: 0px; font-size: 13pt; margin-right: 0px; }
#invertbutton:hover { color: #000; font-weight: bold; }*/

/* FIND */
.queryword { padding: 2px 4px 2px 3px; border: solid 1px #aaa; margin: 4px; display: inline-flex; }


.footer {}

A:link, A:visited { color: #000; text-decoration: none; }