/* Ministry of Transport
Main Style Sheet for Internet Site
Version: 10
Date: 27 March 2007
Further comments are included at the end of this file */

/*##################################################################*/
/* STYLES FOR ALL ELEMENTS AND LAYOUT*/
/* AUTHOR: Dominic Santucci */
/* COMPANY: HOTHOUSE INTERACTIVE */
/*##################################################################*/

/* CORRECTIONS AND ADDITIONS BY BRUCE HARRIS - WEBMASTER, MINISTRY OF TRANSPORT */

/*##################################################################*/

/*GENERIC */
 

b, strong {
	font-weight: bold;
}

big {
	font-size: 1.2em;
}

center {
	text-align: center;
}

 
i, em {
	font-style: italic;
}

small, .small {
	font-size: 0.8em;
}

sub {
	font-size: smaller;
	vertical-align: sub;
}

sup {
	font-size: smaller;
	vertical-align: super;
}

ul {
	list-style-image: url(/img/arrow-ul.gif);
}

ul ul {
	list-style-image: url(/img/arrow-ulul.gif);
}

ul ul ul {
	list-style-image: url(/img/arrow-ulul.gif);
}

/*#############################################################*/

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}

.clearboth {
	clear: both;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

/*#############################################################*/

/* WRAPS */

#wrap {
	height: 100%;
	background: #fff url(/img/bg-right.jpg) repeat-y top right; 
	margin-left: auto;
	margin-right: auto;
	padding-right: 28px;
}

#wrap2 {
	background: #fff url(/img/bg-left.jpg) repeat-y top left;
	padding-left: 28px;
}

/*#############################################################*/

/* HEAD */

#head {
	/*background: #fafafa url(/img/bg-head.jpg) repeat-x top;*/
	 background: #fafafa url(/img/blue-gradient.gif) repeat-x top; 
	position: relative;
}

#skiplinks {
	position: absolute;
	top: 10px;
	right: 30px;
	color: #597ea8;
	font-size: 0.9em;
	z-index: 100;
}

#skiplinks a:focus, #skiplinks a:hover, #skiplinks a:active {
	color: #597ea8;
}

#logo {
	position: absolute;
	top: 25px;
	height: 87px;
	border: 0;
	width: 100px;
	margin-left: 0px;
	padding-left: 0px;
}

#logo-print {
	display: none;
}

#headtxt {
	width: 350px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	margin-left: 101px;
	padding-top: 0px;
	font-size:24pt;
	padding-bottom: 10px;
}

#headtxt #nswgovt {
	color: #FFFF00;
	font-size: 18pt;
	line-height: 1.8em;
	margin-bottom: 3px;
	padding-bottom: 3px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	font-weight: bold;
}

#headtxt #mot {
	display: block;
	color: #FFFF00;
	font-size: 12pt;
	line-height: 1.2em;
	padding-top: 1px;
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	font-weight: bold;
}

#infoline {
	position: absolute;
	top: 10px;
	height: 59px;
	width: 113px;
	right: 35%;
	border: 0;
}

#head #nswgovtlink {
	position: relative;
	top: 3em;
	width: 11em;
	float: right;
	color: #597ea8;
	font-weight: bold;
	text-align: right;
}

#head #nswgovtlink a {
	color: #597ea8;
	text-decoration: none;
}

#head #nswgovtlink a:visited {
	color: #597ea8;
	text-decoration: none;
}

#head #nswgovtlink a:focus, #head #nswgovtlink a:hover, #head #nswgovtlink a:active {
	color: #597ea8;
	text-decoration: underline;
}

/*#############################################################*/

/* TOP NAVIGATION BAR */

#nav1wrap {
	/* background: #85888f url(/img/bg-nav1.gif) repeat-x top; */
	background-color:#4E7DD1 ;
	margin-top: 12px;
}

#nav1apps {
	float: left;
	position: relative;
	color: #FFFFFF;
	font-size: 0.9em;
	text-decoration: none;
	padding: 11px 10px 0px 5px;
}

#nav1apps a {
	/* background: #85888f; */
	 
	color: #fff;
	text-decoration: none;
}

#nav1apps a:visited {
	color: #fff;
}

#nav1apps a:focus, #nav1apps a:hover, #nav1apps a:active {
	color: #fff;
	text-decoration: underline;
}

#nav1 {
	margin-top:1px;
	margin-bottom:0px;
	text-align:center;
	padding: 5px 0;
	margin-left: 0px;
	
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	font-size: 10px;
	font-weight: bold;
}

#nav1 ul {
	display: inline;
	list-style: none;
	margin: 0;
}

#nav1 li {
	display: inline;
	color: #fff;
}

#nav1 li a {
	/* background: #85888f; */
color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('/img/tab_bg.gif') bottom left repeat-x;
  text-decoration: none;
}

 
#nav1 li a:visited { color: #F1F6FE; }

#nav1 li a:link {
color: #F1F6FE; 
}
#nav1 li a:focus, #nav1 li a:hover, #nav1 li a:active {
	 color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}
#nav1 li a#current
{
	color: #000;
	background: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	
}
 

#nav1 #searchform {
	display: inline;
    
}

#nav1 #searchform #searchinput {
	width: 80px;
	background: #fff;
	font-size: 10pt;
	border: 1px solid #666;
}

#nav1 #searchform input.go {
	background: #597ea8;
	color: #fff;
	font-weight: bold;
	font-size: 10pt;
	margin: 0;
	border: 1px solid #ccc;
	padding: 0;
	cursor: pointer;
}

#nav1 #searchform input.go:focus, #nav1 #searchform input.go:hover, #nav1 #searchform input.go:active {
	background: #fff;
	color: #597ea8;
}

#nav3 {
	position: relative;
	background: #ededed url(/img/bg-levelone.jpg) repeat-x;
	text-decoration: none;
	margin: 2px 0 0 175px;
	border-top: 5px solid #ccc;
	padding: 7px 0;

}

#nav3 ul {
	display: inline;
	margin: 0;
	padding: 0;
}

#nav3 li {
	display: inline;
	list-style: none;
	list-style-image: none;
	color: #fff;
}

#nav3 li a {
	background: #ededed url(/img/bg-levelone.jpg) repeat-x;
	color: #34359f;
	text-decoration: none;
	margin: 0;
	border: 1px solid #ccc;
	padding: 6px 10px;
}

#nav3 li a:visited {
	color: #34359f;
}

#nav3 li a:focus, #nav3 li a:hover, #nav3 li a:active {
	color: #34359f;
	background: #ededed url(/img/bg-levelone.jpg) repeat-x;
}

#nav3 li span {
	background: #ededed url(/img/bg-levelone.jpg) repeat-x;
	color: #34359f;
	padding: 6px 10px;
}

/*#############################################################*/

/* BREADCRUMBS */



#dateandnavigationbar{
	padding-left:5px;
	margin:0px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #0c876f;
	background-image: url(/img/top_bg_title.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
}
 
#dateandnavigationbar span#datetime {
	position: relative;
	font-size: 10px;
	margin: 2px;
	padding: 0px 0 4px 4px;
	width:300px;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	color: #FFFFFF;
}

#dateandnavigationbar span#navigation_path {
	position: relative;
	font-size: 10px;
	font-weight:bold;
	margin: 0;
	padding: 4px 0 4px 50px;
	font-family: Arial, Helvetica, sans-serif, Tahoma;
	color:#FFFFF0;
	
	margin-left:30px;
	 
}

#dateandnavigationbar span#currentnode{
	position: relative;
	font-weight:bold;
	color:#FFFFF0;
	line-height: 20px;
	font-style: italic;
}

#dateandnavigationbar a {
 	font-family: Arial, Helvetica, sans-serif, Tahoma;
	color:#FFFFFF;
	text-decoration:underline;
}
#dateandnavigationbar a:hover {
 	font-family: Arial, Helvetica, sans-serif, Tahoma;
	color:#FFFFFF;
	text-decoration:none;
}
#breadcrumbs {
	position: relative;
	background-color: #FFFFFF;
	font-size: 12px;
	margin: 0;
	padding: 4px 0 4px 4px;
	font-family: Arial, Helvetica, sans-serif, Tahoma;
}

#breadcrumbs a {
	color: #339;
	text-decoration: underline;
}

#breadcrumbs a:visited {
	color: #909;
}

#breadcrumbs a:focus, #breadcrumbs a:hover, #breadcrumbs a:active {
	text-decoration: none;
}

#breadcrumbs ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#breadcrumbs li {
	display: inline;
	list-style: none;
}

#breadcrumbs li a {
	display: inline;
	list-style: none;
	padding-left: 5px;
}

/*#############################################################*/

/* MAIN NAVIGATION */

#navbar {
	width: 170px;
	float: left;
	background: #F1F6FE url('../img/side_bg.gif') bottom left repeat-x;
	font-size: 1.1em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	border: solid 1px #216052;		 
	margin:2px;
}

#nav2 {
	margin-top:0px;
	margin-bottom:2px;
	border-bottom: solid 1px #216052;	 
	
}

#nav2 ul {
	margin: 0;
	padding: 0;
}

.levelone li {
	list-style: none;
	list-style-image: none;
}

.levelone li span {
	display: block;
	width: 160px;
	 background: #ededed url(/img/bg-levelone.jpg) repeat-x; 
	color: #333;
	font-weight: bold;
	padding: 7px 3px 7px 7px;
}

.levelone li span em {
	display: block;
	 background: url(/img/arrow-nav-black-down.gif) no-repeat right; 
	font-style: normal;
	margin-right: 0px;
}

.levelone li a {
	display: block;
	width: 160px;
	background-color: #2153AA;
	/*background:#2153AA url(/img/arrow-nav-white-side.gif) no-repeat right;*/	
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	margin-right: 10px;
	border-bottom: 1px solid #6162bd;
	padding: 7px 3px 7px 7px;
}

.levelone li a em {
	font-style: normal
}

.levelone li a.noarrow {
	background-image: none;
}

.levelone li a:visited {
	color: #fff;
}

.levelone li a:focus, .levelone li a:hover, .levelone li a:active {
	background: #ededed url(/img/bg-levelone.jpg) repeat-x;
	color: #333;
	font-weight: bold;
	border-bottom: 1px solid #999;
}

.levelone a:focus em, .levelone a:hover em, .levelone a:active em {
	display: block;
	background: url(/img/arrow-nav-black-down.gif) no-repeat right;
	margin-right: 0px;
}

.levelone li a.leveloneselect {
	background: #ededed url(/img/bg-levelone.jpg) repeat-x;
	color: #333 !important;
	font-weight: bold;
	border-bottom: 0;
	padding: 7px 2px 7px 7px;	 

}

.levelone li a.leveloneselect em {
	display: block;
	background: url(/img/arrow-nav-black-down.gif) no-repeat right;	
	padding-right:22px;
	margin-right: 0px;
}

.levelone li a.leveloneselect:focus, .levelone li a.leveloneselect:hover, .levelone li a.leveloneselect:active {
	text-decoration: underline;
	border-bottom: 0;
}

/*#############################################################*/

/* SECOND LEVEL NAVIGATION */

.leveltwo li {
	border-top: 1px solid #d0d0d1;
}

.leveltwo li span {
	display: block;
	width: 148px;
	background-color: #eaeaf4;
	background-image: none;
	color: #333;
	font-weight: normal;
	margin: 0;
	border-bottom: 0;
	padding: 4px 4px 4px 18px;
}

.leveltwo li span em {
	display: block;
	background: #eaeaf4 url(/img/arrow-nav-blue-down.gif) no-repeat right;
	font-style: normal;
	margin-right: -4px;
}

.leveltwo li a {
	display: block;
	width: 148px;
	background-color: #f3f3f3;
	background-image: none;
	color: #333;
	text-decoration: none;
	margin: 0;
	border-bottom: 0;
	padding: 4px 4px 4px 18px;
}

.leveltwo li a em {
	display: block;
	background: #f3f3f3 url(/img/arrow-nav-blue-side.gif) no-repeat right;
	font-style: normal;
	margin-right: -3px;
}

.leveltwo li a:visited {
	color: #333;
}

.leveltwo li a:focus, .leveltwo li a:hover, .leveltwo li a:active {
	background-color: #eaeaf4;
	background-image: none;
	font-weight: normal;
	text-decoration: underline;
	border-bottom: 0;
}

.leveltwo li a:focus em, .leveltwo li a:hover em, .leveltwo li a:active em {
	display: block;
	background: #eaeaf4 url(/img/arrow-nav-blue-down.gif) no-repeat right;
	font-style: normal;
	margin-right: -4px;
}

.leveltwo li a.leveltwoselect {
	background-color: #eaeaf4;
	background-image: none;
	color: #333;
	border-bottom: 0;
	padding: 4px 4px 4px 18px;
}

.leveltwo li a.leveltwoselect em {
	display: block;
	background: #eaeaf4 url(/img/arrow-nav-blue-down.gif) no-repeat right;
	font-style: normal;
	margin-right: -4px;
}

/*#############################################################*/

/* THIRD LEVEL NAVIGATION */

.levelthree {
	margin: 0;
	border-top: 0;
	padding: 0;
}

.levelthree li span {
	width: 138px;
	background: #eaeaf2 url(/img/bg-level3.jpg) repeat-x;
	color: #333;
	border-right: 1px solid #d0d0d1;
	border-bottom: 0;
	border-left: 1px solid #d0d0d1;
	padding-left: 26px;
}

.levelthree li a {
	display: block;
	list-style: none;
	list-style-image: none;
	width: 138px;
	background-color: #f3f3f3;
	background-image: none;
	color: #333;
	text-decoration: none;
	margin: 0;
	border-right: 1px solid #d0d0d1;
	border-bottom: 0;
	border-left: 1px solid #d0d0d1;
	padding-left: 26px;
}

.levelthree li a:visited {
	color: #333;
}

.levelthree li a:focus, .levelthree li a:hover, .levelthree li a:active {
	width: 138px;
	background: #eaeaf2 url(/img/bg-level3.jpg) repeat-x;
}

.levelthree li a.levelthreeselect {
	background: #eaeaf2 url(/img/bg-level3.jpg) repeat-x;
	border-right: 1px solid #d0d0d1;
	border-bottom: 0;
	border-left: 1px solid #d0d0d1;
	padding-left: 26px;
}

/*##########################################################*/

 

.tablecontent {
	font-size: 1em;
	border: 1px solid #d0d0d1;
	border-spacing: 0;
	border-collapse: collapse;
}

.tablecontent th, .tablecontent td {
	background: #fff;
	padding: 3px;
	border: 1px solid #d0d0d1;
}

.tablecontent p {
	margin: 0 0 0.8em 0;
	padding: 0;
}

/*##########################################################*/

/* FOOT */

#functionsfoot {
	position: absolute;
	right: 42px;
	width: 100px;
	background: transparent;
	text-align: right;
	margin-top: -22px;
}

ul#functionsfoot li {
	display: inline;
	list-style: none;
	list-style-image: none;
}

#functionsfoot img.function {
	width: 23px;
	height: 22px;
	cursor: pointer;
	border: 0;
}

#foot {
	height: 60px;
	background: url(/img/bg-foot.jpg) repeat-x top;
	color: #000;
	font-size: 0.9em;
}

#foot p {
	margin: 0;
	padding: 0;
}

#foot ul {
	display: inline;
	list-style: none;
	padding: 0;
	margin-left: 10px;
}

#foot li {
	display: inline;
	color: #000;
}

#foot li a {
	display: inline;
	color: #339;
}

#foot li a:focus, #foot li a:hover, #foot li a:active {
	text-decoration: none;
}

#footlinks {
	padding-top: 18px;
}

#footcopy {
	float: right;
	text-align: center;
	padding: 12px 10px 0 10px;
}

/*##################################################################*/

/* BREAKOUTS */

.breakout {
	position: relative;
	top: 10px;
	width: 192px;
	float: right;
	background-color: #f7f7f7;
	margin: 0 0 15px 15px;
	padding: 5px;
	border: 1px solid #d0d0d1;
	clear: right;
}

.breakout ul {
	color: #424244;
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}

.breakout li {
	list-style: none;
	list-style-image: none;
}

.breakout li a {
	display: block;
	width: 165px;
	background: url(/img/breakout-lia.gif) no-repeat top;
	color: #323498;
	font-size: 0.9em;
	line-height: 1.2em;
	text-decoration: none;
	margin: 0;
	border-bottom: 1px solid #dee9f2;
	padding: 4px 0 4px 27px;
}

.breakout li a:focus, .breakout li a:hover, .breakout li a:active {
	background-image: url(/img/breakout-liahover.gif);
}

.breakout li a:visited {
	color: #323498;
}

.breakout li span {
	display: block;
	width: 165px;
	background: url(/img/breakout-liahover.gif) no-repeat top;
	color: #333;
	font-weight: bold;
	font-size: 0.9em;
	line-height: 1.2em;
	text-decoration: none;
	padding: 4px 0 4px 27px;
	margin: 0;
	border-bottom: 1px solid #dee9f2;
}

.breakout h2 {
	background: url(/img/breakout-h2.jpg) repeat-x top;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	margin: 0;
	padding: 5px 10px;
}

.breakout h3 {
	background: #b8cde2 url(/img/breakout-h3.jpg) repeat-x top;
	color: #339;
	font-weight: normal;
	font-size: 0.9em;
	margin: 0;
	padding: 5px 10px;
}

#breakoutconcess {
	position: relative;
	top: 5px;
}

.breakout2 {
	width: 90%;
	background: #f3f3f3;
	color: #333;
	vertical-align: top;
	margin: 2em 0;
	border: 1px solid #339;
	padding: 10px;
}

.breakout2 h2, .breakout2 h3 {
	margin-top: 0;
}

.breakout3 {
	float: right;
	width: 120px;
	background: #f3f3f3;
	color: #333;
	vertical-align: top;
	margin: 10px 0 10px 10px;
	border: 1px solid #339;
}

.breakout3 p {
	margin: 5px 0;
	padding: 0 5px;
}
/*Right Adv Box*/

.rightadvbox {
	position: relative;
	width: 170px;
	float: right;
	background-color: #f7f7f7;
	padding: 5px;
	border: 1px solid #d0d0d1;
	clear: right;
}

.rightadvbox ul {
	color: #424244;
	 margin: 0;
	padding: 0;
}

.rightadvbox li {
	list-style: none;
	list-style-image: none;
}

.rightadvbox li a {
	display: block;
	width: 165px;
	background: url(/img/breakout-lia.gif) no-repeat top;
	color: #323498;
	font-size: 0.9em;
	line-height: 1.2em;
	text-decoration: none;
	margin: 0;
	border-bottom: 1px solid #dee9f2;
	padding: 4px 0 4px 27px;
}

.rightadvbox li a:focus, .rightadvbox li a:hover, .rightadvbox li a:active {
	background-image: url(/img/breakout-liahover.gif);
}

.rightadvbox li a:visited {
	color: #323498;
}

.rightadvbox li span {
	display: block;
	width: 165px;
	background: url(/img/breakout-liahover.gif) no-repeat top;
	color: #333;
	font-weight: bold;
	font-size: 0.9em;
	line-height: 1.2em;
	text-decoration: none;
	padding: 4px 0 4px 27px;
	margin: 0;
	border-bottom: 1px solid #dee9f2;
}
.rightadvbox h2 {
	background: url(/img/breakout-h2.jpg) repeat-x top;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	margin: 0;
	padding: 5px 10px;
}
/*##################################################################*/

/* FEATURE BOXES */

#featurebox {
	height: 100%;
	border: 1px solid #fff;
	overflow: hidden;
}

#rightbox, #leftbox {
	 
	margin-top: 2px;
	float: left;
	width: 170px;
	background: #F1F6FE url('/img/side_bg.gif') bottom left repeat-x;
	 
}

#rightbox {
	float: right;
}

#leftbox { 
	float: left;
}

#rightbox ul, #leftbox ul {
	list-style: none;
	list-style-image: none;
	color: #424244;
	background-color: #fff;
	margin: 0;
	padding: 0;
}

#rightbox li, #leftbox li {
	list-style: none;
	list-style-image: none;
	background: url(/img/bg-feature.jpg) repeat-x;
}

#rightbox li a, #leftbox li a {
	display: block;
	width: 92%;
	background: url(/img/arrow.gif) left no-repeat;
	color: #339;
	font-weight: normal;
	font-size: 0.9em;
	line-height: 1.2em;
	text-decoration: none;
	margin: 0;
	padding: 5px 0 5px 27px;
}

#rightbox li a:focus, #rightbox li a:hover, #rightbox li a:active, #leftbox li a:focus, #leftbox li a:hover, #leftbox li a:active {
	text-decoration: underline;
}

#rightbox .infobox-last a, #leftbox .infobox-last a {
	background: url(/img/arrow-more.gif) no-repeat left;
	border-top: 1px solid #d9dde9;
}

#rightbox h2, #leftbox h2 {
	background-color: #fff;
	color: #b40000;
	font-weight: bold;
	font-size: 1em;
	margin: 0;
	padding: 5px 10px;
	border-bottom: 5px solid #f5f5f5;
}

/*#############################################################*/

/* INTRO BOXES */

#introwrap {
	margin: 10px 0 0 0;
	padding: 0;
}

#intro {
	min-height: 164px;
	background: #dbe7f5 url(/img/bg-intro.jpg) repeat-x;
	margin: 0 205px 10px 1px;
	padding: 0 10px 0 10px;
	border: 1px solid #d0d0d1;
}

/* Hack for IE6 */
* html #intro {
	height: 164px;
}

#intro p {
	margin-top: 10px;
}

#intro h2 {
	color: #000;
	font-weight: bold;
	font-size: 1em;
	margin-top: 10px;
}

#introimage {
	float: right;
	border-left: 3px solid #fff;
	margin-right: 2px;
}

a#intromore {
	background: url(/img/arrow-intro-more.gif) no-repeat;
	color: #323498;
	text-decoration: none;
	padding-top: 1px;
	padding-left: 15px;
}

a#intromore:focus, a#intromore:hover, a#intromore:active {
text-decoration: underline;
}

/*#############################################################*/

/* HOME PAGE */

#homepic {
	height: 80px;
	background: #34359f url(/img/homemain.jpg) repeat-x left;
	text-transform: none;
	margin-left: 0;
	padding-left: 0;
	border-bottom: 1px solid #fff;
}

/* Hack for IE6 */
* html #homepic {
	margin-left: -3px;
}

/*#############################################################*/

/* MISCELLANEOUS */

.button {
	background: #323498;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.08em;
	margin: 5px;
	border: 1px solid #999;
	padding: 0;
	cursor: pointer;
}

.button:focus, .button:hover, .button:active {
	background: #fff;
	color: #323498;
}

.displaynone {
	display: none;
}

.imageholder {
	float: right;
	width: 200px;
	font-weight: bold;
	font-size: 0.8em;
	margin: 0 0 5px 10px;
}

#mediabanner {
	/*float: right;*/
	background: transparent;
	color: #323498;
	font-weight: bold;
	/*white-space: nowrap;
	margin-top: 0.5em;*/
	margin-bottom: 10px;
}

.redtext {
	color: #b40000;
	font-weight: bold;
}

/*#############################################################*/

/* COLOURS 

White - #fff: RGB 255,255,255
Black - #000: RGB 0,0,0
Purple - #909: RGB 153,0,153
Red - #b40000: RGB 180,0,0

GREYS 
#333: RGB 51,51,51
#999: RGB 204,204,204
#d0d0d1: RGB 208,208,209
#424244: RGB 66,66,68
#85888f: RGB 133,136,143
#cfcfcf: RGB 207,207,207

OFF WHITES
#f3f3f3: RGB 243,243,243
#eaeaf4: RGB 234,234,244
#eaeaf2: RGB 234,234,242
#ededed: RGB 237,237,237
#f5f5f5: RGB 245,245,245
#f8f8f8: RGB 248,248,248
#fafafa: RGB 250,250,250
#f7f7f7: RGB 247,247,247
#eaebec: RGB 234,235,236

BLUES
#339: RGB 51,51,153
#323498: RGB 50,52,152
#34359f: RGB 52,53,159
#dee9f2: RGB 222,233,242
#dbe7f5: RGB 219,231,245
#d9dde9: RGB 217,221,233
#b8cde2: RGB 184,205,226
#6162bd: RGB 97,98,189
*/