/* 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
}

td {
  line-height: 1.15rem;
}

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

table.archive {
    width: 100%;
    margin-top: 1rem;
}

table.archive tr {
   height: 1.2rem;
}

td.date-column, td.index-column {
    text-align: right;
}

td.file-column, td.digest-column {
    text-align: left;
}

table.archive td, table.archive th {
   padding: 0.2rem;
}

table.archive th {
    font-weight: bold;
    text-align: left;
}

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: 70em;
    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/ehealth.svg);
    background-size: 101px 30px;
    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;
}