PhoenixRedhat/Skin-Disease

1 2/*  SECTIONS  ============================================================================= */3 4.section {5	clear: both;6	padding: 0px;7	margin: 0px;8}9 10/*  GROUPING  ============================================================================= */11 12.row {13    zoom: 1; /* For IE 6/7 (trigger hasLayout) */14}15 16.row:before,17.row:after {18    content:"";19    display:table;20}21.row:after {22    clear:both;23}24 25/*  GRID COLUMN SETUP   ==================================================================== */26 27.col {28	display: block;29	float:left;30	margin: 1% 0 1% 1.6%;31}32 33.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */34 35 36/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */37 38@media only screen and (max-width: 480px) {39	.col { 40		/*margin: 1% 0 1% 0%;*/41        margin: 0;42	}43}44 45 46/*  GRID OF TWO   ============================================================================= */47 48 49.span-2-of-2 {50	width: 100%;51}52 53.span-1-of-2 {54	width: 49.2%;55}56 57/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */58 59@media only screen and (max-width: 480px) 60{61	.span-2-of-2 {62		width: 100%; 63	}64	.span-1-of-2 {65		width: 100%; 66	}67}68 69 70/*  GRID OF THREE   ============================================================================= */71 72	73.span-3-of-3 {74	width: 100%; 75}76 77.span-2-of-3 {78	width: 66.13%; 79}80 81.span-1-of-3 {82	width: 32.26%; 83}84 85 86/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */87 88@media only screen and (max-width: 480px) {89	.span-3-of-3 {90		width: 100%; 91	}92	.span-2-of-3 {93		width: 100%; 94	}95	.span-1-of-3 {96		width: 100%;97	}98}99 100/*  GRID OF FOUR   ============================================================================= */101 102	103.span-4-of-4 {104	width: 100%; 105}106 107.span-3-of-4 {108	width: 74.6%; 109}110 111.span-2-of-4 {112	width: 49.2%; 113}114 115.span-1-of-4 {116	width: 23.8%; 117}118 119 120/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */121 122@media only screen and (max-width: 480px) {123	.span-4-of-4 {124		width: 100%; 125	}126	.span-3-of-4 {127		width: 100%; 128	}129	.span-2-of-4 {130		width: 100%; 131	}132	.span-1-of-4 {133		width: 100%; 134	}135}136 137 138/*  GRID OF FIVE   ============================================================================= */139 140	141.span-5-of-5 {142	width: 100%;143}144 145.span-4-of-5 {146  	width: 79.68%; 147}148 149.span-3-of-5 {150  	width: 59.36%; 151}152 153.span-2-of-5 {154  	width: 39.04%;155}156 157.span-1-of-5 {158  	width: 18.72%;159}160 161 162/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */163 164@media only screen and (max-width: 480px) {165	.span-5-of-5 {166		width: 100%; 167	}168	.span-4-of-5 {169		width: 100%; 170	}171	.span-3-of-5 {172		width: 100%; 173	}174	.span-2-of-5 {175		width: 100%; 176	}177	.span-1-of-5 {178		width: 100%; 179	}180}181 182 183/*  GRID OF SIX   ============================================================================= */184 185 186.span-6-of-6 {187	width: 100%;188}189 190.span-5-of-6 {191  	width: 83.06%;192}193 194.span-4-of-6 {195  	width: 66.13%;196}197 198.span-3-of-6 {199  	width: 49.2%;200}201 202.span-2-of-6 {203  	width: 32.26%;204}205 206.span-1-of-6 {207  	width: 15.33%;208}209 210 211/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */212 213@media only screen and (max-width: 480px) {214	.span-6-of-6 {215		width: 100%; 216	}217	.span-5-of-6 {218		width: 100%; 219	}220	.span-4-of-6 {221		width: 100%; 222	}223	.span-3-of-6 {224		width: 100%; 225	}226	.span-2-of-6 {227		width: 100%; 228	}229	.span-1-of-6 {230		width: 100%; 231	}232}233 234 235 236/*  GRID OF SEVEN   ============================================================================= */237 238 239.span-7-of-7 {240	width: 100%;241}242 243.span-6-of-7 {244	width: 85.48%;245}246 247.span-5-of-7 {248  	width: 70.97%;249}250 251.span-4-of-7 {252  	width: 56.45%;253}254 255.span-3-of-7 {256  	width: 41.94%;257}258 259.span-2-of-7 {260  	width: 27.42%;261}262 263.span-1-of-7 {264  	width: 12.91%;265}266 267 268/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */269 270@media only screen and (max-width: 480px) {271	.span-7-of-7 {272		width: 100%; 273	}274	.span-6-of-7 {275		width: 100%; 276	}277	.span-5-of-7 {278		width: 100%; 279	}280	.span-4-of-7 {281		width: 100%; 282	}283	.span-3-of-7 {284		width: 100%; 285	}286	.span-2-of-7 {287		width: 100%; 288	}289	.span-1-of-7 {290		width: 100%; 291	}292}293 294 295/*  GRID OF EIGHT   ============================================================================= */296 297	298.span-8-of-8 {299	width: 100%;300}301 302.span-7-of-8 {303	width: 87.3%; 304}305 306.span-6-of-8 {307	width: 74.6%; 308}309 310.span-5-of-8 {311	width: 61.9%; 312}313 314.span-4-of-8 {315	width: 49.2%; 316}317 318.span-3-of-8 {319	width: 36.5%;320}321 322.span-2-of-8 {323	width: 23.8%; 324}325 326.span-1-of-8 {327	width: 11.1%; 328}329 330 331/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */332 333@media only screen and (max-width: 480px) {334	.span-8-of-8 {335		width: 100%; 336	}337	.span-7-of-8 {338		width: 100%; 339	}340	.span-6-of-8 {341		width: 100%; 342	}343	.span-5-of-8 {344		width: 100%; 345	}346	.span-4-of-8 {347		width: 100%; 348	}349	.span-3-of-8 {350		width: 100%; 351	}352	.span-2-of-8 {353		width: 100%; 354	}355	.span-1-of-8 {356		width: 100%; 357	}358}359 360 361/*  GRID OF NINE   ============================================================================= */362 363 364.span-9-of-9 {365	width: 100%;366}367 368.span-8-of-9 {369	width: 88.71%;370}371 372.span-7-of-9 {373	width: 77.42%; 374}375 376.span-6-of-9 {377	width: 66.13%; 378}379 380.span-5-of-9 {381	width: 54.84%; 382}383 384.span-4-of-9 {385	width: 43.55%; 386}387 388.span-3-of-9 {389	width: 32.26%;390}391 392.span-2-of-9 {393	width: 20.97%; 394}395 396.span-1-of-9 {397	width: 9.68%; 398}399 400 401/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */402 403@media only screen and (max-width: 480px) {404	.span-9-of-9 {405		width: 100%; 406	}407	.span-8-of-9 {408		width: 100%; 409	}410	.span-7-of-9 {411		width: 100%; 412	}413	.span-6-of-9 {414		width: 100%; 415	}416	.span-5-of-9 {417		width: 100%; 418	}419	.span-4-of-9 {420		width: 100%; 421	}422	.span-3-of-9 {423		width: 100%; 424	}425	.span-2-of-9 {426		width: 100%; 427	}428	.span-1-of-9 {429		width: 100%; 430	}431}432 433 434/*  GRID OF TEN   ============================================================================= */435 436 437.span-10-of-10 {438	width: 100%;439}440 441.span-9-of-10 {442	width: 89.84%;443}444 445.span-8-of-10 {446	width: 79.68%;447}448 449.span-7-of-10 {450	width: 69.52%; 451}452 453.span-6-of-10 {454	width: 59.36%; 455}456 457.span-5-of-10 {458	width: 49.2%; 459}460 461.span-4-of-10 {462	width: 39.04%; 463}464 465.span-3-of-10 {466	width: 28.88%;467}468 469.span-2-of-10 {470	width: 18.72%; 471}472 473.span-1-of-10 {474	width: 8.56%; 475}476 477 478/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */479 480@media only screen and (max-width: 480px) {481	.span-10-of-10 {482		width: 100%; 483	}484	.span-9-of-10 {485		width: 100%; 486	}487	.span-8-of-10 {488		width: 100%; 489	}490	.span-7-of-10 {491		width: 100%; 492	}493	.span-6-of-10 {494		width: 100%; 495	}496	.span-5-of-10 {497		width: 100%; 498	}499	.span-4-of-10 {500		width: 100%; 501	}502	.span-3-of-10 {503		width: 100%; 504	}505	.span-2-of-10 {506		width: 100%; 507	}508	.span-1-of-10 {509		width: 100%; 510	}511}512 513 514/*  GRID OF ELEVEN   ============================================================================= */515 516.span-11-of-11 {517	width: 100%;518}519 520.span-10-of-11 {521	width: 90.76%;522}523 524.span-9-of-11 {525	width: 81.52%;526}527 528.span-8-of-11 {529	width: 72.29%;530}531 532.span-7-of-11 {533	width: 63.05%; 534}535 536.span-6-of-11 {537	width: 53.81%; 538}539 540.span-5-of-11 {541	width: 44.58%; 542}543 544.span-4-of-11 {545	width: 35.34%; 546}547 548.span-3-of-11 {549	width: 26.1%;550}551 552.span-2-of-11 {553	width: 16.87%; 554}555 556.span-1-of-11 {557	width: 7.63%; 558}559 560 561/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */562 563@media only screen and (max-width: 480px) {564	.span-11-of-11 {565		width: 100%; 566	}567	.span-10-of-11 {568		width: 100%; 569	}570	.span-9-of-11 {571		width: 100%; 572	}573	.span-8-of-11 {574		width: 100%; 575	}576	.span-7-of-11 {577		width: 100%; 578	}579	.span-6-of-11 {580		width: 100%; 581	}582	.span-5-of-11 {583		width: 100%; 584	}585	.span-4-of-11 {586		width: 100%; 587	}588	.span-3-of-11 {589		width: 100%; 590	}591	.span-2-of-11 {592		width: 100%; 593	}594	.span-1-of-11 {595		width: 100%; 596	}597}598 599 600/*  GRID OF TWELVE   ============================================================================= */601 602.span-12-of-12 {603	width: 100%;604}605 606.span-11-of-12 {607	width: 91.53%;608}609 610.span-10-of-12 {611	width: 83.06%;612}613 614.span-9-of-12 {615	width: 74.6%;616}617 618.span-8-of-12 {619	width: 66.13%;620}621 622.span-7-of-12 {623	width: 57.66%; 624}625 626.span-6-of-12 {627	width: 49.2%; 628}629 630.span-5-of-12 {631	width: 40.73%; 632}633 634.span-4-of-12 {635	width: 32.26%; 636}637 638.span-3-of-12 {639	width: 23.8%;640}641 642.span-2-of-12 {643	width: 15.33%; 644}645 646.span-1-of-12 {647	width: 6.86%; 648}649 650 651/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */652 653@media only screen and (max-width: 480px) {654	.span-12-of-12 {655		width: 100%; 656	}657	.span-11-of-12 {658		width: 100%; 659	}660	.span-10-of-12 {661		width: 100%; 662	}663	.span-9-of-12 {664		width: 100%; 665	}666	.span-8-of-12 {667		width: 100%; 668	}669	.span-7-of-12 {670		width: 100%; 671	}672	.span-6-of-12 {673		width: 100%; 674	}675	.span-5-of-12 {676		width: 100%; 677	}678	.span-4-of-12 {679		width: 100%; 680	}681	.span-3-of-12 {682		width: 100%; 683	}684	.span-2-of-12 {685		width: 100%; 686	}687	.span-1-of-12 {688		width: 100%; 689	}690}