/* default */
*, html                             { font-family: 'Source Sans Pro', Helvetica, sans-serif; font-weight: 200; color: #61575e; font-size: 12px; margin: 0; padding: 0; outline: none; }
html                                { height: 100%; }
body                                { background-color: #fff; }
div.clear                           { clear: both; height: 0; }
img                                 { border: 0; }
a                                   { text-decoration: none; }
strong                              { font-weight: 600; }

/* header */
div#header                          { width: 200px; margin: auto; padding: 70px 0; }
div#header a                        { width: 100%; height: 38px; display: block; background: transparent url("../images/logo.png") no-repeat; }

/* footer */
div#footer                          { position: fixed; bottom: 0; right: 0; padding: 5px; }
div#footer  a                       { color: #c750a2; }
div#footer  a:hover                 { color: #61575e; text-decoration: underline; }

/* home */
div#cloud                           { width: 1000px; height: 700px; margin: auto; position: relative; /*-webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;*/ }
div#cloud div                       { position: absolute; background-repeat: no-repeat; }
div#cloud div:hover                 { cursor: pointer; }
div#cloud.deactivated div:hover     { cursor: default; }
div#cloud div.lightmap              { width: 145px; height: 101px; left: 151px; background-image: url("../../images/home/lightmap.jpg"); }
div#cloud div.mercedes              { width: 195px; height: 102px; top: 107px; background-image: url("../../images/home/mercedes.jpg") }
div#cloud div.insideout             { width: 146px; height: 155px; top: 54px; left: 301px; background-image: url("../../images/home/insideout.jpg") }
div#cloud div.photography           { width: 95px; height: 156px; top: 107px; left: 201px; background-image: url("../../images/home/photography.jpg") }
div#cloud div.unseen                { width: 145px; height: 156px; top: 214px; left: 50px; background-image: url("../../images/home/unseen.jpg") }
div#cloud div.istanbul              { width: 96px; height: 49px; top: 214px; left: 301px; background-image: url("../../images/home/istanbul.jpg") }
div#cloud div.opendoors             { width: 196px; height: 102px; top: 268px; left: 201px; background-image: url("../../images/home/opendoors.jpg") }
div#cloud div.history               { width: 146px; height: 102px; top: 375px; left: 100px; background-image: url("../../images/home/history.jpg") }
div#cloud div.scribo                { width: 146px; height: 155px; top: 375px; left: 251px; background-image: url("../../images/home/scribo.jpg") }
div#cloud div.maxima                { width: 96px; height: 209px; left: 452px; background-image: url("../../images/home/maxima.jpg") }
div#cloud div.paris                 { width: 146px; height: 209px; top: 107px; left: 553px; background-image: url("../../images/home/paris.jpg") }
div#cloud div.trialerror            { width: 146px; height: 210px; top: 214px; left: 402px; background-image: url("../../images/home/trialerror.jpg") }
div#cloud div.snot                  { width: 196px; height: 48px; top: 429px; left: 402px; background-image: url("../../images/home/snot.jpg") }
div#cloud div.beer                  { width: 95px; height: 103px; top: 482px; left: 402px; background-image: url("../../images/home/beer.jpg") }
div#cloud div.wishlist              { width: 246px; height: 49px; top: 482px; background-image: url("../../images/home/wishlist.jpg") }
div#cloud div.rups                  { width: 96px; height: 156px; top: 536px; left: 100px; background-image: url("../../images/home/rups.jpg") }
div#cloud div.traces                { width: 196px; height: 102px; top: 536px; left: 201px; background-image: url("../../images/home/traces.jpg") }
div#cloud div.modernist             { width: 95px; height: 210px; top: 482px; left: 503px; background-image: url("../../images/home/modernist.jpg") }
div#cloud div.pistol                { width: 146px; height: 156px; top: 429px; left: 603px; background-image: url("../../images/home/pistol.jpg") }
div#cloud div.elephant              { width: 196px; height: 101px; top: 322px; left: 553px; background-image: url("../../images/home/elephant.jpg") }
div#cloud div.dynamic               { width: 146px; height: 155px; top: 54px; left: 704px; background-image: url("../../images/home/dynamic.jpg") }
div#cloud div.smarty                { width: 196px; height: 102px; top: 214px; left: 704px; background-image: url("../../images/home/smarty.jpg") }
div#cloud div.az                    { width: 96px; height: 209px; top: 322px; left: 754px; background-image: url("../../images/home/az.jpg") }
div#cloud div.taqwacores            { width: 145px; height: 102px; top: 322px; left: 855px; background-image: url("../../images/home/taqwacores.jpg") }
div#cloud div.grandpa               { width: 196px; height: 102px; top: 536px; left: 754px; background-image: url("../../images/home/grandpa.jpg") }
div#cloud div.title                 { width: 100%; background: #fff; position: absolute; bottom: 0; z-index: 5000; margin-left: -5px; padding: 5px; display: none; }
div#cloud div.title *               { font-size: 11px; color: #61575e; display: block; line-height: 11px; }
div#cloud span a                    { color: #61575e; font-size: 10px; }
div#cloud span a:hover              { color: #c750a2; }
div#cloud span.about                { position: absolute; top: 680px; left: 604px; }
div#cloud span.impress              { display: inline-block; position: absolute; top: 614px; left: 937px; opacity: .5; -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

/* about */
div#about                           { width: 1000px; margin: 30px auto; position: relative; display: none; }
div#about table tr td               { vertical-align: top; }
div#about table tr td.left          { width: 430px; text-align: right; }
div#about table tr td.center        { width: 20px; }
div#about table tr td.right         { width: 300px; text-align: left; }
div#about table tr td.headline      { font-size: 14px; font-weight: 600; }

/* content box */
div.box                             { width: 1000px; margin: 0 auto 40px; color: #61575e; }
div.box h1                          { font-size: 16px; margin-bottom: 20px; color: #61575e; }
div.box p                           { font-size: 12px; margin-bottom: 10px; color: #61575e; }
div.box p.no-margin                 { margin-bottom: 0; }
div.box a                           { color: #c750a2; }
div.box a:hover                     { color: #61575e; text-decoration: underline; }

/* tree patch box */
div.three                           { width: 700px; margin: 0 auto 15px;}
div.three div.left                  { width: 175px; height: 100%; float: left; display: table; }
div.three div.left div              { display: table-cell; vertical-align: bottom; padding-right: 15px; text-align: right; }
div.three div.left div strong       { display: block; }
div.three div.center                { width: 350px; height: 100%; float: left; }
div.three div.right                 { width: 175px; height: 100%; float: left; display: table; }
div.three div.right div             { display: table-cell; vertical-align: bottom; padding-left: 15px; }
div.three div.right div strong      { display: block; }
div.box.three.text                  { width: 350px; margin: auto; }
div.box.three.text div              { margin: 15px 0; }
div.box.three.text div strong       { display: block; }

/* titled text */
div.box.titled                      { width: 600px; margin: 15px auto; }
div.box.titled div.title            { width: 50px; float: left; text-align: right; margin-right: 50px; white-space: nowrap; }
div.box.titled div.title strong     { display: block; }
div.box.titled div.text             { width: 500px; float: left; }

/* lightbox */
div#loading                         { width: 100%; height: 100%; position: absolute; z-index: 9999; background: #fff; opacity: .7; display: none; }
div#loading div.image               { width: 66px; height: 66px; background: transparent url("../images/loading.gif") no-repeat; margin: -33px 0 0 -33px; top: 50%; left: 50%; position: absolute; }
div#lightbox                        { width: 100%; height: 100%; display: none; z-index: 9999; position: absolute; }
div#lightbox div.closer             { width: 100%; height: 178px; background: #fff; opacity: .7; }
div#lightbox div.closer:hover       { cursor: pointer; }
div#lightbox div.inner              { width: 1000px; height: 600px; margin: auto; overflow: auto; }
div#lightbox.full div.inner         { width: 100%; }
/*div.lightbox.content div.text     { width: 700px; margin: 10px auto 70px; text-align: justify; }*/

/* slider */
.fpsSlidesContainer                 { width: 100%; white-space: nowrap; overflow: hidden; font-size: 0; position: relative; }
.fpsSlidesContainer *               { font-size: 0; }
.fpsSlidesContainer ul              { list-style: none; position: relative; }
.fpsControls                        { position: absolute; }
.fpsControls .previous              { width: 50%; height: 100%; float: left; }
.fpsControls .next                  { width: 50%; height: 100%; float: right; }
.fpsControls .previous:hover        { cursor: pointer; background: transparent url("../images/arrow-left.png") no-repeat 3% center;  }
.fpsControls .next:hover            { cursor: pointer; background: transparent url("../images/arrow-right.png") no-repeat 97% center; }
.fpsTimeBar                         { position: absolute; top: 0; }
.fpsTimeBar div                     { height: 2px; background-color: #fff; opacity: .7; }
.fpsSlide                           { display: inline-block; vertical-align: top; margin: 0 5px; opacity: .3; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }
.fpsSlide.active                    { opacity: 1; }
.fpsLastSlide                       { margin-right: 0; }

/* dev helper */
div#dev                             { position: absolute; top: 200px; left: 10px; }
div#dev ul                          { list-style: square inside; white-space: nowrap; }
div#dev *                           { font-size: 11px; color: #aaa; }