.app-content { background-color: #555; background-image: url(img/bg.png); color: #fff; }

.clr{clear:both;}
.show{display:block !important;}
.hide{display:none !important;}
.disabled{opacity:0.5; cursor:default;}

/***********************************General***********************************/

.box{position:relative; border: 1px solid #999; background:#444;padding:.75em .5em;margin-bottom: .375em;
     -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
     -moz-border-radius: .3125em;-webkit-border-radius: .3125em;border-radius: .3125em;}


/***********************************Right Side***********************************/

#moleculesPanel{width:24.6875em; height:29.4em; position:absolute; right:.375em; top:.375em; direction:rtl;
               -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

/*******box1*******/

#moleculeInstruction{height:2.75em; font-weight:bold; padding-top:.75em !important;}
.en #moleculeInstruction{ padding-top:.65em !important; font-size: 68%;}
#moleculeDropDown{position:absolute; left:0.65em; top:.5em;}
.en #moleculeDropDown{     left: 22em;}

.dropdown {position:relative; z-index: 333; cursor:pointer; display:inline-block;width:13.5em;height: 1.5em;line-height: 1.5em; color: #000; background: #EAF2FB; border: 1px solid #AFC4DF;}
.dropdown .drop-icon{float:left;  width:.9375em; height:100%; padding-top:.5em;
                     -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.dropdown .drop-arrow {width:0;height:0; border-left: .3125em solid transparent; border-right: .3125em solid transparent; border-top: .4375em solid #567DB1; margin: 0 auto;}
.dropdown:hover .drop-arrow {border-top-color: #58BBFC;}

.dropdown .drop-label {float:right; width:11.9375em; height:1.5em; line-height:1.5em; padding-right: .625em;}
.dropdown .drop-label > span{font-size:80%;}

.en .dropdown .drop-label {
    float: right;
    width: 16.1em;
    height: 1.5em;
    line-height: 2em;
    margin-right: -0.89em;
    font-size: 78%;
}

.molecule-eng{font-size:87%;}

.dropdown .drop-content{position:absolute;right:-.05em; top:1.5em;display: none; list-style:none; margin:0; padding:0;width:13.5em; border: 1px solid #AFC4DF; background: #FEFCEF;}
.dropdown .drop-content li {padding-right: .625em;border-top: 1px solid #AFC4DF; font-size:80%;}
.en .dropdown .drop-content li {    padding-left: 0.625em;}
.dropdown .drop-content li:hover{background: #58BBFC;}

/*******box2*******/

#moleculeInfo{height:7.125em;}
#moleculeInfo .pic{width:7.5em; height:5.5em;position:absolute; left:0.65em;}
#moleculeInfo .pic > img{width:100%; height:100%;}
.en #moleculeInfo .pic > img{padding-left: 16em;}
#moleculeInfo .title {font-weight:bold;}
#moleculeInfo .info {width:70%; }
.en #moleculeInfo .info {
      line-height: 92%;
}

#moleculeInfo .info > span {font-size:80%;}
.en #moleculeInfo .info > span {font-size: 80%;}
/*******box3*******/

#moleculeGraphics { height: 19.4375em; direction: ltr; position: relative; border: 1px solid #999; margin-bottom: .5em; padding: .75em 1em;
                    -moz-border-radius: .625em; -webkit-border-radius: .625em; border-radius: .625em;
                    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NDg0ODQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                    background: -moz-linear-gradient(top, #454545 0%, #848484 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(100%,#848484)); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(top, #454545 0%,#848484 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(top, #454545 0%,#848484 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(top, #454545 0%,#848484 100%); /* IE10+ */
                    background: linear-gradient(to bottom, #454545 0%,#848484 100%); /* W3C */
                  }
#output{width:100%; height:100%;border:1px solid #333; 
        -moz-border-radius: .625em; -webkit-border-radius: .625em; border-radius: .625em;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEyMzE2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFhNDg5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMjMxNmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top, #12316b 0%, #1a489e 50%, #12316b 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12316b), color-stop(50%,#1a489e), color-stop(100%,#12316b)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #12316b 0%,#1a489e 50%,#12316b 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #12316b 0%,#1a489e 50%,#12316b 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #12316b 0%,#1a489e 50%,#12316b 100%); /* IE10+ */
        background: linear-gradient(to bottom, #12316b 0%,#1a489e 50%,#12316b 100%); /* W3C */}

#moleculeRows {
    position: relative;  height: 100%; padding:1em 0 0 .4375em;
   -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

.circ { width: 1.25em; height: 1.25em; border-radius: 50%; float: left; text-align: center; margin: 0 .2em .5625em 0; display: none; 
        background: url('img/circ-shadow2.png') no-repeat;-moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;
}
.h{ color:#000; background-color:#e1e1e1;}
.n{background-color:#1616CA; color:#fff;}
.p{background-color:#ef7800; color:#000;}
.c{background-color:#000; color:#fff;}
.s{background-color:#ddda02; color:#000;}
.cl{background-color:#12D612; color:#000;}
.f{background-color:#00D4D4; color:#000;}
.o{background-color:#C61A00; color:#fff;}

.circ > span{font-size:85%;}

#feedbackWrong, #feedbackRight{ direction:rtl; position: absolute; bottom: 0; right: .125em; display: none; margin: 1.5em;}

.feedback-text { width: 6.5em; height: 2.5em; line-height: 2.5em; border: 2px solid transparent;background: #eee; text-align: center; font-weight: 700;
                 -moz-border-radius: .3125em; -webkit-border-radius: .3125em; border-radius: .3125em;}

#feedbackWrong .feedback-text{ border-color: #ff6600; color: #ff6600;}
#feedbackRight .feedback-text {border-color: #58B000;  color: #58B000;}
#feedbackRight .pic{width:17em; height:17em; position:absolute; top:-15em; left:-13.5em;}
#feedbackRight .pic > img{width:100%; height:100%;}


.show-feedback{display:block !important;}

/***********************************Left Side***********************************/

#atomsPanel{width:24.6875em; height:29.4em;  position:absolute; left:.375em; top:.375em;  direction:rtl;
               -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}


/*******box4*******/

#atomTable{height:25em;}
#atomInstruction{font-weight:bold;}
.en #atomInstruction{padding-left: 0.16em;}
.atom-table{margin:4.5em auto;}
.atom-table > table {border-collapse: separate!important;direction: ltr; margin-right:-.15em;}
.atom-table td {padding: .25em;}

.element {
   color:#0f6dfc; position: relative; width: 2.5em; height: 2.5em; background: #eee; /* Old browsers */ cursor: pointer;
  -moz-border-radius: .3125em; -webkit-border-radius: .3125em; border-radius: .3125em;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
  -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none;user-select: none;
  -moz-box-shadow: #000 0 .1875em .125em, inset 0 .0625em 0 #fff; -webkit-box-shadow: #000 0 .1875em .125em, inset 0 .0625em 0 #fff; box-shadow: #000 0 .1875em .125em, inset 0 .0625em 0 #fff;}

.element:hover {-moz-box-shadow: 0 0 .625em .125em rgba(255,255,255,.6); -webkit-box-shadow: 0 0 .625em .125em rgba(255,255,255,.6); box-shadow: 0 0 .625em .125em rgba(255,255,255,.6);
  -moz-transition: box-shadow linear .1s; -o-transition: box-shadow linear .1s; -webkit-transition: box-shadow linear .1s;  transition: box-shadow linear .1s;}

.element.active:hover { -moz-box-shadow: 0 0;-webkit-box-shadow: 0 0; box-shadow: 0 0;}

.element.active::after {content: "";position:absolute; top:-10%; left:-10%; display:block;  width:120%;  height:120%;
  -moz-border-radius: .3125em; -webkit-border-radius: .3125em; border-radius: .3125em;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}

.element.active.right-choice::after{border: .125em solid #cccccc;}
.element.active.wrong-choice::after{border: .125em solid red;}

.disabled .element{cursor:default;}
.disabled .element:hover{  -moz-box-shadow: #000 0 .1875em .125em; -webkit-box-shadow: #000 0 .1875em .125em; box-shadow: #000 0 .1875em .125em;}

.ipad .element:hover { -moz-box-shadow: 0 0 !important;-webkit-box-shadow: 0 0 !important; box-shadow: 0 0 !important;}
    
.name{background: #0f6dfc;overflow: hidden;padding: 0 .125em; height:.8em;line-height:.5em;direction: rtl;color: #fff;text-align: center; white-space: nowrap;
  -webkit-border-bottom-left-radius: .25em;border-bottom-left-radius: .25em;
  -webkit-border-bottom-right-radius:.25em; border-bottom-right-radius:.25em;
  -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}

.en .name {
  line-height:.5em;

}

.en .name > span {
      font-size: 48%;

}
.en body {    direction: ltr;
}
.en .name{direction: ltr!important;text-align: left!important;}
.name > span{font-size:60%;}

.symbol {text-align: center;line-height: 1.73em; height:1.73em;}

/*
.g1 {color: #009900;}
.g1 .name { background: #009900;}
.g2 {color: #ff6600;}
.g2 .name {background: #ff6600;}
.g3 {color: #d03a0a;}
.g3 .name {background: #d03a0a;}
.g4 {color: #ad621d;}
.g4 .name {background: #ad621d;}
.g5 {color: #ac9913;}
.g5 .name {background: #ac9913;}
.g6 {color: #58b000;}
.g6 .name {background: #58b000;}
.g7 {color: #00b370;}
.g7 .name {background: #00b370;}
.g8 {color: #00acac;}
.g8 .name {background: #00acac;}
.g9 {color: #0f6dfc;}
.g9 .name {background: #0f6dfc;}*/

/*******box5*******/

#atomNumbers {padding-top:.4375em; height:6.25em;
              -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#atomDesc{width:8em; margin:0 auto; height:5.25em; position:relative;}
#atomCirc{display:block; position:absolute; left:0; top:1.5em; width:2em; height:2em;}
#atomCirc > span{font-size:130%; display:block; line-height:1.5em; height:1.5em;}
#addSubtractPanel {position: relative; height: 5.375em; width:5.625em; background: #333;}

.picker-wrapper { position: relative; float: right; overflow: hidden; margin: .125em .125em 0 0; padding: 1.75em 0; width: 2.875em; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDZweCIgaGVpZ2h0PSI4MnB4IiB2aWV3Qm94PSItMiAtMiA0NiA4MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMiAtMiA0NiA4MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cmVjdCB4PSItMSIgeT0iLTEiIGZpbGw9IiMxQTE3MUIiIHdpZHRoPSI0NCIgaGVpZ2h0PSI4MCIvPg0KCTxwYXRoIGZpbGw9IiMxQTE3MUIiIGQ9Ik00Miwwdjc4SDBWMEg0MiBNNDQtMmgtMkgwaC0ydjJ2Nzh2MmgyaDQyaDJ2LTJWMFYtMkw0NC0yeiIvPg0KPC9nPg0KPGc+DQoJDQoJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTQuNDUwNyIgeTE9Ijc0Ni45Mzg1IiB4Mj0iMTQuNDUwNyIgeTI9IjgxNC4zMzg2IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgOC41NjAxIC03MzkuODA0NykiPg0KCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojODM4MzgzIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuMiIgc3R5bGU9InN0b3AtY29sb3I6I0NDQ0NDQyIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjMxNzYiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQUVBRUEiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC40MDM5IiBzdHlsZT0ic3RvcC1jb2xvcjojQzJDMkMyIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuODc0NSIgc3R5bGU9InN0b3AtY29sb3I6IzYxNjE2MSIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojNzk3OTc5Ii8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIgZD0iTTQxLjk1OSw3OFYwSDQydjc4SDQxLjk1OXogTTQuMDIxLDc4VjBoMzMuOTE4djc4SDQuMDIxeiIvPg0KCQ0KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzJfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ii02LjU0OTMiIHkxPSI3NDYuOTM4NSIgeDI9Ii02LjU0OTMiIHkyPSI4MTQuMzM4NiIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDguNTYwMSAtNzM5LjgwNDcpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzRGNEY0RiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjIiIHN0eWxlPSJzdG9wLWNvbG9yOiM5Njk2OTYiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4zMTc2IiBzdHlsZT0ic3RvcC1jb2xvcjojOUU5RTlFIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuNDAzOSIgc3R5bGU9InN0b3AtY29sb3I6IzYyNjI2MiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjg3NDUiIHN0eWxlPSJzdG9wLWNvbG9yOiMzMDMwMzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzQ0NDQ0NCIvPg0KCTwvbGluZWFyR3JhZGllbnQ+DQoJPHJlY3QgZmlsbD0idXJsKCNTVkdJRF8yXykiIHdpZHRoPSI0LjAyMSIgaGVpZ2h0PSI3OCIvPg0KCQ0KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzNfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMxLjM4ODciIHkxPSI3NDYuOTM4NSIgeDI9IjMxLjM4ODciIHkyPSI4MTQuMzM4NiIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDguNTYwMSAtNzM5LjgwNDcpIj4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzRGNEY0RiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjIiIHN0eWxlPSJzdG9wLWNvbG9yOiM5Njk2OTYiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4zMTc2IiBzdHlsZT0ic3RvcC1jb2xvcjojOUU5RTlFIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuNDAzOSIgc3R5bGU9InN0b3AtY29sb3I6IzYyNjI2MiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjg3NDUiIHN0eWxlPSJzdG9wLWNvbG9yOiMzMDMwMzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzQ0NDQ0NCIvPg0KCTwvbGluZWFyR3JhZGllbnQ+DQoJPHJlY3QgeD0iMzcuOTM4IiBmaWxsPSJ1cmwoI1NWR0lEXzNfKSIgd2lkdGg9IjQuMDIxIiBoZWlnaHQ9Ijc4Ii8+DQo8L2c+DQo8L3N2Zz4NCg=='); /*img/picker-bg.svg*/
                   -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%; 
                   -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; -webkit-transform-origin: top right; transform-origin: top right;}
#atom-picker{ position: relative; overflow: visible!important; width: 2.875em; height: 1.625em;}
#atom-picker.disabled{ -moz-opacity:.3; opacity: .3;}
.picker-wrapper ul { margin: 0; padding: 0; width:2.875em; color: #000; list-style: none; font-weight: 700; cursor: default;}
.picker-wrapper li {height: 1.625em; line-height: 1.625em; text-align:center;font-size:80%;}
.glass {position:absolute; top: 1.6875em; right:0; width: 2.875em; height: 1.75em;}


/**units with px since we use control iScroll + grid-scale**/
.picker-wrapper { margin: 2px 2px 0 0; padding: 28px 0;  width: 46px;}
#atom-picker{width: 46px;height: 26px;}
.picker-wrapper ul {width: 46px;}
.picker-wrapper li { height: 26px;line-height: 26px;}
.glass {top: 27px; right: 0; width: 46px; height: 28px;}




.picker-btns {position:absolute; left:0; width:2.5em; text-align: center; line-height:0;}
.picker-btns > div {overflow: hidden; margin: .125em .125em 0;  padding: 0;width: 2.125em; height: 2.375em; line-height: 2.4em;color: #999;outline: none; border: 1px solid #111;background: #444;cursor: pointer;
  -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
  -moz-border-radius: .375em; -webkit-border-radius: .375em; border-radius: .375em;}

.picker-btns .bg-btn{
  width:100%; height:100%;
  background: #444; /* Old browsers */
  background: -moz-linear-gradient(top, #555555 0%, #444444 100%); /* FF3.6+ */
  background: -ms-linear-gradient(top, #555555 0%,#444444 100%); /* IE10+ */
  background: -o-linear-gradient(top, #555555 0%,#444444 100%); /* Opera 11.10+ */
  background: -webkit-linear-gradient(top, #555555 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #555555 0%,#444444 100%); /* W3C */
  -moz-box-shadow: rgba(255,255,255,.2) 0 .0625em 0 inset; -webkit-box-shadow: rgba(255,255,255,.2) 0 .0625em 0 inset;  box-shadow: rgba(255,255,255,.2) 0 .0625em 0 inset;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ 
}

.picker-btns .bg-btn:hover {
  background: #3a3a3a; /* Old browsers */
  background: -moz-linear-gradient(top, #4a4a4a 0%, #3a3a3a 100%); /* FF3.6+ */
  background: -ms-linear-gradient(top, #4a4a4a 0%,#3a3a3a 100%); /* IE10+ */
  background: -o-linear-gradient(top, #4a4a4a 0%,#3a3a3a 100%); /* Opera 11.10+ */
  background: -webkit-linear-gradient(top, #4a4a4a 0%,#3a3a3a 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #4a4a4a 0%,#3a3a3a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */}

.picker-btns .bg-btn:active {
  background: #303030; /* Old browsers */
  background: -moz-linear-gradient(top, #404040 0%, #303030 100%); /* FF3.6+ */
  background: -ms-linear-gradient(top, #404040 0%,#303030 100%); /* IE10+ */
  background: -o-linear-gradient(top, #404040 0%,#303030 100%); /* Opera 11.10+ */
  background: -webkit-linear-gradient(top, #404040 0%,#303030 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #404040 0%,#303030 100%); /* W3C */
  -moz-box-shadow: rgba(0,0,0,.3) 0 .125em 0 inset; -webkit-box-shadow: rgba(0,0,0,.3) 0 .125em 0 inset; box-shadow: rgba(0,0,0,.3) 0 .125em 0 inset;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#303030',GradientType=0 ); /* IE6-9 */}

.picker-btns span { font-size: 135%;}

.picker-btns .disabled > span {cursor: default;color: #666!important; border-color: #222!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; box-shadow: none!important; filter: none;  background: #444!important; /* Old browsers */}

button.disabled span { position: relative;}






.en .app-content * {
    direction: ltr;
}