html {margin:0; padding:0; background-color:rgb(178,178,178);}
body {width:auto; min-width:300px; margin:0 auto; font-family:arial; font-size:0.8em; padding:0; background-color:white;}

h1 {margin:0; padding:10px 0; font-size:180%; font-weight:bold;}

a {text-decoration:underline; color:black;}
a:hover {text-decoration:none;}

p {margin:0; padding:5px 0;}
textarea {resize:none; overflow:auto;}

body.bodybackground {background:white url("../img/page.gif") 0 0 repeat-y;}
a.logout {float:right; display:block; width:22px; height:22px; padding:1px; color:black; background:transparent url('../img/logout.png') 50% 50% no-repeat;}
a.logout:hover {transform:rotate(180deg);}
a.back {display:block; float:left; width:40px; height:34px; background:transparent url("../img/back.png") 50% 50% no-repeat; transition:background-position .2s ease-in-out;}
a.back:hover {background-position:20% 50%;}
p.headtext {text-align:center; font-size:90%; color:rgb(220,220,220);}
.success {color:rgb(75,75,75);}
.failed {color:red;}
.sendpassword {position:relative;}
.sendpassword {padding:5px 0 0 3px;}
.sendpassword span {cursor:pointer; color:red;}

#topline {width:auto; height:175px; background:#8B0000 url("../img/logo.gif") 50% 45px no-repeat; border:1px solid white; position:relative; z-index:100;}
#topline h1 {font-size:120%; font-weight:normal; color:white; text-align:center; margin-top:85px;}

#bottomline {width:auto; height:12px; padding:9px 10px; font-size:90%; background-color:rgb(153,153,153); color:white;}
#bottomline a {font-weight:bold; color:white;}
body.bodybackground #bottomline {border:1px solid white;}

#login {width:390px; height:300px; margin:0 auto; padding:30px; position:relative;}
#login .inputarea {width:370px; height:50px; padding:10px; margin-top:30px; background:transparent url("../img/login-input.png") 0 0 no-repeat; border-width:0; position:relative;}
#login .inputarea input {display:block; width:365px; height:40px; font-size:30px; position:absolute; top:15px; left:10px; z-index:100; background-color:transparent; border-width:0;}
#login .inputarea div {color:rgb(200,200,200); font-size:30px; padding-top:7px;}
#login #btn {display:block; width:179px; height:51px; float:right; background:transparent url("../img/login-btn.gif") 0 0 no-repeat; cursor:pointer; border-width:0; margin:40px 0 0 0; padding:0;}
#login h1 {text-align:center; font-size:140%;}

#page {position:relative; padding:0 1px; background:transparent url("../img/page-line.gif") 0 0 repeat-x;}
.username {float:right; padding:0 10px 0 0; color:white; position:relative; top:0; left:0;}
.username span {padding-left:15px; line-height:180%; background:transparent url("../img/arrow-down.png") 0 50% no-repeat; cursor:pointer;}
.username:hover ul#submenu {display:block;}
.username ul#submenu {position:absolute; display:none; padding:0; margin:0; margin-top:1.8em; top:0; left:0; width:98%; list-style-type:none; list-style-image:none; margin-top:0 \9;}
.username ul#submenu li {display:block; width:100%; background-color:rgb(153,153,153); border:1px solid rgb(120,120,120); text-align:center; padding:3px 0; margin:0; box-shadow:0 0 3px black; cursor:pointer;}

#changepassword {display:none; position:fixed; width:100%; height:100%; top:0; left:0; z-index:100;}
#archivefiles {display:none; position:fixed; width:100%; height:100%; top:-24px; left:0; z-index:99;}
#changepassword #changepasswordbg, #archivefiles #archivefilesbg {width:100%; height:100%; background:transparent url("../img/black-box.png") 0 0 repeat;}
#changepassword fieldset, #archivefiles fieldset {position:absolute; width:300px; height:150px; top:0; padding:15px 8px; bottom:0; left:0; right:0; margin:auto; background-color:rgb(153,153,153);}
#changepassword fieldset input {display:block; float:right; width:60%; padding:4px; position:relative; z-index:2; border-width:0; background-color:rgb(220,220,220); color:black; transition:all .3s ease-in-out;}
#changepassword fieldset input:focus {background-color:white; color:black;}
#changepassword fieldset input[type="button"], #archivefiles fieldset input[type="button"] {float:none; margin:5px auto 0 auto; width:40%; border:1px solid rgb(220,220,220); background-color:white; color:black; cursor:pointer;}
#changepassword fieldset input[type="button"]:hover, #archivefiles fieldset input[type="button"]:hover {background-color:black; color:white;}
#changepassword fieldset label {display:block; clear:right; color:white; position:relative; z-index:1; top:-1.5em;}
#archivefiles fieldset {height:auto; width:80%; max-width:600px; padding:0;}
#archivefiles #archivefilessh {overflow:auto;}
#archivefiles fieldset div {margin:0; padding:5px 8px;}
#archivefiles fieldset p {color:white; text-align:center; font-size:140%;}
#archivefiles fieldset input[type="checkbox"] {float:left;}
#archivefiles fieldset label {color:white; display:block; margin-left:25px; cursor:pointer;}
#archivefiles fieldset input[type="button"] {display:block; width:auto; padding:5px; clear:both;}
#archivefiles.nofile div.archivefile {display:none;}
#archivefiles.nofile #archivefilessh {max-height:4em; min-height:4em; overflow:hidden;}
#archivefiles.nofile #archivefilesfs {max-height:4.2em; min-height:4.2em; overflow:hidden;}

#leftcolumn {width:266px; float:left;}
#leftcolumn .header {width:100%; height:25px; color:white;}
#leftcolumn .header .btn {display:block; float:left; width:50%; height:25px; background-color:rgb(153,153,153); text-align:center; line-height:23px; cursor:pointer;}
#leftcolumn .header .btn:hover {text-decoration:underline;}
#leftcolumn .header .active {background-color:#8B0000; color:white; cursor:default;}
#leftcolumn .header .inactive {color:rgb(220,220,220); cursor:default;}
#leftcolumn .header .inactive:hover {text-decoration:none;}

#searchtext {position:relative; padding-top:5px;}
#searchtext #searchtextbtn {padding:0; margin:0; border-width:0; width:24px; height:24px; display:block; position:absolute; z-index:1; top:10px; right:4%; background:transparent url("../img/magnify.png") 0 0 no-repeat; cursor:pointer;}
#searchtext #searchtextinp {display:block; margin:0 auto; padding:5px 30px 5px 6px; border-width:0; width:81%; height:22px; line-height:22px; border:1px solid rgb(194,194,194); background-color:rgb(235,235,235); transition:.3s ease-in-out background-color;}
#searchtext #searchtextinp:focus, #searchtext #searchtextinp:hover {background-color:white;}

#paint {min-height:200px; margin-left:267px; padding-bottom:20px; padding-left:10px; background:white none 50% 50% no-repeat;}
#paint h1 {padding:3px 8px; margin:5px 9px 20px 0; background-color:#8B0000; color:white; font-size:130%; line-height:28px;}
#paint h1 font {color:rgb(240,240,240);}
#paint div {margin:3px 9px 3px 0; padding:5px 0;}
#paint div a {display:block; text-decoration:none; font-size:110%; margin-left:30px; padding:7px 5px 7px 50px;}
#paint div a font {display:block; font-size:70%; line-height:14px; padding-top:3px;}
#paint h1 a.download {float:right; font-weight:normal; font-size:80%; color:white; padding-left:20px; background:transparent url("../img/zip-archive.gif") 0 50% no-repeat;  text-shadow:0 0 2px black;}
#paint div a:hover {background-color:rgb(255,239,196); text-decoration:underline;}
#paint div.colorline {border:1px solid rgb(218,218,218); background-color:rgb(240,240,240);}
#paint div.dir a {margin-left:20px; padding-left:60px; background:transparent url("../img/bigfolder.png") 5px 50% no-repeat;}
#paint div.file {position:relative; z-index:0;}
#paint div.file a {background:transparent url("../img/bigfiles.png") 0 50% no-repeat;}
#paint div.file.nonote a {margin-left:0;}
#paint div.file .note-btn {display:block; width:24px; height:24px; background:transparent url("../img/poznamka.gif") 0 0 no-repeat; position:absolute; top:5px; left:5px; cursor:pointer;}
#paint div.file .note-text {padding:0 5px; display:none;}
#paint div.file .note-text textarea {height:80px; width:90%; background-color:rgb(255,245,221); border:1px solid #8B0000; font-family:arial; resize:none;}
#paint div.file .note-text .note-save {float:left; display:block; width:24px; height:24px; background:transparent url("../img/save.gif") 0 0 no-repeat; margin-top:2px; cursor:pointer;}
#paint div.file .note-btn:hover, #paint div.file .note-text .note-save:hover {background-position:100% 0;}

#tree {margin-left:10px; visibility:hidden;}
#tree div {margin-left:22px;}
#tree p {margin:0; padding:0px; padding-left:20px; line-height:220%;}
#tree p.open {background:url('../img/plus.gif') 5px center no-repeat;}
#tree p.close {background:url('../img/minus.gif') 5px center no-repeat;}
#tree p:hover {background-color:rgb(194,194,194); -moz-border-radius:5px;}
#tree a {display:block; padding-left:30px; background:url('../img/folder.gif') no-repeat left center; text-decoration:none;}
#tree a:hover {text-decoration:underline; color:#000000;}
#tree .expanddir a {background-image:url('../img/expanddir.gif'); font-weight:bold;}
#tree .expanddir div a {background-image:url('../img/interfolder.gif'); font-weight:normal;}

#sendemailform {display:none; position:absolute; z-index:500; top:-150px; left:50px; width:250px; height:80px; border:1px solid #8B0000; padding:15px; background:transparent url("../img/sendemailform.png") 0 0 repeat;}
#sendemailform input {width:100%;}
#sendemailform .btn {width:100px; margin:20px 0 0 75px;}

#wait {width:100%; height:100%; display:none; position:fixed; z-index:110; top:0; left:0;}
#wait img {display:block; width:110px; height:110px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
#notesave {width:250px; text-align:center; color:blue; font-weight:bold; display:none; position:absolute; z-index:200; top:50%; left:50%; border:1px solid #8B0000; padding:30px 10px; background:transparent url("../img/sendemailform.png") 0 0 repeat;}

/* soundtrack */
#paint div.file.soundtrack {border:1px solid #cae9ff; background-color:#eaf7ff;}
#paint div.file.soundtrack a {padding-top:15px; padding-bottom:15px; background-image:url('../img/soundtrack.png');}

/* mobile */
#btnleftcolumn  {display:none;}
@media screen and (max-width: 900px) {
  body.bodybackground {background-image:none;}
  body.bodybackground.showbackground {background-image:url("../img/page.gif");}
  body.bodybackground.showbackground  #paint {margin-left:287px;}
  body.bodybackground.showbackground  #leftcolumn {display:block;}
  body.bodybackground.showbackground  #btnleftcolumn {left:266px;}
  #btnleftcolumn {display:block; z-index:10; width:23px; height:100%; margin-top:25px; background:rgb(218,218,218) url("../img/btnleftcolumn.png") 50% 50% no-repeat; position:absolute; left:0; top:0; border:1px solid rgb(194,194,194); border-bottom-color:white; border-left-width:0; cursor:pointer; box-sizing:border-box;}
  #leftcolumn {display:none;}
  #paint {margin-left:23px;}
  #bottomline {position:relative; z-index:11;}
}
@media screen and (max-width: 700px) {
  p.headtext {font-size:1px; color:rgb(153,153,153); height:20px;}
}
@media screen and (max-width: 500px) {
  body.bodybackground.showbackground  #paint {display:none;}
}