/* This style sheet defines the basic style for the office staff confidential pages */
@import url(/StyleSheets/office.css);

body {
  background: rgb(248,248,216);
}

/* Just for the fun of it... */
/*
h3+p:first-letter { font-size: 150%;}
h2+p:first-letter { font-size: 150%;}
h1+p:first-letter { font-size: 150%;}
*/

a:link { color: blue }
a:visited { color:blue }

h1 {
	font-size: 200%;
	font-weight: bold;
    padding-left:0.3em;
 	background: #FFFFCC;
    border-width: 1px;  
    border: 1px dashed;
	
}

h2 { 
    font-size: 160%; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: bold;
 	background: #EEEEBB;
    border-top: 0.5em;
    padding-left:0.3em;
	/*
    border-width: 1px;  
    border: 1px dashed;
	*/
}

h3 { 
   font-size: 130%; 
   font-family: Arial, Helvetica, sans-serif;
   margin-top: 1em;
   background: #EFEBCE;
   padding-left:0.3em;
}

span.action { background: #800000; color:white; font-weight: bold }

p.note { color: #003366; font-style: italic; margin-left: 2em; margin-right: 2em }

/* ************************** yellow stickies **************************** /

/* hint and alt-hint are for paragraphs that are like "sticky notes" */

.hint, .alt-hint {
  width: 14em;
  padding: 1em;
  color: #000;
  background: yellow;
  border-right: solid thick #CCC;
  border-bottom: solid thick #CCC;
  font-style: italic;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.hint {
  float: right;
  text-align: left;
  margin-left: 1em;
  margin-right: 0;
}
.alt-hint {
  float: left;
  /* margin-left: -6%; This doesn't work in IE 5 :-( */
  text-align: left;
  margin-left: 0;
  margin-right: 1em;
}
.hint ul, .hint ol {
  /*text-align: left;*/
  margin-left: 0;
  list-style-position: inside;
}
.hint li {
  margin-left: 0;
}
.hint em, .alt-hint em {
  font-style: normal;
}
.hint em em, .alt-hint em em {
  font-style: italic;
}

/* Use nohint for what should be displayed if the UA doesn't support hints */
.nohint {
  display: none;
}

/* FOlding trick for user agents that understand :target */
/*
 * Expects mark-up like this:
 *
 *   <div class=fold id=xyz>
 *     <div class=fold-title><a href="#xyz">Mountains...</a></div>
 *     <div class=fold-body>...</div>
 *   </div>
 *
 * Initially only the fold-title is visible. When clicked, the
 * fold-title disappears and the fold-body is displayed instead.
 *
 * If the UA doesn't support ':target' (or is not on a 'screen'
 * medium), the fold-title is not displayed but the fold-body is.
 * (Copied from Bert Bos' styles
 */
.fold-title {display: none}
@media screen {
    
    div.fold:target .fold-body {
        display: block;
        border: double #BBB; 
        margin-top: 1em;
    }
    div.fold:not(:target) .fold-title {
       display: block;
       font-size: 120%; 
       font-family: Arial, Helvetica, sans-serif;
       margin-top: 1em;
       background: #EFEBCE;
       padding-left:0.3em;
       font-weight: bold;
    }
    div.fold:not(:target) .fold-title a:link { color: black }
    div.fold:not(:target) .fold-title a:visited { color: black }
    
    div.fold:not(:target) .fold-body {
        display: none
    }
    .fold-title {
        border: thin solid #BBB; 
        padding: 0.5em 1em;
     }
}

/* Local navigation menu, along the right side */

div#Menu { 
    position: fixed;
    width: 16em; 
    height: auto;
    top: 1em; 
    right: 1em; 
    bottom: 1em; 
    left: auto;
    float: right;
    background: #DDB url(../Style/dogsear.png) bottom right no-repeat; 
}

div#Menu li {
    list-style: none;
}

div#Menu a {
    display: block;
    margin: 0.5em 0.5em 0em -2em;
    padding: 0.1em 0.3em;
    text-indent: 0;
    text-align: left;
    background: #aa7 url(../Style/sandydogsear.png) bottom right no-repeat;
    font-style: italic;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.1em ;
    color: white 
}

/* Second level 'a'-s are a bit too much to the right */
div#Menu ul li li a {
    margin: 0.5em 0.5em 0em -4em;
}

div#Menu:before {
    content: "Local links";
    display: block;
    margin-bottom: 1em;
    padding: 0.1em 0.5em;
    color: #888;
    font-size: larger;
    font-style: italic;
    font-weight: bold;
}

div#Content {
    margin: 0 17em 0 0.5em;
    padding: 10px;
}