body, html { margin: 0px; padding: 0px; background-color: #f5f6f7; } .aurumcenter { width: 1220px; margin: 0 auto; position: relative; } #topbox { width: 100%; margin: 0; padding: 0; height: 330px; overflow: hidden; position: relative; min-width: 990px; background-color: #444444; } #contentbox { min-width: 990px; } #topboxoverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #topboxbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; border-bottom: 1px solid rgba(255,255,255,0.3); background-color: rgba(0,0,0,0.2); } #topboxoverlay>div { height: 330px; } #topbox h1 { display: block; position: absolute; top: 170px; left: 0; color: #ffffff; text-shadow: 0px 0px 8px #000000; font-weight: normal; letter-spacing: -2px; padding: 0; font-size: 48px; } #aurumcaption { left: 320px; bottom: 22px; position: absolute; color: #ffffff; text-shadow: 0px 0px 8px #000000; font-style: italic; transition: opacity 0.75s; opacity: 1; } #aurumcaption.aurumhidden { transition: opacity 0.0s; opacity: 0; } #logo { display: block; position: absolute; border: 0; left: 0; top: 0; } #logosmall { display: none; position: absolute; left: 0; top: 0; } #breadcrumbs { display: block; position: absolute; top: 80px; color: #ffffff; text-shadow: 0px 0px 8px #000000; width: 100%; } #breadcrumbs a { color: #ffffff; text-decoration: none; } #breadcrumbs a:hover { text-decoration: underline; } #topbox>ul { display: block; margin: 0; padding: 0; position: absolute; width: 100%; transition: transform 0.5s cubic-bezier(0.75, 0, 0.25, 1); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.75, 0, 0.25, 1); } #topbox>ul>li { display: block; list-style: none; margin: 0; padding: 0; width: 100%; height: 330px; overflow: hidden; } #topbox>ul>li>img { display: block; width: 100%; } #commonnav { display: block; position: absolute; right: 0; top: 0; text-align: right; box-sizing: border-box; padding: 20px 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } #commonnav.aurumsearch { right: 80px; } #commonnav.aurumsearchactive { opacity: 0; } #topbox form { display: block; position: absolute; right: 0; height: 20px; top: 14px; margin: 0; padding: 0; } #topbox form input { width: 20px; height: 20px; padding: 6px 22px 6px 6px; margin: 0; background: rgba(0,0,0,0.6) url(../../styles/aurum/img/?f=search&c=ffffff) no-repeat right center ; border: none; color: #ffffff; transition: width 0.2s; -webkit-transition: width 0.2s; font: 14px/20px 'Open Sans',Verdana,Helvetica,sans-serif; -webkit-appearance: none; border-radius: 4px; outline: none; } #topbox form input.aurumsearchactive { width: 240px; } #topbox form button { width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; position: absolute; left: -9999px; } #commonnav a { padding-left: 20px; display: block; float: right; color: #ffffff; text-decoration: none; text-transform: uppercase; text-shadow: 0px 0px 8px #000000; } #commonnav a:hover { text-decoration: underline; } #aurumbullets { height: 21px; position: absolute; bottom: 20px; right: 0; } #aurumbullets>div { width: 17px; height: 17px; margin: 2px; float: left; background: url(../../styles/aurum/img/?f=bullet&c=ffffff) no-repeat 0 0; cursor: pointer; } #aurumbullets div.aurumbulletactive { background-position: 0 -17px; } #navigation { display: block; margin: 0; padding: 0; list-style: none; background-color: #ffffff; width: 268px; position: absolute; left: 0; top: -60px; z-index: 1000; } #navigation li { display: block; padding: 0; margin: 0; position: relative; } #navigation li.ngaurummenuwithchilds { background: url(../../styles/aurum/img/?f=more&c=3b5d75) no-repeat right center; } #navigation li>a { display: block; padding: 20px; margin: 0; text-decoration: none; border-bottom: 1px dotted #cccccc; color: #3b5d75; text-transform: uppercase; transition: padding 0.2s; -webkit-transition: padding 0.2s; } #navigation li.ngaurummenuopen>a, #navigation li:hover>a { padding: 20px 10px 20px 30px; } #navigation li.active>a { font-weight: bold; } #navigation ul { display: block; position: absolute; margin: 0; padding: 0; left: -9999px; top: 0; width: 268px; background-color: #ffffff; transition: transform 0.2s, opacity 0.2s; transform: translate(-10px,0); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -webkit-transform: translate(-10px,0); opacity: 0; z-index: 1100; } #navigation li { transition: background-color 0.3s; -webkit-transition: background-color 0.3s; } #navigation li.ngaurummenuopen, #navigation li:hover { background-color: #e6ecf0; } #navigation li.ngaurummenuopen>ul { left: 100%; transform: translate(0,0); -webkit-transform: translate(0,0); opacity: 1; } #maincontainer { width: 900px; padding-left: 320px; padding-top: 60px; } #header { width: 900px; margin-bottom: 60px; } #footer { width: 900px; margin-bottom: 60px; } #sidebarleft { float: left; margin-right: 60px; min-height: 1px; margin-bottom: 60px; } #content { float: left; margin-bottom: 60px; } #sidebarright { float: left; margin-left: 60px; min-height: 1px; margin-bottom: 60px; } #aurummenu { position: absolute; width:24px; height: 24px; background: url(../../styles/aurum/img/?f=menu&c=ffffff) no-repeat 0 0; bottom: 18px; left: 0; cursor: pointer; } #commonhierarchical { border-top: 1px dotted #cccccc; display: block; margin: 0 0 60px 0; padding: 30px 0 0 0; list-style: none; } #commonhierarchical em { display: block; padding: 0 0 15px 0; font-style: normal; font-size: 110%; color: #3b5d75; } #commonhierarchical a { display: block; padding: 4px 0; color: #444444; text-decoration: none; } #commonhierarchical a:hover { text-decoration: underline; } #commonhierarchical>li { display: block; float: left; margin: 0; padding: 0 0 0 40px; box-sizing: border-box; } #commonhierarchical>li:first-child { padding: 0; } #commonhierarchical>li>ul { display: block; list-style: none; margin: 0; padding: 0; } #commonhierarchical::after { content: ''; clear: both; display: block; } @media (max-width: 1279px) { .aurumcenter { width: 900px; } #navigation { left: -9999px; transform: translate(-10px,0); -webkit-transform: translate(-10px,0); opacity: 0; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; } #topbox h1 { top: 200px; } #navigation.ngaurummenuvisible { left: 0px; transform: translate(0,0); -webkit-transform: translate(0,0); opacity: 1; } #maincontainer { padding-left: 0px; padding-top: 30px; } #header, #footer, #sidebarleft, #content, #sidebarright { margin-bottom: 30px; } #logo { display: none; } #logosmall { display: block; } #aurumcaption { left: 60px; } } @media (min-width: 1500px) { .aurumcenter { width: 1320px; } #navigation, #navigation ul { width: 368px; } #maincontainer { padding-left: 420px; } #aurumcaption { left: 420px; } }