#sitemap-container { overflow:auto; padding-bottom:20px; } #sitemap-container #left-box{ width:75%; float:left; } #sitemap-container #right-box{ width:24%; float:right; border-left:1px solid #ccc; } #sitemap-container #left-box h2 a { clear: both; padding: 5px 10px; display:block; color: #fff; font-size: 18px; background: #dc291e; background: -moz-linear-gradient(left, #dc291e 0%, #fff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dc291e), color-stop(100%,#fff)); background: -webkit-linear-gradient(left, #dc291e 0%,#fff 100%); background: -o-linear-gradient(left, #dc291e 0%,#fff 100%); background: -ms-linear-gradient(left, #dc291e 0%,#fff 100%); background: linear-gradient(to right, #dc291e 0%,#fff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc291e', endColorstr='#ffffff',GradientType=1 ); border-left:15px solid #9c3022; border-right:15px solid #fff; font-weight:bold; margin: 0px; text-transform:uppercase; } #sitemap-container #right-box h2{ clear: both; padding: 5px 10px; display:block; color: #fff; font-size: 18px; background:#f3f3f3; border-left:15px solid #ccc; font-weight:bold; margin: 0px; text-transform:capitalize; } .section { width:auto; color: #666; } .pad10{display:block; margin:10px 20px; margin-bottom:0; text-transform:uppercase} .pad10 a {color:#000} #left-box .section ul { overflow:auto; padding:0; font-size:0; } #left-box .section ul ul { border: none; margin:0; } #left-box .section ul ul ul { overflow:auto; border: none; padding:0; } #left-box .col1 ul li { border-right: #999 dotted 1px; background: none; display:inline-block; vertical-align:top; width:99%; } #left-box .col2 ul li { border-right: #999 dotted 1px; background: none; display:inline-block; vertical-align:top; width:49%; } #left-box .col3 ul li { border-right: #999 dotted 1px; background: none; display:inline-block; vertical-align:top; width:33%; } #left-box .col4 ul li { border-right: #999 dotted 1px; background: none; display:inline-block; vertical-align:top; width:24%; } #left-box .section ul li:nth-last-child(1) { border:0; } #right-box .section ul li { background: none; font-size:18px; padding: 0; } #right-box .section ul { padding: 10px 20px; list-style: none; } #right-box .section hr { margin:0 20px; border-top:1px dotted #ccc; border-collapse:collapse; } #left-box .section ul ul li { clear:both; display: block; font-size:12px; border:0; margin:10px 20px; border:0px solid #fcc; width:auto; } #left-box .section ul ul ul li { display:inline-block; font-size:11px; font-weight:normal; margin:1px 0; padding-right:10px; margin-right:10px; border-right:1px solid #999; } #left-box .section ul li a { font-size:16px; font-weight:bold; } #right-box .section ul li a { font-size:12px; font-weight:normal; display:block; clear:both; text-transform:none; padding:5px; } #left-box .section ul ul li a { font-size:14px; text-transform:none; font-weight:bold; } #right-box .section ul ul li a { text-transform:none; font-weight:normal; } #left-box .section ul ul ul li a { font-size:12px; background:0; padding:0; font-weight:normal; } @media only screen and (max-width: 450px) { #left-box .section ul { clear:both; display:block; } #left-box .section ul ul { clear:both; display:block; border:0px solid #ccc; } #left-box .section ul ul ul { clear:both; display:block; } #left-box .section ul li { clear:both; display:block; border:0px solid #ccc; width:100%; } #left-box .section ul ul li { clear:both; display:block; } #left-box .section ul ul ul li { clear:both; display:block; border:0px; margin:0; } #left-box .section ul ul ul li:nth-last-child(1) { clear:both; display:block; border:0px; } #left-box .section ul li a { clear:both; display:block; } #left-box .section ul ul li a { clear:both; display:block; } #left-box .section ul ul ul li a { clear:both; display:block; margin:1px; padding:10px; border-bottom: 1px solid #ccc; } #sitemap-container #left-box{ width:100%; clear:both} #sitemap-container #right-box{ float:left; } .col1{ width:100%; clear:both; } .col2{ width:100%; clear:both; } .col3{ width:100%; clear:both; } .col2 ul li { width:100%; } .col2 ul li:nth-last-child(1) { width:100%; } } @media only screen and (min-width: 451px) and (max-width:768px) { #left-box .section ul { clear:both; display:block; } #left-box .section ul ul { border:0px solid #ccc; } #left-box .section ul ul ul { border:0px solid #ccc; clear:both; display:block; } #left-box .section ul li { float:left; width:33%; display:block; } #left-box .section ul ul li { display:block; width:90%; } #left-box .section ul ul ul li { clear:both; display:block; border:0px; margin:0; } #left-box .section ul ul ul li:nth-last-child(1) { clear:both; display:block; border:0px solid #ccc; } #left-box .section ul li a { clear:both; display:block; } #left-box .section ul ul li a { clear:both; display:block; } #left-box .section ul ul ul li a { clear:both; display:block; margin:1px; padding:10px; border-bottom: 1px solid; } #sitemap-container #left-box{ width:100%; clear:both} #sitemap-container #right-box{ float:left; } .col1{ width:100%; clear:both; } .col2{ width:100%; clear:both; } .col3{ width:100%; clear:both; } .col2 ul li { width:100%; } .col2 ul li:nth-last-child(1) { width:100%; } }