/* style sheet metadata ****************************************** */
/*                                                                 */
/* project:      STYLEWORKS                                        */
/* website:      www.thestyleworks.de                              */
/* function:     main style sheet                                  */
/* author:       k. langenberg                                     */
/* date:         16-mar-2010                                       */
/* version:                                                        */
/*                                                                 */

/* style sheet contents ****************************************** */
/*                                                                 */
/* links in main body text                                   41    */
/* element selectors                                        101    */
/*   ***                 generic elements                   127    */
/*   ***                 forms                              191    */

/*   ***                 headlines                          383    */
/*   ***                 images                             464    */
/*   ***                 lists                              510    */
/*   ***                 paragraphs                         659    */
/*   ***                 tables                             772    */
/*                         ***      general rules           774    */
/*                         ***      reference               817    */
/*                         ***      reference features      849    */
/*                         ***      named colors list       877    */
/*                         ***      quick reference         893    */
/*                         ***      tables in main text     933    */
/* classes in general                                      1064    */
/* navigation links at bottom                              1190    */
/* quiz                                                    1219    */
/* site map and index pages                                1250    */
/* syntax of values explanation in reference               1461    */
/* books and software pages                                1448    */
/* temporary styles                                        1594    */
/* end                                                     1402    */




/* links in main body text**************************************** */

#main-text a {
    outline: none;
    }
#main-text :link:focus, #main-text :visited:focus {
    color: #005ab9;
    border-bottom: 1px solid #f88100;
    text-decoration: none;
    }
#main-text :link {
    color: #004A97;
    border-bottom: 1px solid #005ab9;
    text-decoration: none;
    }
#main-text :visited {
    color: #000;
    border-bottom: 1px solid #a2c2e4;
    text-decoration: none;
    }
#main-text :link:hover, #main-text :visited:hover {
    color: #000;
    background-color: #f0f5ff;
    border-bottom: 1px solid #f88100;
    text-decoration: none;
    }
#main-text :link:active, #main-text :visited:active {
    color: #f88100;
    background-color: #005ab9;
    text-decoration: none;
    }

a.exlink:link {                          /* links to external web sites */
    background: url(../graphics/link-exl.gif)
                no-repeat
                left center;
    padding-left: 13px;
    }
a.exlink:visited {
    background: url(../graphics/link-exv.gif)
                no-repeat
                left center;
    padding-left: 13px;
    }
a.exlink:hover, a.exlink:active {
    background: url(../graphics/link-exh.gif)
                no-repeat
                left center;
    padding-left: 13px;
    }

div#qlinks a {
    padding: 1px 5px;
    display: block;
    float: left;
    clear: both;
    }



/* element selectors ********************************************* */


abbr {
    cursor: help;
    }



code {
    font-family: Consolas,"Andale Mono","Courier New",monospace;
    font-size: 1em;
    font-style: italic;
    }
code.css {
    color: #660000;
    background-color: transparent;
    }
h1 code, h2 code, h3 code {
    font-size: 0.95em;
    color: #000066;
    }



/* element selectors *** generic elements ************************ */

span.toplink {
    font-size: 10px;
    }
span.styleworks {
    font-style: italic;
    }
#navigation a span {
    color: #000;
    background-color: #f5f1ed;
    }

p.floatedlist span {
    display: block;
    float: left;
    width: 200px;
    margin: 1px 0;
    }

h2 span.date {
    float: right;
    font-size: 0.8em;
    }

#quiz div {
    border-top: 1px solid #f4f2e6;
    margin-top: 0;
    }
#qref td div.props {
    font-size: 0.87em;
    }
#qref td div.pvalues {
    font-size: 0.87em;
    }
#qref div.fix-tr {
    padding: 0 13px 0 172px;
    position: fixed;
    top: 50%;
    right: 0;
    }

div.floatpicl {
    float: left;
    clear: both;
    margin: 0.5em;
    margin-left: 1em;
    }
div.floatpicr {
    float: right;
    clear: both;
    vertical-align: bottom;
    margin: 0.5em;
    margin-right: 1em;
    }

div#qlinks {
    letter-spacing: 1px;
    padding: 2px 5px;
    border: none;
    margin: 0 -5px;
    float: right;
    }



/* element selectors *** forms *********************************** */

.button1 {
    color: #000;
    font-size: 0.8em;
    font-weight: normal;
    background-color: #b5cef9;
    height:1.5em;
    vertical-align:middle;
    padding: 0 1em;
    border-width: 1px;
    border-style: solid;
    border-color: #f3f4f9 #667789 #667789 #f3f4f9;
    margin: 0;
    }
.button2 {
    color: #000;
    font-size: 1em;
    font-weight: bold;
    background-color: #feebd1;
    width: 15em;
    text-align: center;
    padding: 3px 0;
    border-width: 2px;
    border-style: solid;
    border-color: #ffffff #b86e00 #b86e00 #ffffff;
    margin: 1em 0.5em 0;
    }

/* element selectors *** forms *** contact form ****************** */

div.contactform {
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -1710px
                no-repeat
                #c2a994;
    text-align: left;
    padding: 0;
    border: none;
    margin: 0;
    }
div.contactform:hover {
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -3410px
                no-repeat
                #ecddd0;
    }

form.contact {
    padding: 0.5em;
    border: none;
    }

form.contact fieldset {
    color: #7b481f;
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -3410px
                no-repeat
                #ecddd0;
    margin-bottom: 0.5em;
    border: 2px ridge #8d6442;
    }
form.contact:hover fieldset {
    color: #ffffff;
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -10px
                no-repeat
                #886241;
    }

form.contact fieldset input {
    margin: 0.5em 0;
    float:left;
    }

form.contact fieldset label {
    margin: 0 1em;
    width: 18em;
    vertical-align: top;
    display: block;
    float: left;
    }
form.contact fieldset label em {
    font-size: 0.9em;
    }

form.contact fieldset ol{
    padding: 0;
    margin: 0;
    }
form.contact fieldset li {
    list-style: none;
    padding: 5px;
    margin: 0;
    clear: both;
    }

.form2 {
    font-size: 16px;
    color: #000000;
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -2560px
                no-repeat
                #dbc6b6;
    width: 23em;
    padding: 0;
    border:1px solid #8d6442;
    }
div.contactform:hover .form2 {
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -3410px
                no-repeat
                #ecddd0;
    }
div.contactform:hover .form2:focus {
    color: #325;
    background: #ffffff;
    border: 1px solid #8d6442;
    }


/* element selectors *** forms *** search form ******************* */


div.searchform {
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -1710px
                no-repeat
                #c2a994;
    text-align: left;
    padding: 0;
    border: none;
    margin: 0;
    }
div.searchform:hover {
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -2560px
                no-repeat
                #c2a994;
    }

div.searchform fieldset {
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -2560px
                no-repeat
                #ecddd0;
    margin: 1em 0.5em;
    }
div.searchform:hover fieldset {
    background: url(../graphics/sitemap-back-spb.jpg)
                fixed
                135px -3410px
                no-repeat
                #ecddd0;
    margin: 1em 0.5em;
    }


form.search {
    padding: 0.5em;
    border: none;
    }

div.searchform fieldset p {
    padding: 0.2em 0.5em;
    margin: 0;
    }
div.searchform fieldset p.legend {
    color: #441100;
    font: italic 1.2em Cambria,Georgia,"Times New Roman",serif;
    padding: 0.4em 0.2em 0.2em;
    }

div.searchform fieldset input.form3 {
    font-size: 1.1em;
    padding: 0.1em 0em;
    margin: 0.5em 0.6em;
    }





/* element selectors *** headlines ******************************* */

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-style: italic;
    font-size: 1.2em;
    font-family: Cambria,Georgia,"Times New Roman",serif;
    color: #441100;
    padding: 0.75em 0 0 0.75em;
    margin-top: 0.75em;
    margin-bottom: 0;
    }
h1 {
    font-size: 1.5em;
    font-weight: 200;
    background: #fefeff;
    padding: 3px 0 0 0.75em;
    border: 1px solid #c4c4c4;
    border-width: 1px 0;
    margin: 1em 0 1em;
    }
h1.prop {
    font: bold
          italic
          1.6em
          monospace;
    color: #662038;
    background-color: #fefeff;
    border: 1px solid #8e8e8e;
    border-width: 1px 0px;
    padding-left: 0.75em;
    }
h2 {
    font-size: 1.4em; /*21*/
    font-weight: 300;
    }
#quiz div h2 {
    color: #fff;
    font: italic
          3.5em/1em
          Cambria,"Georgia",serif;
    background-color: #f4f2e6;
    padding: 0 0.3em 0.3em;
    border: 1px solid #f2f0e4;
    margin: 0 0 0.2em 0.3em;
    float: right;
    }
#quiz div:hover h2 {
    color: #e4cacd;
    }
#textbox h2 {
    margin-top: 0.5em;
    }
h3 {
    font-size: 1.2em; /*18*/
    font-weight: 400;
    }
#main-text .tip h3 {
    padding: 0 0 0.3em;
    margin-top: 0;
    }
h4 {
    font-size: 1.05em; /*16*/
    font-weight: 600;
    }
h4 span {
    color: #a1877f;
    font-style: normal;
    }
h5 {
    font-size: 0.95em; /*14*/
    font-weight: 700;
    }
h6 {
    font-size: 0.8em;  /*12*/
    font-weight: 800;
    font-style: normal;
    }



/* element selectors *** images ********************************** */

img {
    border-width: 0px;
    }
table.tformat img {
    margin: 0;
    }
img.map {
    vertical-align: bottom;
    padding: 0;
    margin: 0 3px 0 3px;
    }
p img.flag {
    margin: 0 0.5em 0 0;
    }

p img {
    padding: 0;
    margin: 0.4em;
    }
.imgleft img {
    margin: 1em 1em 1em 0;
    float: left;
    }
.imgright img {
    margin: 1em 0 1em 1em;
    float: right;
    }

table.tformat th img {
    vertical-align: bottom;
    }

div.floatpicr img, div.floatpicl img {
    display: block;
    padding: 0;
    border: none;
    margin: 0.5em 0 0;
    }
div.floatpicr img.nobrowser, div.floatpicl img.nobrowser {
    border: 1px solid;
    border-color: #ccc #ccc #eee;
    }


/* element selectors *** lists *********************************** */

dl {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    }
dd {
    margin-bottom: 0.2em;
    }
dt {
    margin-top: 0.2em;
    }

.definitions dt {
    color: #441100;
    font-size: 1.07em;
    font-style: italic;
    font-weight: bold;
    }
.definitions dt span {
    color: #a1877f;
    font-size: 0.87em;
    font-style: normal;
    }
.definitions dd {
    margin-left: 1em;
    }

#browsersupport dt {
    background-repeat: no-repeat;
    background-position: 0 5px;
    font-weight: bold;
    line-height: 22px;
    }
#browsersupport dd {
    background-repeat: no-repeat;
    background-position: 40px 10px;
    margin-left: 0px;
    }

#browsersupport dt.all {
    background-image: url(../graphics/browser-all.gif);
    padding: 0.5em 0 0 250px;
    line-height: 25px;
    }
#browsersupport dt.gecko {
    background-image: url(../graphics/browser-gecko.gif);
    padding: 0.5em 0 0 85px;
    }
#browsersupport dt.iewin5 {
    background-image: url(../graphics/browser-iewin5.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.iewin6 {
    background-image: url(../graphics/browser-iewin6.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.iewin7 {
    background-image: url(../graphics/browser-iewin7.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.iemac5 {
    background-image: url(../graphics/browser-iemac5.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.opera7 {
    background-image: url(../graphics/browser-opera7.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.icab {
    background-image: url(../graphics/browser-icab.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.safari {
    background-image: url(../graphics/browser-safari.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.safari3 {
    background-image: url(../graphics/browser-safari3.gif);
    padding: 0.5em 0 0 40px;
    }
#browsersupport dt.konqueror {
    background-image: url(../graphics/browser-konqueror.gif);
    padding: 0.5em 0 0 40px;
    }

#browsersupport dd.light-stop {
    background-image: url(../graphics/light-stop.gif);
    min-height:30px;
    padding: 0.5em 0 0 70px;
    }
#browsersupport dd.light-stop-att {
    background-image: url(../graphics/light-stop-att.gif);
    min-height:30px;
    padding: 0.5em 0 0 70px;
    }
#browsersupport dd.light-att-free {
    background-image: url(../graphics/light-att-free.gif);
    min-height:30px;
    padding: 0.5em 0 0 70px;
    }
#browsersupport dd.light-attention {
    background-image: url(../graphics/light-attention.gif);
    min-height:30px;
    padding: 0.5em 0 0 70px;
    }
#browsersupport dd.light-free {
    background-image: url(../graphics/light-free.gif);
    min-height:30px;
    padding: 0.5em 0 0 70px;
    }


ol > li {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    }
ul > li {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    }

ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    }
ol.la {
    list-style-type: lower-latin;
    list-style-type: lower-alpha;
    }
ol.d  {
    list-style-type: decimal;
    }
ol.ur  {
    list-style-type: upper-roman;
    }
ol.ua {
    list-style-type: upper-latin;
    list-style-type: upper-alpha;
    }

ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    list-style-image: url(../graphics/css-bullet.gif);
    }



/* element selectors *** paragraphs ****************************** */

p {
    margin: 0.6em 0 0.5em 0;
    }
div.floatpicr p.caption, div.floatpicl p.caption {
    font: 12px Calibri,Verdana,sans-serif;
    color: #414141;
    text-align: center;
    background-color: #eee;
    padding: 4px 1em 4px;
    border: none;
    margin: 0 0 0.5em;
    }

p.caption {
    font: 12px Calibri,Verdana,sans-serif;
    color: #414141;
    text-align: justify;
    padding: 0;
    border: none;
    margin: 0.25em 7em 1.5em 6em;
    }
p.diagram {
    margin: 0.4em 0 0.25em 4em;
    }

.floatedlist p {
    float: left;
    width: 15em;
    margin: 0.3em 0;
    }
p.actuality {
    color: #666;
    font-size: 0.8em;
    }
p.proverb, p.proverb-a {
    color: #442a3e;
    font: italic 1em/1.3 Cambria,Georgia,"Times New Roman",serif;
    padding: 1em 2% 0 10%;
    }
p.proverb-a {
    font-style: italic;
    padding: 0 2% 1em 11%;
    font-variant: small-caps;
    }
p.quote {
    padding: 0 2.5em;
    text-align:justify;
    }

p.top {
    font: normal
          0.8em
          Calibri,"Trebuchet MS",Verdana,sans-serif;
    letter-spacing:1px;
    padding: 0 0 0 1px;
    border-bottom: 3px solid #696969;
    display: none;
    }

table.tformat th p {
    font-weight: normal;
    }

#main-text .example {
    background: url(../graphics/sym-example.gif)
                no-repeat
                bottom left;
    margin-left: -60px;
    padding-left: 60px;
    }

#main-text .tip {
    font-family: Cambria,Georgia,"Times New Roman",serif;
    background: url(../graphics/sym-tip2.jpg)
                no-repeat
                top left
                #fff;
    padding: 1em 0.5em 1em 1em;
    border: 1px solid #ffd6ad;
    margin: 1em;
    float: right;
    width: 250px;
    }

#main-text p.textnote, #main-text p.note {
    background: url(../graphics/sym-note.gif)
                no-repeat
                top left;
    margin-left: -60px;
    padding: 2px 0 2px 75px ;
    }

#main-text p.ala-top {
    font-style: italic;
    background: url(../graphics/sym-note.gif)
                no-repeat
                center left;
    margin-left: -60px;
    padding: 2px 0 2px 60px
    }
#main-text p.ala-bottom {
    display: none;
    }



/* element selectors *** tables ************************************/

/* element selectors *** tables *** general rules ******************/

table {
    margin: 0.5em 1px;
    font-family: sans-serif;
    }

td {
    vertical-align: top;
    padding: 0 0.5em;
    border: none;
    margin: 0;
    }
td.ok {
    background: url(../graphics/ok-tick.gif)
                no-repeat
                center;
    text-align: center;
    }
td.notok {
    background: url(../graphics/not-ok-cross.gif)
                no-repeat
                center;
    text-align: center;
    }

tr.indicator th {
    text-align: left;
    }
th {
    vertical-align: top;
    padding: 0px;
    border: none;
    margin: 0px;
    }

tr.indicator {
    background-color: transparent;
    }
tr.indicator:hover {
    background-color: #fffae9;
    }

/* element selectors *** tables *** reference *********************/

#ref table {
    margin: 0.4em 0px;
    border-spacing: 2px;
    width: 100%;
    }

#ref td {
    font: normal
          1em
          Georgia,Chicago,Charcoal,"Times New Roman",serif;
    background-color: transparent;
    padding: 0.1em 0.5em;
    border: 1px solid #f0f1ec;
    }
#ref td.src {
    font-size: 0.8em;
    background-color: transparent;
    padding: 0.1em 0.5em;
    border: 1px solid #f0f1ec;
    }

#ref th {
    font: bold
          1em
          Georgia,Chicago,Charcoal,"Times New Roman",serif;
    background-color: transparent;
    padding: 0.1em 0.5em;
    border: 1px solid #f0f1ec;
    }

/* element selectors *** tables *** reference features *********** */

#features table {
    margin: 0.4em 0px;
    border-spacing: 2px;
    width: 100%;
    }

#features td {
    font: normal
          0.93em
          "Trebuchet MS",Verdana,sans-serif;
    background-color: transparent;
    padding: 0 0.3em;
    border: 1px solid #f0f1ec;
    width: 25%;
    }

#features th.strong {
    background-color: #f4f2e6;
    }
#features th {
    text-align: left;
    background-color: transparent;
    border: 1px solid #f0f1ec;
    padding: 0 0.3em;
    }

/* element selectors *** tables *** named colors list ************ */

#namedcolors table {
    width: 80%;
    }

#namedcolors td {
    font-family: monospace;
    padding: 0 0.3em;
    width: 20%;
    }

#namedcolors th {
    padding: 0 0.3em;
    }

/* element selectors *** tables *** quick reference ************** */

#qref table {
    width: 100%;
    }
#qref div.fix-tr table {
    border: 1px solid #f0f1ec;
    }

#qref td {
    font: normal
          1em
          Cambria,Georgia,"Times New Roman",serif;
    padding: 3px;
    border-bottom: 1px solid #f0f1ec;
    }
#qref td:first-child {
    border-left: 1px solid #f0f1ec;
    }
#qref td {
    border-right: 1px solid #f0f1ec;
    }

#qref th {
    text-align: left;
    padding: 2px 5px;
    border: 1px solid #f0f1ec;
    border-left: none;
    }
#qref tfoot th {
    border-top: none;
    }
#qref th:first-child {
    border-left: 1px solid #f0f1ec;
    }
#qref div.fix-tr th {
    background-color: #fefefb;
    border: none
    }

/* element selectors *** tables *** tables in main text********* */

table.tformat {
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    }

table.tformat td.a {
    padding: 0.2em 25px 0.2em 0.5em;
    border: 1px solid #c99;
    border-width: 0 0 1px 0;
    }
table.tformat tr:hover td.a {
    background-color: #fcf6e4;
    }
table.tformat td.b {
    padding: 0.2em 25px 0.2em 0.5em;
    border: 1px solid #aab;
    border-width: 0 0 1px 0;
    }
table.tformat tr:hover td.b {
    background-color: #f0f3f9;
    }
table.tformat td.q {
    padding: 0.2em 25px 0.2em 0.5em;
    border: 1px solid #ca3;
    border-width: 0 0 1px 0;
    }
table.tformat tr:hover td.q {
    background-color: #fcf6e4;
    }
table.tformat td.m {
    padding: 0.2em 25px 0.2em 0.5em;
    border: 1px solid #cd0;
    border-width: 0 0 1px 0;
    }
table.tformat tr:hover td.m {
    background-color: #ef0;
    }
table.tformat td.d {
    background: url(../graphics/deprecated.gif)
                4% 5px
                no-repeat;
    padding: 0.2em 0.5em 0.2em 25px;
    border: 1px solid #c99;
    border-width: 0 0 1px 0;
    }
table.tformat tr:hover td.d {
    background: #fcf6e4
                url(../graphics/deprecated.gif)
                4% 5px
                no-repeat;
    }
table.tformat td.n {
    padding: 0.2em 0.5em;
    border: 1px solid #9c9;
    border-width: 0 0 1px 0;
    width: 50%;
    }
table.tformat tr:hover td.n {
    background-color: #f6fce4;
    }
table.tformat td.r {
    padding: 0.2em 25px 0.2em 0.5em;
    border: 1px solid #c83;
    border-width: 0 0 1px 0;
    }
table.tformat tr:hover td.r {
    background-color: #fdf0e4;
    }
table.tformat td.t {
    padding: 0.2em 25px 0.2em 0.5em;
    border: 1px solid #ab4;
    border-width: 0 0 1px 0;
    }
table.tformat tr:hover td.t {
    background-color: #f4f5e2;
    }


table.tformat th {
    text-align: left;
    }
table.tformat th.a {
    background-color: #fcf6e4;
    padding: 0.2em 25px 0.2em 0.5em;
    border: solid #c99;
    border-width: 1px 0 3px;
    }
table.tformat th.b {
    background-color: #f0f3f9;
    padding: 0.2em 25px 0.2em 0.5em;
    border: solid #aab;
    border-width: 1px 0 3px;
    }
table.tformat th.h {
    background: transparent;
    padding: 0.2em 0.5em;
    border: 0;
    }
table.tformat th.n {
    background-color: #f6fce4;
    border: solid #9c9;
    border-width: 1px 0 3px;
    padding: 0.2em 0.5em;
    }
table.tformat th.q {
    background-color: #fcf6e4;
    padding: 0.2em 25px 0.2em 0.5em;
    border: solid #ca3;
    border-width: 1px 0 3px;
    }
table.tformat th.r {
    background-color: #fdf0e4;
    padding: 0.2em 25px 0.2em 0.5em;
    border: solid #c83;
    border-width: 1px 0 3px;
    }
table.tformat th.t {
    background-color: #f4f5e2;
    padding: 0.2em 25px 0.2em 0.5em;
    border: 3px solid #ab4;
    border-width: 1px 0 3px;
    }



/* classes in general **********************************************/

.author-kl {                     /* author shortcut at end of article */
    float: right;
    margin-top: -1em;
    background: url(../graphics/kl.gif)
                no-repeat
                center;
    width:34px;
    height:19px;
    }
.author2 {
    font-size: 0.9em;
    margin-top: -1em;
    text-align: right;
    display: block;
    }

.bsp, .bspgood, .bspbad,         /* code examples within body text */
      .bsphtml, .bspscript {
    font: bold
          0.87em/150%
          Consolas,"Andale Mono","Courier New",monospace;
    white-space: pre;
    padding: 0.5em 0.5em;
    border: none;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    }

.bsp {                                 /* general css code example */
    color: #662038;
    background: #fcfae4
                url(../graphics/bsp-back.jpg)
                repeat-y;
    }
.bsp em, .bspscript em {
    color: #c00;
    }
.bspgood {                                /* good css code example */
    color: #006600;
    background: #dcfedc
                url(../graphics/bspgood-back.jpg)
                repeat-y;
    }
.bspbad {                                  /* bad css code example */
    color: #660000;
    background: #feecec
                url(../graphics/bspbad-back.jpg)
                repeat-y;
    }
.bsphtml {                                    /* html code example */
    color: #000;
    background: #f6f4ee
                url(../graphics/bsphtml-back.jpg)
                repeat-y;
    }
.bsphtml em {
    color: #d42;
    }

.bspscript {                            /* any script code example */
    color: #331019;
    background: #f0e4f2
                url(../graphics/bspscript-back.jpg)
                repeat-y;
    }
.bspresult {                          /* bidirectionality examples */
    padding: 0 0.3em;
    border: 1px dashed #6ae;
    margin-left: 0.3em;
    }

.equation {                               /* mathematical equation */
    font-variant: small-caps;
    padding: 3px 6px;
    border: 1px dotted #dedcd1;
    }

.hilite {                                     /* text marker color */
    background-color: #ef6;
    }

#features .initial {
    color: #fff;
    background-color: #888;
    padding: 0 1px 1px;
    }

.line {               /* invisible horizontal line without padding */
    clear: both;
    }

.note {                        /* note at end of page or paragraph */
    font-size: 0.86em;
    font-weight: normal;
    }
th.note {
    font: normal 0.92em Cambria,Georgia,"Times New Roman",serif;
    }
.note:first-line {
    font-size: 1.09em;
    font-weight: bold;
    }

div.spacer {                          /* invisible horizontal line */
    clear: both;
    padding: 0;
    margin: 0;
    }
.spacer {                             /* invisible horizontal line */
    clear: both;
    }

.sup {                                              /* superscript */
    font-size: 0.75em;
    vertical-align: top;
    }
.subs {                                               /* subscript */
    font-size: 0.75em;
    vertical-align: bottom;
    }
/*
.vgw-pix {
    display: none;
    }
*/


/* navigation links at bottom ************************************ */

#contentbottom .bot:link {
    color: #fdfcee;
    background-color: transparent;
    text-decoration: none;
    cursor: default;
    }
#contentbottom .bot:visited {
    color: #fdfcee;
    background-color: transparent;
    text-decoration: none;
    cursor: default;
    }
#contentbottom .bot:hover {
    color: #999999;
    background-color: transparent;
    text-decoration: none;
    cursor: default;
    }
#contentbottom .bot:active {
    color: #fdfcee;
    background-color: transparent;
    text-decoration: none;
    cursor: default;
    }



/* quiz ********************************************************** */

#quiz input {
    padding: 0 3px;
    margin: 0 1em;
    text-align: right;
    vertical-align: bottom;
    }
#quiz #a input {
    background: #fdfcee
                url(../graphics/ta-back.gif)
                repeat
                center
                fixed;
    }
#quiz textarea {
    font: italic 1em Consolas,"Andale Mono","Courier New",monospace;
    color: #242812;
    background: #fdfcee
                url(../graphics/ta-back.gif)
                repeat
                center
                fixed;
    padding: 0 3px;
    border: 1px solid #f4f2e6;
    margin: 0 0 3em 1em;
    width: 575px;
    }



/* site map and index pages ************************************** */
/* Gecko engine and Opera 8+ are doing well here,
    Opera 7 lags a bit behind,
    and let's not talk about IE 6. */

/* To have two tocs on one page this needs to be there twice. **** */

div#toc {
    line-height: 25px;
    }
div#toc2 {
    line-height: 25px;
    }
div#toc ul {
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -1700px
                no-repeat
                #ecede8;
    padding: 0.2em 0.2em 0.4em 1em;
    margin: 0 0 -1px;
    list-style-type: none;
    list-style-image: none;
    }
div#toc2 ul {
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -1700px
                no-repeat
                #ecede8;
    padding: 0.2em 0.2em 0.4em 1em;
    margin: 0 0 -1px;
    list-style-type: none;
    list-style-image: none;
    }
div#toc li {
    padding: 0;
    border: 1px solid transparent;
    border-width: 0 0 0 3px;
    margin: 0;
    }
div#toc2 li {
    padding: 0;
    border: 1px solid transparent;
    border-width: 0 0 0 3px;
    margin: 0;
    }

div#toc ul:hover {
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px 0px
                no-repeat
                #b4bbae;
    }
div#toc2 ul:hover {
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px 0px
                no-repeat
                #b4bbae;
    }
div#toc ul:hover li ul {
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -850px
                no-repeat
                #ecede8;
    }
div#toc2 ul:hover li ul {
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -850px
                no-repeat
                #ecede8;
    }
div#toc li ul li {
    padding: 0;
    border: 3px solid transparent;
    border-width: 0 0 0 3px;
    }
div#toc2 li ul li {
    padding: 0;
    border: 3px solid transparent;
    border-width: 0 0 0 3px;
    }
div#toc li ul li:hover {
    padding: 0;
    border: 3px solid  #6f8b9a;
    border-width: 0 0 0 3px;
    }
div#toc2 li ul li:hover {
    padding: 0;
    border: 3px solid  #6f8b9a;
    border-width: 0 0 0 3px;
    }
div#toc li ul li.indent {
    margin: 0 0 0 1em;
    }
div#toc2 li ul li.indent {
    margin: 0 0 0 1em;
    }

div#toc a {
    color: #000;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -2550px
                no-repeat
                #f6f7f4;
    border: 3px solid transparent;
    border-width: 1px 1px 1px 3px;
    }
div#toc2 a {
    color: #000;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -2550px
                no-repeat
                #f6f7f4;
    border: 3px solid transparent;
    border-width: 1px 1px 1px 3px;
    }
div#toc a:link {
    color: #000;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -2550px
                no-repeat
                #f6f7f4;
    border: 3px solid transparent;
    border-width: 1px 1px 1px 3px;
    padding: 0.1em 0.5em;
    }
div#toc2 a:link {
    color: #000;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -2550px
                no-repeat
                #f6f7f4;
    border: 3px solid transparent;
    border-width: 1px 1px 1px 3px;
    padding: 0.1em 0.5em;
    }
div#toc a:visited {
    color: #000;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -1700px
                no-repeat
                #ecede8;
    border: 3px solid transparent;
    border-width: 1px 1px 1px 3px;
    padding: 0.1em 0.5em;
    }
div#toc2 a:visited {
    color: #000;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -1700px
                no-repeat
                #ecede8;
    border: 3px solid transparent;
    border-width: 1px 1px 1px 3px;
    padding: 0.1em 0.5em;
    }
div#toc a:link:hover, div#toc a:visited:hover,
div#toc a:link:active, div#toc a:visited:active {
    color: #fff;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -3400px
                no-repeat
                #6f8b9a;
    border: 3px solid #b7c4cb;
    border-width: 1px 1px 1px 3px;
    border-left: 3px solid  #fffefc;
    padding: 0.1em 0.5em;
    }
div#toc2 a:link:hover, div#toc2 a:visited:hover,
div#toc2 a:link:active, div#toc2 a:visited:active {
    color: #fff;
    display: block;
    background: url(../graphics/sitemap-back-ta-2.jpg)
                fixed
                230px -3400px
                no-repeat
                #6f8b9a;
    border: 3px solid #b7c4cb;
    border-width: 1px 1px 1px 3px;
    border-left: 3px solid  #fffefc;
    padding: 0.1em 0.5em;
    }

div#toc a em {
    font-size: 0.9em;
    }
div#toc2 a em {
    font-size: 0.9em;
    }



/* syntax of values explanation in reference ********************* */

.bspspec {
    font: italic
          0.91em/21px
          sans-serif;
    color: #00465e;
    background: #f2f8f9
                url(../graphics/bspspec-back.jpg)
                repeat-y;
    padding: 0.5em;
    border: none;
    margin: 0.5em 0 0.5em 0.5em;
    white-space: pre;
    }
.bspspec:first-line {
    font-style: normal;
    font-weight: bold;
    }
.bspspec .topic {
    font-weight: bold;
    color: #920;
    }
.bspspec>span {                 /* hiding border from bad browsers */
    border: 1px solid transparent;
    }
span>span {                     /* hiding border from bad browsers */
    border: 1px solid transparent;
    }
.bspspec span.showme:hover {
    background-color: #dceffa;
    cursor: crosshair;
    }
.bspspec>span.showme:hover {    /* hiding border from bad browsers */
    border: 1px solid #0099ff;
    }
span>span.showme:hover {        /* hiding border from bad browsers */
    border: 1px solid #0099ff;
    }
.bspspec span.showme span.showme:hover {
    background-color: #b0defb;
    }
.bspspec span.showme span.showme span.showme:hover {
    background-color: #6ec4fc;
    }
.bspspec span.showme span.showme span.showme span.showme:hover {
    background-color: #2caafe;
    }



/* books and software pages ************************************** */

div.bk-book {                            /* contains a single book */
    padding: 0;
    border: 1px solid #dedcd1;
    margin: 0 0 0.5em;
    }
#main-text a.bk-pic {                     /* Picture link top left */
    display: block;
    background-image: url(../graphics/bk-book1.gif);
    background-position: bottom right;
    border: none;
    margin: -1px 1em 0.5em -1px;
    float: left;
    }
#main-text a.bk-pic:link, #main-text a.bk-pic:visited,
#main-text a.bk-pic:hover, #main-text a.bk-pic:active {
    border: none;
    }
a.bk-pic img {
    background-color: #e9ebf8;
    padding: 0.5em;
    border: 1px solid #dedcd1;
    margin: 0 0.5em 0.5em 0;
    vertical-align: bottom;
    }
a.bk-pic img:hover {
    background-color: #d3d7f1;
    }

div.bk-lang img {
    margin: 0 0 0 0.5em;
    }
p.bk-author {                               /* book author in text */
    font-size: 0.9em;
    }
p.bk-title {                                 /* book title in text */
    font-size: 1.2em;
    }

table.bk-details {                                /* details table */
    font-style: italic;
    border: 1px solid #dedcd1;
    margin: 0 0 0.5em 0.5em;
    }
table.bk-details td {
    vertical-align: baseline;
    }
div.bk-details2 {                             /* details container */
    border: none;
    background-image: url(../graphics/bk-book1.gif);
    background-position: bottom left;
    margin: -1px -1px 0.5em 0.5em;
    float: right;
    }

p.bk-shortdesc {                              /* short description */
    padding: 0 0.5em 0 1em;
    }

div.bk-details2 span{                        /* screen shot pop up */
    color: #005ab9;
    }

div.bk-details2 span img {
    display: none;
    }

div.bk-details2 span:hover img {
    display: block;
    position: fixed;
    top: 10px;
    left: 10px;
    background: #fff;
    padding: 2px;
    border: 1px solid #999;
    }

/* temporary styles ********************************************** */

div#announce {
    display: block;
    color: #633;
    background-color: #fff9ee;
    border-bottom: 1px dotted;
    }