blob: 536ee1652858ff2d9e8662f6ade3088c12eb9ce8 [file] [log] [blame]
/* color definitions */
$text_color: #555;
$text_color_dark: #333;
$text_color_light: #777;
$text_color_lighter: #999;
$ics_blue: #33b5e5;
$ics_blue_dark: #09c;
$ics_blue_darkest: #069;
$ics_blue_desaturated: #7aa1b0;
$panel_background: rgba(0, 0, 0, 0.03);
$panel_background_dark: rgba(0, 0, 0, 0.05);
$light_shadow_color: rgba(0,0,0,0.25);
$lighter_shadow_color: rgba(0,0,0,0.12);
$tiny_text_size: 12px;
$small_text_size: 14px;
$large_text_size: 16px;
$default_line_height: 20px;
$tiny_line_height: 15px;
$thinweight: 100;
$normalweight: 400;
$boldweight: 500;
/* 16 column layout */
$col_width: 40px;
$gutter_width: 20px;
@function gridwidth($n) {
@return $n * $col_width + ($n - 1) * $gutter_width;
}
/* clearfix idiom */
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
/* common mixins */
@mixin fontheight($font_size, $line_height) {
font-size: $font_size;
line-height: $line_height;
}
@mixin prefixed($property, $value) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
#{$property}: $value;
}
/* page layout + top-level styles */
::-webkit-selection,
::-moz-selection,
::selection {
background-color: $ics_blue_dark;
color: #fff;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
background: #eee none no-repeat fixed top left;
background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#ddd), color-stop(25%, #f2f2f2), color-stop(75%, #f2f2f2), to(#ddd));
background-image: -moz-linear-gradient(top, #ddd, #f2f2f2, #f2f2f2, #ddd);
-webkit-font-smoothing: antialiased; /* prevent subpixel antialiasing, which thickens the text */
text-rendering: optimizeLegibility; /* opentype ftw */
}
body {
color: $text_color;
font: #{$small_text_size}/#{$default_line_height} Roboto,sans-serif;
font-weight: $normalweight;
}
#page-container {
width: gridwidth(16);
margin: 0 40px;
}
#page-header {
height: 80px;
margin-bottom: 20px;
@include fontheight(48px, 48px);
font-weight: $thinweight;
padding-left: $gutter_width / 2;
a {
display: block;
position: relative;
top: 20px;
text-decoration :none;
color: $text_color !important;
}
}
#main-row {
@include clearfix;
}
#page-footer {
margin-left: gridwidth(3) + $gutter_width + 10;
margin-top: 80px;
color: $text_color_lighter;
padding-bottom: 40px;
@include fontheight($tiny_text_size, $tiny_line_height);
a {
color: $text_color_light;
}
#copyright {
margin-bottom: 10px;
}
}
#nav-container {
width: gridwidth(3);
min-height: 10px;
margin-right: $gutter_width;
float: left;
}
#nav {
width: gridwidth(3);
}
#nav.fixed {
position: fixed;
top: 40px;
}
#content {
width: gridwidth(13);
float: left;
}
a,
a:visited {
color: $text_color_dark;
}
a:hover,
acronym:hover {
color: $ics_blue_desaturated !important;
}
a:focus,
a:active {
color: $ics_blue !important;
}
img {
border: none;
}
ul {
margin: 0;
padding: 0;
}
strong {
font-weight: $boldweight;
}
em {
font-style: italic;
}
code {
font-family: Courier New, monospace;
}
acronym {
border-bottom: 1px dotted $text_color;
cursor: help;
}
acronym:hover {
border-bottom-color: $ics_blue_desaturated;
}
img.with-shadow,
video.with-shadow {
box-shadow: 0 2px 4px $light_shadow_color;
}
/* disclosures mixin */
@mixin disclosure($type) {
content: '';
background: transparent url(disclosure_#{$type}.png) no-repeat scroll top left;
width: 10px;
height: 10px;
}
/* content layout */
.layout-content-row {
@include clearfix;
margin-bottom: 10px;
}
.layout-content-col {
float: left;
margin-left: $gutter_width;
&:first-child {
margin-left: 0;
}
}
@for $n from 1 through 13 {
.layout-content-col.span-#{$n} { width: gridwidth($n); }
}
@for $n from 1 through 16 {
.vspace.size-#{$n} { height: 10px * $n; }
}
/* nav */
#nav {
li {
list-style-type: none;
@include fontheight($small_text_size, 10px);
}
a {
color: $text_color;
text-decoration: none;
}
li.selected > a,
li.selected .nav-section-header a {
font-weight: $boldweight;
color: $ics_blue_dark !important;
}
/* section header divs */
.nav-section-header {
position: relative;
padding: 10px;
margin-bottom: 1px;
/* section header links */
a {
color: $text_color_dark;
font-weight: $boldweight;
text-transform: uppercase;
}
&:after {
@include disclosure(down);
display: block;
position: absolute;
top: 10px;
right: 10px;
}
&.empty:after {
display: none;
}
}
/* expanded section header divs */
li.expanded .nav-section-header {
background: $panel_background_dark;
&:after {
@include disclosure(up);
}
}
/* sublinks */
& > li > ul {
height: 0;
overflow: hidden;
margin-bottom: 0;
&.animate-height {
@include prefixed(transition, height 0.25s ease-in);
}
li {
padding: 10px 10px (10px + 1) 10px;
}
}
& > li.expanded > ul {
height: auto;
li {
background: $panel_background;
}
}
#back-dac-section {
padding: 10px;
border-top: 1px solid #ddd;
a {
color: $text_color_dark;
font-weight: $boldweight;
text-transform: uppercase;
}
}
}
/* content header */
$content_header_height: 30px;
.content-header {
border-bottom: 1px solid $ics_blue;
height: $content_header_height;
h2 {
border-bottom: 0;
}
&.just-links {
border-bottom: 0;
}
}
.content-footer {
border-top: 1px solid $ics_blue;
margin-top: 10px;
height: $content_header_height;
}
.paging-links {
position: relative;
a {
position: absolute;
font-size: $small_text_size;
line-height: $content_header_height;
color: $text_color;
text-decoration: none;
text-transform: uppercase;
}
.prev-page-link {
display: none;
left: -5px;
&:before {
@include disclosure(left);
display: inline-block;
margin-right: 5px;
}
}
.next-page-link {
display: none;
right: 10px;
&:after {
@include disclosure(right);
display: inline-block;
margin-left: 5px;
}
}
}
/* content body */
@-webkit-keyframes glowheader {
from { background-color: rgb(51, 181, 229); color: #000; border-bottom-color: #000; }
to { background-color: transparent; color: $ics_blue; border-bottom-color: $ics_blue; }
}
@-moz-keyframes glowheader {
from { background-color: rgb(51, 181, 229); color: #000; border-bottom-color: #000; }
to { background-color: transparent; color: $ics_blue; border-bottom-color: $ics_blue; }
}
@keyframes glowheader {
from { background-color: rgb(51, 181, 229); color: #000; border-bottom-color: #000; }
to { background-color: transparent; color: $ics_blue; border-bottom-color: $ics_blue; }
}
#content {
p,
ul,
ol,
h3 {
margin: 0 10px 10px 10px;
}
h2 {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
font-size: $large_text_size;
line-height: $content_header_height;
font-weight: $boldweight;
color: $ics_blue;
border-bottom: 1px solid $ics_blue;
height: $content_header_height;
&:target {
@include prefixed(animation-name, glowheader);
@include prefixed(animation-duration, 0.7s);
@include prefixed(animation-timing-function, ease-out);
}
}
hr {
border: 0;
border-bottom: 1px solid $ics_blue;
margin-bottom: 20px;
}
h3 {
color: $ics_blue;
text-transform: uppercase;
@include fontheight($small_text_size, $default_line_height);
font-weight: $boldweight;
}
h4 {
margin: 0 10px;
color: $text_color_dark;
font-weight: $boldweight;
@include fontheight($small_text_size, $default_line_height);
}
strong {
color: $text_color_dark;
}
ul li,
ol li {
margin-left: 20px;
h4 {
margin: 0;
}
p {
margin-left: 0;
}
}
ul li {
list-style-type: square;
list-style-type: none;
position: relative;
&:before {
content: '\2022';
font-family: verdana;
@include fontheight($small_text_size, $default_line_height);
position: absolute;
left: -20px;
top: -1px;
}
}
ol {
counter-reset: item;
li {
@include fontheight($small_text_size, $default_line_height);
list-style-type: none;
position: relative;
&:before {
content: counter(item) '. ';
counter-increment: item;
position: absolute;
left: -20px;
top: 0;
}
@for $n from 1 through 10 {
&.value-#{$n}:before {
content: '#{$n}. ';
}
}
}
}
.with-callouts ol li {
list-style-position: inside;
margin-left: 0;
&:before {
position: static;
display: inline;
left: 0;
float: left;
width: 17px;
color: $ics_blue;
font-weight: $boldweight;
}
}
}
/* special list items */
li.no-bullet {
list-style-type: none !important;
}
#content li.with-icon {
position: relative;
margin-left: 40px;
min-height: 30px;
p {
margin-left: 0 !important;
}
&:before {
position: absolute;
left: -40px;
top: 0;
content: '';
width: 30px;
height: 30px;
}
&.tablet:before {
background-image: url(ico_phone_tablet.png);
}
&.web:before {
background-image: url(ico_web.png);
}
&.checklist:before {
background-image: url(ico_checklist.png);
}
&.action:before {
background-image: url(ico_action.png);
}
&.use:before {
background-image: url(ico_use.png);
}
}
/* figures and callouts */
.figure {
position: relative;
&.pad-below {
margin-bottom: 20px;
}
.figure-callout {
position: absolute;
color: #fff;
font-weight: $boldweight;
@include fontheight($large_text_size, 23px);
text-align: center;
background: transparent url(callout.png) no-repeat scroll 50% 50%;
padding-right: 2px;
width: 30px;
height: 29px;
z-index: 1000;
&.top {
top: -9px;
}
&.right {
right: -5px;
}
}
}
.figure-caption {
margin: 0 10px 20px 10px;
@include fontheight($small_text_size, $default_line_height);
font-style: italic;
}
/* rows of figures */
.figure-row {
@include fontheight(0, 0); /* to prevent space between figures */
.figure {
display: inline-block;
vertical-align: top;
}
.figure + .figure {
margin-left: 10px; /* reintroduce space between figures */
}
}
/* video containers */
.framed-galaxynexus-land-span-13 {
background: transparent url(content/misc_full_galaxynexus_blank_land_span13.png) no-repeat scroll top left;
padding: 42px 122px 62px 126px;
overflow: hidden;
&,
& video,
& img {
width: 512px;
height: 286px;
}
}
.framed-galaxynexus-port-span-9 {
background: transparent url(content/misc_full_galaxynexus_blank_port_span9.png) no-repeat scroll top left;
padding: 95px 122px 107px 124px;
overflow: hidden;
&,
& video,
& img {
width: 274px;
height: 488px;
}
}
.framed-galaxynexus-port-span-5 {
background: transparent url(content/misc_full_galaxynexus_blank_port_span5.png) no-repeat scroll top left;
padding: 75px 31px 76px 33px;
overflow: hidden;
&,
& video,
& img {
width: 216px;
height: 384px;
}
}
/* landing page disclosures */
.landing-page-link {
text-decoration: none;
font-weight: $boldweight;
color: $text_color_dark;
&:after {
@include disclosure(right);
display: inline-block;
margin-left: 5px;
}
}
/* tooltips */
$tooltip_back_color: rgba(0,0,0,0.9);
.tooltip-box {
position: absolute;
background-color: $tooltip_back_color;
border-radius: 2px;
@include fontheight($small_text_size, $default_line_height);
color: #fff;
padding: 6px 10px;
max-width: 250px;
z-index: 10000;
&.below:after {
position: absolute;
content: '';
line-height: 0;
display: block;
top: -10px;
left: 5px;
border: 5px solid transparent;
border-bottom-color: $tooltip_back_color;
}
}
/* video note */
.video-instructions {
margin-top: 10px;
margin-bottom: 10px;
&:before {
content: '';
background: transparent url(ico_movie_inline.png) no-repeat scroll top left;
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
}
&:after {
content: 'Click to replay movie.';
}
}
/* download buttons */
.download-button {
display: block;
margin-bottom: 5px;
text-decoration: none;
background-color: $ics_blue;
color: #fff !important;
font-weight: $boldweight;
box-shadow: 0 1px 1px $lighter_shadow_color;
padding: 6px 12px;
border-radius: 2px;
&:hover,
&:focus {
background-color: $ics_blue_dark;
color: #fff !important;
}
&:active {
background-color: $ics_blue_darkest;
}
}