/** BEGIN : RESET **/
*
{
  background            : transparent;
  border                : 0;
  content               : none;
  font-family           : inherit;
  font-size             : 1em;
  margin                : 0;
  padding               : 0;
  quotes                : none;
  text-decoration       : none;
}
:before,:after
{ content               : none; }
:focus
{ outline               : none; }
/** END : RESET **/


/** BEGIN : COMMONS ****************************/

/** BEGIN : BLOCKS **/
h1,h2,h3,h4
{
  color           : #5e5c59;
  letter-spacing  : .1em;
  margin-bottom   : .7em;
}
h1
{
  color           : #b12;
  font-size       : 3em;
  line-height     : 1em;
}
h2
{
  font-size       : 2em;
  letter-spacing  : .2em;
  text-transform  : uppercase;
}
h3
{ font-size       : 1.5em; }
h3.important
{ font-size       : 2em;   }
p+h3, ul+h3
{ margin-top      : .7em;  }
p+h4, ul+h4
{ margin-top      : 1em;   }

p
{ margin-bottom   : .5em;  }
/** END : BLOCKS **/

/** BEGIN : LINKS **/
a,
a:link
{ color : #000; }
a:visited
{ color : #888; }
a:focus,
a:hover,
a:active
{ color : #800; }
a .imgwrapper,
a:link .imgwrapper,
a:visited .imgwrapper,
a:focus .imgwrapper,
a:hover .imgwrapper,
a:active .imgwrapper
{ color : #000; }
/** END : LINKS **/


/** BEGIN : FORMS **/
/*.ico-name
{ background-position: 0 0;      }*/
.ico-email
{ background-position : 0 -20px; }
.ico-website
{ background-position : 0 -40px; }
.ico-msg
{ background-position : 0 -60px; }

label
{
  background          : url(../../img/design/form-label-bg.png);
  clear               : both;
  color               : #e0d6d1;
  display             : block;
  font-size           : 2em;
  font-weight         : 700;
  line-height         : 1em;
  padding             : 0 .5em 0 0;
  position            : relative;
  text-align          : right;
}
label * /*short for: "label span"*/
{
  background-image    : url(../../img/design/form-icons.png);
  display             : block; /*todo: remove me*/
  float               : left;
  height              : 20px;
  width               : 20px;
}
input.text, textarea
{
  display             : block;
  float               : right;
  height              : 1.8em;
  margin              : -2.01em 0 .2em 0;
  padding-top         : .2em;
  position            : relative;
  width               : 92.5%;
}
.textarea /* short for: "label.textarea" */
{ padding-bottom      : 3em;  } /*= height 4em, fuck ie7 bugs !*/
textarea
{
  height              : 8em;
  margin-top          : -8.01em;
  overflow            : auto;
  padding-top         : 0;
}
.frm-button
{
  border              : 1px solid #c0c0c0;
  display             : block;
  margin-top          : 5px;
}
.frm-button:hover, a:hover .frm-button
{ border-color        : #b88; }
/** END : FORMS **/

/** BEGIN : CLASSES **/
.clear
{ clear         : both;           }
.clear-o
{ overflow      : hidden          }
.left
{ float         : left;           }
.right
{ float         : right;          }
.border-r
{ border-right  : 1px solid #800; }
.w-30
{ width         : 25%;            }
.w-60
{ width         : 55%;            }
.w-70
{ width         : 65%;            }
.w-80
{ width         : 75%;            }
.row
{
  width         : 30%;
  margin-right  : 2.5%;
}
.msg
{ margin-bottom : 1em;            }
.clickable
{ cursor        : pointer;        }
/** END : CLASSES **/

/** END : COMMONS ******************************/


/** BEGIN : GENERAL ****************************/
body
{
  background            : #333 url(../../img/design/bg.png) repeat-x;
  color                 : #000;
  font                  : 100.01%/125% Calibri, "Trebuchet MS", sans-serif;
  text-align            : center;
}
#header, #main
{
  background            : #faf6f5 url(../../img/design/main-bg.png);
  clear                 : both;
  margin                : 0 auto;
  text-align            : left;
  width                 : 960px;
}
#header
{
  background            : #ccb url(../../img/design/header-bg.png);
  height                : 150px;
  overflow              : hidden;
}
#content, #menu, #footer
{
  border                : 1px solid #fff;
  clear                 : both;
  padding               : 0 40px;
}
#content
{
  font-size             : 80%;
  border-width          : 0 1px;
  overflow              : hidden; /*FIXME : WTF ?*/
}
#menu
{
  background            : #ccb url(../../img/design/menu-bg.png);
  border-color          : #b12 #fff;
  height                : 95px;
  padding-top           : 13px;
  text-align            : center;
}
#footer
{
  background-image      : url(../../img/design/footer-bg.png);
  background-repeat     : repeat-x;
  border-width          : 1px 0;
  color                 : #aeaca9;
  height                : 20px; /* 70px - (this-padding-v) */
  padding               : 25px 40px;
}
/** END : GENERAL ******************************/


/** BEGIN : HEADER *****************************/
#header img
{
  position              : relative;
  z-index               : 2;
}
#header-menu
{
  font-size             : 64%;
  font-weight           : 700;
  position              : absolute;
  text-align            : right;
  text-transform        : uppercase;
  top                   : 85px;
  width                 : 950px;
  word-spacing          : .25em;
}
/** END : HEADER *****************************/


/** BEGIN : MENU ****************************/
#menu .wrapper
{
  width                 : 350px;
  margin                : auto;
}
#menu img
{ padding               : 0 4px;     }
/** END : MENU *****************************/


/** BEGIN : CONTENT *************************/
#content .area, #content .menu
{ margin-bottom         : 5%; }
#content .imgwrapper
{
  height                : 184px;
  width                 : 186px;
  padding               : 13px 0 0 13px;
  margin-right          : 25px;
  background-image      : url(../../img/design/content-img-bg.png);
}
#content .imgwrapper.last
{ margin-right          : 0; }
#content .imgwrapper img
{ display               : block; }
#content .imgwrapper .desc
{
  background            : #fff;
  display               : none;
  height                : 83px;
  margin                : -84px 0 0 1px;
  overflow              : hidden;
  position              : relative;
  width                 : 164px;
}
#content .imgwrapper .desc p
{
  margin                : .5em;
}
#content .imgwrapper-s
{
  height                : 102px;
  width                 : 186px;
  padding               : 13px 0 0 13px;
  margin-right          : 25px;
  background-image      : url(../../img/design/content-img-bg-small.png);
}
#content .imgwrapper-s.txt *
{
  display               : block;
  width                 : 164px;
  text-align            : center;
}
#content .imgwrapper-s .inner
{
  background            : transparent url(../../img/design/content-img-bg-overlay-colors.png) no-repeat 0 0;
  color                 : #5e5c59;
  height                : 82px;
  border                : 1px solid #bababc;
  line-height           : 1em;
  margin-bottom         : -23px;
  font-size             : 4.5em;
}
#content .imgwrapper-s .inner.c2
{ background-position   : 0 -82px; }
#content .imgwrapper-s .inner.c3
{ background-position   : 0 -164px; }
#content .menu
{
  min-height            : 15em;
  width                 : 20%;
}
#content .area.border-r
{ padding-right         : 2.5%; }
#content .icons
{
  color                 : #800;
  height                : 2em;
  margin                : 3em 0 .5em 0;
  text-align            : right;
}
#content li
{
  list-style-type       : none;
  background            : url(../../img/design/content-list-arrow.gif) no-repeat 0 center;
  padding-left          : 15px;
}
#content a,
#content a:link
{ color                 : #800;      }
#content a:visited
{ color                 : #888;      }
#content a:focus,
#content a:hover,
#content a:active, #content a.active
{ color                 : #b9121d;   }
/** END : CONTENT ***************************/
