/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
                                                  margin: 0;
                                                  padding: 0;
                                                  border: 0;
                                                  outline: 0;
                                                  font-size: 100%;
                                                  vertical-align: baseline;
                                                  background: transparent;
                                                  }
body {
       line-height: 1;
       }
ol, ul {
         list-style: none;
         }
blockquote, q {
                quotes: none;
                }
blockquote:before, blockquote:after,
q:before, q:after {
                    content: '';
                    content: none;
                    }

/* remember to define focus styles! */
:focus {
         outline: 0;
         }

/* remember to highlight inserts somehow! */
ins {
      text-decoration: none;
      }
del {
      text-decoration: line-through;
      }

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
        }
/* end of reset
   ************ */

/* ************************************************************************* */


body, html {
             background: #000000 url(loader.gif) center center no-repeat;
             width: 100%;
             height: 100%;
             overflow: hidden;
             color: #ffffff;
             font-family: "Arial", "Liberation Sans", sans-serif;
             }
#container {
             background: #000000 url(vassi_wall.png) center center fixed no-repeat;
             width: 100%;
             height: 100%;
             overflow: hidden;
             }
#lighter {
           display: none;
           line-height: 1px;
           font-size: 1px;
           }
#layer1 {
          width: 100%;
          height: 100%;
          overflow: auto;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 50;
          background: transparent;
          }


#layer2 {
          width: 100%;
          height: 100%;
          overflow: auto;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 60;
          background: transparent;
          }

#layer2 div#slider {
                     font-size: 13px;
                     display: block;
                     /*                      width: 100%; */
                     background: transparent;/*  url(bg2.png) 0 0 repeat; */
                     height: 100%;
                     }

#layer2 .navigation {
                      background: transparent url(bg2.png) 0 0 repeat;
                      height: 130px;
                      width: 100%;
                      overflow: hidden;
                      }
#layer2 .navigation ul {
                         display: block;
                         width: 600px;
                         height: 100px;
                         margin: 0 auto;
                         list-style: none;
                         margin-top: 20px;
                         }
#layer2 .navigation ul li {
                            display: block;
                            /* width: 225px; */
                            width: 150px;
                            height: 100px;
                            float: left;
                            text-align: center;
                            }

#layer2 .navigation ul li a {
                              display: block;
                              width: 150px;
                              height: 100px;
                              line-height: 165px;
                              color: #ffffff;
                              text-decoration: none;
                              font-size: 18px;
                              font-weight: normal;
                              text-transform: uppercase;
                              overflow: hidden;
                              background: transparent url(11.png) 0 0 no-repeat;
                              color: #ffffff;
                              font-family: "Trebuchet Ms", Arial, "Liberation Sans", Verdana, sans-serif;
                              letter-spacing: 2px;
                              }
#layer2 .navigation ul li a:hover {
                                    line-height: 172px;
                                    }
#layer2 .navigation ul li.item-1 a {background-image: url(11.png) }
#layer2 .navigation ul li.item-2 a {background-image: url(12.png) }
#layer2 .navigation ul li.item-3 a {background-image: url(13.png) }
#layer2 .navigation ul li.item-4 a {background-image: url(14.png) }

#layer2 .navigation ul li.item-1 a:hover {background-image: url(21.png) }
#layer2 .navigation ul li.item-2 a:hover {background-image: url(22.png) }
#layer2 .navigation ul li.item-3 a:hover {background-image: url(23.png) }
#layer2 .navigation ul li.item-4 a:hover {background-image: url(24.png) }

#layer2 div#slider #home {
                           overflow: hidden;
                           height: 100%;
                           width: 100%;
                           position: relative;
                           margin-bottom: 50%;
                           }
#layer2 div#slider #home .navigation {
                                       position: absolute;
                                       top: 70%;
                                       left: 0;
                                       }

#layer2 div#slider #home h1 {
                              position: absolute;
                              top: 50%;
                              left: 50%;
                              width: 460px;
                              height: 114px;
                              background: transparent url(h1.png) 0 0 no-repeat;
                              margin-top: -57px;
                              margin-left: -222px;
                              overflow: hidden;
                              text-indent: 3000px;
                              }

#layer2 div#slider #home p.webface a {
                                       display: block;
                                       position: absolute;
                                       top: 10px;
                                       right: 10px;
                                       width: 70px;
                                       height: 22px;
                                       background: transparent url(webface1.png) 0 0 no-repeat;
                                       overflow: hidden;
                                       text-indent: -3000px;
                                       }
#layer2 div#slider #home p.webface a:hover {
                                             background-image: url(webface2.png);
                                             }
#layer2 div#slider #home p.facebook a {
                                        display: block;
                                        position: absolute;
                                        bottom: 10px;
                                        left: 10px;
                                        width: 25px;
                                        height: 25px;
                                        background: transparent url(f1.png) 0 0 no-repeat;
                                        overflow: hidden;
                                        text-indent: -3000px;
                                        }
#layer2 div#slider #home p.facebook a:hover {
                                             background-image: url(f2.png);
                                             }
#layer2 div#slider #home p.myspace a {
                                       display: block;
                                       position: absolute;
                                       overflow: hidden;
                                       text-indent: -3000px;
                                       bottom: 10px;
                                       left: 45px;
                                       width: 25px;
                                       height: 25px;
                                       background: transparent url(m1.png) 0 0 no-repeat;
                                       }
#layer2 div#slider #home p.myspace a:hover {
                                             background-image: url(m2.png);
                                             }
#layer2  div#slider #downloads,
#layer2  div#slider #contacts,
#layer2  div#slider #bio {
                           min-height: 100%;
                           width: 100%;
                           position: relative;
                           padding-top: 3%;
                           margin-bottom: 10%;
                           }

/* min-height for Internet Explorer */

* html #layer2  div#slider #downloads,
* html #layer2  div#slider #contacts,
* html #layer2  div#slider #bio {
                                  height: 100%;
                                  }


#layer2  div#slider div.usertext {
                                   font-size: 16px;
                                   width: 900px;
                                   margin: 0 auto;
                                   }

#layer2 .usertext {
                    padding: 20px 0;
                    }
#layer2  .usertext p {
                       line-height: 1.5em;
                       margin: 1em 0;
                       text-indent: 1.5em;
                       font-weight: normal;
                       }
#layer2  .usertext h2 {
                        font-size: 26px;
                        font-style: italic;
                        font-weight: normal;
                        line-height: 1.5em;
                        margin: 0.5em 0;
                        text-indent: 1em;
                        }
#layer2  .usertext h3 {
                        font-size: 16px;
                        font-weight: bold;
                        text-transform: uppercase;
                        line-height: 1.5em;
                        margin: 0.5em 0;
                        text-indent: 40px;
                        background: transparent url(bg2.png) 0 0 repeat;
                        letter-spacing: 2px;
                        font-family: "Trebuchet Ms", Arial, "Liberation Sans", sans-serif;
                        }
#layer2  .usertext a {
                       color: #ffffff;
                       font-family: "Trebuchet Ms", Arial, "Liberation Sans", sans-serif;
                       text-decoration: none;
                       border-bottom: 1px dotted #ffffff;
                       }
#layer2  .usertext a:hover {
                             border: none;
                             background: #ffffff;
                             color: #555555;
                             }
#layer2  .usertext ul {
                        list-style: disc;
                        margin: 1em 0 1em 40px;
                        line-height: 1.5em;
                        }
#layer2  .usertext ol {
                        list-style: decimal;
                        margin: 1em 0 1em 40px;
                        line-height: 1.5em;
                        }
#layer2  .usertext ol li,
#layer2  .usertext ul li{
                        margin: 1em 0;
                        }
#layer2  .usertext blockquote {
                                line-height: 1.5em;
                                font-style: italic;
                                text-indent: 2em;
                                }
#layer2 .usertext p.top {
                          display: block;
                          width: 100%;
                          height: 20px;
                          margin-top: 30px;
                          }
#layer2 .usertext p.top a {
                            display: block;
                            width: 20px;
                            height: 20px;
                            float: right;
                            background: transparent url(top1.png) 0 0 no-repeat;
                            overflow: hidden;
                            text-indent: -3000px;
                            border: none;
                            }
#layer2 .usertext p.top a:hover {
                                  background: transparent url(top2.png) 0 0 no-repeat;
                                  }


/* FORM */

fieldset {
           width: 400px;
           margin: 0 auto;
           padding: 0;
           }
#layer2  .usertext fieldset p {
                                clear: both;
                                text-indent: 0;
                                margin: 0 0 4px 0;
                                float: left;
                                width: 100%;
                                }

fieldset p  input.text,
fieldset p  textarea{
                      display: block;
                      width: 400px;
                      height: 25px;
                      float: left;
                      text-indent: 0;
                      background: transparent url(bg2.png) 0 0 repeat;
                      border: 2px solid #cccccc;
                      color: #ffffff;
                      font-size: 18px;
                      }
fieldset p  label {
                    display: block;
                    width: 100%;
                    float: left;
                    clear: both;
                    text-indent: 0;
                    text-align: left;
                    font-size: 16px;
                    line-height: 28px;
                    margin: 2px 10px 2px 0;
                    font-weight: bold;
                    }
fieldset p  textarea {
                       height: 160px;
                       margin-top: 15px;
                       }

fieldset p  input.submit {
                           display: block;
                           margin: 12px 0;
                           clear: both;
                           color: #ffffff;
                           border: 2px solid #cccccc;
                           background: transparent url(bg2.png) 0 0 repeat;
                           width: 106px;
                           height: 25px;
                           font-size: 14px;
                           font-weight: bold;
                           cursor: pointer;
                           }
/* END form */

div.tip {
          font-family: "Arial", "Liberation Sans", sans-serif;
          font-size: 12px;
          }
div.tip div.tip-title {
                        border: 1px solid #bbbbbb;
                        background: transparent url(bg2.png) 0 0 repeat;
                        padding: 7px;
                        }
div.tip div.tip-text { display: none; }