@font-face {
    font-family: 'SierraRegular';
    src: url('fonts/sierra-webfont.eot');
    src: url('fonts/sierra-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sierra-webfont.woff') format('woff'),
         url('fonts/sierra-webfont.svg#SierraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'CabinRegular';
    src: url('fonts/cabin-regular-ttf-webfont.eot');
    src: url('fonts/cabin-regular-ttf-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cabin-regular-ttf-webfont.woff') format('woff'),
         url('fonts/cabin-regular-ttf-webfont.svg#CabinRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'CabinMedium';
    src: url('fonts/cabin-medium-ttf-webfont.eot');
    src: url('fonts/cabin-medium-ttf-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cabin-medium-ttf-webfont.woff') format('woff'),
         url('fonts/cabin-medium-ttf-webfont.svg#CabinMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{margin:0;padding:0;}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
/************************************************
 **** CSS für netzgestaltung.at by major_tom ****
 ***********************************************/

html{
height:100.3%;
margin-bottom:0.1px;
}
body{
font-family: 'CabinRegular', sans-serif;
font-size:87.5%;
line-height:1.3em;
background:url(img/bg.jpg) 0 233px repeat-y;
color:#333333;
}
.wrapper{
font-size:1em;
width:987px;
}

h1 { }
h2 { font-size:1.8em; line-height:1.2em; margin-bottom:0.5em; font-family: 'CabinMedium', sans-serif;font-weight:normal;}
h3 { font-size:1.4em; line-height:1.3em; margin-bottom:0.2em; font-family: 'CabinMedium', sans-serif;font-weight:normal; }
h4 { font-size:1.1em; line-height:1.2em; margin-bottom:0.3em; font-family: 'CabinMedium', sans-serif;}
h5 { font-size:1.2em; line-height:1.2em; margin-bottom:1em; font-family: 'CabinMedium', sans-serif;font-weight:normal;}
h6 { font-size:  1em; line-height:1.2em; margin-bottom:1em; font-family: 'CabinMedium', sans-serif;}

a:link, a:visited{
color:#BB4033;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:focus{
outline:0;
}

.left  { float:left; }
.right { float:right;}
.clear { clear:both; }

ul, li{
list-style:none;
}
ul ul{
padding:0 0 0 20px;
}
img {
border:none;
}

/****************
 **** Header ****
 ***************/

header{
padding:21px 0 0 0;
height:212px;
margin:0;
}
header .wrapper{
position:relative;
}
header .logo{
display:block;
float:right;
margin:0 158px 0 0;
background:url(img/logo-bg.jpg) 185px 0 no-repeat;
}
header p{
width:213px;
margin:2em 0 0 0;
padding:1em 20px 1em 0;
float:left;
font-size:1.4em;
line-height:1.3em;
color:#FFFFFF;
background:url(img/menu-bg.png) 0 0 repeat-y;
text-align:right;
}
header .contact{
height:40px;
width:122px;
position:fixed;
top:234px;
left:852px;
padding:12px 0 13px 13px;
z-index:1000;
background:#427C8C;
-webkit-box-shadow:0 0 10px #427C8C;
-moz-box-shadow:0 0 10px #427C8C;
box-shadow:0 0 10px #427C8C;
-webkit-animation: skewIn 0.5s 1 ease-in;
-webkit-animation: skewIn 0.5s 1 ease-in;
-moz-animation: skewIn 0.5s 1 ease-in;
-ms-animation: skewIn 0.5s 1 ease-in;
-o-animation: skewIn 0.5s 1 ease-in;
animation: skewIn 0.5s 1 ease-in;
}
header .contact .index{
height:50px;
width:20px;
margin:-5px 10px -5px 0;
float:left;
}
header .contact .next,
header .contact .prev{
display:block;
height:20px;
width:20px;
cursor:pointer;
}
header .contact .next { background:url(img/next.jpg) 0 0 no-repeat; }
header .contact .prev { background:url(img/prev.jpg) 0 0 no-repeat; margin:0 0 10px 0; }
header .contact .next:hover { background:url(img/next-hover.jpg) 0 0 no-repeat; }
header .contact .prev:hover { background:url(img/prev-hover.jpg) 0 0 no-repeat; }

/******************
 **** Mainbody ****
 *****************/

.mainbody{ 
margin:0 0 0 0;
padding:0;
clear:both;
}
.js_ready .mainbody{
position:relative;
overflow:hidden;
/* height is set by js */
}
.mainbody .navigation{
width:233px;
float:left;
margin:0;
padding:1.6em 0 0 0;
}
.mainbody .navigation li{
height:3em;
margin:0 0 0.3em 0;
line-height:3em;
background:url(img/menu-bg.png) 0 0 repeat-y;
}
.mainbody .navigation li.meta_navigation{
height:40px;
padding:15px 15px 15px 0;
}
.mainbody .navigation li.meta_navigation li{
height:40px;
width:40px;
float:right;
margin:0 0 0 15px;
}
.mainbody .navigation a{
display:block;
padding:0 20px 0 0;
font-size:1.2em;
color:#FFFFFF;
text-align:right;
}
.mainbody .navigation a:hover,
.mainbody .navigation a:focus,
.mainbody .navigation .active a{
background:url(img/menu-bg.png) 0 0 repeat-y;
text-decoration:none;
color:#FFFFFF;
outline:0;
}
.mainbody .navigation li.meta_navigation a{
height:40px;
width:40px;
padding:0;
background:none;
}
.mainbody .navigation li.blog a{
font-family: 'SierraRegular';
font-size:1.8em;
}
.mainbody .navigation li.meta_navigation .photoblog a { background:url(img/photoblog.png) 0 0 no-repeat; }
.mainbody .navigation li.meta_navigation .twitter   a { background:url(img/twitter.png)   0 0 no-repeat; }
.mainbody .navigation li.meta_navigation .facebook  a { background:url(img/facebook.png)  0 0 no-repeat; }

.mainbody .navigation li.meta_navigation a span{
display:none;
}
.mainbody .navigation .sub{
margin:0 0 0 41px;
}
#content_wrapper{
width:626px;
float:left;
height:525px;
min-height:525px;
margin:0;
position:relative;
overflow:hidden;
}
.js_ready .mainbody .canvas{
position:absolute;
overflow: hidden;
}
.mainbody .content{
margin:0 0 2.6em 0;
width:625px;
}
.js_ready .mainbody .content{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.js_ready .canvas .focused{
display:block;
-webkit-animation: skewIn 0.5s 1 ease-in;
-moz-animation: skewIn 0.5s 1 ease-in;
-ms-animation: skewIn 0.5s 1 ease-in;
-o-animation: skewIn 0.5s 1 ease-in;
animation: skewIn 0.5s 1 ease-in;
}
@-webkit-keyframes skewIn {
0% { -webkit-transform:translate3d(0,0,0) scale(1); }
15% { -webkit-transform:translate3d(0,0,0) scale(0.9);}
100% { -webkit-transform:translate3d(0,0,0) scale(1);}
}
@-moz-keyframes skewIn {
0% { -moz-transform:translate3d(0,0,0) scale(1); }
15% { -moz-transform:translate3d(0,0,0) scale(0.9);}
100% { -moz-transform:translate3d(0,0,0) scale(1);}
}
@-ms-keyframes skewIn {
0% { -ms-transform:translate3d(0,0,0) scale(1); }
15% { -ms-transform:translate3d(0,0,0) scale(0.9);}
100% { -ms-transform:translate3d(0,0,0) scale(1);}
}
@-o-keyframes skewIn {
0% { -o-transform:translate3d(0,0,0) scale(1); }
15% { -o-transform:translate3d(0,0,0) scale(0.9);}
100% { -o-transform:translate3d(0,0,0) scale(1);}
}
@keyframes skewIn {
0% { transform:translate3d(0,0,0) scale(1); }
15% { transform:translate3d(0,0,0) scale(0.9);}
100% { transform:translate3d(0,0,0) scale(1);}
}
.js_ready .canvas .notinfocus{
display:none;
-webkit-animation: skewOut 0.5s 1 ease-in;
-webkit-backface-visibility:hidden;
-moz-animation: skewOut 0.5s 1 ease-in;
-ms-animation: skewOut 0.5s 1 ease-in;
-o-animation: skewOut 0.5s 1 ease-in;
animation: skewOut 0.5 1 ease-in;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
@-webkit-keyframes skewOut {
0% { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
100% { -webkit-transform: rotate(-7deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes skewOut {
0% { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
100% { -moz-transform: rotate(-7deg) scale(1) skew(1deg) translate(0px); }
}
@-ms-keyframes skewOut {
0% { -ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
100% { -ms-transform: rotate(-7deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes skewOut {
0% { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
100% { -o-transform: rotate(-7deg) scale(1) skew(1deg) translate(0px); }
}
@keyframes skewOut {
0% {transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
100% { transform: rotate(-7deg) scale(1) skew(1deg) translate(0px); }
}



.content h1,
.content h2 {
font-size:1.8571em; 
line-height:2.5em;
padding:0 0.6em 0 1.30em;
margin:0 16px 0.3846em 0; 
font-weight:normal;
color:#FFFFFF;
background:#427C8C;
-webkit-box-shadow:0 0 10px #386571;
-moz-box-shadow:0 0 10px #386571;
box-shadow:0 0 10px #386571;
}
#netzgestaltung h1 { background:#427C8C url(img/netzgestaltung.png) 97% 50% no-repeat; }
#wordpress      h2 { background:#427C8C url(img/wordpress.png)      97% 50% no-repeat; }
#html_css_script h2 { background:#427C8C url(img/html-css-js.png) 96% 50% no-repeat; }
#browsersupport h2 { background:#427C8C url(img/browser.png) 96% 50% no-repeat; }
#ui_konzepte h2 { background:#427C8C url(img/ui_design.png) 97% 50% no-repeat; }
#referenzen h1 { background:#427C8C url(img/referenzen.png) 97% 50% no-repeat; }
.impress_wrapper h2 { background:#427C8C url(img/information.png) 97% 50% no-repeat; }
.credits h2 { background:#427C8C url(img/fehler.png) 97% 50% no-repeat; }
.disclaimer h2 { background:#427C8C url(img/achtung.png) 97% 50% no-repeat; }
.safety_wrapper h2 { background:#427C8C url(img/daten.png) 97% 50% no-repeat; }

#netzgestaltung section{ background:#FFFFFF url(img/netzgestaltung-bg.png) 97% 100% no-repeat; }
#wordpress section      { background:#FFFFFF url(img/wordpress-bg.png)      97% 100% no-repeat; }
#html_css_script section{ background:#FFFFFF url(img/html-bg.png) 97% 100% no-repeat; }
#browsersupport section{ background:#FFFFFF url(img/browser-bg.png) 97% 100% no-repeat; }
#ui_konzepte section{ background:#FFFFFF url(img/ui_design-bg.png) 97% 100% no-repeat; }
.impress_wrapper section{ background:#FFFFFF url(img/impressum-bg.png) 94% 94% no-repeat; }

.content section{
margin:0 16px 0 0;
padding:1em 1.5em;
margin:0 16px 2em 0.7142em;
min-height:410px;
background:#FFFFFF;
box-shadow:0 0 10px #386571;
}
.content .lauftext{
margin:0 114px 1.3em 0;
}
.content .half{
width:268px;
margin:0.3571em;
float:left;
}
.content ul{
margin:0 0 1.3em 0;
padding:0 0 0 20px;
}

/****************
 **** Footer ****
 ***************/
 
footer{
width:560px;
margin:0 0 50px 233px;
padding:0 46px 0 20px;
} 

/****************************
 **** Referenzen content ****
 ***************************/
/*
#referenzen .reference{
background:#FFFFFF;
border:1px solid #CCCCCC;
height:415px;
width:318px;
padding:10px;
margin:0 0 10px 0;
} 
#referenzen .left{
margin-right:10px;
}
#referenzen .reference .logo{
display:block;
width:166px;
}
#referenzen .reference h3{
}
#referenzen .reference p{
}*/

#referenzen .reference{
clear:both;
padding:10px;
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 10px;
height:165px;
min-height:165px;
}
#referenzen .reference .logo{
display:block;
width:166px;
float:left;
margin:0 10px 0 0;
}
#referenzen .reference h3,
#referenzen .reference p{
margin-left:176px;
}

/********************
 *** browser list ***
 *******************/
 
ul.browser_list{
clear:both;
padding:0;
}
.browser_list li{
width:25%;
float:left;
}
.browser_list .title{
width:auto;
float:none;
}
.browser_list .clear{
width:auto;
float:none;
}
.browser_list li ul{
padding:0 0 0 10px;
margin:0 10px 0 0;
}
.browser_list li li{
width:auto;
float:none;
font-size:0.8em;
}
.browser_list li .title{
margin-left:-10px;
}
/*****************
 *** logo wall ***
 ****************/
 
#wissenswert section{
padding-bottom:1.3em;
min-height:132px;
}
ul.logo_wall{
clear:both;
padding:0;
}
.logo_wall li{
padding:0 25px 0 0;
margin:0 0 1em 0;
float:left;
}
.logo_wall .clear{
width:auto;
float:none;
}
.logo_wall img{
padding:4px;
}
.logo_wall a:hover img{
box-shadow:0 0 15px #000000;
background:#8C4942;
}
.logo_wall a:focus img{
box-shadow:0 0 15px #C50000;
background:#8C4942;
}

/****************
 *** Tooltips ***
 ***************/

.tooltip {
background: #FFFFFF;
filter: alpha(opacity=80);
-moz-opacity0.80;
opacity:0.80;
box-shadow:0 0 10px #000000;
color: #333333;
display: none;
font-size: 20px;
height: 40px;
line-height: 40px;
padding:0;
width: 108px;
text-align:center;
}
.contact_content{
background: #FFFFFF;
filter: alpha(opacity=80);
-moz-opacity0.80;
opacity:0.80;
box-shadow:0 0 10px #000000;
width:85px;
padding:10px;
}


/********************
*** contact info ***
*******************/

#kontakt .contact {
height: 50px;
margin: 0 0 5px;
padding: 30px 0 0 40px;
width: 350px;
}

/**************************
 *** Javascript Effects ***
 *************************/

.js_ready .content{
}