/* ~~~~~~~~~~~~~~~~~~~~~ DEFAULT ~~~~~~~~~~~~~~~~~~~~~ */

*
{
  margin: 0px;
  font-family: 'tahoma', 'verdana', 'arial', 'sans-serif';
}

html
{
  font-size: 62.5%;
}

img
{
  border: none;
}

ul
{
  padding: 0px;
}

ul li
{
  list-style-type: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~ CLEARFIX ~~~~~~~~~~~~~~~~~~~~~ */

* html .clearfix
{
  height: 1%;
}

html[xmlns] .clearfix
{
  display: block;
}

.clearfix:after
{
  height: 0px;
  display: block;
  clear: both;
  content: '.';
  visibility: hidden;
  line-height: 0px;
}

.clearfix
{
  display: inline-block;
}

/* ~~~~~~~~~~~~~~~~~~~~~ FORM ELEMENTS ~~~~~~~~~~~~~~~~~~~~~ */

input.text
{
  padding: 6px 4px 5px 4px;
  border: 3px solid #DAAF00;
  color: black;
  font: 0.9em/1.6em 'tahoma';
  background: #E1E0E0 url('./../images/layout/bg3.jpg') left top repeat-x;
}

textarea.textarea
{
  padding: 6px 4px 5px 4px;
  border: 3px solid #DAAF00;
  color: black;
  font: 0.9em/1.4em 'tahoma';
  background: white url('./../images/layout/bg4.jpg') left bottom repeat-x;
}

/* ~~~~~~~~~~~~~~~~~~~~~ MAIN CONTAINERS ~~~~~~~~~~~~~~~~~~~~~ */

body
{
  font-size: 1.2em;
  background: black url('./../images/layout/bg.jpg') center -3px repeat-x;
  color: white;
}

/* ~~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~~ */

#header
{
  width: 780px;
  margin: 33px auto 0px auto;
}

#logo
{
  margin: 0px 0px 0px 34px;
}

#header .tel
{
  margin: 1px 0px 0px 38px;
}

#header ul
{
  float: right;
  margin: -15px 0px 0px 0px;
  padding: 0px 36px 0px 0px;
}

#header ul li
{
  float: left;
  text-indent: -3000px;
  font-size: 1em;
  overflow: hidden;
}

#header ul li a
{
  display: block;
  height: 35px;
  background-image: url('./../images/layout/menu.jpg');
  background-repeat: no-repeat;
}

#header ul li.first a
{width: 72px;background-position: 0px -35px;}

#header ul li.second  a
{width: 72px;background-position: -72px -35px;}

#header ul li.third a
{width: 72px;background-position: -144px -35px;}

#header ul li.fourth a
{width: 96px;background-position: -216px -35px;}

#header ul li.fifth a
{width: 74px;background-position: -312px -35px;}

#header ul li.first a:hover 
{background-position: 0px -70px;}

#header ul li.second  a:hover
{background-position: -72px -70px;}

#header ul li.third a:hover
{background-position: -144px -70px;}

#header ul li.fourth a:hover
{background-position: -216px -70px;}

#header ul li.fifth a:hover
{background-position: -312px -70px;}

#header ul li.first .active
{background-position: 0px 0px !important;}

#header ul li.second .active
{background-position: -72px 0px !important;}

#header ul li.third .active
{background-position: -144px 0px !important;}

#header ul li.fourth .active
{background-position: -216px 0px !important;}

#header ul li.fifth .active
{background-position: -312px 0px !important;}

/* ~~~~~~~~~~~~~~~~~~~~~ CONTENT ~~~~~~~~~~~~~~~~~~~~~ */

#content
{
  position: relative;
  width: 780px;
  height: 520px;
  margin: 0px auto;
  border-top: 5px solid #DAAF00;
  border-bottom: 5px solid #DAAF00;
}

#content .box
{
  background: url('./../images/layout/bg2.png');
}

/* ~~~~~~~~~~~~~~~~~~~~~ ABOUT US ~~~~~~~~~~~~~~~~~~~~~ */

#content.about_us
{
  background: url('./../images/photos/1.jpg') left top no-repeat;
}

#content.about_us .info
{
  position: absolute;
  left: 30px;
  bottom: 0px;
  width: 336px;
  padding: 15px 23px 23px 23px;
}

#content.about_us .info h1
{
  margin: 0px 0px 18px 0px;
  padding: 0px 0px 16px 0px;
  background: url('./../images/icons/dot.gif') left bottom repeat-x;
  text-indent: -3000px;
  overflow: hidden;
  font: 0.9em/1.4em 'arial';
}

#content.about_us .info h1 span
{
  display: block;
  height: 21px;
  background: url('./../images/titles/about-us.gif') left top no-repeat;
}

#content.about_us .info p
{
  margin: 0px 0px 20px 0px;
  font: 0.9em/1.6em 'arial';
}

#content.about_us .info h2
{
  float: left;
  width: 103px;
  font: normal 0.9em/1.6em 'arial';
}

#content.about_us .info ul
{
  float: left;
}

#content.about_us .info ul li
{
  padding: 1px 0px 1px 21px;
  font: 0.9em/1.6em 'arial';
  background: url('./../images/icons/ok.jpg') left center no-repeat;
}

#content.about_us h3
{
  position: absolute;
  right: 10px;
  bottom: 6px;
}

#content.about_us h3 a
{
  padding: 12px 30px 11px 38px;
  color: white;
  text-decoration: none;
  font: bold 12px/3.8em 'arial';
  background: black url('./../images/icons/arrow.gif') 23px center no-repeat;
}

#content.about_us h3 a:hover
{
  text-decoration: underline;
}

/* ~~~~~~~~~~~~~~~~~~~~~ SERVICES ~~~~~~~~~~~~~~~~~~~~~ */

.services
{
  background: url('./../images/photos/2.jpg') left top no-repeat;
}

#content.services .box
{
  position: absolute;
  width: 419px;
  right: 29px;
  bottom: 0px;
  padding: 20px 21px 8px 21px;
}

#content.services h1
{
  margin: 0px 0px 18px 0px;
  padding: 0px 0px 16px 0px;
  background: url('./../images/icons/dot.gif') left bottom repeat-x;
  text-indent: -3000px;
  overflow: hidden;
  font: 0.9em/1.4em 'arial';
}

#content.services h1 span
{
  display: block;
  height: 26px;
  background: url('./../images/titles/services.gif') left top no-repeat;
}

#content.services .box .text
{
  margin: 0px 0px 20px 0px;
  font: 0.9em/1.6em 'arial';
}

#content.services .box ul li
{
  padding: 1px 0px 2px 22px;
  font: 0.9em/1.6em 'arial';
  background: url('./../images/icons/ok.jpg') left center no-repeat;
}

#content.services .box .images
{
  font-size: 0;
  line-height: 0;
}

#content.services .box .images a
{
  float: left;
  margin: 12px 4px 0px 0px;
  border: 3px solid black;
}

#content.services .box .images .no_margin
{
  margin: 12px 0px 0px 0px;
}

#content.services .box .images a:hover
{
  border: 3px solid #DAAF00;
}

#content.services .box .note
{
  padding: 5px 0px 0px 24px;
  text-transform: uppercase;
  color: #CCA301;
  font: 0.9em/1.6em 'arial';
  background: url('./../images/icons/image.gif') 1px 7px no-repeat;
}

/* ~~~~~~~~~~~~~~~~~~~~~ PRICES ~~~~~~~~~~~~~~~~~~~~~ */

.prices
{
  background: url('./../images/photos/3.jpg') left top no-repeat;
}

#content.prices .box
{
  position: absolute;
  width: 671px;
  right: 29px;
  bottom: 0px;
  padding: 20px 26px 16px 24px;
}

#content.prices h1
{
  margin: 0px 0px 18px 0px;
  padding: 0px 0px 16px 0px;
  background: url('./../images/icons/dot.gif') left bottom repeat-x;
  text-indent: -3000px;
  overflow: hidden;
  font: 0.9em/1.4em 'arial';
}

#content.prices h1 span
{
  display: block;
  height: 26px;
  background: url('./../images/titles/prices.gif') left top no-repeat;
}

#content.prices .line
{
  display: block;
  height: 1px;
  width: 100%;
  margin: 14px 0px;
  font-size: 0;
  line-height: 0;
  background: url('./../images/icons/dot.gif') left top repeat-x;
}

#content.prices h2
{
  float: left;
  width: 250px;
  font: bold 0.9em/1.6em 'arial';
}

#content.prices .clearfix div
{
  float: left;
  width: 410px;
}

#content.prices h3
{
  margin: 0px 0px 2px 0px;
  font: normal 0.9em/1.6em 'arial';
}

#content.prices ul li
{
  padding: 1px 0px 2px 21px;
  font: 0.9em/1.6em 'arial';
  background: url('./../images/icons/ok.jpg') left center no-repeat;
}

#content.prices .text
{
  font: bold 0.9em/1.6em 'arial';
}

#content.prices .text2
{
  font: bold 0.9em/1.8em 'arial';
  text-transform: uppercase;
  color: #CCA301;
}

/* ~~~~~~~~~~~~~~~~~~~~~ REFERENCES ~~~~~~~~~~~~~~~~~~~~~ */

.references
{
  background: url('./../images/photos/4.jpg') left top no-repeat;
}

#content.references .box
{
  position: absolute;
  width: 671px;
  right: 29px;
  bottom: 0px;
  padding: 20px 26px 16px 24px;
}

#content.references h1
{
  margin: 0px 0px 18px 0px;
  padding: 0px 0px 16px 0px;
  background: url('./../images/icons/dot.gif') left bottom repeat-x;
  text-indent: -3000px;
  overflow: hidden;
  font: 0.9em/1.4em 'arial';
}

#content.references h1 span
{
  display: block;
  height: 26px;
  background: url('./../images/titles/references.gif') left top no-repeat;
}

#content.references .line
{
  display: block;
  height: 1px;
  width: 100%;
  margin: 14px 0px;
  font-size: 0;
  line-height: 0;
  background: url('./../images/icons/dot.gif') left top repeat-x;
}

#content.references h2
{
  float: left;
  width: 250px;
  font: bold 0.9em/1.6em 'arial';
}

#content.references .clearfix div
{
  float: left;

}

#content.references h3
{
  margin: 0px 0px 2px 0px;
  font: normal 0.9em/1.6em 'arial';
}

#content.references ul li
{
  padding: 1px 0px 2px 21px;
  font: 0.9em/1.6em 'arial';
  background: url('./../images/icons/ok.jpg') left center no-repeat;
}

#content.references .text
{
  font: bold 0.9em/1.6em 'arial';
}

#content.references .text2
{
  font: bold 0.9em/1.8em 'arial';
  text-transform: uppercase;
  color: #CCA301;
}

/* ~~~~~~~~~~~~~~~~~~~~~ CONTACT ~~~~~~~~~~~~~~~~~~~~~ */

.contact
{
  background: url('./../images/photos/5.jpg') left top no-repeat;
}

#content.contact .box
{
  position: absolute;
  width: 671px;
  right: 29px;
  bottom: 0px;
  padding: 20px 26px 16px 24px;
}

#content.contact h1
{
  margin: 0px 0px 12px 0px;
  padding: 0px 0px 16px 0px;
  background: url('./../images/icons/dot.gif') left bottom repeat-x;
  text-indent: -3000px;
  overflow: hidden;
  font: 0.9em/1.4em 'arial';
}

#content.contact h1 span
{
  display: block;
  height: 26px;
  background: url('./../images/titles/contact.gif') left top no-repeat;
}

#content.contact .info
{
  float: left;
  width: 415px;
}

#content.contact .form
{
  float: right;
  width: 222px;
  padding: 0px 0px 0px 23px;
  background: url('./../images/icons/dot.gif') left top repeat-y;
}

#content.contact .form h2
{
  height: 18px;
  margin: -2px 0px 7px 0px;
  padding: 0px 0px 14px 0px;
  background: url('./../images/titles/quick-form.gif') left top no-repeat;
  text-indent: -3000px;
  overflow: hidden;
}

#content.contact .form p
{
  margin: 0px 0px 21px 0px;
}

#content.contact .form label
{
  display: block;
  margin: 0px 0px 4px 0px;
  font: 0.9em/1.5em 'arial';
}

#content.contact .form .text, #content.contact .form .textarea
{
  width: 197px;
}

#content.contact .form .textarea
{
  height: 133px;
}

#content.contact .no_margin
{
  margin-bottom: 0px !important;
}

#content.contact .info .first
{
  float: left;
  width: 197px;
}

#content.contact .info .second
{
  float: right;
  width: 200px;
}

#content.contact .info .first, #content .info .second
{
  font: 0.9em/2em 'arial';
}

#content.contact .map
{
  position: absolute;
  left: 24px;
  bottom: 16px;
}

#content.contact .map img
{
  border: 5px solid #DAAF00;
}

/* ~~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~ */

#footer
{
  width: 780px;
  margin: 0px auto;
  padding: 0px 0px 25px 0px;
}

#footer h4
{
  float: left;
  padding: 22px 0px 0px 26px;
}

#author
{
  float: right;
  padding: 23px 30px 0px 0px;
  font: 0.8em/0.8em 'tahoma';
  text-indent: -600px;
  overflow: hidden;
}

#author a
{
  display: block;
  width: 79px;
  height: 15px;
  background: url('./../images/layout/author.jpg') left top no-repeat;
}

#author a:hover
{
  background-position: -79px 0px;
}