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

COLOURS

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

/********************************
        GENERAL STYLES
*********************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    line-height: 1.5;
}


body {background: #131311 url(../img/img_sitebg.gif) repeat-x;; 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: #2882b4; font-size: 16px }
h3 {font-weight: normal;}
h4 {font-weight: normal; color: #2882b4; font-size: 12px }
p {line-height: 20px;}
strong {color: #c2d0d4;}
.formbox { text-align:right; }
.clearer {clear: both;}
.cbox { margin:5px 0 5px 0; border-top: 1px solid #373f42}
.img-services {margin: 5px 0px 15px 0px;}
.img-work {margin: 15px 0px 5px 0px;} 

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

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

    #secnav-wrapper { width: 960px; height: 98px;  margin: 8px auto 0 auto;}

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

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

    #promo-wrapper { width: 960px; height: 90px; margin: 10px auto 0 auto; padding-top: 10px; font-size: 11px; color: #424242; border-top: 1px solid #2c4652;}
    #footer { width:  100%; height: 130px; margin: 10px auto 0 auto; padding-top: 5px; font-size: 11px; color: #424242; background: #0e0e0e; border-top: 1px solid #363635;}
    #footer-wrapper { width:  960px; height: 130px; margin: 0px auto 0 auto; background-image: url(../img/img_footerbg.gif);}
    #footer-left { width: 640px; height: 100px; padding: 0px 0px; float: left; text-align:left; }
    #footer-right { width: 320px; height: 100px; padding: 0px 0px; float: right; text-align:left; }
    #copy-left { width: 640px; height: 30px; padding: 0px 0px; float: left; text-align:left; border-top: 1px solid #363635;}
    #copy-right { width: 320px; height: 30px; padding: 0px 0px; float: right; text-align:right; border-top: 1px solid #363635;}

/********************************
        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: 960px; 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: 320px; background-position: 0px 0;}
	ul#secnav li a.work {width: 320px; background-position: -320px 0;}
	ul#secnav li a.games {width: 320px; background-position: -640px 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: -320px -98px;}
	ul#secnav li a.games:hover, ul#secnav li a.games:focus {background-position: -640px -98px;}

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


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

    #content-left { width: 620px; padding: 5px 0px; float: left; text-align:left; }
    #content-right { width: 300px; padding: 5px 10px 5px 10px; float: right; text-align:left; }

/********************************
        PORTFOLIO PAGE
*********************************/
    .work-wrapper { width: 960px; height: 188px; margin: 10px auto; background: url(../img/img_workbg.gif) no-repeat;}
    .work-cbox-left { width: 416px; height: 147px; padding: 8px 17px 0px 17px; float: left; text-align:left; }
    .work-cbox-right { width: 503px; height: 145px; padding: 4px 4px 6px 3px; float: right; text-align:left;}
    .work-footer { width: 926px; height: 27px; padding: 6px 17px 0px 17px; float: right; text-align:left; color: #434444; position: relative; clear: both;}

/********************************
        DETAIL PAGE
*********************************/
    #galleria { height: 490px; }
    .detail-wrapper { width: 960px; height: 150px; margin: 10px auto; background: url(../img/img_info-bg.gif) no-repeat;}
    .detailText { width: 622px; height: 134px; padding: 8px; float: left; text-align:justify; line-height: 1.3; }
    .detailLogo { width: 318px; height: 150px; float: right; }
    .detailText div { width: 200px; text-align: left; float: left; }
    .detailText h3 { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 3px; }
    .detailNav { width: 960px; height: 107px; background: url(../img/img_detail-nav.jpg) no-repeat;}
    .detailNav a { width: 318px; height: 98px; background: url(../img/btn_detail-nav.png) 0px 0px no-repeat; margin: auto; display: block;}
    .detailNav a:hover { background-position: 0 -98px; }
    .detailNav a:active { background-position: 0 -196px; }

/********************************
        GAME PAGE
*********************************/
    .game-wrapper { width: 960px; height: 350px; margin: 10px auto; background: url(../img/img_gamebg.gif) no-repeat;}
    .game-floristikus { width: 960px; height: 314px; background: url(../img/game/img_floristikus01.jpg) no-repeat;}
    .game-footer { width: 926px; height: 21px; padding: 8px 17px 0px 17px; text-align:left; color: #434444; position: relative; clear: both;}


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

.contactbox {
  padding: 5px;
  background-color: #1b1b19;
  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: #2882b4;}
    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: 12px;  text-decoration: none;}
    a.footernav:link, a.footernav:visited, a.footernav:focus {color: #666663;}
    a.footernav:hover { color: #2882b4;}
    a.footernav:active {color: #ffdebd;}


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





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

.asyncImgLoadAccordion { clear: none; }

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

.accordionImgDiv .slideStrip
{
    position: absolute;
    width: 160px;
    height: 299px;
    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: #868684;
}

.accordionSlideImage
{
   border-left: 0px solid #AAA;
   width:708px;
   height:299px;
   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:708px;
    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:12px;
    padding-top:0px;
    padding-left:10px;
    text-align:left;
    color:#2882b4;
    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;}