/********************************************************************** 
* bd_standard_header.css
* Berks Express - CSS for the standard header and footer 
*/

/* generic ones */
.center { text-align: center}
.bold   { font-weight: bold }
.underline { text-decoration: underline }

.red    { color : red }
.blue   { color : blue }
.green  { color : green }
.brown  { color : #993300 }
.white  { color : white }
.boldRed   { color : red;     font-weight: bold }
.boldBlue  { color : blue;    font-weight: bold }
.boldGreen { color : green;   font-weight: bold }
.boldBrown { color : #993300; font-weight: bold }
.boldBlack { color : black;   font-weight: bold }

  /* deprecated, but still on some berks express pages */
  .colorRed   { color : red; }
  .colorBlue  { color : blue; }
  .colorGreen { color : green; }
  .colorBrown { color : #993300; }
  .colorBlack { color : black; }
  .colorBoldRed   { color : red;     font-weight: bold; }
  .colorBoldBlue  { color : blue;    font-weight: bold; }
  .colorBoldGreen { color : green;   font-weight: bold; }
  .colorBoldBrown { color : #993300; font-weight: bold; }
  .colorBoldBlack { color : black;   font-weight: bold; }

* {
  margin : 0;
  padding: 0;
  }

  html, body { width   : 100%; }

body { 
  margin  : 0;
  padding : 0;
  width   : 100%;
  color   : black;
  background-color : white;
  text-align : center;
  font-family: Arial,Verdana,Helvetica,sans-serif;
  }
div { 
  margin  : 0;
  padding : 0;
  width   : 100%;
  text-align : center;
  }
p  { 
  margin  : 0;
  padding : 0;
  text-align : left;
  } 
form { 
  margin  : 1ex 0 0 0;
  padding : 0;
  }
hr  { 
  height  : 1px;
  border-width : 0;
  color   : gray;
  background-color : gray;
  margin  : 2px 0 0 0; 
  }

  
  td.band1, td.band2 
    { width : 4px; 
      background-color : #999933; 
    } 

  td#band2hfll   { width  : 3%; }
  img#band1h-img { height : 6px; }
  img#band2h-img { height : 3px; }

  img#band1h-img, img#band2h-img
    { width  : 100%; 
      border : 0; 
    }

.top {
  height     : 1px;
  line-height: 1px;
  }
  
#logo  { 
  width  : 100%;
  margin : 0;
  border : 0;
  border-spacing   : 0;
  background-color : #ffffaa;
  }
#logo td { 
  padding : 1px; 
  }
#logo-text {
  text-align : left; 
  margin-left: 1.5%;
}
#logo-coname {
  display    : inline-block;
  width      : auto;
  margin-right: 20%;
  }    
#logo-coname h1,
#logo-coname div{ 
  vertical-align : top; 
  text-align : left; 
  width      : 50%;
  padding : 4px; 
  background-color : #ffffaa; 
  font-size  : 40px;
  color      : #ff9900;
  font-family: "Times New Roman", Times, serif;
  font-style : italic;
  font-weight: 700;
  position   : relative;
  }

/* ONLY use this id for the animation - all the other attributes are in the anonymous
* td#logo-coname div above - this allows us to switch off the animation (when moving around 
* the site, only having it on the first entry) by deleting the id in bd_header_standard_insert.php. */
#logo-coname-animate {
    animation  : move-logo ease-out 1s;        /* IE9, FF, Opera */
    -webkit-animation: move-logo 2s;           /* chrome and safari */
  }

#covering, #covering h2 { 
  color      : #660066; 
  font-weight: 700;
  text-align : left;
  xvertical-align : bottom;
  }
#covering { 
  display    : inline-block;
  width      : auto;
  text-align : right;
  float      : right;
  line-height: 5em;
  margin-right: 5%;
  }
#covering h2 { 
  font-size  : medium;
}  
  
  #wayToFind  
  { text-align : left;
    position   : relative;
    white-space: nowrap;
    animation  : move-slogan ease-out 2s;
    -webkit-animation: move-slogan ease-out 2s;  /* chrome and safari */
  }
  /*merge these*/
  #wayToFind 
  { font-weight   : 400;
    margin-bottom :3px; 
    padding    : 0 0 6px 1em;
    color      : #007d00; 
    background-color : #ffffaa; 
    font-size  : 22px;
    font-weight: 700;
    font-family: "Times New Roman", Times, serif;
    font-style : italic;
  }

  /* animate the logo and slogan 
  * we do this on entering from outside sites eg search engines, but 
  * not on each page round the site 
  */
  @keyframes move-logo 
  {
    0%   {left: 50ex; top: -3em;}
    100% {left: 0ex;  top: 0em;}
  }
  @-webkit-keyframes move-logo  /* chrome and safari */
  {
    0%   {left: 50ex; top: -3em;}
    100% {left: 0ex;  top: 0em;}
  }

  @keyframes move-slogan  /* IE9, FF, Opera */
  {
    0%   { transform:rotateX(180deg);} 
    100% { transform:rotateX(  0deg);} 
    /*0%   {left: 50ex; top: -3em;}
      100% {left: 0ex;  top: 0em;}*/
  }
  @-webkit-keyframes move-slogan  /* chrome and safari */
  {
    0%   {-webkit-transform:rotateX(180deg);} 
    100% {-webkit-transform:rotateX(0deg);} 
  }

  /* main menu */
  .menu
    { width      : 100%;
    margin     : 1em 0 0;
    padding    : 4px 0; 
    background-color : #ffffcc;
  text-align : center;
  }
  .menu {
  }
  .menu li {
    display    : inline-block;
    margin     : 0 0.75em 0 0;
    padding    : 0.1em 0.2em;
  }
  .menu a 
    { display    : inline;
    xmargin-right     : 0 4em; 
    padding    : 0 1ex;
    xtext-align : center;
    color      : #007d00;
    font-style : normal; 
    font-weight: 700; 
    text-decoration: none;
    white-space: nowrap;
  }
  .menu a:hover  { background-color: #d0d0a0; text-decoration: underline; }
  .menu a:active { background-color: #d0d0a0; text-decoration: underline; }