1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<!-- Created with Inkscape (http://www.inkscape.org/) -->
3
4<svg
5   xmlns:dc="http://purl.org/dc/elements/1.1/"
6   xmlns:cc="http://creativecommons.org/ns#"
7   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8   xmlns:svg="http://www.w3.org/2000/svg"
9   xmlns="http://www.w3.org/2000/svg"
10   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12   width="765"
13   height="990"
14   id="svg2"
15   version="1.1"
16   inkscape:version="0.48.4 r9939"
17   sodipodi:docname="sa-DD3.svg">
18  <title
19     id="title2985">size,align,layout mockups</title>
20  <defs
21     id="defs4" />
22  <sodipodi:namedview
23     id="base"
24     pagecolor="#ffffff"
25     bordercolor="#666666"
26     borderopacity="1.0"
27     inkscape:pageopacity="0.0"
28     inkscape:pageshadow="2"
29     inkscape:zoom="2"
30     inkscape:cx="80.149288"
31     inkscape:cy="575"
32     inkscape:document-units="mm"
33     inkscape:current-layer="layer1"
34     showgrid="false"
35     units="mm"
36     showguides="true"
37     inkscape:guide-bbox="true"
38     inkscape:window-width="1735"
39     inkscape:window-height="1371"
40     inkscape:window-x="1825"
41     inkscape:window-y="480"
42     inkscape:window-maximized="0">
43    <sodipodi:guide
44       orientation="0,1"
45       position="266.39665,974.32961"
46       id="guide2987" />
47    <sodipodi:guide
48       orientation="0,1"
49       position="291.28492,17.513966"
50       id="guide2989" />
51    <sodipodi:guide
52       orientation="1,0"
53       position="17.513966,836.98324"
54       id="guide2991" />
55    <sodipodi:guide
56       orientation="1,0"
57       position="743.88268,695.94972"
58       id="guide2993" />
59    <sodipodi:guide
60       orientation="0,1"
61       position="-204,886"
62       id="guide3003" />
63    <sodipodi:guide
64       orientation="0,1"
65       position="-199.5,871.5"
66       id="guide3005" />
67    <sodipodi:guide
68       orientation="0,1"
69       position="-186,857"
70       id="guide3007" />
71    <sodipodi:guide
72       orientation="0,1"
73       position="-111.5,843.5"
74       id="guide3009" />
75    <sodipodi:guide
76       orientation="0,1"
77       position="310.77343,584.77731"
78       id="guide3023" />
79    <sodipodi:guide
80       orientation="1,0"
81       position="177,546"
82       id="guide3423" />
83    <sodipodi:guide
84       orientation="1,0"
85       position="354,488"
86       id="guide3425" />
87    <sodipodi:guide
88       orientation="1,0"
89       position="531,414"
90       id="guide3427" />
91    <sodipodi:guide
92       orientation="0,1"
93       position="-46,177"
94       id="guide3489" />
95    <sodipodi:guide
96       orientation="0,1"
97       position="-163,354"
98       id="guide3491" />
99    <sodipodi:guide
100       orientation="0,1"
101       position="-169,531"
102       id="guide3493" />
103    <sodipodi:guide
104       orientation="-0.70710678,0.70710678"
105       position="-221,1118"
106       id="guide3495" />
107    <sodipodi:guide
108       orientation="0,1"
109       position="-126,709"
110       id="guide3497" />
111    <sodipodi:guide
112       orientation="0,1"
113       position="270.5,709"
114       id="guide4611" />
115    <sodipodi:guide
116       orientation="0,1"
117       position="312,690.5"
118       id="guide4616" />
119    <sodipodi:guide
120       orientation="0,1"
121       position="306.53079,620.13265"
122       id="guide4654" />
123    <sodipodi:guide
124       orientation="0,1"
125       position="289.56023,549.06842"
126       id="guide4656" />
127    <sodipodi:guide
128       orientation="0,1"
129       position="269.05413,513.35952"
130       id="guide4658" />
131    <sodipodi:guide
132       orientation="0,1"
133       position="291.68155,655.48799"
134       id="guide3226" />
135    <sodipodi:guide
136       orientation="1,0"
137       position="159.5,724"
138       id="guide5006" />
139  </sodipodi:namedview>
140  <metadata
141     id="metadata7">
142    <rdf:RDF>
143      <cc:Work
144         rdf:about="">
145        <dc:format>image/svg+xml</dc:format>
146        <dc:type
147           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
148        <dc:title>size,align,layout mockups</dc:title>
149        <dc:date>2013-05-07</dc:date>
150      </cc:Work>
151    </rdf:RDF>
152  </metadata>
153  <g
154     inkscape:groupmode="layer"
155     id="layer3"
156     inkscape:label="box"
157     style="display:inline"
158     sodipodi:insensitive="true">
159    <rect
160       y="-316.52042"
161       x="-247.78026"
162       height="34.930607"
163       width="70.363678"
164       id="rect4502"
165       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.625;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
166       transform="scale(-1,-1)" />
167    <rect
168       transform="scale(-1,-1)"
169       style="fill:#808080;fill-opacity:1;stroke:#808080;stroke-width:0.625;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
170       id="rect4628"
171       width="70.363678"
172       height="34.930607"
173       x="-247.78026"
174       y="-351.95349" />
175    <rect
176       y="-387.38657"
177       x="-247.78026"
178       height="34.930607"
179       width="70.363678"
180       id="rect4630"
181       style="fill:#808080;fill-opacity:1;stroke:#bfbfbf;stroke-width:0.62362206;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
182       transform="scale(-1,-1)" />
183  </g>
184  <g
185     inkscape:groupmode="layer"
186     id="layer2"
187     inkscape:label="line"
188     style="display:inline"
189     sodipodi:insensitive="true">
190    <path
191       style="fill:none;stroke:#000000;stroke-width:0.27582404;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
192       d="m 177.34868,246.06878 0,141.4311"
193       id="path4490"
194       inkscape:connector-curvature="0" />
195    <path
196       style="fill:none;stroke:#000000;stroke-width:0.27582404;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
197       d="m 212.79124,246.04342 0,141.4311"
198       id="path4492"
199       inkscape:connector-curvature="0" />
200    <path
201       inkscape:connector-curvature="0"
202       id="path4439"
203       d="m 248.23381,246.04342 0,141.4311"
204       style="fill:none;stroke:#000000;stroke-width:0.27582404;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
205    <path
206       inkscape:connector-curvature="0"
207       id="path3570"
208       d="m 141.89492,246.06878 0,141.4311"
209       style="fill:none;stroke:#000000;stroke-width:0.27582404;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
210  </g>
211  <g
212     inkscape:groupmode="layer"
213     id="layer4"
214     inkscape:label="line-guide"
215     style="display:none"
216     sodipodi:insensitive="true">
217    <g
218       style="display:inline"
219       id="g4580"
220       transform="translate(0,-44.362323)">
221      <path
222         style="fill:none;stroke:#000000;stroke-width:0.39051285;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
223         d="m 195.07715,271.33384 0,283.5749"
224         id="path4488"
225         inkscape:connector-curvature="0" />
226      <path
227         inkscape:connector-curvature="0"
228         id="path4435"
229         d="m 230.51022,271.33384 0,283.5749"
230         style="fill:none;stroke:#000000;stroke-width:0.39051285;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
231    </g>
232  </g>
233  <g
234     inkscape:label="text"
235     inkscape:groupmode="layer"
236     id="layer1"
237     transform="translate(0,-62.362323)"
238     style="display:inline">
239    <text
240       sodipodi:linespacing="123%"
241       id="text4512"
242       y="367.71878"
243       x="264.7392"
244       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
245       xml:space="preserve"><tspan
246         sodipodi:role="line"
247         id="tspan3067">Dd3</tspan></text>
248    <text
249       xml:space="preserve"
250       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
251       x="261.39935"
252       y="401.50049"
253       id="text4526"
254       sodipodi:linespacing="123%"><tspan
255         sodipodi:role="line"
256         id="tspan3069"
257         x="261.39935"
258         y="401.50049">D2</tspan></text>
259    <text
260       sodipodi:linespacing="123%"
261       id="text4568"
262       y="436.20883"
263       x="261.39935"
264       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
265       xml:space="preserve"><tspan
266         sodipodi:role="line"
267         id="tspan3071"
268         x="261.39935"
269         y="436.20883">D3</tspan></text>
270    <flowRoot
271       xml:space="preserve"
272       id="flowRoot3556"
273       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
274       transform="translate(0,60.362323)"><flowRegion
275         id="flowRegion3558"><rect
276           id="rect3560"
277           width="28.5"
278           height="3253"
279           x="84.5"
280           y="286.5"
281           style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;writing-mode:lr-tb;text-anchor:middle;font-family:Roboto;-inkscape-font-specification:Roboto Light" /></flowRegion><flowPara
282         id="flowPara3562" /></flowRoot>    <text
283       xml:space="preserve"
284       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
285       x="325.22058"
286       y="-191.44658"
287       id="text4494"
288       sodipodi:linespacing="123%"
289       transform="matrix(0,1,-1,0,0,0)"><tspan
290         sodipodi:role="line"
291         id="tspan4535"
292         x="325.22058"
293         y="-191.44658">SIZE</tspan></text>
294    <text
295       xml:space="preserve"
296       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
297       x="194.82812"
298       y="366.76904"
299       id="text5000"
300       sodipodi:linespacing="123%"><tspan
301         sodipodi:role="line"
302         x="194.82812"
303         y="366.76904"
304         id="tspan5002"><tspan
305           x="194.82812"
306           y="366.76904"
307           id="tspan5004">56</tspan></tspan></text>
308    <text
309       transform="matrix(0,1,-1,0,0,0)"
310       sodipodi:linespacing="123%"
311       id="text4574"
312       y="-226.39417"
313       x="321.07214"
314       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
315       xml:space="preserve"><tspan
316         sodipodi:role="line"
317         id="tspan4578"
318         x="321.07214"
319         y="-226.39417">ALIGN</tspan></text>
320    <text
321       xml:space="preserve"
322       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
323       x="230.15625"
324       y="366.76904"
325       id="text4994"
326       sodipodi:linespacing="123%"><tspan
327         sodipodi:role="line"
328         x="230.15625"
329         y="366.76904"
330         id="tspan4996"><tspan
331           x="230.15625"
332           y="366.76904"
333           id="tspan4998">8</tspan></tspan></text>
334    <text
335       xml:space="preserve"
336       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
337       x="194.82812"
338       y="400.76904"
339       id="text4988"
340       sodipodi:linespacing="123%"><tspan
341         sodipodi:role="line"
342         x="194.82812"
343         y="400.76904"
344         id="tspan4990"><tspan
345           x="194.82812"
346           y="400.76904"
347           id="tspan4992">32</tspan></tspan></text>
348    <text
349       xml:space="preserve"
350       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
351       x="230.15625"
352       y="400.76904"
353       id="text4982"
354       sodipodi:linespacing="123%"><tspan
355         sodipodi:role="line"
356         x="230.15625"
357         y="400.76904"
358         id="tspan4984"><tspan
359           x="230.15625"
360           y="400.76904"
361           id="tspan4986">8</tspan></tspan></text>
362    <text
363       xml:space="preserve"
364       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
365       x="194.82812"
366       y="436.76904"
367       id="text4976"
368       sodipodi:linespacing="123%"><tspan
369         sodipodi:role="line"
370         x="194.82812"
371         y="436.76904"
372         id="tspan4978"><tspan
373           x="194.82812"
374           y="436.76904"
375           id="tspan4980">24</tspan></tspan></text>
376    <text
377       xml:space="preserve"
378       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
379       x="230.15625"
380       y="436.76904"
381       id="text4970"
382       sodipodi:linespacing="123%"><tspan
383         sodipodi:role="line"
384         x="230.15625"
385         y="436.76904"
386         id="tspan4972"><tspan
387           x="230.15625"
388           y="436.76904"
389           id="tspan4974">8</tspan></tspan></text>
390    <text
391       xml:space="preserve"
392       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
393       x="159.39505"
394       y="436.76904"
395       id="text4964"
396       sodipodi:linespacing="123%"><tspan
397         sodipodi:role="line"
398         x="159.39505"
399         y="436.76904"
400         id="tspan4966"><tspan
401           x="159.39505"
402           y="436.76904"
403           id="tspan4968">32</tspan></tspan></text>
404    <text
405       xml:space="preserve"
406       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
407       x="160.72318"
408       y="401.33597"
409       id="text4958"
410       sodipodi:linespacing="123%"><tspan
411         sodipodi:role="line"
412         x="160.72318"
413         y="401.33597"
414         id="tspan4960"><tspan
415           x="160.72318"
416           y="401.33597"
417           id="tspan4962">0</tspan></tspan></text>
418    <text
419       transform="matrix(0,1,-1,0,0,0)"
420       sodipodi:linespacing="123%"
421       id="text3613"
422       y="-156.0135"
423       x="316.08582"
424       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:center;line-height:123.00000191%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Roboto;-inkscape-font-specification:Roboto Light"
425       xml:space="preserve"><tspan
426         sodipodi:role="line"
427         id="tspan3617"
428         x="316.08582"
429         y="-156.0135">OFFSET</tspan></text>
430  </g>
431</svg>
432