/* reset
-------------------------------------------------------------------------------------------------------------------------------*/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size:1em; font-weight:normal; font-style:normal; }
ul,ol { list-style:none; }
fieldset,img { border:none; }
caption,th { text-align:left; }
table { border-collapse:collapse; border-spacing:0; }


/* standards - components
-------------------------------------------------------------------------------------------------------------------------------*/
div.clear { clear:both; }

h1        { text-transform:uppercase; color:#fff; font-family:Georgia, Verdana, Arial;  font-size:24px; margin:0 0 10px 0; }
h1 span   { color:#74d7ec; }

h2        { color:#fff; font-family:Georgia, Verdana, Arial; font-size:24px; margin:0 0 7px 0; padding:15px 0 0 0; }


h1 + p { padding:0; }
p      { line-height:23px; font-size:14px; color:#fff; padding:10px 0 0 0; }
p a    { color:#f8015a; }


a             { color:#fff; text-decoration:none; }
a:hover       { color:#f8015a; text-decoration:underline; }
a:focus       { outline:0; }
a.arrow       { color:#D2CFC5; height:16px; float:left; display:block; font-size:12px; background:url(../images/arrowMedium.png) no-repeat right center; padding:0 24px 0 0; text-decoration:none; }
a.arrow:hover { color:#fff; }


span.sIFR-alternate { display:none; }


/* layout - linear
-------------------------------------------------------------------------------------------------------------------------------*/
body                { font-size:10px; background:url(../images/background1.jpg) repeat-x #101318; font-family:"Georgia", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial; color:#fff; padding:0 0 40px 0; }

div#backToTop         { z-index:99; display:none; position:fixed; bottom:20px; right:15px; }
div#backToTop a       { font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial; -moz-border-radius:4px; -webkit-border-radius:4px; background:#1b222a; color:#fff; padding:4px; font-size:9px; }
div#backToTop a:hover { color:#73d7f1; text-decoration:none; }

div#center          { width:812px; margin:0pt auto; padding-top:40px; background:url(../images/background_center.jpg) no-repeat; }

div#header          { position:relative; font-size:10px; overflow:hidden; height:48px; }
div#header div.a    { float:left; width:390px; padding:16px 0 0 0; }
div#header div.b    { position:absolute; left:382px; top:0; padding:0 0 0 0; }
div#header div.c    { float:right; padding:2px 0 0 0; }


ul#navi li          { float:left; margin:10px 0 0 16px; }
ul#navi li.divider  { margin:13px 0 0 10px; }
ul#navi li a        { font-size:11px; text-transform:uppercase; color:#fff; text-shadow:1px 1px 1px #000; display:block; text-decoration:none; padding:2px; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial;  }
ul#navi li a:hover  { color:#74d7ec;  }
ul#navi li a.active { color:#84888b; }

div#footer          { color:#84888b; border-top:1px solid #324657; margin:35px 0 0 0; font-size:9px; padding:10px 0 0 0; }
div#footer a        { color:#84888b; text-decoration:none; font-size:9px; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial; }
div#footer a:hover  { color:#74d7ec; }
div#footer div.a    { float:left; }
div#footer div.b    { float:right; }
div#footer a.active { color:rgb(200,200,200); }


/* shared
-------------------------------------------------------------------------------------------------------------------------------*/
div#content               { margin:85px 0 0 0;  }


/* start
-------------------------------------------------------------------------------------------------------------------------------*/
div#start { padding:35px 0 0 0 ; }

div#start div.images               { position:relative; height:245px; overflow:hidden; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); }
div#start div.images img           { display:none; position:absolute; cursor:pointer; }
div#start div.images img.first     { display:block; }
div#start div.images div.progress  { position:absolute; bottom:0px; z-index:99; height:4px; background:#3c5269; width:0%; opacity:0.4; }
div#start div.infos                { display:none; position:absolute; top:50%; left:10px; z-index:99; font-size:24px; letter-spacing:2.0px; font-family:Georgia; }

div#start div.bottom   { padding:25px 0 0 0; }
div#start h1           { color:#84888b; }
div#start h1 span.one  { color:#74d7ec; }
div#start h1 a { color:#f20a56; }
div#start h1 a:hover  { color:#f20a56; text-decoration:underline; }
div#start div.left    { width:420px; float:left; margin:25px 40px 0 0; }
div#start div.right   { width:330px; float:left; margin:25px 0 0 0; background:url(../images/bubble.png) no-repeat; text-align:right; padding:110px 0 0 0; }


/* about
-------------------------------------------------------------------------------------------------------------------------------*/
div#content.about div.a            { margin:0 0 70px 0; overflow:hidden; }
div#content.about div.a h1         { margin:0; }
div#content.about h1.special.sIFR-replaced  { position:relative; top:-15px; }


div#content.about div.a p            { padding:0; }
div#content.about div.a div.left     { float:left; width:230px; }
div#content.about div.a div.right    { float:left; width:582px; }
div#content.about div.a div.bottom   { background:url(../images/tshirts.png) no-repeat 0px 27px; padding:20px 0 0 105px; width:365px; }
div#content.about div.a div.bottom p { color:#73d8ea; padding:0; font-style:italic; }

div#content.about div.b         { margin:0 0 70px 0; overflow:hidden; background:url(../images/kernkompetenzen.png) no-repeat right top; }
div#content.about div.b p.a     { width:550px; }
div#content.about div.b p.b     { width:640px; }
div#content.about div.b p span  { font-size:16px; font-weight:bold; }

div#content.about div.c  { width:520px; padding:0 0 0 0px; }


/* leistungen
-------------------------------------------------------------------------------------------------------------------------------*/
div.services p.top            { padding:0 0 30px 0; }
div.services div.box          { float:left; width:391px; margin:0 0 35px 0; }
div.services div.box.boxLeft  { margin-right:30px; }
div.services p.bottom         { clear:both; }


div.services div.tags       { overflow:hidden; padding:0px 0 30px 0; }
div.services div.tags div   { cursor:pointer; -moz-border-radius:4px; -webkit-border-radius:4px; background:#3c5269; color:#D2CFC5; margin:0 5px 0 0; float:left; padding:3px; font-size:9px; }


/* referenzen
-------------------------------------------------------------------------------------------------------------------------------*/
div#references        { clear:both; }

div#refCenter h1.top            { text-transform:none; }
div#refCenter h1.top span.small { color:#fff; font-size:14px; }

div#refCenter h2         { text-transform:none; }
div#refCenter h2 span    { font-size:14px; color:#74d7ec; }



/* view: magazine */
div#magazine                          { position:relative; height:690px; }
div#magazine div.one                  { position:absolute; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); overflow:hidden; z-index:98; }
div#magazine div.one a                { display:block; }
div#magazine div.image                { overflow:hidden; cursor:pointer; }
div#magazine div.one.small div.image  { width:196px; height:152px; }
div#magazine div.one.medium div.image { width:192px; height:266px; }
div#magazine div.one.large div.image  { width:406px; height:314px; }
div#magazine div.one.specialA div.image  { width:394px; height:200px; }
div#magazine div.one.specialB div.image  { width:400px; height:152px; }
div#magazine div.one.specialC div.image  { width:190px; height:269px; }

/* border allg. */
div#magazine div.border            { position:absolute; z-index:99; }
div#magazine div.border a          { display:block; height:100%; width:100%; }
div#magazine div.border.mouseover  { border:3px solid #73d7f1; z-index:99; }

/* border spec. */
div#magazine div.border.small      { width:193px; height:149px; }
div#magazine div.border.medium     { width:189px; height:263px; }
div#magazine div.border.large      { width:403px; height:311px; }
div#magazine div.border.specialA   { width:391px; height:197px; }
div#magazine div.border.specialB   { width:397px; height:149px; }
div#magazine div.border.specialC   { width:187px; height:266px; }

div#magazine div#yourProject       { position:absolute; height:149px; width:190px; right:0px; top:212px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); }
div#magazine div#yourProjectBorder { height:146px; width:187px; right:0px; top:212px;  }
div#magazine div#yourProject a     { display:block; }

table#logos            { margin:20px 0 0 ; width:100%; }
table#logos td         { height:100px; vertical-align:middle; }
table#logos td.left    { text-align:left;  }
table#logos td.middle  { text-align:center; }
table#logos td.right   { text-align:right; }



/* single reference
-------------------------------------------------------------------------------------------------------------------------------*/
div#reference           { padding:80px 0 0 0;  }
div#reference h1        { font-size:16px; }
div#reference div.left  { float:left; width:190px; margin:0 20px 0 0; }

div#reference div.right       { float:right; width:600px; height:580px; position:relative; }
div#reference div.right img   { -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); }
div#reference div.right img.a { width:598px; /*height:473px;*/ }
div#reference div.right img.b { width:354px; /*height:329px;*/ position:absolute; left:220px; }

div#reference div.status    { position:relative; top:-10px; }
div#reference div.year      { position:relative; top:-20px; }
div#reference div.year p    { color:#73d7f1; }
div#reference p             { padding:0; text-align:left; }


div#reference div.tags      { padding:10px 0 0 0; overflow:hidden; }
div#reference div.tag       { font-family:Verdana; -moz-border-radius:4px; -webkit-border-radius:4px; background:#1b222a; color:#fff; margin:0 5px 0 0; float:left; padding:4px; font-size:9px; }

div#reference strong { display:block; font-size:14px; padding:20px 0 0 0; color:#878986; }


/* kontakt
-------------------------------------------------------------------------------------------------------------------------------*/
div#kontakt div.left   { width:406px; float:left; }
div#kontakt div.right  { width:406px; float:left; padding:20px 0 0 0; }

div#kontakt input, textarea { color:#fff; background:#20262b; border:1px solid rgb(80,80,80); font-family:"Georgia", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial; font-size:14px; }
div#kontakt div.succ        { text-align:center; padding:55px 0 0 0; }


div#kontakt div.data        { margin:0 0 20px 0; }
div#kontakt div.data div    { overflow:hidden; padding:8px 0 8px 0; border-bottom:1px dotted rgb(80,80,80);}
div#kontakt div.data label  { font-size:14px; width:130px; float:left; display:block; }
div#kontakt div.data span   { font-size:14px; float:left; }

div#kontakt form div        { overflow:hidden; padding:8px 0 8px 0; }
div#kontakt form label      { font-size:14px; padding:3px 0 3px 0; width:200px; float:left; display:block; }
div#kontakt input           { width:350px; padding:3px; }
div#kontakt textarea        { width:350px; padding:3px; height:150px; margin-top:2px; }
div#kontakt input.submit    { width:120px; padding:6px; cursor:pointer; text-transform:uppercase; text-shadow:1px 1px 1px #000; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial; float:right; border:none; margin:0 44px 0 0; background:none; text-align:right; font-size:11px; }
div#kontakt input.submit:hover { color:#74d7ec; }

div#kontakt a             { color:#f8015a; text-decoration:none; }
div#kontakt a:hover       { text-decoration:underline; }


/* maps
-------------------------------------------------------------------------------------------------------------------------------*/
div#map                { height:600px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); }
div#map div.infoWindow { color:#000;  }


/* draggable
-------------------------------------------------------------------------------------------------------------------------------*/
div#dropzone       { overflow:hidden; height:400px; border:3px solid #999276; margin:0 0 20px 0; background:rgb(30,30,30); }
div#dropzone img   { width:850px; }

div.draggable      { cursor:pointer; overflow:hidden; border:3px solid #999276; width:50px; height:50px; float:left; margin:0 15px 15px 0; }
div.draggable img  { width:200px; }