Unified Diff: static/css/styles.css
Issue 29335113:
Issue 2675 - Implemented responsive header for web.eyeo.com (Closed)
Patch Set: Fixed minor css style issues
Created June 16, 2016, 6:05 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« static/acceptable-ads-application.html ('k')
|
static/images/logo.png » ('j')
|
static/js/scripts.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: static/css/styles.css |
| =================================================================== |
| --- a/static/css/styles.css |
| +++ b/static/css/styles.css |
| @@ -1,857 +1,928 @@ |
| -/* |
| - * Fonts |
| - */ |
| -@font-face { |
| - font-family: "Lato"; |
| - font-style: normal; |
| - font-weight: 400; |
| - src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.woff) format('woff'); |
| -} |
| -@font-face { |
| - font-family: "Lato"; |
| - font-style: normal; |
| - font-weight: 700; |
| - src: local("Lato Bold"), local("Lato-Bold"), url(/fonts/Lato-Bold.woff) format('woff'); |
| -} |
| -@font-face { |
| - font-family: "Lato"; |
| - font-style: italic; |
| - font-weight: 400; |
| - src: local("Lato Italic"), local("Lato-Italic"), url(/fonts/Lato-Italic.woff) format('woff'); |
| -} |
| -@font-face { |
| - font-family: "Lato"; |
| - font-style: italic; |
| - font-weight: 700; |
| - src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url(/fonts/Lato-BoldItalic.woff) format('woff'); |
| -} |
| - |
| -/* |
| - * General layout |
| - */ |
| - |
| -body |
| -{ |
| - font-family: Lato, sans-serif; |
| - font-size: 14px; |
| - line-height: 1.4; |
| - color: #747474; |
| - padding: 0; |
| - margin: 0; |
| - padding-top: 78px; |
| -} |
| - |
| -a |
| -{ |
| - color: #7ac142; |
| - text-decoration: none; |
| -} |
| - |
| -a:hover |
| -{ |
| - color: #91e64f; |
| -} |
| - |
| -img |
| -{ |
| - border-width: 0px; |
| -} |
| - |
| -header, |
| -footer, |
| -nav |
| -{ |
| - display: block; |
| -} |
| - |
| -h1, h2, h3, h4, h5, h6 |
| -{ |
| - color: #333; |
| -} |
| - |
| -h1 |
| -{ |
| - font-size:28px; |
| -} |
| - |
| -h2 |
| -{ |
| - font-size:24px; |
| -} |
| - |
| -h3 |
| -{ |
| - font-size:20px; |
| -} |
| - |
| -h4 |
| -{ |
| - font-size:16px; |
| -} |
| - |
| -h5 |
| -{ |
| - font-size:14px; |
| -} |
| - |
| -h6 |
| -{ |
| - font-size:12px; |
| -} |
| - |
| -#header |
| -{ |
| - display: block; |
| - position: absolute; |
| - background-color: #ffffff; |
| - width: 100%; |
| - top: 0; |
| - left: 0; |
| - box-shadow: 0 0 12px rgba(0,0,0, 0.09); |
| - z-index: 10000; |
| -} |
| - |
| -#header.fixed |
| -{ |
| - position: fixed; |
| -} |
| - |
| -#header-content |
| -{ |
| - display: table; |
| - width: 100%; |
| -} |
| - |
| -#logo |
| -{ |
| - display: table-cell; |
| - padding: 13px 0; |
| -} |
| - |
| -#header.fixed #logo |
| -{ |
| - padding: 5px 0; |
| -} |
| - |
| -#menu |
| -{ |
| - display: table-cell; |
| - vertical-align: middle; |
| - width: 100%; |
| -} |
| - |
| -.assistive-text |
| -{ |
| - position: absolute; |
| - clip: rect(1px, 1px, 1px, 1px); |
| -} |
| - |
| -.menu-list |
| -{ |
| - list-style: none; |
| - margin: 0; |
| - padding: 0; |
| - min-height: 36px; |
| - font-size: 14px; |
| - float: right; |
| -} |
| - |
| -.menu-list li |
| -{ |
| - position: relative; |
| - white-space: nowrap; |
| - display: block; |
| - font-size: 15px; |
| - font-weight: bold; |
| - line-height: 36px; |
| - outline-width: 0; |
| - float: left; |
| - margin-right: 1px; |
| -} |
| - |
| -.menu-list li a |
| -{ |
| - color: #979797; |
| - padding: 0 10px; |
| - |
| - -webkit-transition: all 0.3s ease; |
| - -moz-transition: all 0.3s ease; |
| - -o-transition: all 0.3s ease; |
| - transition: all 0.3s ease; |
| -} |
| - |
| -.menu-list li:hover > a, |
| -.menu-list li.current-menu-item > a |
| -{ |
| - color: #373737; |
| -} |
| - |
| -.menu-button |
| -{ |
| - float: right; |
| - margin-left: 25px; |
| -} |
| - |
| -#content:before, |
| -#content:after, |
| -#header:before, |
| -#header:after, |
| -.columns-container:before, |
| -.columns-container:after |
| -{ |
| - content: " "; |
| - display: table; |
| -} |
| - |
| -#content:after, |
| -#header:after, |
| -.columns-container:after |
| -{ |
| - clear: both; |
| -} |
| - |
| -#footer |
| -{ |
| - color: #666; |
| - background-color: #252525; |
| - padding-top: 30px; |
| - padding-bottom: 50px; |
| - font-size: 12px; |
| -} |
| - |
| -#footer a |
| -{ |
| - color: #c2c2c2; |
| -} |
| - |
| -#footer a:hover |
| -{ |
| - color: #ffffff; |
| -} |
| - |
| -#footer-contact |
| -{ |
| - float: right; |
| - margin-right: 10px; |
| -} |
| - |
| -#footer #to-top |
| -{ |
| - background-color: #fff; |
| - box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); |
| - outline-width: 0; |
| - width: 28px; |
| - height: 28px; |
| - position: fixed; |
| - bottom: 37px; |
| - right: 20px; |
| - border-radius: 3px; |
| - color: #999; |
| - text-align: center; |
| - line-height: 28px; |
| - font-size: 20px; |
| - |
| - -webkit-transition: all 0.3s ease; |
| - -moz-transition: all 0.3s ease; |
| - -o-transition: all 0.3s ease; |
| - transition: all 0.3s ease; |
| -} |
| - |
| -#footer #to-top:hover |
| -{ |
| - background-color: #1abc9c; |
| - color: #fff; |
| -} |
| - |
| -#footer #to-top:before |
| -{ |
| - content: "\25B2"; |
| -} |
| - |
| -.content-block, |
| -.page-title h1 |
| -{ |
| - max-width: 1080px; |
| - margin: 0 auto; |
| -} |
| - |
| -.heading |
| -{ |
| - margin: 0; |
| - margin-bottom: 20px; |
| - border-bottom: 1px solid #E2E2E2; |
| - font-weight: normal; |
| - height: 0.7em; |
| -} |
| - |
| -.heading span |
| -{ |
| - padding: 0; |
| - padding-right: 10px; |
| - background-color: #fff; |
| -} |
| - |
| -.centered |
| -{ |
| - text-align: center; |
| -} |
| - |
| -.centered span |
| -{ |
| - padding-left: 10px; |
| -} |
| - |
| -button, .button, .menu-button |
| -{ |
| - display: inline-block; |
| - cursor: pointer; |
| - background-color: #7ac142; |
| - color: #ffffff; |
| - border: none; |
| - border-radius: 3px; |
| - font-size: 14px; |
| - font-weight: bold; |
| - line-height: 36px; |
| - white-space: nowrap; |
| - height: 36px; |
| - padding: 0 20px; |
| -} |
| - |
| -button:hover, |
| -button:focus, |
| -.button:hover, |
| -.button:focus, |
| -.menu-button:hover, |
| -.menu-button:focus |
| -{ |
| - background-color: #7FCF42; |
| - color: #ffffff; |
| -} |
| - |
| -.page-title |
| -{ |
| - background-image: url(/images/subtlenet2.png); |
| - background-color: #e9e9e5; |
| - padding-top: 25px; |
| - padding-bottom: 25px; |
| - margin-bottom: 40px; |
| -} |
| - |
| -.sidebar-left .contact-person |
| -{ |
| - text-align: right; |
| - margin-top: 20px; |
| - float: right; |
| -} |
| - |
| -.sidebar-left .contact-person:first-child |
| -{ |
| - margin-top: 0; |
| -} |
| - |
| -.sidebar-left .contact-person img |
| -{ |
| - border-radius: 3px; |
| -} |
| - |
| -/* |
| - * Page-specific styles |
| - */ |
| - |
| -#home-image-container |
| -{ |
| - background-color: #f0f0f0; |
| - text-align: center; |
| - margin: 0; |
| -} |
| - |
| -#who-we-are |
| -{ |
| - margin-top: 25px; |
| - margin-bottom: 25px; |
| -} |
| - |
| -#our-work |
| -{ |
| - padding-top: 50px; |
| - padding-bottom: 50px; |
| - background-color: #f0f0f0; |
| -} |
| - |
| -#media |
| -{ |
| - margin-top: 25px; |
| -} |
| - |
| -#our-work .heading span |
| -{ |
| - background-color: #f0f0f0; |
| -} |
| - |
| -#our-work .column |
| -{ |
| - text-align: center; |
| -} |
| - |
| -.profile |
| -{ |
| - text-align: center; |
| - margin-top: 0px; |
| - margin-bottom: 30px; |
| -} |
| - |
| -.profile-image, |
| -.country-image |
| -{ |
| - border-radius: 200px; |
| -} |
| - |
| -.country-image |
| -{ |
| - position: absolute; |
| - bottom: 0px; |
| - left: 50%; |
| - margin-left: 30px; |
| -} |
| - |
| -.profile h1 |
| -{ |
| - font-size: 20px; |
| - margin-bottom: 0.3em; |
| -} |
| - |
| -.profile h2 |
| -{ |
| - font-size: 14px; |
| - font-weight: normal; |
| - color: #AAAAAA; |
| - margin-bottom: 0; |
| -} |
| - |
| -.profile h3 |
| -{ |
| - font-size: 14px; |
| - font-weight: normal; |
| - margin-bottom: 1em; |
| -} |
| - |
| -#releases ul |
| -{ |
| - list-style: none; |
| - padding: 0px; |
| -} |
| - |
| -#releases li div |
| -{ |
| - width: 130px; |
| -} |
| - |
| -#releases li > * |
| -{ |
| - display: table-cell; |
| -} |
| - |
| -#releases li |
| -{ |
| - margin-bottom: 10px; |
| -} |
| - |
| -/* |
| - * Multi-column layouts |
| - */ |
| - |
| -.columns-container |
| -{ |
| - display: block; |
| - -webkit-box-sizing: border-box; |
| - -moz-box-sizing: border-box; |
| - box-sizing: border-box; |
| - width: 100%; |
| -} |
| - |
| -.column |
| -{ |
| - display: block; |
| - -webkit-box-sizing: border-box; |
| - -moz-box-sizing: border-box; |
| - -ms-box-sizing: border-box; |
| - box-sizing: border-box; |
| - float: left; |
| - margin-left: 2.5%; |
| -} |
| - |
| -.sidebar-left .contact-person > :first-child, |
| -.column > :first-child |
| -{ |
| - position: relative; |
| - margin-top: 0; |
| -} |
| - |
| -.one-sidebar .column |
| -{ |
| - width: 74.375%; |
| -} |
| - |
| -.two-columns .column, |
| -.two-sidebars .column |
| -{ |
| - width: 48.75%; |
| -} |
| - |
| -.four-columns .column |
| -{ |
| - width: 23.125%; |
| -} |
| - |
| -.one-sidebar .sidebar-left, |
| -.one-sidebars .sidebar-right, |
| -.two-sidebars .sidebar-left, |
| -.two-sidebars .sidebar-right |
| -{ |
| - width: 23.125%; |
| -} |
| - |
| -.column:first-child |
| -{ |
| - margin-left: 0; |
| -} |
| - |
| -/* |
| - * Tabs |
| - */ |
| - |
| -.ui-tabs-nav |
| -{ |
| - padding: 0; |
| - margin: 0; |
| - font-weight: bold; |
| - border-bottom: 1px solid #E1E1E1; |
| - *zoom: 1; |
| -} |
| - |
| -.ui-tabs-nav:before, |
| -.ui-tabs-nav:after |
| -{ |
| - display: table; |
| - content: ""; |
| -} |
| - |
| -.ui-tabs-nav:after |
| -{ |
| - clear: both; |
| -} |
| - |
| -.ui-tabs-nav li |
| -{ |
| - background-color: #FBFBFB; |
| - padding: 0; |
| - background-image: none; |
| - list-style: none; |
| - float: left; |
| - margin: 0; |
| - |
| - border: 1px solid #E1E1E1; |
| - border-left: none; |
| - border-bottom-color: #CFCFCF; |
| - border-top-left-radius: 3px; |
| - border-top-right-radius: 3px; |
| - -webkit-border-top-left-radius: 3px; |
| - -webkit-border-top-right-radius: 3px; |
| - |
| - transition: all 0.2s linear; |
| - -moz-transition: all 0.2s linear; |
| - -webkit-transition: all 0.2s linear; |
| - -o-transition: all 0.2s linear; |
| -} |
| - |
| -.ui-tabs-nav li:first-child |
| -{ |
| - border-left: 1px solid #E1E1E1; |
| - border-top: 1px solid #E1E1E1; |
| -} |
| - |
| -.ui-tabs-nav li.ui-tabs-active, |
| -.ui-tabs-nav li:hover |
| -{ |
| - background-color: #fff; |
| - border-top: 2px solid #7ac142; |
| - border-bottom: none; |
| - position: relative; |
| - top: 2px; |
| -} |
| - |
| -.ui-tabs-active .ui-tabs-anchor |
| -{ |
| - cursor: default; |
| -} |
| - |
| -.ui-tabs-anchor |
| -{ |
| - border-bottom: none; |
| - display: block; |
| - padding: 0.5em 1em; |
| -} |
| - |
| -.ui-tabs-anchor:focus |
| -{ |
| - outline: none; |
| -} |
| - |
| -.ui-tabs-panel |
| -{ |
| - padding: 1em; |
| -} |
| - |
| -/* |
| - * Accordion |
| - */ |
| - |
| -.ui-accordion-header |
| -{ |
| - position: relative; |
| - background-color: #FBFBFB; |
| - border: 1px solid #E1E1E1; |
| - border-radius: 3px; |
| - padding: 0.5em 1em 0.5em 56px; |
| - font-size: 16px; |
| - line-height: inherit; |
| - cursor: pointer; |
| - outline-width: 0; |
| -} |
| - |
| -.ui-accordion-header.ui-state-active |
| -{ |
| - background-color: #FFFFFF; |
| - border-top-color: #1ABC9C; |
| -} |
| - |
| -.ui-accordion-header:before |
| -{ |
| - position: absolute; |
| - left: 0; |
| - top: 0; |
| - bottom: 0; |
| - border-right: 1px solid #EEE; |
| - -moz-focus: ignore; |
| - |
| - font-size: 18px; |
| - width: 40px; |
| - line-height: 30px; |
| - color: #5F5F5F; |
| - text-align: center; |
| - cursor: pointer; |
| - display: block; |
| - content: "\25BA"; /* right pointing triangle */ |
| - line-height: 44px; |
| -} |
| - |
| -.ui-accordion-header.ui-state-active:before |
| -{ |
| - content: "\25BC"; /* down pointing triange */ |
| - color: #1ABC9C; |
| -} |
| - |
| -.ui-accordion-content |
| -{ |
| - padding-left: 56px; |
| -} |
| - |
| -.ui-accordion-content > :first-child |
| -{ |
| - margin-top: 0; |
| -} |
| - |
| -.ui-accordion-content > :last-child |
| -{ |
| - margin-bottom: 0; |
| -} |
| - |
| -/* |
| - * Form controls |
| - */ |
| - |
| -form label.error, |
| -form p.error |
| -{ |
| - background-color: #ffeaea; |
| - border: 1px solid #feabab; |
| - color: #eb1515; |
| - margin-top: 5px; |
| - padding: 6px; |
| - text-align: center; |
| - display: block; |
| -} |
| - |
| -input[type="text"], |
| -input[type="password"], |
| -input[type="search"], |
| -input[type="email"], |
| -input[type="url"], |
| -input[type="tel"], |
| -input[type="number"], |
| -input[type="range"], |
| -input[type="date"], |
| -textarea |
| -{ |
| - border: 1px solid #e0e0e0; |
| - border-radius: 3px; |
| - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05) inset; |
| - background-color: #fff; |
| - color: #7d7d7d; |
| - font-size: 13px; |
| - padding: 6px 10px; |
| - height: 38px; |
| - width: 100%; |
| - max-width: 400px; |
| - -moz-box-sizing: border-box; |
| - -webkit-box-sizing: border-box; |
| - box-sizing: border-box; |
| -} |
| - |
| -textarea |
| -{ |
| - display: block; |
| - max-width: 700px; |
| - height: 136px; |
| -} |
| - |
| -input[type="text"]:hover, |
| -input[type="password"]:hover, |
| -input[type="search"]:hover, |
| -input[type="email"]:hover, |
| -input[type="url"]:hover, |
| -input[type="tel"]:hover, |
| -input[type="number"]:hover, |
| -input[type="range"]:hover, |
| -input[type="date"]:hover, |
| -textarea:hover, |
| -input[type="text"]:focus, |
| -input[type="password"]:focus, |
| -input[type="search"]:focus, |
| -input[type="email"]:focus, |
| -input[type="url"]:focus, |
| -input[type="tel"]:focus, |
| -input[type="number"]:focus, |
| -input[type="range"]:focus, |
| -input[type="date"]:focus, |
| -textarea:focus |
| -{ |
| - background-color: #fbfbfb; |
| - border-color: #b5b5b5; |
| -} |
| - |
| -header > *, .content-block |
| -{ |
| - padding: 0 10px; |
| -} |
| - |
| -#home-image-container img |
| -{ |
| - width: 100%; |
| - max-width: 1080px; |
| -} |
| - |
| -#jobs-overview-tab |
| -{ |
| - display: none; |
| -} |
| - |
| -#hiring-badges |
| -{ |
| - width: 100%; |
| - float: left; |
| - margin-top: 10px; |
| -} |
| - |
| -#ihk-logo |
| -{ |
| - float: left; |
| -} |
| - |
| -#fair-company-logo |
| -{ |
| - float: right; |
| -} |
| - |
| -.why-work-here-button |
| -{ |
| - background-color: #747474; |
| -} |
| - |
| -.why-work-here-button:hover, |
| -.why-work-here-button:focus |
| -{ |
| - background-color: #333; |
| -} |
| - |
| - |
| -@media (max-width: 750px) |
| -{ |
| - .columns-container .column |
| - { |
| - width: 100%; |
| - margin-left: 0; |
| - clear: both; |
| - } |
| - |
| - #logo |
| - { |
| - padding: 5px 0; |
| - } |
| - |
| - #menu .menu-list |
| - { |
| - clear: both; |
| - margin-left: -150px; |
| - } |
| - |
| - #menu .menu-button |
| - { |
| - margin-top: 5px; |
| - } |
| - |
| - #press-info .sidebar-left |
| - { |
| - text-align: inherit; |
| - } |
| - |
| - #releases li > * |
| - { |
| - display: block; |
| - } |
| - |
| - .no-mobile |
| - { |
| - display: none; |
| - } |
| -} |
| - |
| -@media (min-width: 751px) |
| -{ |
| - .ui-tabs-nav-vertical |
| - { |
| - padding: .2em .1em .2em .2em; |
| - float: left; width: 100%; |
| - border-bottom: none; |
| - } |
| - .ui-tabs-nav-vertical li |
| - { |
| - clear: left; |
| - width: 100%; |
| - border-bottom-width: 1px !important; |
| - border-left: 1px solid #E1E1E1 !important; |
| - margin: 0 -1px .2em 0; |
| - } |
| - .ui-tabs-nav-vertical li.ui-tabs-active |
| - { |
| - padding-bottom: 0; |
| - padding-right: .1em; |
| - border-right-width: 1px; |
| - border-right-width: 1px; |
| - } |
| - |
| - #panels-openings |
| - { |
| - margin-top: -40px; |
| - } |
| -} |
| +/* |
| + * Fonts |
| + */ |
| +@font-face { |
| + font-family: "Lato"; |
| + font-style: normal; |
| + font-weight: 400; |
| + src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.woff) format('woff'); |
| +} |
| +@font-face { |
| + font-family: "Lato"; |
| + font-style: normal; |
| + font-weight: 700; |
| + src: local("Lato Bold"), local("Lato-Bold"), url(/fonts/Lato-Bold.woff) format('woff'); |
| +} |
| +@font-face { |
| + font-family: "Lato"; |
| + font-style: italic; |
| + font-weight: 400; |
| + src: local("Lato Italic"), local("Lato-Italic"), url(/fonts/Lato-Italic.woff) format('woff'); |
| +} |
| +@font-face { |
| + font-family: "Lato"; |
| + font-style: italic; |
| + font-weight: 700; |
| + src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url(/fonts/Lato-BoldItalic.woff) format('woff'); |
| +} |
| + |
| +/* |
| + * General layout |
| + */ |
| + |
| +body |
| +{ |
| + font-family: Lato, sans-serif; |
| + font-size: 14px; |
| + line-height: 1.4; |
| + color: #747474; |
| + padding: 0; |
| + margin: 0; |
| + padding-top: 78px; |
| +} |
| + |
| +a |
| +{ |
| + color: #7ac142; |
| + text-decoration: none; |
| +} |
| + |
| +a:hover |
| +{ |
| + color: #91e64f; |
| +} |
| + |
| +img |
| +{ |
| + border-width: 0px; |
| +} |
| + |
| +header, |
| +footer, |
| +nav |
| +{ |
| + display: block; |
| +} |
| + |
| +h1, h2, h3, h4, h5, h6 |
| +{ |
| + color: #333; |
| +} |
| + |
| +h1 |
| +{ |
| + font-size:28px; |
| +} |
| + |
| +h2 |
| +{ |
| + font-size:24px; |
| +} |
| + |
| +h3 |
| +{ |
| + font-size:20px; |
| +} |
| + |
| +h4 |
| +{ |
| + font-size:16px; |
| +} |
| + |
| +h5 |
| +{ |
| + font-size:14px; |
| +} |
| + |
| +h6 |
| +{ |
| + font-size:12px; |
| +} |
| + |
| +#header |
| +{ |
| + position: fixed; |
| + background-color: #fff; |
| + width: 100%; |
| + top: 0; |
|
saroyanm
2016/06/22 07:54:19
Detail: CSS number values should specify units whe
juliandoucette
2016/06/23 17:25:41
Done.
|
| + left: 0; |
| + box-shadow: 0 0 12px rgba(0,0,0, 0.09); |
| + z-index: 10000; |
| + text-align: right; |
| +} |
| + |
| +#header .content-block |
| +{ |
| + position: relative; |
| + padding: 15px 10px; |
| + min-height: 32px; |
| +} |
| + |
| +#header.top .content-block |
| +{ |
| + padding: 25px 10px; |
| +} |
| + |
| +#logo |
| +{ |
| + position: absolute; |
| + top: 7px; |
| + left: 10px; |
| +} |
| + |
| +#header.top #logo |
| +{ |
| + top: 17.5px; |
|
saroyanm
2016/06/22 07:54:19
17.5px, just curious why are you using 0.5px accur
juliandoucette
2016/06/23 17:25:41
Changed.
|
| +} |
| + |
| +#header .menu-button |
| +{ |
| + margin: 0 0 0 25px; |
|
saroyanm
2016/06/22 07:54:19
Detail: CSS number values should specify units whe
juliandoucette
2016/06/23 17:25:41
Done.
|
| +} |
| + |
| +#menu |
| +{ |
| + display: inline; |
| + vertical-align: middle; |
| +} |
| + |
| +.assistive-text |
| +{ |
| + position: absolute; |
| + top: -99999px; |
|
saroyanm
2016/06/22 07:54:18
I'm not really familiar with this implementation,
juliandoucette
2016/06/23 17:25:41
See:
https://make.wordpress.org/accessibility/201
|
| + left: -99999px; |
| + clip: rect(1px, 1px, 1px, 1px); |
| +} |
| + |
| +.menu-list |
| +{ |
| + display: inline; |
| + margin: 0px; |
| + font-size: 15px; |
| + list-style: none; |
| +} |
| + |
| +.menu-list li |
| +{ |
| + display: inline; |
| + font-weight: bold; |
| + white-space: nowrap; |
| +} |
| + |
| +.menu-list li a |
| +{ |
| + color: #979797; |
| + padding: 0 10px; |
| +} |
| + |
| +.menu-list li:hover > a, |
| +.menu-list li.current-menu-item > a |
| +{ |
| + color: #373737; |
| +} |
| + |
| +#header-hamburger |
| +{ |
| + display: none; |
| +} |
| + |
| +#header-hamburger:hover .icon-bar, |
| +#header-hamburger:focus .icon-bar, |
| +#header-hamburger:active .icon-bar |
| +{ |
| + background-color: #000; |
| +} |
| + |
| + |
| +.icon-bar |
| +{ |
| + display: block; |
| + width: 22px; |
| + height: 2px; |
| + border-radius: 1px; |
| + background-color: #888; |
| +} |
| + |
| +.icon-bar+.icon-bar |
| +{ |
| + margin-top: 4px; |
| +} |
| + |
| +#content:before, |
| +#content:after, |
| +.columns-container:before, |
| +.columns-container:after |
| +{ |
| + content: " "; |
| + display: table; |
| +} |
| + |
| +#content:after, |
| +.columns-container:after |
| +{ |
| + clear: both; |
| +} |
| + |
| +#footer |
| +{ |
| + color: #666; |
| + background-color: #252525; |
| + padding-top: 30px; |
| + padding-bottom: 50px; |
| + font-size: 12px; |
| +} |
| + |
| +#footer a |
| +{ |
| + color: #c2c2c2; |
| +} |
| + |
| +#footer a:hover |
| +{ |
| + color: #ffffff; |
| +} |
| + |
| +#footer-contact |
| +{ |
| + float: right; |
| + margin-right: 10px; |
| +} |
| + |
| +#footer #to-top |
| +{ |
| + background-color: #fff; |
| + box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); |
| + outline-width: 0; |
| + width: 28px; |
| + height: 28px; |
| + position: fixed; |
| + bottom: 37px; |
| + right: 20px; |
| + border-radius: 3px; |
| + color: #999; |
| + text-align: center; |
| + line-height: 28px; |
| + font-size: 20px; |
| + |
| + -webkit-transition: all 0.3s ease; |
| + -moz-transition: all 0.3s ease; |
| + -o-transition: all 0.3s ease; |
| + transition: all 0.3s ease; |
| +} |
| + |
| +#footer #to-top:hover |
| +{ |
| + background-color: #1abc9c; |
| + color: #fff; |
| +} |
| + |
| +#footer #to-top:before |
| +{ |
| + content: "\25B2"; |
| +} |
| + |
| +.content-block, |
| +.page-title h1 |
| +{ |
| + max-width: 1080px; |
| + margin: 0 auto; |
| +} |
| + |
| +.heading |
| +{ |
| + margin: 0; |
| + margin-bottom: 20px; |
| + border-bottom: 1px solid #E2E2E2; |
| + font-weight: normal; |
| + height: 0.7em; |
| +} |
| + |
| +.heading span |
| +{ |
| + padding: 0; |
| + padding-right: 10px; |
| + background-color: #fff; |
| +} |
| + |
| +.centered |
| +{ |
| + text-align: center; |
| +} |
| + |
| +.centered span |
| +{ |
| + padding-left: 10px; |
| +} |
| + |
| +button, .button, .menu-button |
| +{ |
| + display: inline-block; |
| + cursor: pointer; |
| + background-color: #7ac142; |
| + color: #ffffff; |
| + border: none; |
| + border-radius: 3px; |
| + font-size: 14px; |
| + font-weight: bold; |
| + line-height: 36px; |
| + white-space: nowrap; |
| + height: 36px; |
| + padding: 0 20px; |
| +} |
| + |
| +button:hover, |
| +button:focus, |
| +.button:hover, |
| +.button:focus, |
| +.menu-button:hover, |
| +.menu-button:focus |
| +{ |
| + background-color: #7FCF42; |
| + color: #ffffff; |
| +} |
| + |
| +.page-title |
| +{ |
| + background-image: url(/images/subtlenet2.png); |
| + background-color: #e9e9e5; |
| + padding-top: 25px; |
| + padding-bottom: 25px; |
| + margin-bottom: 40px; |
| +} |
| + |
| +.sidebar-left .contact-person |
| +{ |
| + text-align: right; |
| + margin-top: 20px; |
| + float: right; |
| +} |
| + |
| +.sidebar-left .contact-person:first-child |
| +{ |
| + margin-top: 0; |
| +} |
| + |
| +.sidebar-left .contact-person img |
| +{ |
| + border-radius: 3px; |
| +} |
| + |
| +/* |
| + * Page-specific styles |
| + */ |
| + |
| +#home-image-container |
| +{ |
| + background-color: #f0f0f0; |
| + text-align: center; |
| + margin: 0; |
| +} |
| + |
| +#who-we-are |
| +{ |
| + margin-top: 25px; |
| + margin-bottom: 25px; |
| +} |
| + |
| +#our-work |
| +{ |
| + padding-top: 50px; |
| + padding-bottom: 50px; |
| + background-color: #f0f0f0; |
| +} |
| + |
| +#media |
| +{ |
| + margin-top: 25px; |
| +} |
| + |
| +#our-work .heading span |
| +{ |
| + background-color: #f0f0f0; |
| +} |
| + |
| +#our-work .column |
| +{ |
| + text-align: center; |
| +} |
| + |
| +.profile |
| +{ |
| + text-align: center; |
| + margin-top: 0px; |
| + margin-bottom: 30px; |
| +} |
| + |
| +.profile-image, |
| +.country-image |
| +{ |
| + border-radius: 200px; |
| +} |
| + |
| +.country-image |
| +{ |
| + position: absolute; |
| + bottom: 0px; |
| + left: 50%; |
| + margin-left: 30px; |
| +} |
| + |
| +.profile h1 |
| +{ |
| + font-size: 20px; |
| + margin-bottom: 0.3em; |
| +} |
| + |
| +.profile h2 |
| +{ |
| + font-size: 14px; |
| + font-weight: normal; |
| + color: #AAAAAA; |
| + margin-bottom: 0; |
| +} |
| + |
| +.profile h3 |
| +{ |
| + font-size: 14px; |
| + font-weight: normal; |
| + margin-bottom: 1em; |
| +} |
| + |
| +#releases ul |
| +{ |
| + list-style: none; |
| + padding: 0px; |
| +} |
| + |
| +#releases li div |
| +{ |
| + width: 130px; |
| +} |
| + |
| +#releases li > * |
| +{ |
| + display: table-cell; |
| +} |
| + |
| +#releases li |
| +{ |
| + margin-bottom: 10px; |
| +} |
| + |
| +/* |
| + * Multi-column layouts |
| + */ |
| + |
| +.columns-container |
| +{ |
| + display: block; |
| + -webkit-box-sizing: border-box; |
| + -moz-box-sizing: border-box; |
| + box-sizing: border-box; |
| + width: 100%; |
| +} |
| + |
| +.column |
| +{ |
| + display: block; |
| + -webkit-box-sizing: border-box; |
| + -moz-box-sizing: border-box; |
| + -ms-box-sizing: border-box; |
| + box-sizing: border-box; |
| + float: left; |
| + margin-left: 2.5%; |
| +} |
| + |
| +.sidebar-left .contact-person > :first-child, |
| +.column > :first-child |
| +{ |
| + position: relative; |
| + margin-top: 0; |
| +} |
| + |
| +.one-sidebar .column |
| +{ |
| + width: 74.375%; |
| +} |
| + |
| +.two-columns .column, |
| +.two-sidebars .column |
| +{ |
| + width: 48.75%; |
| +} |
| + |
| +.four-columns .column |
| +{ |
| + width: 23.125%; |
| +} |
| + |
| +.one-sidebar .sidebar-left, |
| +.one-sidebars .sidebar-right, |
| +.two-sidebars .sidebar-left, |
| +.two-sidebars .sidebar-right |
| +{ |
| + width: 23.125%; |
| +} |
| + |
| +.column:first-child |
| +{ |
| + margin-left: 0; |
| +} |
| + |
| +/* |
| + * Tabs |
| + */ |
| + |
| +.ui-tabs-nav |
| +{ |
| + padding: 0; |
| + margin: 0; |
| + font-weight: bold; |
| + border-bottom: 1px solid #E1E1E1; |
| + *zoom: 1; |
| +} |
| + |
| +.ui-tabs-nav:before, |
| +.ui-tabs-nav:after |
| +{ |
| + display: table; |
| + content: ""; |
| +} |
| + |
| +.ui-tabs-nav:after |
| +{ |
| + clear: both; |
| +} |
| + |
| +.ui-tabs-nav li |
| +{ |
| + background-color: #FBFBFB; |
| + padding: 0; |
| + background-image: none; |
| + list-style: none; |
| + float: left; |
| + margin: 0; |
| + |
| + border: 1px solid #E1E1E1; |
| + border-left: none; |
| + border-bottom-color: #CFCFCF; |
| + border-top-left-radius: 3px; |
| + border-top-right-radius: 3px; |
| + -webkit-border-top-left-radius: 3px; |
| + -webkit-border-top-right-radius: 3px; |
| + |
| + transition: all 0.2s linear; |
| + -moz-transition: all 0.2s linear; |
| + -webkit-transition: all 0.2s linear; |
| + -o-transition: all 0.2s linear; |
| +} |
| + |
| +.ui-tabs-nav li:first-child |
| +{ |
| + border-left: 1px solid #E1E1E1; |
| + border-top: 1px solid #E1E1E1; |
| +} |
| + |
| +.ui-tabs-nav li.ui-tabs-active, |
| +.ui-tabs-nav li:hover |
| +{ |
| + background-color: #fff; |
| + border-top: 2px solid #7ac142; |
| + border-bottom: none; |
| + position: relative; |
| + top: 2px; |
| +} |
| + |
| +.ui-tabs-active .ui-tabs-anchor |
| +{ |
| + cursor: default; |
| +} |
| + |
| +.ui-tabs-anchor |
| +{ |
| + border-bottom: none; |
| + display: block; |
| + padding: 0.5em 1em; |
| +} |
| + |
| +.ui-tabs-anchor:focus |
| +{ |
| + outline: none; |
| +} |
| + |
| +.ui-tabs-panel |
| +{ |
| + padding: 1em; |
| +} |
| + |
| +/* |
| + * Accordion |
| + */ |
| + |
| +.ui-accordion-header |
| +{ |
| + position: relative; |
| + background-color: #FBFBFB; |
| + border: 1px solid #E1E1E1; |
| + border-radius: 3px; |
| + padding: 0.5em 1em 0.5em 56px; |
| + font-size: 16px; |
| + line-height: inherit; |
| + cursor: pointer; |
| + outline-width: 0; |
| +} |
| + |
| +.ui-accordion-header.ui-state-active |
| +{ |
| + background-color: #FFFFFF; |
| + border-top-color: #1ABC9C; |
| +} |
| + |
| +.ui-accordion-header:before |
| +{ |
| + position: absolute; |
| + left: 0; |
| + top: 0; |
| + bottom: 0; |
| + border-right: 1px solid #EEE; |
| + -moz-focus: ignore; |
| + |
| + font-size: 18px; |
| + width: 40px; |
| + line-height: 30px; |
| + color: #5F5F5F; |
| + text-align: center; |
| + cursor: pointer; |
| + display: block; |
| + content: "\25BA"; /* right pointing triangle */ |
| + line-height: 44px; |
| +} |
| + |
| +.ui-accordion-header.ui-state-active:before |
| +{ |
| + content: "\25BC"; /* down pointing triange */ |
| + color: #1ABC9C; |
| +} |
| + |
| +.ui-accordion-content |
| +{ |
| + padding-left: 56px; |
| +} |
| + |
| +.ui-accordion-content > :first-child |
| +{ |
| + margin-top: 0; |
| +} |
| + |
| +.ui-accordion-content > :last-child |
| +{ |
| + margin-bottom: 0; |
| +} |
| + |
| +/* |
| + * Form controls |
| + */ |
| + |
| +form label.error, |
| +form p.error |
| +{ |
| + background-color: #ffeaea; |
| + border: 1px solid #feabab; |
| + color: #eb1515; |
| + margin-top: 5px; |
| + padding: 6px; |
| + text-align: center; |
| + display: block; |
| +} |
| + |
| +input[type="text"], |
| +input[type="password"], |
| +input[type="search"], |
| +input[type="email"], |
| +input[type="url"], |
| +input[type="tel"], |
| +input[type="number"], |
| +input[type="range"], |
| +input[type="date"], |
| +textarea |
| +{ |
| + border: 1px solid #e0e0e0; |
| + border-radius: 3px; |
| + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05) inset; |
| + background-color: #fff; |
| + color: #7d7d7d; |
| + font-size: 13px; |
| + padding: 6px 10px; |
| + height: 38px; |
| + width: 100%; |
| + max-width: 400px; |
| + -moz-box-sizing: border-box; |
| + -webkit-box-sizing: border-box; |
| + box-sizing: border-box; |
| +} |
| + |
| +textarea |
| +{ |
| + display: block; |
| + max-width: 700px; |
| + height: 136px; |
| +} |
| + |
| +input[type="text"]:hover, |
| +input[type="password"]:hover, |
| +input[type="search"]:hover, |
| +input[type="email"]:hover, |
| +input[type="url"]:hover, |
| +input[type="tel"]:hover, |
| +input[type="number"]:hover, |
| +input[type="range"]:hover, |
| +input[type="date"]:hover, |
| +textarea:hover, |
| +input[type="text"]:focus, |
| +input[type="password"]:focus, |
| +input[type="search"]:focus, |
| +input[type="email"]:focus, |
| +input[type="url"]:focus, |
| +input[type="tel"]:focus, |
| +input[type="number"]:focus, |
| +input[type="range"]:focus, |
| +input[type="date"]:focus, |
| +textarea:focus |
| +{ |
| + background-color: #fbfbfb; |
| + border-color: #b5b5b5; |
| +} |
| + |
| +header > *, .content-block |
| +{ |
| + padding: 0 10px; |
| +} |
| + |
| +#home-image-container img |
| +{ |
| + width: 100%; |
| + max-width: 1080px; |
| +} |
| + |
| +#jobs-overview-tab |
| +{ |
| + display: none; |
| +} |
| + |
| +#hiring-badges |
| +{ |
| + width: 100%; |
| + float: left; |
| + margin-top: 10px; |
| +} |
| + |
| +#ihk-logo |
| +{ |
| + float: left; |
| +} |
| + |
| +#fair-company-logo |
| +{ |
| + float: right; |
| +} |
| + |
| +.why-work-here-button |
| +{ |
| + background-color: #747474; |
| +} |
| + |
| +.why-work-here-button:hover, |
| +.why-work-here-button:focus |
| +{ |
| + background-color: #333; |
| +} |
| + |
| + |
| +@media (max-width: 768px) |
| +{ |
| + body |
| + { |
| + padding-top: 50px; |
| + } |
| + |
| + #header .content-block, |
| + #header.top .content-block |
| + { |
| + padding: 9px 10px; |
| + } |
| + |
| + #header.top #logo |
| + { |
| + top: 7px; |
| + } |
| + |
| + #logo > img |
| + { |
| + height: 34px; |
| + } |
| + |
| + #menu |
| + { |
| + display: none; |
| + } |
| + |
| + #menu.open |
| + { |
| + display: block; |
| + } |
| + |
| + #header-hamburger |
| + { |
| + position: absolute; |
| + top: 9px; |
| + right: 10px; |
| + display: block; |
| + padding: 0px; |
| + margin: 0px 5px; |
| + background: none; |
| + } |
| + |
| + .menu-list |
| + { |
| + margin-top: 45px; |
| + padding: 0px; |
| + display: block; |
| + } |
| + |
| + .menu-list > li |
| + { |
| + display: block; |
| + border-top: 1px solid #eee; |
| + } |
| + |
| + .menu-list > li > a |
| + { |
| + display: block; |
| + margin: 0px; |
| + padding: 10px; |
| + font-size: 14px |
| + } |
| + |
| + .menu-button |
| + { |
| + position: absolute; |
| + top: 9px; |
| + right: 50px; |
| + height: 32px; |
| + padding: 0 10px; |
| + line-height: 32px; |
| + font-size: 14px; |
| + } |
| + |
| + .columns-container .column |
| + { |
| + width: 100%; |
| + margin-left: 0; |
| + clear: both; |
| + } |
| + |
| + #press-info .sidebar-left |
| + { |
| + text-align: inherit; |
| + } |
| + |
| + #releases li > * |
| + { |
| + display: block; |
| + } |
| + |
| + .no-mobile |
| + { |
| + display: none; |
| + } |
| +} |
| + |
| +@media (min-width: 751px) |
| +{ |
| + .ui-tabs-nav-vertical |
| + { |
| + padding: .2em .1em .2em .2em; |
| + float: left; width: 100%; |
| + border-bottom: none; |
| + } |
| + .ui-tabs-nav-vertical li |
| + { |
| + clear: left; |
| + width: 100%; |
| + border-bottom-width: 1px !important; |
| + border-left: 1px solid #E1E1E1 !important; |
| + margin: 0 -1px .2em 0; |
| + } |
| + .ui-tabs-nav-vertical li.ui-tabs-active |
| + { |
| + padding-bottom: 0; |
| + padding-right: .1em; |
| + border-right-width: 1px; |
| + border-right-width: 1px; |
| + } |
| + |
| + #panels-openings |
| + { |
| + margin-top: -40px; |
| + } |
| +} |
« no previous file with comments
|
« static/acceptable-ads-application.html ('k')
|
static/images/logo.png » ('j')
|
static/js/scripts.js » ('J')
