/**
 * General styles for all pages in VIKO
 *
 */





/**
 * General settings
 *
 * Font-size is one degree smaller than default.
 * Verdana is used as the main font.
 *
 * Top- and bottom-margins/paddings are removed.
 * The page only has small padding on sides
 * (this is to avoid text being in contact with window border
 * for example when the page is zoomed considerably in).
 *
 * The text of the page is dark-gray on white backround.
 */
body {
    font-size: smaller;
    font-family: Verdana, Arial, Helvetica, sans-serif;

    margin: 0;
    padding: 1em 1em 0 1em;

    color: #333;
    background-color: white;
}


/**
 * Unvisited links are blue,
 * visited links purple,
 * active links red,
 * :hover is left unstyled.
 */
a:link {
    color : #39c;
}
a:visited {
    color : #939;
}
a:active {
    color : red;
}





/**
 * Container
 *
 * The container-div surround all the contents of the page.
 * This element is used to create an elastic layout. See:
 * http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
 * for in-depth discussion. But in short:
 *
 * A fixed-width page doesn't even come under the question,
 * as in web we never really know how wide or narrow is the screen
 * of the user; a fluid page (where the page is filled with text
 * from side to side), is considerably better than fixed-width,
 * when we consider narrow screens, but falls apart on larger displays,
 * where the text-lines become too long to read comfortably.
 * A usual solution is to make the page fluid and set the maximum with
 * in pixels. But setting the max-width in em-s is even better, because
 * that way the line-length will always remain relative to the font-size:
 * larger fonts - longer lines, smaller fonts - shorter lines.
 *
 * Also place the page into the center of the screen.
 *
 * Language menu is placed similarily at the top of the page.
 */
#container, #lang {
    max-width: 55em;
    margin: 0 auto;
}
/**
 * HACK: IE5 and IE6 do not support max-with.
 * For those browsers we set a constant width instead.
 * Star-html hack is used to select only IE <= 6
 */
* html #container, * html #lang {
    width: 55em;
}
/**
 * HACK: IE5 and IE6 do not support centering with margin: auto;
 * Instead it's possible to use the text-align:center; to
 * center the container element. After that text inside
 * container needs to aligned left again (as text-align is inherited).
 */
body {
    text-align:center;
}
#container {
    text-align:left;
}
#lang {
    text-align:right;
}



/**
 * Language menu
 *
 * The language menu is positioned at the top right corner of container.
 * All languages are in one row.
 */
#lang {
    padding: 0 0 1em 0;
}
#lang li {
    list-style-type: none;
    display: inline;
    padding-left: 0.5em;
}


/**
 * Heading 1
 *
 * The topmost heading of every page is first-level heading,
 * it begins with image of VIKO logo and continues with
 * the title of the current environment (e.g. "Teacher interface").
 *
 * As the topmost element, it needs upper margin to separate the
 * text from the screen border. Also, a small padding is required
 * for the sides of the VIKO logo. Exact font-size-, margin- and padding
 * values were adjusted for maximum similarity with the look of VIKO 1.1
 *
 * Heading is typeset in uppercase Arial (and not bold).
 *
 * A slightly lighter gray than body text is used for page title.
 */
h1 {
    margin: 0;
    font-size: 1.7em;

    font-family: Arial, Verdana, sans-serif;
    font-weight: normal;
    text-transform: uppercase;

    color: #555;
    background-color: white;
}
h1 img {
    padding:0 1.5em;
}




/**
 * Copyright
 *
 * At the bottom of every page is the copyright.
 * Smaller font is used for this footer and a thin top border.
 * The text itself is aligned to right.
 *
 * The footer also acts as a clearer, in case there are floated
 * elements inside the content above.
 */
#copyright {
    font-size: smaller;
    text-align: right;

    border-top: 1px solid;
    padding: 1.5em 0;
    margin: 0;

    clear: both;
}
/**
 * Just before the copyright itself, there's the horisontal rule.
 * But that's only for the convenience of old no-css browsers.
 */
hr {
    display: none;
}




/**
 * Navigation
 *
 * All margins and paddings are removed from the navigation-list.
 * Line-height is set to be as high as the font itself, this is because
 * we want to emulate separators of menu items, which look like this:
 * item1 | item2 | item3 | item4
 * But by default the line-height is higher than text, which means our
 * borders (which emulate the pipe character "|" ) would look
 * unproportionaly high. An obvious choice would be to set the line-height
 * to 1em, but this is too narrow for IE, so it is 1.1em instead - not
 * ideal, but not disturbing either.
 *
 * The links of navigation menu are typeset in bold with underlines removed.
 * The links are always blue, regardless of being visited.
 */
#nav {
    margin: 0;
    padding: 0;
    line-height: 1.1em;
}
#nav a {
    font-weight: bold;
    text-decoration: none;

    color : #39c;
    background-color: white;
}
/**
 * If navigational link is inside <strong>, then it means, the subpage
 * of this menu item is selected.
 * We use underline to emphasize this kind of link.
 */
#nav strong a {
    text-decoration: underline;
}
/**
 * Navigation items are changed from list-items to block-elements and
 * floated left, so that they will form one or more rows (depending how
 * many items there are).
 *
 * We have to add some spacing above and below the menu - done by margins.
 *
 * At the right side each element will have padding, border and margin,
 * to simulate | separated | with | pipes | look.
 */
#nav li {
    float: left;
    display: block;
    list-style-type: none;

    margin-top: 0.4em;
    margin-bottom: 0.4em;

    padding-right: 0.7em;
    border-right: 1px solid;
    margin-right: 0.7em;
}
/**
 * Only the very last navigation item doesn't need the border on the right side.
 */
#nav li.last-child {
    padding-right: 0;
    border-right: none;
    margin-right: 0;
}




/**
 * Logout
 *
 * The first item in navigation menu is always the logout.
 * First we have to get rid of styles applied to all navigation items,
 * which we don't need. These are all the right-side things plus floating.
 *
 * After that it will be displayed as simple block with 0.7em margins
 * above and below. A border is placed under the text and the text itself
 * is aligned right.
 *
 * The border under the logout link is blue.
 */
#nav li.first-child {
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    float: none;

    border-bottom: 2px solid;
    text-align: right;

    border-color: #39c;
}
/**
 * Logout link is in white text on a blue background.
 *
 * A white image is used at the top-left corner, to cut off
 * some of the blue background. As the image is 17 pixels wide,
 * the left padding is adjusted accordingly.
 * A small padding is also added on the right side of the logout-link.
 */
#nav li.first-child a {
    color: white;
    background: #39c url("../img/logout-gradient.gif") no-repeat;
    padding: 0 0.5em 0 17px;
}




/**
 * Content
 *
 * As the floated navigation is before content, we have to clear.
 * A small padding is added to separate navigation from the main content
 */
#content {
    clear: both;
    padding-top: 1em;
}




/**
 * heading 2
 *
 * Uses a larger font with 1.5 line-height and 1.5em bottom-margin.
 *
 * clear is provided just in case, where there might be some
 * floated elements before this heading.
 *
 * Second level heading has light-gray background.
 */
h2 {
    font-size: larger;
    line-height: 1.5;
    margin: 0 0 1.5em 0;

    clear: both;

    color: #333;
    background-color: #eee;
}




/**
 * Columns
 *
 * The col-1 and col-2 classes always represent two adjacent columns.
 * Usually they are both 50% of the page width (actually 48%, as two
 * percentages of each column is reserved for the in-between margin).
 */
.col-1 {
    width: 48%;
    float: left;
    margin-bottom: 2em;
}
.col-2 {
    width: 48%;
    float: right;
    margin-bottom: 2em;
}




/**
 * Lists
 *
 * All lists are indented the same amount and have same margins.
 * Also, small margins are between list-items themselves.
 * Unordered lists use squares-shaped bullets.
 * Definition lists have definition terms in bold.
 */
li {
    margin: 0.2em 0;
}
ul, ol {
    margin: 1em 0;
    padding-left: 2.5em;
}
ul li {
    list-style-type: square;
}
dt {
    font-weight: bold;
}



/**
 * Abbreviations
 *
 * As the abbr element is not supported in IE <= 6,
 * the acronym element is used for all abbreviations, initialisms and acronyms.
 *
 * Abbreviations have dotted underline,
 * and when hovered, normal cursor changes into help-cursor (usually with a question-mark).
 *
 * The font size is adjusted, because (at least) Opera 9 renders acronyms in smaller font.
 */
acronym {
    cursor: help;
    border-bottom: 1px dotted;

    font-size: 1em;
}




/**
 * Errors and notices
 *
 * Errors as bad messages are red, notices as good messages are green
 */
strong.error {
    color: red;
}
strong.notice {
    color: green;
}



/**
 * Tables
 *
 * First - all tables are as wide as the container they're in.
 * Secondly - all cells are surrounded with thin border (which is collapsible).
 * Thirdly - all normal table cells use some default padding.
 * Fourthly - the contents of table cells is aligned to top.
 * And last, but not least, tables must have margins too.
 *
 * Table cells have light-gray borders and even rows have light-gray
 * background, but heading have darker gray background.
 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
td, th {
    border: 1px solid;
    padding: 0.2em 0.3em;
    vertical-align: top;

    border-color: #eee;
}
tr.even {
    color: #333;
    background-color: #f8f8f8;
}
thead {
    color: #333;
    background-color: #eee;
}
/**
 * Headings inside body and footer section are aligned left,
 * headings at the table header are centered.
 */
tbody th,
tfoot th {
    text-align: left;
}
thead th {
    text-align: center;
}
/**
 * All text inside table footer is bold.
 */
tfoot {
    font-weight: bold;
}
/**
 * Numeric content inside table cells is aligned right.
 */
td.nr, th.nr {
    text-align: right;
}




/**
 * Delete link inside tables (marked with "X")
 *
 * Delete-links are bold, underlined and centered.
 *
 * Instead of using default padding provided by table-cell,
 * the link is treated as block.
 *
 * When hovering over delete-links, link background changes to red and
 * text into white. Underline disappears.
 */
td.delete {
    padding: 0;
}
td.delete a, td.delete acronym {
    padding: 0.2em 0;
    display: block;
    text-align: center;
    font-weight: bold;
    border: none;
}
/**
 */
td.delete a:hover {
    color: white;
    background-color: red;
    text-decoration: none;
}

/**
 * If the row is marked as selected, then it is displayd with red background.
 * The !important keyword is used to force the colors (for example when
 * a has pseudo-class :visited.
 *
 * The "selected" class is used primarily by scripts.
 * For example before row is deleted, it is marked as selected.
 */
tr.selected, tr.selected a {
    background-color: red !important;
    color: white !important;
}



/**
 * Forms
 *
 * Forms are surrounded with 3D-like border,
 * they have light-gray background
 * with small decorative image at the lower right corner.
 */
form {
    border: 1px solid;
    border-color: #eee #888 #888 #eee;
    color: #333;
    background: #f8f8f8 url("../img/form-corner.png") bottom right no-repeat;
}
/**
 * Textarea is always as wide as possible.
 * Logical would be to assign 100%, but this isn't treated
 * equally across browsers (at IE and FF it becomes too wide).
 * I guess this is because IE and FF calculate the width of
 * textarea like: width + with-of-scrollbar.
 * 98% seems a reasonable compromise.
 */
textarea {
    width: 98%;
    font-family: Arial, sans-serif;
}
input.long-text {
    width: 97%;
}
/**
 * The text, which indicates, whether the field is required,
 * is rendered in smaller font and not bold below the label
 * main text.
 */
label .required {
    display: block;
    font-size: smaller;
    font-weight: normal;
}
/**
 * Fieldsets are rendered without border and padding.
 * Margin is added for spacing with other elements on page.
 *
 * The legend is formatted similarly to level 3 heading.
 */
fieldset {
    padding: 0;
    border: none;
    margin: 1em 0;
}
legend {
    font-weight: bold;
    font-size: larger;
}
/**
 * Unordered lists inside forms contain lists of checkboxes.
 * List items are displayed without bullets.
 */
form ul {
    padding-left: 0;
    margin-left: 0;
}
form ul li {
    list-style-type: none;
    display: block;
}
/**
 * A small padding is added for all block-level elements inside forms
 * (except tables, which already have a small padding).
 */
form p,
form ul,
form ol {
    padding-left: 0.3em;
}


/**
 * Tables inside forms
 *
 * Table headers (containing lables) have constant length,
 * while table data (containing fields) varies in size,
 * as the viewport size changes.
 *
 * Labels are aligned right so, that they nicely line up with fields.
 */
form th {
    width: 10em;
    text-align: right
}
/**
 * Tables inside forms have no borders or backgrounds.
 */
form td,
form th {
    border: none;
}
form tr,
form tr.odd,
form tr.even {
    color: #333;
    background-color: transparent;
}
/**
 * If form table row has class "error", then the field inside
 * the row has been filled incorrectly.
 *
 * Each such a row is styled with highlighted background and border.
 */
form tr.error {
    background-color: #ff9e8e;
}
form tr.error td, form tr.error th {
    border-top: 3px solid red;
    border-bottom: 3px solid red;
}
form tr.error p {
    margin: 0.1em 0;
}


/**
 * Actions are a list of links (a inside li inside ul)
 * usually at the bottom of page, that provide user
 * with some activities like creating new itemas and
 * returning to previous page.
 *
 * Each action link is floated left.
 */
.actions {
    clear: both;
    margin-left: 0;
    padding-left: 0;
    height: 30px;
}
.actions li{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}
.actions li a {
    padding: 0.25em 1em 0.25em 26px;
    height: 22px;
    display: block;
    float: left;
}
/**
 * Each type of action has a different icon.
 *
 * action-new has a sheet of paper with an asterisk.
 * action-back has an arrow pointing to left.
 * action-edit has a pencil and a paper.
 */
.actions .action-new a {
    background: url(../img/new.png) no-repeat;
}
.actions .action-new-folder a {
    background: url(../img/new-folder.png) no-repeat;
}
.actions .action-back a {
    background: url(../img/back.png) no-repeat;
}
.actions .action-edit a {
    background: url(../img/edit.png) no-repeat;
}




/**
 * All files and folders links will have icon in front of their name
 */
a.unknown-file      { padding-left: 20px; background: url(../img/icons-small/unknown.png) no-repeat }
a.folder            { padding-left: 20px; background: url(../img/icons-small/folder.png) no-repeat }
a.uri               { padding-left: 20px; background: url(../img/icons-small/webpage.png) no-repeat }
a.webpage-file      { padding-left: 20px; background: url(../img/icons-small/webpage.png) no-repeat }
a.document-file     { padding-left: 20px; background: url(../img/icons-small/document.png) no-repeat }
a.pdf-document-file { padding-left: 20px; background: url(../img/icons-small/pdf-document.png) no-repeat }
a.spreadsheet-file  { padding-left: 20px; background: url(../img/icons-small/spreadsheet.png) no-repeat }
a.presentation-file { padding-left: 20px; background: url(../img/icons-small/unknown.png) no-repeat }
a.image-file        { padding-left: 20px; background: url(../img/icons-small/image.png) no-repeat }
a.audio-file        { padding-left: 20px; background: url(../img/icons-small/audio.png) no-repeat }
a.archive-file      { padding-left: 20px; background: url(../img/icons-small/archive.png) no-repeat }
a.text-file         { padding-left: 20px; background: url(../img/icons-small/text.png) no-repeat }
a.video-file        { padding-left: 20px; background: url(../img/icons-small/video.png) no-repeat }

/**
 * Material descriptions are also indented
 */
.material-description {
    padding-left: 20px;
}