body {
  font-size: 9pt;
  font-family: "DejaVu Sans", Tahoma, Arial, sans-serif;
  background: #fff url(bg.png) repeat-x;
  margin: 0;
  padding: 0;
}

#container {
  width: 964px;
  margin: auto;
}

#header {
  height: 120px;
  background: #fff url(hdr.jpg) no-repeat;
  position: relative;
}

#content {
  width: 960px;
  margin: 0 2px 3em;  
}
#content h2 {
  font-size: 1em;
  border-bottom: 1px dotted #c5c5c5;
  margin: .6em 3px .8em;
  padding: 0 0 0 16px;
  line-height: 24px;
  background: #fff url(bullet.png) no-repeat 0 center;
}

#footer {
  border-top: 1px dotted #c5c5c5;
  text-align: right;
  color: #bbb;
  font-size: 8pt;
  padding: 2px 0 8px 0;
  clear: both;
}
#footer a {
  color: #bbb;
  text-decoration: none;
} 
#footer .p1 {
  float: left;
}
#footer .p2 a {
}

#top-links {
  position: absolute;
  bottom: 9px;
  left: 324px;
  font-size: .9em;
}
#top-links a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  line-height: 32px;
  height: 33px;
  float: left;
  background: transparent url(separator.png) no-repeat right top;
  font-weight: bold;
}
#top-links a span {
  height: 32px;
  display: inline-block;
  padding: 0 12px 0 12px;
  margin-right: 2px;
}
  
#top-links a.selected span {
  background: transparent url(act-menu.png) repeat-x;
  color: #fff;
}
#top-links a span.first {
  padding: 0;
  margin-right: 0;
}
#top-links a span.first span {
  background: transparent;
  padding: 0 12px 0 16px;
}
#top-links a.selected span span {
  background: transparent url(act-1st-menu.png) no-repeat left top;
}

#language {
  position: absolute;
  right: .2em;
  top: .8em;
  font-size: .9em;
}

#language img {
  border: 0;
}

#username {
  color: #000;
  position: absolute;
  right: 0;
  top: 2.5em;
  background: transparent url(ico/user_suit.png) no-repeat left center;
  padding-left: 20px;
  font-size: .9em;
}

#folderView, #deckView {
  padding: 1em .3em 0;
}
div.pagination {
  text-align: right;
  padding: .5em;
  background-color: #fff;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}
span.pagination {
  float: right;
}
.pagination strong {
  color: #9c3;
}
.pagination a {
  color: #00f;
  text-decoration: none;
}
.nowrap {
  white-space: nowrap;
}
.mp3 {
  cursor: pointer;
}

h4 {
  margin: 0;
  padding: 0;
  font-size: 8pt;
}

.ui-tabs-nav {
  background: #fff url(tabs-top.png) no-repeat bottom left;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-tabs-nav li {
  float: left;
  margin: 0 0 3px 0;
  padding: 0;
  background: transparent url(tab-bg.png) no-repeat;
  height: 30px;
}

.ui-tabs-nav li.ui-state-active {
  background-image: url(act-tab-bg.png);
} 

.ui-tabs-nav li.ui-state-active a {
  font-weight: bold;
  color: #9c3;
} 

.ui-tabs-nav li span.r {
  background: transparent url(tab-bg-r.png) no-repeat top right;
  display: block;
}

.ui-tabs-nav li.ui-state-active span.r {
  background-image: url(act-tab-bg-r.png);
  height: 30px;
}

#content .ui-tabs-nav li a {
  display: block;
  padding: 0.7em 1.5em 0.5em 1.5em;
  text-decoration: none;
  color: #000;
  border: 0 none;
}
.ui-tabs-nav li a span.close {
  background: transparent url(close.png) no-repeat center center;
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-left: .5em;
}

.ui-tabs .ui-tabs-hide {
  display: none;
}

.ui-tabs-panel {
  background: #f5f5f5 url(toolbar-bg.png) repeat-x;
  padding: 2px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}


/* toolbar */
div.toolbar {
  padding: .4em 4px;
  border-left: 1px solid #f5f5f5;
}
div.toolbar a.btn {
  text-decoration: none;
  color: #000;
  border: 1px solid transparent;
  padding: 3px;
}
div.toolbar a.btn span {
  background: transparent url(ico/folder.png) no-repeat left center;
  padding: 2px 0 2px 20px;
}
div.toolbar a.btn:hover {
  background: #fff;
  border: 1px solid #ddd;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
div.toolbar a.btn.checked {
  background: #f5f5f5;
  border: 1px solid #ddd;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
div.toolbar a.foldermenu span, div.toolbar a.dropmenu span {
  background: transparent url(dropdown.gif) no-repeat right center;
  padding-right: 16px;
}
div.toolbar a.dropmenu {
  text-decoration: none;
  color: #000;
  background: transparent url(ico/brick.png) no-repeat left center;
  padding: 2px 0 2px 20px;
}
div.toolbar a.foldermenu {
  text-decoration: none;
  color: #000;
  background: #fff url(ico/folder.png) no-repeat 3px center;
  padding: 2px 8px 2px 23px;
  border: 1px solid #e5e5e5;
}
div.toolbar a.foldermenu span {
  display: inline-block;
  min-width: 150px;
}
div.toolbar .dropmenu-content {
  background-color: #fff;
  border: 1px solid #aaa;
  display: none;
  position: absolute;
}
div.toolbar .dropmenu-content a {
  display: block;
  padding: .3em .4em;
  text-decoration: none;
  color: #444;
}
div.toolbar .dropmenu-content a:hover {
  background-color: #EBEFF4;
}

div.toolbar .foldermenu-content {
  background-color: #fff;
  border: 1px solid #aaa;
  display: none;
  position: absolute;
  padding: 0;
  height: 20em;
  overflow: auto;
}

div.toolbar .foldermenu-content ul {
  list-style: none;
  margin: 0;
  padding: 0;  
}
div.toolbar .foldermenu-content a {
  display: block;
  padding: .2em 0;
  text-decoration: none;
  color: #555;  
}
div.toolbar .foldermenu-content a:hover {
  background-color: #eee;
}
div.toolbar .foldermenu-content a.selected {
  font-weight: bold;
  background-color: #ddd;
}

/* --- */
.tab-content {
  margin-top: 5px;
  padding: 1em .6em;
  background: transparent url(toolbar-btm-sep.png) repeat-x top;
}

.tab-form .tf {
  text-align: right;
  font-weight: bold;
  width: 8%;
  vertical-align: top;
  padding: 3px .7em 2px 0;
  white-space: nowrap;
  
}

.tab-form .sep {
  line-height: 20px;
}

.tab-form .txt {
  border: 1px solid #e5e5e5;
  width: 100%;
  padding: 3px 2px;
}

/* actions */
.act-new-card span {
  background-image: url(ico/page_white_star.png) !important;
}
.act-new-folder span {
  background-image: url(ico/folder_add.png) !important;
}
.act-save span {
  background-image: url(ico/disk.png) !important;
}
.act-save-new span {
  background-image: url(ico/save_new.png) !important;
}
.act-save-close span {
  background-image: url(ico/save_close.png) !important;
}
.act-preview span { 
  background-image: url(ico/page_white_magnify.png) !important;
}
.act-finaldrill span {
  background-image: url(ico/bell.png) !important;
}
.act-show-answer span {
  background-image: url(ico/shape_move_forwards.png) !important;
}
.act-grade1 span {
  background-image: url(ico/grade1.png) !important;
}
.act-grade2 span {
  background-image: url(ico/grade2.png) !important;
}
.act-grade3 span {
  background-image: url(ico/grade3.png) !important;
}
.act-grade4 span {
  background-image: url(ico/grade4.png) !important;
}
.act-grade5 span {
  background-image: url(ico/grade5.png) !important;
}
.act-grade6 span {
  background-image: url(ico/grade6.png) !important;
}
.act-edit span {
  background-image: url(ico/page_white_edit.png) !important;
}
.act-help span {
  background-image: url(ico/help.png) !important;
}

#moveto-dialog {
  display: none;
  padding: 0;
}
#moveto-content {
  overflow: scroll;
  height: 28em;
  width: 25em;
}
#moveto-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#moveto-content a {
  display: block;
  padding: .2em .6em;
  text-decoration: none;
  color: #555;
}
#moveto-content a:hover {
  background-color: #fb3;
  color: #000;
}

div.text {
  font-size: 9pt;
  line-height: 165%;
}
div.text h3 {
  font-family: "Georgia", "Times New Roman", sans-serif;
  font-size: 165%;
  color: #9c3;
}
div.text .card {
  width: 60%;
  margin: 1em auto;
  line-height: 100%;
}
div.text .card .q {
  background-color: #9c3;
  color: #fff;
  padding: 1.3em;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}
div.text .card .a {
  background-color: #eee;
  color: #000;
  padding: 1.3em;
  margin: 0;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}
div.text .card .f {
  font-size: .8em;
  color: #999;
}

.text a, .ballon a {
  color: #9c3;
  text-decoration: none;
  border-bottom: 1px dotted #9c3;
}

/* table items */

table.items {
  width: 100%;
  border-collapse: collapse;
  cursor: default;
  border-bottom: 1px solid #f3f3f3;
}

table.items th {
  text-align: left;
  color: #000;
  padding: .5em .5em 0;
  line-height: 24px;
  height: 24px;
  background: #fff url(th-bg.png) repeat-x;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  
}

table.items td {
  color: #333;
  padding: .2em .5em;
  cursor: pointer;
  background-color: #fff;
  line-height: 20px;
}

table.items td.name {
  color: #333;
  background: #fff url(ico/page_white.png) no-repeat 2px center;
  padding-left: 25px;
}

table.items tr.folder td.name {
  background-image: url(ico/folder.png);
}

table.items tr.folder.shared td.name {
  background-image: url(ico/folder_go.png);
}

table.items tr.deck td.name {
  background-image: url(ico/package.png);
}

table.items tr.odd td {
  background-color: #edf2ff;
}

table.items tr:hover td {
  background-color: #fb3;
}

table.items td.actions {
  white-space: nowrap;
}

table.items td.actions img {
  margin-right: 4px;
}

table.items td.actions img:last-child {
  margin-right: 0;
}

div.loading {
  z-index: 100;
  position: relative;
  display: none;
}

div.loading img {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
}

textarea {
  font-family: "Courier New";
  font-size: 10pt;
}

.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }


/* message */
#msg {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 35px;
  text-align: center;
  display: none;
  z-index: 1000;
  opacity: .8;
}

#msg span {
  padding: .6em 5em;
  -moz-border-radius: .5em;
  -webkit-border-radius: .5em;
  background-color: #FBEC88;
  border: 1px solid #FAD42E;
  color: #363636;
  display: inline-block;
}

#msg.ok span {
  background-color: #b1e778;
  border: 1px solid #59a00e;
}

#msg.info {
}

#msg.error span {
  background-color: #FEF1EC;
  border: 1px solid #CD0A0A;
  color: #CD0A0A;
}

/* block */
.block {
  color: #444;
}

.block h3 {
  color: #9c3;
  font-size: 9pt;
  background: transparent url(bullet2.gif) no-repeat center left;
  padding-left: 12px;
  margin: .2em 0;
}

#feature-block {
  font-size: .9em;
  width: 720px;
  padding-bottom: 10em;
}

#feature-block ul {
  float: left;
  width: 45%;
  padding: 0;
  list-style: none;
  margin: 0;
}
#feature-block ul li {
  background: transparent url(031.png) no-repeat 0 5px;
  padding: .3em 0 .3em 16px;
  margin: 0;
}
#feature-block .p1 {
  margin-right: 3%;
}


/* login form */
#login-block {
  width: 210px;
  float: right;
  margin-bottom: 2em;
}

form#login {
  font-size: .9em;
  margin: 0;
}

form#login p {
  padding: 0;
  margin: .4em 0;
}

form#login p.rememberme input {
  /*vertical-align: baseline/sub/super/top/text-top/middle/bottom/text-bottom/length/%;*/
  vertical-align: -15%;
}

form#login label {
  display: block;
}

form#login input.text {
  width: 98%;
  border: 1px solid #bbb;
  padding: .3em .2em;
}
form#login p.submit {
  text-align: center;
}
form#login p.submit input {
  font-weight: bold;
  padding: .2em .6em;
  /*background: transparent url(act-menu.png) repeat-x center;
  color: #fff;
  border: 0 none;
  display: inline-block;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;*/
  cursor: pointer;
}
form.std p.submit input:hover {
  color: #fce94f;
}
form#login p.error {
  text-align: center;
  color: #f00;
}

/* study */
#study-content {
  font-size: 1.3em;
  font-family: "DejaVu Sans", Tahoma, Arial, Verdana, sans-serif;
  position: relative;
  margin: 2em 0 0 0;
  width: 958px;
}

#study-subcontent {
}


#study-content #statistics {
  color: #656e75;
  position: absolute;
  font-size: .7em;
  top: -1.2em;
  padding: .5em;
  right: 1.5em;
  border: 1px solid #9c3;
  -moz-border-radius: .3em;
  -webkit-border-radius: .4em;
  background-color: #fff; 
}

#study-content #statistics span {
  font-weight: bold;
  color: #9c3;
}

#study-content #folder {
  font-size: .75em;
  color: #777;
  position: absolute;
  top: -1.3em;
  left: .6em;
}
#study-content #folder.learning {
  background: transparent url(nowe.gif) no-repeat right 62%;
  padding-right: 35px;
}

#study-content #folder span {
  color: #9c0;
}

#study-content #question {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  padding: 1px;  
  border: 1px solid #9c3;
  color: #fff;
}

#study-content #question .sub {
  padding: 2.8em 2em 2.8em 2em;
  background-color: #7DAD26;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#study-content #answer {
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  padding: 0 1px 1px;  
  border: 1px solid #9d9d9d;
  border-top: none;
  color: #000;
  width: 97%;
  margin: auto;
}

#study-content #answer .sub {
  background: #fbfbfb url(a-bg.png) repeat-x left bottom;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  padding-bottom: .5em;
}

#study-content #a {
  padding: 2em 1.4em 1.7em;
}

#edit-dialog {
  padding: 1.2em;
  display: none;
}

#toolbar {
  margin: 2em 0 5em 0;
  /*background-color: #fcfcfc;
  -moz-border-radius: 5px;
  padding: .8em 0;*/
  padding: 0;
  border-left: none;
}

/* Q&A formating */
span.phonetic {
  /*font-family: "Trebuchet MS";*/
  color: #204a87;
}
#a span.translation {
  color: #c00;
}
#q span.translation {
  color: #ff6;
}

/* home page */
#chart {
  width: 740px;
  float: left;
}

#stats {
  float: right;
  width: 210px;
  font-size: 1.1em;
}

#stats h2 {
  margin-bottom: .5em;
}

#stats .content {
  padding: .5em 1em;
}

#stats ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#stats ul li {
  padding: .5em 0 .5em 20px;
  background: transparent url(ico/bullet_star.png) no-repeat center left;
}

#stats ul strong {
  color: #9c3;
}

.clear {
  clear: both;
}

/* chart */
.chart {
  height: 120px;
  border-bottom: 1px solid #777;
  margin: 2.5em 0;
  padding: 0 0 0 10px;
  list-style: none;
}

.chart li {
  height: 100%;
  position: relative;
  float: left;
  margin-right: 14px;
  width: 35px;
}

.chart .item {
  background: #729fcf;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.chart li:first-child .item {
  background: #9c3;
}

.chart .item .title {
  position: absolute;
  bottom: -1.9em;
  width: 100%;
  text-align: center;
  font-size: .7em;
  color: #777;
}

.chart .item .val {
  position: absolute;
  top: -1.7em;
  width: 100%;
  text-align: center;
  font-size: .8em;
  color: #729fcf;
  font-style: italic;
}


/* quick preview */
div#qpreview #study-content {
  margin: 0;
}



/* form */
form.std {
  padding: 0;
}

form.std fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
form.std p {
  padding: .3em 15px;
  margin: 0;
}
form.std p label {
  width: 165px;
  display: inline-block;
}
form.std input.text {
  width: 210px;
  border: 1px solid #c5c5c5;
  padding: .3em;
}
form.std label var {
  color: #f00;
  font-weight: bold;
  padding-left: .5em;
}
form.std p.submit {
}
form.std p.submit input {
  background: transparent url(act-menu.png) repeat-x center;
  color: #fff;
  border: 0 none;
  font-weight: bold;
  padding: .5em;
  display: inline-block;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  cursor: pointer;
  margin-left: 165px;
}
form.std p.submit input:hover {
  color: #fce94f;
}
form.std p dfn {
  display: block;
  margin-left: 165px;
}
form.std p span.error {
  display: block;
  color: #f00;
  margin-left: 165px;
  font-size: .9em;
}
form.std p.terms {
  font-size: .9em;
  color: #777;
  text-align: center;
}
form.std p.error {
  background-color: #FEF1EC;
}

#signup-form {
  width: 420px;
  margin: 4em auto 0;
  padding: 0;
}
.ballon {
  background: #f0f0f0 url(txt-bg.gif) repeat-x;
  width: 70%;
  margin: 3em auto 1em;
}
.ballon .sub, .highlight .sub {
  background: transparent url(tl-brd.gif) no-repeat;
}
.ballon .content, .highlight .content {
  background: transparent url(tr-brd.gif) no-repeat right top;
  padding: 1.5em 2.5em 0;
}
.ballon .crn-br, .highlight .crn-br {
  background: transparent url(br-brd.gif) no-repeat right bottom;
  height: 21px;
  clear: right;
}
.ballon .icon {
  background: #fff url(ballon_icon.gif) no-repeat;
  height: 47px;
  margin-left: -30px;
}
.highlight {
  background: #f0f0f0 url(txt-bg2.png) repeat-x;
  margin: 1em auto;
  width: 100%;
}
.highlight .content {
 font-family: Tahoma, Arial, sans-serif;
 font-size: 11pt;
 padding: 2.1em 0 0 2em;
 color: #4c4c4c;
}
.highlight .crn-bl {
  background: transparent url(bl-brd.gif) no-repeat left bottom;
  height: 21px;
}
.highlight .register {
  text-align: right;
}
.highlight .register a {
  text-decoration: none;
  color: #729fcf;
  border-bottom: 1px dotted #729fcf;
}
.highlight .register a img {
  vertical-align: -30%;
}

.browser-warning {
  padding: 2.5em;
  background-color: #FEF1EC;
  border: 1px solid #CD0A0A;
  color: #CD0A0A;
}

.dialog {
  display: none;
}


#help-sidebar {
  float: left;
  width: 180px;
}
#help-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#help-sidebar li {
  padding: 0;
}
#help-sidebar a {
  display: block;
  text-decoration: none;
  color: #9c3;
  padding: .3em 0 .3em 17px;
  border-bottom: 1px dotted #ddd;
  background: transparent url(bullet2.gif) no-repeat 4px center;
}