/*   Style sheet for panels   *
 *      and panelizer.        *
 *                            *
 *    Using system fonts &    *
 *    colors everywhere.      *
 *                            *
 *   (c) Rijk 2005 - 2006     */

/* Start: Basic Styles */

html {height: 100%;}

body {
font: menu;
color: WindowText;
background: Window;
margin: 0;
padding: 0;
}

html, address {background: Scrollbar !important;}

address {padding-top: 1em;}

h1, h2, h3, h4 {
font: caption;
font-weight: bold;
}

h1 {
color: Window;
background: GrayText;
text-align: center;
margin: 0;
padding: 0.2em 0;
}

h1 span {
display: block;
color: GrayText;
background: Window;
}

h2 {
margin: 1.5em 0 0.25em 0;
padding-left: 0.25em;
border-bottom: 1px solid GrayText;
}

td {
text-align: left;
vertical-align: top;
}

form /* Forms are wide table-blocks */ {
font: message-box;
display: table;
padding: 3px;
width: 90%;
margin: auto;
}

form, iframe, a[href][target=preview], a[href][rel=sidebar] /* Styles for links-as-buttons */ {
color: ButtonText;
background: ButtonFace;
border: outset 2px !important;
border-color: ButtonHighlight ButtonShadow !important;
}

dt {font-weight: bold;}

dd {margin-bottom: 1em;}

dd:before {
content: ">> ";
font-size: x-small;
}

/* End: Basic Styles */

/* Start: Quirky Styles (basic on particular use of markup in the panels) */

input[type=submit],input[type=button] /* Wide Submit Buttons */ {
display: block;
width: 100%;
font-weight: bolder;
text-align: center;
margin: 0 auto;
}

q {
font: small-caption;
color: GrayText;
background: Window;
display: block;
text-align: center;
}

q:first-child {color: Window; background: GrayText;}

q + br {display:none;}

/* End: Quirky Styles */

/* Start: General Link Styles */

a[href] {
color: Highlight;
background: HighlightText;
text-decoration: none;
border-bottom: 1px solid Highlight;
}

a[href]:visited {border-bottom: 1px dotted Highlight;}

a[href]:hover {
color: InfoText;
background: InfoBackground;
border-bottom: 1px solid transparent;
outline: 1px outset InfoText;
}

address a[href] {color: inherit; background: inherit; border-color: inherit;}

a[target=preview], a[rel=sidebar] /* Styles for links-as-buttons */ {
font: caption;
font-variant: small-caps;
font-weight: normal;
text-decoration: none;
padding: 0px 3px 0px;
}

/* End: General Link Styles */

/* Start: Class and ID Styles */

textarea#pad {width: 100%;}

button.switcher {font: inherit; border: outset medium GrayText;}
button.switcher:hover {cursor: pointer;}

button.highlight {color: HighlightText; background: Highlight;}
button.reversehighlight {color: Highlight; background: HighlightText;}

.online {display: none;}
/*.offline {display: block;}*/

.opera-only {display: none;}

/* End: Class and ID Styles */

/* Start: Panelizer Page Styles */

#panelizer h2, #panelizer p, #panelizer address  {padding-right: 210px;}

#panelizer dl {
margin-right: 230px;
margin-top:-.5em;
padding: 1em 1em 0;
}

#previewholder {
position: fixed;
right: 1em;
width: 210px;
top: 3em;
bottom: 3em;
max-height: 100%;
}

/* End: Panelizer Page Styles */

/* Start: Stopwatch Page Styles */

#stopwatch select, #stopwatch input {width: 90%;}
#stopwatch form p {text-align: center;}

#stopwatch input[type=text] {
display: block;
font-size: 2.75em;
text-align: center;
margin: 0 auto;
}

/* End: Stopwatch Page Styles */

/* Start: Lipsum Page Styles */

#lipsum input[type=text] {
text-align: right;
width: 3em;
float: left;
}

#lipsum label {
display: block;
margin: 0 0 0 4em;
padding: 0;
}

#lipsum label + br {display: none;}

/* End: Lipsum Page Styles */

/* Start: General QR Pages Styles */

.htmlqr, .cssqr, .httpqr {margin: 0; padding: 1.75em 0 0;}

.topLinks {
padding: 4px 0 0 1px; 
color: Window; background: GrayText;
border-bottom: 1px solid ThreeDDarkShadow;
white-space: nowrap;
text-align: left;
position: fixed;
top: 0;
bottom: auto;
left: 0;
right: 0;
height: auto;
width: 100%;
}

.topLinks a[href] {
color: ButtonText; background: ButtonFace;
padding: 2px 2px 0;
margin: 0;
border: 1px solid ThreeDDarkShadow;
}

.topLinks a[href]#current {
color: WindowText; background: Window;
border-bottom: 1px solid Window;
}

.topLinks a:hover {background: GrayText; outline: none;}

.htmlqr a, .cssqr a, .jsqr a[href], .httpqr td a[href], .httpqr li a[href] {text-decoration: none; border-bottom: none; color: inherit; background: inherit;}
.htmlqr ul, .cssqr ul, .jsqr ol {margin: 0; padding: 0;}
.htmlqr ul li, .cssqr ul li {padding: 0.1em 0.5em; list-style: none; border-bottom: 1px dotted GrayText;}
.htmlqr ol, .cssqr ol, .httpqr ol {margin: 0.33em 0; padding: 0 0 0 2.5em;}
.htmlqr ol li, .cssqr ol li, .httpqr ol li {padding: 1px 0.1em;}

.htmlqr ol.append, .cssqr ol.append {list-style-type: upper-alpha;}
.htmlqr ol.other, .cssqr ol.other, .httpqr ol.other {list-style: none;}

.jsqr ol {list-style: none;}

/* End: General QR Pages Styles */

/* Start: Leaf-Turner QR Pages Styles */

.turner img {border-width: 0; vertical-align: bottom; height: 11px; width: 11px; margin: 1px 1px 1px 0;}

div.leaf table {border: 1px solid GrayText; border-width: 0 0 2px 11px; margin-bottom: 0; border-collapse: collapse; width: 100%;}
div.leaf th {font-weight: normal; padding: 0 2px; background: inherit; color: inherit;}

#html-attr li {margin: 1px 0 0 0; padding: 1px 0 1px 12px;}
#html-attr li.turner {padding: 1px 0 1px 1px;}

.jsqr li {margin: 1px 0 0 0; padding: 1px 0 1px 12px; border-bottom: 1px dotted GrayText;}
.jsqr li.turner {padding: 1px 0 1px 1px;}
.jsqr ol.leaf li {border: 1px solid GrayText; border-width: 0 0 0px 11px; border-bottom: 1px dotted GrayText;}

/* End: Leaf-Turner QR Pages Styles */

/* Start: HTML QR and HTTP Cheatsheet Pages Styles */

.htmlqr table, .httpqr table {margin: 0 0 1em; padding: 0; width: 100%; empty-cells: show; border-collapse: collapse;}
.htmlqr td, .htmlqr th, .httpqr td,  .httpqr th {border: 1px dotted GrayText; font: menu; border-width: 0 1px 1px 0; padding: 0;}
.htmlqr th, .httpqr th {background: ActiveCaption; color: CaptionText; font-weight: bold; text-align: center; padding: 1px .2em;}
.htmlqr .elname {padding: 1px .2em;}

.htmlqr table#legend span {padding: 0 1px 0 3px; border: 1px solid GrayText;}

.elname {font-variant: small-caps; text-transform: lowercase; letter-spacing: .2em;}
.block .elname {text-transform: uppercase; font-variant: normal;  letter-spacing: normal;}
.inline .elname {text-transform: lowercase; font-variant: normal;  letter-spacing: normal;}
.depr .elname a, #html-attr .depr a {font-style: italic; color: GrayText; Background: Window;}
#legend .depr .elname {font-variant: normal;  letter-spacing: normal;}

*.caption {
color: blue;
margin: 0;
padding: 0.2em 0;
font: caption;
font-weight: bold;
text-align: left;
vertical-align: center;
}

*.caption a {
display: block;
}

*.end, *.dtd {text-align: center;}
*.opt {background: #DFDFDF; color: #666;}
*.no {background: #EFDFDF; color: maroon;}
*.loose {background: #E0DFEF; color: gray;}
*.frame {background: #E0DFEF; color: navy;}
*.dontuse {font-style: italic; color: Gray;}

/* End: Styles for the HTML Elements table */

/* Start: Style changes for wider pages */

@media screen and (min-width: 360px) {

body {font: 1em Cambria, Georgia, serif; margin: 1em;}
th, td {font: 1em Cambria, Georgia, serif !important;}
h1, p {padding: .5em; text-align: left;}
h1 {font-size: 1.4em; padding: .4em .5em;}
h2 {font-size: 1.2em; padding: .2em .5em 0;}
h3 {font-size: 1.1em; padding: .0em .5em 0;}
h1, h2, h3, h4, .topLinks {font-family: Candara, Tahoma, sans-serif;}
td {padding: 0.2em 0.4em;}

}

/* End: Style changes for wider pages */

/* Hack to get opera-only content to show in Opera */

@media screen and (min-width: 1px) {

.opera-only {display: block;}

}
/* End Hack */