apex4x
Version:
The Comprehensive ARIA Development Suite
769 lines (705 loc) • 13.6 kB
CSS
/* CSS index:
RESET
DEFAULT VALUES
PAGE STRUCTURE
FORMS
NAVIGATION
SPECIFICS
PRINT STYLES
MEDIA QUERIES
*/
/* ------------------------------ RESET ---------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
main,
figure,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}
body {
overflow-y: scroll;
}
@font-face {
font-family: "open_sansregular";
src: url("OpenSans-Regular-webfont.eot");
src:
url("OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("OpenSans-Regular-webfont.woff") format("woff"),
url("OpenSans-Regular-webfont.ttf") format("truetype"),
url("OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "open_sanslight";
src: url("OpenSans-Light-webfont.eot");
src:
url("OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
url("OpenSans-Light-webfont.woff") format("woff"),
url("OpenSans-Light-webfont.ttf") format("truetype"),
url("OpenSans-Light-webfont.svg#open_sanslight") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "open_sansitalic";
src: url("OpenSans-Italic-webfont.eot");
src:
url("OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"),
url("OpenSans-Italic-webfont.woff") format("woff"),
url("OpenSans-Italic-webfont.ttf") format("truetype"),
url("OpenSans-Italic-webfont.svg#open_sansitalic") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "open_sansbold";
src: url("OpenSans-Bold-webfont.eot");
src:
url("OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
url("OpenSans-Bold-webfont.woff") format("woff"),
url("OpenSans-Bold-webfont.ttf") format("truetype"),
url("OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "antonregular";
src: url("anton-webfont.eot");
src:
url("anton-webfont.eot?#iefix") format("embedded-opentype"),
url("anton-webfont.woff") format("woff"),
url("anton-webfont.ttf") format("truetype"),
url("anton-webfont.svg#antonregular") format("svg");
font-weight: normal;
font-style: normal;
}
/* --------------------------------------------------------------------------- */
/* ----------------------------- DEFAULT VALUES ------------------------------ */
/* --------------------------------------------------------------------------- */
body {
font:
100%/1 open_sansregular,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
background-color: #2e3135;
}
h1 {
font:
normal 1em/1.2 antonregular,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
text-transform: capitalize;
text-align: left;
color: #b8b7ab;
padding: 0 2.5% 0 75px;
margin-left: 2.5%;
}
h1 strong {
display: block;
position: relative;
top: 0.2em;
font:
normal 235%/1.05 antonregular,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
color: #63b7c2;
margin-bottom: 0.5rem;
}
h2 {
font:
normal 2.5em/1.3 antonregular,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
text-transform: uppercase;
color: #2e3135;
margin: 0 0 0.5em 0;
}
.hd h2 {
margin: 1.5em 0 0.5em;
}
article > .hd h2,
main > .hd h2 {
margin: 0.5em 0;
}
h3 {
font:
normal 1.8em/1.3 antonregular,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
text-transform: uppercase;
color: #2e3135;
margin: 1.5em 0 0.5em;
}
aside section h3 {
margin: 0 0 0.5em;
}
h4 {
font:
normal 1.3em/1.3 open_sansbold,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
color: #2e3135;
margin: 1.5em 0 0.5em;
}
p,
li,
dt,
dd {
font-size: 0.9em;
line-height: 1.45;
}
li li {
font-size: 100%;
}
a,
a:link {
color: #000;
background: #fce7c7;
}
a:visited {
color: #404040;
background: transparent;
}
a:hover {
text-decoration: none;
background: transparent;
}
*:focus {
color: #000;
background: #fc0;
}
img {
max-width: 100%;
border: none;
}
em {
font-family: open_sansitalic, Frutiger, "Frutiger Linotype", Univers, Calibri,
"Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed",
"Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue",
Helvetica, Arial, sans-serif;
font-style: normal;
}
strong {
font-family: open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri,
"Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed",
"Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue",
Helvetica, Arial, sans-serif;
font-weight: 600;
}
/* --------------------------------------------------------------------------- */
/* ----------------------------- PAGE STRUCTURE ------------------------------ */
/* --------------------------------------------------------------------------- */
#container {
}
header {
position: relative;
color: #fff;
background: #2e3135;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
}
main,
div.apiDocumentationContentSection {
background-color: #f7f7f7;
padding: 2rem 5%;
}
aside {
color: #000;
background: #e1e1e1;
padding: 2rem 5%;
}
p.baseline {
font-size: 0.75em;
padding-left: 2.5%;
margin: 1.5em 0 0 75px;
}
p.logo {
position: absolute;
top: 0.5rem;
left: 2.5%;
width: 60px;
height: 60px;
}
p.logo a {
background: transparent;
}
p.logo img {
max-height: 100%;
}
/* --------------- FOOTER --------------- */
footer {
margin: 1rem 0 2rem;
text-align: center;
}
p.copyright {
font-size: 0.7em;
color: #fff;
background: transparent;
margin-top: 1rem;
}
/* --------------------------------------------------------------------------- */
/* -------------------------------- NAVIGATION ------------------------------- */
/* --------------------------------------------------------------------------- */
nav {
text-align: center;
margin-top: 1rem;
}
nav li {
list-style-type: none;
}
nav button,
nav a,
nav a:link,
nav a:visited {
display: block;
width: 100%;
font:
normal 1.2em open_sansbold,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: #444a51;
padding: 0.5em 0;
border: none;
border-top: 1px solid #ccc;
}
nav button:hover,
nav a:hover {
color: #191b1d;
background: #63b7c2;
text-decoration: none;
}
/* --------------------------------------------------------------------------- */
/* ------------------------------------- ASIDE ------------------------------- */
/* --------------------------------------------------------------------------- */
section + section {
margin-top: 2rem;
}
section.honors a {
display: block;
max-width: 220px;
background: #fff;
padding: 2rem;
margin: 1rem 0;
}
section.honors img {
vertical-align: baseline;
}
/* --------------------------------------------------------------------------- */
/* ---------------------------------- ARTICLES/SECTIONS ---------------------- */
/* --------------------------------------------------------------------------- */
article {
max-width: 50em;
}
article > .hd:first-of-type h3 {
margin-top: 0;
}
article p + p {
margin-top: 0.8em;
}
article ul,
section ul,
article ol,
section ol {
margin: 1em;
}
article li,
section li {
margin: 0 0 0.8em 0;
}
/* FIGURES */
figcaption {
font:
0.8em open_sansitalic,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
text-align: right;
margin: 0.3em 1rem;
}
/* Notes */
.note {
font:
0.9em open_sansitalic,
Frutiger,
"Frutiger Linotype",
Univers,
Calibri,
"Gill Sans",
"Gill Sans MT",
"Myriad Pro",
Myriad,
"DejaVu Sans Condensed",
"Liberation Sans",
"Nimbus Sans L",
Tahoma,
Geneva,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px dotted #2e3135;
}
/* --------------------------------------------------------------------------- */
/* ---------------------------------- UTILITIES ------------------------------ */
/* --------------------------------------------------------------------------- */
.links-list a {
display: block;
font-family: open_sansbold, Frutiger, "Frutiger Linotype", Univers, Calibri,
"Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed",
"Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue",
Helvetica, Arial, sans-serif;
text-decoration: underline;
color: #2e3135;
background: transparent;
}
/* LISTS */
ol.lsn {
counter-reset: level;
}
ol.lsn li {
display: block;
text-indent: -1em;
}
ol.lsn ol li {
display: block;
text-indent: -2em;
margin-left: 1.3em;
}
ol.lsn li::before {
content: counters(level, ".") ". ";
counter-increment: level;
}
/* --------------------------------------------------------------------------- */
/* ---------------------------------- QUERIES -------------------------------- */
/* --------------------------------------------------------------------------- */
@media screen and (min-width: 700px) and (max-width: 1600px) {
section.honors {
position: relative;
min-height: 220px;
padding: 1rem 0 0 320px;
}
}
@media screen and (min-width: 780px) {
ul.menuList {
display: -webkit-flex;
-webkit-justify-content: space-around;
display: -ms-flex;
-ms-justify-content: space-around;
display: flex;
justify-content: space-around;
background: #444a51;
}
nav button,
nav a,
nav a:link,
nav a:visited {
padding: 0.5em;
border: none;
}
}
@media screen and (min-width: 1000px) {
#container {
display: -webkit-flex;
display: -ms-flex;
display: flex;
flex-flow: row wrap;
}
header {
width: 20%;
text-align: left;
padding: 2rem 5%;
}
h1 {
font-size: 3vw;
line-height: 1.2;
padding: 120px 0 0;
margin: 0;
}
h1 strong {
font-size: 250%;
margin: 2rem 0 1.5rem;
}
p.logo {
width: 150px;
height: 150px;
top: 2rem;
left: 15%;
margin: 0;
}
main,
#mcOverview {
min-height: 800px;
}
h2 {
font-size: 4em;
}
h3 {
font-size: 2.5em;
}
ul.menuList {
display: block;
background: transparent;
}
ul.menuList li {
margin-bottom: 0.5rem;
}
#wrapper {
width: 70%;
}
nav {
margin-top: 4rem;
}
nav button,
nav a,
nav a:link,
nav a:visited {
font-size: 1em;
padding: 0.5em 0;
}
footer {
width: 98%;
text-align: left;
padding: 0 1%;
}
}
@media screen and (min-width: 1200px) {
p,
li,
dt,
dd {
font-size: 1.1em;
}
aside p,
aside li {
font-size: 1em;
}
}
@media screen and (min-width: 1600px) {
header {
width: 14%;
padding: 2rem 3%;
}
h1 {
font-size: 2.3vw;
}
#wrapper {
width: 80%;
}
#mcOverview {
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
main {
width: 70%;
}
aside {
width: 24%;
padding: 2rem 3%;
}
section.honors a {
max-width: 150px;
padding: 0.5rem;
}
}
ul.templates-list {
position: relative;
}
ul.templates-list li {
margin: 0;
padding: 5px 10px;
}