/* Clearfix */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* Basic Styles */ nav { height: auto; width: 100%; overflow:hidden; /* -family: 'PT Sans', Arial, sans-serif; */ font-weight: bold; font-size: 0.85em; color:#0F0; position: relative; padding: 0; background-color: #EAE5D8; /* border-bottom: 2px solid #555; */ } nav ul { padding: 0; margin: 0; width: 1000px; height: 25px; background-color: #EAE5D8; } nav li { display: inline; padding-top:3px; float: left; } nav a { display: inline-block; min-width: 80px; padding:4px 10px 4px 10px; text-align: center; text-decoration: none; line-height: 10px; } nav li a { border-right: 1px dotted #999; border-left: 1px solid #EAE5D8; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav li:last-child a { border-right: 0; } nav a:hover, nav a:active { color: #EC1C24; background-color: #f8f6ef; } nav a#pull { display: none; } /* TRIAL: Styles for screen 1000px and lower*/ @media screen and (max-width: 1000px) { nav { height: auto; width: 100%; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 16.667%; background-color: #EAE5D8; float: left; position: relative; } nav li a { border-bottom: 1px solid #D3CCBE; border-right: 1px dotted #999; } nav a { text-align: left; width: 100%; padding:3%; font-size: 0.9em; text-indent: 0px; height:23px; padding: 5% 5% 5% 8%; } } /*Styles for screen 600px and lower*/ @media screen and (max-width: 800px) { nav { height: auto; width: 100%; overflow: visible; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 25%; background-color: #EAE5D8; height: float: left; position: relative; } nav li a { border-bottom: 1px solid #D3CCBE; border-right: 1px dotted #999; } nav a { text-align: left; width: 100%; padding:3%; font-size: 0.9em; text-indent: 0px; height:23px; padding: 5% 5% 5% 8%; } } /*Styles for screen 600px and lower*/ @media screen and (max-width: 513px) { nav { height: auto; width: 100%; overflow: hidden; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 50%; float: left; position: relative; } nav li a { border-bottom: 1px solid #D3CCBE; border-right: 1px dotted #999; } nav a { text-align: left; font-size: 1em; width: 100%; padding:3%; text-indent: 15px; height:25px; padding:5px 10px 1px 10px; } } /*Styles for screen 515px and lower */ @media only screen and (max-width : 513px) { nav { border-bottom: 0; margin-bottom: 1%; } nav ul { display: none; height: auto; } nav a#pull { display: block; background-color: #EAE5D8; padding-right:0; margin-right:0; /* border-bottom: 2px solid #555; */ width: 100%; position: relative; } nav a#pull:after { content:""; background: url('http://www.busiweek.com/index.php/img/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } } /*Smartphone*/ @media only screen and (max-width : 320px) { nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #FFF; border-right: 1px solid #EAE5D8; height:25px; padding:5px 10px 3px 10px; } }