/* $Id$ */
/* Copyright (c) 2013-2015 Pierre Pronchery <khorben@defora.org> */
/* Copyright (c) 2013 Ulrike Uhlig <rike@curlybracket.net> */
/* 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");

@import url("../fonts/OpenSans-Regular/stylesheet.css");
@import url("../fonts/OpenSans-Bold/stylesheet.css");

/**********************************
 * RESET
 * ******************************** */
* {
	margin:				0;
	padding:			0;
}

body {
	background-color: #fff;
	color: #000;
	font-size: 0.853em;
	font-family: "open_sansregular", "Arial", sans-serif;
	text-align: center;
}

a {
	text-decoration: underline;
	color: #006680;
	outline: none;
}

a:hover {
	text-decoration: none;
}

/**********************************
 *  FONTS
 *  ******************************/
b, strong, h1, h2, h3, h4, h5,
.menuitem, .table .header {
	font-family: "open_sansbold", "Arial", sans-serif;
	font-weight: normal;
}

/**********************************
 *  STRUCT
 *  ******************************/

#main, #title {
	width: 90%;
	max-width: 768px;
	text-align: left;
	margin: 0 auto;
}

#footer {
	font-size: 0.9em;
	padding: 1em 0;
}

/**********************************
 *  HEADER
 *  ******************************/

#title {
	margin: 1em auto 0.5em;
}

#title img {
	max-width: 90%;
	height: auto;
}

#menu > .pack:last-child {
	text-align: right;
}

#menu > .pack:nth-child(2n) {
	text-align: right;
	float: left;
}

#menu > .pack input {
	margin-top: 0.3em;
}

/**********************************
 *  MENU
 *  ******************************/

.menuitem {
	list-style: none;
}

.menuitem a {
	display: block;
	padding: 0.3em;
	background-color: #006680;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

.menuitem a:hover {
	background-color: crimson;
}

.menuitem ul {
	display: none;
}

/**********************************
 *  CONTENT
 *  ******************************/

.vbox {
	padding-bottom: 1em;
}

#content .pack {
	line-height: 1.6em;
}

#content .pack p,
#content .pack ol, #content .pack ul {
	margin-bottom: 1em;
}

#content .pack ol,
#content .pack ul {
	margin-left: 1.5em;
}

#content .pack h1, #content .pack h2, #content .pack h3, #content .pack h4, #content .pack h5 {
	margin-bottom: 0.5em;
	line-height: 1.4em;
	color: #006680;
	text-transform: uppercase;
}

#content .pack h2 {
	font-size: 2.5em;
	color: crimson;
}

#content .pack h3 {
	font-size: 1.8em;
}

span.label {
	font-size: 0.9em;
	color: #bbb;
}

span.label a {
	color: #999;
}

.dialog {
	overflow: auto;
	margin-bottom: 1.5em;
	background-color: #eee;
	padding: 0.5em 1em 1em;
	border-radius: 0.7em;
}

/**********************************
 *  TABLES
 *  ******************************/

.treeview {
	overflow: auto;
}

.table {
	margin-bottom: 1em;
	display: table;
	width: 100%;
}

.table .row, .table .header {
	display: table-row;
}

.table .detail {
	display: table-cell;
	padding: 0.5em;
	border-bottom: 1px solid #ddd;
}

/**********************************
 *  FORMS
 *  ******************************/
input[type=text], input[type=password] {
	border-radius: 0.3em;
	border: 1px solid #ddd;
	box-shadow: 1px 2px 2px #ddd inset;
	padding: 0.4em 1em;
	outline: none;
}

input[type=text]:focus, input[type=password]:focus {
	background-color: lightcyan;
	box-shadow: 1px 2px 2px #fff inset;
}

a.button {
	white-space: nowrap;
}

a.button, button, input[type=button], input[type=reset], input[type=submit] {
	border-radius: 0.3em;
	box-shadow: -2px -2px 2px #ddd inset;
	padding: 0.4em 0.8em;
	background-color: #eee;
	border: none;
	color: #000;
	text-decoration: none;
}

a.button:hover, button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=submit]:hover {
	background-color: crimson;
	color: #fff;
}

/**********************************
 *  Responsive
 *  ******************************/
@media all and (max-width: 321px) {
	#menu > .pack:nth-child(2n), 	#menu > .pack:last-child {
		display: none;
	}
}
@media all and (min-width: 641px) {
	#main {
		position: relative;
	}
	#menu > .pack:nth-child(2n) {
		float: none;
	}
	#menu > .pack:last-child {
		position: absolute;
		right: 0;
		top: -100px;
	}
	.menubar .menuitem {
		float: left;
		position: relative;
	}
	.menubar .menuitem a {
		padding: 0.4em 1em;
	}
	.menubar .menuitem ul .menuitem {
		float: none;
	}
	.menubar .menuitem:hover ul {
		display: block;
		position: absolute;
	}
}