/*
 * font-sizes:
 * 16px 100,0%
 * 14px  87,5%
 * 12px  75,0%
 * 10px  62,5%
 */

@coloringColor    : #B00;
@contentBackColor : #FFF;

.boxShadow( @x : 4px, @y : 4px, @blur : 4px, @alpha : 0.5 ) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);

  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}

.borderRadius( @tl : 8px, @tr : 8px, @br : 8px, @bl : 8px ) {
   @val : @tl @tr @br @bl;
   
   border-radius:         @val;
   -webkit-border-radius: @val;
   -moz-border-radius:    @val;
}

html {
   background: url(../img/titaniumTextureBg.jpg) no-repeat center center fixed;
   background-color:#444;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

body {
   font-family      : verdana, sans-serif;
   margin           : 0;
   padding          : 0 0 30px 0;
   color            : black;
   width            : 100%;
}

p {
   margin : 0 0 20px;
}

p:last-child { 
   margin-bottom : 0;
}

.clear {
   clear       : both;
   margin      : 0;
   padding     : 0;
   line-height : 0;
}

/* --- UPPER AREA ----------------------------------------------------------------------------------------- */

.outerContainer1st {
   border-top       :  3px solid transparent;
   border-bottom    : 30px solid transparent;

   color            : @contentBackColor;
}

.middleContainer1st {
   margin : auto;
   width  : 888px;
}

.innerContainer1st {
    padding : 0;
    text-align:right;
}

.slogan {
   line-height  : 185%;
   margin-top   : 30px;
   margin-bottom:30px;
   margin-right :  4px;
}

.slogan div:nth-child(2) {
   font-size   : 23px;
   text-shadow : 0 0 4px @contentBackColor;
}

/* --- LOWER AREA ----------------------------------------------------------------------------------------- */

.middleContainer2nd {
   .borderRadius( 15px, 15px, 15px, 15px );
   .boxShadow(     0px,  0px, 15px, 0.85 );
   
   margin           : auto;
   width            : 920px;
   background-color : rgba(0, 0, 0, 0.5);
   margin-top       : -25px;
}

.items {
   line-height:130%;
   padding:20px;
}

.item {
   .borderRadius( 5px, 5px, 5px, 5px);
   .boxShadow(    4px, 4px, 4px     );
   
   cursor          : pointer;
   height          : 215px;
   display         : inline-block;
   margin-left     : 20px;
   padding         : 15px;
   background      : @coloringColor;
   text-decoration : none;
   color           : @contentBackColor;
   width           : 190px;
}

.item h1, .item h2 {
   display : block;
}

.item h1, .item h2 {
   font-weight:normal;
}

.item:first-child {
   margin-left : 0;
}

.item:hover span:first-child, .item:hover h1  {
   text-shadow : 0 0 3px @contentBackColor;
}

.item span:first-child, .item h1 {
   font-size : 140%; margin:0;
}

.item span:last-child, .item h2 {
   font-size  : 80%;
   margin:0;
   margin-top : 10px;
   color : black;
}

.item .iconContainer {
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 5px 5px 5px 5px;
    height: 130px;
    margin-top: 13px;
}

/*
.main-contact-link {
   text-decoration     : none;
   float               : right;
   width               : 133px;
   height              : 120px;
   background-repeat   : no-repeat;
   background-position : bottom;
   background-image    : url( '../img/contact.jpg' );
   border              : none;
   color               : lightgrey;
   display             : block;
   margin-left         : 27px;
   padding-top         : 35px;
   padding-left        : 22px;
}

.main-contact-link:hover {
   color:black;
}
*/
.footer {
   margin        : auto;
   width         : 920px;
   padding-right : 25px; 
   text-align    : right;
   color         : white; 
   margin-top    : 20px;
   font-size     : 62.5%;
}

.footer a {
   color           : white;
   text-decoration : none;
}

#subMessageBox {
   .borderRadius( 7px, 7px,  7px, 7px  );
   .boxShadow(    0px, 0px, 15px, 0.85 );
   margin           : auto;
   width            : 880px;
   padding          : 20px; 
   color            : #bbb; 
   margin-top       : 20px;
   background-color : rgba(0,0,0,0.55);
   line-height      : 170%;
}

#subMessageBox a {
   text-decoration : none;
   color           : rgb(187,187,187);
   border-bottom   : 1px solid rgba(187,187,187,0.15);
}

#subMessageBox a:hover {
   color         : rgb(255,255,255);
   border-bottom : 1px solid rgba(255,255,255,1);
}

#xhtml-valid-icon {
   /*vertical-align   : text-top;*/
   border           : none;
   /*opacity          : 0.15;*/
   margin-left      : 10px;
   height           : 31px;
   width            : 88px;
   background-image : url( 'http://www.w3.org/Icons/valid-xhtml10' );
   display          : inline-block;
}

.footer {
   opacity:0.3;
}
.footer:hover {
   opacity:1;
}
.footer * {
   vertical-align:middle;
}
/*
#xhtml-valid-icon:hover {
   opacity : 1;
}
*/

#klimaneutrales_hosting {
   /*vertical-align   : text-top;*/
   border           : none;
   /*opacity          : 0.15;*/
   margin-left      : 10px;
   height           : 49px;
   width            : 150px;
   background-image : url( '../img/klimaneutrales_hosting.png' );
   display          : inline-block;   
}