body { margin: 0; padding: 0; background-color: #ffffff; } #navcontainer { display: block; margin: 0; padding: 0; position: fixed; height: 100%; width: 340px; background-color: #404527; box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2); font: 14px Signika,Tahoma,Helvetica,sans-serif; z-index: 1000; } #nav { display: block; margin: 0; padding: 0; position: absolute; height: 100%; width: 300px; overflow: hidden; box-shadow: 3px 0 3px 0 rgba(0,0,0,0.2); } nav.metaanim { transition: transform 0.2s; -webkit-transition: -webkit-transform 0.2s; } #logo img { display: block; border: 0; } #breadcrumbs { position: absolute; width: 40px; height: 100%; right: 0; top: 0; } a#menu { width: 40px; height: 40px; background: url(./../../styles/meta/img/?f=menu&c=dcded3) no-repeat center center; position: absolute; right: 0; top: 0; display: none; } .metanavopen a#menu { background-image: url(./../../styles/meta/img/?f=close&c=dcded3); } #breadcrumbs>div { transform-origin: 0 0; transform: rotate(90deg); -webkit-transform-origin: 0 0; -webkit-transform: rotate(90deg); -ms-transform-origin: 0 0; -ms-transform: rotate(90deg); width: 1200px; height: 40px; position: absolute; top: 20px; left: 28px; color: #dcded3; text-transform: uppercase; } #breadcrumbs>div>a { color: #dcded3; text-decoration: none; padding: 0 10px; letter-spacing: 1px; transition: color 0.2s; -webkit-transition: color 0.2s; } #breadcrumbs>div>a:hover { color: #909c57; } nav { display: block; margin: 0; padding: 0; position: absolute; height: 100%; width: 300px; } nav ul { display: block; list-style: none; margin: 0; padding: 10px 0 0 0; width: 300px; background-color: #404527; } nav>ul ul { position: absolute; top: 0; left: 300px; height: 100%; } nav li.ngmetamore>a { background: url(./../../styles/meta/img/?f=more&c=dcded3) no-repeat right center; } nav li.ngmetaback>a { background: url(./../../styles/meta/img/?f=back&c=dcded3) no-repeat right center; } nav li.ngmetahome>a { background: url(./../../styles/meta/img/?f=home&c=dcded3) no-repeat right center; } nav li.ngmetaactive>a { background-color: #909c57; } nav li.ngmetaheader>a { font-size: 18px; } nav ul>li { display: block; margin: 0; padding: 0; } nav ul>li>a { padding: 10px 20px; color: #dcded3; display: block; text-decoration: none; text-transform: uppercase; background-color: #404527; letter-spacing: 1px; transition: background-color 0.2s; -webkit-transition: background-color 0.2s; } nav ul>li>a:hover { background-color: #909c57; } nav ul>li.ngmetaback>a:hover { background-color: #527393; } #search { display: block; margin: 0; padding: 40px 20px; width: 260px; bottom: 0; left: 0; position: absolute; background-color: #404527; } #search input { display: block; left: 20px; top: 20px; width: 260px; padding: 10px 20px 10px 35px; background-color: #404527; border: 1px solid rgba(220,222,211,0.2); color: #dcded3; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background: url(./../../styles/meta/img/?f=search&c=dcded3) no-repeat 10px center; font: 14px Signika,Tahoma,Helvetica,sans-serif; } #eyecatcher { display: block; width: 100%; border: 0; position: relative; overflow: hidden; border-bottom: 1px solid #eeeeee; } #eyecatcher img { display: block; border: 0; position: absolute; width: 100%; } #eyecatcher img.metaeyepri { z-index: 1; transition: none; -webkit-transition: none; opacity: 1; } #eyecatcher img.metaeyesec { z-index: 2; transition: none; -webkit-transition: none; opacity: 0; } #eyecatcher img.metaeyesecout { transition: opacity 0.5s; -webkit-transition: opacity 0.5s; opacity: 1; } #metabullets { position: absolute; right: 10px; bottom: 10px; z-index: 200; } #metabullets::after { content: ''; clear: both; display: block; } #metabullets a { display: block; width: 27px; height: 27px; background: url(./../../styles/meta/img/?f=bullet&c=404527) no-repeat left top; float: left; } #metabullets a.active { background-position: left bottom; } #pagecontainer { margin-left: 320px; } #maincontainer { width: 740px; padding: 40px; margin-left: 10%; margin-top: 30px; } #header { width: 740px; margin-bottom: 40px; } #sidebarleft { float: left; margin-right: 40px; min-height: 1px; } #content { float: left; } #main:after { content: ' '; display: block; clear: both; } #sidebarright { float: left; margin-left: 40px; min-height: 1px; } #footer { width: 740px; margin-top: 40px; } #common { margin: 40px 40px 0 40px; padding: 20px 0; border-top: 1px solid #eeeeee; text-align: center; } #common a { text-decoration: none; color: #444444; padding: 0 10px; } #common a:hover { color: #909c57; } #audiowish, #audiowoosh { display: none; } @media (max-width: 1400px) { #maincontainer { margin-left: 5%; margin-top: 20px; } } @media (max-width: 1200px) { #navcontainer { transform: translate(-300px, 0); transition: transform 0.2s; -webkit-transform: translate(-300px, 0); -webkit-transition: -webkit-transform 0.2s; } #pagecontainer { margin-left: 40px; } a#menu { display: block; } #breadcrumbs { top: 40px; } #breadcrumbs>div { top: 0; } #navcontainer.metanavopen { transform: translate(0, 0); -webkit-transform: translate(0, 0); } #maincontainer { margin-left: 40px; } } @media (max-width: 1000px) { #maincontainer { margin-left: 0; margin-top: 0; } }