#header {
        padding:0;
        background:#044c7c;
        height:110px;
        clear:both;
        position:relative;
        margin: 0px;
}


body, html {
    margin:0;
    padding:0;
    color:#393736;
    background:#ffffff;
}

#header {
    position: relative;
}

#header h1 {
        height: 110px;
        width: 297px;
        background-image: url(../uclimages/signbank.png);
        background-position: 20px 20px;
        background-repeat: no-repeat;   
        text-indent: -9000px;
        margin: 0px;
        
}

#navbar #extrafeedback {
  display: block;
}

#footer #copyright #notice {
  float: left;
  text-align: left;
  position: absolute;
  margin-right: 20em;
  padding: 0 1em 1em 0;
  background-color: #f5f5f5;
}

#logoholder {
    background-image: url(../uclimages/logo.gif);
    width: 265px;
    height: 110px;
    position: absolute;
    right: 0px;
    top: 0px;
}

#bslstripe {
    height: 29px;
    width: 100%;
    background-color: #ee7c23;
}


.navbar-default {
    border: 0;
}

#navbar, #navbar .dropdown-menu {
        margin: 0px;
}

#signinfo .navbar-text {
        color: inherit;
}

#mainSearch {
  padding-bottom: 0.5em;
}

#mainSearch input.form-control {
  width: 30em;
  display: inline-block;
}

.navbar-collapse {
  max-height: 640px;
}

.form-control-short {
  display: inline;
  width: 14em;
}

.form-control-inline {
  display: inline;
}

.alphablock {
  margin-bottom: 1.5em;
}

#fingerspellblock #leftblock {
  width: 400px;
  margin-left: 0;
}

.navbar-right {
  margin-left: 1em;
}

#publicsign #signinfo {
     max-width: 700px;
     margin: auto;
}

#publicsign #leftblock {
   float: none;
   margin: auto;
   width: 664px;
    
}

#publicsign #keywords {
    font-size: 200%;
}

#publicsign #definitionblock {
   border-top: none;
   margin-top: 0px;
   background-color: #FFFFFF;
}

#publicsign #definition {
   margin: auto;
   width: 640px;
   padding-left: 0px;
}

#publicsign #videoiframe {
    width: 640px; 
    height: 360px;
}

#publicsign #videocontainer {
   width: 664px;
}

#navbar {
  margin-bottom: 0.25em;
}

#navbar #search-bar {
  background-color: #e7e7e7;
}

#navbar #search-bar li {
  background-color: #f8f8f8;
}

#navbar #search-bar ul.navbar-right {
  margin-left: 0;
  border-left: 1em solid #f8f8f8;
}

#navbar #search-bar form {
  margin-right: 0.1em;
}

#dropdown_menu_handshape {
  display: inline-block;
  background-image: url(/static/images/handshapes.png);
  background-repeat: no-repeat;
  background-position: -420px -170px;
  height: 34px;
  width: 70px;

  text-indent: -999px;
  font-size: 0;
  overflow: hidden;
}

#dropdown_menu_handshape.x1x1 { background-position: -0px -0px; }
#dropdown_menu_handshape.x2x1 { background-position: -70px -0px; }
#dropdown_menu_handshape.x3x1 { background-position: -140px -0px; }
#dropdown_menu_handshape.x4x1 { background-position: -210px -0px; }
#dropdown_menu_handshape.x5x1 { background-position: -280px -0px; }
#dropdown_menu_handshape.x6x1 { background-position: -350px -0px; }
#dropdown_menu_handshape.x7x1 { background-position: -420px -0px; }

#dropdown_menu_handshape.x1x2 { background-position: -0px -34px; }
#dropdown_menu_handshape.x2x2 { background-position: -70px -34px; }
#dropdown_menu_handshape.x3x2 { background-position: -140px -34px; }
#dropdown_menu_handshape.x4x2 { background-position: -210px -34px; }
#dropdown_menu_handshape.x5x2 { background-position: -280px -34px; }
#dropdown_menu_handshape.x6x2 { background-position: -350px -34px; }
#dropdown_menu_handshape.x7x2 { background-position: -420px -34px; }

#dropdown_menu_handshape.x1x3 { background-position: -0px -68px; }
#dropdown_menu_handshape.x2x3 { background-position: -70px -68px; }
#dropdown_menu_handshape.x3x3 { background-position: -140px -68px; }
#dropdown_menu_handshape.x4x3 { background-position: -210px -68px; }
#dropdown_menu_handshape.x5x3 { background-position: -280px -68px; }
#dropdown_menu_handshape.x6x3 { background-position: -350px -68px; }
#dropdown_menu_handshape.x7x3 { background-position: -420px -68px; }

#dropdown_menu_handshape.x1x4 { background-position: -0px -102px; }
#dropdown_menu_handshape.x2x4 { background-position: -70px -102px; }
#dropdown_menu_handshape.x3x4 { background-position: -140px -102px; }
#dropdown_menu_handshape.x4x4 { background-position: -210px -102px; }
#dropdown_menu_handshape.x5x4 { background-position: -280px -102px; }
#dropdown_menu_handshape.x6x4 { background-position: -350px -102px; }
#dropdown_menu_handshape.x7x4 { background-position: -420px -102px; }

#dropdown_menu_handshape.x1x5 { background-position: -0px -136px; }
#dropdown_menu_handshape.x2x5 { background-position: -70px -136px; }
#dropdown_menu_handshape.x3x5 { background-position: -140px -136px; }
#dropdown_menu_handshape.x4x5 { background-position: -210px -136px; }
#dropdown_menu_handshape.x5x5 { background-position: -280px -136px; }
#dropdown_menu_handshape.x6x5 { background-position: -350px -136px; }
#dropdown_menu_handshape.x7x5 { background-position: -420px -136px; }

#dropdown_menu_handshape.x1x6 { background-position: -0px -170px; }
#dropdown_menu_handshape.x2x6 { background-position: -70px -170px; }
#dropdown_menu_handshape.x3x6 { background-position: -140px -170px; }
#dropdown_menu_handshape.x4x6 { background-position: -210px -170px; }
#dropdown_menu_handshape.x5x6 { background-position: -280px -170px; }
#dropdown_menu_handshape.x6x6 { background-position: -350px -170px; }
#dropdown_menu_handshape.x7x6 {
  background-position: -280px -170px;
  width: 140px;
  text-indent: 0;
  font-size: 1em;
}

#states {
  width: 250px;
  margin: 0 auto;
}

/* this overrides the bootstrap style for this class since BSL wants the video centred in the page */
#publicsign #definitionblock .col-md-4 {
    float: none;
    width: 664px;
    margin: auto;
}

#publicsign #videocontainer #player {
   margin: auto;
   width: 664px;
   height: 384px;
   border: 12px solid black;
   -webkit-border-radius: 10px 10px 10px 10px;
   -moz-border-radius: 10px 10px 10px 10px;
   border-radius: 10px 10px 10px 10px;
}

@media  (max-width: 980px) {

    #publicsign.view-regional #definitionblock .region-right {
      width: 100%;
    }
}

@media  (max-width: 768px) {

    #publicsign #videocontainer {
        width: 100%;
    }
    
    #publicsign #videocontainer #player {
        width: 100%;
        padding-bottom: 50%;
        height: 1px;
        overflow: hidden;
    }
    
    
    #publicsign #videoiframe {
        width: 100%;
    }
    
    
    #publicsign #definitionblock .col-md-4 {
        float: none;
        width: 100%;
        margin: auto;
    }
    
    #publicsign #player img {
        margin-left: auto;
        margin-right: auto;
        width: 70%;
    }
}


#publicsign #player img {
    margin-left: 160px;
    margin-top: 60px;
    width: 320px;
    height: 240px;
}



/* video display on admin edit pages */

#videoiframe {
    width: 320px; 
    height: 180px;
}

#videocontainer {
   width: 344px;   
}

#videocontainer #player {
   margin: auto;
   width: 332px;
   height: 192px;
   border-top: 0px;
   border-left: 6px solid black;
   border-right: 6px solid black;
   border-bottom: 12px solid black;
   -webkit-border-radius: 0px 0px 10px 10px;
   -moz-border-radius: 0px 0px 10px 10px;
   border-radius: 0px 0px 10px 10px;
}

#player img {
    width: 320px;
    height: 180px;
}


#numbersigns #player {
   margin: auto;
   width: 332px;
   height: 252px;
   border-top: 0px;
   border-left: 6px solid black;
   border-right: 6px solid black;
   border-bottom: 12px solid black;
   -webkit-border-radius: 0px 0px 10px 10px;
   -moz-border-radius: 0px 0px 10px 10px;
   border-radius: 0px 0px 10px 10px;
}

div.view-quiz { margin-top: 1em; }
div.quiz-block, div.solution { display: none; }
div.quiz-share { text-align: center; margin: 2em auto; }
div.quiz-share a { margin: 0 1em; }
div#quiz #definitionblock { clear: after; font-size: 0.6em; }
div#quiz-intro { display: block; }
div#quiz-intro h1 { text-align: center; }
div#quiz-intro h2 { text-align: center; }
div#quiz-intro input { display: block; margin: 1em auto; font-size: 2em; }
div#quiz { font-size: 2em; }
div#quiz p { font-weight: bold; }
div#quiz form { margin-left: 1em; }
div#quiz label { display: block; font-size: 0.8em; font-weight: normal; }
div#quiz input.action { display: block; margin: 1em auto; }
div#quiz div.solution { text-align: center; }
div#quiz div.solution p { font-weight: normal; }
div#quiz div.solution p span.was { font-weight: bold; }
div#quiz-total p { text-align: center; margin: 0.5em auto; display: block; }
div#quiz p.hidden { display: none; }
div#quiz p.scoring { text-align: center; display: none; }
div#quiz input.answer { font-size: 2em; }
.quiz-debug { display: none; }
.s5-fix { display: block; min-height: 400px; }