@import "fonts.css";
/* styles used in pages */
@import "../css/textstyles.css";
/* styles for the main navigation menu */
@import "navigation.css";


/* layout */
body {
   margin-left: auto;
   margin-right: auto;
   width: 847px;
   padding: 0px;
   background-color: #FFFFFF;
   margin-top: 0px; 
}

#header { 
   padding: 0px; 
}

#header h1 {
   /* hide the header text with a negative indent */
   /* http://phark.typepad.com/phark/2003/08/accessible_imag.html */
   text-indent: -9000px;
   height: 92px;
   margin: 0px;
}

#header #frmSearch {
   float: right;
   padding-right: 1em;
   margin-top: -50px;
   margin-bottom: 0px;
}

#content {
   margin: 0px;
   padding-left: 1em;
   padding-right: 1em; 
}

/* Two border divs on the left and right
  of the main column hold drop shadows */
#leftcontentborder {
   float: left;
   width: 15px;
   height: 740px;
   background-repeat: no-repeat;  
   background-color: #FFF;
   margin-left: -15px;
}

#rightcontentborder {
  width: 15px;
  height: 740px;
  background-repeat: no-repeat;
  float: right;
  margin-right: -15px;
}


/* layout within the definition content block */

#feedbackmessage { 
   width: 40%;
   position: absolute;
   left: 50%;
   margin-left: -20%;
   border: 5px solid black;
   text-align: center;
   background: #FFF;
   font-size: larger;
}

#signinfo {
   margin: 0px;
   height: 50px;
   margin-bottom: 0px;
}

#signinfo h2 {
   margin: 0px;
   padding-left: 6px;
   padding-bottom: 6px;
   font-weight: normal;
}
#signinfo .prev { 
   float: left; 
}

#signinfo .next {
   float: right; 
}

#signinfo .prev, #signinfo .next {
   font-size: smaller;
   font-variant: small-caps;
   padding-left: 6px;
   padding-right: 6px;
}

#signinfo .prev:hover, #signinfo .next:hover {  
   border: 1px outset #fff; 
}


#signnav { 
}

#signs { 
   margin-right: 0em;
   text-align: left;
   float: left; 
   width: 338px;  /* to match rh edge of video container */
}


#signnav #matches {
   height: 50px;
}

#definitionblock {
   border-top: 1px solid #000; 
   margin-top: 0px;
   background-color: #FFF;
}

#leftblock {
   float: left; 
   margin-left: 6px;
   width: 320px;
    
}

#videocontainer {
   width: 320px;
}
#videocontainer #player {
   margin: auto;
   width:320px;
   height:240px;
   border-left: 6px solid black;
   border-right: 6px solid black;
}

/* style for the answer in the fingerspelling practice page */
#answerpara {
   font-size: larger;
   font-weight: bold;
}
#answer {
   color: #FF0000;
}

/* replay for both video and fingerspelling images */
#replay {
   text-align: right;
}

#keywords {
   margin-left: 338px;
   padding-left: 6px; 
   margin-bottom: -0.5em;
}
#definition {
   margin-left: 338px;
   padding-left: 6px;
}
#staffinfo {
   margin-left: 338px;
   padding-left: 6px;
}

#numbersigns {
   border-top: 10px solid black;
}
#numbersigns #videocontainer  {
   float: left;
   margin-top: -2px;
}
 
#numbersigns #videocontainer #player {
   margin: auto;
   width:320px;
   height:240px;
   border-left: 6px solid black;
   border-right: 6px solid black;
}



#numbersigns #numsigntable { 
   float: left;
   margin-left: 20px;
}
#numbersigns p {
   float: left;
}

#states {
   text-align: center;
   margin-left: auto;
   margin-right: auto; 
}
#feedback { 
}
#staffinfo #staffops {
   width: 100%;
}


/* end of definition block content */

/* styles for the pages app */

#pages #videocontainer {
   background-color: #000;
   margin-left: auto;
   margin-right: auto;
   width: 310px;
}

#pages #videocontainer #player {
   width: 300px;
   height: 240px; 
}
#pages #videocontainer #player object {
   margin-top: -11px; /* not sure why this is needed */
}

#pages #videocontainer table {
   width: 100%;
   text-align: center;
   background-color: #000;
}

#pages #videocontainer a:link, #pages #videocontainer a:visited {
   color: white;
}

#pages #editbutton {
   float: right;
}

#pages h1, #pages h2, #pages h3 {
   font-family: Georgia, serif;
   font-weight: normal;
   font-variant: small-caps;
 
   margin-bottom: 0;
}

/* table of links in the mainpage template */

#pages #mainlinks table {
  
   margin: auto;
}

#pages #mainlinks td {
   text-align: center; 
   border: none;
}

#pages #mainlinks a { 
   color: #fff;
   text-decoration: none;
   font-size: large; 
   width:  6em;
   height: 6em;
   display: block;
}
#pages #mainlinks a:hover {
   color: #aaa; 
}

#pages #mainlinks a span { 
   display: block;
   padding-top: 2em;
}

#pages #mainlinks #signbanklink {
   
}

/* text styles used by pages via the wymeditor styles */

.floatright {
   float: right;
}

.floatleft {
   float: left;
}

.centre {
   margin-left: auto;
   margin-right: auto;
}

.emphasised {
   font-weight: bold;
}


/* definition lists in feedback view */


.comment dl
{
   width: 41.1em;
   margin: 2em 0;
   padding: 0; 
}

.comment dt
{
   font-weight: bold;
   float: left;
   width: 15em;
}

.comment dd
{
}



/* file attachment upload form etc */

#attachmentform {
   margin: auto;
   width: 30em;
}
#attachmentform table {
   margin: auto;
}

/* general markup for error messages in forms */

.errorlist {
   color: red;
   font-weight: bold;
}


#footer { 
   background-color: #e3e3e3;
   border-top: 1px solid #ccc;   
   margin: 0px;
   padding: 0px;
   height: 50px;
   clear: both;
}

#footer #copyright {
  font-size: smaller;
  text-align: right;
  padding-right: 1em;
  padding-top: 1em;
}

/* styles for finger spelling pages */

#fingerspellblock {
   border-top: 10px solid black;
}

#handcontainer {
   margin-top: -2px;
   width: 320px;
}

#handcontainer #handimage {
   margin: auto;
   width:320px;
   height:240px;
   border-left: 6px solid black;
   border-right: 6px solid black;
}


/* this will be the same size as our videos */ 
#handimage {
  position: relative;
  height: 240px;
  width:  300px;
  background-color: #4b62ae;
  border-left: 10px solid black;
  border-right: 10px solid black;
}


/* images are 192x144 centre them in the above div */
#mainimg {
  position: absolute;
  top: 49px; /* (240 - 144)/2  */
  left: 54px;  /* (300 - 192)/2 */
  display: block;
  margin: auto;
}

#fingerspellright {
   width: 470px; /* 847 - 320 - 20 - fiddle factor */
   float: left;
   padding-left: 20px;
}

#fstable td {
  margin-right: -1em;
}
#fstable img {
  width: 75px;
  height: 56px;
}
#fstable td div {
  margin-top: -1.4em; 
  font-size: large;
  color: #fff;
  text-align: center;
}
#info {
   clear: both;
}