body, html { background-color: #2de6ed; margin: 0; } #mainbox { max-width: 1600px; min-width: 960px; width: 100%; margin: 0 auto; background-color: #31aae4; } nav { background-color: #ffffff; } nav>ul { display: block; margin: 0; padding: 0; float: left; z-index: 1000; } nav::after { content: ''; clear: both; display: block; } #caption { margin-bottom: 20px; } #caption h1 { margin-bottom: 10px; } #caption #breadcrumbs { font-size: 90%; } #caption #breadcrumbs a { color: #269956; text-decoration: none; } #caption #breadcrumbs a:hover { color: #269956; text-decoration: underline; } nav img { display: block; float: left; padding: 15px 15px 15px 25px; border: 0; } nav #logosmall { display: none; } nav li { display: block; margin: 0; padding: 0; list-style: none; display: block; position: relative; } nav>ul>li { float: left; } nav li.ngyttriummenuwithchilds { background: url(./../../styles/yttrium/img/?f=down&c=2de6ed) no-repeat right center; padding-right: 10px; } nav li li.ngyttriummenuwithchilds { background: url(./../../styles/yttrium/img/?f=right&c=2de6ed) no-repeat right center; } nav>ul>li ul { display: block; margin: 0; padding: 0; position: absolute; border: 1px solid #31aae4; background-color: #ffffff; opacity: 0; left: -9999px; width: 300px; transition: opacity 0.2s, transform 0.2s; transform: translateY(-20px); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; -webkit-transform: translateY(-20px); z-index: 1010; } nav>ul li.ngyttriummenuopen>ul { opacity: 1; left: 0; transform: translateY(0); -webkit-transform: translateY(0); } nav>ul li li.ngyttriummenuopen>ul { left: 300px; top: -1px; } header { position: relative; overflow: hidden; } header img { width: 100%; display: block; border: 0; position: absolute; } header img.yttriumeyepri { z-index: 1; transition: none; -webkit-transition: none; opacity: 1; } header img.yttriumeyesec { z-index: 2; transition: none; -webkit-transition: none; opacity: 0; } header img.yttriumeyesecout { transition: opacity 0.5s; -webkit-transition: opacity 0.5s; opacity: 1; } #eyecatcherwait { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin:-24px 0 0 -24px; z-index: 3; background: url(./../../styles/yttrium/img/?f=wait) no-repeat center center; opacity: 0; } header.loading #eyecatcherwait { -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; display: block; opacity: 1; transition: opacity 1s; -webkit-transition: opacity 1s; } #yttriumbullets { margin: 10px auto 0 auto; } #yttriumbullets::after { content: ''; clear: both; display: block; } #yttriumbullets a { display: block; width: 20px; height: 20px; background: url(./../../styles/yttrium/img/?f=bullet&c=303332) no-repeat left top; float: left; } #yttriumbullets a.active { background-position: left bottom; } header form { position: absolute; right: 40px; bottom: 40px; margin: 0; padding: 0; height: 47px; width: 367px; display: block; background-color: #ffffff; border-radius: 3px; z-index: 3; } header form input { background-color: #ffffff; padding: 13px 30px 13px 30px; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; border: 0; width: 320px; height: 47px; border-radius: 3px 0 0 3px; color: #444444; font: 15px / 21px 'PT Sans',Tahoma,Helvetica,sans-serif; } header form input::-moz-placeholder { color: #aaaaaa; opacity: 1; } header form input:-ms-input-placeholder { color: #aaaaaa; } header form button { background: #269956 url(./../../styles/yttrium/img/?f=search&c=ffffff) no-repeat center center; display: block; width: 47px; height: 47px; border: none; cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; border-radius: 0 3px 3px 0; transition: background-color 0.5s; -webkit-transition: background-color 0.5s; } header form button:hover { background-color: #9dcbb0; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } nav li a { display: block; padding: 20px; text-decoration: none; color: #444444; -webkit-tap-highlight-color: rgba(0,0,0,0); } nav li.active>a { font-weight: bold; } nav li li:hover { background-color: #31aae4; } #maincontainer { padding: 40px; } #maincontainer::after { content: ''; clear: both; display: block; } #content { padding: 40px; background: #ffffff; width: 880px; box-shadow: 1px 1px 1px rgba(0,0,0,0.1); border-radius: 3px; float: left; } #sidebarright { width: 320px; float: left; margin-left: 60px; } footer { background-color: #303332; color: #2de6ed; padding: 40px 40px 0px 40px; font-size: 90%; } footer>ul { width: 100%; margin: 0; padding: 0 0 40px 0; display: block; } footer>ul>li { width: 25%; margin: 0; padding: 0; display: block; list-style: none; float: left; } footer>ul ul { margin: 0; padding: 0; display: block; } footer>ul>li li { margin: 0; padding: 0; display: block; list-style: none; } footer>ul em { font-style: normal; color: #31aae4; display: block; text-transform: uppercase; padding: 0 10px 10px 0; } footer>ul a { display: block; padding: 0 10px 2px 0; } footer>ul::after { content: ''; clear: both; display: block; } footer>div { padding: 0 0 20px 0; } footer a { color: #2de6ed; text-decoration: none; } footer a:hover { color: #eeeeee; text-decoration: none; } @media (max-width: 1439px) { #sidebarright { display: none; } #content { padding: 0; margin: 0; float: none; box-shadow: none; } #maincontainer { background-color: #ffffff; margin: 0 auto; width: 880px; } #mainbox { width: 100%; margin: 0 auto; background-color: #ffffff; } nav #logo { display: none; } nav #logosmall { display: block; } }