@charset "utf-8";
/* CSS Document */

body
{
        font-family:Verdana,Arial,Helvertica, sans-serif;
        background-image:url("source/background.jpg");
        text-align:center;
}


/************************************************************************/


/*ÜBERSCHRIFT LEISTE*/

div#titel
{       position:absolute;
        left:25px;
        top:-15px;
        font-size: 50px;
        color:#65a0ea;
        letter-spacing:3px
}

div#titel em {
        color:#2d63a7;
        font-size: 80px;
        letter-spacing:0px
}

div#headlineleft
{
        position:absolute;
        background-image:url("source/topbar/headleft.png");
        background-repeat: no-repeat;
        left:50px;
        width:800px;
        height:90px
}

div#headlinemiddle
{
        position:absolute;
        background-image:url("source/topbar/headmiddle.png");
        left:130px;
        right:225px;
        height:90px


}

div#headlineright
{
        position:absolute;
        background-image:url("source/topbar/headright.png");
        background-repeat: no-repeat;
        right:20px;
        width:205px;
        height:90px
}

/*NAVIGATION*/

div#topbar
{        position:absolute;
         top:85px;
         left:80px

}

div#navibutton
{
         left:0px;
         top:0px;
         margin-right:10px;
         float:left;
}

div#topbarbig
{
         position: absolute;
         display: inline-block;
         left: 50%;
         top: 130px;

}

div#topbarthree
{
         position: absolute;
         display: inline-block;
         left: 50%;
         top: 130px;
         margin-left: -380px;

}

div#bignavibutton
{
         left:0px;
         top:0px;
         margin-right:10px;
         float:left;
}

/*KONTAKTLEISTE*/

div#kontaktposition
{
         position:absolute;
         display: inline-block;
         right:221px;
         top:23px;

}
/*--formatierung Kontaktleiste--*/
.kontakt {
         margin: 0px 0 0 0;
         list-style-type: none;
         position: relative;
         width: 100px;

}

/*--Horizontale Anordnung der kontakteinträge--*/
.kontakt li
{
         float: right;
         margin:3px;
}


/************************************************************************/


/*SKILLS*/
div#skillcathegories
{
         position: absolute;
         background-image:url("source/about/bigbutton_empty.png");
         top: 0px;
         width: 165px;
         height: 617px;
         text-align: left;
         padding-left: 35px;
         padding-top: 15px;
         color:#FFFFFF;
         font-size: 20px;
}

div#skillcathegories p
{
        font-size: 32px;

}

div#skillcontent
{
        position:absolute;
        display: inline;
        top:220px;
        width:700px;
        height:510px;
        margin-left: -300px;
        text-align: left;
}

div#leftskill
{
         position:absolute;
         left:0px;
         top:0px;

}

div#rightskill
{
         position:absolute;
         left:250px;
         top:5px;
         font-size: 66px;

}



/************************************************************************/


/*PORTFOLIO KATHEGORIES*/

div#cathegories
{
        position:absolute;
        display: inline;
        top:150px;
        width:0px;
        height:510px;
}

div#righttop
{
         position:absolute;
         left:0px;
         top:0px;
         margin-left:15px;
}

div#lefttop
{
         position:absolute;
         right:0px;
         top:0px;
         margin-right:15px;
}

div#rightbottom
{
         position:absolute;
         left:0px;
         bottom:0px;
         margin-left:15px;
}

div#leftbottom
{
         position:absolute;
         right:0px;
         bottom:0px;
         margin-right:15px;
}


/************************************************************************/


/*1. ALBUM/GALLERY*/

/*--Formatierung der Albumbox--*/
#album
{
        position:relative;
        display: inline-block;
        top:120px;
        width:800px;
        height:50px;
        margin: 0px 0px 0px 0px;
        padding: 0px
}

/*--Formatierung der Linkleiste--*/
.gallery {

         margin: 0px 0px 0px 0px;
         list-style-type: none;
         position: relative;
         width: 815px;
         padding: 0px
}

/*--Horizontale Anordnung der Listeneinträge--*/
.gallery li
{
         float: left;
}

/*--thumbnails small--*/
.gallery li img.small
{
         border:1px solid #65a0ea;
         visibility: visible;
}

/*--Formatierung der Link-Buttons--*/
.gallery li a, .gallery li a:visited
{
         font-size: 11px;
         display: block;
         text-align: center;
         width: 52px;
         height: 52px;
         border: 1px solid #65a0ea;
         margin: 2px;
}

/*--active und focus-Formatierung der Link-Buttons--*/
.gallery li a:active, .gallery li a:focus
{
         background: #444;
         color: #fff;
}

/*--Blendet die Bilder aus--*/
.gallery li a img
{
         visibility: hidden;
         border: 0;
}

/*--Positionierung der Querformat-Bilder 800 px--*/
.gallery li a img.quer
{
         position: absolute;
         top: 60px;
         left: 0;
         margin-left: 6px;
}

/*--Positionierung der Querformat-Bilder kleiner--*/
.gallery li a img.klein
{
         position:absolute;
         top: 60px;
         left: 50%;
         width: 350px;
         margin-left: -175px;
}

/*--Positionierung der Hochformat-Bilder 600px*/
.gallery li a img.hoch
{
         position:absolute;
         top: 60px;
         left: 50%;
         width: 600px;
         margin-left: -300px;
}

/*--Einblenden der Bilder im active/focus-Zustand--*/
.gallery li a:active img, .gallery li a:focus img
{
         visibility: visible;
}


/*2. ALBUM/GALLERY ZWEI ZEILEN*/

/*--Formatierung der Linkleiste--*/
.gallery3 {

         margin: 0px 0px 0px 0px;
         list-style-type: none;
         position: relative;
         width: 815px;
         padding: 0px
}

/*--Horizontale Anordnung der Listeneinträge--*/
.gallery3 li
{
         float: left;
}

/*--thumbnails small--*/
.gallery3 li img.small
{
         border:1px solid #65a0ea;
         visibility: visible;
}

/*--Formatierung der Link-Buttons--*/
.gallery3 li a, .gallery3 li a:visited
{
         font-size: 16px;
         display: block;
         text-decoration: none;
         text-align: center;
         color: #FFFFFF;
         width: 52px;
         height: 52px;
         border: 1px solid #65a0ea;
         margin: 2px;
}

/*--active und focus-Formatierung der Link-Buttons--*/
.gallery3 li a:active, .gallery3 li a:focus
{
         background: #444;
         color: #fff;
}

.gallery3 li a:focus
{
         color: #2D63A7;
}

/*--Blendet die Bilder aus--*/
.gallery3 li a img
{
         visibility: hidden;
         border: 0;
}

/*--Blendet die Texte aus--*/
.gallery3 li a p
{
         visibility: hidden;
}

/*--Positionierung der Texte*/
.gallery3 li a p.oben
{
         position: absolute;
         text-align: left;
         top: 104px;
         left: 10px;
         right: 10px;
}

/*--Positionierung der Querformat-Bilder 800 px--*/
.gallery3 li a img.quer
{
         position: absolute;
         top: 205px;
         left: 0;
         margin-left: 6px;
}

/*--Positionierung der Querformat-Bilder kleiner--*/
.gallery3 li a img.klein
{
         position:absolute;
         top: 205px;
         left: 50%;
         width: 350px;
         margin-left: -175px;
}

/*--Positionierung der Hochformat-Bilder 600px*/
.gallery3 li a img.hoch
{
         position:absolute;
         top: 205px;
         left: 50%;
         width: 600px;
         margin-left: -300px;
}

/*--Einblenden der Bilder im active/focus-Zustand--*/
.gallery3 li a:active img, .gallery3 li a:focus img
{
         visibility: visible;
}

/*--Einblenden der Texte im active/focus-Zustand--*/
.gallery3 li a:active p, .gallery3 li a:focus p
{
         visibility: visible;
}

/************************************************************************/


/*2. ALBUM/CONCEPT*/

/*--Formatierung der Albumbox Konzept--*/
#album2 {
        position:relative;
        display: inline-block;
        top:220px;
        width:900px;
        height:50px;
        margin: 0px 0 0 0;
        padding: 0px
}

/*--Formatierung der Linkleiste--*/
.gallery2
{
         padding: 0;
         margin: 0px 0 0 0;
         list-style-type: none;
         position: relative;
         width: 900px;
         padding: 0px
}

/*--Formatierung der Link-Buttons--*/
.gallery2 li a, .gallery2 li a:visited
{
         font-size: 20px;
         display: block;
         text-decoration: none;
         padding-left: 13px;
         padding-top: 23px;
         color: #FFFFFF;
         background-image:url("source/topbar/bigbutton_empty.png");
         text-align: left;
         width: 187px;
         height: 57px;
         margin-bottom: 10px;
}

/*--active und focus-Formatierung der Link-Buttons--*/
.gallery2 li a:active
{
         color: #2D63A7;
}

.gallery2 li a:focus
{
         color: #2D63A7;
}

/*--Blendet die Texte aus--*/
.gallery2 li a p
{
         visibility: hidden;
}

/*--Positionierung der Hochformat-Texte*/
.gallery2 li a p.hoch
{
         position: absolute;
         top: -10px;
         left: 220px;
}

/*--Einblenden der Texte im active/focus-Zustand--*/
.gallery2 li a:active p, .gallery2 li a:focus p
{
         visibility: visible;
}


/************************************************************************/


/*MOUSE OVER*/

.box .normal
{
         display: none;
}

.box :hover .normal
{
         display: block;
         position: absolute;

}


/************************************************************************/


/*BODY*/

/*--Normal--*/
div#content
{
         position:absolute;
         left:50px;
         right:50px;
         top:150px
}

div#content em
{
        color:#FFFFFF;
        font-size: 30px;
        text-align: left;
}

div#content em2
{
        color:#2d63a7;
        font-size: 20px;
        letter-spacing:0px
}

/*--Normal weiter runter--*/
div#contentunten
{
         position:absolute;
         left:50px;
         right:50px;
         top:220px
}

div#contentunten em
{
        color:#FFFFFF;
        font-size: 30px;
        text-align: left;
}

div#contentunten em2
{
        color:#2d63a7;
        font-size: 20px;
        letter-spacing:0px
}

/*--Projects--*/
div#project
{
         position:absolute;
         left:100px;
         width: 600px;
         top:150px;
         text-align:left;
}

div#project em
{
        color:#2d63a7;
        font-size: 12px;
        text-align: left;
}

div#project em2
{
        color:#2d63a7;
        font-size: 25px;
        letter-spacing:0px
}

div#project b
{
        color:#65a0ea;
}

/*--Daory--*/
div#daory
{
         position:absolute;
         left:50px;
         right:50px;
         top:230px
}

/*--About--*/
div#leftcontent
{
         position:absolute;
         left:-40px;
         top:0px
}

div#rightcontent
{
         position:absolute;
         text-align:left;
         left:150px;
         right:0px;
         top:0px
}




/* Überreste */

/* Grafik-Box Mittig */

div#headline
{
        position:absolute;
        background-repeat: no-repeat;
        background-position: center;
        left:0px;
        right:0px;
        height:90px
}

/* Landscape */
/* für IPhones
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}*/

/* <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
can try adding that in the <head> </head>