/* $Id$ */
/* Copyright (c) 2012-2015 Pierre Pronchery <khorben@defora.org> */
/* This file is part of DeforaOS Web DaPortal */
/* This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, version 3 of the License.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>. */



/* default includes */
@import url("../css/DaPortal.css");
@import url("../css/manual.css");


/* global defaults */
* {
	margin:				0;
	padding:			0;
	text-align:			justify;
}


/* fonts */
a, button, input {
	font-size:			100%;
}

a, body, button, input {
	font-family:			"Verdana", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
}

body {
	font-size:			0.85em;
}

html {
	font-size:			100%;
}


/* generic elements */
a {
	color:				#7f7f7f;
	text-decoration:		none;
}

a:hover {
	text-decoration:		underline;
}

a.button {
	line-height:			150%;
	white-space:			nowrap;
}

a.button:hover {
	text-decoration:		none;
}

a.button, button, input[type="button"], input[type="reset"],
input[type="submit"] {
	background-color:		#a0a0a0;
	border:				1px solid #000000;
	color:				#000000;
	padding:			0.4ex;
}

h1, h2, h3, h4, h5, h6, .title {
	padding:			0.5ex;
	text-align:			left;
}

h3 {
	border-bottom:			1px solid #303030;
	margin-bottom:			0.5ex;
}

h1 a:hover {
	text-decoration:		none;
}

ol, ul {
	margin-left:			1ex;
	padding-left:			1ex;
}

ol li, ul li {
	margin-left:			0.2ex;
	padding-left:			0.2ex;
}


/* outer page */
html {
	background-color:		#000000;
	color:				#ffffff;
}


/* top */
#top {
	background-color:		#a0a0a0;
	border:				1px solid #303030;
	border-top:			0;
	color:				#000000;
	margin-left:			auto;
	margin-right:			auto;
	max-width:			80ex;
	padding:			4px;
	text-align:			center;
}

#top a {
	color:				#000000;
	padding:			2px;
	text-decoration:		none;
}

#top a:hover {
	background-color:		#303030;
	color:				#ffffff;
}


/* menu */
#menu {
	margin-bottom:			1ex;
	padding:			0.4ex;
}

#menu a {
	background-color:		#000000;
	color:				#ffffff;
	display:			block;
	text-align:			left;
}

#menu ul {
	margin-left:			0;
	padding-left:			0;
}

#menu ul.menubar li {
	list-style-type:		none;
	margin:				0;
	padding:			0;
}

#menu ul.menubar li a {
	border-bottom:			1px solid #303030;
	font-weight:			bold;
	padding:			0.2ex;
}

#menu ul.menubar li a:hover {
	background-color:		#303030;
	text-decoration:		none;
}

#menu ul.menubar li li a {
	border-width:			0;
	display:			none;
	font-size:			80%;
	padding-left:			2ex;
}

#menu ul.menubar li li a.important {
	display:			block;
}

#menu form .entry input {
	max-width:			11ex;
}

#menu form .entry .label,
#menu form .entry input[type="password"],
#menu form .entry input[type="text"] {
	display:			table-row;
}


/* main */
body {
	margin-left:			auto;
	margin-right:			auto;
}


/* title */
h1#title {
	padding:			16px;
	text-align:			right;
}


/* content */
#content {
	margin-top:			16px;
}

#content, #content table {
	background-color:		#ffffff;
	color:				#000000;
}

#content > .pack {
	padding:			16px;
}

#content > .pack > *:first-child {
	-moz-border-radius-topleft:	16px;
	-moz-border-radius-topright:	16px;
	-webkit-border-top-left-radius:	16px;
	-webkit-border-top-right-radius:16px;
	border-top-left-radius:		16px;
	border-top-right-radius:	16px;
	margin-bottom:			4px;
	margin-left:			-16px;
	margin-right:			-16px;
	margin-top:			-32px;
	padding-top:			16px;
}

#content > .pack > h1:first-child {
	background-color:		#00007f;
	color:				#ffffff;
}

#content > .pack > h1:first-child.stock48 {
	background-position:		8px 4px;
	min-height:			44px;
	padding:			4px;
	padding-top:			8px;
	padding-left:			60px;
}

#content > .pack > h1:first-child.browser {
	background-color:		#7f7f7f;
}

#content > .pack > h1:first-child.download {
	background-color:		#ff7f00;
}

#content > .pack > h1:first-child.error {
	background-color:		#ff0000;
}

#content > .pack > h1:first-child.project {
	background-color:		#007f00;
}

#content > .pack > h1:first-child.logout,
#content > .pack > h1:first-child.user {
	background-color:		#ff7f00;
}

#content > .pack > h1:first-child.wiki {
	background-color:		#7f7fff;
}


/* dialogs */
.dialog {
	background-color:		#000000;
	color:				#ffffff;
	margin-bottom:			4px;
	margin-left:			-16px;
	margin-right:			-16px;
	margin-top:			-4px;
	padding:			16px;
}


/* statusbar */
.statusbar, footer {
	background-color:		#ffffff;
	color:				#000000;
	-moz-border-radius-bottomleft:	16px;
	-moz-border-radius-bottomright:	16px;
	-webkit-border-bottom-left-radius:16px;
	-webkit-border-bottom-right-radius:16px;
	border-bottom-left-radius:	16px;
	border-bottom-right-radius:	16px;
	margin-bottom:			4px;
	padding:			16px;
	text-align:			right;
}


/* toolbars */
.toolbar {
	background-color:		#a0a0a0;
	margin-bottom:			0.5ex;
	margin-left:			-16px;
	margin-right:			-16px;
	margin-top:			-4px;
	min-height:			2em;
	padding:			0.2ex;
	padding-top:			1ex;
}

.toolbar a.button, .toolbar button, .toolbar input[type="reset"],
.toolbar input[type="submit"] {
	border-color:			#a0a0a0;
	border-width:			1px;
}

.toolbar a.button:hover, .toolbar input[type="submit"]:hover {
	background-color:		#b0b0b0;
	border-color:			#c0c0c0;
}


/* treeviews */
form.treeview .header .detail {
	text-align:			left;
}

form.treeview.alternate > .table > .row:nth-child(odd) {
	background-color:		#f0f0f0;
}


/* small screens */
@media screen and (max-width: 80ex) {
	#menu > .pack > * {
		display:		none;
	}

	#menu ul.menubar, #menu ul.menubar li {
		display:		block;
	}

	#menu ul.menubar li li {
		display:		none;
	}
}


/* larger screens */
@media screen and (min-width: 80ex) {
	html {
		background-attachment:	fixed;
		background-image:	url('DeforaOS-background.png');
		background-position:	75% 90%;
		background-repeat:	no-repeat;
	}

	body {
		max-width:		96ex;
		padding-right:		16ex;
	}

	#content, .statusbar, footer {
		opacity:		0.8;
	}

	#menu {
		float:			right;
		margin-right:		-16ex;
		margin-top:		48px;
		width:			14ex;
	}

	#menu, #menu a {
		background-color:	#a0a0a0;
		color:			#000000;
		opacity:		0.8;
	}

	#menu a:hover {
		color:			#ffffff;
	}

	h1#title {
		text-align:			left;
	}
}