/*****************
   @Post v0.1
   (c) ...
*****************/

* { margin: 0; padding: 0; spacing: 0; border: 0; }

body { background: #f2f2f2; }

#header { width: 297mm; margin: 0 auto; text-align: right; height: 50px; }
#header a { display: inline-block; padding: 3px 5px; background: #fff; color: #205471; clear: none; box-shadow: 3px 3px 0 rgba(128,128,128,0.5); text-decoration: none; font-family: "Segoe UI"; }
#header a:hover { background: #205471; color: white; }

#header a.print { float: left; font-weight: bold; font-size: 1.2em; }

#container { background: url(loader.gif) center 700px no-repeat white;
             display: block; box-shadow: 0 0 2px #666;
             width: 297mm; height: 210mm; margin: 0 auto 20px; }

.wrapper {
     display: block;
     width: 297mm;
     height: 210mm;
     background-position: top center;
     background-repeat: no-repeat;
     background-size: cover;
     border: 0px solid #eee; }

#front {
     background-image: url("documente-transport-fata.png");
     //background-image: url("documente-transport-fata.svg"); }
#back {
     background-image: url("documente-transport-spate.png");
     //background-image: url("documente-transport-spate.svg"); }

#mandat {
display: block;
float: left;
width: 50%;
height: 100%;
position: relative; }

#buletin {
display: block;
float: right;
width: 50%;
height: 100%;
position: relative; }

#back .notice { display: block; width: 375px; height: 30px; padding: 20px; position: relative; top: 300px; margin: 0 auto;
         border: 2px solid #205471; background: rgba(255,255,255,0.9); box-shadow: 10px 10px 0 rgba(128,128,128,0.5);
         font-family: Calibri; font-size: 18px; color: #205471; text-align: center; }

#area1 { display: block; width: 100%; height: 370px; position: absolute; top: 0; left: 0; }
#area2 { display: block; width: 100%; height: 175px; position: absolute; top: 485px; left: 0; }
#extra { display: block; width: 90%; position: absolute; top: 388px; left: 10px;
         padding: 5px 10px; height: 62px; border: 2px solid #205471; background: rgba(255,255,255,0.9);
         box-shadow: 10px 10px 0 rgba(128,128,128,0.5); font-family: Calibri; font-size: 14px; }
#area3 { display: block; width: 100%; height: 240px; position: absolute; top: 0; left: 0;  }
#area4 { display: block; width: 100%; height: 260px; position: absolute; top: 240px; left: 0; }

input {
color: #205471;
text-align: center;
font-family: sans-serif;
font-weight: bold;
position: absolute;
border: none;
background: none;
overflow: visible;
font-size: 13px; }
#area1 input, #extra input { border-bottom: 1px solid greenyellow; max-width: 64%; }
#area1 input:hover, #extra input:hover { background: rgba(210,238,202,0.6); }
input.big { font-size: 15px; }
input.small { font-size: 12px; }
input.xsmall { font-size: 11px; }
input.xxsmall { font-size: 10px; }

#extra input { position: inherit; }
#area3 input, #area4 input {
	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	white-space:nowrap; }

#area1 input, #extra input { background: rgba(213,255,213,0.4); }
#area2 input, #area3 input, #area4 input, #area1 .destinatar, #area1 .expeditor,
#area1 .destinatar:hover, #area1 .expeditor:hover { background: rgba(128,128,128,0.1); }

#area1 .trimitere { left: 128px; top: 110px; width: 165px; }
#area1 .continut { right: 40px; top: 110px; width: 165px; }
#area1 .valoare_lei { left: 125px; top: 144px; width: 91px; }
#area1 .valoare_litere { right: 47px; top: 143px; width: 292px; }
#area1 .ramburs_lei { left: 125px; top: 167px; width: 91px; }
#area1 .ramburs_litere { right: 47px; top: 170px; width: 292px; }
#area1 .destinatar { left: 112px; top: 191px; width: 254px; border: none; }
#area1 .d_str { left: 75px; top: 212px; width: 174px; }
#area1 .d_nr { left: 271px; top: 212px; width: 42px; }
#area1 .d_bl { left: 340px; top: 212px; width: 42px; }
#area1 .d_sc { right: 131px; top: 212px; width: 30px; }
#area1 .d_et { right: 82px; top: 212px; width: 30px; }
#area1 .d_ap { right: 28px; top: 212px; width: 30px; }
#area1 .d_cp { left: 115px; top: 236px; width: 125px; }
#area1 .d_loc { left: 310px; top: 236px; width: 143px; }
#area1 .d_sec { right: 33px; top: 236px; width: 31px; }
#area1 .d_jud { left: 93px; top: 274px; width: 123px; }
#area1 .d_op { left: 273px; top: 274px; width: 123px; }

#area1 .expeditor { left: 107px; top: 299px; width: 209px; border: none; }
#area1 .e_str { left: 67px; top: 320px; width: 97px; }
#area1 .e_nr { left: 176px; top: 320px; width: 26px; }
#area1 .e_bl { left: 218px; top: 320px; width: 26px; }
#area1 .e_sc { right: 279px; top: 320px; width: 21px; }
#area1 .e_et { right: 238px; top: 320px; width: 24px; }
#area1 .e_ap { right: 193px; top: 320px; width: 23px; }
#area1 .e_sec { right: 134px; top: 320px; width: 22px; }
#area1 .e_cp { left: 110px; top: 340px; width: 43px; }
#area1 .e_loc { left: 218px; top: 340px; width: 101px; }
#area1 .e_jud { left: 363px; top: 340px; width: 65px; }

#area2 .destinatar { left: 112px; top: 18px; width: 283px; }
#area2 .d_str { left: 70px; top: 48px; width: 230px; }
#area2 .d_nr { left: 318px; top: 48px; width: 32px; }
#area2 .d_bl { left: 368px; top: 48px; width: 30px; }
#area2 .d_sc { right: 127px; top: 48px; width: 21px; }
#area2 .d_et { right: 82px; top: 48px; width: 30px; }
#area2 .d_ap { right: 32px; top: 48px; width: 30px; }
#area2 .trimitere { right:28px; top: 70px; width: 269px; }
#area2 .valoare_lei { right: 182px; top: 94px; width: 136px; }
#area2 .ramburs_lei { right:28px; top: 94px; width: 100px; }
#area2 .expeditor { left: 112px; top: 115px; width: 418px; }
#area2 .e_str { left: 70px; top: 138px; width: 170px; }
#area2 .e_nr { left: 255px; top: 138px; width: 35px; }
#area2 .e_cp { left: 311px; top: 138px; width: 55px; }
#area2 .e_loc { right: 31px; top: 138px; width: 110px; }

#area3 .d_nume { right: 55px; top: 128px; width: 173px; }
#area3 .d_prenume { right: 77px; top: 132px; width: 159px; }
#area3 .d_str { right: 97px; top: 98px; width: 148px; }
#area3 .d_nr { right: 157px; top: 200px; width: 30px;}
#area3 .d_bl { right: 158px; top: 61px; width: 56px; }
#area3 .d_sc { right: 166px; top: 139px; width: 40px; }
#area3 .d_et { right: 169px; top: 198px; width: 34px; }
#area3 .d_ap { right: 180px; top: 48px; width: 44px; }
#area3 .d_cp { right: 138px; top: 153px; width: 124px; }
#area3 .d_loc { right: 140px; top: 140px; width: 151px; }
#area3 .d_judsec { right: 169px; top: 154px; width: 121px; }
#area3 .ramburs_lei { right: 198px; top: 111px; width: 193px; }

#area4 .e_nume { right: 8px; top: 142px; width: 206px; }
#area4 .e_prenume { right: 30px; top: 148px; width: 192px; }
#area4 .e_str { right: 52px; top: 108px; width: 177px; }
#area4 .e_nr { right: 124px; top: 228px; width: 33px; }
#area4 .e_bl { right: 135px; top: 42px; width: 39px; }
#area4 .e_sc { right: 135px; top: 111px; width: 40px; }
#area4 .e_et { right: 138px; top: 173px; width: 34px; }
#area4 .e_ap { right: 137px; top: 224px; width: 38px; }
#area4 .e_cp { right: 144px; top: 52px; width: 52px; }
#area4 .e_loc { right: 114px; top: 191px; width: 110px; }
#area4 .e_judsec { right: 142px; top: 93px; width: 86px; }
#area4 .e_cnp { right: 98px; top: 141px; width: 205px; }
#area4 .destinatar { right: 117px; top: 148px; width: 193px; }
#area4 .d_loc { right: 137px; top: 152px; width: 183px; }
#area4 .ramburs_lei { right: 150px; top: 118px; width: 230px; }
#area4 .ramburs_litere { right: 194px; top: 118px; width: 230px; }

/* FIN! */