* {padding: 0; margin: 0; border: 0; box-sizing: border-box;}

@font-face {
    font-family: 'open_sans';
    src: url('font/opensans-light.eot');
    src: url('font/opensans-light.eot?#iefix') format('embedded-opentype'),
         url('font/opensans-light.woff2') format('woff2'),
         url('font/opensans-light.woff') format('woff');
    font-weight: lighter;
    font-style: normal;

}

@font-face {
    font-family: 'open_sans';
    src: url('font/opensans-regular.eot');
    src: url('font/opensans-regular.eot?#iefix') format('embedded-opentype'),
         url('font/opensans-regular.woff2') format('woff2'),
         url('font/opensans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ui';
    src: url('font/ui.eot');
    src: url('font/ui.eot?#iefix') format('embedded-opentype'),
         url('font/ui.woff2') format('woff2'),
         url('font/ui.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ui';
    src: url('font/ui-bold.eot');
    src: url('font/ui-bold.eot?#iefix') format('embedded-opentype'),
         url('font/ui-bold.woff2') format('woff2'),
         url('font/ui-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body {font-family: arial;}

.menu-cont {width: 100%; min-width: 1020px; background: #613376 url(images/bg-menu.png) left bottom repeat-x;}

.menu {width: 1020px; padding: 26px 30px 0 30px; margin: 0 auto;}

.menu .left, .menu .logo {float: left;}

.menu .lang {float: left; font-size: 15px; padding: 9px 0 0 15px ;}

.menu .lang a {color: #c4aacf; text-decoration: none;}

.menu .lang .active {color: #855b98;}

.menu .polfon {color: #ffffff; font-size: 12px; padding: 20px 0 4px 0; font-family: open_sans;}

.menu .items {padding-top: 9px; float: right;}

.menu .items a {color: #ffffff; font-size: 16px; text-decoration: none; margin-left: 35px; float: left; padding-bottom: 47px;}

.menu .items .active {color: #e1cee9; font-weight: bold; background:  url(images/menu-active.png) center bottom no-repeat;}

.menu .items a:hover {color: #e1cee9;}

.path-cont {height: 34px; width: 100%; background:  url(images/bg-path.jpg) center bottom repeat-x;}

.path {width: 1020px; padding: 6px 30px 0 30px; margin: 0 auto; font-size: 12px;}

.path .back {float: right; color: #613376; margin-top: 3px;}

.path span {font-family: open_sans; color: #9d9d9d;}

.path .purple {color: #613376;}

.path .ui {font-family: ui; font-size: 14px;}



.main {width: 960px; margin: 0 auto; font-family: 'open_sans'; font-size: 14px; position: relative;}

.main h1, .main h2 {text-align: left; margin: 30px 0; font-size: 20px; font-weight: normal; color: #613376; text-transform: uppercase;}

.main h3 {font-size: 14px; margin-bottom: 5px;}

.main p {line-height: 20px; text-align: justify; padding-bottom: 15px; font-family: ui;}

.main p a {color: #613376;}

.main ul {list-style-type: none; padding-bottom: 15px;}

.main ul li {margin: 10px 0 10px 20px; text-indent: -20px;}

.main .foto {width: 120px; float: left; margin: 0 20px 20px 0;}


.detail {width: 1020px; margin: 20px auto; display: table; font-family: open_sans;}

.detail .left, .detail .middle, .detail .right {display: table-cell; vertical-align: top;}

.detail .left {width: 207px; background: #e7e1eb; padding: 20px 0 0 30px; position: relative;}

.detail .left h1 {font-size: 60px; margin: 0 0 60px 0; font-weight: normal;} 

.detail .left a {font-weight: bold; font-size: 14px; color: #613376;}

.detail .left .section {font-weight: bold; font-size: 14px; color: #613376; text-decoration: underline;}

.detail .left .testing {position: absolute; font-weight: bold; font-size: 14px; padding: 8px 5px 0 60px; bottom: 25px; left: 25px; color: #fff; text-decoration: none; text-transform: uppercase; background:  url(images/testing.png) left top no-repeat; width: 157px; height: 57px;}

.detail .middle {width: 532px; padding: 20px 45px 0 45px;}

.detail .middle h2 {font-size: 20px; margin: 0 0 20px 0; float: left; line-height: 35px;} 

.detail .middle .teacher {font-size: 16px; float: right; line-height: 35px;} 

.detail .middle .teacher .play img {vertical-align: middle; margin-bottom: 3px;}

.detail .middle .pict {text-align: center; margin-bottom: 20px; font-size: 12px;}

.detail .middle .pict img {width: 100%;}

.detail .middle p {text-align: justify; margin-bottom: 20px; font-size: 14px; font-family: 'open_sans';} 

.detail .right {width: 280px; background: #fafafa; padding: 20px 0 0 0;}

.detail .right h3 {text-align: center; color: #613376; font-size: 24px; font-weight: normal;}

.detail .right h4 {color: #613376; font-size: 16px; margin-bottom: 15px;}

.detail .right .word {width: 180px; margin: 0 auto; font-size: 14px; line-height: 20px;}

.detail .right .word .play {float: right;}

.detail .right .next {text-align: center; margin-bottom: 20px;}

.detail .right .next a {text-decoration: none; color: #613376; font-size: 18px;}

.detail .hr {height: 2px; width: 85%; margin: 25px auto; background:  url(images/bg-hr.png) left top repeat-x;}

.play {cursor: pointer;}

.play:hover {opacity: 0.7;}

.ui {font-family: ui;}

.example {border-spacing: 20px;}

.example .left {width: 120px;}

.example .right .word {width: auto; padding: 0 35px;} 


.table-cont {width: 1020px; margin: 35px auto;}

.table-cont h2 {font-size: 20px; font-style: italic; color: #613376; text-transform: uppercase; font-weight: normal; padding: 10px 0 0 30px;}

.table-cont h3 {font-size: 20px; color: #613376; font-weight: normal; padding: 0 0 15px 0; text-align: center;}

.table-cont .ipa-sa {font-size: 14px; color: #613376; margin-right: 25px; font-weight: bold; padding-top: 13px; text-decoration: none; border: 1px solid #f5f5f5; height: 44px; width: 270px; text-align: center; float: right; display: block;}

.table-cont .ipa-sa:hover {background: #fcfcfc;}

.table-cont .active {background: #f5f5f5;}

.table-cont .table {background: #f5f5f5; padding: 35px 30px 20px 30px;}

table {width: 960px; background: #fff; margin: 0 auto; font-size: 14px; border-collapse: collapse; border-spacing: 0; overflow: hidden;}

div.vow, div.dift {float: left; width: 500px;}

div.vow table, div.dift table {width: 100%;}

table.oral .col-1a, table.nasal .col-1a {width: 120px;}

.col-2a {width: 80px;}

div.dift {width: 440px; margin-left: 20px;}

table tr {height: 41px;}

.orto {font-family: ui;}

.orto tr {height: 30px;}

table th, table td {text-align: center; border: 1px solid #a49da7;}

table td {width: 38px;}

table td a {text-decoration: none; font-size: 23px; font-family: ui; color: #a16dcd; display: block; width: 100%; height: 41px; line-height: 41px;}

table td a.primary {color: #470381;}

table th {color: #613376; background-color: #f6f3f7; padding-left: 10px; border-left-width: 0;}

table .top th {padding: 0; background: transparent; font-size: 14px;}
                                                      
table .col-1 {width: 124px;}

table .no-border {border-left-width: 0; border-top-width: 0; border-bottom-width: 0;}

table td:not(:empty):hover {background-color: #c9b9d0;}

table .pozadi {background-color: #c9b9d0;}

.show {padding: 20px 0 0 10px; font-size: 14px; color: #969596;}

.show a {color: #969596; }

.show .tip {font-style: italic; float: right; background:  url(images/tip.png) left 1px no-repeat; padding: 2px 0 2px 50px; text-align: right;}

.show .tip span {font-style: normal;}

.show .green {color: #470381;}

.show .black {color: #a16dcd;}

.popplay {display: none; position: absolute; width: 38px; height: 19px; }

.popplay a {cursor: pointer;}

.popplay a img {display: block;}


form input[type="submit"] {cursor: pointer; padding: 15px 20px; margin: 5px; background: #613376; color: #fff; font-size: 15px; font-family: 'open_sans'; outline: none; font-weight: bold;}

form input[type="checkbox"], form input[type="radio"] {margin: 0 5px 0 25px;}

form.set h3 {width: 250px; float: left;}

form.set div {margin: 10px 0; line-height: 22px;}

form .flleft, form .fllefta {float: left; margin: 0; width: auto;}

form .fllefts {float: left; width: 200px; text-align: center;}

form .flright  {float: right;}

form.set h2 {margin-top: 0;}

form.cviceni {min-height: 350px;}

form.cviceni .fllefta {width: 760px;}

form.cviceni .quest {margin: 10px 0; font-size: 20px;}

form.cviceni .bigquest {font-size: 35px; width: 60px; height: 60px; text-align: center; line-height: 60px; border: 1px solid #000; float: left;}

form.cviceni .bigquest div {font-size: 14px; line-height: 20px;}

form.cviceni .bigquest div input {margin-left: 5px;}

form.cviceni .w250 {width: 260px; padding-left: 20px;}

form.cviceni .w500 {width: 500px; padding-left: 20px;}

form.cviceni .bigquest {margin: 10px;}

form.cviceni .schema {width: 30%; float: left; text-align: center;}

form.cviceni .schema img {max-height: 200px; max-width: 100%;}

form .key {padding: 10px; border: 1px solid #000; outline: none; font-size: 18px; font-family: ui;}

form {margin: 60px 0 20px 0; font-family: ui;}

form label, .right-answer span, .your-answer span {font-family: ui; font-size: 16px;}

input[type="text"] {line-height: 24px; font-size: 16px;}

.topright {display: none; position: absolute; top: 220px; width: 160px; float: left; border: 2px solid #613376; margin-bottom: 20px; padding: 20px;}

.answers {display: none; clear: both; padding-top: 20px;}

.right-answer, .your-answer {margin: 10px 0;}

.right-answer .schema, .your-answer .schema {max-height: 250px;}

.result .red {color: red; font-size: 18px;}

.result .green {color: green; font-size: 18px;}

.result .purple {color: #613376; font-size: 18px;}

#keyboard {padding: 5px; background: #fff; box-shadow: 0 2px 7px 0 rgba(0,0,0,.5); position: absolute; right: 0; top: 250px; border-radius: 3px; display: inline-block; width: auto;}

.row {margin: 3px 0;}

.clear {clear: both;}

.row .nothing {display: inline-block; float: left; width: 32px; height: 35px; margin: 0 3px;}

.row .text {display: inline-block; float: left; width: 108px; height: 35px; margin: 0 3px; line-height: 35px; text-align: right;}

button {position: relative; float: left; width: 32px; height: 35px; background: #EEE; border-radius: 4px; border: none; border-bottom: 3px solid #CCC; margin: 0 3px; padding: 0; font-family:  ui; font-size: 18px; color: #333; overflow: hidden; cursor: pointer; outline: none;}

button:hover {box-shadow: 0 0 2px 2px #1c94c4; transition: box-shadow .3s ease;}

button.clicked {position: relative; height: 33px; top: 2px; border-bottom: 1px solid #CCC;}




.footer {width: 100%; min-width: 1020px; height: 114px; text-align: center; background:  url(images/bg-footer.jpg) left top repeat-x;}

.footer a {margin-top: 30px; display: inline-block;}


.left {text-align: left;}

.center {text-align: center;}

.clear {clear: both;}