* {
    margin: 0;
    padding: 0
}
html {
    background: #00263c;
    font: 13px/150% "Helvetica Neue", Helvetica, Arial, verdana, sans-serif;
    height: 100%;
    font-weight: 300;
}
a {
    color: #082130;
    text-decoration: underline;
    outline: none;
}
p a:hover {
    text-decoration: underline;
}
a:active {
    color: #f08231;
}
img {
    border: none;
}
.wrapper {
    width: 940px;
    margin: 0 auto;
}

/*** Navigation ***************************************************************/

#navigation {
    background: #000;
    height: 44px;
    line-height: 44px;
    overflow: hidden;
}
#navigation h1 {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/5226cf12-6c4d-4b76-ab3b-427733b9bcc1.png') no-repeat 0 0;
    width: 85px;
    height: 20px;
    overflow: hidden;
    line-height: 200px;
    margin-top: 11px;
    margin-left: 0px;
    float: left;
    margin-right: 150px;
}
#navigation h1 a {
    display: block;
}
#navigation ul {
    list-style: none;
    font-size: 14px;
    text-transform: uppercase;
    float: left;
}
#navigation ul * {
    float: left;
    text-decoration: none;
}
#navigation ul li a {
    color: #fff;
    display: block;
    padding: 0 25px;
    -webkit-transition: background-position 0.3s linear;
    -moz-transition: background-position 0.3s linear;
    transition: background-position 0.3s linear;
    background-position: 50% 120%;
}
#navigation ul li a:hover,
.pocketpro #nav_pocketpro a,
.support #nav_support a,
.news #nav_news a,
.about #nav_about a,
.tutorial #nav_tutorial a {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/9f7fd94e-cf30-4bc8-b946-0acff4ee2efe.png') no-repeat 50% 100%;
}
#nav_twitter,
#nav_facebook {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/9690fbd0-eb1c-406b-8cba-ad005c6183ad.png') no-repeat 0 0px;
    color: #bbd2de;
    width: 24px;
    height: 24px;
    overflow: hidden;
    line-height: 100px;
    float: right;
    margin-top: 10px;
    margin-right: 15px;
}
#nav_facebook {
    background-image: url('https://blogic-production.s3.amazonaws.com/82/369eaf3d-c5ec-473a-af62-c71277eb8c14.png');
}

/*** Support Components *******************************************************/

.wrapper h2 {
    font-weight: 300;
    font-size: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.support .teaser {
    background: transparent url('http://www.pocketpro.org/images/icon-support.png') no-repeat 93% 0;
}
.tutorial .teaser {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/012edc61-8729-4599-8136-eb7e54cee585.png') no-repeat 94% 0;
}

.support .sidebar .section,
.news .sidebar .section {
    background: transparent;
    padding-left: 20px;
}
.support #body1 .description,
.news #body1 .description,
.about #body1 .description,
.tutorial #body1 .description {
    width: 600px;
    margin-top: 30px;
    margin-bottom: 50px;
}

/*** News Components **********************************************************/

.news #body1 .columns .column:first-child,
.about #body1 .columns .column:first-child,
.tutorial #body1 .columns .column:first-child {
    padding: 0;
    width: 65%;
}


/*** About Components *********************************************************/

.about #body1 .columns .column:first-child .section,
.tutorial #body1 .columns .column:first-child .section {
    padding: 0;
}


/*** Columns ******************************************************************/

.columns {
    overflow: hidden;
    clear: both;
}
#body2 .columns {
    padding-left: 0px;
}
.columns .column {
    float: left;
    width: 31%;
    margin-left: 3%;
}
.columns > .column:first-child {
    margin-left: 0;
}
.columns .column.sidebar {
    background: rgba(8,36,52,0.05);
    border: 1px solid rgba(8,36,52,0.05);
    border-radius: 5px;
    padding-bottom: 20px;
}

/*** Section ******************************************************************/

.section {
	padding-left: 0px;
	position: relative;
	margin-bottom: 40px;
}
.section h3,
.section h4 {
    clear: both;
    font-size: 17px;
    font-weight: 700;
    line-height: 115%;
    margin-bottom: 0.2em;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.section h4 {
    font-size: 15px;
}
.section h3 a {
    color: #082130;
    display: block;
    text-decoration: none;
}
.section h3 span {
    display: block;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 2px;
    margin-top: -3px;
    margin-bottom: 6px;
    border-bottom: 1px dotted #a3bdca;
}
.section ul,
.section ol {
    margin-left: 15px;
}
.section img.thumbnail {
    margin-left: -74px;
    position: relative;
    top: -22px;
    float: left;
    z-index: 1000;
}
.section img.imgright {
    position: static;
    float: right;
    margin: 0;
    margin-left: 10px;
}
.section img.imgleft {
    position: static;
    float: left;
    margin: 0;
    margin-right: 10px;
}
.section p {
    margin-bottom: 1em;
}
#body1 .sidebar .section .description {
    color: #617A88;
    font-size: 12px;
    line-height: 120%;
    width: auto;
    margin: 0;
    margin-bottom: 0;
    font-weight: 400;
}
.sidebar .section {
    padding: 15px 20px;
    margin: 0;
}
.sidebar .section h3 {
    font-weight: 300;
    font-size: 25px;
}
/*** First body ***************************************************************/

#body1 {
     background: #b5cedb url('https://blogic-production.s3.amazonaws.com/82/8d5df5ab-d688-4aa6-8c84-8808b0c024e6.gif') repeat-x 0 100%;
     color: #082130;
     min-height: 440px;
}
#body1 .wrapper {
    padding: 30px 0 20px 0;
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/41a98e42-5dca-4985-8c7c-056c26d6d43b.jpg') no-repeat 50% 0;
}
#body1 .teaser {
    overflow: hidden;
    padding: 20px 0;
}
#body1 .teaser img {
    float: right;
    position: relative;
    bottom: 10px
}
.pocketpro #body1 .teaser h2,
.pocketpro #body2 .teaser h2,
.pocketpro #body3 .teaser h2 {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/8342cae5-055b-4325-9847-0b204cf9ba99.png') no-repeat 0 0;
    width: 426px;
    height: 121px;
    overflow: hidden;
    line-height: 400px;
    margin-bottom: 20px;
    margin-top: 10px;
}
#body1 p.description,
#body2 p.description,
#body3 p.description {
    font-size: 19px;
    width: 460px;
    line-height: 135%;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    margin-bottom: 40px;
    font-weight: 300;
}
#body2 p.description {
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    margin-bottom: 0px;
    margin-left: -6px;
}
#body1 .teaser p.description:first-line,
#body2 .teaser p.description:first-line,
#body3 .teaser p.description:first-line {
    font-weight: 700;
}

/*** Second Body **************************************************************/

#body2 {
    color: #bbd2de;
    text-shadow: 0 -1px 1px #000;
    padding-top: 40px;
}
.index #body2 {
    min-height: 700px;
}
#body2 .wrapper {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/b19dc01c-f19b-433d-aa9a-15e9f11f854b.jpg') no-repeat 50% 0;
}
.pocketpro #body2 .teaser h2 {
    background-image: url('https://blogic-production.s3.amazonaws.com/82/6a6c8658-2dd9-4d19-b2b2-80097bf0a34d.png');
    height: 65px;
    margin-left: -34px;
}
#body2 h3 a,
#body2 h3 {
    color: #fff;
    text-shadow: 0 -1px 1px #000;
}
#body2 .teaser {
    padding-left: 395px;
    position: relative;
    margin-bottom: 120px;
}
#body2 .teaser img {
    position: absolute;
    left: -30px;
    top: 0;
}
#body2 .teaser p:first-line {
    color: #fff;
}
#body2 .teaser p .button {
    float: left;
    margin: 30px 0;
    margin-left: -7px;
}
#body2 .teaser p .button span {
    padding-right: 90px;
}

/*** Third Body ***************************************************************/

#body3 {
    background: #b4ceda url('http://www.pocketpro.org/images/bg-body3.jpg') repeat-x 0 0;
    margin-top: -30px;
}
#body3 > div {
    background: transparent url('http://www.pocketpro.org/images/bg-body3.gif') repeat-x 0 100%;
    padding: 25px 0;
    min-height: 300px;
}
#body3 .teaser .slideshow {
    float: right;
    position: relative;
    top: -20px;
    width: 450px;
}
#body3 .teaser .slideshow img {
    position: absolute;
    top: 0px;
    left: 0px;
    float: none;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration:12s;
}
.slideshow .slide1 {
    -webkit-animation-name: fadein1;
}
.slideshow .slide2 {
    -webkit-animation-name: fadein2;
    opacity: 0;
}
.slideshow .slide3 {
    -webkit-animation-name: fadein3;
    opacity: 0;
}
@-webkit-keyframes fadein1 {
    0% {opacity:1;}
    33% {opacity:1;}
    35% {opacity:0;}
    75% {opacity:0;}
    96% {opacity:0;}
    99% {opacity:1;}
}
@-webkit-keyframes fadein2 {
    0% {opacity:0;}
    31% {opacity:0;}
    33% {opacity:1;}
    62% {opacity:1;}
    65% {opacity:0;}
    100% {opacity:0;}
}
@-webkit-keyframes fadein3 {
    0% {opacity:0;}
    25% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    64% {opacity:1;}
    97% {opacity:1;}
    100% {opacity:0;}
}
.pocketpro #body3 .teaser h2 {
    background-image: url('https://blogic-production.s3.amazonaws.com/82/a698a0f8-4109-4f32-b5ce-1ef03dc76b15.png');
    margin-top: 60px;
    margin-bottom: -15px;
    margin-left: -35px;
    width: 460px;
}

.pocketpro #body3 .teaser .description {
    padding-left: 5px;
    margin-bottom: 0;
}
#body3 .button {
    width: 280px;
    margin-bottom: 40px;
    margin-top: 20px;
    float: left;
    clear: none;
}
#body3 .button span em {
    background-image: url('https://blogic-production.s3.amazonaws.com/82/a698a0f8-4109-4f32-b5ce-1ef03dc76b15.png');
}
#body3 .columns {
    margin-top: 30px;
    clear: both;
    float: left;
    width: 100%;
}

/*** Footer *******************************************************************/

#footer {
    background: #000 url('https://blogic-production.s3.amazonaws.com/82/5e2cd14b-8203-441d-9192-4fbaa716a21f.gif') repeat-x 0 0;
    color: #bbd2de;
    padding: 30px 0;
    padding-top: 35px;
    text-shadow: 0 -1px 1px #000;
}
#footer p:first-child:first-line {
    color: #fff;
    font-weight: 500;
}
#footer p a {
    color: #fff;
    font-weight: normal;
}


/*** Buttons ******************************************************************/

.button,
.button:hover,
.button * {
    text-decoration: none;
}
.button,
.button span {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/69f20dd0-8736-4908-abb0-b9f8e98e333a.png') no-repeat 0 0;
    height: 43px;
    line-height: 43px;
    color: #fff;
    display: block;
    clear: both;
    padding-left: 15px;
    font-size: 20px;
    text-shadow: 0 -1px 1px #3a6500;
    font-weight: 300;
}
.button {
    margin-bottom: 12px;
}
.button span {
    background-position: 100% 0;
    position: relative;
    right: -4px;
    padding: 0;
    padding-right: 20px;
}
.button:active {
    background-position: 0 -100px;
}
.button:active span {
    background-position: 100% -100px;
}
.button span em {
    background: transparent url('https://blogic-production.s3.amazonaws.com/82/a698a0f8-4109-4f32-b5ce-1ef03dc76b15.png') no-repeat 0 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
    line-height: 200px;
    position: absolute;
    right: 0;
    top: -20px;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
}
#body2 .button span em {
    background-image: url('https://blogic-production.s3.amazonaws.com/82/9a9777a1-dfd4-4456-a9e1-933171feab01.png');
}
.button:hover span em {
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
}
.button.download,
.button.download span,
.button.contact,
.button.contact span {
    background-image: url('https://blogic-production.s3.amazonaws.com/82/de6c21f4-2aad-43ee-8eef-6184248b5ef6.png');
    color: #082130;
    text-shadow: 0 1px 1px #fff;
}
.button.download span em,
.button.contact span em {
    background-image: url('http://www.pocketpro.org/images/price-free.png');
    top: -18px;
}
.button.contact span em {
    background-image: url('https://blogic-production.s3.amazonaws.com/82/25c0db0a-ac86-4dce-88fd-79ef956290bd.png');
    width: 90px;
}

/*** Screenshots **************************************************************/

.screenshots {
    border-top: 1px solid rgba(8,36,52,0.05);
    clear:  both;
    padding: 20px 0;
    margin-bottom: 10px;
    overflow: hidden;
    margin-left: -10px;
}
#body2 .screenshots {
    border-top-color: rgba(255,255,255,0.1);
}
.screenshots ul {
    width: 980px;
    margin: 0 auto;
    list-style: none;
}
.screenshots ul > li:first-child {
    margin-left: 0px;
}
.screenshots ul li {
    float: left;
    margin: 0 18px;
    text-align: center;
}
.screenshots ul li a {
    text-decoration: none;
}
.screenshots ul li img {
    display: block;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    margin-bottom: 10px;
}
.screenshots ul li a:hover img {
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
}
.screenshots ul li span {
    background: rgba(0,0,0,0.1);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 2px 10px;
    -webkit-transition: background 0.3s ease-in-out;
    -webkit-box-shadow: 0 1px 2px rgba(0,38,60,0.2);
    -moz-box-shadow: 0 1px 2px rgba(0,38,60,0.2);
}
#body2 .screenshots ul li a:hover span {
    background: rgba(255,255,255,0.2);
}
#body2 .screenshots ul li span {
    background: rgba(255,255,255,0.1);
}
.screenshots ul li a:hover span {
    background: rgba(0,0,0,0.2);
}
.screenshots ul li a:active span {
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/*** Zoom Box *****************************************************************/

#ZoomBox {
    z-index: 20000 !important;
}
#ZoomBox img {
    -webkit-box-shadow: none !important;
}
#ShadowBox {
    display: none !important;
}

/*** Download Page ************************************************************/

body.download {
    background: #000 url('http://www.pocketpro.org/images/bg-download.jpg') no-repeat 50% 50%;
    color: #fff;
    font-weight: 300;
    height: 100%;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    line-height: 120%;
    font-size: 15px;
}
#download {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    margin-left: -300px;
    text-align: center;
    padding-top: 50px;
}
#download h1 {
    font-weight: 300;
    font-size: 27px;
    margin-bottom: 5px;
}
#download p {
    color: #BBD2DE;
}
#download a {
    color: #fff;
}
#download .progress {
    background: transparent url('http://www.pocketpro.org/images/progress.gif') no-repeat 0 0;
    width: 230px;
    height: 18px;
    position: absolute;
    left: 212px;
    top: 5px;
}