/* Stylesheet for Nvu User Guide - Positioning */

/* Elements */
body { border: 2px solid #3f3; margin: 15px 10px; background: white url(images/paper.gif) repeat fixed 0% 50%; color: black; position: relative;  font-size: small; font-family:  'Trebuchet MS', Trebuchet,  Arial, Helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6, td { font-family: Verdana, Arial, Helvetica, sans-serif; }
p, ul, ol { margin: 0.3em 0em 0em 3em; }
p         { line-height: 120%; }
h1, h2, h3, h4, h5 { color: #4289b5; }
h1, h2    { clear: both; }
h1        { font-size: x-large; margin-top: 1em; margin-bottom: 0.5em; text-align: center; }
h2        { border-style: solid none none; border-color: #4289b5; border-width: 8px; margin: 1em 0em; font-size: large; padding-top: 2em; background-repeat: repeat-x; background-image: url(images/h2fill.gif); }
h2 a      { position: relative; top: -3em; }
h3, h4, h5 { margin: 0.5em 0em 0.3em; font-size: small; }
hr        { width: 80%; background-color: #4289b5; color: #4289b5; height: 2px; }
caption   { font-weight: bold; text-align: center; margin: 0.3em 0em 0em 0em; }
code      { font-family: "Courier New", Courier, Monospace; font-size: small; }
dt        { font-weight: bold; }
pre       { font-family: "Courier New", Courier, monospace; font-size: small; }
table     { margin: 0.3em 0em 0em; }
td        { padding-left: 4px; padding-right: 4px; }
ul, ol    { padding: 0.3em 0em 0em 3em; }

/* Pane definitions */

#panemain  {  position: absolute; top: 0px; left: 140px; margin-right: 120px; right: 0px; z-index: 0; padding: 8px; border: 1px dotted #f00;  }
           /*  margin-top: 17px;   */

#panemenu  { position: fixed; top: 0px; left: 10px; width: 140px; height: 100%; z-index: 1; overflow: visible;  }
#sitemenu  { position: relative; left: 0px; top: 0px; z-index: 0; margin: 10px; border: 4px solid #4289b5;   }
#paneindex { position: fixed; top: 4px; bottom: 4px; right: 4px; width: 110px;  z-index: 1; overflow: auto; background-color: #4bf; border: solid 1px black; }

/* Pane specific styles */

/* ids  */
#seca6-1 {}
#seca6-2 {}
#seca6-3 {}
#seca6-4 {}
#seca6-5 {}
#seca6-6 {}
#seca6-7 {}
#seca6-8 {}
#seca6-9 {}
#seca6-10 {}

/* Links  */
a:link     { text-decoration: underline; font-weight: bold; color: #4289b5; }
a:visited  { font-weight: bold; color: #4289b5; }
a:hover    { text-decoration: none; color: #4289b5; background-color: #eee; }

/* Global classes  - General */
.extlink   { display: none; }
.hideimg   { display: none; }
.key       { white-space: normal; }
.nopad     { border-collapse: collapse; }
.note      { margin-left: 4em; margin-right: 1em; padding-left: 0.35em; padding-right: 0pt; background-color: #ffc; }
.noteflush { margin-left: 0pt; margin-right: 1em; padding-right: 0pt; background-color: #ffc; }
.right     { float: right; clear: right; }
.showimg   { display: block; }
.warn, warnflush { margin-left: 4em; margin-right: 1em; padding-left: 0.35em; padding-right: 0pt; background-color: #ffba90; }
.warnflush { margin-left: 0px; padding-right: 0px; }
.wider     { width: 280px !important; }

/* Global classes  - for particular purposes */

.msiedata    { border-style: solid none; border-color: #4289b5; border-width: 4px; background-color: #f0faff; padding-top: 0px; }
.msieon      { display: block; position: relative; }
.msiedata h3 { font-size: large; }

/* Heading shadow */

.shadowholder           { position: relative; left: 3em; margin-right: 3em; padding-top: 1px; }
.shadowholder h1        { margin: 0px; text-align: left; font-size: 2.2em; }
.shadowholder h1.shadow { margin: 2px -2px 2px 2px; color: #c8c8dc; }
.shadowholder h1.main   { position: absolute; top: 0px; left: 0px; }

/* Tip */

div.tip       { float: right; clear: right; width: 250px; margin-left: 4px; border-style: solid; border-color: #4289b5; border-width: 10px 0px; background-color: #f0faff;   margin-top: 0.25em; }
div.tip p     { margin-left: 0; padding: 4px; }
div.tip table { border-collapse: collapse; }
div.tip ol    { margin-left: 4px; padding-left: 1.5em; list-style-position: outside; }

/* In this section */

.inthissection    { width: 250px; border: solid #4289b5 1px; float: right; margin-left: 8px; }
.inthissection h3 { font-size: large; text-align: center; }
.inthissection ul { margin-left: 0em; margin-bottom: 1em; margin-right: 8px;}

/* Playarea */

.playarea, .playareagrid   { border: 1px solid #36f; margin: 10px 0px; position: relative; top: 0px; left: 0px; width: 500px; background-color: #ffc; padding-bottom: 10px; }
.playareagrid              { background-image: url(images/100x100.gif); }
.playarea p                { margin-left: 0pt; padding-left: 4px; padding-right: 4px; }
.playarea ul, .playarea ol { padding-left: 1em; }

/* Style tables NB was stylepos */

div.styledatax { float: right; clear: right;  margin-left: 4px; }
div.styledatax table { width: 180px; border-style: solid; border-color: #4289b5; border-width: 10px 0px; background-color: #f0faff; margin-bottom: 10px; border-collapse: collapse; z-index: 1; }

div.tableright       { float: right; clear: right;  margin-left: 4px; }
div.tableright table { width: 180px; border-style: solid; border-color: #4289b5; border-width: 10px 0px; background-color: #f0faff; margin-bottom: 10px; border-collapse: collapse; z-index: 1; }
div.tableright td    { border-style: none none dotted; border-bottom: 1px dotted rgb(66, 137, 181); }

/* Local classes  */

/* Menu pane  */

#panemenu p { margin: 10px 8px;text-align: center; color: #4289b5; font-weight: bold; font-size: medium; }
#panemenu a { color: white; }
#panemenu hr { margin: 1em 4px; background-color: #4289b5; color: #4289b5; height: 2px; }
#panemenu .expandframe { border-style: solid; border-color: black #cff #cff black ; border-width: 2px; margin: 2px 0px; padding: 10px; background-color: #4bf; }
#panemenu .expandframe p { margin: 10px 8px; font-size: small; color: #fff; }
#sitemenu p { margin: 1em 0em; }

/* Site menu  */
#sitemenu .expandframe p { margin: 10px 8px; font-size: small; color: #fff; }
.menustrip { padding: 0px; width: 120px; }
#strip1 { left: 80px; position: relative; z-index: 3; }
#strip2 { position: absolute; top: 0px; left: 0px; z-index: 2; }
#strip2outerdiv { position: absolute; top: 0px; left: 140px; right: 140px; z-index: 2; }
#strip2middlediv { position: relative; margin-left: auto; margin-right: auto; background-color: #66ff99; width: 120px; }
#strip3 { right: 80px; position: absolute; z-index: 1; top: 0px; }
.menustrip p { margin: 10px 0px; text-align: center; color: #4289b5; font-weight: bold; font-size: medium; }
.menustrip a { color: white; }
.menustrip a:visited { color: white; }
.menustrip .expandframe { border-style: solid; border-color: black #cff #cff black; border-width: 2px; margin: 2px 0px; padding: 0px; background-color: #4bf; }
.menustrip .expandframe p { margin: 10px 8px; font-size: small; color: #ffffff; }

/* Index  */
#paneindex p { margin: 2px; color: #fff; text-align: center; line-height: 100%; font-sizex: x-small;}
#paneindex a:link { text-decoration: none; font-weight: normal; color: #fff; display: block; border: solid 1px transparent;}
#paneindex a:visited { text-decoration: none; font-weight: normal; color: #fff; border: solid 1px transparent; display: block; }
#paneindex a:hover { text-decoration: none; font-weight: normal; color: #fff; border-top: dotted; border-right: solid; border-bottom: solid; border-left: dotted; border-color: white; border-width: 1px; background-color: #44bbff; display: block;}

/* Using styles NB was a class */

#usingstyles { border: 2px solid #4289b5; padding: 0em 1em 1em 1em; background-color: #f4f8ff; margin-left: 3em; margin-top: 2em; position: relative; clear:right;}
#usingstyles p { margin-left: 0em; }
#usingstyles ol { margin-left: 0em; }
#usingstyles ul { margin-left: 0em; padding-left: 0em; list-style-position: inside; }
#usingstyles ul li { margin-left: 0em; }


/* Zindex dem */

#zindexdem div { padding-left: 4px; padding-right: 4px; }
#div-b { border: 4px dotted #f66; background-color: rgb(255, 204, 153); position: relative; width: 300px; height: 300px; z-index: 1; left: 25px; top: 20px;}
#div-b div { border: 4px dotted #f66; }
#div-c { border: 4px dotted #6f6; position: absolute; background-color: rgb(204, 255, 255); z-index: 2; top: 90px; left: 310px; width: 250px; height: 250px;}
#div-c div { border: 4px dotted #6f6; }


/* All menues */

.menubutton         { margin: 0.25em auto; padding: 0px; background-color: #4bf; width: 120px; }
.menubutton a       { display: block; font-weight: bold; text-align: center; text-decoration: none; color: white; border-style: solid; border-color: #cff black black #cff; border-width: 2px; padding: 1px; }
.menubutton a:link  { color: white; text-decoration: none; }
.menubutton a:hover { border-color: black #cff #cff black; padding: 0px 2px 2px 0px ; background-color: #4ae; }

/* Main menu */

.hidemenuexpand { display: none; }
.showmenuexpand { padding: 0px 2px; color: white; font-weight: bold; background-color: #4bf; position: absolute; top: 100px; left: 160px; z-index: 2; width: 300px; margin-bottom: 0em; }
.showmenuexpand ul { margin: 1em; }
.madewithnvu { margin: 10px auto; display: block; width: 80px; height: 15px; }

/* Sitemenu */
.showmenuexpand1, .showmenuexpand2, .showmenuexpand3 { padding: 0px 2px; left: 130px; top: 0px; width: 260px; color: white; font-weight: bold; background-color: #4bf; position: absolute; z-index: 4; }
.showmenuexpand2 { top: 1em; width: 200px; }
.showmenuexpand3 { left: 0px; top: 15em; width: 200px; }
.showmenuexpand1 ul, .showmenuexpand2 ul, .showmenuexpand3 ul  { margin-left: 0em; margin-bottom: 1em; }


/* Colour names */

#colournames       { position: relative; margin-left: 3em; }
#colournames p     { margin-left: 0em; margin-top: 0px; }
#colournames .tab1, #colournames .tab2, #colournames .tab3, #colournames .tab4 , #colournames .tab5  { position: absolute; }
#colournames .tab1 { left: 6em; }
#colournames .tab2 { left: 12em; }
#colournames .tab3 { border-left: 2px solid #000; left: 22em;  padding-left: 8px; height: 1.4em; }
#colournames .tab4 { left: 28em;  }
#colournames .tab5 { left: 34em;  }

/* Table section */

#tablesection table { background-color: #ffc; float: right; clear: right; margin-left: 8px; }

/* Relative position dem */
#reldem { position: relative; height: 300px; width: 300px; border: 2px solid rgb(153, 0, 0); padding: 12px; background-color: rgb(66, 137, 181); }
#reldem div.posabs { border: 1px solid #f00; position: absolute; width: 50px; height: 50px; text-align: center; }
div.posrel { border: 1px solid #f00; position: relative; width: 100px; height: 100px; text-align: center; }

/* Positioning properties NB to become a id */

div.posprops table    { border-collapse: collapse; }
div.posprops table td { padding: 4px; text-align: center; }
div.posprops table th { padding: 4px; text-align: center; }
.threesides           { border-style: solid solid none; border-color: #4289b5; border-width: 2px; }
.twosides             { border-style: none solid; border-color: #4289b5; border-width: 2px; }
.leftside             { border-style: none none none solid; border-color: #4289b5; border-width: 2px; }
.rightside            { border-style: none solid none none; border-color: #4289b5; border-width: 2px; }


/* Figure floating right */

div.fig {float: right; clear: right; width: 300px; margin-top: 1em; margin-left: 4px;}
div.fig p {text-align: center; margin: 0px; border-style: solid solid none; border-color: rgb(66, 137, 181); border-width: 1px;}

/* Overflow demonstration */
.demoverflow { border: 2px solid #4289b5; height: 200px; width: 110px; }
.demoverflow  p { margin: 0px; }


/* Print styles */

@media print {.usingstyles { border-color: #888; background-color: #fff; }}
@media print { .msiedata { border-color: #888; }}
@media print { .threesides, .twosides, .leftside, .rightside { border-color: #888; }}