/* ------------------------------------ *
 CSS
 * ------------------------------------ */
 
body {
   margin: 0px;
   padding: 0px;
   font-family: verdana, tahoma;
   background: #c0c0c0 url(background.png) top left repeat-x;
}
img {
   border: none;
}

ul {
   margin: 0px;
   padding: 0px;
}
ul#about_list {
   color: #490006;
   width: 600px;
}
ul#about_list li {
   list-style: none;
   height: 85px;
   font-size: 12px;
   text-align: justify;
   padding-left: 20px;
}
ul#about_list strong {
   color: #7a000b;
   background: #c0c0c0;
   padding-left: 100px;
   padding-right: 20px;
   position: relative;
   left: -40px;
   font-size: 14px;
}
#about_services_bracket {
   position: absolute;
   width: 55px;
   height: 773px;
   background: url(about_services_bracket.jpg);
   left: 620px;
   top: -15px;
}
#about_services_title {
   position: absolute;
   font-size: 22px;
   font-weight: bold;
   width: 300px;
   height: 100px;
   color: #490006;
   left: 700px;
   top: 357px;
}

ul#portfolio_list {
   color: #490006;
   width: 100%;
}
ul#portfolio_list li {
   list-style: none;
   font-size: 12px;
   text-align: justify;
   padding-left: 20px;
   display: block;
   float: left;
}
ul#portfolio_list strong {
   color: #7a000b;
   background: #c0c0c0;
   padding-left: 100px;
   padding-right: 20px;
   position: relative;
   left: -40px;
   font-size: 14px;
}
ul#portfolio_list img {
   margin-right: 10px;
   margin-left: 40px;
}
.images {
   display: block;
   float: right;
   padding-left: 30px;
   padding-right: 10px;
   width: 350px;
}

#contact_tagline {
   position: absolute;
   font-size: 22px;
   font-weight: bold;
   width: 500px;
   height: 100px;
   color: #fff;
   left: 540px;
   top: -385px;
}
#contact_phone {
   font-size: 30px;
}
#contact_email {
   position: absolute;
   font-size: 22px;
   font-weight: bold;
   width: 300px;
   height: 100px;
   color: #fff;
   left: 540px;
   top: -265px;
}
#contact_form {
   position: absolute;
   font-size: 14px;
   font-weight: bold;
   width: 300px;
   height: 100px;
   color: #fff;
   left: 40px;
   top: -420px;
}
#contact_form input {
   width: 400px;
   background: none;
   border-style: none;
   border-bottom: 1px solid #8198f1;
   font-family: verdana, tahoma;
   font-size: 14px;
   font-weight: normal;
   color: #fff;
   margin: 0px;
   padding: 0px;
}
#contact_form textarea {
   width: 400px;
   height: 240px;
   background: url(contact_message_lines.png);
   border-style: none;
   font-family: verdana, tahoma;
   font-size: 14px;
   color: #fff;
   line-height: 20px;
   margin: 0px;
   padding: 0px;
}
#contact_form input.button_send {
   width: 75px;
   height: 21px;
   background: url(button_send.png);
   border: none;
   font-weight: bold;
   text-align: left;
}
#contact_form input.button_send:focus {
   background: url(button_send_focus.png);
}
#contact_form input.button_send:hover {
   background: url(button_send_focus.png);
   cursor: pointer;
}

#page {
   width: 1023px;
   margin-right: auto;
   margin-left: auto;
   position: relative;
   background: #fff;
}

a.header_links {
   text-indent: -9999px;
   display: block;
   overflow: hidden;
   position: absolute;
   top: 25px;
   height: 100px;
}

a#link_about {
   left: 33px;
   width: 111px;
   background: url(about.png) top left no-repeat;
}
a#link_portfolio {
   left: 138px;
   width: 139px;
   background: url(portfolio.png) top left no-repeat;
}
a#link_contact {
   left: 270px;
   width: 120px;
   background: url(contact.png) top left no-repeat;
}

a#link_about.open,
a#link_portfolio.open,
a#link_contact.open {
   background-position: bottom left;
}

a:hover#link_about,
a:hover#link_portfolio,
a:hover#link_contact {
   background-position: bottom left;
}

#header {
   width: 100%;
   height: 512px;
   position: absolute;
   top: 125px;
}
#top_design_element {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 175px;
   height: 143px;
}
.line1 {
   position: absolute;
   width: 100%;
   font-weight: bold;
   font-size: 19px;
   color: #fff;
   top: 140px;
   left: 10px;
}
.line2 {
   position: absolute;
   width: 100%;
   font-size: 18px;
   color: #fff;
   top: 160px;
   left: 10px;
}
#arrow_down {
   width: 46px;
   height: 46px;
   position: absolute;
   left: 480px;
   top: 200px;
   background: url(arrow_down.png) top left no-repeat;
}
#arrow_left {
   width: 46px;
   height: 46px;
   position: absolute;
   left: 480px;
   top: 200px;
   background: url(arrow_left.png) top left no-repeat;
}

#logo {
   width: 367px;
   height: 49px;
   position: absolute;
   left: 615px;
   top: 32px;
   background: url(title.png) top left no-repeat;
}
#availability_on {
   width: 408px;
   height: 73px;
   position: absolute;
   left: 0px;
   top: 570px;
   background: url(available.jpg);
}
#availability_off {
   width: 408px;
   height: 73px;
   position: absolute;
   left: 0px;
   top: 570px;
   background: url(not_available.jpg);
}

body#about_on a#link_about {
   background: url(about.png) center left no-repeat;
   cursor: default;
}
body#about_on #header {
   background: url(background_about.jpg) top left no-repeat;
}
body#about_on #page {
   height: 1380px;
}

body#portfolio_on a#link_portfolio {
   background: url(portfolio.png) center left no-repeat;
   cursor: default;
}
body#portfolio_on #header {
   background: url(background_portfolio.jpg) top left no-repeat;
}
body#portfolio_on #top_design_element {
   background: url(top_element_portfolio.jpg) top left no-repeat;
}
body#portfolio_on #page {
   height: 2650px;
}

body#contact_on a#link_contact {
   background: url(contact.png) center left no-repeat;
   cursor: default;
}
body#contact_on #header {
   background: url(background_contact.jpg) top left no-repeat;
}
body#contact_on #page {
   height: 700px;
}

#content {
   position: absolute;
   left: 0px;
   top: 600px;
}