/* =============================================================== */
/* Styling for general objects                                     */
/* =============================================================== */

@media print {
  a[href]:after {
    content: none !important;
	text-decoration: none;
  }
  
  .navigation-bar {
	  display: none !important;
  }
}

body
{ 
	background-color: #FFF;
	background-image: url('../images/background.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-size: 1.4rem;
	line-height: 2.4rem;
}

.main-content {
	margin-top: 5px;
	margin-bottom: 35px;
}

.metro #main-container.container #main-page-content.container.content-area {
	width: 100% !important;
	padding: 0rem 5rem 0rem 5rem;
}

.metro .tile-group:first-child {
	margin-left: 0px;	/* margin removed to simplify responsive
	                       movements of tiles for smaller screens */
}

.metro h1 {
	margin-left: 40px;
}

.metro h2 {
	font-size: 2.0rem;
	line-height: 2.2rem;
}

.metro h3 {
	font-size: 1.8rem;
	line-height: 2.2rem;
}

.metro h4 {
	font-size: 1.6rem;
	line-height: 1.8rem;
}

.metro h5 {
	font-size: 1.4rem;
	line-height: 1.6rem;
}

.metro h6 {
	font-size: 1.2rem;
	line-height: 1.4rem;
}

.metro ul, .metro ol {
	font-size: 1.4rem;
}

.metro ul li, .metro ol li {
	line-height: 1.6rem;
	margin-bottom: 1.3rem;
}

.metro .listview-outlook .list .list-content {
	font-size: 1.4rem;
}

.metro .accordion > .accordion-frame > .heading {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.metro .accordion > .accordion-frame > .content {
	font-size: 1.4rem;
	line-height: 1.7rem;
}

.metro .disclaimer {
	font-size: 1.2rem;
}

header {						/* for this styling to work, 
								   the header must reside within 
								   the #main-container element 	   */
	height: 45px;	
	position: fixed;
	top: 0px;
	width: 100%;
	margin-left: -10px;
	z-index: 5000;				/* make sure it is a large value 
								   to have the menu always on top 
								   of everything                   */
}

#main-container {
	margin-top: 0px;
}

h1.tile-area-title {
	margin-top: 2rem;
}

.email-data-text {
	line-height: 1.6rem;
}

footer {
	float: left;
	clear: left;
	position: fixed;
    bottom: 0;
	background-color: #FFF;
}

/* =============================================================== */
/* Styling for logo landing page                                   */
/* =============================================================== */

.logo-holder{
}

.animation-holder {
	position: absolute;
}

#logo-animation {
	position: relative;
}

/* =============================================================== */
/* Styling for full screen coverups                                */
/* =============================================================== */

div.full-height { 
    width: 100%;
	padding: 0px 0px;
	margin: 0px 0px;
	position: absolute;
	z-index: 100;
}

div.full-height img {
    position: absolute;
}

.intro-screen {
	float: left;
	cursor: pointer;
}

/* =============================================================== */
/* Styling for the main section                                    */
/* =============================================================== */

.metro .tile-area {
	position: relative;
	overflow: hidden;
}

.metro .tile-area.header-section {
	position: relative;
	overflow: hidden;
	height: 80px;
	z-index: 1000;
}

.metro .tile-area.header-section .tile-area-title {
	position: absolute;
	top: 0px;
}

.metro .tile-area.header-section .user-id {
	position: absolute;
	right: 40px;
	top: 40px;
	display: inline-block;
	padding: 8px;
	background-color: transparent;
	width: auto;
	color: #ffffff;
	cursor: default;
}

.metro a, 
.metro .link {
	color: #AAA379;
}

.metro a:hover {
	color: #B7B083;
}

.metro a:visited {
	color: #AAA379;
}

.metro a
{
	cursor: pointer;
}

.metro a:focus,
.metro .link:focus,
.metro a:active,
.metro .link:active {
  	color: #AAA379;
}

@media print {
  	.metro a, 
	.metro a:hover,
	.metro a:visited,
	.metro a:focus,
	.metro a:active,
	.metro .link,
	.metro .link:focus,
	.metro .link:active {
		color: #000000 !important;
		text-decoration: none !important;
	}
}

/* =============================================================== */
/* Styling for menu items                                          */ 
/* =============================================================== */

.metro ul.dropdown-menu.drop-to-left {
	left: -7.0rem !important;
}

.metro ul.element-menu li, .metro ol.element-menu li {
	margin-bottom: 0rem;
}

.metro .navigation-bar .element-menu > li, 
.metro .navbar .element-menu > li {
	padding-right: 8px;
}

.metro .navigation-bar.light {
	background-color: rgb(197, 189, 141);
	border-bottom: 1px rgb(183, 175, 127) solid;
	color: #555555;
}

.metro .navigation-bar div.element a,
.metro .navigation-bar div.element a:visited,
.metro .navigation-bar div.element a:hover {
	color: #646464;
}

.metro .dropdown-menu {
	z-index: 6001;		/* surplus the z-index of the main-page-header class */
	min-width: 250px;
}

.metro .dropdown-menu > li > a.dropdown-toggle:after {
	left: 93%;
}

.metro .navigation-bar .element-menu > li > a.dropdown-toggle:after,
.metro .navbar .element-menu > li > a.dropdown-toggle:after {
	margin-left: -3px;
}

.metro .dropdown-menu .menu-title {
	background-color: #ece3b6;
	font-size: 12px;
	line-height: 14px;
	padding: 4px 8px;
	border: 0;
	border-bottom: 1px #dad2a6 solid;
	border-top: 1px #dad2a6 solid;
	color: #646464;
}

.metro .dropdown-menu .menu-title:hover {
	background-color: #ece3b6;
	cursor: default;
	border: 0;
	border-bottom: 1px #dad2a6 solid;
	border-top: 1px #dad2a6 solid;
}

.metro .navigation-bar .element-menu > li.menu-place-right, 
.metro .navbar .element-menu > li.menu-place-right {
	float: right;
}

.rmargin90 {
	margin-right: 90px;
}

/* =============================================================== */
/* Styling for the user ID section                                 */
/* =============================================================== */

.metro .tile-area .user-id .user-id-name .first-name,
.metro .tile-area .user-id .user-id-name .last-name {
	display: block;
	color: #A4A979;
	font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
	line-height: 12pt;
}

.metro .tile-area .user-id:hover .user-id-name .first-name,
.metro .tile-area .user-id:hover .user-id-name .last-name {
	display: block;
	color: #ffffff;
	font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
	line-height: 12pt;
}

.metro .tile-area.header-section .user-id:hover {
	background-color: #AAA379;
}

.metro .tile-area .user-id .user-id-image {
	width: 40px;
	height: 40px;
	float: right;
	margin-left: 10px;
	color: inherit;
	background-color: #A4A979;
	text-align: center;
	vertical-align: middle;
}

.metro .tile-area.header-section .user-id a {
	color: #87794E;
}

.metro .tile-area.header-section .user-id .icon-user {
	color: #FFFFFF;
}

.metro .tile-area.header-section .user-id:hover a,
.metro .tile-area.header-section .user-id:hover .icon-user {
	color: #DDDDDD;
}

.metro .tile-area.header-section .user-id:hover a:hover,
.metro .tile-area.header-section .user-id:hover .icon-user:hover {
	color: #FFFFFF;
}

.metro .tile-area.header-section .user-id .dropdown-menu li a,
.metro .tile-area.header-section .user-id .dropdown-menu li a:hover {
	color: #000;
	font-weight: bold;
}

/* =============================================================== */
/* Styling for the grid layouts                                    */
/* =============================================================== */

.metro .grid .row {
	width: 100%;
}

.metro .grid .row [class*="span"] {
	margin-left: 1%;
}

.metro .span1, 
.metro .size1 {
	width: 7% !important;
}

.metro .offset1 {
	margin-left: 8% !important;
}

.metro .span2, 
.metro .size2 {
	width: 15% !important;
}

.metro .offset2 {
	margin-left: 16% !important;
}

.metro .span3, 
.metro .size3 {
	width: 23% !important;
}

.metro .offset3 {
	margin-left: 24% !important;
}

.metro .span4, 
.metro .size4 {
	width: 31% !important;
}

.metro .offset4 {
	margin-left: 32% !important;
}

.metro .span5, 
.metro .size5 {
	width: 39% !important;
}

.metro .offset5 {
	margin-left: 40% !important;
}

.metro .span6, 
.metro .size6 {
	width: 47% !important;
}

.metro .offset6 {
	margin-left: 48% !important;
}

.metro .span7, 
.metro .size7 {
	width: 55% !important;
}

.metro .offset7 {
	margin-left: 56% !important;
}

.metro .span8, 
.metro .size8 {
	width: 63% !important;
}

.metro .offset8 {
	margin-left: 64% !important;
}

.metro .span9, 
.metro .size9 {
	width: 71% !important;
}

.metro .offset9 {
	margin-left: 72% !important;
}

.metro .span10, 
.metro .size10 {
	width: 79% !important;
}

.metro .offset10 {
	margin-left: 80% !important;
}

.metro .span11, 
.metro .size11 {
	width: 87% !important;
}

.metro .offset11 {
	margin-left: 88% !important;
}

.metro .span12, 
.metro .size12 {
	width: 95% !important;
}

.metro .span12.wide, 
.metro .size12.wide {
	width: 98% !important;
}

.metro .offset12 {
	margin-left: 96% !important;
}

.metro .cell {
	position: relative;
	overflow: hidden;
	display: block;
	float: left;
	padding: 0;
	cursor: pointer;
	background-color: #eeeeee;
}

.metro .grid .row .cell.thin-border {
	border: #CCC solid 1px;
}

.metro .grid .row .cell.mid-border {
	border: #CCC solid 3px;
}

.metro .grid .row .cell.thick-border {
	border: #CCC solid 5px;
}

.metro .grid .row .cell .cell-content.image {
	width: 100%;
	min-height: 100%;
	max-height: 100%;
}

.metro .grid .row .cell .brand, 
.metro .grid .row .cell .cell-status {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 29px;
	margin-left: 5px;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}

.metro .grid .row .cell .brand .label {
	vertical-align: bottom;
	margin-bottom: 3px;
}

/* =============================================================== */
/* Styling for the Announcements section                           */
/* =============================================================== */

.metro .tile .tile-content.email .email-data .email-data-text {
	white-space: normal;
}

.metro .user-id-image .dropdown-toggle:after {
	visibility: hidden;
	content: '';
}

/* =============================================================== */
/* Styling for the tile group titles                               */
/* =============================================================== */

.metro .tile-group .tile-group-title,
.metro .tile-group {
	color: #333333;
}

/* =============================================================== */
/* Color scheme classes                                            */
/* =============================================================== */

.bg-nom-logo1 {
	background-color: #AAA379 !important;
}

.fg-nom-logo1 {
	color: #AAA379 !important;
}

.bg-nom-logo2 {
	background-color: #B7B083 !important;
}

.fg-nom-logo2 {
	color: #B7B083 !important;
}

.bg-nom-logo3 {
	background-color: #C5BD8D !important;
}

.fg-nom-logo3 {
	color: #C5BD8D !important;
}

.bg-nom-logo4 {
	background-color: #D3CA97 !important;
}

.fg-nom-logo4 {
	color: #D3CA97 !important;
}

.bg-nom-logo5 {
	background-color: #E1D7A1 !important;
}

.fg-nom-logo5 {
	color: #E1D7A1 !important;
}

.bg-nom-logo6 {
	background-color:#090 !important;
}

.fg-nom-logo6 {
	color: #090 !important;
}

.bg-nom-warning {
	background-color: #C00 !important;
}

.bg-nom-warning_orange {
	background-color: #fa6800 !important;
}

.bg-nom-grey {
	background-color: #999999 !important;
}

.bg-nom-info {
	background-color: #FFC000 !important;
}

.fg-nom-warning {
	color: #E1D7A1 !important;
}

small.notif-tab {
	line-height: 1.7rem;
	text-align: right;
    word-break: break-word;
}

.bg-nom-logo-grey1 {
	background-color: #333333 !important;
}

.fg-nom-logo-grey1 {
	color: #333333 !important;
}

/* =============================================================== */
/* Styling for the main images displayed within the content pages  */
/* =============================================================== */

.metro img.image-left-content,
.metro img.image-right-content {
	width: 46%;
}

div.content-with-image {
	width: 50%; 		!important;
}

div.content-to-right,
div.content-to-left {
	margin-bottom: 10px;
	width: 50%;
}

div.content-to-right img.main-image.image-right-content, 
div.content-to-left img.main-image.image-left-content {
	width: 100%;
}
	
div.content-to-right {
	clear: right; 
	float: right; 
}

div.content-to-left {
	clear: left; 
	float: left;
	max-width: 480px;
}

.metro img.image-left-content {
	clear: left; 
	float: left; 
	padding-right: 10px;
	padding-bottom: 10px;
	margin-right: 20px;
}

.metro img.image-right-content {
	clear: right; 
	float: right; 
	padding-left: 10px;
	padding-bottom: 10px;
}

/* =============================================================== */
/* Styling for the Pagination buttons                              */
/* =============================================================== */

/* The following breaks the administration pages pagination namely
   in the mobile views. 
.metro .pagination > ul li, .metro .pagination > ol li {
	margin-bottom: -0.7rem;
}
*/

.metro .pagination > ul li.active a {
	background-color: #AAA379;
	color: #ffffff;
}

.metro .pagination.mini > ul li.first,
.metro .pagination.mini > ul li.prev,
.metro .pagination.mini > ul li.next,
.metro .pagination.mini > ul li.last
{
	background-color: #d9d9d9;
	height: 18px;
	padding-top: 3px;
}

/* =============================================================== */
/* Styling for the list view - outlook style                       */
/* =============================================================== */

.metro .listview-outlook .list.marked .list-content {
  	border-left: 3px #999966 solid !important;
}
.metro .listview-outlook .list:active,
.metro .listview-outlook .list:focus,
.metro .listview-outlook .list.active {
  	background-color: #f1e8bc !important;
}
.metro .listview-outlook .list:hover {
  	background-color: #ffffd2;
  	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}
.metro .listview-outlook .list:hover .list-content {
  	border-left: 3px #7e7e4d solid;
}

.metro .listview-outlook .list .list-content .list-subtitle {
	font-weight: bold;
	color: #7c754d;
}

.metro .listview-outlook .list-group .group-title:hover::before, 
.metro .listview-outlook .list-group .group-title::before {
	border-bottom: 7px solid #AAA379 !important;
  	padding-top: 0.55rem;
}

.metro .listview-outlook .list-group .group-title {
	font-size: 1.4rem !important;
}

/* =============================================================== */
/* Styling for the list view - dialogs                             */
/* =============================================================== */

.metro dl.horizontal dt.findnotary {
	width: 80px;
}

.metro dl.horizontal dd.findnotary {
	margin-left: 100px;
}

/* =============================================================== */
/* Styling for the Pagination                                      */
/* =============================================================== */

.metro .pagination.small ul li a {
	padding: 2px 9px;
	font-size: 0.89em;
	margin-bottom: 4px;
	margin-top: 4px;
}

/* =============================================================== */
/* Styling for the Tabbed controls                                      */
/* =============================================================== */

.metro ul.tabs li, 
.metro ol.tabs li {
	margin-bottom: 0px;
}

/* =============================================================== */
/* Command buttons - changes done to accommodate the buttons in    */
/* the Find Notary page, and carried out throughout the site       */
/* =============================================================== */

.metro .command-button {
	padding: 0.8rem 0.8rem;
}

/* =============================================================== */
/* Main page: announcements section                                */
/* =============================================================== */

.metro .tile .tile-content.email .email-image {
	width: 3.2rem;
	height: 3.2rem;
}

.metro .tile .tile-content.email .email-data .email-data-title {
	font-size: 2.0rem;
}

.metro .tile .tile-content.email .email-data .email-data-subtitle {
	font-size: 1.8rem;
}

.metro .tile .tile-content.email .email-data .email-data-text {
	font-size: 1.4rem;
}

.metro .tile .tile-content.email .email-data {
	margin-left: 3.5rem;
}

/* =============================================================== */
/* Other stylings                                                  */
/* =============================================================== */

span.notices {
	color: #005500;
	font-size: 1.2rem;
	font-weight: bold;
	font-style: italic;
}

.metro .sidebar > ul li a [class*="icon-"],
.metro .sidebar > ul li a [class*="ion-"] {
  margin-right: 15px;
}

/* hilight notices text */
.metro small.info_notice {
  color:#C00000 !important;
}

/* disabled text */
.metro label.disabled,
.metro small.info_notice.disabled {
  color: #bebebe !important;
  cursor: pointer !important;
}

/* =============================================================== */
/* Styling for the social media bar                                */
/* =============================================================== */

div.social-media-holder {
    position: fixed;
    height: 2rem;
    top: 45px;
    display: block;
    width: 100%;
	z-index: 1001;
}

@media print {
	div.social-media-holder {
		display: none;
	}
}

div.social-media-bar {
    clear: both;
    float: right;
    height: 2rem;
	line-height: 1.2rem;
}

.social-icon {
	margin-top: 0.5rem;
	margin-bottom: 0.4rem;
	padding: 0;
	padding-right: 0.8rem;
	font-size: 1.2rem;
	display: inline-block;
}

/* =============================================================== */
/* Common styling					                               */
/* =============================================================== */

.grey-text {
	color: #999;
	cursor: auto;
}