/*/ fonts /*/
@font-face {
font-family:'CartoGothic';
src:url('../fonts/CartoGothicStd-Book-webfont.eot');
src:url('../fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/CartoGothicStd-Book-webfont.woff') format('woff'),url('../fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),url('../fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
font-weight:normal;
font-style:normal;
}
@font-face {
font-family:'CartoGothic';
src:url('../fonts/CartoGothicStd-Italic-webfont.eot');
src:url('../fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),url('../fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),url('../fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
font-weight:normal;
font-style:italic;
}
@font-face {
font-family:'CartoGothic';
src:url('../fonts/CartoGothicStd-Bold-webfont.eot');
src:url('../fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),url('../fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),url('../fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
font-weight:bold;
font-style:normal;
}
@font-face {
font-family:'CartoGothic';
src:url('../fonts/CartoGothicStd-BoldItalic-webfont.eot');
src:url('../fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),url('../fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),url('../fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
font-weight:bold;
font-style:italic;
}
/*/ Font Awesome - http://fortawesome.github.com/Font-Awesome /*/
@font-face {
font-family: "FontAwesome";
src:url('../fonts/fontawesome-webfont.eot');
src:url('../fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight:normal;
font-style:normal;
}
html {
font-size:62.5%;
}
body, button, input, legend, select, textarea {
font:15px/22px 'CartoGothic',arial,helvetica,'Liberation Sans','Nimbus Sans L',sans-serif;
font-size:1.5rem;
line-height:2.25rem;
-moz-font-feature-settings:'liga=1';
-ms-font-feature-settings:'liga';
-webkit-font-feature-settings:'liga';
-o-font-feature-settings:'liga';
font-feature-settings:'liga';
}
pre, code, kbd, samp {
font:13px/20px inconsolata,consolas,'Courier New',monospace;
font-size:1.3rem;
line-height:2rem;
}
.contactJump:before, .email:before, .phone:before, #footer a:before {
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
display:inline-block;
text-decoration:none;
margin:0 .2em 0 0;
}
.contactJump:before {
content:'\f063';
font-size:.85em;
}
.email:before {
content:'\f0e0';
font-size:.85em;
margin:0 .4em 0 0;
}
.phone:before {
content:'\f095';
}
#footer a:before {
content:'\f060';
font-size:.85em;
}
/*/ basics /*/
html {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
html, legend {
color:#333333;
}
body {
margin:0;
background:#fafafa;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section,
.article, .aside, .details, .figcaption, .figure, .footer, .header, .hgroup, .nav, .section {
display:block;
}
::selection, ::-moz-selection {
background:#e0e0e0;
color:#555;
text-shadow:none;
}
:focus {
outline:0;
}
a:link, a:visited {
color:#1a9ca7;
}
a:hover, a:focus, a:active {
text-decoration:none;
}
blockquote, caption, dl, form, p, ol, table, ul {
margin:0 0 15px;
margin:0 0 1.5rem;
}
blockquote, ol, ul {
padding:0 0 0 25px;
padding:0 0 0 2.5rem;
}
img {
border:0;
-ms-interpolation-mode:bicubic;
width:auto !important;
width:100%;
max-width:100%;
display:block;
margin:0 0 15px;
margin:0 0 1.5rem;
}
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
font-size:inherit;
line-height:inherit;
margin:0 0 15px;
margin:0 0 1.5rem;
}
h1 {
font-weight:normal;
font-size:36px;
font-size:3.6rem;
line-height:40px;
line-height:4rem;
}
h2 {
font-size:24px;
font-size:2.4rem;
line-height:30px;
line-height:3rem;
margin:0 0 5px;
margin:0 0 .5rem;
}
h3 {
font:italic normal 18px/25px georgia,serif;
font-size:1.8rem;
line-height:2.5rem;
color:rgba(0,0,0,.8);
}
h4 {
margin:0;
}
h5 {
margin:0;
font-weight:normal;
}
h6 {
margin:0;
font-weight:normal;
font-style:italic;
}
em, i, ins {
font-style:italic;
}
strong, b {
font-weight:bold;
}
abbr {
text-transform:lowercase;
font-variant:small-caps;
letter-spacing:.04em;
}
abbr[title] {
border-bottom:1px dotted;
border-width:.1rem;
cursor:help;
}
del {
text-decoration:line-through;
}
mark {
background:#e0e0e0;
color:#555;
}
sub {
bottom:-.25em;
}
sup {
top:-.5em;
}
sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
blockquote {
margin:35px 0;
margin:3.5rem 0;
font-weight:bold;
font-size:16px;
font-size:1.6rem;
}
cite {
font-style:italic;
}
q {
quotes:none;
}
q:before {
content:'« ';
}
q:after {
content:' »';
}
dd, dt, li {
margin:0 0 5px;
margin:0 0 .5rem;
}
dt {
font-weight:bold;
}
ul {
list-style:circle;
}
ol ol, ol ul, ul ol, ul ul {
margin:0;
}
/*/ tables /*/
caption {
margin:0 0 15px;
margin:0 0 1.5rem;
font-style:italic;
color:#666;
font-size:14px;
font-size:1.4rem;
line-height:20px;
line-height:2rem;
text-align:left;
}
table {
border-collapse:collapse;
border-spacing:0;
width:100%;
text-align:left;
vertical-align:middle;
}
td, th {
padding:5px 2% 4px;
padding:.5rem 2% .4rem;
background:#f0f0f0;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-width:.1rem;
text-align:left;
}
tfoot {
font-weight:bold;
}
th {
text-transform:uppercase;
letter-spacing:.04em;
background:#222222;
color:#e0e0e0;
}
/*/ generic classes /*/
.article {
width:100%;
overflow:hidden;
}
.section {
text-align:left;
margin-bottom:20px;
margin-bottom:2rem;
}
/*/ style /*/
body {
text-align:center;
}
.inner {
overflow:hidden;
margin:0 auto;
max-width:648px;
max-width:64.8rem;
padding:15px 0 5px;
padding:1.5rem 0 .5rem;
}
/*/ header /*/
#header {
background:#000;
}
#header .inner {
text-align:center;
}
#logo {
width:150px;
width:15rem;
margin:0 auto 10px;
margin:0 auto 1rem;
}
#logo a {
color:#000;
border:0;
display:block;
}
#logo img {
margin:0;
}
/*/ nav /*/
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline-block;
}
#nav a {
text-transform:uppercase;
font-weight:bold;
display:inline-block;
color:#fff;
padding:5px 9px;
padding:.5rem .9rem;
text-decoration:none;
font-size:14px;
line-height:20px;
font-size:1.4rem;
line-height:2rem;
}
#nav a:hover, #nav a:focus, #nav a:active, #nav .current a {
background-color:#666;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:.5rem;
-moz-border-radius:.5rem;
border-radius:.5rem;
}
/*/ content /*/

/*/ footer /*/
#footer {
background:#000;
color:#fff;
}
#footer a {
color:#fff;
}
/*/ specific content /*/
.inner .secondary, h2, h3, #how .inner, #contact .inner {
width:92%;
max-width:600px;
max-width:60rem;
margin-left:auto;
margin-right:auto;
}
#intro {
background:#000;
}
#intro .inner {
background:#bb0;
padding:0;
color:#000;
-webkit-text-shadow:0 1px 0 rgba(255,255,255,.25);
-moz-text-shadow:0 1px 0 rgba(255,255,255,.25);
text-shadow:0 1px 0 rgba(255,255,255,.25);
}
#intro a, #contact a {
color:#fff;
-webkit-text-shadow:0;
-moz-text-shadow:0;
text-shadow:0;
}
#new {
display:none;
}
#responsive, #openSource {
background:#f0f0f0;
}
#responsive, #openSource {
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1) inset;
-moz-box-shadow:0 1px 1px rgba(0,0,0,.1) inset;
box-shadow:0 1px 1px rgba(0,0,0,.1) inset;
}
#accessibility, #how, #contact {
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.15) inset;
-moz-box-shadow:0 1px 1px rgba(0,0,0,.15) inset;
box-shadow:0 1px 1px rgba(0,0,0,.15) inset;
}
#how ol {
width:100%;
overflow:hidden;
}
#how ol, #how li {
padding:0;
list-style:none;
margin:0 0 10px;
margin:0 0 1rem;
}
#how li {
padding:10px 20px 10px 40px;
padding:1rem 2rem 1rem 4rem;
background:#f0f0f0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:.5rem;
-moz-border-radius:.5rem;
border-radius:.5rem;
overflow:hidden;
height:1%;
position:relative;
-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);
-moz-box-shadow:0 1px 0 rgba(0,0,0,.15);
box-shadow:0 1px 0 rgba(0,0,0,.15);
}
#how li span {
width:30px;
width:3rem;
line-height:24px;
line-height:2.4rem;
font-size:16px;
font-size:1.6rem;
text-align:center;
-webkit-border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
-webkit-border-radius:0 .5rem .5rem 0;
-moz-border-radius:0 .5rem .5rem 0;
border-radius:0 .5rem .5rem 0;
background:#bb0;
color:#fff;
font-weight:bold;
top:9px;
top:.9rem;
left:0;
position:absolute;
-webkit-text-shadow:0 1px 0 rgba(0,0,0,.25);
-moz-text-shadow:0 1px 0 rgba(0,0,0,.25);
text-shadow:0 1px 0 rgba(0,0,0,.25);
}
#contact {
background:#bb0;
color:#000;
-webkit-text-shadow:0 1px 0 rgba(255,255,255,.25);
-moz-text-shadow:0 1px 0 rgba(255,255,255,.25);
text-shadow:0 1px 0 rgba(255,255,255,.25);
}
#contact .section {
text-align:center;
}
#contact .email, #contact .phone {
font-weight:bold;
font-size:19px;
line-height:25px;
font-size:1.9rem;
line-height:2.5rem;
text-align:center;
padding:5px 10px;
padding:.5rem 1rem;
margin:0 .2em;
background:rgba(255,255,255,.15);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:.5rem;
-moz-border-radius:.5rem;
border-radius:.5rem;
white-space:nowrap;
-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1) inset;
-moz-box-shadow:0 1px 0 rgba(0,0,0,.1) inset;
box-shadow:0 1px 0 rgba(0,0,0,.1) inset;
}
#contact .phone {
letter-spacing:.15rem;
}
