/* ------------------------------------------- */

/* unconditional selector (generic styling) */

body {
  font-family:Arial, sans-serif;
  font-size:14px;
  margin:0px;
  padding:10px;
}

div {
 font-family:Arial, sans-serif;
  font-size:14px;
  margin:0px;
  padding:1px;
}

input, select, textarea {
  font-family:Tahoma, sans-serif;
  font-size:0px;
}

/* ------------------------------------------- */

/* pseudo selectors (hyperlinkks) */

a:link, a:visited, a:active, a:focus {
  color:#2d3c86;
  text-decoration:none;
}

a:hover {
  /* hover must be last, since it may be over-
        written by visited in some engines */
  color:#666;
  text-decoration:none;
}

/* ------------------------------------------- */

/* generic classes (to avoid inline styling) */

.none {
  display:block;
}
.hidden {
  display:none;
}

/* ------------------------------------------- */

/* main layout (handles basic layout) */

div.sideblock {
  /* container for the menu, should be visible at
        all times */
  position:absolute;
  top:0.25em;
  left:0.25em;
  width:19.5em;
}
div.mainblock {
  /* container for the content */
  border-left:2px dashed #ddd;
  margin:0em 0em 0em 20em;
}

/* ------------------------------------------- */

/* sub layout (lesser formating elements) */

div.block {
  /* this block is appended to the blocks that
        contain floating elements to ensure the
        proper closing of the encapsulating
        block */
  clear:left;
}

div.spacer {
  /* this block is a formating helper */
  padding-top:0.5em;
}

/* ------------------------------------------- */

/* tree styles (handles visuals and display
      logic for the dhtml treeview) */

div.tree {
  /* container for sub-categories, also handles
        the indent */
  margin-left:14px;


  
}

div.root {
  /* top container for the tree, should contain
        the general style info
     note: has to be declared after the "tree"
        class, since it should be able to
        overwrite it */
  margin:0px;
  padding-left: 30px;
}

/* the two following selectors are a pretty
      clever construct that saves a lot of
      java-script hacking.
   since the tree has a cascading logic in
      itself you are able to use these two
      simple selectors to display the elements
      correctly, even while nested.
   all you have to do via javascript is to set
      the class to either "expanded" or
      "collapsed" and it displays correctly. */
div.expanded div.tree {
  /* display sub-categories that lie below an
        expanded parent element */
  display:block;
}

div.collapsed div.tree {
  /* hide sub-categories that lie below a
        collapsed parent element */
  display:none;
}

div.leaf div.tree {
  /* since leaf nodes are not supposed to have
        sub-categories, we are hiding them to
        minimize the impact of bad HTML code */
  display:none;
}

/* here, again, we are using the cascading
      of the tree to display the icons for the
      specific element types.
   note: the order is important, since the
      "collapsed" class has to take preceedance
      over the "expanded" class in order to
      display the tree correctly */
div.expanded div.name {
  /* display an icon for expanded elements and
        apply a padding to clear the space for
        display of the icon */
  background-image:url(../art_global/minus.jpg);
}

div.collapsed div.name {
  /* display an icon for collapsed elements and
        apply a padding to clear the space for
        display of the icon */
  background-image:url('../art_global/plus.jpg');
}

div.leaf div.name {
  /* display an icon for leaf elements and apply
        a padding to clear the space for display
        of the icon */
  background-image:url('../art_global/leer.jpg');
}

div.name {
  /* common styling for the "name" class, this
        assumes that the icons are of the same
        size for each treenode */
  background-position:0 0em;
  background-repeat:no-repeat;
  padding-left:55px;
  text-indent:-20px;
}

/* ------------------------------------------- */

/* question styles */

div.question {
  /* styles the block that contains the
        question and applicable answers */
  background-color:#f4f4f4;
  border:1px dashed #666;
  margin:1em;
  padding:0.3em;
}

div.question div.id {
  /* this is the id (or question number) */
  float:left;
  font-size:1.5em;
  font-weight:bold;
  margin:0em 0.5em 0.2em 0.2em;
}

div.question div.text {
  /* this is the question text */
  padding:0.2em 1em 0.2em 2em;
}

/* ------------------------------------------- */

/* answer styles */

div.answer {
  /* floating block that contains an answer
        segment.
     the float ensures that the available screen
        space is used as fully as possible while
        not destroying the layout by breaking
        answer blocks over several lines */
  background-color:#eee;
  border:1px dashed #aaa;
  float:left;
  margin:0em 0em 0.25em 0.25em;
  padding:0.3em 0.5em 0.2em 0.5em;
  width:22em;
  overflow:auto;
}

div.answer div {
  /* block elements inside an answer segment
        should have some space between each
        other to improve readability */
  padding-bottom:0.2em;
}

/* ------------------------------------------- */

/* ####### */

div.visbutton a {
  cursor:pointer;
  display:block;
  font-weight:bold;
}
div.visbutton a:hover {
  text-decoration:underline;
}

h1{
	padding-top: 5px;
}