/* LAYOUT */ body { text-align: left; } .site-header { padding: 1em; text-align: center; } .site-header h1 a { display: block; text-indent: -10000px; overflow: hidden; width: 100%; height: 120px; background-image: url('../images/chaplin.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } .sidebar ul { list-style-image: url("../images/bullet.png"); font-size: 14px; line-height: 24px; } .sidebar ul li { padding: 5px 0px; margin-left: 1em; line-height: 16px; } .sidebar ul li.tag-h1 { font-size: 1.2em; list-style: none; margin-left: 0; } .sidebar ul li.tag-h1 a { font-weight: bold; color: #333; } .sidebar ul li.tag-h2 + .tag-h1 { margin-top: 10px; } .sidebar ul a { color: #666; } .sidebar ul a:hover { color: #666; text-decoration: underline; } .sidebar nav { padding: 0 1em; } .sidebar ul { line-height: 1.25; } .wrapper { width: 753px; margin: 0 auto; position: relative; height: 100%; } .actual-content { padding: 56px 0 0; } .module-info a { font-size: 14px; vertical-align: middle; } .toggle-navigation { margin: 0; text-transform: none; top: 9px; right: 10px; width: 48px; height: 32px; padding: 8px 12px; background-color: rgba(188, 122, 152, 0.95);; } .toggle-navigation > .icon-bar { display: block; width: 22px; height: 2px; background-color: #fff; border-radius: 1px; } .toggle-navigation > .icon-bar + .icon-bar { margin-top: 4px; } /* LANGUAGE SWITCHER */ form.language { text-align: left; } form.language legend { margin: 0; line-height: 160%; border: none; font-size: 100%; } form.language ul { list-style-type: none; list-style-image: none; padding: 0; } form.language ul:after { content: "."; display: block; width: 0; height: 0; overflow: hidden; clear: both; } form.language li { display: block; position: relative; width: 100%; height: 32px; padding: 0; margin: 0 0 2px; background: white; background-color: rgba(255,255,255,0.75); background-repeat: no-repeat; background-position: top right; cursor: pointer; color: #BBB; } form.language li:active { top: 1px; left: 1px; } form.language .active { background-color: #666; color: white; } form.language .active:before { content: ""; display: block; width: 0; height: 0; position: absolute; top: 50%; left: 8px; margin-top: -5px; border: 5px solid transparent; border-left-color: white; } form.language input { position: relative; left: -10000px; } form.language label { overflow: hidden; line-height: 32px; text-indent: 4px; cursor: pointer; } form.language .coffeescript { background-image: url('../images/coffeescript.png'); } form.language .coffeescript.active { background-image: url('../images/coffeescript-inverted.png'); } form.language .javascript { background-image: url('../images/javascript.png'); } form.language > fieldset { border: 0; } /* INLINE CODE */ .show-coffeescript span.coffeescript { display: inline; } .show-coffeescript span.javascript { display: none; } .show-javascript span.coffeescript { display: none; } .show-javascript span.javascript { display: inline; } img[src$="chaplin-lifecycle.png"] { width: 100%; } #content { width: 750px; padding: 0; margin-bottom: 60px; margin-top: 0; /* margin: 40px 0 20px 0; */ position: relative; background: #fbfbfb; border-radius: 3px; border: 1px solid #cbcbcb; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.09), inset 0px 0px 2px 2px rgba(255, 255, 255, 0.5), inset 0 0 5px 5px rgba(255, 255, 255, 0.4); height: auto; } .actual-content { padding: 30px; padding-top: 45px; top: 60px; } .module-info { margin-left: -40px; padding-top: 7px; padding-left: 40px; } .module-info > h1 { /*background-color: #fff;*/ /*max-width: 500px;*/ } /* Device Dependent */ @media (min-width: 750px) { #content { /*margin-left: 25.64%;*/ position: absolute; /*right: 103px;*/ } } @media (min-width: 1150px) { /* Desktop */ .module-info { /*position: fixed;*/ top: 0; /*padding: 7px 0;*/ width: 100%; /*background-color: #F5F1E8;*/ } .sidebar { position: fixed; width: 185px; top: 10px; left: 50%; margin-left: -570px; height: 100%; overflow: scroll; } } @media (min-width: 750px) and (max-width: 1150px) { .sidebar { margin: 45px auto 0 auto; text-align: center; } } @media (max-width: 1150px) { .sidebar { display: block; text-align: center; } .sidebar ul { list-style: none; padding-left: 0; } .sidebar ul li { margin: 0; } .site-header h1 a { height: 60px; } .navigation { display: none; } .sidebar .toggle-navigation { display: inline-block; } form.language > fieldset { margin: 0; padding: 10px 0 0 0; } } @media (max-width: 750px) { .wrapper { width: auto; } #content { width: auto; margin-top: 0; margin-bottom: 0; top: 0; } }