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

html{
	font-size:medium;
}
body{
	background-color: #fff;
	font-family: "Verdana", sans-serif;
	font-size:0.84em;
}


BODY {
/* background: scroll transparent url("images/topBarBkgnd.gif") repeat-x left top; */
   color: #333333;
   font-family:  "Trebuchet MS", Verdana, Helvetica, sans-serif;
   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;
   }

#banner{
   display: block;
   clear: both;
   height: 100px;
   background-color: green;
   margin-left: 0px;
   margin-top: 3px;
   background-image: url(images/banner.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   }

#topBar {
/*   background-color: #555588; */
   border-left: #C0C0C0 1px solid;
   border-bottom: #C0C0C0 1px solid;
   height: 50px;
   }

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


#topMenu {
   background-color: #CCCCCC;
   border-left: #C0C0C0 1px solid;
   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 7px; 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-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: 1.5em;
   }

h2{
   font-size: 1.1em;
   }

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{
   padding: 0px;
   margin: 0px;
   }


.left {
   float: left;
   margin-right: 3px;
      }

.right{
   float:right;
   }


.inactive{
   color: #333333;
   }

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

#footer A {
   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;
    float: inline;
   }

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;
   }


.news{
   float: left;
   clear: both;
   }

/* that's it */