html {
background: #F4F4F4;
}
body {
margin: 0px;
background: #fff;
color: #333;
text-rendering: optimizeLegibility;
font-size: 15px;
line-height: 1.6;
}
h1 {
font-weight: normal;
font-size: 3em;
margin: 0.5em 0 1em;
}
h2 {
font-weight: normal;
font-size: 2em;
margin: 1em 0 0.5em;
}
h2 em {
position: absolute;
display: inline-block;
margin-left: -1.5em;
font-style: normal;
font-weight: bold;
color: #CCC;
}
h3 {
font-weight: normal;
font-size: 1.5em;
margin: 2em 0 0.8em;
}
h4 {
font-size: 1.2em;
margin: 2em 0 0.5em;
}
p {
font-size: 16px;
margin-bottom: 1em;
line-height: 1.5;
}
ul li {
margin-bottom: 0.5em;
line-height: 1.5;
}
a {
color: #E0330C;
}
a:hover {
color: #E0330C;
text-decoration: underline;
}
hr {
border-top-color: #ddd;
margin: 2em 0;
}
table {
margin-bottom: 1em;
}
table.bordered {
border: 2px solid #ccc;
max-width: 600px;
}
table.bordered th {
background-color: #eee;
}
table.bordered td, table.bordered th {
padding: 9px 10px;
border: 1px solid #ccc;
}
header {
color: #fff;
padding: 40px 0;
background: #d3360b;
}
header #logo {
width: 240px;
float: left;
}
nav {
margin: 0 0 0 250px;
padding-top: 12px;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: 300;
font-size: 20px;
letter-spacing: 1px;
margin-left: 15px;
}
nav a:after {
margin-left: 15px;
content: url(../images/star.png);
}
nav a:last-child: after {
content: none;
}
nav a:hover{
text-decoration: underline;
}
footer {
color: #666;
overflow: hidden;
width: 100%;
padding: 40px 0;
background: #F4F4F4;
line-height: 1.5;
text-align: center;
}
footer a {
color: #111;
border-color: #111;
}
.indent {
margin-left: 70px;
}
.home {
list-style: none;
margin: 0;
}
.home li {
padding: 1.5em 0;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.home li:last-child {
border-bottom: 0;
}
.home li i {
display: inline-block;
width: 70px;
height: 70px;
background-color: #d0d0d0;
float: left;
text-align: center;
vertical-align: middle;
font-size: 2em;
color: #fff;
line-height: 70px;
font-style: normal;
font-weight: bold;
border-radius: 70px;
transition: 0.10s background-color ease-in;
-webkit-transition: 0.10s background-color ease-in;
-moz-transition: 0.10s background-color ease-in;
}
.home li:hover i {
background-color: #d3360b;
transition: 0.10s background-color ease-in;
-webkit-transition: 0.10s background-color ease-in;
-moz-transition: 0.10s background-color ease-in;
}
.home li > a,
.home li > a:hover {
color: inherit;
text-decoration: none;
}
.home h3 {
margin: 0 0 0.5em;
margin-left: 90px;
color: #E0330C;
}
.home li:hover h3 {
text-decoration: underline;
}
.home p {
font-size: 18px;
margin-left: 90px;
}
.hero-links em {
margin: 0 0.8em;
color: #999;
}
.hero-links {
margin: 2em 0;
}
.hero {
padding: 20px 320px 20px 0;
background: url(../images/guides-hero.png) right 80px no-repeat;
}
i.icon-text-editor, i.icon-prompt, i.icon-browser {
background-position: 0 0;
display: inline-block;
margin-left: -70px;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
}
i.icon-text-editor {
background-image: url("../../images/vienna/icon-text-editor.png");
}
i.icon-prompt{
background-image: url("../../images/vienna/icon-prompt.png");
}
i.icon-browser {
background-image: url("../../images/vienna/icon-browser.png");
}
/* The code lines are quite long.
Mobilize a lot of horizontal space for small screens: */
@media (max-width: 1200px) {
figure.highlight {
margin: 0pt 0pt 15pt 0pt;
}
}
@media(min-width: 1200px) {
figure.highlight {
margin: 0pt 40pt 25pt 0pt;
}
}
i.icon-small-text-editor, i.icon-small-prompt, i.icon-small-browser {
background-position: 0 0;
margin-left: 0px;
margin-top: 15px;
display: block;
width: 50px;
height: 20px;
line-height: 20px;
}
i.icon-small-text-editor {
background-image: url("/images/icon-small-text-editor.png");
}
i.icon-small-prompt{
background-image: url("/images/icon-small-prompt.png");
}
i.icon-small-browser {
background-image: url("/images/icon-small-browser.png");
}
.os-specific {
margin-bottom: 4em;
}
.os-specific .picker {
display: block;
float: right;
}
.os-specific .active {
font-weight: bold;
}
/* Correct padding on smaller screens */
@media (max-width: 767px) {
header, footer{
margin-left:-20px;
margin-right:-20px;
padding-left:20px;
padding-right:20px;
}
}
/* Don't show the homepage image on mobile */
@media (max-width: 480px) {
.hero {
padding: 20px 0;
background:none;
}
}
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.5em;
white-space: nowrap;
}
.coach-hint {
background: transparent url("../../images/vienna/bulb_on.png") no-repeat 0 0;
background-size: 20px;
padding-left: 25px;
}