/** /program/themes/sophia/style.css - stylesheet for sophia theme
 *
 * This file is part of Website@School, a Content Management System especially designed for schools.
 * Copyright (C) 2008-2023 Ingenieursbureau PSD/Peter Fokker <peter@berestijn.nl>
 *
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by
 * the Free Software Foundation supplemented with the Additional Terms, as set
 * forth in the License Agreement for Website@School (see /program/license.html).
 *
 * 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 Affero General Public License
 * for more details.
 *
 * You should have received a copy of the License Agreement for Website@School
 * along with this program. If not, see http://websiteatschool.eu/license.html
 *
 * The basic layout of a page is determined by a set of
 * sometimes nested DIV-elements, each with their own id.
 * A generic page looks a bit like this
 *
 * top
 * page
 *   header
 *     logo
 *     quicktop
 *     navigation
 *   breadcrumbs <-- note: plural!
 *   messages
 *   leftmargin
 *     leftmargintop
 *     menu
 *     leftmarginbottom
 *   content
 *   footer
 *     quickbottom
 *     address
 * bottom
 *
 * The page is constructed in the page-div. The top and bottom div are
 * only there to hold stuff that must be rendered before or after the
 * actual page. Can be used to hold javascript popups/alerts.
 *
 * @author Peter Fokker <peter@berestijn.nl>
 * @copyright Copyright (C) 2008-2023 Ingenieursbureau PSD/Peter Fokker
 * @license http://websiteatschool.eu/license.html GNU AGPLv3+Additional Terms
 * @package wastheme_sophia
 * @version $Id: style.css,v 1.9 2023/06/29 13:58:00 peter Exp $
 */

html, body {
  font-family: tahoma,verdana,arial,helvetica,sans-serif;
  font-size: 9pt;
  color: #000000;
  margin: 0px;
  padding: 0px; 
  background-color: #FFFFFF;
}
div {
  border: 0 none;
}
img {
  border: 0 none;
}
p,td,th,span {
  line-height: 1.5em;
}

/* the container div holds everything else */
#page {
  width: 950px;
  background-color: #FFFFFF;
  font-size: 9pt;
  margin: 0 auto;
  overflow:hidden;
}

/* the header div holds
 * - the logo
 * - the quicklinks at the top
 * - the site title and subtitle
 * - the top level navigation
 */
#header {
  top: 0px;
  width: 950px;
  height: 120px;
}
#header a {
  outline: transparent none;
}
#logo {
  float: left;
  height: 140px;
}
#logo img  {
  position: relative;
  top: 20px;
  left: 0px;
  z-index: 1;
}
#quicktop {
  height: 20px;
  text-align: right;
  margin: 0 10px;
}
#quicktop a {
  margin-left: 5px;
  font-size: 0.95em;
}
#quicktop a:link,
#quicktop a:visited {
  text-decoration: none;
  color: #3333FF;
}
#quicktop a:active,
#quicktop a:hover {
  color: #FF0000;
}
#quicktop a.current:link,
#quicktop a.current:visited {
  text-decoration: underline;
}
#header h1, 
#header h2 {
  text-align: right;
}
#header h1 {
  display: none;
  height: 0px;
}
#header h2 {
  margin: 0 10px;
  padding: 0;
  font-size: 1.9em;
  font-weight: normal;
  height: 30px;
}
#navigation {
  height: 70px;
  width: 930px;
  margin: 10px 10px;
  position: absolute;
}
#navigation ul {
  font-family: Impact, Helvetica, Sans-serif;
  font-size: 20px;
  font-weight: normal;
  float: right;
  list-style: none;
  margin: 0px;
  text-align: right;
}
#navigation ul li {
  width: 110px;
  height: 70px;
  float: left;
  background-color: #666666;
  background-image:  url('stencil0.png');    /* ellipse */
  /* background-image:  url('stencil6.png'); /* hexagon */
  /* background-image:  url('stencil8.png'); /* drum    */
  margin-left: 20px;
  line-height: 70px;
  text-align: center;
}
#navigation ul li a {
  display: block;
  overflow: hidden;
}
#navigation a:link,
#navigation a:visited {
  text-decoration: none;
  color: #FFFFFF;
}
#navigation a:active,
#navigation a:hover {
  text-decoration: none;
  color: #FFFF00;
}
#navigation a.current:link,
#navigation a.current:visited {
  color: #FFFFFF;
}
#navigation a.current:active,
#navigation a.current:hover {
  color: #FFFF00;
}
/* Customised colours for navigation buttons (default #666666) */
#navigation ul li.navigation_button1 { background-color: #FF0000; }
#navigation ul li.navigation_button2 { background-color: #3333FF; }
#navigation ul li.navigation_button3 { background-color: #FF9933; }
#navigation ul li.navigation_button4 { background-color: #66CC66; }
#navigation ul li.navigation_button5 { background-color: #9933FF; }
#navigation ul li.navigation_button6 { background-color: #FF3399; }

#breadcrumbs {
  clear: both;
  height: 20px;
  text-align: left;
  font-size: 0.8em;
  background-color: #FFFFFF;
  margin-top: 20px;
}
#breadcrumbs a:link,
#breadcrumbs a:visited {
  text-decoration: none;
  color: #3333FF;
}
#breadcrumbs a:active,
#breadcrumbs a:hover {
  color: #FF0000;
}
#messages {
  background-color: #FFFF33;
  clear: both;
}
#leftmargin {
  width: 195px;
  float: left;
}

/* the menu is constructed with nested ULs and LIs 
 * Difference between 'opened' and 'closed' sections
 * and 'active' pages is determined via the class
 * properties. The following classes are recognised
 * for LIs:
 * - page
 * - section
 * - activepage
 * - activesection
 * Furthermore, the current page uses class:
 * - current
 */
#menu {
  min-height: 180px;
  width: 195px;
  font-size: 1.05em;
}
#menu h3 {
  font-size: 1.2em;
  font-weight: bold;
}
#menu ul {
  list-style: none;
  padding-left: 0px;
  line-height: 150%;
}
#menu li {
  padding-left: 14px;
}
#menu li.level0 {
  padding-left: 0px;
}
#menu li.page { }
#menu li.section { }
#menu li.activepage { }
#menu li.activesection { }

#menu a {
  font-weight: bold;
}
#menu a:link,
#menu a:visited {
  color: #3333FF;
  text-decoration: none;
}
#menu a:active,
#menu a:hover {
  color: #FF0000; 
}
#menu a.current:link,
#menu a.current:visited {
  text-decoration: underline;
}
#menu a.current:active,
#menu a.current:hover {
  text-decoration: underline;
}
#content {
  margin: 5px;
  margin-bottom: 15px;
  width: 75%;
  float: left;
}
#content h1 {
  font-size: 2em;
  font-weight: bold;
  padding: 5px 0px 10px 0px;
}
#footer {
  clear: both;
  background-color: #FFFF66;
  width: 100%;
  text-align: left;
  margin-bottom: 40px;
  height: 30px;
}
#quickbottom {
  text-align: center;
  font-size: 0.95em;
  height: 20px;
  padding-top: 5px;
}
#quickbottom a:link,
#quickbottom a:visited {
  text-decoration: none;
  color: #3333FF;
}
#quickbottom a:active,
#quickbottom a:hover {
  text-decoration: none;
  color: #FF0000;
}
#quickbottom a.current:link,
#quickbottom a.current:visited {
  text-decoration: underline;
}
#address {
  display: none;
}
/*
 * Styling of input elements
 */
/* visual indication of the hotkey in a label is done via a U within a LABEL */
label u {
  font-weight: bold;
  text-decoration: underline;
}
/* visual indication of the non-editable fields by 'dimming' the corresponding label */
label.viewonly {
  color: #7F7F7F;
}
/* visual indication of an input field that didn't pass validation */
.error {
  color: #FF0000;
}
/* visual indication of editable fields using a slightly contrasting background colour */
input,
select,
textarea {
  background-color: #FFFFCF;
}
option {
  font-family: mono;
}
/* individual styling for different input elements (currently unused) */
input.textfield {
}
input.passwordfield {
}
label.checkboxfield {
}
input.checkboxfield {
}
label.radiofield {
}
input.radiofield {
}
input.filefield {
}
/* generic button style; individual background images follow */
input.button {
  background-color: #E7E7E7;
  background-repeat: no-repeat;
  margin-right: 30px;
  font-weight: bold;
}
input.button_save {
  padding-left: 20px;
  background-image: url(../../graphics/button_save.gif);
}
input.button_done {
  padding-left: 20px;
  background-image: url(../../graphics/button_done.gif);
}
input.button_cancel {
  padding-left: 20px;
  background-image: url(../../graphics/button_cancel.gif);
}
input.button_delete {
  padding-left: 20px;
  background-image: url(../../graphics/button_delete.gif);
}
input.button_previous {
  padding-left: 20px;
  background-image: url(../../graphics/button_previous.gif);
}
input.button_next {
  padding-left: 20px;
  background-image: url(../../graphics/button_next.gif);
}
input.button_ok {
  padding-left: 20px;
  background-image: url(../../graphics/button_ok.gif);
}
input.button_edit {
  padding-left: 20px;
  background-image: url(../../graphics/button_edit.gif);
}
/* eof /program/themes/sophia/style.css */