@media screen and (orientation:portrait) {
  body     {font-size: 16px;}
  body > a {font-size: 200%;}
  p        {font-size: 180%;}
  h2       {font-size: 250%;}
  h3       {font-size: 200%;}
  h4       {font-size: 180%;}
  div#prob {
   font-size:175%;
  }
  td   {font-size:140%;}
  a.header  {font-size: 225%;}
  input[type=submit] {height:150%; font-size:180%;}
  .langya {font-size:200%;}
  a.langya {font-size:250%;}

  .col1 {float:left; width:100%; position:relative;}
  .col2 {float:left; width:100%; position:relative;}
  .col3 {float:left; width:100%; position:relative;}

  legend { font-size:180%;}
  table.form {width:100%; font-size:150%; line-height:1.8; }
  table.form td,th {padding:5px;}

  table.catlog_unit_table {width=100%}
  table.catlog_unit_table td {font-size:180%}
  table.catlog_unit_table td:nth-child(1) {width:65%; text-align:left;}
  table.catlog_unit_table td:nth-child(2) {width:20%;}
  table.catlog_unit_table td:nth-child(3) {width:15%;}

  table.chap_unit_table {border-collapse:collapse; width:120%; font-size:150%; line-height:1.8;}

  table.unit_detail_table {border-collapse:collapse;width:100%;}
  table.unit_detail_table td:nth-child(1){ width:70%;}
  table.unit_detail_table td:nth-child(2){ width:15%;}
  table.unit_detail_table td:nth-child(3){ width:15%;}

  table.fancy_table {width:100%; font-size:145%; line-height:1.8;}
  table.fancy_table tr:nth-child(2) {font-size:75%;}


} # end of portrait

@media screen and (orientation:landscape) {

  body {font-size:18px;}
  a    {font-size:160%;}

  .col1 {float:left; width:60%; position:relative;}
  .col2 {float:left; width:60%; position:relative;}
  .col3 {float:left; width:60%; position:relative;}

  table.fancy_table { border-collapse: collapse; font-size:140%;}
  table.fancy_table tr:nth-child(2) {font-size:80%;}

  table.catlog_unit_table {}
  table.catlog_unit_table td {font-size:150%}
  table.catlog_unit_table td:nth-child(1) {width:65%; text-align:left;}
  table.catlog_unit_table td:nth-child(2) {width:20%; font-size:160%;}
  table.catlog_unit_table td:nth-child(3) {width:15%; font-size:160%;}

  table.chap_unit_table {width:100%;font-size:175%;}
}


body {font-size:16px;}
p {
   font-size:120%;
   line-height:1.3; 
}

ul{ 
   line-height:200%;
}

html{font-size:140%;} 
@media(min-width:60em) {
html{font-size: 70%}
}


.col1 {float:left; width:30%; position:relative; margin:20px 5px 50px 20px;}
.col2 {float:left; width:30%; position:relative; margin:20px 5px 50px 10px;}
.col3 {float:left; width:30%; position:relative; margin:20px 5px 50px 10px;}

table.catlog_unit_table {width:100%; max-width:500px;}
table.catlog_unit_table td:nth-child(1) {width:65%; text-align:left;}
table.catlog_unit_table td:nth-child(2) {width:20%; }
table.catlog_unit_table td:nth-child(3) {width:15%; }

div#prob {
   font-size:125%;
}

input[type=submit] {
        height: 140%;
        font-size: 125%;
        color: white;
        background-color:blue;
        border:1px solid transparent;
        padding: 2px;
		padding-top:6px;
        padding-bottom: 6px;
        padding-left:  6px;
        padding-right: 6px;
        border-radius: 5px;
       /* margin = "6px 10px 4px 10px"; */
}
input[type=submit]:hover {background-color:orange;} 

input[type=text]     { font-size:125%; }
input[type=password] { font-size:125%; }

legend { font-size:160%;}

label  { font-size:125%; 
         display:inline-block; 
         padding-top:   4px;
         padding-bottom:4px; 
         padding-left:  5px;
         padding-right: 5px; 
       }
label:hover {background-color:pink; 
	    # border-style: solid pink;
	    }

a:link,  a:visited { color:green; text-decoration:none;}
a:hover, a:active  { color:red;   text-decoration:underline;}
a.header {color:white; text-decoration:underline;}

p.blocktext {margin-left:auto; margin-right:auto}

optgroup { font-size:20px; }

.content {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 10px;
}

.grnbk {color:white;background-color:green;}
.whtbk {color:black;background-color:white;}
.orangebk {color:white;background-color:orange;}
.green {color:green;font-weight:bold;}
.blue  {color:blue;font-weight:bold;}

.correct {color:green;}
.error   {color: #FF0000;}

.rule {font-size:16px;color:orange;background-color:white;}

h2.popup_trigger {text-decoration:underline;}
h3.popup_trigger {text-decoration:underline;}
h4.popup_trigger {text-decoration:underline;}


header {
#    position:fixed;
    top:0;
    left: 0;
    right: 0;
    background-color:#57B6B4;
    color:white;
    text-align:center;
    padding:5px;
}

footer {
    position:fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:#57B6B4;
    color:white;
    clear:both;
    text-align:center;
    padding: 5px;
 #   margin-top: 20px;
}

fieldset.fset {width:100%; max-width:900px;}

table.unit_detail_table {border-collapse:collapse; width:100%; max-width:850px;}
table.unit_detail_table {font-size:160%;}
table.unit_detail_table td:nth-child(1){ width:70%;}
table.unit_detail_table td:nth-child(2){ width:15%;}
table.unit_detail_table td:nth-child(3){ width:15%;}

table.fancy_table {border-collapse: collapse; width: 100%;}
table.fancy_table th	{
    height:   45px;
    font-size:130%;
    color: white;
}
table.fancy_table td    {
    height:   32px;
    border:none;
    padding:  8px 8px 8px 8px;
}
table.fancy_table tr:nth-child(even) {
     background-color: #eee;
}
table.fancy_table tr:nth-child(odd) {
     background-color: #fff;
}

table.chap_unit_table {border-collapse:collapse;width:100%; line-height:2.2; max-width: 900px;}
table.chap_unit_table td:nth-child(1){ width:25%;}
table.chap_unit_table td:nth-child(2){ width:35%;}
table.chap_unit_table td:nth-child(3){ width:8%;}
table.chap_unit_table td:nth-child(4){ width:8%;}
table.chap_unit_table td:nth-child(5){ width:8%;}
table.chap_unit_table td:nth-child(6){ width:8%;}
table.chap_unit_table td:nth-child(7){ width:8%;}
table.chap_unit_table tr:nth-child(odd) {
     background-color: #eee;
}
table.chap_unit_table tr:nth-child(even) {
     background-color: #fff;
}


th.orange_tb  { background-color:orange; }
th.magenta_tb { background-color:magenta; }
th.pink_tb    { background-color:pink; }

table.nbdr td {
     border:none;
}

td,th {
    text-align: center;
}
table#bus { border-collapse: collapse; font-size:16px;}
table#bus th,td {
   border: 2px solid;
   width:75px;
}

table.grades { 
border-collapse: collapse; 
font-size:12px;
}
table.grades th,td {
   border: 2px solid black;
   width:75px;
}
table.grades tr:nth-child(even) {
#     background-color: #eee;
}
table.grades tr:nth-child(odd) {
#     background-color: #fff;
}


table.logger {
border-collapse: collapse;
}
table.logger tr:nth-child(even) {
     background-color: #eee;
}
table.logger tr:nth-child(odd) {
     background-color: #fff;
}

table.form { width:100%; max-width:900px;}
table.form { border:0px;}
table.form th,td { border:none;}
table.form th {text-align:left; font-weight: normal;}
table.form td {text-align:left;}
table.form th:nth-child(1) {width:42%;}
table.form th:nth-child(2) {width:40%;}
table.form th:nth-child(3) {width:18%;}

span.frac {
  display: inline-block;
  font-size: 70%;
  text-align: center;
  position: relative;
  top: 8px;
}
span.frac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac > span {
  display: none;
}
span.frac > sub {
  display: block;
  font: inherit;
}


span.frac_td {
  display: inline-block;
  font-size: 70%;
  text-align: center;
  position: relative;
  top: 2px;
}
span.frac_td > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac_td > span {
  display: none;
}
span.frac_td > sub {
  display: block;
  font: inherit;
}