/*/ ZX CSS Layout 1.5 RC by Dave Smith www.dave-smith.info /*/



/*/ Z: To contain Xs and floats. /*/
.z            {display:inline-block;} .z {display:block;} .z:after {content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.z-gap        {margin:0 0 0 -12px;}
.z-rule       {margin:0 -12px 0 -12px;}	



/*/ X Essentials /*/
.x        {float:left;}
.x-alt    {float:right;}
.x-center {float:none;margin:0 auto;} /*/ .x-center will not contain floats as it is not floated, therefore it needs the following. /*/
.x-center {display:inline-block;} .x-center {display:block;} .x-center:after {content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.x-margin {float:none;} /*/ .x-margin will not contain floats as it is not floated. And as it will be auto width then a different method to contain floats is needed. /*/



/*/ X Widths /*/
/*/ For example: x-1o2 = 50%, a width of 1 over 2 as a percentage = 50% /*/
/*/ For example: x-1o1-960 = 960px, a width of 1 over 1 of 960 = 960px /*/
@media screen, print {
	.x-1o1-960 {width:960px;}
}
.x-1o1 {width:100%;}
.x-1o2, .x-2o4, .x-3o6, .x-4o8, .x-5o10, .x-6o12 {width:50%;}
.x-1o3, .x-2o6, .x-3o9, .x-4o12 {width:33.3333%;}
.x-1o4, .x-2o8, .x-3o12 {width:25%;}
.x-1o5, .x-2o10 {width:20%;}
.x-1o6, .x-2o12 {width:16.6666%;}
.x-1o7 {width:14.2857%;}
.x-1o8 {width:12.5%;}
.x-1o9 {width:11.1111%;}
.x-1o10 {width:10%;}
.x-1o11 {width:9.0909%;}
.x-1o12 {width:8.3333%;}
.x-2o3, .x-4o6, .x-6o9, .x-8o12 {width:66.6666%;}
.x-2o5, .x-4o10 {width:40%;}
.x-2o7 {width:28.5714%;}
.x-2o9 {width:22.2222%;}
.x-2o11 {width:18.1818%;}
.x-3o4, .x-6o8, .x-9o12 {width:75%;}
.x-3o5, .x-6o10 {width:60%;}
.x-3o7 {width:42.8571%;}
.x-3o8 {width:37.5%;}
.x-3o10 {width:30%;}
.x-3o11 {width:27.2727%;}
.x-4o5, .x-8o10 {width:80%;}
.x-4o7 {width:57.1429%;}
.x-4o9 {width:44.4444%;}
.x-4o11 {width:36.3636%;}
.x-5o6, .x-10o12 {width:83.3333%;}
.x-5o7 {width:71.4286%;}
.x-5o8 {width:62.5%;}
.x-5o9 {width:55.5556%;}
.x-5o11 {width:45.4545%;}
.x-5o12 {width:41.6666%;}
.x-6o7 {width:85.7143%;}
.x-6o11 {width:54.5454%;}
.x-7o8 {width:87.5%;}
.x-7o9 {width:77.7777%;}
.x-7o10 {width:70%;}
.x-7o11 {width:63.6363%;}
.x-7o12 {width:58.3333%;}
.x-8o9 {width:88.8888%;}
.x-8o11 {width:72.7272%;}
.x-9o10 {width:90%;}
.x-9o11 {width:81.8181%;}
.x-10o11 {width:90.9090%;}
.x-11o12 {width:91.6666%;}



/*/ X Margins: To put a margin on an auto width X. /*/
.x-1o2-margin, .x-2o4-margin, .x-3o6-margin, .x-4o8-margin, .x-5o10-margin, .x-6o12-margin {margin-left:50%;}
.x-1o3-margin, .x-2o6-margin, .x-3o9-margin, .x-4o12-margin {margin-left:33.3333%;}
.x-1o4-margin, .x-2o8-margin, .x-3o12-margin {margin-left:25%;}
.x-1o5-margin, .x-2o10-margin {margin-left:20%;}
.x-1o6-margin, .x-2o12-margin {margin-left:16.6666%;}
.x-1o7-margin {margin-left:14.2857%;}
.x-1o8-margin {margin-left:12.5%;}
.x-1o9-margin {margin-left:11.1111%;}
.x-1o10-margin {margin-left:10%;}
.x-1o11-margin {margin-left:9.0909%;}
.x-1o12-margin {margin-left:8.3333%;}
.x-2o5-margin, .x-4o10-margin {margin-left:40%;}
.x-2o7-margin {margin-left:28.5714%;}
.x-2o9-margin {margin-left:22.2222%;}
.x-2o11-margin {margin-left:18.1818%;}
.x-3o7-margin {margin-left:42.8571%;}
.x-3o8-margin {margin-left:37.5%;}
.x-3o10-margin {margin-left:30%;}
.x-3o11-margin {margin-left:27.2727%;}
.x-4o7-margin {margin-left:57.1429%;}
.x-4o9-margin {margin-left:44.4444%;}
.x-4o11-margin {margin-left:36.3636%;}
.x-5o11-margin {margin-left:45.4545%;}
.x-5o12-margin {margin-left:41.6666%;}

.x-1o2-margin-alt, .x-2o4-margin-alt, .x-3o6-margin-alt, .x-4o8-margin-alt, .x-5o10-margin-alt, .x-6o12-margin-alt {margin-right:50%;}
.x-1o3-margin-alt, .x-2o6-margin-alt, .x-3o9-margin-alt, .x-4o12-margin-alt {margin-right:33.3333%;}
.x-1o4-margin-alt, .x-2o8-margin-alt, .x-3o12-margin-alt {margin-right:25%;}
.x-1o5-margin-alt, .x-2o10-margin-alt {margin-right:20%;}
.x-1o6-margin-alt, .x-2o12-margin-alt {margin-right:16.6666%;}
.x-1o7-margin-alt {margin-right:14.2857%;}
.x-1o8-margin-alt {margin-right:12.5%;}
.x-1o9-margin-alt {margin-right:11.1111%;}
.x-1o10-margin-alt {margin-right:10%;}
.x-1o11-margin-alt {margin-right:9.0909%;}
.x-1o12-margin-alt {margin-right:8.3333%;}
.x-2o5-margin-alt, .x-4o10-margin-alt {margin-right:40%;}
.x-2o7-margin-alt {margin-right:28.5714%;}
.x-2o9-margin-alt {margin-right:22.2222%;}
.x-2o11-margin-alt {margin-right:18.1818%;}
.x-3o7-margin-alt {margin-right:42.8571%;}
.x-3o8-margin-alt {margin-right:37.5%;}
.x-3o10-margin-alt {margin-right:30%;}
.x-3o11-margin-alt {margin-right:27.2727%;}
.x-4o7-margin-alt {margin-right:57.1429%;}
.x-4o9-margin-alt {margin-right:44.4444%;}
.x-4o11-margin-alt {margin-right:36.3636%;}
.x-5o11-margin-alt {margin-right:45.4545%;}
.x-5o12-margin-alt {margin-right:41.6666%;}



/*/ X Inner (xi) for padding, spacing etc. /*/
.xi            {display:inline-block;} .xi {display:block;} /*/ Required as IE 7 and less had a strange bug where if .z .x .xi .z .x .xi was done with no text inside the first .xi then a margin bug would appear. /*/
.xi-fill       {padding:1px 12px;background:#eee;} /*/ Style for flows that are filled/have a different background colour to their neighbour. /*/
.xi-gap        {padding:1px 0;margin:0 0 0 12px;}
.xi-gap-fill   {padding:1px 12px;margin:0 0 0 12px;background:#eee;}
.xi-rule       {border-left:1px solid #ccc;} /*/ A default rule style /*/
.xi-rule,
.xi-rule-first {padding:1px 12px;}
.xi-rule-fill  {padding:1px 12px;background:#eee;} /*/ Style for flows that are filled/have a different background colour to their neighbour. /*/