html, body {
    margin: 0;
    font: 16px/22px "American Typewriter", georgia;
    color: #eee;
    text-shadow: rgb(48,48,48) 0 1px 0px;
    background: #222;
}

ul {
    list-style: none;
    padding: 0;
}

a {
    text-decoration: none;
    color: #eee;
}

a:hover {
    color: #a92a0c;
}

#top {
    position: relative;
    z-index: 10;
    width: 100%;
    background-image: url(../pics/back.jpg);
    border-top: 1px solid #ba3212;
    border-bottom: 1px solid #801f09;
    -moz-box-shadow: 0px 0px 8px #111; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 8px #111; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #111; /* Opera 10.5, IE 9.0 */
    filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#111111'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#111111')"; /* IE8 */
    float: left;
    margin-top: 36px;
}

#wrapper {
    width: 100%;
    background: #333;
    overflow: hidden;
}

#content {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

#iphone {
    margin: 20px auto 10px auto;
    background: url(../pics/iphone.png);
    /* iPhone: 252 x 449, video: 188: 290 */ 
    width: 188px;
    height: 290px;
    padding: 77px 35px 82px 29px;
}

#iphone > * {
    position: absolute;
}

#pen {
    display: block;
    width: 76px;
    height: 365px;
    background: url(../pics/pen.png);
    position: absolute;
    right: 56px;
    top: 40px;
    -webkit-transition: -webkit-transform 0.2s;
}

#pen:hover {
    -webkit-transform: rotate(2deg) scale(1.1);
}

#sharpener {
    width: 93px;
    height: 128px;
    background: url(../pics/sharpener.png);
    position: absolute;
    right: 196px;
    top: 60px;
}

#golingoWrapper {
    -webkit-user-select: none;
    overflow: visible;
    width: 100%;
    clear: both;
    position: relative;
}

.golingo {
    -webkit-user-select: none;
    float: left; 
    position: relative;
    left: 50%;
}

.golingo li {
    -webkit-user-select: none;
    position: relative;
    right: 50%;
    float: left;
}

.golingo div {
    cursor: move;
    -webkit-user-select: none;
    position: relative;
    color: #111;
    font-family: Helvetica;
    -webkit-transform: scale(1) translate3d(0px, 0px, 0px);
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;

    font-size: 42px;
    background: #ccc;
    
    background-image: -moz-linear-gradient(top, #eeeec4, #9c9e80); /* FF3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #eeeec4),color-stop(0, #9c9e80)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeec4', endColorstr='#9c9e80'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeec4', endColorstr='#9c9e80')"; /* IE8 */

    -moz-border-radius: 16px; /* FF1+ */
    -webkit-border-radius: 16px; /* Saf3+, Chrome */
    border-radius: 16px; /* Opera 10.5, IE 9 */

    -moz-box-shadow: 0px 0px 8px #111; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 8px #111; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #111; /* Opera 10.5, IE 9.0 */
    filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#111111'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#111111')"; /* IE8 */

    border: 2px solid rgba(196, 196, 196, 1);
    margin: 2px;
    text-shadow: rgb(220,220,220) 0 2px 2px;
    
    z-index: 0;
}

.golingo .dragging {
    left: -5px;
    top: -5px;
    
    -moz-box-shadow: 6px 6px 8px #111; /* FF3.5+ */
    -webkit-box-shadow: 6px 6px 8px rgba(34,34,34,0.7); /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #111; /* Opera 10.5, IE 9.0 */
    filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#111111'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#111111')"; /* IE8 */
   
    z-index: 2337 !important;
}

.golingo li:nth-child(2n) div{
    margin-top: -2px;
}

.golingo li:nth-child(2n+1) div{
    -moz-transform: rotate(-3deg);  /* FF3.5+ */
    -o-transform: rotate(-3deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-3deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.044);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.044)"; /* IE8 */
}

.golingo li:nth-child(3n) div{
    -moz-transform: rotate(7deg);  /* FF3.5+ */
    -o-transform: rotate(7deg);  /* Opera 10.5 */
    -webkit-transform: rotate(7deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1)"; /* IE8 */
}

#left {
    float: left;
    width: 300px;
    min-height: 100px;
}

.leftContent {
    margin: 0;
}

.leftContent > li {
    margin-bottom: 20px;
}

#footer{
    overflow: hidden;
    font-family: Helvetica, sans-serif;
    min-height: 100px;
    width: 100%;
    
    background-image: -moz-linear-gradient(top, #333333, #222222); /* FF3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #333333),color-stop(0, #222222)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222')"; /* IE8 */
    clear: both;
}

#footer ul {
    padding: 0;
    margin-top: 2em;
    position: relative;
    list-style: none;
    left: 50%;
    float: left;
}

#footer ul li {
    position: relative;
    right: 50%;
    float: left;
    margin: 1em;
}

.notice {
    float: left;
    text-align: center;
    width: 100%;
    margin: 1em 0;
    font-size: 0.9em;
    color: #777;
    letter-spacing: 2px;
}

.social {
    list-style: none;
}

.social li {
    float: left;
}

.social li a:hover {
    -webkit-transform: scale(1);
}

.social li a {
    display: block;
    width: 125px;
    height: 125px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.4s;
}

#facebook {
    background: url(../pics/facebook.png) no-repeat;
}

#twitter {
    background: url(../pics/twitter.png) no-repeat;
}

#appstore {
    display: block;
    width: 171px;
    height: 120px;
    background: url(../pics/appstore2.png);
    margin: 0 auto;
}

h2 {
    font-size: 1.2em;
}

#available {
    position: absolute;
    width: 250px;
    right: 50px;
    top: 200px;
}

#available li {
    padding-left: 40px;
    line-height: 32px;
    background-repeat: no-repeat;
    background-position: center left;
    margin-bottom: 4px;
}
.eng { background-image: url(../pics/lang/uk_small.png); }
.swe { background-image: url(../pics/lang/se_small.png); }

#multitouch {
    position: absolute;
    font-size: 0.9em;
    top: 16px;
    right: 10px;
    max-width: 240px;
}