body {
   margin:300px 0px 0 0px;
   padding:0;
   font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
   font-size:16px;
   color:#4a4a4a;
   background-color:#fff9e6;
}
/* ============================= szkielet strony ============================== */
div.tlo { position:fixed; z-index:2; height:1024px; width:1024px; left:0px; top:0px; background:transparent url("../obrazy/tlo.svg") no-repeat; }
div.b_m { position:absolute; z-index:3; height:156px; width:200px; left:12px; top:6px; background:transparent url("../obrazy/bermar_uc.png") no-repeat;}
div#strona { z-index:10; position:relative; margin:30px 20px; padding:25px; border-radius:7px; box-shadow:1px 1px 8px #969696; background-color:#f9f6eb; }
div.ramka  { border:1px solid #969696; border-radius:5px; padding:1rem; min-height: 25rem;}
div#stopka { z-index:1; position:relative; width:100%; border-bottom:1px solid #969696; border-top:1px solid #969696; height:30px; background:#bfbfbf; padding-top:7px; text-align:center; font-size:9pt; color:#515151; box-shadow:0px 0px 18px #969696;}
div#stopka>img { position:relative; bottom:-4px;}

/* ==================================== menu =================================== */
div._12    { position:absolute; z-index:6; top:40px; left:207px; height:110px; width:367px; }
div._13    { position:absolute; z-index:9; top:40px; left:574px; height:110px; width:180px; }
div._12>h1,
div._13>h1 { padding:0 0 0 30px; margin:4px 0 0 0; font-size:26px; color:#8f0000; border-bottom:1px solid #8f0000; text-shadow: 1px 1px 8px #969696; }
div._12>h2 { padding:0 0 0 15px; margin:4px 0 0 0; font-size:16px; color:#007575; }
div._13>h2 { padding:0 0 0 10px; margin:4px 0 0 0; font-size:16px; color:#007575; border-left:1px solid #8f0000; }

div.pole {
   position:absolute;
   height:70px;
   width:180px;
   border:0px solid #8f0000;
   box-shadow:1px 1px 8px #969696;
   border-radius:5px;
   font-size:24px; text-align:center; padding-top:40px; color:#969696;
}
div._21 { z-index:3; top:166px; left:20px;  }
div._22 { z-index:3; top:166px; left:206px; }
div._23 { z-index:3; top:166px; left:392px; }
div._24 { z-index:3; top:166px; left:578px; }
div.pole:hover,div._x { background-color:#8f0000; color:#ffffb3; border-color:#5c0000; }
div._x  { z-index:1; }

/* ================================ opis firmy ================================= */
div.bermar { position:absolute; z-index:101; width:350px; height:300px; left:2.5rem; top:27rem; background:transparent url("../obrazy/bermar.png") no-repeat }
div.kask   { position:absolute; z-index:102; width:230px; height:200px; left:6.5rem; top:22rem; background:transparent url("../obrazy/bermar_kask.png") no-repeat }
p.opis     { position:relative; font-size:1.5rem; margin:7rem 0 0 21rem; width:60%; font-style:italic; line-height:2.4rem; text-align:justify; }
p.opis:first-letter { padding-left:2rem; font-size:3rem; text-shadow:1px 1px 10px #969696; color:#8f0000;}
p.opis>img { margin:5rem 10rem; position:absolute; right:0rem; }
p.podpis   { position:relative; font-size:2rem; margin:2rem 0 6rem 30rem; font-style:italic; }

/* ================================= realizacje ================================= */
#rok {
               display: grid;
 grid-template-columns: repeat(8, 4rem);
              grid-gap: 1.5rem;
         justify-items: center;
           align-items: center;
                margin: 2rem;
     }
#rok > span { height:3.2rem; padding-left:1.6rem; font-size:1.5rem;
              text-shadow: 1px 1px 10px #969696; background:left bottom transparent url("../obrazy/slajd3.png") no-repeat;
              cursor:pointer; color:#8f0000; }

div#realizacje              { padding:2rem; }
div#realizacje > span       { padding: 0 0 .8rem 1rem; font-size:1.5rem; line-height:3rem; text-shadow: 1px 1px 4px #808080; }
div#realizacje > span:hover { background:left bottom transparent url("../obrazy/slajd.png") no-repeat; cursor:pointer; color:#8f0000; }
button { padding:5px; border-radius:3px; }
div#przegladarka > h1 { text-align:center; text-shadow: 1px 1px 10px #969696; font-size: 1.5rem; }
.przycisk { margin: 1rem 0 0 1rem; cursor:pointer; text-shadow: 1px 1px 10px #969696; font-size: 2.5rem; color:#8f0000; }

/* ================================= referencje ================================= */
.referencje            { margin-bottom:1rem; border:1px solid #969696; border-radius:5px; padding:1rem; }
.referencje h1, h2, h3 { margin:0; padding:1rem; text-shadow: 1px 1px 10px #969696; font-size: 1.25rem;  }
h2[ref_id] {
               display: grid;
	          grid-gap: .75rem;
 grid-template-columns: repeat(8, 6rem);
         justify-items: center;
           align-items: center;
	        border-top: 1px solid #969696;
}
h2[ref_id]>span:hover   { color:#8f0000; text-shadow: 1px 1px 10px #8f0000; cursor:pointer; }
h3[ref_lista]           { border-top: 1px solid #969696; }
h3[ref_lista]>p         { margin: 1rem 0 1rem 2rem; }
h3[ref_lista]>p>a       { color:#969696; text-shadow: 1px 1px 5px #969696; }
h3[ref_lista]>p>a:hover, .zaznacz { color:#8f0000; text-shadow: 1px 1px 5px #8f0000; }

/* ================ pola formularza kontakt / nowa wiadomość ==================== */
div.nowa_wiadomosc>a {
    display:block;
    margin-top:2rem;
    border: 0px solid #8f0000;
    box-shadow:1px 1px 8px #969696;
    border-radius:5px;
    width:15rem; text-decoration:none;
    font-size:1rem; text-align:center; padding:1rem; color:#969696;
}
div.nowa_wiadomosc>a:hover { background-color:#8f0000; color:#FFFFB3; border-color:#5c0000; }

.do_p { text-align:right; }
.do_l { text-align:left; }
.red   { color:#cc0000; }
.white { color:#fffff0; }

table.form { margin:0 0 4rem 0; font-size:1.25rem; }

[type="text"], [type="password"], textarea, select
{ margin:.25rem; border:1px solid #cccccc; padding:.5rem; font-size:1.25rem; border-radius:3px; width:40rem; }

input:focus[type="text"], input:focus[type="password"], textarea:focus, select:focus
{ color:#CC0000; background-color:#FFFFCC; }

[type='submit'],[type='reset']
{margin:.5rem 1rem 0 0; padding:1rem; width:15rem; border-radius:6px; }

/* ==================== ciasteczka (c8a) ==================== */
div.c8a                   { position:absolute; bottom:3.75rem; left:2rem; }
div.c8a>p                 { position:absolute; z-index:300; border:1px solid #808080;  border-radius:3px; background:#4d4d4d; color:#808080; margin:0; padding:0;}
div.c8a>p.c8a_temat       { display:block; width:25rem; padding:.25rem; text-align:center; font-size:1rem }
div.c8a>p.c8a_opis        { display:none; height:auto; width:740px; bottom:-1.75rem; text-align:left; padding:12px; font-size:1rem}
div.c8a:hover>p.c8a_temat { display:none;  }
div.c8a:hover>p.c8a_opis  { display:block; }