/*********************************************************************
** File: screen.css                                                 **
** History:                                                         **
**                                                                  **
**  23-Nov-07  JIK  Initial creation                                **
**                                                                  **
** Function:                                                        **
**  style sheet for screen display                                  **
**                                                                  **
*********************************************************************/

BODY {
/* background: scroll transparent url("images/topBarBkgnd.gif") repeat-x left top; */
   color: #333333;
   font-family:  "Trebuchet MS", Verdana, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: normal;
   margin: 0;
   text-align: center;
   }

#frame {
/*   border-left: #330066 2px solid;*/
   margin: auto;
   position: relative; /* !!! this triggers lots of good behaviour */
   text-align: left;
   width: 720px;
   }


#topBar {
   background-color: #555588; 
   height: 185px;
   background:url(images/jhead.png) no-repeat top left;   
   }

#topBar .strap {
   color: #FFFFFF;
   float: left;
   font-size: 27px; /* large; fix so text-size ops don't overflow */
   font-style: italic;
   margin-left: 10px;
   margin-top: 20px;
   text-align: right;
   width: 700px;
   }


#topMenu {
   background-color: #CCCCCC;
   border-left: #C0C0C0 1px solid;
   font-size: 13px;
   font-weight: bold;
   white-space: nowrap;
   height: 26px;
   }

#topMenu A {
/* background-color: #CCCCCC; -- do in above, so fills in gap on RHS */
   border-right: #999999 1px solid;
   color: #555555;
   display: block;
   float: left;
   padding: 6px 15px 2px 15px;
   text-decoration: none;
   }

#topMenu A.thisPage {
   background-color: #FFFFFF; /* transparent, see above. same as hookText */
   color: #222222;
   }

#topMenu A:hover {
   background-color: #DDDDDD;
   color: #000000;
   }

#subMenu {
   background-color: #DDDDDD;
   border-left: #C0C0C0 1px solid;
   font-size: 13px;
   font-weight: bold;
   white-space: nowrap;
   height: 26px;
   }

#subMenu A {
/* background-color: #CCCCCC; -- do in above, so fills in gap on RHS */
   border-right: #999999 1px solid;
   color: #555555;
   display: block;
   float: left;
   padding: 6px 6px 1px 6px;
   text-decoration: none;
/* font-size: 12px;*/
   }

#subMenu A.thisPage {
   background-color: #FFFFFF; /* transparent, see above. same as hookText */
   color: #222222;
   }

#subMenu A:hover {
   background-color: #EEEEEE;
   color: #000000;
   }



H1, H2, H3 {
   color: #330066;
   }
H1 {
   font-size: medium;
   }
H2 {
   font-size: small;
   }
H3 {
   font-size: small;
   margin-bottom: 0;
   }

UL {
   margin-top: 5px;
   margin-bottom: 5px;
   }

.panel {
   width: 100%;
   border-left: #C0C0C0 1px solid;
   float: left;
   padding: 40px 10px 0px 10px;
   }

.text {
   margin: 20px 10px 20px 10px;
   }

.halfText {
/*       : top right bottom left */
   margin: 20px 10px 20px 10px;
   width: 340px;
   }

.threeQuarterText{
/*       : top right bottom left */
   margin: 20px 10px 20px 10px;
   width: 500px;
   }

img{
/*        border-top: 2px solid #444;
        border-right: 2px solid white;
	border-left:2px solid #444;
	border-bottom:2px solid white;
*/
      margin-right: 5px;
      margin-bottom: 5px;
   }

.img {
/*       : top right bottom left */
/* margin: 20px 20px 20px 10px;  */
   width: 350px;
   background:url(images/shadow.jpg) no-repeat top left;   
   }

.quarterImg {
/*       : top right bottom left */
/* margin: 20px 20px 20px 10px;  */
   width: 200px;
   }


.left {
   float: left;
      }

.right{
   float:right;
   }


.inactive{
   color: #333333;
   }

#footer {
   background-color: #555588; 
   color: #FFFFFF;
   font-size: 10px;
   margin-top: 30px;
   padding: 5px;
   text-align: right;
   }

#footer A {
   text-decoration: underline;
   color: #FFFFFF;
   }

#footer A:hover{
   background-color: #999999;
   }

ul {
   margin-top: 20px;
   margin-bottom: 20px;
/* background-color: #E0E0E0;*/
   }

.noBGC{
   background-color: #FFFFFF;
   }

.noPadding{
   padding-top: 0;
   }

.red{
    color: red;
   }

li {
   margin-bottom: 10px;
   }

A  {
   color: #0000CC;
   text-decoration: none;
   }
A:visited {
   color: #0000CC;
   }
A:hover {
   background-color: #CCCCCC;
   color: #660000;
   }

A IMG {
   border-style: none;
   }

ADDRESS {
   font-style: normal;
   padding-bottom: 5px;
   margin-top: 0;
   white-space: pre;
   }

#vPlayer{
   float: left;
   display: inline;
   width: 520px;
   height: 272px;
   margin: 2px;
   border-left: #555588 2px solid;
   border-top: #555588 2px solid;
   }

.player{
   margin-bottom: 15px;
   }

.playerSmall{
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   }

.songTitle{
   font-weight: bold;
   color: #555588;
   }


.videoMenu {
   background-color: #DDDDDD;
   border-left: #C0C0C0 1px solid;
   font-size: 13px;
   font-weight: bold;
   white-space: nowrap;
   }

.videoMenu A {
/* background-color: #CCCCCC; -- do in above, so fills in gap on RHS */
   border-right: #999999 1px solid;
   color: #333333;
   display: block;
   float: left;
   padding: 20px 20px 1px 6px;
   width: 200px;
   text-decoration: none;
/* font-size: 12px;*/
   }

.videoMenu A.thisPage {
   background-color: #FFFFFF; /* transparent, see above. same as hookText */
   color: #222222;
   }

.videoMenu A:hover {
   background-color: #EEEEEE;
   color: #000000;
   }


/* that's it */