/*
 * Author: Lachlan Hunt
 * http://lachy.id.au/
 *
 * Body Class Names
 * home - used for the home page
 * benefits - information pages that about the main benefits of using Edentiti
 * info - General information pages
 * membership - Membership areas of the site (logged in users)
 * edit-details - Forms for signup and updating details
 */
@media screen, projection {
html { background-attachment: fixed; background: #00F url(../images/bg-gradient.png) repeat-x; }
/* body { background-attachment: fixed; background: url(../images/bg-hex-gradient.png) -100px -5px no-repeat; } */
}

body { margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; color:#006;}
#container { background: white; color: black; font-size: small; border: 10px solid #000099; }
.benefits #container { color: #006; font-size: medium; }

/* Headings */
h2 { margin: 0 25px; padding: 0; }
#main h2 { margin: 0; }
h2 { background: url(../images/bg-section-header-left.png) left no-repeat; color: white; }
h2 strong { background: url(../images/bg-section-header-right.png) right no-repeat; color: white; font-weight: bold;
            display: block; line-height: 50px; font-size: x-large; padding: 0 25px; }
#main h3 { font-size: 150%; margin: 1em 0 .5em; } 
#main h3:first-child { margin-top: 0; }
#main h4 { font-size: 140%; margin: .5em 0; }
h5 { margin: .2em 0; }

#content {background: #fff url(../images/body-bg.png) repeat-x; }

.benefits #container h2 { background: none; font-size: large; font-style: italic; font-weight: bold; color: #006; }
.benefits #secondary-nav h2 { font-size: medium; font-style: normal; }

.home #container h2 { background: none; font-size: large; font-style: italic; font-weight: bold; color: #006; }
.home #secondary-nav h2 { font-size: medium; font-style: normal; }
.home #content { color: #006; font-size: small; }
.home #main ol strong { background: none; font-size: medium; font-weight: bold; color: #006; margin: 0; padding: 0;}

.create #main h2 { background: none;}
.create #main h2 strong { background: none; font-size: large; font-weight: bold; color: #006; margin: 0; padding: 0;}



.backdoor #main h2 { background: none;}
.backdoor #main h2 strong { background: none; font-size: large; font-weight: bold; color: #006; margin: 0; padding: 0;}

/* General */
abbr, acronym { cursor: help; }

/* Emphasis */
strong { font-weight: bold; color: #006; }
strong strong { color: #F90; }
em { font-style: italic; }
em em { font-weight: bold; }

/* Links */
:link { color: #009; }
:visited { color: #00F; }
:link:hover, :link:focus,
:visited:hover, :visited:focus { color: #F90; }
:link:active, :visited:active { text-decoration: none; }
.help { cursor: help; padding: 0 .3em; }

/* Emphasised Links */
a em em::after { content: url(../images/em-link-arrow.png); margin-right: -15px; }
a em em { font-weight: bold; font-style: normal; }
* html a em em { margin-right: 0; }
a:hover em em::after, a:focus em em::after { content: url(../images/em-link-arrow-hover.png); }

/* Lists */
#main ul, #main ol{ margin: 1em 0; padding: 0 0 0 1.2em; }
#main dt { font-weight: bold;}

/* Header */
#header { 	background: #fff url(../images/bg-header.png) repeat;
			color: white; border-bottom: 9px solid #006; }

#header h1 { margin: 0; padding: 0 0 0 20px; height: 79px; width: 253px; position: relative; z-index: 1; overflow: hidden; }
#header h1 a { background: url(../images/mrk-logo-horizontal.png) left center no-repeat; display: block;
               height: 100%; overflow: hidden; text-decoration: none; text-indent: -2000px; }

.benefits #header h1 { height: 108px; width: 150px; }
.benefits #header h1 a { background-image: url(../images/edentiti-logo-vertical.png); }
#header p { position: absolute; left: -2000px; }

/* Top Menu */
#topmenu, #topmenu ul li a	{
	/* need to middor veritcal padding on .hnav and child anchor elements
	 * because the anchors are _not_ block elements. since they are not
	 * block elements web browsers will not expand .hnav to contain them
	 * even with the extra padding. by applying the same padding to both
	 * the parent .hnav _looks_ like its containing the child anchor
	 * elements. 
	 */
	padding-top: 0px; padding-bottom: 4px;	}
#topmenu ul, #topmenu ul li	{	display: block; list-style-type: none; margin: 0; padding: 0 0 2px 7px; }
#topmenu ul li	{ display: inline; font-family:verdana; font-size:10px;}
#topmenu ul li a	{ margin: 0 -1px 0 0; white-space: nowrap; color:#006; text-decoration: underline; font-weight:bold; }
#topmenu ul li a:visited, #topmenu ul li a:link, #topmenu ul li a:active, #topmenu ul li a:hover {
	text-decoration: underline;  color:#006; font-weight:bold;}
* html #topmenu ul li, * html #topmenu ul li a	{
	width: 1%; /* IE/Mac needs this */
	display: inline-block;	/* IE/Mac needs this */
	/* \*/
		width: auto;
		display: inline;
		position: relative;
	/* reset above hack */
	}
* html #topmenu, * html #topmenu ul a	{
	/* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win. 
				 IE/Mac will ignore this rule. */
	}
* html #TOPMENU	{
	padding: 0;	/* IE5/Win will resize #hnav to fit the heights of its
			   inline children that have vertical padding. So this
			   incorrect case selector hack will be applied only by
			   IE 5.x/Win */
	}		
#topmenu .announce {
	display: block; font-family:verdana;font-size:16px;font-weight:bold; color: #000099;clear:right;padding: 5px 15px 0 0;
}
	


/* Footer */
#footer { font-size: 75%; padding: 1em 50px; margin: 0; text-align:center; }
#footer .large { font-size: 125%;}

/* Info Navigation */
#info-nav { margin: 0; padding: 0; }
#info-nav li { background: #000066; color: white; padding: 2px 2px 0; }
#info-nav li, #info-nav a { display: block; list-style: none; }
#info-nav a { color: white; font-size: small; text-align: center; text-decoration: none; line-height: 2; font-weight:bold;}
#info-nav a:hover, #info-nav a:focus { background:#fff; color: #006; }
#info-nav .current { background:#ccc; color: #006; }
#info-nav a.current:hover, #info-nav a.current:focus { background:#ccc; color: #006; }
/* 
#info-nav a span { 
	position:absolute;
	display:block;
	width:45px;
	height:40px;
	right:-15px;
	top:-17px;
	background: url(../images/bg-sec-nav.png) left top no-repeat; }
*/



/* Secondary Navigation */
#secondary-nav,
#secondary-nav * { margin: 0 auto; padding: 0; font: bold small "Myriad Roman", "Trebuchet MS", sans-serif; text-align: center; }
#secondary-nav h2 { font-size: 105%; }
#secondary-nav li { display: table !important; display: block; border-collapse: separate; height: 51px; list-style: none; width: 129px; background: url(../images/bg-sec-nav.png) no-repeat; }
#secondary-nav a { display: table-cell !important; display: block; background: none center no-repeat; text-decoration: none;
                   padding: 5px 10%; vertical-align: middle; }
/*\*/* html #secondary-nav a { height: 41px; }/**/

#secondary-nav .current,
#secondary-nav .current:hover,
#secondary-nav .current:focus { background-image: url(../images/bg-sec-nav-active.png); background-color: #088AB8; color: white; }

/* Removed by TL for KCs changes, 6/4/06 */
#secondary-nav a  { color: #00567A; }
/*.benefits #secondary-nav .current,
.benefits #secondary-nav a:hover,
.benefits #secondary-nav a:focus { background-color: transparent; background-image: none; color: #00567A; } */

#secondary-nav :link:hover,#secondary-nav :visited:hover,
#secondary-nav :link:focus, #secondary-nav :visited:focus { color: #F90; }

/* Removed by TL for KCs changes, 6/4/06 */
/*.benefits #secondary-nav li { background: url(../images/bg-sec-nav-large.png) no-repeat; min-height: 99px; }
.benefits #secondary-nav a {vertical-align: bottom; padding-top: 45px; } */

/* Secondary Navigation: Learn About Edentiti - Navigation Icons */
/* Removed by TL for KCs changes, 6/4/06 */
/*.benefits #secondary-nav li {  border-spacing: 0 10px; }*/
#nav-privacy a { background-image: url(../images/icon-privacy.png) !important; }
#nav-security a { background-image: url(../images/icon-security.png) !important; }
#nav-easy a { background-image: url(../images/icon-easy.png) !important; }
#nav-privacy .current, #nav-privacy a:hover, #nav-privacy a:focus { background-image: url(../images/icon-privacy-hover.png) !important; }
#nav-security .current, #nav-security a:hover, #nav-security a:focus { background-image: url(../images/icon-security-hover.png) !important; }
#nav-easy .current, #nav-easy a:hover, #nav-easy a:focus { background-image: url(../images/icon-easy-hover.png) !important; }

/* Breadcrumbs */
.breadcrumbs { width: 42em; max-width: 100%; margin: 0 auto !important; padding: 0 !important; }
.breadcrumbs::after { content: "."; height: 0; display: block; visibility: hidden; clear: both; }
/*\*/* html .breadcrumbs { height: 1%; }/**/

.breadcrumbs .current-step { position: absolute; left: -2000px; }

.breadcrumbs li { display: block; list-style: none; width: 7em; float: left; text-align: center;
                  background: white url(..../images/step-next.png) center 25px no-repeat; color: #00567A; }
.breadcrumbs .first { background-image: url(..../images/step-prev-first.png); }
.breadcrumbs .first-current { background-image: url(..../images/step-current-first.png); }
.breadcrumbs .last-current { background-image: url(..../images/step-current-last.png); }
.breadcrumbs .last { background-image: url(..../images/step-next-last.png); }
.breadcrumbs .prev { background-image: url(..../images/step-prev.png); }
.breadcrumbs .current { background-image: url(..../images/step-current.png); }

.breadcrumbs .current,
.breadcrumbs .first-current,
.breadcrumbs .last-current { font-weight: bold; }
.breadcrumbs .step { display: block; visibility: hidden; padding: 5px 0 40px; height: 20px; }
.breadcrumbs .current .step,
.breadcrumbs .last-current .step { visibility: visible; }
.breadcrumbs .number { font-size: x-large; display: block; color: white; margin: -35px 0 10px; }

/* Homepage Membership Area */
#download { clear: both;}

/* Creation Steps */
#signup { background: url(../images/bg-create.png) bottom no-repeat; padding-bottom: 1px; margin-bottom: 1em; min-height: 210px; }
.home #signup { background-image: url(../images/bg-create-large.png); }
/*\*/* html #signup { height: 210px; }/**/

#signup ol { margin: 0 auto; padding: 0 0 0 35px; font-size: 103%; }

#signup ol li { color: #F90; font-weight: bold; margin: .5em 0; padding: 0; }
#signup ol li span { color: #006; }
#signup {font-weight: bold;}

#signup .create-button { text-align: center; margin: 2em 0 -.5em; padding:0; position: relative; }
#signup .create-button a { background: white url(../images/button.png) right no-repeat; border: 1px solid #D1DBDF; color: #006;
                 text-decoration: none; font: bold medium "Trebuchet MS", sans-serif; cursor: pointer; padding: 5px 45px 5px 20px; }
#login input[type=submit] { display: block; margin: 0 auto; }
/* Ugly hack to nudge the IE button into the right size.
   Will probably cause a problem in IE7, but is not too serious.
   It's a problem with cross-browser form styling limitations */
* html #login button { padding: 2px 25px 2px 0; }
#signup .create-button a:hover, #signup .create-button a:focus,
#login button:hover, #login button:focus { background-image: url(../images/button-hover.png); color: #00C; }
#signup p { padding-left: 25px;}



/* Special Div */
#special { color: #ff0014; background: url(../images/bg-create.png) bottom no-repeat; padding-bottom: 1px; margin-bottom: 2em; min-height: 70px; padding-left:10px; padding-right:10px; text-align:center; }
/*\*/* html #special { height: 70px; }/**/



/* Login */
#login fieldset { border: 0; background: url(../images/bg-login.png) bottom no-repeat;
                   margin: 0 auto; padding: 0; width: 400px; }
#login fieldset legend { background: transparent; color: #006; margin: auto; display: block;
                          font: bold italic medium "Trebuchet MS", sans-serif; text-align: center; }
#login fieldset label { background: transparent; color: #006; margin: auto; display: block;
                       font-size: small; font-weight: normal;}

#login table { margin: .5em auto 0; }
#login input[type=text], input[type=password] { width: 150px;}

/* Tables */
table { width: 100%; }
col.labels { width: 25%; }
tbody th { text-align: left; }
th, td { vertical-align: top; padding: .3em .2em; }
col.desc, col.number { width: 25%; }
.section col.labels { width: 40%; }

/* Office Use */
.section::after, .group::after { content: "."; height: 0; display: block; visibility: hidden; clear: both; }
/*\*/* html .section, * html .group { height: 1%; }/**/

.office-use { display: none; }
.office .office-use { display: block; }
.office-use { margin: 2mm 0; padding: 1px 2.5%; background: #F3F9FA; color: black; border: 3px solid #F3F9FA; }
.section .office-use, .office fieldset .office-use { float: right; width: 30%; clear: both; }
fieldset .office-use+table, .office .section .office-use+table { width: 90%; }

.office-use p { margin: .2em; }
.office-use p+p { margin-top: .5em; }

.section .office-use input[type=text],
.section .office-use textarea { width: 90%; display: block; margin: auto; overflow: hidden; }
.office-use input[type=text],
.office-use textarea { background: white !important; color: black; border: 0; border-bottom:  2px solid #F3F9FA; font-size: large; }


.instructions { display: none; }
.section .office-use input.yes-no { float: left; background: white; }
.section .photo { float: right; margin: 0 5mm; }

#steps {color: #006; font-weight: bold; font: medium;}











@media screen, projection {
/* Dynamic Sections, controlled by JS */
.section h4 { cursor: pointer; }
.section h4 a { text-decoration: none; font-family: monospace; }
.collapse *, .office .collapse .office-use { display: none; }

.collapse h4 { display: block; }
.collapse h4 a { display: inline; }
}