/* #------------------------------------------------------------------------#
   |                                                                        |
   |   style.css                                                            |
   |                                                                        |
   |   Kingswood Consulting style sheet (display media).                    |
   |                                                                        |
   |   Copyright 2008, Frank A. Kingswood, www.kingswood-consulting.co.uk   |
   |                                                                        |
   #------------------------------------------------------------------------# */

@import url("print.css") print;
@import url("handheld.css") handheld;

/* colours:
 *  - logo red rgb(205,0,0)
 *  - logo green rgb(0,154,0)
 *  - logo blue rgb(0,0,154)
 *  - main text rgb(50,50,50)
 *  - pale text rgb(150,150,150)
 *  - blockquote rgb(215,205,0)
 *  - background rgb(241,241,241)
 */
body {
   font-family: trebuchet ms, verdana, arial, tahoma;
   font-size: 90%;
   color: rgb(50,50,50);
   background-color: rgb(241,241,241);
   margin: 0;
   padding: 0;
   text-align: center;
}

/* Set the page width */
#p, #b {
   margin: 0 auto;
   text-align: left;
   width: 90%;
}


/* ----- paper box ---------------------------------------------------------- */

/* <div id="p"><div id="q"><div id="r"> gives us the "paper" box */

#p {
   background: white url('images/sh-l.png') top left repeat-y;
   padding: 0;
   margin: 0 auto;
}

#p #q {
   background: transparent url('images/sh-r.png') top right repeat-y;
   margin: 0;
   padding: 0 13px; /* shadow is 13 pixels wide */
}

#p #q #r {
   background-image: none;
   margin: 0;
   padding: 0 0 1px 0;   /* not clear why we need a 1px bottom padding */
}


/* ----- logo --------------------------------------------------------------- */

/* In the "paper" box, <div id="l"><h1> gives us the logo and page title */
/* the search form, if present must go first */

#k {
   background: white url('images/kc-e-h100-t.png') no-repeat left;
   margin: 0 0 0 7px;
   padding: 7px 0 0 0;
}

#l {
   background: white url('images/kc-c-h100-t.png') no-repeat left;
   margin: 0 0 0 7px;
   padding: 7px 0 0 0;
}

#k form,#l form {
   float:right;
   margin: 10px 45px 0 0;
   width: 240px;
   padding: 0;
   text-align: right;
   border: none;
}

* html #k form,* html #l form { margin-right: 26px; /* IE fixup */ }

#k form fieldset,#l form fieldset {
   margin: 0;
   padding: 0;
   border: none;
}

#k form fieldset input,#l form fieldset input {
   background-color: white;
   color: black;
   border: 1px solid rgb(50,50,50);
   font-size: 60%;
   padding: 3px;
   width: 142px;
}

#k form fieldset input.search,#l form fieldset input.search {
   color: rgb(150,150,150);
}

#k form fieldset input.button,#l form fieldset input.button {
   padding: 2px;
   background-color: rgb(210,210,210);
   color: black;
   border: 1px solid rgb(50,50,50);
   font-size: 60%;
   width: 25px;
}

#k h1,#l h1 {
   margin: 0 20px;
   padding: 0;
   height: 115px;       /* 15 more than image height */
   visibility:hidden;   /* H1 is used for page title in no-css mode */
}


/* ----- menu --------------------------------------------------------------- */

/* In the "paper" box, <div id="m"> gives us the first level menu */

#p #m {
   padding: 0 0 0 35px;
   margin: 0;
   border-bottom: solid 3px rgb(50,50,50);
   font-size: 90%;
}

#p #m ul {
   list-style: none;
   margin: 0;
   padding: 5px;
}

#p #m ul li {
   display: inline;
   padding: 5px;
   margin: 0 1em 0 0;
   background-color: rgb(210,210,210);
   color: black;
   border: 1px solid rgb(50,50,50);
}

#p #m ul li.active {
   background-color: rgb(210,210,240);
   border: 1px solid rgb(0,0,154);
   border-bottom: rgb(50,50,50);
}

#p #m ul li a {
   text-decoration: none;
   color: rgb(50,50,50);
}

#p #m ul li.active a {
   color: rgb(0,0,154);
}

/* In the "paper" box, <div id="n"> gives us the second level menu */

#p #n {
   padding: 0 0 30px 40px;
   font-size: 90%;
}

#p #n div ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

#p #n div ul li {
   display: inline;
   margin: 0 1em 0 0;
   padding: 0;
}

#p #n div ul li a {
   text-decoration: none;
   color: rgb(50,50,50);
}

#p #n div ul li a:hover {
   text-decoration: underline;
}

#p #n div.invisible {
   display:none;
}

/* ----- contents ----------------------------------------------------------- */

/* In the "paper" box, <div id="c"><p or h2 or h3> gives us the contents */

#p #c {
   line-height: 160%;
   padding: 5px 240px 5px 40px;      /* 240=40+180+20 */
}

h1 {
   font-size: 140%;
   color: rgb(0,0,154);
}
h2 {
   font-size: 120%;
   color: rgb(0,0,154);
}
h3 {
   font-size: 110%;
   color: rgb(205,0,0);
   margin-bottom: -0.25em;
}

h3.odd {
   color: rgb(0,154,0);
}

h4 {
   font-size: 100%;
   color: rgb(0,154,0);
   margin-bottom: -0.5em;
}

#p #c h2:first-child {
   margin-top: -5px;
}

h2+h3,h3+h4 {
   margin-top: -10px;
}

p+h2,p+h3,p+h4,ul+h2,ul+h3,ul+h4 {
   padding-top: 10px;
   border-top: 1px solid rgb(210,210,210);
}

p {
   padding: 0;
   margin: 0.7em 0 0.5em 0;

}

#c input.button {
   padding: 2px;
   background-color: rgb(210,210,210);
   color: black;
   border: 1px solid rgb(50,50,50);
   font-size: 60%;
   width: 25px;
}

a {
   color: rgb(0,0,154);
   text-decoration: none;
}

a.none {
   color: rgb(50,50,50);
   text-decoration: none;
}

a:hover,a.none:hover {
   text-decoration: underline;
}

/* ----- universal float right and float left classes ----------------------- */

#c .right {
   float: right;
   margin: 0 0 5px 12px;
}

#c .left {
   float: left;
   margin: 0 12px 5px 0;
}


/* ----- images ------------------------------------------------------------- */

a img {
   border: none;
}

img.left,img.center,img.right {
   padding: 4px;
   border: 1px solid rgb(210,210,210);
}

img.center {
   display: block;
   margin: 0 auto 5px auto;
}


/* ----- blockquote and preformatted ---------------------------------------- */

.indent {
   margin: 0;
   padding: 0 40px;
}

blockquote,pre {
   border: 1px rgb(215,205,0) solid;
   background-color: rgb(255,255,250);
   margin: 10px 0 0.5em 0;
   padding: 5px;
}

blockquote {
   display: block;
   line-height: 1.2em;
   font-style: italic;
   padding: 15px 40px;
}

blockquote.right,blockquote.left {
   padding: 0.3em 1em;
}

blockquote p {
   padding: 0;
}

blockquote.left + p,blockquote.right + p {
   margin-top: 0px;
}

pre {
   overflow: auto;
   display: block;
   white-space: pre;
   line-height: 1.2em;
}

pre.right,pre.left {
   padding: 7px 15px 5px;
}


/* ----- lists -------------------------------------------------------------- */

#c ul,#c ol {
   margin:0 -3em -0.5em 0; 
   padding:0; 
   position:relative; 
   left:-3em;
   overflow:hidden;
   list-style-position: outside;
}
 
#c li { 
   margin: 0;
   padding: 0.2em;
   line-height: 130%;
}

#c li:before { 
   width: 1em;
   text-align: left;
}
 
#c ul li,#c ol li { 
   margin-left:5em; 
}

#c ul ul,#c ul ol,#c ol ol,#c ol ul {
   margin-bottom: -0.33em;
}
 
#c ul ul li,#c ul ol li,#c ol ol li,#c ol ul li {
   line-height: 115%;
   padding: 0.1em;
}
 

/* ----- sidebar ------------------------------------------------------------ */

/* In the "paper" box or contents, <div id="s"> gives us the sidebar */

#p #s {
   float: right;
   width:180px;
   margin-left: 5px;
   margin-right: 5px;
   padding-right: 40px;
   margin-top: 5px;
   margin-bottom: 5px;
   text-align: center;
   line-height: 140%;
   font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
}

#p #c #s {
   margin-right: -235px;
}

#p #s img {
   padding: 0;
   margin: 0;
   border: 0;
}

* html #s { margin-right: 15px; /* IE fixup */ }


/* ----- footer for copyright etc. ------------------------------------------ */

/* In the "paper" box, <div id="f"> gives us the footer */

#p #f {
   clear: both;
   margin-bottom: 5px;
   font-size: 80%;
   text-align: center;
   color: rgb(150,150,150);
}


/* ----- bottom of page ----------------------------------------------------- */

/* <div id="b"><div><div> gives us the bottom of the "paper" */

#b {
   background: transparent url('images/sh-b.png') top left repeat-x;
   padding: 0;
}

#b div {
   background: url('images/sh-bl.png') top left no-repeat;
   padding: 0;
   margin: 0;
}

#b div div {
   background: transparent url('images/sh-br.png') top right no-repeat;
   padding: 0;
   margin: 0;
}

#b div div p {
   margin: 0 14px;
   padding: 0;
   height: 30px;
}


/* ----- EOF style.css ----- */