*  {
   font-family:Arial;
   font-size:12px;
}

h1, h2, p   {
   clear:left;
}

img   {  border:none;   }
h1    {
   margin:17px 0 21px 0;
   text-align:left;
}
h1, h1 a    {
   font-family:Trebuchet MS;
   font-size:18px;
   font-weight:normal;
}

h2 {
   font-family:Trebuchet MS;
   font-size:14px;
   text-align:left;
}

body  {
   padding:0;
   margin:0;
   background:#626d7b url(images/bg.gif) center top repeat-y;
}

form  {
   margin:0;
   padding:0;
   border:0;
   clear:both;
}

form.standard {
   margin-top:20px;
}

form.standard p {
   margin:0 0 10px 0;
}

form.standard label {
   display:block;
}

form.standard input {
   width:150px;
}

#wrapper {
   width:904px;
   position:relative;
   left:50%;
   margin-left:-452px;
   background:white;
}

#top  {
   background:url(images/top.png) top left no-repeat;
   height:68px;
   position:relative;

   margin:0px 1px;
}

#logo-sign  {
   position:absolute;
   width:58px;
   height:58px;
   left:51px;
   top:22px;
}
#logo-text  {
   position:absolute;
   width:111px;
   height:17px;
   left:29px;
   top:90px;
}

#menu-h {
   position:absolute;
   left:190px;
   top:44px;

   width:711px;
   height:24px;
}

#menu-h a {
   color:white;
   text-decoration:none;
   font-family:Trebuchet MS;
   font-size:12px;
   margin:0 8px;
   height:24px;
   line-height:28px;
   float:left;
}
#menu-h a.active {
   background:url(images/active-menu-left.gif) left top no-repeat;
   position:relative;
   padding: 0 10px 0 12px;

   color:black;
   font-family:Trebuchet MS;
   font-size:13px;
   font-weight:bold;
}
#menu-h a.active img {
   position:absolute;
   top:0px;
   right:-1px;
}

#menu-h a.auth {
   float:right;
}

#menu-h div#user-name {
   float:right;
   font-size:16px;
   color:white;
}
#menu-h div#user-name a {
   float:none;
   position:relative;
   top:-7px;
   font-size:10px;
   font-weight:normal;
   margin-left:5px;
}

#menu-v  {
   float:left;
   width:170px;
   margin-top:55px;
}

#menu-v a {
   display:block;
   height:30px;
   line-height:30px;

   text-decoration:none;
   color:black;
   font-family:Verdana;
   font-size:12px;

   padding-left:45px;
}

#menu-v a.active {
   background-color:#c7d9ff;
}

#menu-v a:hover {
   background-color:#d9e5ff;
}

#menu-v h3 {
   display:block;
   height:25px;
   line-height:30px;

   font-family:Verdana;
   font-size:13px;

   margin-top:20px;
   padding-left:30px;
}

#submenu {
   margin:21px 0 17px 0;
   line-height:20px;
   float:left;
}
#submenu a {
   float:left;
   color:black;
   font-family:Trebuchet MS;
   font-size:12px;
   text-decoration:none;
   line-height:20px;
   margin:0 5px;
}
#submenu a.active {
   background:#ddd;
   padding:0 10px;
   margin:0 5px;
}

#content {
   position:relative;
   left:27px;
   margin:0 0 27px 0;
   float:left;
   width:680px;
}

#video-side {
   width:256px;
   float:left;
   margin:0 35px 0 0;
}

#media-type {
   float:left;
}

#media-type a, #media-type b {
   float:left;
   height:20px;
   line-height:20px;
   padding:0 5px;
   color:black;
   text-decoration:none;
}

#media-type b {
   background:#c7d9ff;
   background:#d9e5ff;
   font-weight:normal;
}

#clip-video {
   height:220px;
   clear:left;
}


#sound-container  {
   position:absolute;
   top:0px;
   left:0px;
}

#text-side {
   float:left;
   position:relative;
}
.text-width {
   width:380px;
}

#splash {
   text-align:center;
   padding:90px 0;
}
#splash div {
   font-size:16px;
}
#splash a {
   display:block;
}

#silence {
   text-align:center;
   padding:80px 0;
   font-size:16px;
   font-weight:bold;
   color:#777;
}

.mistake {
   background:red;
}

/* ======== game ======= */
#field   {
   position:relative;
   left:0px;
   top:0px;
   z-index:2;
   padding-bottom:20px;
}

#instruction   {
   text-align:center;
}
#instruction   {
   font-size:13px;
   color:#888;
}
#instruction a.inner   {
   font-size:13px;
   color:blue;
   border-bottom-color:blue;
}

#holes   {
   float:left;
   position:relative;
}

#holes .pair   {
   float:left;
   height:19px;
   margin-bottom:12px;
}

#holes .pair img  {
   float:left;
   margin-bottom:3px;
}

.hole {
   width:29px;
   height:26px;
   float:left;
}

a.word {
   height:26px;
   background:url(images/word-left.png) left top no-repeat;
   text-decoration:none;
   float:left;
}

a.word span {
   float:left;
   height:26px;
   padding:0 10px;

   line-height:25px;
   font-size:15px;
   font-weight:bold;   
   color:black;
   
   cursor:pointer;
   background:url(images/word-right.png) right top no-repeat;
}

#game a.wrong {
   background-position:left -26px;
}
#game a.wrong span   {
   background-position:right -26px;
}

a#word-size-template span{
   display:inline;
}

#templates  {
   position:relative;
   top:-1000px;
   display:none;
}
#current-fragment {
   margin-top:20px;
}
#current-fragment p, #current-fragment p * {
   font-weight:normal;
   font-size:14px;
}

#fragments  {
   clear:both;
}

.fragment {
   position:relative;
   margin-bottom:20px;
}

.fragment .number, #current-fragment .number {
   position:absolute;
   left:-20px;
   color:#999;
}

.fragment .comment, #current-fragment .comment {
   letter-spacing:1px;
   font-family:Lucida Console, Monaco5, monospace;
   color:#999;
   position:relative;
   top:-1px;
   font-size:14px;
}

.dialog  {
}
.ui-dialog-titlebar-close {
   display:none;
}
.dlg-content   {
   background:white;
   border:4px solid #3366cc;
}

.dialog h1 {
   height:39px;
   line-height:39px;
   text-align:center;
   font-size:18px;
   color:white;
   background:#3366cc;
   margin:0 0 18px 0;
}

.dialog .dlg-tip {
   background:#ffffe1;
   padding:10px 45px;
   position:relative;
   top:-18px;
}

.dialog p {
   margin:0 0 0 138px;
   clear:both;
}

.dialog div.inp {
   position:relative;
   text-align:right;
   height:26px;
   line-height:26px;
   margin-bottom:5px;
}

.dialog input {
   position:absolute;
   left:138px;
   top:0px;
   width:210px;
   height:20px;
   line-height:20px;
   font-weight:bold;
   font-size:16px;
}

.dialog label {
   margin-right:356px;
   display:block;
}

.dialog .error {
   margin:0 0 5px 138px;
   position:relative;
   top:-5px;
}

.dialog div.buttons {
   margin:18px 0 18px 138px;
}

.dialog button {
   height:30px;
   width:80px;
   font-size:14px;
   font-weight:bold;
}

#dlg-done button {
   width:120px;
}

#dlg-login-content div.buttons {
   margin-top:20px;
}
#dlg-login-content div.inp-batch {
   margin-top:12px;
}

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

#dlg-reg-content .error  {
   position:absolute;
   left:142px;
   top:112px;
   width:280px;
}

#done-fragment {
   margin:0 45px;
}

#done-piece {
   margin:15px 45px 0 70px;
   position:relative;
}

#done-piece div {
   font-weight:bold;
   font-size:13px;
}

#done-piece a  {
   width:17px;
   height:17px;
   display:block;
   position:absolute;
   left:-25px;
   top:0px;
}

#done-piece .comment, #done-fragment .comment {
   letter-spacing:1px;
   font-family:Lucida Console, Monaco5, monospace;
   font-size:14px;
   color:#999;
   font-weight:normal;
}

a.fraglink   {
   text-decoration:none;
   color:black;
}

a.fraglink:hover   {
   text-decoration:underline;
   color:#666;
}

a.frag-active   {
   background:yellow;
}

.teaser  {
   border:2px solid #3366cc;
   text-align:center;
   padding-bottom:10px;
   margin-bottom:20px;
}

.teaser h1 {
   height:24px;
   line-height:24px;
   text-align:center;
   font-size:16px;
   color:white;
   background:#3366cc;
   margin:0 0 12px 0;
}

.teaser p {
   margin:0 20px 5px 20px;
   text-align:left;
}

.teaser a {
   font-size:12px;
   font-weight:bold;
   color:#3366cc;
}

.teaser .info-line   {
   float:left;
   clear:left;
   height:23px;
   padding:0 0 0 20px;
   text-align:left;
   width:215px;
}

.teaser .info-line div.info-name  {
   float:left;
   height:100%;
   line-height:23px;
   width:106px;
}

.teaser .info-line div.info-data  {
   float:left;
   height:23px;
   line-height:23px;
   width:106px;
   clear:none;
}

#stars-info {
   margin:0 0 2px 0;
}
#stars-info img {
   position:relative;
   top:1px;
}

.teaser #progress-info  {
   border:1px solid black;
   height:auto;
   line-height:1px;
   margin-top:5px;
}

.teaser #progress-info div {
   margin:2px 2px;
}

.teaser #progress-info img {
   width:50%;
   height:5px;
   background:#3366cc;
}

.teaser #skill-info  {
   font-weight:bold;
   font-size:16px;
}

.stars-1, .stars-2, .stars-3, .stars-4, .stars-5  {
   background:url(images/stars.png) top left no-repeat;;
   width:75px;
   height:15px;
}
.stars-1  {   background-position:-60px 0;   }
.stars-2  {   background-position:-45px 0;   }
.stars-3  {   background-position:-30px 0;   }
.stars-4  {   background-position:-15px 0;   }
.stars-5  {   background-position:0px 0;   }

#dict {
   position:absolute;
   width:312px;
   background:url(images/dict-top.gif) center top no-repeat;
   z-index:20000;
}

#dict-top-link {
   position:absolute;
   top:-18px;
   left:147px;
   z-index:2;
}

#dict-bottom-link {
   position:absolute;
   bottom:-28px;
   left:147px;
   z-index:2;
}

#dict #dict-back  {
   position:absolute;
   width:14px;
   height:14px;
   top:36px;
   left:17px;
   background:url(images/dict-back.png) left top no-repeat;
   z-index:10;
}

#dict #dict-cont {
   background:url(images/dict-bottom.gif) center bottom no-repeat;
   position:relative;
   top:10px;
   padding:0 0 12px 0;
}

#dict-cont h1 {
   margin:5px 0px 4px 17px;
   font-family: Arial;
   font-size:14px;
   font-weight:bold;
   position:relative;
}

#dict-cont h1 a.pronounce {
   position:absolute;
   top:-1px;
   right:19px;
   right:36px;
}

#dict-cont h1 a.dictionary {
   position:absolute;
   top:-1px;
   right:-3px;
   right:14px;
}

#dict-cont a.info {
   font-family: Arial;
   font-size:12px;
   font-weight:normal; 
   font-style:italic;
   color:#00c000;
}

#dict-cont i {
   color:#666;
}

#dict-cont div {
   margin:0 17px 2px 54px;
   position:relative;
}

#dict-cont div b {
   position:absolute;
   width:30px;
   left:-34px;
   text-align:right;
}

.active-dict-word {
   font-weight:bold;
   color:blue;
}

span.dict-entry2  {
   cursor:pointer;
}

.awaiting span.dict-entry2  {
   cursor:wait;
}

table.catalogue  {
   position:relative;
   top:-6px;
}

.catalogue thead {
/*
   background:#d9d9d9;
   background:#EEEFF3;
   background:#80879B;
   background:#c8cbd5;
*/
   background:#d8dbe5;
   line-height:27px;
}

.catalogue thead th {
   padding-right:10px;
   padding-top:2px;
   border-bottom:5px solid white;
}
.catalogue thead th, .catalogue thead th a {
   font-size:11px;
   font-weight:normal;
   text-align:left;
   color:black;
}


.catalogue thead th.first {
   text-align:center;
   padding-right:20px;
   padding-left:5px;
}
.catalogue thead th.last {
   padding-right:0px;
}

.catalogue thead th img.blank {
   float:left;
   height:1px;
}

.catalogue tbody tr {
   cursor:pointer;
}
.catalogue tbody tr.hover {
   background-color:#d9e5ff;
}

.catalogue tr.hover .stars-1 { background-position:-60px -15px}
.catalogue tr.hover .stars-2 { background-position:-45px -15px}
.catalogue tr.hover .stars-3 { background-position:-30px -15px}
.catalogue tr.hover .stars-4 { background-position:-15px -15px}
.catalogue tr.hover .stars-5 { background-position:0px -15px}

.catalogue tbody tr td {
   padding:5px 5px 5px 0;
   position:relative;
}

.catalogue tbody tr td a {
   color:black;
}

.catalogue tbody tr td.first {
   padding-left:5px;
}

.catalogue .cat-progress {
   background:white;
   position:absolute;
   width:82px;
   height:auto;
   line-height:1px;
   left:11px;
   bottom:11px;
   border:1px solid black;
}
.catalogue .cat-progress div {
   margin:1px;
   height:4px;
}
.catalogue .cat-progress img {
   height:4px;
   background:#52cc52;
   float:left;
}

.catalogue img.cat-preview {
   width:96px;
   float:left;
}

.preview-container  {
   float:left;
   position:relative;
   background:transparent url(images/shadow.gif) no-repeat scroll right bottom;
}

.shadow-wrapper {
   background: transparent url(images/shadow-mask.png) no-repeat scroll left top;
   float:left;
   padding:0 3px 3px 0;
}

.shadow-wrapper img {
   padding:4px;
   border:1px solid #a9a9a9;
   background-color:white;
   cursor:pointer;
}

.catalogue img.done {
   position:absolute;
   top:4px;
   right:-7px;
   width:30px;
   height:30px;
}

.pages   {
   line-height:26px;
}
.pages-catalogue   {
   border-top:1px solid #80879B;
}
.pages-rating   {
   margin-top:5px;
}

.pages a  {
   padding:2px 5px;
   font-size:14px;
   color:black;
   border:1px solid white;
}
.pages a:hover  {
   border:1px solid #9090a0;
}
.pages b  {
   padding:2px 5px;
   font-size:14px;
   font-weight:normal;
   margin:0 1px;
   color:white;
   background:#9090a0;
   border:1px solid #9090a0;
}

#progress   {
   position:relative;
   clear:both;
   height:260px;
   margin:0 0 0 20px;
}

#progress div  {
   position:absolute;
}

#progress .bar  {
   cursor:pointer;
}

#progress .pos  {
   background:green;
}

#progress .neg  {
   background:red;
}

#progress #x-axis {
   position:absolute;
   height:1px;
   width:100%;
   background:#8c8c8c;
   left:0px;
}

#progress #y-axis {
   position:absolute;
   height:100%;
   width:1px;
   background:#8c8c8c;
   left:0px;
   top:0px;
}

#progress #y-caption {
   position:absolute;
   top:0px;
   left:10px;
   width:100px;
}

#progress #x-caption {
   position:absolute;
   width:100px;
}

#progress #arrow-top {
   position:absolute;
   top:0px;
   left:-3px;
}

#progress #arrow-right {
   position:absolute;
}

#progress-cloud   {
   position:absolute;
   width:265px;

   height:168px;
   background:url(images/progress-cloud.gif) top left no-repeat;
}

#progress-cloud h1  {
   font-size:12px;
   font-weight:bold;
   margin:31px 2px 4px 12px;
}

#progress-cloud .preview {
   border:1px solid black;
   background:white;
   position:relative;
   left:12px;
   top:2px;
   float:left;
   padding:3px;
}

#progress-cloud .preview img {
   width:71px;
   float:left;
   border:1px solid #777;
}

#progress-cloud .progress-info  {
   float:left;
   position:relative;
   left:22px;
   width:165px;
}

#progress-cloud .progress-info .item {
   float:left;
   width:165px;
   clear:left;
   margin-bottom:4px;
}

#progress-cloud .progress-info .item div {
   float:left;
   width:65px;
   font-size:11px;
}

#progress-cloud .progress-info .item span {
   float:left;
   font-size:11px;
   width:100px;
}

#progress-cloud .progress-info #prog-started {
   margin-top:7px;
   margin-bottom:2px;
}

#progress-cloud .progress-info #prog-stars {
   position:relative;
}
#progress-cloud .progress-info #prog-stars img {
   position:absolute;
   top:-2px;
   background-image:url(images/prog-stars.png);
}

#regdata table {
   width:100%;
}

#regdata table tr td {
   line-height:25px;
}

#regdata table tr td.label {
   width:240px;
   text-align:right;
   padding-right:10px;
}

#regdata table tr td.label label {
   font-size:Tahoma;
   font-size:11px;
   color:#777;
   font-weight:bold;
}

#regdata table tr td.value {
   text-align:left;
   font-weight:bold;
   font-size:14px;
}
#regdata table tr td.value a {
   font-weight:normal;
   color:black;
   font-size:12px;
}
#regdata table tr td.value input {
   width:200px;
   font-size:14px;
   margin-right:10px;
}

p.post-error, p.post-ok   {
   clear:both;
   font-size:11px;
   font-weight:bold;
   padding:8px 11px;
}

p.post-error   {
   border:1px solid #E89B88;
   background:#FFEFE8;
}

p.post-ok   {
   border:1px solid #4C96D4;
   background:#E7F1F9;
}

table.rating   {
   clear:both;
   border-collapse:collapse;
   border:1px solid #D8DBE5;
}

table.rating .col-1  {   width:50px;   }
table.rating .col-2  {   width:50px;   }
table.rating .col-3  {   width:50px;   }
table.rating .col-3  {   width:50px;   }

table.rating thead  {
   background:#D8DBE5;
   line-height:27px;
}

table.rating thead th {
   padding:0 20px;
   text-align:center;
   font-size:12px;
   font-weight:bold;
}
table.rating thead th.th-1 {
   padding:0 0 0 20px;
}


table.rating tbody tr {
   line-height:27px;
}
table.rating tbody td {
   padding:0 20px;
   font-size:13px;
   border-bottom:1px solid #D8DBE5;
   text-align:left;
}
table.rating tbody td.td-pos {
   text-align:center;
   padding:0 0 0 20px;   
}

table.rating tbody tr.mine td {
   background:#c7d9ff;
}

#mypos   {  
   clear:both;
   margin:14px 0;
}
#mypos a {  
   color:black;  
}

#blog-greeting   {
   margin:30px 0 33px 80px;
   position:relative;
   background:url(images/blog-cloud.gif) left top no-repeat;
   height:70px;
   padding:0 0 0 40px;
}

#blog-greeting img#me  {
   position:absolute;
   left:-80px;
   top:-6px;
}

#blog-greeting p  {
   margin:0px;
   padding:12px 0 0 0px;
   float:left;
   width:380px;
}

.blog-entry {
   margin:0 145px 30px 0;
   border1:1px solid red;
}

.blog-entry p {
   line-height:150%;
}
.blog-entry p, .blog-entry p *   {
   font-family:'Lucida Grande',Verdana,Arial,Sans-Serif;
}

.blog-entry h4, h4.blog-h {
   margin:0px;
   color:#999;
   font-weight:normal;
   font-size:10px;
}

.blog-entry h1 {
   margin:0 0 10px 0;
}
.blog-entry h1 a {
   text-decoration:none;
   color:black;
}
.blog-entry h1 a:hover {
   color:#555;
}

.blog-entry .blog-content {
   margin:0 0 10px 12px;
}

.blog-entry a.comment-link {
   color:#777;
}

h1.blog-h   {
   margin-bottom:0px;
}
h1.blog-h a  {
   color:black;
   text-decoration:underline;
}
h4.blog-h {
   margin-bottom:10px;
}

.comments .comment {
   margin:0 0 10px 10px;
}
.comments .comment h4  {
   font-size:12px;
}
.comments .comment p  {
   margin:0px;
}

.blog-entry form {
   display:block;
   margin-left:10px;
}

.blog-entry form textarea  {
   display:block;
   width:400px;
   height:80px;
}

.cite, .blog-entry .cite {
   margin-left:50px;
   font-family:Trebuchet MS;
}

ul.blog-ul  {
   margin:0px;
}
ul.blog-ul li {
   line-height:18px;
   font-family:Verdana;
}

#main-1  {
   float:left;
   width:340px;
   margin-right:5px;
}

#main-2  {
   float:left;
   width:150px;
   margin-right:25px;
}
#main-3  {
   float:left;
   width:150px;
}

#main-1, #main-2, #main-3  {
   position:relative;
   height:228px;
}
a.main-bottom  {
   position:absolute;
   color:blue;
   bottom:0px;
   left:0px;
}
ul.rating-on-main    {
   list-style-type:none;
   margin:0;
   padding:0;
   width:100%;
}
ul.rating-on-main li   {
   float:left;
   clear:left;
   width:100%;
}
ul.rating-on-main li.mine  {
   color:#00bb00;
}
ul.rating-on-main li span  {
   font-size:11px;
}

ul.rating-on-main li .num  {
   float:left;
   text-align:right;
   width:17px;
   margin-right:8px;
}

ul.rating-on-main li .user-name  {
   float:left;
   width:80px;
}

ul.rating-on-main li .score  {
   float:left;
   text-align:right;
   width:45px;
}

#main-recommended {
   clear:both;
   float:left;
   width:100%;
   margin:5px 0 5px 0;
}

#main-recommended h1 {
   margin-bottom:5px;
}

#main-recommended a {
   float:left;
   margin-right:2px;
}

#main-recommended a img {
   width:154px;
   float:left;
}

#main-4  {
   float:left;
   clear:left;
   width:340px;
   margin:0 5px 0 0;
}

#news-on-main  {
   list-style-type:none;
   margin-left:40px;
   padding:0px;
}

#news-on-main li {
   position:relative;
   margin-bottom:20px;
}

#news-on-main li .date  {
   position:absolute;
   top:4px;
   left:-40px;
   width:30px;
   font-size:10px;
   color:#666;
}

#news-on-main li a  {
   color:black;
}

#news-on-main li a h2  {
   font-family:Arial;
   font-size:14px;
   font-weight:bold;
   text-decoration:none;
   margin:0px;
   padding:0px;
}

#news-on-main li a p  {
   margin:0px;
   padding:0px;
   text-decoration:underline;
}

#main-5  {
   float:left;
   width:324px;
}

#content p.subscribe  {
   border-top:1px solid #666;
   margin-top:20px;
   padding-top:5px;
}

textarea.html  {
   width:100%;
   height:150px;
}

/* contacts - specific */
form#contacts fieldset {
   border:none;
}
form#contacts fieldset p {
   margin:0 0 15px 0;
}
form#contacts fieldset p label  {
   display:block;
   margin-bottom:2px;
}
form#contacts fieldset p input  {
   width:450px;
}
form#contacts fieldset p textarea  {
   width:450px;
}
form#contacts fieldset button  {
   width:100px;
}