/** * Project style sheet. * * @package vanilla * @subpackage css * @author Loops * @version SVN: $Id: styles.css 1 2013-01-14 10:30:16Z loops $ */ /* declare the default font and color here */ html, body { height: 100%; } body, button, input, select, textarea { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; background: #fbfafa; color: #263d47; } html { font-size: 10px; font-size: 62.5% /* = 10px */; } img, embed, object, video { max-width: 100%; } .site-width { width: 89.8437%; padding: 25px 0 0 4.8828%; } #wrapper { padding-top: 196px; } /* = fixed header height */ /* fonts */ .font-0 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* default font family */ .font-1 { font-family: 'libre_baskervilleitalic', Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; } /* secondary font family */ /* colors */ .cl-0 { color: #263d47 } /* default color */ .cl-1 { color: #566d77 } /* secondary color */ .cl-3 { color: #1122cc } /* third color */ /* selection */ ::-moz-selection { color: white; background: #263d47; } ::selection { color: white; background: #263d47; } /* links */ a { color: #1122cc; text-decoration: underline; } a:hover, a:focus { text-decoration: none; } .link-more { color: #1122cc; font-family: 'libre_baskervilleitalic', Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif } .link-more:before { content:""; display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-left: 8px solid #1122cc; border-bottom: 4px solid transparent; margin-right: 6px } /* headlines */ .headline { background: #263d47 url(images/title-main.bg.png) left top repeat-x; margin: 0 0 30px 0; position: relative; padding: 48px 4.8828% 48px 4.8828%; } .headline-title { font-weight: normal; color: white; font-size: 22px; font-size: 2.2rem; margin: 0; } .headline .headline-back { position: absolute; bottom: 0; } /* Banners */ .headline.headline-risk { background: #263d47 url(images/bg-risk.jpg) left top no-repeat; background-size: cover; } .headline.headline-governance { background: #263d47 url(images/bg-governance.jpg) left top no-repeat; background-size: cover; } .headline.headline-substance { background: #263d47 url(images/bg-substance.jpg) left top no-repeat; background-size: cover; } .headline.headline-compliance { background: #263d47 url(images/bg-compliance.jpg) left top no-repeat; background-size: cover; } h2, h3, h4, h5, h6 { color: #263d47; font-weight: normal; } h2, .h2 { text-transform: uppercase; font-size: 16px; font-size: 1.6rem; border-bottom: 1px solid #263d47; display: block; padding-bottom: 10px; font-weight: bold; margin: 18px 0 10px 0; } h3, .h3 { text-transform: none; font-weight: normal; border: none; padding: 0; font-size: 16px; font-size: 1.6rem; font-family: 'libre_baskervilleitalic', Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; } h4, .h4 { text-transform: none; font-weight: normal; font-size: 14px; font-size: 1.4rem; font-family: 'libre_baskervilleitalic', Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif } h5, .h5 { font-size: 11px; font-size: 1.1rem; text-transform: uppercase; font-weight: bold } h6, .h6 { font-size: 11px; font-size: 1.1rem; text-transform: uppercase; font-weight: bold; padding-left: 20px; } h2:first-child { margin-top: 0; } /* lists */ dl dt { font-family: 'libre_baskervilleitalic', Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; color: #263d47; font-size: 1.6rem } dl dd { margin: 0; padding: 0 } dl dd + dt, ul li + li, ol li + li { border-top: 1px solid #ccc; margin-top: 8px; padding-top: 8px; } ul li.active + li { border-top: none; margin-top: 8px; padding-top: 8px; } /* forms */ form input[type=text] { background: #ebf1f3; border: 1px solid #263d47; min-width: 100%; padding: 8px; } form input[type=text]:hover { background: white; color: #263d47; } form input[type=text]:focus { color: #1122cc; border-color: #1122cc; } /* buttons */ .button { background: #263d47; color: white; border: none; padding: 6px 14px; font-family: 'libre_baskervilleitalic', Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman"; text-decoration: none; display: inline-block; } .button:hover { background: #1122cc; } .button:focus { background: #091585; } .button:before { content:""; display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-left: 8px solid white; border-bottom: 4px solid transparent; margin-right: 7px } /* accessibility */ .assistive-text { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } a.assistive-text:active, a.assistive-text:focus { border-top: 2px solid #FF0914; border-bottom: 2px solid #FF0914; color: #FF0914; padding: 5px 10px; clip: auto !important; position: absolute; right: 5px; text-decoration: underline; top: 60px; z-index: 1; font: 20px 'oswaldregular'; text-transform: uppercase; outline-color: #fff; } /* * HEADER ----------------------------------- */ #header { background: white; height: 196px; overflow: hidden; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; position: fixed; top: 0; left: 0; right: 0; z-index: 500; -moz-transition: height 200ms ease-in-out; -webkit-transition: height 200ms ease-in-out; -o-transition: height 200ms ease-in-out; transition: height 200ms ease-in-out; } /* JS Scroll */ .js-scroll #header { height: 51px; } .js-scroll #header .site-width { padding: 0 0 0 4.8828%; } .js-scroll #header #header-content-logo { position: relative; top: 8px; } .js-scroll #header #header-content-logo a { margin: 0; padding: 0; background: url(images/sprite.png) left top no-repeat; width: 95px; height: 36px; display: block; } .js-scroll #header #header-content-logo a img { display: none; } /* * CONTENT ----------------------------------- */ #content { color: #566d77; font-size: 13px; font-size: 1.3rem } #content-main { margin-bottom: 30px; } #content-main img{height:auto !important} /* Services list */ .services-list { margin-bottom: 50px; } .services-list li + li { margin-top: 25px; padding-top: 25px } .services-list li a { position: relative; padding-left: 120px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; text-decoration: none; color: #566d77 } .services-list li a:before { content:""; display: block; width: 71px; height: 67px; position: absolute; left: 0; top: 0; } .services-list-risk a:before { background: url(images/sprite.png) left -37px no-repeat; } .services-list-governance a:before { background: url(images/sprite.png) left -104px no-repeat; } .services-list-substance a:before { background: url(images/sprite.png) left -171px no-repeat; } .services-list-compliance a:before { background: url(images/sprite.png) left -238px no-repeat; } .services-list li a .fake-link { text-decoration: underline } .services-list li a:hover .fake-link { text-decoration: none } .services-list li a:hover .services-list-title { color: #1122cc; text-decoration: underline; } /* News list */ .news-list li + li { margin-top: 25px; padding-top: 25px } .news-list li a { display: block; text-decoration: none; color: #566d77; } .news-list li .news-list-title { margin: 0; } .news-list li .news-list-img { display: inline; float: left; margin: 0 50px 30px 0; } .news-list li a .fake-link { text-decoration: underline } .news-list li a:hover .fake-link { text-decoration: none } .news-list li a:hover .news-list-title { color: #1122cc; text-decoration: underline; } /* Download Center */ #content-main h3 + .download-center-list, #content-main h4 + .download-center-list, #content-main h5 + .download-center-list, #content-main h6 + .download-center-list { margin-top: 0 } /* Contact Persons */ .contact-persons { margin-top: 20px } .contact-persons li + li { margin-top: 0; padding-top: 0; border: none } .contact-persons { margin-left: -17px; } .contact-persons li { float: left; width: 25%; padding-left: 17px; margin-bottom: 25px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .contact-persons .contact-persons-name { margin: 10px 0 5px 0; text-transform: uppercase; font-size: 13px; font-size: 1.3rem; font-weight: bold; } .contact-persons .contact-persons-title { margin: 5px 0; } /* Contact Adresses */ .contact-adresses { margin-bottom: 10px; } .contact-adresses { display: block; font-style: normal } .contact-adresses .contact-sidebar-tel:before,.contact-sidebar-fax:before{ background:none; content:"T "; font-weight:bold; display:inline; color:#263d47; } .contact-adresses .contact-sidebar-fax:before{ content:"F "; } /* Contact gmap */ .gmap-container {width:100%;height:640px} .gmap {width:100%;height:640px} .gmap img {max-width:none} /* * ASIDE ----------------------------------- */ #aside .aside-box { width: 48%; float: left } #aside .aside-box + .aside-box { float: right; clear:right } #aside .aside-box h3 { border-bottom: 1px solid #263d47; display: block; padding-bottom: 10px } #aside .aside-box ul { margin-bottom: 15px } #aside .aside-box ul li a { color: #566d77; text-decoration: none; display: block } #aside .aside-box ul li a:hover, #aside .aside-box ul li a:focus, #aside .aside-box ul li a.aside-link-more:hover, #aside .aside-box ul li a.aside-link-more:focus { color: #1122cc; text-decoration: underline; } #aside .aside-box ul li a.aside-link-more { color: #7b8b92; font-size: 11px; font-size: 1.1rem; text-decoration: underline; display: inline } #aside .brochures {padding:20px 0; margin:-25px 0 50px 0} #aside .brochures li, #aside .brochure a {border:none;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;font-family:'libre_baskervilleitalic',Baskerville,"Baskerville Old Face","Hoefler Text",Garamond,"Times New Roman",serif;font-size:1.2rem;font-weight:normal;text-transform:none;display:block;width:50%;text-align:center;float:left;margin:0;padding:0} #aside .brochure a {margin-bottom:20px !important;float:none;} #aside .brochures li a, #aside .brochure a{border:none;display:block;padding:5px; margin:2px; color:white;text-decoration:none;text-shadow:0 1px 2px rgba(0, 0, 0, 0.5);} #aside .brochures li.risk a, #aside .brochure a.risk {background: #e91019; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U5MTAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMjBmMTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #e91019 0%, #d20f17 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e91019), color-stop(100%,#d20f17)); background: -webkit-linear-gradient(top, #e91019 0%,#d20f17 100%); background: -o-linear-gradient(top, #e91019 0%,#d20f17 100%); background: -ms-linear-gradient(top, #e91019 0%,#d20f17 100%); background: linear-gradient(to bottom, #e91019 0%,#d20f17 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e91019', endColorstr='#d20f17',GradientType=0 ); } #aside .brochures li.governance a, #aside .brochure a.governance {background: #ffca30; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2EzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWI2MmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffca30 0%, #e5b62c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffca30), color-stop(100%,#e5b62c)); background: -webkit-linear-gradient(top, #ffca30 0%,#e5b62c 100%); background: -o-linear-gradient(top, #ffca30 0%,#e5b62c 100%); background: -ms-linear-gradient(top, #ffca30 0%,#e5b62c 100%); background: linear-gradient(to bottom, #ffca30 0%,#e5b62c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffca30', endColorstr='#e5b62c',GradientType=0 ); } #aside .brochures li.substance a, #aside .brochure a.substance {background: #cfdb3d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NmZGIzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiOWM0MzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #cfdb3d 0%, #b9c437 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfdb3d), color-stop(100%,#b9c437)); background: -webkit-linear-gradient(top, #cfdb3d 0%,#b9c437 100%); background: -o-linear-gradient(top, #cfdb3d 0%,#b9c437 100%); background: -ms-linear-gradient(top, #cfdb3d 0%,#b9c437 100%); background: linear-gradient(to bottom, #cfdb3d 0%,#b9c437 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfdb3d', endColorstr='#b9c437',GradientType=0 ); } #aside .brochures li.compliance a, #aside .brochure a.compliance {background: #a99f9d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5OWY5ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ODhlOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #a99f9d 0%, #988e8c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a99f9d), color-stop(100%,#988e8c)); background: -webkit-linear-gradient(top, #a99f9d 0%,#988e8c 100%); background: -o-linear-gradient(top, #a99f9d 0%,#988e8c 100%); background: -ms-linear-gradient(top, #a99f9d 0%,#988e8c 100%); background: linear-gradient(to bottom, #a99f9d 0%,#988e8c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a99f9d', endColorstr='#988e8c',GradientType=0 ); } #aside h3:first-child {margin-top:0px} #aside .subnav {background:#fafafa} #aside .subnav li.active {background:#263c47;position:relative;padding:5px 0;color:#fff;font-weight:bold} #aside .subnav li.active:before {border-top: 13px solid transparent;border-bottom: 13px solid transparent; border-right:13px solid #263c47; position:absolute;left:-13px;top:0px;content:""} /* * FOOTER ----------------------------------- */ #footer { background: white; box-shadow: 0 0 5px #ccc; padding-bottom: 25px; margin-top: 40px; } /* Navigation */ #nav-group { position: fixed; z-index: 1000 } #nav-group ul { display: block } #nav-group ul li { display: block; float: left } #nav-group ul li + li { margin: 0; padding: 0; border: 0 } /* Navigation - Primary */ #nav-group #nav-primary { position: fixed; top: 163px; left: 16.6015%; -moz-transition: top 200ms ease-in-out; -webkit-transition: top 200ms ease-in-out; -o-transition: top 200ms ease-in-out; transition: top 200ms ease-in-out; } #nav-group #nav-primary li + li { margin-left: 30px } #nav-group #nav-primary li a { font-size: 15px; font-size: 1.5rem; color: #263d47; text-decoration: none; display: block; padding-bottom: 15px; background: url(images/nav-link-current.bg.png) center 50px no-repeat; -moz-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } #nav-group #nav-primary li a:hover, #nav-group #nav-primary li a:focus, #nav-group #nav-primary li a.current { background-position: center bottom } /* Navigation - Secondary */ #nav-group #nav-secondary { position: fixed; top: 163px; right: 4.8828%; text-align: right; -moz-transition: top 200ms ease-in-out; -webkit-transition: top 200ms ease-in-out; -o-transition: top 200ms ease-in-out; transition: top 200ms ease-in-out; } #nav-group #nav-secondary li + li { margin-left: 15px } #nav-group #nav-secondary li a { font-size: 12px; font-size: 1.2rem; color: #7b8b92; text-decoration: none } #nav-group #nav-secondary li a:hover, #nav-group #nav-secondary li a:focus { color: #1122cc; text-decoration: underline; } #nav-group #nav-secondary li a.current { color: #263d47; text-decoration: underline; } #nav-group #nav-secondary .nav-langs { border-left: 1px solid #ccc; float: left; padding-left: 15px; } #nav-group #nav-secondary .nav-langs li + li { margin-left: 10px } /* Navigation - JS Scroll */ .js-scroll #nav-group #nav-primary, .js-scroll #nav-group #nav-secondary { position: fixed; top: 18px; } /* Footer content */ #footer { position: relative; } #footer a { color: #7b8b92; } #footer a:hover, #footer a:focus { color: #1122cc; } #footer .footer-baseline { font-size: 14px; font-size: 1.4rem; text-align: right; position: relative; float: left; position: relative; top: -20px; } #footer .footer-baseline:after { content: ""; width: 23px; height: 1px; background:#263d47; display: block; position: absolute; top: 42px; left: 68px } #footer .footer-baseline:before { content: ""; width: 51px; height: 48px; background:#263d47; display: inline-block; background: url(images/sprite.png) 0 -306px no-repeat; margin-right: 55px; position: relative; top: 20px; } #footer .footer-disclamer { float: left; display: block; position: relative; padding: 13px 0 13px 42px; left: 65px; top: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #footer .footer-disclamer:before { content: ""; display: block; background: url(images/logo-certif.gif); width: 180px; height: 42px; position: absolute; left: 0; top: 0; } #footer .footer-legal, #footer .footer-signature { font-size: 11px; font-size: 1.1rem; color: #bfc6c9; } #footer .footer-box { float: right; } #footer .footer-box + .footer-box { border-right: 1px solid #ccc; margin-right: 35px; padding-right: 35px } #footer .footer-box h3 { font-size: 14px; font-size: 1.4rem; margin-bottom: 5px } #footer .footer-box ul li + li { margin-top: 2px; border: none; margin-bottom: 2px; padding: 0; } #footer .footer-box a.social { width: 55px; display: inline-block; text-decoration: none; border: 1px solid #ccc; padding: 5px 6px 5px 32px; border-radius: 3px; position: relative } #footer .footer-box a.social:hover, #footer .footer-box a.social:focus { border-color: #1122cc } #footer .footer-box a.social.twitter:before { content:""; display: block; background: url(images/sprite.png) 0 -355px no-repeat; width: 16px; height: 13px; position: absolute; top: 6px; left: 7px } #footer .footer-box a.social.linkedin:before { content:""; display: block; background: url(images/sprite.png) -16px -355px no-repeat; width: 20px; height: 20px; position: absolute; top: 3px; left: 5px } /*** Media queries ***/ /* these media queries are just samples */ /* use appropriate queries to fit the design */ @media screen and (min-width: 1024px) { /* Globals */ .site-width { max-width: 1200px; padding: 25px 0 0 4.8828% } /* Content */ #content-main { width: 76.6666%; float: left; } /* Aside */ #aside { width: 19.1666%; float: right; } #aside .aside-box { width: 100%; float: none } #aside .aside-box + .aside-box { float: none; margin-top: 30px } } @media screen and (max-width: 1050px) { /* Navigation */ #nav-group { position: relative; } #nav-group #nav-primary { left: auto; right: 4.8828%; } .js-scroll #nav-group #nav-secondary, #nav-group #nav-secondary { position: relative; top: 0; left: 0; float: left; } #footer .footer-disclamer { position: absolute; left: 4.8828%; top: 108px; } } @media screen and (max-width: 728px) { /* Globals */ .site-width { padding: 8px 0px 0px 4.8828%; } #wrapper { padding-top: 51px; } /* Header */ #header { height: 51px; } #header .site-width { padding: 0 0 0 4.8828%; } #header #header-content-logo { position: relative; top: 8px } #header #header-content-logo a { margin: 0; padding: 0; background: url(images/sprite.png) left top no-repeat; width: 95px; height: 36px; display: block; } #header #header-content-logo a img { display: none; } /* Contact Persons */ .contact-persons li { width: 33.3333% } /* Footer */ #footer { text-align: center } #footer .footer-baseline { float: none; width: 100%; text-align: center; top: 0; border-bottom: 1px solid #ccc; margin-bottom: 8px; padding-bottom: 20px } #footer .footer-baseline:before { display: block; margin: 0 auto 40px auto; top: 0 } #footer .footer-baseline:after { left: 50%; top: 55px; height: 23px; width: 1px; } #footer .footer-disclamer { position: relative; left: 0; top: 0; float: left; width: 100%; text-align: left; border-bottom: 1px solid #ccc; margin-bottom: 8px; padding-bottom: 20px } #footer .footer-box { float: left; width: 49.5% } #footer .footer-box + .footer-box { margin: 0; padding: 0; border: none; border-left: 1px solid #ccc; } #footer .footer-box .twitter-timeline { width: 50% !important } #nav-group #nav-primary { position: fixed; top: 18px; } .js-scroll #nav-group #nav-secondary, #nav-group #nav-secondary { position: relative; top: 0; left: 0; float: none; width: 100%; text-align: center; border-top: 1px solid #ccc; padding-top: 20px } #nav-group #nav-secondary ul li { float: none; display: inline-block; } #nav-group .assistive-text.menu-title { clip: rect(auto, auto, auto, auto) !important; position: fixed !important; margin: 0; padding: 0; top: 15px; right: 15px; z-index: 5000 } #nav-group .assistive-text.menu-title a { display: block; height: 18px; width: 27px; text-indent: -9999px; overflow: hidden; background: white url(images/sprite.png) right bottom no-repeat; } #nav-group #nav-primary { position: relative; top:0; left: 0; width: 100%; } #nav-group #nav-primary li { float: none; } #nav-group #nav-primary li + li { margin: 5px 0 0 0} #nav-group #nav-primary li a { background: #f1f1f1; padding: 0; padding: 10px 0 } #nav-group #nav-primary li a:hover, #nav-group #nav-primary li a:focus, #nav-group #nav-primary li a.current { background: #263d47; color: white; } #nav-group #nav-secondary ul li { display: block } #nav-group #nav-secondary ul li a { display: block; padding: 10px; } #nav-group #nav-secondary ul li + li { margin: 0; border-top: 1px solid #ccc; } .js-scroll #nav-group #nav-primary, .js-scroll #nav-group #nav-secondary { position: relative; top: 0; border: none; padding: 0 } #nav-group #nav-secondary .nav-langs { border-left: none; float: none; padding-left: 0; width: 100%; text-align: center } #nav-group #nav-secondary .nav-langs li { display: inline-block } #nav-group #nav-secondary .nav-langs li + li { margin-left: 0; border: none; } } @media screen and (max-width: 530px) { /* Content */ .headline { margin: 0 0 20px 0; padding: 25px 4.8828% 25px 4.8828%; } .headline-title { font-weight: normal; color: white; font-size: 20px; font-size: 2.0rem; margin: 0 } .headline .headline-back { position: absolute; bottom: 0; right: 0; } /* Services list */ .services-list li a { padding-left: 0; text-align: center } .services-list li a:before { position: relative; margin: 0 auto 20px auto; } /* News list */ .news-list li .news-list-img { margin: 0 18px 20px 0; } /* Contact Persons */ .contact-persons li { width: 50% } /* Aside */ #aside .aside-box { width: 100%; float: none; } #aside .aside-box + .aside-box { float: none; } /* Footer */ #footer .footer-box { float: none; width: 100%; text-align: left; } #footer .footer-box + .footer-box { border: none; margin: 0; padding: 0; border-top: 1px solid #ccc; margin-top: 8px; padding-top: 0 } #footer .footer-box .twitter-timeline { width: 100% !important } } @media screen and (max-width: 320px) { /* Contact Persons */ .contact-persons { margin-left: 0; } .contact-persons li { width: 100%; float: left; padding-left: 0; margin-bottom: 0; } .contact-persons li img { float: left; width: 35%; margin-right: 12px; } .contact-persons .contact-persons-name { margin: 0 0 5px 0; } .contact-persons li + li { border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #header #header-content-logo a, .js-scroll #header #header-content-logo a, #nav-group .assistive-text.menu-title a, #footer .footer-box a.social.twitter:before, #footer .footer-box a.social.linkedin:before, #footer .footer-baseline:before, .services-list li a:before { background-image: url(images/sprite_x2.png) !important; background-size: 95px 375px !important; } .headline { background-image: url(images/title-main.bg_x2.png); background-size: 58px 120px; } #footer .footer-disclamer:before { background-image: url(images/logo-certif_x2.gif); background-size: 180px 42px; } }