Planetary Rings Node - Style Guide

Branding - Header graphic e.g. for placement

Planetary Rings Node brand is white html text over the rotating background banner images. Font: 42px Open Sans / weight 300
Folder in assets with more header backgrounds at ../assets/header banners/ folder.

Common Colors

Indigo Blue
Almost Black
Light Gray
Medium Gray
Light Yellow

common color values

body copy: #222222
link: #435ca4
visited: #4e4a92
active: #31488d
hover: #5a72b7
text highlight - yellow: #fffa93
table header background - yellow: #fdfabe
table row - white: #ffffff
table row alt - gray: #efefef
table border: #cccccc
button: #435ca4
button hover: #5a72b7

Typography

H1 Heading, Open Sans 300, 36px

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptate distinctio reprehenderit, autem deleniti ad voluptatum eaque. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

H2 Heading, Open Sans 400, 30px

H3 Heading, Open Sans 400, 24px

H4 Heading, Open Sans 600, 18px

List test
List test
List test

Buttons


.btn {
  border: none;
  box-shadow: none;
  border-radius: .25em;
  font-size: 1.4rem;
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  padding: .6em 2.2em;
  cursor: pointer;
  background: #435ca4;
}
.btn:focus {
  outline: none;
}
.no-touch .btn:hover {
  background: #5a72b7;
}
.btn.btn-success {
  background: #6fce72;
}
.no-touch .btn.btn-success:hover {
  background: #82d485;
}
.btn.btn-alert {
  background: #e54139;
}
.no-touch .btn.btn-alert:hover {
  background: #f75951;
}
.btn.btn-outline {
  color: #435ca4;
  background: transparent;
  box-shadow: inset 0 0 0 1px #435ca4;
}
.no-touch .btn.btn-outline:hover {
  color: #ffffff;
  background: #435ca4;
}

Tabs

ROSES
Data Status
CDAPS
PDART

The "active" tab is white background with yellow bar image (active-tab-bg.png).


ul.tab-pill-group {
	display: inline-block;
}

li.tab-pill {
background: #efefef;
  border: 1px solid #cccccc;
  box-shadow: none;
  border-radius: .25em;
  float: left;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  font-weight:600;
  color: #222222;
  margin: 0 6px 6px 0;
  padding: 16px;
  cursor: pointer;
text-align:center;
}

li.tab-pill.active {
	background: url(../assets/active-tab-bg.png) repeat-x;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: none;
	border-radius: .25em;
	float: left;
	font-size: 14px;
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	color: #222222;
	margin: 0 6px 6px 0;
	padding: 16px;
	cursor: pointer;
	text-align:center;
}

Data Tables

Data Set or Volume ID	Date Available	Certification Status	Date Certified
ASTROM_0001	2004-08-01	certified	2004-08-01
ASTROM_0101	2008-06-01	certified	2008-06-01
COCIRS_0010 through COCIRS_0306 (version 2.0)	2012-01-01	certified	2012-01-01
COCIRS_0401 through COCIRS_1103 (version 3.1)*	2012-01-01	certified	2012-01-01*
COCIRS_1104 through COCIRS_1106 (version 3.1)*	2012-04-01	certified	2012-04-01*
COCIRS_1107 through COCIRS_1109 (version 3.1)*	2012-07-01	certified	2012-07-01*

Alerts

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Navigation sample - vertical, approx 170px wide, (spans 2 Bootstrap columns of 12)

Cassini News

Ringed Planets


.nav-container {
	width: 170px;
	padding: 0px;
	margin: 0px;
	background-color: #efefef;
}

h3.nav-heading {
	font: 14px 'Open Sans', sans-serif;
	line-height: 1.2em;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 12px 15px;
	background-color: #e9e9e9;
}

h3.nav-heading a { 
	color: #435ca4;
}

h3.nav-heading a:visited { 
	color: #4e4a92;
}

h3.nav-heading a:hover { 
	color: #5a72b7;
}

h3.nav-heading a:active { 
	color: #31488d;
}

ul.nav {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;	
}

ul.nav a {
	color: #435ca4;
}
ul.nav a:visited {
	color: #4e4a92;
}
ul.nav a:hover {
	color: #5a72b7;
}
ul.nav a:active {
	color: #31488d;
}


li.nav {
	font: 14px 'Open Sans', sans-serif;
	line-height: 1.2em;
	margin-bottom: 2px;
	padding: 0;
}


ul.nav li:last-child {
	padding-bottom: 6px;	
}

ul.nav:last-child {
	padding-bottom: 12px;	
}

li.active {
background-color: #ffffff;	
border-left: 4px solid #fffa93;	
}

Home page styles

Services


.homebox {
	border: 1px solid #cccccc;
	background-color: #ffffff;
}

.homebox .panel-heading {
  background: url(../assets/PRN_home_heading_bg.png) no-repeat;
  background-color: #585858;
  color: #ffffff;
  font-weight:200;
  text-align: center;
  padding:0;
  padding-bottom:5px;

}
.homebox h2 {
  font-family: 'Open Sans', sans-serif;
  margin:0; padding:0;
  font-weight: 400;
  color:white;
  padding-top:5px;
}

ul.homebox  {
  border:0;
	display: block;
	list-style-type: disc;
	margin: 15px;
	padding: 22px;	
}

.homebox li {
	font: 15px 'Open Sans', sans-serif;
	line-height: 1.4em;
	margin-bottom: 13px;
	padding: ;	
}
ul.homebox a {
	color: #435ca4;
}
ul.homebox a:visited {
	color: #4e4a92;
}
ul.homebox a:hover {
	color: #5a72b7;
}
ul.homebox a:active {
	color: #31488d;
}