body { 
background-color : #fff; 
font-family : Helvetica; 
font-size : 14px; 
margin : 0; 
padding : 0; 
} 
#bwrdd { 
display : block; 
min-width : 0; 
font-family : Helvetica; 
font-size : 24px; 
font-weight : 400; 
padding : 0; 
margin : 10px 0 0 10px; 
} 
td#arChwith { 
text-align : left; 
width : 20%; 
} 
td#ynCanol { 
text-align : left; 
width : 20%; 
color : red; 
} 
td#arDde { 
text-align : left; 
width : 60%; 
padding-left : 1.2rem; 
} 
h3 { 
text-align : center; 
} 
li { 
font-size : 1rem; 
list-style : none; 
font-weight : 500; 
padding-bottom : 1.4rem; 
} 

.pinYin { 
cursor : pointer; 
} 
.ideogram { 
cursor : pointer; 
} 
.oDan { 
text-decoration : underline; 
font-weight : 500; 
} 
.level { 
font-size : 90%; 
font-weight : 600; 
border : #ccc solid 1px; 
border-radius : 0.25em; 
padding : 1px 3px; 
} 
.melyn { 
color : yellow; 
} 
.gwyrddGolau { 
color : #eee; 
} 
.hlGG { 
font-weight : 600; 
background-color : #eee; 
} 
.hl { 
font-weight : 600; 
} 
.gwyrdd { 
color : gray; 
} 
.faded { 
font-size : 14px; 
color : silver; 
} 
.leinODan { 
text-decoration : underline; 
} 
.itlc { 
font-size : 20px; 
font-style : italic; 
} 

.inModal {
font-size: inherit;
padding-bottom:10px;
}


#rllun {
position: relative;
display:none;
left: 10px;
top:20px;
}

#llun{
height: auto;/*pwysig*/
max-width: 100%;/*pwysig*/ 
}


/*NEWIDION I DESTIO:
OS YDWI YN NEWID CHWITH A DDE I RELATIVE, MAE Y DDE O DAN Y CHWITH, AG AR Y DDE
*/


#cw1 { 
position : absolute; 
top : 30px; 
left : 10px; 
font-size : 17px; 
font-weight:600;
line-height:1.4rem;
} 

#chwith { 
position : absolute; 
top : 100px; 
left : 0; 
} 
#dde { 
position : absolute; 
top : 100px; 
left : 140px; 
} 
#atebion { 
background-color : #fff; 
color : #222; 
font-family : Helvetica; 
font-size : 16px; 
padding-left : 25px; 
} 
#ndech { 
position : relative; 
top : 20px; 
left : 30px; 
font-size : 17px; 
font-weight : 600; 
color : blue; 
display : block; 
text-align : left; 
cursor : pointer; 
} 
#ndech2 { 
position : relative; 
top : 50px; 
left : 30px; 
font-size : 17px; 
font-weight : 600; 
color : blue; 
display : block; 
text-align : left; 
cursor : pointer; 
} 
#ndech3 { 
position : relative; 
top : 80px; 
left : 30px; 
font-size : 17px; 
font-weight : 600; 
color : blue; 
display : block; 
text-align : left; 
cursor : pointer; 
} 
/*Efo steil arall, mond without timer ag y ddau timer (90/120), rhaid rhoid padding-bottom 3 rem yn fyma, ag mae na ddim ndech4. Ella fod margin-bottom yn well*/ 

#ndech4 { 
position : relative; 
top : 110px; 
left : 30px; 
font-size : 17px; 
font-weight : 600; 
color : blue; 
display : block; 
text-align : left; 
cursor : pointer; 
padding-bottom : 3rem; 
} 


#n3 { 
position : relative; 
top : 250px; 
left : 60px; 
font-size : 19px; 
font-weight : 600; 
color : blue; 
display : none; 
text-align : left; 
cursor : pointer; 
} 



#adref { 
visibility : hidden; 
} 
#expLi { 
visibility : hidden; 
} 
#htLi { 
visibility : hidden; 
} 
#tooLate { 
position : absolute; 
left : 40px; 
top : 100px; 
font-size : 22px; 
font-weight : 300; 
color : black; 
text-align : center; 
display : inherit; 
cursor : pointer; 
} 
#rdech { 
position : absolute; 
left : 10px; 
top : 0; 
display : block; 
background-color : #fff; 
color : #000; 
font-family : Helvetica; 
font-size : 16px; 
margin : 5px 10px 10px 5px; 
} 
#r1 { 
position : relative; 
display : none; 
color : #222; 
font-family : Helvetica; 
font-size : 16px; 
padding-bottom:40px; 
margin : 10px 0 0 0; 
height : 90%; 
width : 95%; 
} 

#r11 { 

position : relative; 
display : none; 
font-size : 16px; 
left : 20px; 
top : 50px; 
height : 90%; 
width : 90%; 
font-weight : 600; 
} 

#fb { 
position : relative; 
top : 15px; 
left : 3px; 
font-weight : 400; 
visibility : hidden; 
background-color : #eee; 
padding : 5px 5px 5px 5px; 
z-index : 2; 
} 

#eto { 
position : relative; 
top : 40px; 
width : 100%; 
font-size : 19px; 
font-weight : 600; 
color : blue; 
visibility : visible; 
text-align : center; 
cursor : pointer; 
padding-bottom:3rem;
} 
/*DIM YN CAEL EI DDEFNYDDIO*/
#cauFF { 
position : relative; 
top : 25px; 
width : 100%; 
font-size : 17px; 
font-weight : 500; 
color : gray; 
visibility : visible; 
text-align : center; 
}
/*DDIM YN SIWR FOD O YN CAEL EI DDEFNYDDIO*/
#n1 { 
position : absolute; 
top : 130px; 
left : 130px; 
font-size : 25px; 
font-weight : 600; 
color : blue; 
visibility : hidden; 
text-align : right; 
cursor : pointer; 
} 

/*DIM YN CAEL EI DDEFNYDDIO YN CWYS FATH YMA, OND CADW -- ELLA POSIB DEFNYDDIO YN Y DYFODOL*/
#llePeek { 
position : absolute; 
top : 130px; 
left : 30px; 
font-size : 25px; 
font-weight : 600; 
color : silver; 
visibility : hidden; 
text-align : right; 
} 

#dangosSgor { 
position : relative; 
top : 40px; 
text-align : center; 
display : inherit; 
font-size : 20px; 
font-weight : 600; 
color : gray; 
} 

#score { 
position : absolute; 
left : 175px; 
top : 300px; 
text-align : right; 
display : inherit; 
font-size : 18px; 
font-weight : 400; 
color : gray; 
} 

#quickPeek { 
position : absolute; 
left : 100px; 
top : 300px; 
text-align : center; 
display : block; 
font-size : 20px; 
font-weight : 600; 
color : gray; 
cursor : pointer; 
} 

/*DIM YN CAEL EI DDEFNYDDIO YN CWYS FATH YMA, OND CADW -- ELLA POSIB DEFNYDDIO YN Y DYFODOL*/
#tic { 
position : absolute; 
left : 265px; 
top : 120px; 
width : 40px; 
height : 30px; 
visibility : hidden; 
} 

/*DIM YN CAEL EI DDEFNYDDIO YN CWYS FATH YMA, OND CADW -- ELLA POSIB DEFNYDDIO YN Y DYFODOL*/
#croes { 
position : absolute; 
left : 265px; 
top : 120px; 
width : 40px; 
height : 30px; 
visibility : hidden; 
} 

#bwrdd { 
display : inherit; 
} 

#sut { 
position : relative; 
top : 10px; 
left : 10px; 
display : inherit; 
font-size : 1rem; 
color : gray; 
} 

#timeMeButton { 
position : absolute; 
left : 10px; 
top : 380px; 
text-align : left; 
visibility : visible; 
font-size : 12px; 
font-weight : 400; 
color : red; 
cursor : pointer; 
} 

#timeMeMessage { 
position : absolute; 
left : 100px; 
top : 380px; 
text-align : left; 
visibility : visible; 
font-size : 12px; 
font-weight : 400; 
color : red; 
cursor : pointer; 
} 

/*O'r cwys pinyin ideograms, ond defnyddio yma i ddangos tudalen adref*/
#noEngEqu { 
/*position : relative; 
top : 0px; 
left : 50px;*/ 
font-size : 12px; 
color : blue; 
visibility : visible;
margin-top:-30px;
margin-bottom:25px; 
} 

#lleAtbAngh { 
position : absolute; 
left : 5px; 
top : 300px; 
text-align : left; 
visibility : visible; 
font-size : 20px; 
font-weight : 400; 
color : red; 
cursor : pointer; 
} 

#showError { 
position : absolute; 
left : 200px; 
top : 300px; 
text-align : left; 
visibility : visible; 
font-size : 20px; 
font-weight : 400; 
color : red; 
} 

#modal { 
display : none; 
position : absolute; 
left : 0; 
top : 0; 
width : 100%; 
height : 100%; 
} 

#modalMask { 
position : absolute; 
left : 0; 
top : 0; 
width : 100%; 
height : 100%; 
background-color : #eee; 
z-index : 1000; 
opacity : 0.89999997615814208984375; 
} 

#modalContent { 
position : relative; 
width : 280px; 
margin : 15px auto; 
padding : 15px; 
background-color : #fff; 
border : #000 solid 1px; 
text-align : justify; 
z-index : 9999; 
color : #003; 
} 

@media all and (min-width:720px) { 

body { 
font-size : 90%; 
width : 50%; 
margin : 0 auto; 
line-height : 1.75em; 
font-weight : 400; 
} 

#rllun {
left: 20px;
}

#ndech { 
top : 60px; 
left : 150px; 
font-size : 24px; 
} 
#ndech2 { 
top : 100px; 
left : 150px; 
font-size : 24px; 
} 
#ndech3 { 
top : 140px; 
left : 150px; 
font-size : 24px; 
} 
/*hon mond efo cwys 4 dewis*/
#ndech4 { 
top : 180px; 
left : 150px; 
font-size : 24px; 
} 

#dal { 
position : relative; 
} 

#cw1 { 
font-size : 1.4rem; 
line-height:2rem;
} 
#r1 { 
font-size : 24px; 
} 
li { 
font-size : 1.4rem; 
padding-bottom : 2rem; 
} 
#chwith { 
top : 120px;    
padding-top : 2ex; 
} 
#dde { 
top : 120px;    
padding-top : 2ex; 
left : 240px; 
} 
#timeMeButton { 
left : 10px; 
top : 500px; 
} 

#timeMeMessage { 
position : absolute; 
left : 150px; 
top : 500px; 
} 
#noEngEqu { 
/*
top : 0px; 
left : 250px; */
font-size : 18px; 
color : blue; 
} 
}