@font: "Open Sans", serif; @bgdark: #333; @border: #ff9966; @red: #cc3300; @lightred: #b07a51; @font-color: #fefefe; body, html { font-family: @font; font-size: 12px; font-weight: normal; background-color: @bgdark; color: @font-color; margin: 0px; padding: 0px; width: 100%; } .clear { clear: both; } input, select, textarea { border: 1px solid @border; background-color: #ccc; } .alert { width: 50%; margin: 0 auto; text-align: center; padding: 5px; background-color: #32CD32; border: 2px solid green; } .map { width: 480px; height: 352px; text-align: left; } .banner { width: 100%; text-align: right; height: 150px; } .top-ad-box { width: 100%; text-align: center; min-height: 90px; background-color: #3a474f; } .information-box { width: ~"calc(100% - 10px)"; text-align: center; line-height: 20px; padding: 5px 5px 4px 5px; border-top: 1px solid @border; border-bottom: 1px solid @border; } .nav { width: 175px; border-right: 1px solid @border; float: left; ul { list-style-type: none; margin: 0px; padding: 0px; } ul a { color: @font-color; text-decoration: none; } ul li { width: 100%; padding-top: 3px; padding-bottom: 3px; text-align: center; border-bottom: 1px solid @border; } ul li:hover { background-color: @lightred; } ul li.head { font-weight: bold; background-color: @red; color: @font-color; } } .right { float: left; border-right: 0px; border-left: 1px solid @border; } .content { width: ~"calc(100% - 372px)"; padding: 10px; min-height: 400px; text-align: center; float: left; table { width: 80%; margin: 0 auto; text-align: center; margin-bottom: 10px; } table.t-small { width: 40%; } table.t-large { width: 98%; } .t-border, .t-border th, .t-border td { border: 1px solid white; border-collapse: collapse; padding: 2px; margin: 0 auto; h2 { font-size: 16px; margin: 0px; padding: 0px; } em { margin: 0px; padding: 0px; } } a { color: @font-color; text-decoration: underline; &:hover { color: @red; } } } @media only screen and (max-width: 768px) { /* For mobile phones: */ .nav { width: 95%; margin: 0 auto; border: 1px solid @lightred; float: none; margin-top: 5px; } .content { width: 100vw; margin: 0 auto; float: none; text-align: center; } .right { width: 95%; margin: 0 auto; border: 1px solid @lightred; float: none; margin-top: 5px; } table { width: 100vw; padding: 10px; float: none; } .banner { display: none; } }