Colors

Rutter Primary Palette

OceanWaves Palette

Typography

h1

A H1 heading style

h2

A H2 heading style

h3

A H3 heading style

h4

A H4 heading style

h5
A H5 heading style
h6
A H6 heading style
Lead Copy paragraph 
<p class="leadcopy">Whether building electronics systems, or telecommunications networks, our integrated services address a diverse customer base.</p>

Whether building electronics systems, or telecommunications networks, our integrated services address a diverse customer base.

paragraph

For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.

Product Description

Detect Big and Small.

In open water, the sigma S6 system's ability to reliably detect small bergy bits and growlers that can significantly damage a vessel or platform is proven throughout the industry.

Round the Clock Coverage.

The overall improvements in situational awareness provided by Ice Navigator™ occur across a wide range of sea states, weather, and daylight conditions, making the tactical information it provides an essential component for real time route planning and decision making in ice operations.

Product Description with Image

The Chosen Solution for Ice-Class Fleets and Arctic Drilling Operations

The sigma S6 system was specifically developed for ice detection in the ice-threatened oilfields of Eastern Canada. Rutter's Ice Navigator™ installation base now includes many of the world's ice breaker fleets as well as tankers, bulk carriers, research vessels and coast guard vessels from countries operating in Arctic and subarctic regions.

Ice Navigator™ systems have also been selected by oil and gas companies as part of their ice defence and ice management solutions where they are resident on platforms, drill ships, and specialty support vessels.

Boat In Ice
Copyright and footer links
Rutter Logo

Copyright ©2014 Rutter Inc. All Rights Reserved. | Terms of Use | Privacy Policy

Text

abbr

The W3C is an international community that develops open standards to ensure the long-term growth of the Web.

address
For more details, please contact Chris Da Sie
blockquote 
<blockquote>
  <p>Blockquote default for general use</p>
</blockquote>

Usage:

Blockquote default for general use like testimonials. Needs to be only on light backgrounds

Rutter offers a full suite of design, manufacturing and integration services.

blockquote reversed 
<blockquote class="reverse-quote">
  <p>Blockquote for display over images and dark backgrounds</p>
</blockquote>

Usage:

This list style should only be used on the event listings.

Rutter offers a full suite of design, manufacturing and integration services.

cite

Globe & Mail, Feb 12, 2014

del

I currently work at The Idea Factory Chris Da Sie Designs.

em

The additional semantics give us some preset ways of marking up content.

b

The additional semantics give us some preset ways of marking up content.

strong

The additional semantics give us some preset ways of marking up content.

small

© 2014 - Patterns Portfolio is an open sourced framework.

hr
time
q

John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry’s, on Gloucester Road.

mark

I also have some kittens who are visiting me these days. They’re really cute. I think they like my garden! Maybe I should adopt a kitten.

Icons

Basic Icon 
<p>
<span class="icon-"></span>
  Some text here
</p>

Usage:

We will be using icon fonts for areas that need extra context.

icon-home
icon-home2
icon-home3
icon-office
icon-newspaper
icon-pencil
icon-pencil2
icon-quill
icon-pen
icon-blog
icon-droplet
icon-paint-format
icon-image
icon-image2
icon-images
icon-camera
icon-music
icon-headphones
icon-play
icon-film
icon-camera2
icon-dice
icon-pacman
icon-spades
icon-clubs
icon-diamonds
icon-pawn
icon-bullhorn
icon-connection
icon-podcast
icon-feed
icon-book
icon-books
icon-library
icon-file
icon-profile
icon-file2
icon-file3
icon-file4
icon-copy
icon-copy2
icon-copy3
icon-paste
icon-paste2
icon-paste3
icon-stack
icon-folder
icon-folder-open
icon-tag
icon-tags
icon-barcode
icon-qrcode
icon-ticket
icon-cart
icon-cart2
icon-cart3
icon-coin
icon-credit
icon-calculate
icon-support
icon-phone
icon-phone-hang-up
icon-address-book
icon-notebook
icon-envelope
icon-pushpin
icon-location
icon-location2
icon-compass
icon-map
icon-map2
icon-history
icon-clock
icon-clock2
icon-alarm
icon-alarm2
icon-bell
icon-stopwatch
icon-calendar
icon-calendar2
icon-print
icon-keyboard
icon-screen
icon-laptop
icon-mobile
icon-mobile2
icon-tablet
icon-tv
icon-cabinet
icon-drawer
icon-drawer2
icon-drawer3
icon-box-add
icon-box-remove
icon-download
icon-upload
icon-disk
icon-storage
icon-undo
icon-redo
icon-flip
icon-flip2
icon-undo2
icon-redo2
icon-forward
icon-reply
icon-bubble
icon-bubbles
icon-bubbles2
icon-bubble2
icon-bubbles3
icon-bubbles4
icon-user
icon-users
icon-user2
icon-users2
icon-user3
icon-user4
icon-quotes-left
icon-busy
icon-spinner
icon-spinner2
icon-spinner3
icon-spinner4
icon-spinner5
icon-spinner6
icon-binoculars
icon-search
icon-zoom-in
icon-zoom-out
icon-expand
icon-contract
icon-expand2
icon-contract2
icon-key
icon-key2
icon-lock
icon-lock2
icon-unlocked
icon-wrench
icon-settings
icon-equalizer
icon-cog
icon-cogs
icon-cog2
icon-hammer
icon-wand
icon-aid
icon-bug
icon-pie
icon-stats
icon-bars
icon-bars2
icon-gift
icon-trophy
icon-glass
icon-mug
icon-food
icon-leaf
icon-rocket
icon-meter
icon-meter2
icon-dashboard
icon-hammer2
icon-fire
icon-lab
icon-magnet
icon-remove
icon-remove2
icon-briefcase
icon-airplane
icon-truck
icon-road
icon-accessibility
icon-target
icon-shield
icon-lightning
icon-switch
icon-power-cord
icon-signup
icon-list
icon-list2
icon-numbered-list
icon-menu
icon-menu2
icon-tree
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-download2
icon-upload2
icon-download3
icon-upload3
icon-globe
icon-earth
icon-link
icon-flag
icon-attachment
icon-eye
icon-eye-blocked
icon-eye2
icon-bookmark
icon-bookmarks
icon-brightness-medium
icon-brightness-contrast
icon-contrast
icon-star
icon-star2
icon-star3
icon-heart
icon-heart2
icon-heart-broken
icon-thumbs-up
icon-thumbs-up2
icon-happy
icon-happy2
icon-smiley
icon-smiley2
icon-tongue
icon-tongue2
icon-sad
icon-sad2
icon-wink
icon-wink2
icon-grin
icon-grin2
icon-cool
icon-cool2
icon-angry
icon-angry2
icon-evil
icon-evil2
icon-shocked
icon-shocked2
icon-confused
icon-confused2
icon-neutral
icon-neutral2
icon-wondering
icon-wondering2
icon-point-up
icon-point-right
icon-point-down
icon-point-left
icon-warning
icon-notification
icon-question
icon-info
icon-info2
icon-blocked
icon-cancel-circle
icon-checkmark-circle
icon-spam
icon-close
icon-checkmark
icon-checkmark2
icon-spell-check
icon-minus
icon-plus
icon-enter
icon-exit
icon-play2
icon-pause
icon-stop
icon-backward
icon-forward2
icon-play3
icon-pause2
icon-stop2
icon-backward2
icon-forward3
icon-first
icon-last
icon-previous
icon-next
icon-eject
icon-volume-high
icon-volume-medium
icon-volume-low
icon-volume-mute
icon-volume-mute2
icon-volume-increase
icon-volume-decrease
icon-loop
icon-loop2
icon-loop3
icon-shuffle
icon-arrow-up-left
icon-arrow-up
icon-arrow-up-right
icon-arrow-right
icon-arrow-down-right
icon-arrow-down
icon-arrow-down-left
icon-arrow-left
icon-arrow-up-left2
icon-arrow-up2
icon-arrow-up-right2
icon-arrow-right2
icon-arrow-down-right2
icon-arrow-down2
icon-arrow-down-left2
icon-arrow-left2
icon-arrow-up-left3
icon-arrow-up3
icon-arrow-up-right3
icon-arrow-right3
icon-arrow-down-right3
icon-arrow-down3
icon-arrow-down-left3
icon-arrow-left3
icon-tab
icon-checkbox-checked
icon-checkbox-unchecked
icon-checkbox-partial
icon-radio-checked
icon-radio-unchecked
icon-crop
icon-scissors
icon-filter
icon-filter2
icon-font
icon-text-height
icon-text-width
icon-bold
icon-underline
icon-italic
icon-strikethrough
icon-omega
icon-sigma
icon-table
icon-table2
icon-insert-template
icon-pilcrow
icon-left-toright
icon-right-toleft
icon-paragraph-left
icon-paragraph-center
icon-paragraph-right
icon-paragraph-justify
icon-paragraph-left2
icon-paragraph-center2
icon-paragraph-right2
icon-paragraph-justify2
icon-indent-increase
icon-indent-decrease
icon-new-tab
icon-embed
icon-code
icon-console
icon-share
icon-mail
icon-mail2
icon-mail3
icon-mail4
icon-google
icon-google-plus
icon-google-plus2
icon-google-plus3
icon-google-plus4
icon-google-drive
icon-facebook
icon-facebook2
icon-facebook3
icon-instagram
icon-twitter
icon-twitter2
icon-twitter3
icon-feed2
icon-feed3
icon-feed4
icon-youtube
icon-youtube2
icon-vimeo
icon-vimeo2
icon-vimeo3
icon-lanyrd
icon-flickr
icon-flickr2
icon-flickr3
icon-flickr4
icon-picassa
icon-picassa2
icon-dribbble
icon-dribbble2
icon-dribbble3
icon-forrst
icon-forrst2
icon-deviantart
icon-deviantart2
icon-steam
icon-steam2
icon-github
icon-github2
icon-github3
icon-github4
icon-github5
icon-wordpress
icon-wordpress2
icon-joomla
icon-blogger
icon-blogger2
icon-tumblr
icon-tumblr2
icon-yahoo
icon-tux
icon-apple
icon-finder
icon-android
icon-windows
icon-windows8
icon-soundcloud
icon-soundcloud2
icon-skype
icon-reddit
icon-linkedin
icon-lastfm
icon-lastfm2
icon-delicious
icon-stumbleupon
icon-stumbleupon2
icon-stackoverflow
icon-pinterest
icon-pinterest2
icon-xing
icon-xing2
icon-flattr
icon-foursquare
icon-foursquare2
icon-paypal
icon-paypal2
icon-paypal3
icon-yelp
icon-libreoffice
icon-file-pdf
icon-file-openoffice
icon-file-word
icon-file-excel
icon-file-zip
icon-file-powerpoint
icon-file-xml
icon-file-css
icon-html5
icon-html52
icon-css3
icon-chrome
icon-firefox
icon-IE
icon-opera
icon-safari
icon-IcoMoon
Font icons with :hover effect 
<p>
	<span class="icon-check circle"></span>
	  Some text here
	</p>

Usage:

We will be using icon fonts for sharing tools and other icons that regard an interaction.

icon-home
icon-home2
icon-home3
icon-office
icon-newspaper
icon-pencil
icon-pencil2
icon-quill
icon-pen
icon-blog
icon-droplet
icon-paint-format
icon-image
icon-image2
icon-images
icon-camera
icon-music
icon-headphones

Grid

Size 1 of 1 
<article>1/1</article>

Usage:

The grid is completely semantic. You do not need to add any additional classes. The classes included in all examples are exactly that...examples.

1/1

Size 1 of 2
1/2
1/2
Size 1 of 3
1/3
1/3
1/3
Size 1 of 4
1/4
1/4
1/4
1/4
Size 1 of 7
1/7
1/7
1/7
1/7
1/7
1/7
1/7
Mixed Grids
1/3
2/3
1/4
3/4

Avatars

  • 180x180
  • 120x120
  • 80x80
  • 40x40

Lists

Thumbnails & Excerpts 
<ul class="thumbnail-list">
   <li>
    <div class="cutoff-image">
      <img src="">
    </div>
    <h3>Sigma s6 Radar Processor</h3>
      <p>Multi-layered processing removes the clutter that limits the clarity of conventional radar images by enhancing the outline of what needs to be seen.</p>
  </li>
</ul>

Usage:

This list style can be used on blog excerpts, lists of product features or service listings.

  • Ice Navigator™ clearly differentiates between open water, ice pans, leads in the ice field and the thicker ice ridges.

  • For operations such as offshore drilling or seismic data acquisition, knowing where the ice front is, and the nature of it, is critical.

  • With sigma S6 technology it is possible to see the shadows of higher relief icebergs frozen in the pack ice.

Disc

  • List Item
  • List Item
  • List Item

Ordered List

  1. List Item
  2. List Item
  3. List Item
Events Lists 
<ul class="event-listing">
   <li>
    <div class="cutoff-image">
      <time><span>Month</span><h2>Date</h2>
 </time>
    </div>
    <div class="event-info">
      <span>Time</span>
      <h3>Name of Event<</h3>
      <div class="location"><span class="icon-location"> Location</div>
      <a href="#">Full Details</a>
  </li>
</ul>

Usage:

This list style should only be used on the event listings.

  • 7:30 - 12:30 pm

    Ocean Technology Convention

    Epic Centre, Houston, TX
    Full Details
  • 7:30 - 12:30 pm

    Ocean Technology Convention

    Epic Centre, Houston, TX
    Full Details
  • 7:30 - 12:30 pm

    Ocean Technology Convention

    Epic Centre, Houston, TX
    Full Details
  • 7:30 - 12:30 pm

    Ocean Technology Convention

    Epic Centre, Houston, TX
    Full Details
Services Lists 
<ul class="thumbnail-listing">
   <li>
    <div class="cutoff-image">
      <img src="images/placeholder-service.jpg" alt="Placeholder Service">
    </div>
    <h4>Defence/Naval</h4>
  </li>
</ul>

Usage:

This list is used on the homepage only as a quick navigation to the markets that Rutter is a part of.

  • Oil & Gas

  • Shipping

  • Offshore Seismic

  • Cruise Ships

  • Coastal Monitoring

  • Renewable Energy

  • Maritime Security

  • Port Security

Services Lists 
<section class="solutions-full-list">
   				<div class="solutions-full-list">
					<div class="solutions-list">
						<a href="" class="active"><h5>Ice Management</h5></a>
						<a href=""><h5>Oil Spill Detection</h5></a>
						<a href=""><h5>Small Target Surveillance</h5></a>
						<a href=""><h5>WaMoS & Current Monitoring</h5></a>
						<a href=""><h5>SeaFusion</h5></a>
						<a href=""><h5>Command & Control</h5></a>
						<a href=""><h5>Radar 100S6</h5></a>
					</div>	
				</div>

Usage:

This list should be used before the footer on each of the radar solution pages. They are a quick navigation to other products.

Ice Management
Oil Spill Detection
Small Target Surveillance
WaMoS & Current Monitoring
SeaFusion
Command & Control
Radar 100S6

Links

External Link

This is an external link.

Inline Link

This is an inline link.

Buttons

Basic
Link Button
Button Disabled
Link Button
Button Alternative

Headers

Main Header 
<section class="header-image">
  <div class="text-overlay">
    <h1>From Sea To Sky, The World Runs On Rutter</h1>
  </div>
</section>

Usage:

This header can be used in conjunction with slideshows or as a standalone.

From Sea To Sky, The World Runs On Rutter

Navigation

Fixed Navigation 
<div class="fixed-menu">
				<ul>
					<li><a href="#description">Overview</a></li>
					<li><a href="#video-demo">Video Demos</a></li>
					<li><a href="#installations">Installations</a></li>
					<li><a href="#client-list">Client Lists</a></li>
					<li><a href="#case-studies">Case Studies</a></li>
				</ul>
				<div class="button-items">
					<button href="">Download Brochure</button>
					<button href="">Spec Sheet</button>
					<button href="">Get A Quote</button>
				</div>	
			</div>

Usage:

Fixed menu that scrolls to top of page and says. Uses anchor tags to scroll down to related sections.

Tables

Bordered table
Ice Navigator™
Ice Detection and Navigation System
Features:
Ice Detection •
Screen Capture and Video Recording •
Tracking Software (Small Targets) 300
Scan Averaging 32
Motion Compensation •
Multiple Remote Clients •
Cursor Serial Port Output (Used for IR camera input) •
TTM NMEA Serial Port Outputs (For IR camera and ECDIS Inputs) •
Options:
Chart Underlay •
Raw Data Recording •
SeaBridge - Multiple Client - Low Bandwidth
Communication Link		 •
SeaFusion - Multiple Radar - Single Display •
Note: All models accept standard serial/network inputs from navigational instruments (NMEA 0183) including: AIS, wind anemometer, echo sounder, speed log, GPS, and gyrocompass.