/*
 * This file is part of Gemse.
 *
 * Copyright 2009, 2010 Urs Holzer
 *
 * Gemse is licenced under the GNU Public Licence v3 (GPL3), 
 * or (at your option) any later version.
 */

@namespace internal "http://www.andonyar.com/rec/2008-12/gemse/internalns";
@namespace html     "http://www.w3.org/1999/xhtml";
@namespace xul      "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

/*** The window (XUL) **/
/* Initial size of window, when using the XUL interface (if this is
set to a higher value than the size of the screen, the window is made
smaller automatically */
xul|window {
    width: 1200px;
    height: 900px;
}

/*** The input box ***/
xul|textbox[type="gemse"] {
    -moz-binding: url("chrome://gemse/content/ui.xml#inputbox");
}

/*** Boxes and tables ***/

html|div {
    background-color: rgba(255,255,255,0.7);
    color: #000;
    -moz-border-radius: 3px; /* Rounded corners */
}
html|table {
    border-collapse: collapse;
}


/*** Common for all views: cursors, selections, etc. ***/

*[internal|selected="editcursor"]                { background-color: yellow; color: red;   }
*[internal|selected="attributeCursor"]           { background-color: black;  color: white; }
*[internal|selected="parent"]                    { background-color: #ddd;                 }
*[internal|selected="userSelection"]             { background-color: #7af;                 }
*[internal|selected="userSelectionCursor"]       { background-color: #66f;                 }
*[internal|selected="attributeCursor selection"] { background-color: #227;   color: white; }
*[internal|selected="insertCursorIn"]            { background-color: #dfd;                 }
*[internal|selected="insertCursorBefore"]        { border-left:  3px solid #050 !important }
*[internal|selected="insertCursorAfter"]         { border-right: 3px solid #050 !important }
*[internal|selected="referenced"]                { background-color: #faa;                 }


/*** the equation ***/

*[internal|viewClass="DirectView"], *[internal|viewClass="EquationView"] {
    border: 1px solid black;
    text-align: center;
    font-size: x-large;
}


/*** tree view. ***/

*[internal|viewClass="TreeView"] {
    border: 1px solid black;
    margin: 1px; padding: 1px 1px 5ex 1px;
    text-align: center;
    font-size: small;
}
*[internal|viewClass="TreeView"] html|div.element {
    display: inline-block;
    border: 1px solid black;
    margin: 1px; padding: 1px;
    position: relative;
    top: 5px;
    text-align: center;
}
*[internal|viewClass="TreeView"] html|div.nodeValue {
    color: blue;
    font-size: larger;
}


/*** source view. ***/

*[internal|viewClass="SourceView"] {
    font-size: small;
}
/* If syntax highlighting is turned on, the following styles will be used: */
*[internal|viewClass="SourceView"] [class="syntax"]             { color: #444; }
*[internal|viewClass="SourceView"] [class="tagName"]            { color: #080; }
*[internal|viewClass="SourceView"] [class="attributeName"]      { color: #00A; }
*[internal|viewClass="SourceView"] [class="attributeValue"]     { color: #00E; }
*[internal|viewClass="SourceView"] [class="contentText"]        { color: black; font-weight: bolder; }
*[internal|viewClass="SourceView"] [class="contentPlaceHolder"] { color: black; }


/*** attribute view. ***/

*[internal|viewClass="AttributeView"] {
    float: left;
    margin: 1ex;
}
*[internal|viewClass="AttributeView"] * {
    border: 1px solid black;
}
*.defaultAttribute * {
    color: black; background-color: #afa;
}


/*** dictionary view. ***/

*[internal|viewClass="DictionaryView"] {
    margin: 1ex;
}
*[internal|viewClass="DictionaryView"] * {
    border: 1px solid black;
}
*[internal|viewClass="DictionaryView"] html|td:first-child {
    font-size: x-large;
}
*[internal|viewClass="DictionaryView"] html|tr.user {
    color: #008;
}
*[internal|viewClass="DictionaryView"] html|tr.applied {
    background-color: #f88;
}


/*** OthersView ***/

*[internal|viewClass="OthersView"] > * {
    border: 1px solid gray;
}

/*** MessageView ***/

*[internal|viewClass="MessageView"] {
    min-height: 8ex;
}
*[internal|viewClass="MessageView"]:empty {
    min-height: 0;
}
*[internal|viewClass="MessageView"] *.error {
    color: red;
}

/*** Status bar ***/

*[internal|viewClass="StatusbarView"] {
    color: white; background-color: black;
    clear: both;
}

/*** NTNView ***/

*[internal|viewClass="NTNView"] {
    border: 1px solid black;
    text-align: center;
    font-size: x-large;
}


/*** The input box ***/

#input {
    position: relative;
    left: 40%; 
    right: 40%;
}


/*** Additional rules for the documentation ***/

/* the "screenshots" in the tutorial */
html|div.documentationScreenshot {
    border: 0.2em dashed #aaf;
    margin: 2ex 5em 2ex 5em;
    padding: 1ex 1em 1ex 1em;
}

/* what the user has to type on the keyboard */
html|kbd {
    display: inline-block;
    border: 1px solid black;
    -moz-border-radius: 3px;
    padding: 1px;
    background-color: #ddd;
    color: black;
}

/* When following a link that points somewhere into a page of the
documantation, for example a command, then it is often difficult to
see where it really points to, since other things are visible on the
screen too. (Is it the command at the top of the window or the one at
the bottom?) In order to aid the user to find the destination, we draw
a border around it.*/
*:target {
    border: 0.4ex dashed red;
}

/* Tables containg details about commands and the key sequences they
are bound to. */
html|table.doc_commandDetailTable {
    border: 1px solid black;
    float: left;
    background-color: #ffa;
    margin: 0ex 1ex 1ex 1ex;
}
html|table.doc_commandDetailTable > tr {
    border: 1px solid black;
}
html|table.doc_commandDetailTable td {
    padding: 0.2ex 0.5em;
}

/* Titles of the documentation should clear such that the floating
detail tables don't leak out */
[internal|function="documentation"] html|h1,
[internal|function="documentation"] html|h2,
[internal|function="documentation"] html|h3,
[internal|function="documentation"] html|h4,
[internal|function="documentation"] html|div.commandDocumentation {
    clear: both;
}