@charset "utf-8";
/*******************************\
/*******************************\
/*** ***\
/*** TABLE OF CONTENTS ***\
/*** ***\
/*******************************\
/*******************************\
01. IMPORTED WEB FONTS
02. BASIC WEBSITE STRUCTURE
03. BASIC TAG STYLING
04. COMMON USED STYLES
05. HOME PAGE SPECIFIC
06. SECTION PORTAL SPECIFIC
07. CONTENT PAGE SPECIFIC
08. ABOUT SECTION SPECIFIC
09. CONTACT SECTION SPECIFIC
10. REFERENCE PAGE SPECIFIC
11. APPENDIX
\*******************************/
/*******************************\
/* 01. IMPORTED WEB FONTS *\
/*******************************\
This section loads custom fonts from the web server
to the webpage to ensure consistent styling across
the website on all browsers. Visitors using a modern
browser, that do not have these fonts installed on
their home computer can still enjoy the website the
way it was intended.
\*******************************/
@font-face {
font-family: 'SwissRegular';
src: url('../fonts/swiss-regular.eot');
src: url('../fonts/swiss-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/swiss-regular.woff') format('woff'),
url('../fonts/swiss-regular.ttf') format('truetype'),
url('../fonts/swiss-regular.svg#swis721_btroman') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SwissBold';
src: url('../fonts/swiss-bold.eot');
src: url('../fonts/swiss-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/swiss-bold.woff') format('woff'),
url('../fonts/swiss-boldt.ttf') format('truetype'),
url('../fonts/swiss-bold.svg#swis721_btbold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'SwissLight';
src: url('../fonts/swiss-light.eot');
src: url('../fonts/swiss-light.eot?#iefix') format('embedded-opentype'),
url('../fonts/swiss-light.woff') format('woff'),
url('../fonts/swiss-light.ttf') format('truetype'),
url('../fonts/swiss-light.svg#swis721_lt_btlight') format('svg');
font-weight: normal;
font-style: normal;
}
/************************************\
/* 02. BASIC WEBSITE STRUCTURE *\
/************************************\
Styles that control the outside structure of the
website go here. That is, the designed container
for the information that appears on every page.
Exceptions to these rules (for example design
considerations for the home page) will be kept
in their respective subsections.
\************************************/
* {
border: none;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
/* Reset the padding, width and borders for all
tags on the website. Also, Specify arial as the
default font for this website. */
}
body {
background-color: #1a237e;
background-image: url(../images/websiteskin/abstractlights_bg.jpg);
background-repeat: repeat-x;
/* Set the background color of the page to dark blue,
with the abstrack light images repeating across the
top of the page only */
}
div.container {
width: 1000px;
margin: 0 auto;
position: relative;
}
#index div.container:after {
/*content: url(../images/websiteskin/menubar_shadow2.png);*/
position: absolute;
top: 0; left: -31px;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
div#section:after {
/*content: url(../images/websiteskin/menubar_shadow2.png);*/
position: absolute;
top: -70px; left: -31px;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
h1 {
display: block;
position: relative;
height: 134px;
width: 1000px;
background-image: url(../images/websiteskin/h1_short.jpg);
background-repeat: no-repeat;
border-bottom: 2px solid #1a237e;
/* Styles for the main banner at the top of each page. */
}
#index h1 {
height: 210px;
background-image: url(../images/websiteskin/h1_tall.jpg);
/* The main website banner is sligtly taller and flashier
on the homepage, this style instructs the home page to
load the taller image. */
}
h1 a {
display: block;
width: 361px;
height: 120px;
position: absolute;
top: 4px;
left: 6px;
text-indent: -9999em;
overflow: hidden;
/* Within the banner, the logo is clickable and takes you
back to the home page. */
}
#index h1 a {
width: 367px;
height: 170px;
top: 4px;
left: 4px;
}
.menuBar {
/* Specific styles for the menu bar kept inside
menuBar.css within the "assets/css" folder. */
}
.staticHead {
position: relative;
z-index: 50;
/* Sets the the menu bar to scroll up and down the
page, anchored to the main banner. */
}
#index .staticHead { margin-bottom: 54px; }
.dynamicHead {
display: block;
z-index: 40;
position: fixed;
top: 0; left: 0;
width: 100%;
/* The second "dynamic" menu bar is anchored to the
top of the browser window regardless of haw far you
have scrolled down the page. Initially it is hidden
behind with the "static" menu bar and banner using
z-index. */.
}
.dynamicHead #dynamicNavigation {
margin: 0 auto;
}
.contentArea {
background-color: #FFF;
padding: 20px 20px 0 20px;
color: #616161;
font-family: "SwissLight", Arial, Helvetica, sans-serif;
font-size: 14px;
}
.contentArea p {
padding-bottom: 20px;
line-height: 120%;
}
.contentArea .galleryGroup a {
text-decoration: none;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
color: #424242;
font-size: 12px;
text-align: center;
border-top: 4px solid #bfbfbf;
padding: 30px 0;
background: #e4e4e4; /* Old browsers */
background: -moz-linear-gradient(top, #e4e4e4 0%, #d6d6d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e4e4e4 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e4e4e4 0%,#d6d6d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e4e4e4 0%,#d6d6d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #e4e4e4 0%,#d6d6d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
/* Box for the footer, put a solid line across
the top, and subtle gradient in the background. */
}
.footer ul {
padding: 5px 0 0 0;
}
.footer li {
display: inline;
list-style-type: none;
}
.footer a {
padding: 0 10px;
border-left: 1px solid #1c3164;
font-size: 10px;
/* Footer links, bring them up next to each other,
and separate them with a 1px vertical line. */
}
.footer li:first-child a {
border: none;
/* The first link in the footer does not need a
vertical separator, so hide it. */
}
#index .footer {
margin-top: 70px;
position: relative;
}
#index .footer:before {
/*content: url(../images/websiteskin/genericWide_shadow.jpg);
position: absolute;
top: -74px;
left: 0;*/
/* On the home page, put a shadow above the footer to make
the previous content (Parts and Services portal?) jump
off the page. */
}
/******************************\
/* 03. BASIC TAG STYLING *\
/******************************\
Simple styling for basic tags to ensure consistent
styling across the website. Exceptions to these rules
should go within their respective subcategories.
\******************************/
h2 {
font-family: "SwissBold", Arial, Helvetica, sans-serif;
font-size: 24px;
color: #1a237e;
padding-bottom: 20px;
}
#index h2 {
color: #FFF;
}
#section h2 {
color: #FFF;
padding: 30px 20px;
position: relative;
z-index: 40;
}
h2 em {
display: block;
padding: 5px 0 20px 0;
font-style: normal;
font-weight: bold;
font-size: 14px;
}
h3 {
font-family: "SwissBold", Arial, Helvetica, sans-serif;
font-size: 24px;
color: #1a237e;
}
h3 { padding-bottom: 20px; }
a:link, a:visited {
color: #1A237E;
}
a:hover, a:active {
color: #1A237E;
}
hr {
border-top: 1px solid #DCDCDC;
margin: 0 -20px 20px -20px;
clear: both;
/* Sometimes within a content page you may want to
separate the content into "subsections" without
creating new pages or boxing up the content. This
tag will insert a horizontal line across the "content"
section
and let you begin a new topic. */
}
/*******************************\
/* 04. COMMON USED STYLES *\
/*******************************\
Reusable styles that can be reused throughout the
website. These are not section specific design
elements, but rather snippets that can be inserted
into any section of the site.
\*******************************/
a.callToAction {
padding: 10px;
/* background-color: #F44336; */
/* border: 1px solid #B71C1C; */
/* font-family: "SwissBold", Arial, Helvetica, sans-serif; */
/* font-size: 14px; */
color: #FFF;
text-decoration: none;
/* border-radius: 10px; */
/* A special link style, these are the red block
links with the simple white arrow. These are used
like signposts to call attention to the visitor and
make them take an action and guide them around the
site, be it clicking to another section of the site,
submitting a contact form, or finding out more
detailed information. */
}
.mdl-button {
background: transparent;
border: none;
border-radius: 2px;
color: rgb(0,0,0);
position: relative;
height: 36px;
min-width: 64px;
padding: 0 16px;
display: inline-block;
font-family: "SwissBold", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow, transform;
-webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle; }
.mdl-button::-moz-focus-inner {
border: 0; }
.mdl-button:hover {
background-color: rgba(158,158,158, 0.20); }
.mdl-button:focus:not(:active) {
background-color: rgba(0,0,0, 0.12); }
.mdl-button:active {
background-color: rgba(158,158,158, 0.40); }
.mdl-button.mdl-button--colored {
color: #1a237e; }
.mdl-button.mdl-button--colored:focus:not(:active) {
background-color: rgba(0,0,0, 0.12); }
input.mdl-button[type="submit"] {
-webkit-appearance: none; }
.mdl-button--raised {
background: rgba(158,158,158, 0.20);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.mdl-button--raised:active {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--raised:focus:not(:active) {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--raised.mdl-button--colored {
background: rgb(244,67,54);
color: rgb(255,255,255); }
.mdl-button--raised.mdl-button--colored:hover {
background-color: rgb(183,28,28); }
.mdl-button--raised.mdl-button--colored:active {
background-color: rgb(244,67,54); }
.mdl-button--raised.mdl-button--colored:focus:not(:active) {
background-color: rgb(183,28,28); }
.mdl-button--raised.mdl-button--colored .mdl-ripple {
background: rgb(255,255,255); }
.mdl-button--fab {
border-radius: 50%;
font-size: 24px;
height: 56px;
margin: auto;
min-width: 56px;
width: 56px;
padding: 0;
overflow: hidden;
background: rgba(158,158,158, 0.20);
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
position: relative;
line-height: normal; }
.mdl-button--fab .material-icons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-12px, -12px);
-ms-transform: translate(-12px, -12px);
transform: translate(-12px, -12px);
line-height: 24px;
width: 24px; }
.mdl-button--fab.mdl-button--mini-fab {
height: 40px;
min-width: 40px;
width: 40px; }
.mdl-button--fab .mdl-button__ripple-container {
border-radius: 50%;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
.mdl-button--fab:active {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--fab:focus:not(:active) {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--fab.mdl-button--colored {
background: rgb(244,67,54);
color: rgb(255,255,255); }
.mdl-button--fab.mdl-button--colored:hover {
background-color: rgb(244,67,54); }
.mdl-button--fab.mdl-button--colored:focus:not(:active) {
background-color: rgb(244,67,54); }
.mdl-button--fab.mdl-button--colored:active {
background-color: rgb(244,67,54); }
.mdl-button--fab.mdl-button--colored .mdl-ripple {
background: rgb(255,255,255); }
.mdl-button--icon {
border-radius: 50%;
font-size: 24px;
height: 32px;
margin-left: 0;
margin-right: 0;
min-width: 32px;
width: 32px;
padding: 0;
overflow: hidden;
color: inherit;
line-height: normal; }
.mdl-button--icon .material-icons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-12px, -12px);
-ms-transform: translate(-12px, -12px);
transform: translate(-12px, -12px);
line-height: 24px;
width: 24px; }
.mdl-button--icon.mdl-button--mini-icon {
height: 24px;
min-width: 24px;
width: 24px; }
.mdl-button--icon.mdl-button--mini-icon .material-icons {
top: 0px;
left: 0px; }
.mdl-button--icon .mdl-button__ripple-container {
border-radius: 50%;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
.mdl-button__ripple-container {
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
overflow: hidden; }
.mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple,
.mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple {
background-color: transparent; }
.mdl-button--primary.mdl-button--primary {
color: rgb(244,67,54); }
.mdl-button--primary.mdl-button--primary .mdl-ripple {
background: rgb(255,255,255); }
.mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {
color: rgb(255,255,255);
background-color: rgb(244,67,54); }
.mdl-button--accent.mdl-button--accent {
color: rgb(244,67,54); }
.mdl-button--accent.mdl-button--accent .mdl-ripple {
background: rgb(255,255,255); }
.mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {
color: rgb(255,255,255);
background-color: rgb(244,67,54); }
.mdl-button[disabled][disabled], .mdl-button.mdl-button--disabled.mdl-button--disabled {
color: rgba(0,0,0, 0.26);
cursor: default;
background-color: transparent; }
.mdl-button--fab[disabled][disabled], .mdl-button--fab.mdl-button--disabled.mdl-button--disabled {
background-color: rgba(0,0,0, 0.12);
color: rgba(0,0,0, 0.26);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.mdl-button--raised[disabled][disabled], .mdl-button--raised.mdl-button--disabled.mdl-button--disabled {
background-color: rgba(0,0,0, 0.12);
color: rgba(0,0,0, 0.26);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.mdl-button--colored[disabled][disabled], .mdl-button--colored.mdl-button--disabled.mdl-button--disabled {
color: rgba(0,0,0, 0.26); }
.mdl-button .material-icons {
vertical-align: middle; }
.noBreak { white-space: nowrap; }
/* If there is a particular group of words (for example
a product name or a person's name) that you'd like to
keep from "word-wrapping" or being split over two lines,
wrap those words in a (if applicable) with this
class to force them onto the same line. */
.clearFix { clear: both; display: block; height: 0px; }
/* When groups of content are boxed up and put in rows
using a "float" property, to prevent this, end the
group of boxed content with a (if applicable)
holding this class to push the following content
back down. */
p.intro {
font-family: "SwissLight", Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 140%;
color: #FFF;
text-align: center;
margin: 0 40px 54px 40px;
clear: both;
/* A special paragagraph tag for leading information or
summary paragraphs. Typically at the top of a page
this is the blurb that gives an overview of the page's
content. Can be used above the "content"
on the
dark blue background, or inside the "content"
on the white background. */
}
#index p.intro a,
#section p.intro a {
color: #FFF;
font-size: 16px;
font-family: "SwissBold", Arial Black, Helvetica, sans-serif;
padding-left: 5px;
}
#section p.intro {
margin-bottom: 40px;
margin-top: -14px;
}
.contentArea p.intro {
font-size: 20px;
ine-height: 140%;
margin: 0 20px 20px 20px;
font-family: "SwissLight", Arial, Helvetica, sans-serif;
color: #616161;
}
.contactPortal {
padding: 20px 200px 30px 20px;
background-image: url(../images/websiteskin/partsPortal_bg_flat.gif);
position: relative;
margin: 10px 0 20px 0;
clear: both;
}
.contactPortal h3, .contactPortal p { color: #FFF; }
.contactPortal .callToAction {
position: absolute;
bottom: 20px; right: 20px;
/* background-color: #F44336;
border: 1px solid #B71C1C; */
}
.breadcrumbs {
padding-bottom: 15px;
/* Breadcrums are the links at the top of content pages to
give the visitor context of how "deep" into the site's
navigational tree they are. These are also a useful way
to show which category or section a piece of information
or product falls into. Links to higher pages in the
navigational hierarchy are hyperlinked, the indicator of
the current page they are on can be left un-linked.
These pages typically will not appear on the home page
or section homepages, as we are not yet far enough down
the navigational tree for them to be of any relevance/use. */
}
.breadcrumbs li {
display: inline;
list-style-type: none;
font-size: 12px;
padding-right: 5px;
}
.breadcrumbs li:before {
content: ">";
padding-right: 5px;
}
.breadcrumbs li:first-child:before {
content: normal;
}
.miniPortals {
clear: both;
display: block;
/* Mini Portals sit at the bottom of each content page and
serve as a way to drive the visitor to another section of
the site once they have finished reading the page they are
currently on. */
}
.miniPortals div {
float: left;
display: block;
position: relative;
padding: 20px;
border: 1px solid #DCDCDC;
background-color: #F5F5F5;
margin: 15px 10px 0 10px;
}
.miniPortals h3 {
font-size: 18px;
}
.miniPortals .callToAction {
position: absolute;
bottom: 23px; right: 20px;
}
.miniPortalsFooter {
clear: both;
height: 35px;
}
#weighing .weighingPortalMini,
#trailers .trailerPortalMini,
#antarctic .antarcticPortalMini,
#parts .partsPortalMini,
#about .partsPortalMini,
#contact .partsPortalMini,
#reference .partsPortalMini {
display: none;
/* There are 4 types of Mini Portal - Weighing
Systems, Trailers, Antarctic Equipment, and
Parts and Services. If the visitor is looking
at a page in the Weighing Systems page, this
hides the Weighing Systems portal, the Trailers
portal from a Trailers Page, etc. */
}
.mdl-shadow--2dp {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.mdl-shadow--3dp {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); }
.mdl-shadow--4dp {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
.mdl-shadow--6dp {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }
.mdl-shadow--8dp {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }
.mdl-shadow--16dp {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }
/* The above styles create a shadow around an element on
its left and right sides, and beneath it, along the edges.
Select the correct size shadow based on your styling.
Shadows are in either 2,3,4, 6, 8, or 16pixels.
Include in the class element with your other classes
separated only by a space: e.g