DaPortal
/* $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;
}
}