/* Basic style for IDP. To be extended by specific styles when appropriate. */
html {
	color: #000;
	background: #FFF
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td
	{
	margin: 0;
	padding: 0
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

fieldset,img {
	border: 0
}

address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var
	{
	font: inherit
}

del,ins {
	text-decoration: none
}

li {
	list-style: none
}

caption,th {
	text-align: left
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal
}

q:before,q:after {
	content: ''
}

abbr,acronym {
	border: 0;
	font-variant: normal
}

sup {
	vertical-align: baseline
}

sub {
	vertical-align: baseline
}

legend {
	color: #000
}

/*
Copyright (c) 2011, eHealth Platform - Plate-forme eHealth. All rights reserved.
version: 1.0.0
*/
/****
@color :
	vert bouteille #5b826d
	vert clair #a8d8c1
	vert dark #4a695a
	rouge vermillon #B91414
	brun clair #7d7567
	gris content #e4e0d9
	gris clair #fbfaf8
	
	1. =basicStyles
	2. =layout
	3. =navigation
	4. =buttons
	5. =eHUiClasses
	6. =footer
	7. =chooseprofile
	
****/

/***** =basicStyles *****/
body {
	font: normal 75% Helvetica, Arial, sans-serif;
	background-color: #fff;
	margin: 0;
	padding: 0;
	border: none;
}

h1 {
	text-indent: -9999px;
	height: 4.167em;
}

h2 {
	color: #fff;
	font-size: 1.500em;
	padding: 5px 10px;
}

h2.loading {
	color: #666666;
}

h3 {
	color: #5b826d;
	font-size: 1.333em;
	font-weight: bold;
}

h3.loading {
	color: #e4e0d9;
}

h3 span {
	color: #7d7567;
	font-size: 0.813em;
	font-weight: normal;
}

h3.selectionMessage+div.eh-ui-information {
	margin-top: .8333em;
}

a:link,a:visited,a:active {
	color: #000;
}

a:hover {
	color: #646462
}

/***** =layout *****/
#container {
	width: 62.500em;
	margin: 1.5em auto;
}

#content {
	margin: 0;
	border: 2px solid #666666;
	background-color: #e4e0d9;
}

#content h2 {
	background-color: #666666;
}

#navigation,#content-footer,#content-menu,#content-view {
	padding: 0.833em;
}

#content-view {
	min-height: 300px;
	height: auto !important;
	height: 300px;
}

/***** =navigation *****/
#navigation ol {
	color: #666;
	background: #fbfaf8 url(../images/bgNavigation.png) no-repeat -17px
		-12px;
	height: 3.5em;
}
/**  bg active for each step, the sprite is on the ol ***/
.stepTwo #navigation ol {
	background-position: -17px -80px;
}

.stepThree #navigation ol {
	background-position: -17px -148px;
}

#navigation li {
	float: left;
	width: 33%;
	font-size: 1.333em;
	list-style-type: none;
	line-height: 1.1em;
	_width: 31%; /* =hack ie6 */
}

#navigation li span {
	display: block;
	width: 100%;
	padding-top: .7em;
	padding-left: .9em;
}

#navigation li a:link,#navigation li a:visited {
	color: #666666;
	text-decoration: none;
}

#navigation li a:hover {
	text-decoration: underline;
	color: #000;
}

#navigation li a:active {
	color: #666666;
}

#navigation li.active,#navigation li.active a {
	color: #fff;
}

#navigation li span strong {
	display: inline-block;
	float: left;
	width: 1em;
	padding: .3em .3em .4em .3em;
	text-align: center;
	font-size: 1.6em;
	font-weight: normal;
	margin-top: -.35em;
	background: transparent url(../images/spriteNav.png) no-repeat 5px 2px;
}

#navigation li.active span strong {
	background-position: 5px -68px;
	color: #fff;
}

.stepOne #navigation li span strong,.stepTwo #navigation li.first span strong,.stepThree #navigation li.first span strong,.stepThree #navigation li.first+li span strong
	{
	margin-top: 0;
}

.stepOne #navigation li span,.stepTwo #navigation li.first span,.stepThree #navigation li.first span,.stepThree #navigation li.first+li span
	{
	padding-top: .2em;
}

#navigation li.active span strong {
	color: #fff;
}

#navigation em {
	color: #5b826d
}

/***** =content *****/
.content-list {
	list-style: none;
}

.content-list-item {
	display: block;
	padding: .8333em 1.250em;
	margin: .8333em 0;
	border: 1px solid #aaa;
	background-color: #fff;
}

.content-list-item p {
	float: left;
	color: #333;
	padding: 1em 0 .8333em 0;
	line-height: 15px;
}

.stepOne .content-list-item p {
	min-width: 25em;
}
/** stepTwo special content-list ***/
.selectToken {
	background: 0 center no-repeat url(../images/token.jpg) #fff;
}

.selectEid {
	background: 0 center no-repeat url(../images/ID2.jpg) #fff;
}

.selectUserid {
	background: #fff;
}

.selectToken p,.selectUserid p,.selectEid p {
	width: 21.250em;
	padding-left: 8.333em;
}

.content-list-item label,.content-list-item select,.content-list-item .fake-label,.content-list-item .fake-input
	{
	display: block;
	color: #333;
}

.content-list-item label,.content-list-item .fake-label,.content-list-item .fake-input
	{
	display: block;
	width: 15em;
	text-align: right;
	float: left;
	margin: .4em .6em .4em 0;
}

.content-list-item .fake-input {
	text-align: left;
	color: #B91414;
	width: auto;
}

/***** =eHUiClasses *****/
.eh-ui-tooltip {
	display: inline-block;
	width: 10em;
	border: 1px solid #B91414;
	border-radius: 5px;
	background: #fff no-repeat 20px center url(../images/49.png);
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 10px;
	opacity:0.75;
}

.eh-ui-emphasize {
	font-weight: bold;
	color: #b91414;
}

.eh-ui-information,.eh-ui-notification {
	padding: .8333em;
	border: 1px solid #B91414;
	margin-bottom: 15px;
}

.eh-ui-information {
	padding-left: 50px;
	background: #fbfaf8 no-repeat 20px center url(../images/49.png);
}

.eh-ui-notification {
	padding-left: 50px;
	background: #fff no-repeat 20px center url(../images/50.png);
	margin: 1em 0;
}

.content-list-item .eh-ui-information p,.content-list-item .eh-ui-notification p
	{
	padding-top: 0;
	padding-bottom: 0;
	margin: .5em;
	line-height: 15px;
	float: none;
	color: #000;
}

.eh-ui-hidden {
	display: none;
}

.eh-ui-information a:link,.eh-ui-notification a:link,.eh-ui-information a:visited,.eh-ui-notification a:visited,.eh-ui-information a:active,.eh-ui-notification a:active
	{
	color: #646462;
}

.eh-ui-information a:hover,.eh-ui-notification a:hover {
	color: #9d968c;
}

/*** =buttons ***/
.help {
	float: right;
}

.help-pressed {
	font-weight: bold;
}

a.continue-with,input.continue-with {
	display: block;
	float: right;
	background: transparent url(../images/bgButton.png) repeat-x 0 -3px;
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	width: 15em;
	text-align: center;
	border: 1px solid #4a695a;
}
/* different size for each step */
.stepTwo a.continue-with {
	width: 23.750em;
	margin-top: .5em;
}

input.continue-with {
	cursor: pointer;
	width: 20em;
}

a.continue-with:link,a.continue-with:link,a.continue-with:visited,a.continue-with:visited,a.continue-with:active,a.continue-with:active,input.continue-with
	{
	color: #fff;
}

a.continue-with:hover,a.continue-with:hover,input.continue-with:hover {
	color: #a8d8c1;
	background-position: 0 -53px;
}

a.cancel:link,a.cancel:hover,a.cancel:active,a.cancel:visited {
	padding: .417em;
	margin: .833em;
	color: #666;
	float: left;
}

/***** =footer *****/
#footer {
	color: #000;
	padding: .833em .417em;
}

#footer p {
	float: right;
	display: block;
	padding: .833em 9.167em 0 0;
	background: no-repeat center right url(../images/ehealthFooter.gif);
	height: 2.083em
}

#footer ul {
	float: right;
}

#footer ul li {
	float: left;
	background: url(../images/iconSeparator.gif) no-repeat scroll 100% 80%
		transparent;
	padding-right: 0.5em;
}

#footer ul li.last {
	background: none;
	padding-right: 0em;
}

#footer ul li a {
	display: block;
	padding: .833em 0 0 .417em;
}

/***** =choose profile *****/
.stepThree select {
	width: 33em;
	padding: 4px
} /* design if no js actived */
.content-load-failed {
	display: none;
}

.content-leaving {
	display: none;
}

/***** =rounded corners *****/
#content,.eh-ui-information,.eh-ui-notification,.content-list-item,a.continue-with,input.continue-with
	{
	border-radius: 5px;
}

.rounded-corners {
	border-radius: 5px;
}

/* float clearing for IE6 */
* html .clearfix {
	height: 1%;
	overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix {
	min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	font-size: 0;
}

p.center {
	text-align: center;
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.center-content {
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 300px;
}

/***** =loading *****/
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(255, 255, 255, .33);
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
	overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
	display: block;
}

p.notification-label {
	font-weight: bold;
	color: #fff;
	background-color: #b91414;
	text-align: center;
	border: 2px solid #b91414;
	border-radius: 5px;
}

p.notification-less {
	color: DarkSlateGray;
	font-style: italic;
}

table.status {
	text-indent: 10px; 	
	color: graytext;
}

table.status td.code {
	color: #5b826d;
	font-size: 1.333em;
	font-weight: bold;
}
table.status td.message {
	font-weight: bold;
}