1 @font-face { 2 font-family: "Public Sans"; 3 src: url("/static/fonts/PublicSans-Regular.otf"); 4 } 5 6 @font-face { 7 font-family: "Inconsolata"; 8 src: url("/static/fonts/Inconsolata.otf"); 9 } 10 11 .clearfix:after { 12 content: ""; 13 display: table; 14 clear: both; 15 } 16 17 a { 18 color: #0087C3; 19 text-decoration: none; 20 } 21 22 body { 23 position: relative; 24 width: 21cm; 25 height: 29.7cm; 26 margin: 0 auto; 27 color: #555555; 28 background: #FFFFFF; 29 font-family: Arial, sans-serif; 30 font-size: 14px; 31 font-family: "Public Sans"; 32 } 33 34 header { 35 padding: 10px 0; 36 margin-bottom: 20px; 37 border-bottom: 1px solid #AAAAAA; 38 } 39 40 #logo { 41 float: left; 42 margin-top: 8px; 43 } 44 45 #logo img { 46 height: 70px; 47 } 48 49 #company { 50 float: right; 51 text-align: right; 52 } 53 54 55 #details { 56 margin-bottom: 50px; 57 } 58 59 #client { 60 padding-left: 6px; 61 border-left: 6px solid #0087C3; 62 float: left; 63 } 64 65 #client .to { 66 color: #777777; 67 } 68 69 h2.name { 70 font-size: 1.4em; 71 font-weight: normal; 72 margin: 0; 73 } 74 75 #invoice { 76 float: right; 77 text-align: right; 78 } 79 80 #invoice h1 { 81 color: #0087C3; 82 font-size: 2.4em; 83 line-height: 1em; 84 font-weight: normal; 85 margin: 0 0 10px 0; 86 } 87 88 #invoice .date { 89 font-size: 1.1em; 90 color: #777777; 91 } 92 93 table { 94 width: 100%; 95 border-collapse: collapse; 96 border-spacing: 0; 97 margin-bottom: 20px; 98 } 99 100 table th, 101 table td { 102 padding: 20px; 103 background: #EEEEEE; 104 text-align: center; 105 border-bottom: 1px solid #FFFFFF; 106 } 107 108 table th { 109 white-space: nowrap; 110 font-weight: normal; 111 } 112 113 table td { 114 text-align: right; 115 } 116 117 table td h3{ 118 color: #57B223; 119 font-size: 1.2em; 120 font-weight: normal; 121 margin: 0 0 0.2em 0; 122 } 123 124 table .no { 125 color: #FFFFFF; 126 font-size: 1.6em; 127 background: #57B223; 128 } 129 130 table .desc { 131 text-align: left; 132 } 133 134 table .unit { 135 background: #DDDDDD; 136 } 137 138 table .qty { 139 } 140 141 table .total { 142 background: #57B223; 143 color: #FFFFFF; 144 } 145 146 table td.unit, 147 table td.qty, 148 table td.total { 149 font-size: 1.2em; 150 } 151 152 table tbody tr:last-child td { 153 border: none; 154 } 155 156 table tfoot td { 157 padding: 10px 20px; 158 background: #FFFFFF; 159 border-bottom: none; 160 font-size: 1.2em; 161 white-space: nowrap; 162 border-top: 1px solid #AAAAAA; 163 } 164 165 table tfoot tr:first-child td { 166 border-top: none; 167 } 168 169 table tfoot tr:last-child td { 170 color: #57B223; 171 font-size: 1.4em; 172 border-top: 1px solid #57B223; 173 174 } 175 176 table tfoot tr td:first-child { 177 border: none; 178 } 179 180 #thanks{ 181 font-size: 2em; 182 margin-bottom: 50px; 183 } 184 185 #notices{ 186 padding-left: 6px; 187 border-left: 6px solid #0087C3; 188 } 189 190 #notices .notice { 191 font-size: 1.2em; 192 } 193 194 footer { 195 color: #777777; 196 width: 100%; 197 height: 30px; 198 position: absolute; 199 bottom: 0; 200 border-top: 1px solid #AAAAAA; 201 padding: 8px 0; 202 text-align: center; 203 } 204 205