Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

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.
Jump to:
View side-by-side diff with in-line comments
Download patch
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;
+ }
+}

Powered by Google App Engine
This is Rietveld