/*
CSS für rescale design
Author : Dirk Schumacher - rescale design

COLOURS

BGMainSite  = #FFF
BLUE = #33ccff
HoverColor = #FFBF3D
TextHover = #d683c3
*/

/********************************
        GENERAL STYLES
*********************************/
body {background: #000 url(../img/img_sitebg.gif) repeat; font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, Arial, verdana, sans-serif; font-size: 12px; text-align: center; color: #8a8a8a;}
* {padding: 0; margin: 0;}
a img {border: none;}
h2 {font-weight: normal; color: #3b8ca2; font-size: 16px }
h3 {font-weight: normal;}
h4 {font-weight: normal; color: #3b8ca2; font-size: 12px }
p {line-height: 20px;}
strong {color: #c2d0d4;}
.formbox { text-align:right; }
.clearer {clear: both;}
.cbox { margin:5px 0 15px 0; border-top: 1px solid #373f42}
.img-services {margin: 5px 0px 15px 0px;}
.img-work {margin: 15px 0px 5px 0px;} 

    #headline { width: 100%; height: 28px; background: url(../img/img_headbg.gif) repeat-x; }
    #header-wrapper { width: 400px; height: 37px; margin: 0 auto; padding: 96px 0 0 400px; background: url(../img/img_logo.jpg) no-repeat;}

    #teaser-wrapper {width: 800px; height: 227px; margin: 10px auto 0 auto; padding-top: 2px; background: url(../img/img_teaserbg.gif) no-repeat; position: relative;}

    #secnav-wrapper { width: 800px; height: 98px;  margin: 2px auto 0 auto;}

    .worknav-wrapper {width: 800px; height: 25px; margin: 10px auto 0 auto; padding-top: 9px; background: url(../img/img_worknavbg.gif) no-repeat; text-align: center;}

    #content-wrapper { width: 800px; margin: 10px auto; background: url(../img/img_contentbg.gif) repeat;}
    #service-wrapper { width: 800px; margin: 10px auto; padding: 5px 0px; text-align: left;}

    #promo-wrapper { width: 800px; height: 90px; margin: 10px auto 0 auto; padding-top: 10px; font-size: 11px; color: #424242; border-top: 1px solid #2c4652;}
    #footer-wrapper { width: 800px; height: 70px; margin: 10px auto 0 auto; padding-top: 5px; font-size: 11px; color: #424242; border-top: 1px solid #2c4652;}
    #footer-left { width: 400px; height: 70px; padding: 0px 0px; float: left; text-align:left; }
    #footer-right { width: 400px; height: 70px; padding: 0px 0px; float: right; text-align:right; }


/********************************
        MAIN NAVIGATION
*********************************/
    ul#mainnav {width: 400px; list-style: none;}

    ulmainnav li { display: inline; }

    ul#mainnav li a {display: block; float: left; height: 36px;	background-image: url(../img/btn_nav.png); text-indent: -99999px;}

	ul#mainnav li a.home {width: 100px; background-position: 0px 0;}
	ul#mainnav li a.service {width: 100px; background-position: -100px 0;}
	ul#mainnav li a.profil {width: 100px; background-position: -200px 0;}
	ul#mainnav li a.contact {width: 100px; background-position: -300px 0;}

	ul#mainnav li a.home:hover, ul#mainnav li a.home:focus {background-position: 0px -36px;}
	ul#mainnav li a.service:hover, ul#mainnav li a.service:focus {background-position: -100px -36px;}
	ul#mainnav li a.profil:hover, ul#mainnav li a.profil:focus {background-position: -200px -36px;}
	ul#mainnav li a.contact:hover, ul#mainnav li a.contact:focus {background-position: -300px -36px;}

	ul#mainnav li a.home:active {background-position: 0px -72px;}
	ul#mainnav li a.service:active {background-position: -100px -72px;}
	ul#mainnav li a.profil:active {background-position: -200px -72px;}
	ul#mainnav li a.contact:active {background-position: -300px -72px;}


    ul#secnav {width: 800px; list-style: none;}

    ul#secnav li { display: inline; }

    ul#secnav li a {display: block; float: left; height: 98px;	background-image: url(../img/btn_secnav.png); text-indent: -99999px;}

	ul#secnav li a.portfolio {width: 266px; background-position: 0px 0;}
	ul#secnav li a.work {width: 268px; background-position: -266px 0;}
	ul#secnav li a.games {width: 266px; background-position: -534px 0;}

	ul#secnav li a.portfolio:hover, ul#secnav li a.portfolio:focus {background-position: 0px -98px;}
	ul#secnav li a.work:hover, ul#secnav li a.work:focus {background-position: -266px -98px;}
	ul#secnav li a.games:hover, ul#secnav li a.games:focus {background-position: -534px -98px;}

	ul#secnav li a.portfolio:active {background-position: 0px -196px;}
	ul#secnav li a.work:active {background-position: -266px -196px;}
	ul#secnav li a.games:active {background-position: -534px -196px;}


/********************************
        INDEX PAGE
*********************************/

    #content-left { width: 515px; padding: 5px 0px; float: left; text-align:left; }
    #content-right { width: 245px; padding: 5px 10px 25px 10px; float: right; text-align:left; }

/********************************
        PORTFOLIO PAGE
*********************************/
    .work-wrapper { width: 800px; height: 174px; margin: 10px auto; background: url(../img/img_workbg.gif) no-repeat;}
    .work-cbox-left { width: 416px; height: 132px; padding: 8px 17px 0px 17px; float: left; text-align:left;}
    .work-cbox-right { width: 343px; height: 130px; padding: 4px 4px 6px 3px; float: right; text-align:left;}
    .work-footer { width: 766px; height: 26px; padding: 8px 17px 0px 17px; float: right; text-align:left; color: #434444; position: relative; clear: both;}

/********************************
        CONTACT PAGE
*********************************/

.contactbox {
  padding: 5px;
  background-color: #070707;
  border: 1px solid #111111 ;
}


/********************************
        TEXT ELEMENTS
*********************************/
    a { outline: none; }

    a.worknav {  font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, Arial, verdana, sans-serif; font-size: 12px;  text-decoration: none; margin: 0px 5px 0px 5px;}
    a.worknav:link, a.worknav:visited, a.worknav:focus {color: #424242;}
    a.worknav:hover { color: #8cc7da;}
    a.worknav:active {color: #ffdebd;}

    .worknav_active { font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, Arial, verdana, sans-serif; font-size: 12px;  text-decoration: none; color:#ffdebd; margin: 0px 5px 0px 5px;}

    a.webnav {  font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, Arial, verdana, sans-serif; font-size: 12px;  text-decoration: none;}
    a.webnav:link, a.webnav:visited, a.webnav:focus {color: #424242;}
    a.webnav:hover { color: #8cc7da;}
    a.webnav:active {color: #ffdebd;}

    a.footernav {  font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, Arial, verdana, sans-serif; font-size: 11px;  text-decoration: none;}
    a.footernav:link, a.footernav:visited, a.footernav:focus {color: #424242;}
    a.footernav:hover { color: #8cc7da;}
    a.footernav:active {color: #ffdebd;}


#panel form div {margin: 5px 0px 0px 0px; min-height: 25px;}
#panel form label {text-align: right; width: 240px;float: left; }
#panel form input, #panel form select, #panel form textarea {width: 250px; background:#EAE8E8}
#panel form textarea {height: 100px; background:#EAE8E8}
#panel form button {margin-left: 260px;}





/********************************
        TEASER
*********************************/
#accordionContainer {
    width:800px;
    height:225px;
    overflow:hidden;
    background-color:#000;
    position:relative;
    border:0px solid #EEE;
    margin-left:0px;
    margin-top:0px;
}

.asyncImgLoadAccordion { clear: none; }

.accordionImgDiv
{
    width: 600px;
    height: 225px;
    position: absolute;
    border-left:1px solid #222;
    margin-left: 0px;
    background-color: black;
    cursor:pointer;
    overflow: hidden;
}

.accordionImgDiv .slideStrip
{
    position: absolute;
    width: 160px;
    height: 225px;
    left:0px;
    top:0px;
    overflow: hidden;
    background-image: url('img/loading.gif');
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-color: transparent;
}

.accordionImgDiv .slideDesc
{
  position: absolute;
  left: 15px;
  bottom: 15px;
  font: normal 12px/12px "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  color: #8cc7da;
}

.accordionSlideImage
{
    border-left: 0px solid #AAA;
    width:600px;
    height:225px;

   background-image: url('img/loading_big.gif');
   background-repeat: no-repeat;
   background-position: 50% 50%;
}

.accordionDescBack
{
    bottom:-70px;
    margin-left:0px;
    margin-top:0px;
    position:absolute;
    left:0px;
    width:600px;
    height:70px;
    opacity:0.0;
    filter:alpha(opacity=0); /* IE */
    background-color:#000;
    border-top:1px solid #111;
}

.accordionDesc
{
    font-weight:normal;
    font-family: verdana;
    font-size:10px;
    padding-top:0px;
    padding-left:10px;
    text-align:left;
    color:#8cc7da;
    bottom:-70px;
    margin-left:0px;
    margin-top:0px;
    position:absolute;
    left:0px;
    width:600px;
    height:70px;
    opacity:0.0;
    filter:alpha(opacity=0); /* IE */
    background:none;
    border:0px solid red;
}

.accordionDescHeader
{
    margin-top:5px;
    position:static;
    color:#ffdebd;
    font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding-bottom:2px;
    margin-bottom:0px;
}


/*------ Parallax Classification ------*/
#parallax
    {position:relative; overflow:hidden; width:798px; height:209px; margin: 0px auto}

/* Clearing without structural markup */
.clear
  {display: inline-block;}
.clear:after
  {content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clear
  {height: 1%;}
.clear
  {display: block;}