/* -----------------------------------------------------------------------------------------
   f.it.s Fichte IT Servcie - Home - 2015
   ---------------------------------------------------------------------------------------*/
body {
padding:0;
margin:0;
background:url(img/bg.gif) repeat-x #eee;
color:#222;
line-height:18px;
font-family:Verdana; Arial, Sans-serif;
font-size:11px;
}
div {border: 0px;}

#tabxsf {margin: 8px auto;padding:4px; }
/* Servcie Startseite OBEN */
#linktext,  {
text-align: center;
}
#ptext {
font-family:Arial, Sans-serif;
font-size:12px;
padding:0;
margin:0;
color:#676767;
}

#nav, #nav:link, nav:visited {}
#nav:hover, nav:active {}

#home, #home:link, #home:visited {}
#home:hover, #home:active {}
#home:target {}


#skill, #skill:link, #skill:visited { }
#skill:hover, #skill:active {}
#skill:target {}


#kontakt, #kontakt:link, #kontakt:visited {}
#kontakt:hover, #kontakt:active {}
#kontakt:target {}







/* mein css menü*/


@-webkit-keyframes example {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}

@keyframes example {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}
@-webkit-keyframes bottom2 {
    from {left:-100px;opacity: 0; border-color:#FF0000;}
    to {left:0px;opacity:1;}
}

@keyframes bottom2 {
   from {left:-100px;opacity: 0; border-color:#FF0000;}
    to {left:0px;opacity:1;}
}

/* my frame   -------------------           */

.frame{
  display: none;
  position:absolute;
  left: 0;
  top: 20px;
  width: 100%;
  height: 100%;
  overflow: auto;
transition-property:  color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}

.frame:target {
  display: table;
  position:absolute;
  transition-property: color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;

}

.frame2 {
  display: none;
  position:fixed;
  left: 0;
  top: 20px;
  width: 100%;
  height: 100%;
  overflow: auto;
transition-property:  box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}
.frame2:target {
  display: table;
  position:fixed;
  transition-property:  box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}

.frame3{
  display: none;
  position:fixed;
  left: 0;
  top: 20px;
  width: 100%;
  height: 100%;
  overflow: auto;
transition-property: color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}
.frame3:target {
  display: table;
  position:fixed;
  transition-property: color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}
.frame3:visited {
  display: none;
  position:fixed;
  transition-property:  color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}
 /* ---- meine BOX ----------------*/
.dialog {
  display: table-cell;
  vertical-align: middle;
}
.dialog, .content {
  position: relative;
  outline: 0;
  text-align: justify;
  width: 80%;
  hight: 80%;
-webkit-animation-name: bottom2;
 -webkit-animation-duration: 0.9s;
 animation-name: bottom2;
 animation-duration: 0.9s;}

.content    {
margin: 8px auto;padding:4px; border-radius:5px 2px 5px 2px; border:1px 0px 0px 2px solid rgba(220,192,192, .1);background: rgba(209, 209, 209, 0.1);
box-shadow:6px 0px 4px 2px rgba(192,190,190, .20);
}


.dialog2 {
  display: table-cell;
  vertical-align: middle;
}
.dialog2, .content2 {
  position: relative;
  outline: 0;
  text-align: justify;
  hight: 80%;
-webkit-animation-name: example;
 -webkit-animation-duration: 0.7s;
 animation-name: example;
 animation-duration: 0.7s;                      }

.content2                                         {
margin: 0px auto;padding:0px; border-radius:5px 2px 5px 2px; border:1px 0px 0px 2px solid rgba(220,192,192, .1);background: rgba(209, 209, 209, 0.1);
box-shadow:3px 0px 4px 2px rgba(192,190,190, .20);
}


.maindialog {
  display: table-cell;
  vertical-align: middle;
}
.maindialog, .maincont {
  position: relative;
  outline: 0;
  text-align: justify;
  width: 80%;
  hight: 80%;
-webkit-animation-name: example;
 -webkit-animation-duration: 0.7s;
 animation-name: example;
 animation-duration: 0.7s; }

.maincont {
 margin: 8px auto;padding:4px; border-radius:5px 2px 5px 2px; border:1px 0px 0px 2px solid rgba(220,192,192, .1);background: rgba(209, 209, 209, 0.1);
box-shadow:6px 0px 4px 2px rgba(192,190,190, .20);
}


-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 0.5s;

#container {
  padding: 2px 16px;
}
/*  nach dem menü */



a:link, a:visited {
font-family: "Courier New", Courier, serif;
font-size:18px;
text-decoration:none;
outline:none;
padding:2px;
margin:5px;
line-height:18px;
color: #464646;
border: 0px;
text-shadow: 1px 1px 0px #fff;
transition-property: color, transform:rotate;
transition-duration: 700ms;
}

a:hover,  a:active {
font-family: "Courier New", Courier, serif;
font-size:18px;
text-decoration:none;
outline:none;
padding:2px;
margin:5px;
line-height:18px;
cursor:pointer;
color:#666;
border: 0px;
transition-property: color, transform:rotate;
transition-duration: 700ms;
}

/*spielere*/

#divxsf{margin: 0px auto;padding:0px; border-radius:0px 0px 4px 4px; border:1px solid rgba(255,0,0, .0);background: rgba(209, 0, 0, 0.0);
box-shadow: 3px 0px 5px 2px rgba(255,192,192, 0.0);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 500ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}
#divxsf:hover{margin: 0px auto;padding:0px; border-radius:0px 0px 5px 5px; border:1px solid rgba(192,192,192, 0.44);background: rgba(255,255,255, 0.33);
box-shadow: 3px 0px 5px 2px rgba(192,192,192, 0.22);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 500ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}
 /* rot */
#divxsfr{margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(255,0,0, .1);background: rgba(209, 0, 0, 0.15);
box-shadow: 0px 5px 10px 5px rgba(255,192,192, .1);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 700ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}

#divxsfr:hover {margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(255,0,0, .1);background: rgba(255, 0, 0, 0.40);
box-shadow: 0px 5px 10px 5px rgba(255,20,20, .1);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 500ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;
}
  /* grün */
#divxsfg{margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(0,255,0, .1);background: rgba(0, 209, 0, 0.15);
box-shadow: 0px 5px 10px 5px rgba(192,255,192, .1);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 700ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;}

#divxsfg:hover{margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(0,255,0, .1);background: rgba(0, 255, 0, 0.40);
box-shadow: 0px 5px 10px 5px rgba(20,255,20, .1);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 500ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;  }

    /* blau */
#divxsfb {margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(0,0,255, .1);background: rgba(0, 0, 209, 0.15);
box-shadow: 0px 5px 10px 5px rgba(192,192,255, .1);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 700ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
 transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms; }

#divxsfb:hover {margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(0,0,255, .1);background: rgba(0, 0, 255, 0.40);
box-shadow: 0px 5px 10px 5px rgba(20,20,255, .1);transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 500ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms; }

        /* gelb */
#divxsfy {margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(255,255,0, .1);background: rgba(209, 209, 0, 0.15);
box-shadow: 0px 5px 10px 5px rgba(255,255,192, .1); transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 700ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 600ms;}

#divxsfy:hover {margin: 8px auto;padding:4px; border-radius:5px; border:1px solid rgba(255,255,0, .1);background: rgba(255, 255, 0, 0.40);
box-shadow: 0px 5px 10px 5px rgba(255,255,20, .1); transition-property: background-color, color, box-shadow, border, font-width, transform:rotate;
transition-duration: 500ms;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg); }

/* copyright bottom */
#bottomxsf, #bottomxsf:link{
font-family:verdana, Arial, Sans-serif;
font-size:8px;
padding:4;
margin:4;
color:#676767;
margin: 8px auto;padding:4px; border-radius:5px 2px 5px 2px; border:1px 0px 0px 1px solid rgba(220,192,192, .1);background: rgba(255, 255, 255, 0.1);
box-shadow:0px 0px 0px 0px rgba(192,190,200, .20);  }

#ctext {
font-family:Arial, Sans-serif;
font-size:9px;
padding:4;
margin:4;
color:#676767;
}


/*  SKILL PAGE */
#skillbody {
padding:0;
margin:0;
color:#222;
}
#stdtext {
font-family:Verdana, Arial, Sans-serif;
font-size:10px;
padding:2;
margin:2;
color:#777777;
}
a.imprint:link , a.imprint:visited {
color:#333;
text-decoration:underline;
line-height:18px;
font-family:Verdana; Arial, Sans-serif;
font-size:11px;}

h1 {color:rgb(245,245,245); text-shadow: -1px -1px 0px #CECECE, 1px 1px 0px #E6E6E6}