/*
 * 	CSS style for TazPanel - (C) 2011 SliTaz GNU/Linux
 * 
*/

/* To always have a scroll bar */
html {
	min-height:  102%;
} 
 
body {
	background: #ffffff;
	color: black;
	font: 13px sans-serif, vernada, arial;
	margin: 25px 0 0;
}

h1 { color: #d66018; padding: 6px 0 0 20px; font-size: 180%; }
h2 { color: #444; margin: 10px 0 10px; font-size: 150%; }
h3 { color: #666; font-size: 140%; }
h4 { color: #888; font-size: 120%; margin: 10px 0 5px; }
img { border: 0pt none; vertical-align: middle; padding: 0px 6px 2px 0;}
p { margin: 10px 0; }
ul { list-style-type: square; }
li { padding: 4px 0; }
a { text-decoration: none; color: #666; }
a:hover { color: #000; }

/* Header and main title */

#header {
	height: 42px;
	border-bottom: 1px dotted #ddd;
}

/* Desktop gui style bar */

#toolbar {
	position: fixed;
	top: 0;
	left: 0;
	height: 23px;
	width: 100%;
	padding: 0;
	background-color: #f1efeb;
	border-bottom: 1px solid #c1baad;
	z-index: 200;
	cursor: default;
}

#menu {
	margin: 0;
	padding: 0;
}
#menu li {
	list-style: none;
	float: left;
	padding: 0;
}
#menu li a {
	display: block;
	padding: 4px 6px;
	background-color: inherit;
	text-decoration: none;
	cursor: default;
	color: #000;
}
#menu li a:hover {
	color: #ffffff;
	background-color: #d66018;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
}
#menu li ul {
	display: none; 
	width: 180px;
	background-color: #f1efeb;
	border: 1px solid #c1baad;
}
#menu li ul a {
	padding: 4px 6px;
}
#menu li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
}
#menu li:hover li {
	float: none;
}
#menu li:hover li a {
	background-color: #f1efeb;
	color: #000;
}
#menu li li a { border: 1px solid #f1efeb; }
#menu li li a:hover {
	background-color: #d66018;
	color: #ffffff;
	border-radius: 2px;
	/* border: 1px solid #c1baad; */
}

#icons { margin: 3px 8px; float: right; }
#icons img { padding: 0; }

#loading {
	/* font-weight: bold; */
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	color: #666;
	cursor: progress;
	position: fixed;
	top: 92px;
	right: 120px;
	width: 248px;
	padding: 4px 4px 2px;
}

/* Blocks */

#block { float: left; }

/* Sidebar menus */

#sidebar {
	position: fixed;
	top: 92px;
	right: 5px;
	width: 116px;
}

#sidebar a {
	display: block;
	padding: 0px 0 0px 12px;
	margin: 0;
}

#sidebar a.active {
	color: #000;
	font-weight: bold;
}

#sidebar h4 { margin: 0 0 2px 12px; }
#sidebar ul { list-style-type: none; padding: 0; }

/* Content */

#content { margin: 20px; }
#content-sidebar { margin: 20px 120px 20px 20px; }
#wrapper { margin: 10px 0 20px; }

#actions {
	height: 20px;
	margin: 16px 0;
}

#actions p { margin: 6px 0; }

.search {
	position: absolute;
	right: 40px;
	top: 23px;
}

.search input[type=submit] {
	padding: 5px;
	margin-left: -4px;
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	cursor: pointer;
	color: #000;
	font-weight: bold;
	border-radius: 0px;
}

.search input[type=submit].radius  {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.search input[type=text] {
	border: 1px solid #ddd;
	padding: 4px;
	height: 17px;
	margin: 0;
	width: 200px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.box {
	margin: 10px 0;
	padding: 12px;
	background: #f8f8f8;
	border: 1px solid #ddd;
}

.box ul { list-style-type: none; padding: 0; }

.debug {
	position: fixed;
	bottom: 0px;
	right: 10px;
	left: 10px;
	margin: 5px;
	padding: 4px 10px;
	background-color: #111;
	color: #fff;
	border: 0;
	font-size: 12px;
	opacity: 0.9;
}

.float-left { float: left;  }
.float-right { float: right; }

/* Table */

table {
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	padding: 10px;
	width: 100%;
	margin: 0 0 6px 0;
}

table a { color: #000; }
table a:hover { color: #666; }
td.small { min-width: 60px; }
td.pkg { max-width: 160px; }
td.desc { max-width: 300px; }
td.pct { min-width: 200px; background: #eee; }
div.pct { background: #ccc; }
td.pct, div.pct { border-radius: 2px; }

#thead, .thead, thead {
	height: 10px;
	font-weight: bold;
}

/* syntax_highlighter */

span.conf-comment { color: #666; }
span.conf-var { color: #392600; }
span.conf-val, span.sh-val { color: #f35a00; }
span.sh-comment { color: #b20000; }
span.activity-log { color: #888; font-size: 95%; }
span.diff-rm { color: red; }
span.diff-add { color: green; }
span.diff-at { color: blue;  }
span.top { color: #00c800; font-weight: bold; font-size: 95%; }

/* alert messages */
span.msg-ok { color: limegreen; }
span.msg-nok { color: tomato; }

/* Misc */

pre, .pre-main { 
	background-color: #f8f8f8; 
	border: 1px solid #ddd; 
	padding: 10px;
	margin: 10px 0;
	overflow: auto;
}

.pre-main { margin: 16px 0; }

input[type=submit], select, .button {
	padding: 4px;
	margin: 0;
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	cursor: pointer;
	color: #000;
}

input[type=submit]:hover, select:hover, .button:hover {
	background-color: #ddd;
	border: 1px solid #999;
}

input[type=text], input[type=password] { height: 18px; }

div.scroll { height: 200px; overflow: auto;
	border: 1px solid #ddd; }
div.scroll table { border: 0px solid #fff; }

#terminal {
	background: #000;
	color: #fff;
	border: 1px solid #444;
	min-height: 180px;
	opacity: 0.8;
}

/* Round corner */

#loading, table, pre, input[type=submit], .debug, .box,
.button, div.scroll {
	/*-moz-border-radius: 4px;
	-webkit-border-radius: 4px; */
	border-radius: 4px;
}

/* Help page */

#help { text-align: justify; }
#help a { color: #215090; text-decoration: underline; }
#help a:hover { text-decoration: none; color: blue; }

/* Footer */

#footer {
	/* border-bottom: 1px solid #c1baad; */
	height: 25px;
	text-align: center;
	padding: 40px 10px;
	font-size: 11px;
	color: #bbb;
}

#footer a { color: #bbb; }
#footer a:hover { color: #555; }
