/* Main style sheet for Lao Script website */

/* Use SengBuhan Regular as default Lao font */
@font-face {  
  font-family: 'Sengbuhan';
  src: url('/common/sengbuhan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html {min-height:100vh;}/* Not sure why? Perhaps to ensure footer at bottom of screen? */

/* Common page style non-Lao text font */
html * {font-family: "Open Sans"; }
 
body { 
	margin:0 auto; max-width:1024px; 
	border-left: 1px solid #ccc; border-right: 1px solid #ccc;
	color: navy;
  background-color:#f0f0ff;
  height:100%;  
  padding-bottom:1em;
}

.centred {text-align:center;}

/* Banner and menu styles */  
div#menu {position:fixed; margin: 0 auto; top:0; width:100%; max-width:1024px;z-index:3;opacity:100%; border-left:none; border-right:none;} 


.mobile div#menu {margin: 0;} 

.left {float: left;}
.right {float: right;}
.lao {font-family: Sengbuhan, Saysettha;}

img.left {margin-right:16px;}
img.right {margin-left:16px;}

div#tophead {height:2em; background-color:#0000a0; padding: 1em 3%; overflow-y:hidden; }  
div#tophead  p.left {font-size:1.6em; color:#ffffff; 
	font-family: Verdana,Arial,Swiss,sans-serif; font-weight: normal; margin: 2px 0; }
div#tophead p.right {font-size:2em; color:#ffffff; margin: 0; position:relative; top:-0.25em;}

div#tophead img {width:2em; border: 2px solid #d00; border-radius: 8px;}

.mobile div#tophead {padding:4px;height:1.2em;}
.mobile div#tophead img {max-width:1em;margin-right:2px;}
.mobile div#tophead p.left {font-size:0.8em;}
.mobile div#tophead p.right {font-size:1em;margin-top:0.1em;}

/* Hide extra title on phones and tablets */
p span.extratitle {font-family:inherit; }
.mobile p span.extratitle {display:none;}

/* Or if using a smaller window on a desktop */
@media screen and (max-width: 750px) {  
  span.extratitle {display:none;}
}

button.disabled {color:#888;}

div#pagesMenu {height:1.8em; background-color:#ffe; padding-top:0.25em; border-bottom: 1px solid #888; clear:right; margin: 0;} 
div#pagesMenu p {font-size:1.1em; font-weight:bold;color:#800; margin:0 1em; cursor:pointer;font-family: Calibri,helvetica,sans-serif;float:left;}
div#pagesMenu p:hover {color:#0000ff;text-decoration:underline;}
div#pagesMenu p:last-child {float:right;}

div#pagesMenu p#menuhdr {font-style:italic;}

/* Use a vertical menu for phone in portrait mode */
@media screen and (max-width: 481px) {
.mobile div#pagesMenu {height:auto; background-color: #ffe;padding-top:0em;}
.mobile div#pagesMenu p {margin:0; float:none; text-decoration:underline; font-size: 1.2em;font-weight:bold;border-bottom:1px solid #88c;padding:0.5em 2.5em;}
}

div #menuMask {position:fixed; height:100%; width:100%; background-color: #808088; display:none; opacity:0.80;}

/* Footer styles */
table.footer {position:relative; left:0; bottom:0; width: 100%; border:none; border: none; max-width:1024px; margin-top:0.5em;background-color:inherit; opacity:1.0;}
table.footer th, table.footer td {border: none;}
table.footer p {margin:0; padding:0;font-size:12px;}
table.footer p:last-child {margin:0.25em 0;}

.mobile table.footer p {margin:0; padding:0;font-size:0.5em;}

@media screen and (max-width:481px) { 
  .mobile table.footer p {font-size:0.7em;}
}

/* Main story default styles */
div#story {width:inherit; padding: 7em 3% 0;margin-top: 0;}
div#story.framed {padding-top:0; margin-top:0;}

div#story table.footer {margin:auto;}
.mobile #story {width: inherit; padding: 2em 0 0; margin:0.5em;}

h2 {font-size: 1.6em; font-weight: bold; font-style: italic; color: #a00; margin: 0.5em 0 0.25em;}

.mobile h2 {font-size:1.2em; margin: 0.5em 0 0;}

h3 {font-size:1.4em; font-weight: normal; font-style: italic; color: #a00; margin: 0.5em 0.5em 0.1em; }

.mobile h3 {font-size:1.2em;}

.intro {font-size:1.1em; margin:0 2em 0.5em; text-align:justify; }
.intro span {font-weight:bold;}

.mobile p.intro {font-size: 1em; margin: 0.5em 1em; }

.mobile h3 + p.intro {margin-top:0;}

#story h3 + table { margin-top:0.4em}
.mobile h3 + table {margin-top:0.1em;}

.red {font-weight:bold; font-style: italic; color: red;}

p.advice {padding:0.5em; margin: 0 4em; border:3px double red; font-style:italic; font-size:1.1em;}

/* User guide styles */
iframe.guide {position:relative; left: -1px;height:74vh;width:100%; margin:0.25em 0 0 0; max-width:1024px; border:none; border: 1px solid #bbb; padding-bottom:2px;}

div.ug table {margin-left:20px; padding: 10px; background-color: #d8e0f6; border: 1px solid darkred; padding-right: 5em;}

.mobile div.ug  table {margin-left:0; padding-right: 0;}

.ugmenu1 {padding-left: 4px;}
.ugmenu2 {padding-left: 28px; text-indent: -12px;}
.ugmenu3 {padding-left: 40px; text-indent: -12px;}

.ug .ugmenu3 a {font-weight: normal;}

div#caveat {border:2px solid navy; color:white; background-color:#c44;padding:0 1em; margin:1em 1em; font-size:1.1em;}

table.features {width:90%; margin-top:1em; margin-left:5%; border: 2px solid #aaa; border-collapse:collapse;}
table.features th, table.features td, table.downloads th, table.downloads td  {border: 1px solid #bbb; padding:6px;}
table.features ul {margin-top:0; margin-bottom:0;}
table.features td.para {padding-left: 2em; text-indent: -1.5em;}
table.features th img {width:1em;}

table.features tr.hdr th {font-style: italic; padding: 2px; font-size:1.1em; color: #800; border-bottom: 2px solid #aaa;}
table.features b {color:#800;}


table.downloads {width:90%; margin-top:1em; margin-left:5%; border: 2px solid #aaa; border-collapse:collapse;}
table.downloads tr.captions {font-size:1em;font-style:italic; color:#a00; text-align:left;}
table.downloads td  {vertical-align:middle;}

table.downloads td p {margin-top:0; margin-bottom:0.2em; padding-top:0; margin-left:1em;}
table.downloads th p {padding:0; margin:0; font-size:0.8em;}

table.downloads td img  {width:16px;position:relative; top:2px;left:0;}

table.downloads td.img {text-align:center; vertical-align:middle; width:32px; padding:0;} 
table.downloads td.fn {font-size:0.8em; white-space: wrap; word-break: break-word;word-wrap:anywhere; width:20%;position:relative; top:-4px;left:0 }
table.downloads td.fn img {position:relative; top:5px;left:0;margin-right:4px;}

table.downloads .nrb {border-right:none;}
table.downloads .nlb {border-left:none;}

.mobile table.downloads tr td.fn a {pointer-events:none;}

.mobile table.downloads th img  {width:50%; max-width:64px;}

a.userguide:link {text-decoration: none; color: darkred}
a.userguide:visited {text-decoration: none; color: darkred}
a.userguide:active {text-decoration: none; color: darkred}
a.userguide:hover {text-decoration: underline; color: red}

div#story div.ugright {text-align:center;}
div#story div.ugleft {text-align:center;}
div#story div.ugclear {clear:both;}

div#story div#ls8menu {width:32px; height:24px; position:fixed; background-color:#00000000; display:block; top:44px;right:0px;
font-weight:bold; }
div#story div#ls8menu img {position:absolute; display:block; }

div#story div table.menu th {vertical-align:top;}
.mobile div#story div img {max-width:100%; margin:0;}
.mobile div#story div table {max-width:100%;margin: auto;}

body.mobile div#story img,
body.mobile div#story table {max-width:100%;margin:auto;}


#story.framed h2 {margin: 1em 0.75em 0.25em;}
#story.framed h3 {margin: 0.5em 1em 0.25em;}
#story.framed p {font-size:1.1em; margin:0 2em 0.25em; }
#story.framed ul {font-size:1.1em; margin:0 0 0 1em; }


/* Classes used in FAQ pages */
div.faq {margin-bottom:2em;}
div.faq h2 {margin-left:0.5em; margin-top:0; padding-top:0.5em;}
div.faq h4 {margin-left:1em; font-size:1.2em; margin-bottom:0.2em; padding-bottom:0;margin-top:0.5em;}

div.faq ul  {margin-left:1em; font-size:1.05em;}

span.lsw {font-style: italic; font-weight: bold; color: navy}
span.ms {font-style: italic}

/* FAQ contents page styles */
div#story div.faqindex div.faq table tbody tr td:first-child {width:36px;min-width:36px;}

/*.mobile div.faqindex {font-size:2em;}*/
div#story div.faqindex a img {width:32px; height:32px; }

.mobile div#story div.faqindex div.faq h4 {margin: 0.5em 0.5em 0;}
div#story div.faqindex div.faq table {margin:0 2.5em;}
.mobile div#story div.faqindex div.faq table {margin: 0 1em;}

.code {margin: 0 6em; color:#600; font-weight:bold; background-color:#ffe; border:1px solid #ccc;}


.contact {width:80%; max-width:640px; margin:1em auto; font-size:1.2em;}

.contact input, .contact textarea {width:100%;font-size:1.2em; padding:0;}

.g-recaptcha {min-width:6em; width:6em; font-size:1.2em; color:#c00;}

.contact.user_error .prompt, .contact.msg_not_sent .prompt {color:#ff0000; font-style:italic;}
.contact.start_msg .sent, .contact.user_error .sent {display:none;}
.contact.msg_sent .fill, .contact.msg_sent .label, .contact.msg_sent .action {display:none;}
.contact.msg_not_sent .label, .contact.msg_not_sent .fill, .contact.msg_not_sent .sent, .contact.msg_not_sent .action {display:none;}
  
.contact p {margin-top:0;padding-top:0;}
.contact p.label {font-style:italic; margin-bottom:0; padding-bottom:0; font-weight:bold;}

.contact p.prompt {margin-bottom:0.5em; padding-bottom:0;}
.contact p#retry {display:none; color:#c00; font-style:italic; padding-top:0; margin:0;}

.contact p.action {width: 100%; text-align:center;}
.contact p.action input {font-weight:bold; font-size:1.2em; color:#a00; margin:1em auto; }

body.response table.footer {position:absolute;}

table#history {margin:0.5em 1.5em;}
table#history tr:first-child th {border-bottom: 1px solid #ccf;padding-bottom:4px;}
table#history tr:nth-child(2) td {padding-top:6px;}

table#history tr:first-child th:first-child {text-align: left;}
table#history  tr.red {color:#c00; font-weight:bold;}

/*table#history td:first-child:before {content:'* ';}*/
table#history td:last-child {min-width:5em;}


table.actform td {font-size:1.1em;}
table.actoform td li {font-size:1em;}
table.actform td ul {padding:0.2em 1em; margin:0 1em;}


a:link            { font-weight: bold; color: #002797 }

a:visited         { font-weight: bold; color: #600040 }

a:hover           { font-weight: bold; color: #2020FF }


a.sitemap:link    { font-weight: bold; color: #800000; text-decoration: none}

a.sitemap:visited { font-weight: bold; color: #600040; text-decoration: none }

a.sitemap:hover   { font-weight: bold; color: #2020FF; text-decoration: none }

/* Page-specific styles */
.home p {font-size:1.1em; margin:0 2em 0.5em; text-align:justify; }
.home p span {font-weight:bold;}

.mobile .home p {font-size: 1em; margin: 0.5em 1em; }
.mobile .home h3 + p {margin-top:0;}

.home #pagesMenu p:nth-child(1),
	.otr  #pagesMenu p:nth-child(2), 
	.dll  #pagesMenu p:nth-child(3), 
	.about #pagesMenu p:nth-child(5) {color:#f00; cursor:default;}
	
.home #pagesMenu p:nth-child(1):hover,
	.otr #pagesMenu p:nth-child(2):hover,
	.dll #pagesMenu p:nth-child(3):hover,
	.about #pagesMenu p:nth-child(5):hover {text-decoration:none;}

/*
.otg * {hyphens:auto;}
.otg .r {color:#c00;}
.otg .g {color:#080;}
.otg .b {color:#008;}
.otg .m {color:#c0c;}
.otg .o {color:#f80;}
.otg .btn {font-weight:bold; padding:0 0.25em; border: 1px solid gray;border-radius:4px; box-shadow:1px 1px gray;}

.otg p {font-size:1.1em; margin:0 2em 0.5em; text-align:justify; }
.otg p.centred {text-align:center;}
.otg ul, .otg ol {font-size: 1.1em; margin:0 3em 0.5em 1.5em; text-align:justify;}
*/