/*------------------------------------------------LOAD FONT------------------------------------------------*/

@font-face {
        font-family: myFontLight;
        src: url(../Font/myriad-pro-light.otf);
        font-weight: light;
        }

@font-face {
        font-family: myFontRegular;
        src: url(../Font/myriad-pro-regular.otf);
        font-weight: light;
        }

@font-face {
        font-family: myFont;
        src: url(../Font/myriad-pro-light.otf);
        font-weight: light;
        }

@font-face {
        font-family: myFontConSemiBold;
        src: url(../Font/myriad-pro-semibold-cond.otf);
        font-weight: bold;
        font-stretch: condensed;
        }

@font-face {
        font-family: myFontCondensed;
        src: url(../Font/myriad-pro-cond.otf);
        font-stretch: condensed;
        }

@font-face {
        font-family: myFont;
        src: url(../Font/myriad-pro-light-cond.otf);
        font-weight: light;
        font-stretch: condensed;
        }

@font-face {
        font-family: myFontBold;
        src: url(../Font/myriad-pro-bold.otf);
        font-weight: bold;
        }

/*------------------------------------------------MAIN (Generic pane rules)------------------------------------------------*/

body { margin: 0 }

.row, .col { overflow: hidden; position: absolute; }

.row { left: 0; right: 0; }

.col { top: 0; bottom: 0; }

.scroll-x { overflow-x: auto; }

.scroll-y { overflow-y: auto; }

.header.row { height: 75px; top: 0;}

.body.row { top: 75px; bottom: 0px;}

.footer.row { height: 25px; bottom: 0; }

.body.row.prj { height: 500px; top: 70px;}

.descr.row.prj{ top: 570px; bottom: 35px; z-index: 2; }

.back.row.prj{ height: 35px; bottom: 0; z-index: 4; }

.middle.row.prj{ height: 25px; top: 555px; background-color: white; z-index: 3; }

html, body{
    font-family: 'myFont', sans-serif;
    font-size: 0.8em;
    letter-spacing: 1px;
	font-kerning: normal;
    color: black;
    background-color: white;
	height:100%;
}

#logo{
	padding-right: 80px;
	width: 150px;
/*	width: 150px;*/
}

#navigation{
    position: fixed;
	top: 5px;
	left: -15px;
	z-index: 3;
  }

#navigation ul li {
    display: inline-block;
    }

#navigation ul li a{
    padding-right: 50px;
    }

#buttons{
	top:-10px;
/*
	padding-bottom: 10px;
*/
    }

a {
    font-family:'myFontCondensed', sans-serif;
	font-size: 12.5px;
	letter-spacing: 1.6px;
    color:black;
    font-kerning: normal;
}

#current a {
	color: black;
	font-family: 'myFontConSemiBold';
	font-size: 12.5px;
	letter-spacing: 1.3px;
	text-decoration: none;
    font-kerning: normal;
}

a:hover {
	color: black;
	font-family: 'myFontConSemiBold';
	font-size: 12.5px;
	letter-spacing: 1.3px;
	text-decoration: none;
    font-kerning: normal;
}

p a {
    font-family: 'myFontRegular', sans-serif;
    font-size: 1.0em;
	letter-spacing: 1;
    line-height: 1.5;
}
p a:hover {
    font-family: 'myFontRegular', sans-serif;
    font-size: 1.0em;
	letter-spacing: 1;
    line-height: 1.5;
}

#canvas{
    z-index: 1;
}

#language {
	width: 200px;
}


/*------------------------------------------------PROJEKT PAGES------------------------------------------------*/

.content{
    position: absolute;
	overflow: hidden;
	top: 20px;
	left: 28px;
	right: 28px;
	bottom: 15px;
}

#content1{
	width: 2270px;
}

#content2{
	width: 3890px;
}

#content3{
	width: 3730px;
}

#content4{
	width: 4250px;
}

#content5{
	width: 2400px;
}

#content6{
	width: 8370px;
}

#content7{
	width: 6635px;
}

#content8{
	width: 3730px;
}

#content9{
	width: 5090px;
}

#content10{
	width: 10065px;
}

#contentabout{
    position: absolute;
	width: 850px;
	overflow: hidden;
	top: 20px;
	left: 28px;
	right: 28px;
	bottom: 15px;
}

#imgprj{
    height: 100%;
    float: left;
    padding-right: 20px;
    }

#imgprj9{
    height: 100%;
    float: left;
/*    padding-right: 20px;*/
	padding-right: 10px;
	padding-left: 10px;
	background-color: #efefef ;
/*
	border: 1px;
    border-style: solid;
*/
		
    }

#titel{
    width: 360px;
    left: 28px;
	font-family: 'myFontConSemiBold';
	letter-spacing: 1.2px;
    font-size: 1.3em;
    font-kerning: normal;
}

#description{
    position: fixed;
    width: 390px;
/*
	width:100%;
*/
    overflow-x: scroll;
/*    height: 275px;*/
	top:565px;
	bottom:30px;
    left: 28px;
    font-family: 'myFontRegular', sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
}

#text{
	position:absolute;
	top:30px;
}

#back{
    position: fixed;
    width: 12px;
    bottom: 10px;
    left: 28px;
}

#back2{
    position: fixed;
    width: 13px;
    bottom: -5px;
    left: 28px;
	font-family: 'myFontConSemiBold';
	letter-spacing: 1.2px;
    font-size: 1.5em;
}

/*------------------------------------------------HOME PROJEKTE------------------------------------------------*/

.titel{
    font-family: 'myFontConSemiBold';
	letter-spacing: 1.2px;
    font-size: 1.3em;
    font-kerning: normal;
}

#prj1{
    position:absolute;
	top: 70px;
	left:110px;
	width:190px;
/*
    border: 1px;
    border-style: solid;
*/
	z-index: 2;
    }

#titelP1{
    display: none;
    position:absolute;
	background-color: white;
	top: 270px;
	left:110px;
	width:90px;
    z-index: 3;
}
a:hover + #titelP1 {
    display: block;
}

#prj2{
	position:absolute;
	top:470px;
	left:110px;
	width:190px;
/*
    border: 1px;
    border-style: solid;
*/
	z-index: 2;	
    }

#titelP2{
    display: none;
    position:absolute;
	background-color: white;
	top: 735px;
	left:110px;
	width:100px;
    z-index: 3;
}
a:hover + #titelP2 {
    display: block;
}

#prj3{
	position:absolute;
	top: 292px;
	left: 420px;
	width:190px;
	z-index: 2;
    }

#titelP3{
    display: none;
    position:absolute;
	background-color: white;
	top: 400px;
	left: 420px;
	width:120px;
    z-index: 3;
}
a:hover + #titelP3 {
    display: block;
}

#prj4{
	position:absolute;
	top: 630px;
	left: 420px;
	width:190px;
	z-index: 2;
    }
#titelP4{
    display: none;
    position:absolute;
	background-color: white;
	top: 812px;
	left: 420px;
	width:170px;
    z-index: 3;
}
a:hover + #titelP4 {
    display: block;
}

#prj5{
	position:absolute;
	top: 40px;
	left: 730px;
	width:190px;
	z-index: 2;
    }
#titelP5{
    display: none;
    position:absolute;
	background-color: white;
	top: 262px;
	left: 730px;
	width: 80px;
    z-index: 3;
}
a:hover + #titelP5 {
    display: block;
}

#prj6{
	position:absolute;
	top: 425px;
	left: 730px;
	width: 190px;
	z-index: 2;
    }
#titelP6{
    display: none;
    position:absolute;
	background-color: white;
	top: 560px;
	left: 730px;
	width:120px;
    z-index: 3;
}
a:hover + #titelP6 {
    display: block;
}


#prj7{
	position:absolute;
	top: 220px;
	left: 1040px;
	width: 190px;
/*
    border: 1px;
    border-style: solid;
*/
	z-index: 2;
    }
#titelP7{
    display: none;
    position:absolute;
	background-color: white;
	top: 348px;
	left: 1040px;
	width:95px;
    z-index: 3;
}
a:hover + #titelP7 {
    display: block;
}

#prj8{
	position:absolute;
	top: 580px;
	left: 1040px;
	width: 190px;
	margin-bottom:60px;
/*
    border: 1px;
    border-style: solid;
*/
	z-index: 2;
    }
#titelP8{
    display: none;
    position:absolute;
	background-color: white;
	top: 895px;
	left: 1040px;
	width:145px;
    z-index: 3;
}
a:hover + #titelP8 {
    display: block;
}

#prj9{
	position:absolute;
	top: 40px;
	left: 1350px;
	width: 190px;
	margin-right: 110px;
/*
    border: 1px;
    border-style: solid;
*/
	z-index: 2;
    }
#titelP9{
    display: none;
    position:absolute;
	background-color: white;
	top: 163px;
	left: 1350px;
	width:140px;
    z-index: 3;
}
a:hover + #titelP9 {
    display: block;
}

#prj10{
	position:absolute;
	top: 380px;
	left: 1350px;
	width: 190px;
	padding-right: 110px;
	z-index: 2;
    }
#titelP10{
    display: none;
    position:absolute;
	background-color: white;
	top: 565px;
	left: 1350px;
	width:125px;
    z-index: 3;
}
a:hover + #titelP10 {
    display: block;
}


.copyright{
	text-align: right;
	margin-right: 10px;
	background-color: white;
	z-index: 4;
}

/*#titel{
	font-size: 1.7em;
}

p {
	font-family: 'myFontBold';
	font-size: 1.4em;
}*/