/* Style sheet for Lab Notes */
/* Generated by KompoZer - Reformatted manually */
/* Author - Charles Cooke */
/* Modified 8th May 2009 */

/* Global scene setting */
/* ==================== */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, font, img, kbd, q, s, samp, strong, sub, sup, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td 
   { border:  none; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; }
body { margin: 20px; background: #f4f8ff url(images/bluepapertrans2.png) repeat fixed 0% 50%; font-family: 'Trebuchet MS',arial,helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 0.8125em; line-height: 1; color: black; }

/* Layout */
/* ====== */

#pane_main       { margin: 32px 0 20px 190px; max-width: 60em; }
div.pane_section { border: 2px solid #666666; margin: 20px 0px; padding: 10px; background-color: #eeeeee; }
#menu_page       { margin: 18px 0 20px 8px; position: fixed; top: 4em; left: 0px; width: 180px; z-index: 1; }
#menu_site       { margin: 0 6px 20px 0px; position: absolute; top: 0px; right: 20px;  width: 100px; z-index: 1; }
#pane_header     { position: relative; left: 0px; top: 0px; margin-top: -20px; }

/* Global elements */
/* =============== */

p, li, td, blockquote, code, pre { font-size: 1em; }
p, blockquote          { margin: 1em 0; letter-spacing: 0.1em; line-height: 1.8em; text-align: justify; }
h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.25em; color: #4289b5; font-weight: bold; }
h1                     { font-size: 1.6em; margin-top: 0.25em; }
h2                     { font-size: 1.4em; }
h3                     { font-size: 1.2em; }
h4, h5, h6             { font-size: 1em; }
h5, h6                 { font-weight: normal; }
abbr, acronym          { font-variant: small-caps; }
blockquote             { font-style: italic; margin-left: 2em; margin-right: 2em; }
caption                { caption-side: top; margin-bottom: 0.25em; font-weight: bold; }
code, pre              { font-family: "Courier New",Courier,Monospace; }
dd                     { margin-bottom: 1em; letter-spacing: 0.1em; line-height: 1.8em; text-align: justify; margin-left: 1em; }
dt                     { font-weight: bold; }
hr                     { margin: 1em 10%; background-color: #4499bb; color: #4499bb; height: 2px; }
ul, ol                 { margin-left: 5em; margin-bottom: 1em; }
li                     { margin-bottom: 0.5em; letter-spacing: 0.1em; line-height: 1.4em; }
pre                    { border: 2px groove #4289b5; margin: 1em 2em; padding: 0em 1em 1em; background-color: #f4f8ff; overflow: auto; }
pre:before             { border-bottom: thin solid gray; content: "Example"; display: block; margin-bottom: 1em; background-color: #4289b5; color: #fafbdd; margin-left: -1em; margin-right: -1em; padding-left: 1em; font-weight: bold; }
table      { border: 2px solid #4289b5; border-collapse: collapse; }
td, th                 { border: 1px dotted #4289b5; padding: 2px; text-align: center; }
div.pane_section h2 + p span { text-transform: uppercase; font-weight: bold; }

/* Global classes*/
/* ============= */

.right                 { float: right; display: inline; margin-left: 4px;  clear: right; }
.left                  { float: left; display: inline; margin-right: 4px; clear: left; }
.clear_r               { clear: right; }
.clear_l               { clear: left; }
.footnote              { border: 1px solid #333333; margin: 0; padding: 0; font-size: 0.5em; line-height: 0.5em; vertical-align: top; }
a.footnote:link, a.footnote:visited { text-decoration: none; }
a.footnote:hover       { color: white; background-color: #4289b5; }
div.clearance          { clear: both; height: 1px; font-size: 1px; }
div.dem_box            { border: 2px groove #4289b5; margin: 1em 2em; padding: 0em 1em; background-color: #f4f8ff; overflow: auto; }
div.dem_box p          { text-align: left; margin-bottom: 0.25em; line-height: 1; }
div.side_box           { border: 2px solid #4289b5;  padding-right: 8px;  margin-left: 4px;  margin-bottom: 0.25em;  width: 40%;  float: right;  padding-left: 4px;  position: relative; }
div.tip                { border-style: solid;  border-color: #4289b5;  border-width: 10px 0px;  margin: 4px 0px 4px 4px;  width: 250px;  float: right;  position: relative;  clear: right;  border-collapse: collapse;  background-color: #f4f8ff;}
div.display p          { margin: 0;  color: #999999;  font-size: large;  font-weight: bold;  text-align: center; }

/* Global Links*/
/* =========== */

a:link, a:visited      { color: #4289b5; }
a:hover                { color: #205090; }
a[href^="http"]        { background: transparent url(images/extlnk.png) no-repeat right top;  padding-right: 10px; }

/* Header specials*/
/* ============== */

p#headertext           { top: 0px; left: 0px; position: relative; color: #4289b5; }
p#headershadow         { position: absolute; left: 2px; top: 2px; color: white; }
#pane_header p         { margin: 0px; font-size: 3em; line-height: 1.2; letter-spacing: 0; font-weight: bold; font-family: Georgia,"Times New Roman",Serif; }
p#headertext span, p#headershadow span { font-style: italic; text-transform: uppercase; font-size: 0.6em; }
#fleche                { width: 800px; height: 16px; margin-left: -20px; background-image: url(images/fleche5-trans.png); background-repeat: no-repeat; }

/* Menu specials*/
/* ============ */

.menu p               { margin: 0; font-size: 0.8em; font-weight: bold; color: #4289b5; text-align: center; line-height: 1.2em; }
.menu > p:first-child { font-size: 1.6em; font-weight: bold; }
.menu ul              { margin: 0; list-style-type: none; }
.menu li              { margin: 0; letter-spacing: 0; line-height: 1; }
.menu hr              { margin: 1em 4px; background-color: #4499bb; color: #4499bb; height: 2px; }
.menu a               { border: 2px solid ; margin: 0.25em auto; padding: 1px; display: block; text-align: center; font-size: 1.2em; color: white; text-decoration: none; }
.menu a:link, .menu a:visited, .menu a:active, .menu a:focus { border-color: #ccffff #4289b5 #4289b5 #ccffff; padding: 1px; background-color: #44bbff; color: white; }
.menu a:hover         { border-color: #4289b5 #ccffff #ccffff #4289b5; padding: 0px 2px 2px 0px; background-color: #40b0f0; }
.menu a span          { display: none; }
.menu a:hover span    { border-style: solid; border-color: #4289b5 #ccffff #ccffff #4289b5; border-width: 2px; padding: 4px; display: inline; position: absolute; width: 300px; text-align: center; background-color: #44bbff; color: white; text-decoration: none; line-height: 1.2; }
.menu a:hover span    { border-style: solid; border-color: #4499bb #ccffff #ccffff #4499bb; border-width: 2px; padding: 4px; display: inline; position: absolute; width: 300px; text-align: center; background-color: #44bbff; color: white; text-decoration: none; }
.menu img             { margin-left: auto; margin-right: auto; width: 80px; margin-top: 10px; }
#menu_site a                            { margin: 1px 0; }
#menu_page a:hover span                 { left: 210px; top: 30px; }
#menu_site a:hover span                 { right: 0px; top: 4em; margin-top: 38px; }
#menu_site.menu li a:first-letter       { text-decoration: underline; color: white !important; }
#menu_site.menu li a.nodec:first-letter { text-decoration: none ; }


/* Rules for all pages except Link styles */
/* ============================================== */

#lab_notes a:focus, #convert_doctype a:focus, #ie_script a:focus, #layers a:focus, #targeting a:focus { outline: 2px red dotted; }
#lab_notes a:active, #convert_doctype a:active, #ie_script a:active, #layers a:active, #targeting a:active { outline: none; }


/* Rules specific to individual pages */
/* ================================== */

/* ... for Lab Notes index */

#lab_notes div.pane_section h1 + p span { text-transform: uppercase; font-weight: bold; }


/* ... for layers.html */
/* =================== */

/* Uses layers_specials.css */

/* ... for targeting.html */
/* ====================== */
/* Nil */


/* ... for convert_doctype.html */
/* ================================== */

#convert_doctype .safe { background-color: #66ff99; }
#convert_doctype .unsafe { background-color: red; }
#convert_doctype .uncertain { background-color: #ff9966; }

/* ... for ie_script.html */
/* ====================== */

#ie_script #ie_warning { border: 4px solid #ffcc00; display: none; margin-right: auto; margin-left: auto; width: 75%; padding-right: 4px; padding-left: 4px; background-color: #ffff99; color: black; }

/* ... for link_styles.html */
/* ======================== */

#link_styles div#s9 table#browsers      { margin-left: -200px; margin-right: -8px; position: relative; z-index: 1; background-color: #eeeeee; }
#link_styles div#s9 table thead th      { border-bottom: 2px solid #4289b5; }
#link_styles div#s9 table tbody th + td { border-left: 2px solid #4289b5; }
#link_styles .dem_area                  { border: 2px solid #666666; padding: 8px; }
#link_styles div#s9 table th span       { display: none; }
#link_styles .dem_area .menu_box        { width: 200px; }
#link_styles div.text_area1 a:focus, #link_styles div.text_area2 a:focus { outline: 2px dotted red; }
#link_styles div.text_area2 a:active       { outline: none; }
#link_styles .image_area a:link img     { border: 2px solid transparent; }
#link_styles .image_area a:visited img  { border: 2px solid transparent; }
#link_styles .image_area a:hover img    { border: 2px dotted #4090c0; }
#link_styles .image_area a:focus img    { border: 2px dotted red; }
#link_styles .image_area a:active img   { border: 2px solid transparent; }
#link_styles #link_states td            { background-color: #cccccc; padding-left: 1px; padding-right: 1px; }
#link_styles #link_states td.possible   { background-color: #66ff99; }
#non_underlined_links p a:link,   #non_underlined_links p a:hover,   #non_underlined_links p a:visited   { border-bottom: 1px solid; text-decoration: none; padding-bottom: 1px; }
#link_styles .button_dem                { width: 180px; list-style-type: none; }


/* ================================== */

@media print {
  #link_styles div#s9 table#browsers { margin-left: 0px; }
  #link_styles div#s9 table#browsers td, #link_styles div#s9 table#browsers th { border-color: black; }
}