/*Общме настройки для всех дизайнов */
p         {text-align: justify; 
           text-indent: 2em; 
           margin-bottom: 0pt; margin-top: 0pt;}
p.button  {text-align: center;
           text-indent: 0}
span.roman{text-decoration: underline overline;
	   font-family: arial; letter-spacing: 0px;}
span.hint {text-decoration: none;
           border-bottom: 1px dashed}
a         {margin-top: 6pt; margin-bottom: 6pt}
div.largeTable {
           overflow-x: auto;
          }

ul	  {margin-top: 0pt}
li	  {text-align: justify; margin-top: 6pt}
h1        {text-align: center}
h2        {text-align: center}
code	  {font-size: 125%}

dt.narrow  {margin: 0.7pt;}
dd.narrow  {margin: 0.7pt;}
ul.narrow li  {margin: 0pt;}

dt	  {font-weight: bold; float: left; margin-right: 1em;}
dt:after  {content: ': '}
dd	  {text-align: justify;
	   text-ident: 2em;
	   margin-left: 0px; margin-bottom: 6pt}

table     {text-align: justify}
th        {vertical-align: center; text-align: center}

@media screen and (min-width: 981px) {
/* Для тех, у кого компьютер:
дизайн в три колонки
ремарки в тексте по правому краю */
div#main {max-width: 1024px; margin: 0px auto;}
div#nav  {display: none}
div#menu {width: 15em;
          vertical-align: top;
          float: left;
          word-break: normal;
         }
div#content {
          vertical-align: top;
          max-width: 700px;
          margin-left: 16em;
          padding: 0.5em;
         }
div#rightmenu {
          float: right;
          min-width: 10em; max-width: 15em;
          vertical-align: top;          
          border-radius: 0pt 6pt 6pt;
         }
.remark,div.remark
	  {float: right;  
	   max-width: 300px; margin-left: 1em; margin-right: 0.5em;
	   padding: 5px; font-size: 90%;
	   text-align: justify;
           border-radius: 6pt;
          }
#photoResizer
          { display: block;
          }

}

@media (min-width: 480px) and (max-width: 979px) {
/* У кого планшет или горизонтальный телефон, для тех
дизайн в одну колонку
ремарки прижаты к правому краю */
div#main {width: 100%; padding: 0px;
          margin: 0px auto;}
div#nav  {display: block}
div#menu {width: 100%;
          float: none;
          word-break: normal;
          vertical-align: top;
          display: none;
         }
div#content {
          vertical-align: top;
          width: 100%;
          margin-left: 6em;
         }
div#rightmenu {
          float: none;
          width: 100%;
          vertical-align: top;          
          border-radius: 6pt;
         }
.remark,div.remark
	  {float: right;
	   max-width: 300px; margin-left: 0.5em; margin-right: 0.5em;
	   padding: 0.5em; font-size: 90%;
	   text-align: justify;
           border-radius: 6pt;}
img {max-width: 100%;}
div.largeTable {
           border: black 1px solid;
          }
#photoResizer
          { display: none; }
}

@media screen and (max-width: 479px) {
/* У кого мобильное устройство дизайн в одну колонку
Ремарки на всю ширину, отделяются отсупом сверху*/
div#main {width: 100%; padding: 0px;
          margin: 0px auto;}
div#nav  {display: block}
div#menu {width: 100%;
          float: none;
          word-break: normal;
          vertical-align: top;
          display: none;
         }
div#content {
          vertical-align: top;
          width: 100%;
         }
div#rightmenu {
          float: none;
          width: 100%;
          vertical-align: top;          
          border-radius: 6pt;
         }
.remark,div.remark
	  {float: none;
	   width: 95%; margin-left: 0.5em; margin-right: 0.5em;
           margin-top: 2ex;
	   padding: 0.5em; font-size: 90%;
	   text-align: justify;
           border-radius: 6pt;
          }
img {max-width: 100%;}
div.largeTable {
           border: black 1px solid;
          }
#photoResizer
          { display: none; }
}