* { margin: 0; padding: 0; outline:0; }

body {
    font-size: 12px;
    line-height: 14px;
    font-family: Tahoma, Arial, Sans-Serif;
    color: #fff;
    background: #1b0d0a url(../images/background.jpg) top center;
}

a { color: #fff; text-decoration: none; cursor:pointer; }
a:hover { text-decoration: underline; }

a img { border: 0; }

h1#logo a { position: absolute; width: 291px; height: 78px; top: 28px; right: 50px; background: url(../images/logo.png); }
.logotype { position: absolute; width: 216px; height: 216px; top: 16px; left: -17px; background: url(../images/logotype.png); z-index: 2; }
h2 { font-family: "Myriad Pro", Arial, sans-serif; font-size: 30px; color: #77b5c6; border-bottom: 1px solid #5b4740; font-weight: normal; line-height: 40px; }
h3 { font-family: "Myriad Pro", Arial, sans-serif; font-size: 26px; color: #fff; font-weight: normal; line-height: 36px; border-bottom: 1px solid #7c6c66; margin-left: 3px; margin-bottom: 7px; }
h4 { font-family: "Myriad Pro", Arial, sans-serif; font-size: 18px; color: #77b5c6; line-height: 26px; font-weight: normal; padding-left: 1px; }

input, textarea, select { font-family: Arial, Helvetica, sans-serif; font-size:12px; }
textarea { overflow:hidden; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { width: 932px; padding: 0 18px 0 36px; margin: 0 auto; position: relative; }
.shell-bg { background: url(../images/shell-bg.png) bottom no-repeat; position: absolute; width: 986px; height: 122px; bottom: 0; left: 0; z-index: 1; }

#header { width: 932px; height: 274px; background: url(../images/content-t.png); position: relative; z-index: 1; }

#navigation { padding: 80px 0 0 237px; height: 50px; }
#navigation ul { list-style: none; }
#navigation ul li { float: left; height: 50px; padding-right: 3px; }
#navigation ul li a { float: left; width: 106px; height: 33px; text-transform: lowercase; font-size: 16px; line-height: 32px; background: url(../images/nav.gif); text-align: center; padding-top: 17px; }
#navigation ul li a:hover, #navigation ul li.active a { text-decoration: none; padding-top: 0; height: 50px; line-height: 50px; background-position: 0 -51px; }

#main { width: 932px; background: url(../images/content-m.png) repeat-y; position: relative; z-index: 3; }

#main .holder { width: 900px; padding: 0 16px; }

#content { margin-top: -108px; position: relative; border-bottom: 1px solid #5b4740; z-index: 5; }

#sidebar { width: 188px; padding-left: 54px; margin-top: -31px; position: relative; z-index: 6; }

#footer { width: 768px; padding: 0 77px 0 87px; background: url(../images/content-b.png) top no-repeat; padding-top: 29px; height: 24px; position: relative; z-index: 4; }
#footer a { font-size: 11px; }
#footer .right { padding-top: 2px; }

.thumbs-holder { width: 183px; height: 196px; background: url(../images/apps-bg.gif) 4px 0 repeat-y scroll; }
.thumbs-holder ul { list-style: none; width: 144px; }
.thumbs-holder ul li { float: left; padding: 0 4px 7px 4px; width: 64px; height: 61px; }

.socials { width: 202px; height: 32px; position: absolute; top: -119px; right: 36px; z-index: 10; }
.socials p { float: left; line-height: 30px; font-size: 18px; padding: 1px 11px 0 0; }
.socials a { width: 32px; height: 32px; float: left; margin-right: 12px; }
.btn-facebook { background: url(../images/btn-facebook.gif); }
.btn-twitter { background: url(../images/btn-twitter.gif); }

.narrow { width: 601px; margin-right: 20px; padding: 0 10px 10px 0; }
.narrow .summary { width: 419px; padding: 39px 1px 0 0; font-family: "Myriad Pro", Arial, sans-serif; font-size: 24px; line-height: 29px; }
.narrow .summary p { padding: 2px 9px 0 2px; }

.wide { width: 849px; margin-left: 25px; }
.wide h2 { margin-left: 13px; margin-bottom: 8px; }
.wide .summary { width: 440px; padding-top: 39px; font-family: "Myriad Pro", Arial, sans-serif; font-size: 20px; line-height: 24px; }
.wide .summary p { padding: 2px 0 0 2px; }

#main .contact { border-bottom: 0; float: right; }
.contact .iphone .screenshots img, .about .iphone .screenshots img { display: inline; }
.contact .summary h2 { font-size: 50px; }
.contact .summary h5 { font-size: 24px; font-weight: normal; margin: 1em 0 0.3em; }

.services { margin-right: 1em; width: 207px; padding-top: 74px; }
.services ul { font-family: Tahoma, arial, sans-serif; list-style: none; padding: 5px 0 0 0; }
.services ul li { padding: 1px 0 9px 16px; background: url(../images/bullet.gif) 3px 4px no-repeat; }

.iphone { width: 131px; height: 169px; background: url(../images/iphone.gif); padding: 43px 20px 45px 20px; }
.iphone .screenshots { width: 131px; height: 169px; overflow: hidden; }
.iphone .screenshots img { display: none; }
.download-btn { font-family: "Myriad Pro", Arial, sans-serif; font-size: 18px; width: 201px; height: 37px; line-height: 36px; text-align: center; padding: 22px 0 0 27px; background: url(../images/download-btn.gif); } 
.download-btn:hover { text-decoration: none; color: #eff8a2; }

.bottom-l, .bottom-r { width: 412px; padding-top: 5px; }
.bottom-l p, .bottom-r p { padding-bottom: 15px; }
.bottom-l ul, .bottom-r ul { padding-left: 15px; } 
.bottom-l { margin-left: 28px; }
.bottom-r { margin-right: 27px; }
.bottom-r h3 { margin-right: 30px; }

.box-blue { background: url(../images/box-desc-m.gif) repeat-y; }
.box-blue .box-t { background: url(../images/box-desc-t.gif) top no-repeat; }
.box-blue .box-t .box-b { background: url(../images/box-desc-b.gif) bottom no-repeat; padding: 23px 12px 10px 12px; min-height: 120px; }

.box-green { background: url(../images/box-notes-m.gif) repeat-y; }
.box-green .box-t { background: url(../images/box-notes-t.gif) top no-repeat; }
.box-green .box-t .box-b { background: url(../images/box-notes-b.gif) bottom no-repeat; padding: 23px 12px 10px 12px; min-height: 120px; }

.bigger p { font-size: 16px; line-height: 19px; padding: 7px; }

.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url(../images/scroll-grey.gif) 13px 4px no-repeat; }
.jScrollPaneDrag { position: absolute; background: url(../images/circle.png) no-repeat; cursor: pointer; overflow: hidden; }