*       { margin: 0; padding: 0; }
body    {  font-family: Verdana, Tahoma, Arial; background-color: #fff; font-size: 12px; color: #000; min-width: 320px; }

:focus  { outline: none; }

table   { border-collapse: collapse; }
ul li   { list-style-type: square; }
h1      { text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.5); padding: 10px 0; font-size: 28px; font-weight: normal; }
h2      { text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.5); padding:  8px 0; font-size: 22px; font-weight: normal; }
h3      { text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.5); padding:  6px 0; font-size: 18px; font-weight: normal; }
p       { text-align: justify; }
sup     { color: #f00; }
img     { border: none; }

a       { color: #06c; text-decoration: underline; }
a:hover { text-decoration: none; }

body, html { height: 100%; }
#wrapper   { min-height: 100%; }

#access       { float: right; padding: 10px; background-color: #b4cce2; text-align: right; }
#access > div { display: inline-block; }

 #logo   { padding: 10px; background-color: #b4cce2; border-bottom: 1px solid #d3dfee; }
a.logo   { display: block; margin: 0; width: 240px; height: 70px; background: url('logo.png') no-repeat center center; }
#nav     { float: left; width: 300px; background-color: #dbe5f1; box-shadow: 0 5px 5px -2px rgba(0,0,80,0.3); }
#content { padding: 10px; margin: 10px 10px 10px 310px; border: 1px solid #b4cce2; overflow: auto; }

#foot    { 
	margin: -30px 0 0 0;
	line-height: 30px; 
	height: 30px;
	background-color: #b4cce2;
	padding: 0;
	text-align: center;
	font-size: 11px;
	overflow: hidden;
}

red   { color: red; font-weight: bold; }
green { color: green; font-weight: bold; }

img.captcha { display:block; }

#wrapper div.error   { text-align: center; color: #a00; font-size: 24px; }

.form1               { max-width: 600px; margin: 0 auto; }
.form1 > div         { text-align: right; line-height: 40px; margin: 4px 0; }
.form1 > div > label { float: left; font-size: 14px; display: block; text-align: left; font-weight: bold; }
.form1 > div > textarea, 
.form1 > div > select,
.form1 > div > input { font-size: 14px; padding: 5px; width: 300px; font-family: Verdana, Tahoma, Arial; }
.form1 > div.submit  { text-align: right; }
.form1 > div.submit > input { width: auto; min-width: 150px; }
.form1 > div.type2   { text-align: left; clear: right; }
.form1 > div.type2  > label { float: right; line-height: normal; max-width: 350px; padding-top: 10px; }
.form1 > div.type2  > input { width: auto; width: 150px; }

.form2 textarea, 
.form2 select,
.form2 input { font-size: 12px; padding: 2px; font-family: Verdana, Tahoma, Arial; }

.form3 textarea, 
.form3 select,
.form3 input { font-size: 14px; padding: 5px; font-family: Verdana, Tahoma, Arial; }

#nav > ul                { margin: 0; font-size: 14px; margin: 10px; }
#nav > ul > li           { position: relative; line-height: 30px; color: #000; list-style-type: none; margin-top: -1px; }
#nav > ul > li       > a { display: block; color: #049; text-decoration: none; padding: 0 10px; border: 1px solid #b4cce2; }
#nav > ul > li       > a:hover { background-color: rgba(255,255,255,0.7); }
#nav > ul > li       > ul                { padding: 0; background-color: #dbe5f1; font-weight: normal; font-size: 12px; margin-left: 10px; }
#nav > ul > li       > ul > li           { list-style-type: none; line-height: 24px; }
#nav > ul > li       > ul > li       > a { display: block; white-space: nowrap; color: #049; text-decoration: none; padding: 0 10px 0 10px; }
#nav > ul > li       > ul > li       > a:hover { background-color: rgba(255,255,255,0.7); }

#nav ul.tree              { margin-left: 20px; font-size: 12px; font-weight: normal; }
#nav ul.tree li           { list-style-type: none; line-height: 20px; }
#nav ul.tree li > a       { display: block; padding: 0 10px; text-decoration: none; }
#nav ul.tree li > a:hover { background-color: rgba(255,255,255,0.5); }
#nav ul.tree      ul      { margin-left: 10px; }

#nav a.selected { 
	transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	-webkit-transition: all 100ms ease-in-out;
	background-color: rgba(255,255,255,0.7); color: #000;
	font-weight: bold; 
}

div.perpage             { font-size: 11px; }
div.perpage .active     { font-weight: bold; }

ul.pager                { font-size: 12px; text-align: center; }
ul.pager li             { display: inline-block; line-height: 16px; list-style-type: none; }
ul.pager li     a       { display: block; width: 24px; text-align: center; }
ul.pager li.sel a       { font-weight: bold; color: #006; text-decoration: none; }
ul.pager li     a:hover { color: #c00; background-color: rgba(255,255,255,0.4); }

table.list                         { margin: 5px auto; }
table.list                      th { padding: 4px 6px; background-color: #ddd; }
table.list tbody                td { padding: 4px 6px; }
table.list tbody:nth-child(odd) td { background-color: #fafafa; }
table.list tbody:hover          td { background-color: #f0f0f0; }
table.list tbody                th { border-bottom: 1px solid #888; }
table.list tbody tr:last-child  td { border-bottom: 1px solid #888; }
table.list tbody tr.hint        td { font-size: 11px; color: #666; }
table.list                      td:last-child { text-decoration: none; }

a.edit  { display: inline-block; width: 16px; height: 16px; background: url('img/pencil.png') no-repeat center center; }
a.del   { display: inline-block; width: 16px; height: 16px; background: url('img/delete.png') no-repeat center center; }
a.log   { display: inline-block; width: 16px; height: 16px; background: url('img/log.png') no-repeat center center; }
a.add   { display: inline-block; width: 16px; height: 16px; background: url('img/add.png') no-repeat center center; }
a.file  { display: inline-block; width: 16px; height: 16px; background: url('img/disk.png') no-repeat center center; }
a.view  { display: inline-block; width: 16px; height: 16px; background: url('img/eye.png') no-repeat center center; }
a.files { display: inline-block; width: 16px; height: 16px; background: url('img/page_white_copy.png') no-repeat center center; }
a.sel   { display: inline-block; width: 16px; height: 16px; background: url('img/accept.png') no-repeat center center; }
a.zip   { display: inline-block; width: 16px; height: 16px; background: url('img/compress.png') no-repeat center center; }

a.off { opacity: 0.3; }


ul.tabs { line-height: 30px; height: 30px; border: 1px solid #b4cce2; background-color: #dbe5f1; margin: 0 0 10px; }
ul.tabs > li                { list-style-type: none; float: left; display: block; width: 33%; border-left: 1px solid #b4cce2; margin-left: -1px; }
ul.tabs > li:first-child    { margin-left: 0; border-left: none; }
ul.tabs > li:last-child     { width: 34%; }
ul.tabs > li            > a { display: block; padding: 0 20px; text-align: center; text-decoration: none; }
ul.tabs > li            > a:hover { background-color: rgba(255,255,255,0.7); }
ul.tabs > li.selected   > a { background-color: rgba(255,255,255,0.7); color: #000; font-weight: bold; }

.alert:before  { content: ""; position: absolute; left: -8px; top: 0; width: 16px; height: 16px; background: url('img/error.png') no-repeat center center; }

div.report     { padding: 5px; margin: 5px 0; font-size: 20px; text-align: center; color: #000; border: 1px solid #000; background-color: #eee; }
div.report.ok  { color: #080; border: 1px solid #080; background-color: #efe; }
div.report.err { color: #800; border: 1px solid #800; background-color: #fee; }

div.crumbs { margin: -10px; margin-bottom: 10px; padding: 5px; text-align: left; font-weight: normal; font-size: 16px; background-color: #dbe5f1; border-bottom: 1px solid #b4cce2; }

.filter-reset { text-align: center; color: #06c; cursor: pointer; border: 1px dotted #06c; }
.filter-reset:hover { background-color: rgba(255,255,255,0.5); }

.notes         { color: #aaa; }
.notes > div   { max-width: 800px; word-wrap: break-word; }

li.filter     { padding: 10px; }
select.filter { width: 100%; }

.required:after { content: '*'; color: #f00; }

div.dropfiles { 
	line-height: 100px; text-align: center; color: #06c; font-size: 22px;
	background-color: #f4f8ff; border: 2px dashed #06c; 
}

@media screen and (max-width:  800px) {
	body { font-size: 14px; }
	#access { padding: 5px; float: none; }
	#logo   { padding: 5px; }
	#nav { width: 200px; }
	#content { padding: 0; margin: 0 0 0 200px; border: 0; }
	.form1               { max-width: 500px; }
	.form1 > div > textarea, 
	.form1 > div > select,
	.form1 > div > input { padding: 3px; width: 180px; }
	.form1 > div.submit > input { width: auto; min-width: 100px; }
	div.perpage { padding: 5px; font-size: 16px; }
	ul.pager { font-size: 16px; }
	div.crumbs { margin: 0; }
}

@media screen and (max-width:  640px) {
	#nav { margin-left: -200px; }
	#content { margin: 0 0 0 0;}
	.form1               { max-width: 300px; }
	.form1 > div > textarea, 
	.form1 > div > select,
	.form1 > div > input { padding: 2px; width: 150px; }
}


span.progress { display: inline-block; line-height: 20px; padding-left: 30px; position: relative; }
div.spinner   { 
	position: absolute; left: 10px; top: 0; width: 2px; height: 20px; background-color: #eee; 
	animation: rotate 1.2s infinite linear; 
	-webkit-animation: rotate 1.2s infinite linear; 
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }

#circle-red {
	width: 10px;
	height: 10px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	background: red;
}
#circle-green {
	width: 10px;
	height: 10px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	background: green;
}