/* ----- Main layout ----- */
html { margin:    0;    padding:    0;    height: 100%;}
body {
    margin:                     0;
    padding:                    0;
    min-height:                 100%;
    border-left:                10px solid #000;
    border-right:               10px solid #000;
    background:                 #fcfcfc url(img/background.png) repeat-x 0 85px;
    color:                      #000;
    font:                       10pt tahoma, osaka,taipei,verdana, arial, helvetica, sans-serif;
}
* html body { height: 100%; }

img {border:                     none;}

/* header */
#xo-header { background: url(img/banner_bg.png) repeat-x left; height: 70px;}
#xo-main-logo {
    float:                      left;
    margin:                     5px 10px;
}
#xo-version {
    float:                      right;
    margin:                     5px 10px;
    color:                      #129ee8;
    font-weight:                bold;
    font-size:                  2em;
}
#xo-support {
    float:                      right;
    margin-right:               10px;
    padding-top:                45px;
    font-size:                  10pt !important;
    vertical-align:             middle;
    color:                      #000;
}
#xo-globalnav {
    margin:                     0;
    padding:                    0;
    height:                     9px;
    background:                 url(img/bg-globalnav.png) repeat-x left top;
}
#xo-content {
    clear:                      left;
    text-align:                 center;
    padding:                    2em 3em;
}

/* ----- Wizard layout ----- */
#wizard {
    margin:                     0 auto;
    padding:                    .5em;
    text-align:                 left;
    background:                 #f0f0f0 url(img/wizard_bg.png) no-repeat 0 90px;
    border-top:                 1px solid #e3e3e3;
    border-left:                1px solid #fff;
}
#pageslist {
    float:                      left;
    width:                      250px;
    margin:                     0;
    padding:                    .5em;
    border-right:               1px solid #e4e4e4;
    list-style-type:            none;
    min-height:                 350px;

}
.page {
    min-height:                 350px;
    margin-left:                260px;
    padding:                    .5em;
    background-color :          transparent;
}
* html .page { height: 350px; }

h1 {
    margin:                     0;
    padding:                    0;
    color:                      #fff;
    font-family:                "Lucida Grande", "Trebuchet MS", sans-serif;
    font-size:                  1.5em;
}
#header {
    margin:                     0;
    padding:                    0;
    color:                      #fff;
    font-family:                "Lucida Grande", "Trebuchet MS", sans-serif;
    font-size:                  1.5em;
    height:                     40px;
}
#title-before {
    float:                      left;
    width:                      11px;
    height:                     40px;
    background:                 url(img/title-before.png) no-repeat;
}
#title-after {
    float:                      right;
    width:                      11px;
    height:                     40px;
    background:                 url(img/title-after.png) no-repeat;
}
#title {
    margin:                     0 11px;
    width:                      auto;
    background:                 url(img/title.png) repeat-x;
    height:                     40px;
    padding:                    5px 0 0 0;
}
#step {float: right;}

ul, ol { margin:0; padding:0 20px;}

/* ----- Styling ----- */

#pageslist li {
    padding-left:               15px;
    padding-top:                1px;
    padding-bottom:             2px;
    background:                 url(img/bullet.png) no-repeat left center;
}
#pageslist li.current { background-image: url(img/bullet-current.png);}
#pageslist li.disabled { background-image: url(img/bullet-disabled.png);}

#buttons {
    clear:                      both;
    text-align:                 right;
    padding:                    .5em;
}
form { margin:    0;}
h1, h2 { font-family: "Lucida Grande", "Trebuchet MS", sans-serif;}
h2 {
    margin-top:                 0;
    border-bottom:              1px solid #ccc;
    padding-left:               .5em;
    text-align:                 left;
}
h3 {
    font-size:                  1.1em;
    font-weight:                bold;
    margin:                     1em .5em .5em;
}
p { margin:    .5em;}

a {
  text-decoration:              none;
  color:                        #666;
  font-weight:                  bold;
  background-color:             transparent;
}
a:hover {
    text-decoration:            none;
    color:                      #ff9966;
    font-weight:                bold;
    background-color:           transparent;
}
table {
    width:                      99%;
    border-spacing:             0;
    border-collapse:            collapse;
    margin-bottom:              1em;
}
caption, .caption {
    background:                 #fff url(img/table-caption-grey.png) repeat-x;
    padding:                    2px .25em;
    color:                      #000;
    font-size:                  1.1em;
    font-weight:                bold;
    font-variant:               small-caps;
    text-align:                 center;
}
table thead th { background-color: #f4f4f4;}
td, th {
    padding:                    2px .25em;
    background-color:           #fcfcfc;
    border:                     1px solid #efefef;
}
fieldset {
    margin:                     1em;
    border:                     0 none transparent;
    border:                     1px solid #999;
    padding:                    .5em 1em;
}
legend {
    margin:                     0;
    padding:                    0 10px;
    font-size:                  1.1em;
    font-weight:                bold;
}
.xolabel {
    clear:                      both;
    display:                    block;
    padding:                    .5em 0;
}
#xolabel.center {
    clear:                      both;
    text-align:                 center;
    display:                    block;
    padding:                    .5em 0;
}
#help_button { float: right; cursor:help; }
.xoform-help {
    display:                    none;
    margin:                     0;
    padding:                    0;
    font-size:                  85%;
    color:                      #cc0000;
}
body.show-help .xoform-help { display: block;}
#langselect.page { text-align: center; }

ul.diags, ul.log {
/*    height:                     310px;*/
    overflow:                   auto;
    padding:                    5px;
    margin:                     0px;
    border:                     1px solid #d0d0d0;
    list-style-type:            none;
}
ul.log {height:                 300px;}
ul.diags li, ul.log li {
    color:                      #000;
    padding-left:               20px;
}
ul.diags li.success, ul.log li.success { background-image: url(img/yes.png); }
ul.diags li.failure, ul.log li.failure {
    background-image:           url(img/no.png);
    font-weight:                bold;
    color:                      #f66;
}
.module { background-color:     #fff;}
.module td {
    margin:                     0px;
    padding:                    2px;
    background-color:           transparent;
}
.module td.img { width:         100px;}
.module td.yesno { width:       100px;}

/* ------------------------ Shadow effect ------------------------ */

html>body .tagsoup1 {
    display:                    block;
    position:                   relative;
    margin:                     12px -12px -12px 12px;
    background:                 url(img/shadow.png) repeat-x right bottom !important;
}

/* shadow corners */
html>body .tagsoup1:before,
html>body .tagsoup1:after {
    content:                    " ";
    display:                    block;
    width:                      12px;
    height:                     12px;
    background:                 inherit;
}
html>body .tagsoup1:before {
    position:                   absolute;
    top:                        0;
    right:                      0;
    margin:                     -12px 0 0 auto;
    background-position:        right top;
}
html>body .tagsoup1:after {
    margin:                     -12px 0 0 -12px;
    background-position:        left bottom;
}
html>body .tagsoup1 .tagsoup2 {
    display:                    block;
    position:                   relative;
    overflow:                   hidden; /* prevents margin leakage from child elements */
    left:                       -12px;
    top:                        -12px;
    margin:                     0;
}
em { font-weight:                bold;}

/*  Xoops french installer */

/* ===== messages ===== */
.pathmessage {
    position:                   absolute;
    float:                      right;
    margin-left:                5px;
    width:                      220px;
}
.error, .warning, .failure {
    background-image:           url(img/no.png);
    background-repeat:          no-repeat;
    padding-left:               20px;
}
.success {
    background-image:           url(img/yes.png);
    background-repeat:          no-repeat;
    padding-left:               20px;
}
.warning { color:#ff0000; background-color: transparent;}
.errorMsg, .confirmMsg, .resultMsg, .successMsg {
    margin:                     5px 2px;
    padding:                    5px;
    border:                     1px solid #ccc;
}
.confirmMsg {
    background-color:           #FFF6BF;
    color:                      #817134;
    border-color:               #FFD324;
    list-style-type:            none;
}
.resultMsg, .successMsg {
    background-color:           #E6EFC2;
    color:                      #529214;
    border-color:               #C6D880;
}
.errorMsg a {background-color: transparent; color: #D12F19;}
.confirmMsg a {background-color: transparent; color: #817134;}
.successMsg a {background-color: transparent; color: #529214;}
.errorMsg {
    background-color:           #FBE3E4;
    background-repeat:          no-repeat;
    background-position:        10px;
    color:                      #D12F19;
    border-color:               #FBC2C4;
}
.directory, .files {
    padding-left:               20px;
    font-weight:                bold;
    font-style:                 italic;
}
.directory {
     background-image:          url(img/folder.png);
   background-repeat:           no-repeat;
   background-position:         left;
}
.files {
   background-image:            url(img/document.png);
   background-repeat:           no-repeat;
   background-position:         left;
}
#screenshot {text-align:        center;}
#screenshot img {
    max-width:                  500px;
    margin-top:                 5px;
}
/* Form element */
input[type=text], input[type=password] {
    width:                      60%;
    margin-bottom:              .25em;
    background:                 #fff url(img/form-input.png) no-repeat left top;
    padding:                    1px .25em;
    border-bottom:              1px solid #aaa;
    border-right:               1px solid #aaa;
    color: 								#333;
}
input { width: expression(this.type=='text'?'60%':'auto'); }
input[name=root], input[name=data], input[name=lib] {}
input[type=submit], input[type=reset], input[type=button], .xo-formbuttons, .formButton, button {
    margin-left:                .5em;
    background-color:           #D3D2D6;
    color:                      #405A80;
    font-weight:                bold;
    border:                     1px solid #ccc;
    cursor:                     pointer;
    vertical-align:             top;
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover,.xo-formbuttons:hover, .formButton:hover, button:hover {
    background-color:           #E6EBFF;
    color:                      #405A80;
    cursor:                     pointer;
}
select {
    width:                      200px;
    border-right:               #333 1px solid;
    border-top:                 #333 1px solid;
    background-color:           #f7f7f7;
    font:                       8pt verdana, arial, helvetica;
    border-left:                #000 1px solid;
    color:                      #000;
    border-bottom:              #000 1px solid;
}
select[name=lang] { min-width:  10em;}
.option {
    padding-left:               27px;
    font-size:                  1.1em;
    margin:                     2px 0;
}

textarea {
    width:                      95%;
    background-color: 				#f7f7f7;
    color:								#000;
}

/* Password streng */
#password {
    position:                   relative;
    min-height:                 120px;
}
#passwordinput {
    position :                  absolute;
    width:                      100%;
}
#passwordmetter {
    position :                  absolute;
    right:                      -7px;
    top:                        -17px;
    width:                      200px;
    padding:                    0 5px 5px;
    border :                    1px solid #555;
}
#passwordmetter label, #passwordgenerator, #passwordgenerator input{text-align:   center;}
#passwordDescription {
    text-align:                 center;
    position:                   relative;
    top:                        2px;
}
#passwordStrength {
    text-align:                 center;
    height:                     20px;
    display:                    block;
    margin-bottom:              .25em;
    font-weight:                bold;
}

.strength0 { width: auto; background: #ccc; }
.strength1 { width: auto; background: #ccc; }
.strength2 { width: auto; background: #f00; }
.strength3 { width: auto; background: #ff5f5f; }
.strength4 { width: auto; background: #56e500; }
.strength5 { width: auto; background: #4dcd00; }
.strength6 { width: auto; background: #399800; }
.strength0 span { color: #000; }
.strength1 span { color: #000; }
.strength2 span { color: #fff; }
.strength3 span { color: #fff; }
.strength4 span { color: #000; }
.strength5 span { color: #000; }
.strength6 span { color: #fff; }