/* Declare font-face fonts */
@font-face
{
	font-family: "Verdana, Arial, sans-serif";
}
@font-face
{
	font-family: "Verdana, Arial, sans-serif";
    font-style: italic;
}
@font-face
{
	font-family: "Verdana, Arial, sans-serif";
    font-style: bold;
}
@font-face
{
	font-family: "Verdana, Arial, sans-serif";
    font-style: bold italic;
}
html{
    text-align:center;
    font-size: 1.0em;
}
header {
    background-color:#000000;
    position: absolute;
    height: 470px;
    width: 100%;
    background-image:url("../images/background.jpg");
    background-repeat: repeat-x;
    top: 0;
    left: 0;
}
a,
a:link,
a:visited{
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-style: italic;
}
header h1{
    position: absolute;
    color: white;
    left: 26%;
    top: 170px;
    font-style: italic;
    font-weight:normal;
    line-height: 1.0em;
}
.header_img{
    position: absolute;
    top: 20px;
    right: 32%;
    z-index:1;
}
.header_tausta{
    background-image:url("../images/backgorund_top.jpg");
    background-repeat:no-repeat;
    background-position: top center;
    width: 100%;
    height: 470px;
}
body {
    background: #1a1a1a;
    font-family: "Asap", sans-serif;
    line-height: 1.4em;
    margin-bottom: 100px;
}
.wrapper{
    padding: 350px 0 0 0;
    margin: 0 auto;
    max-width: 900px;
    min-width: 320px;
    text-align:left;
}
.top_navigation{
    position: absolute;
    top: 300px;
    height: 77px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
    min-width: 320px;
    text-align:left;
}
.top_navigation a,
.top_navigation a:link,
.top_navigation a:visited {
    color: rgb(208, 208, 208);
    text-decoration: none;
    min-width: 105px;
    padding: 5px 30px 0 5px;
    font-style: italic;   
    font-size: 1.3em;
    vertical-align:top;
    display: inline-block;
}
.top_navigation a:hover{
    color:White;
    font-weight: bold;
}
.top_navigation a:first-child{
    min-width: 70px;
}
.top_navigation a:last-child{
    float: right;
    padding: 5px 15px 0 0;
    text-align: right;
}
section{
    position: relative;
    color: rgb(226,226,226);
    background: rgb(72, 72, 72);
    margin: 90px 0 0 0;
    padding: 55px 49px 44px 49px;
    font-size: 0.9em;
}
section h1{
    color: rgb(61,61,61);
    background-color: White;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    margin-left: -60px;
    margin-top: -80px;
    height: 50px;
    line-height: 1.9em;
    padding: 1px 20px 1px 10px;
    margin-bottom: -30px;
    font-size: 1.7em;
    font-weight: normal;
    font-style: italic;
}
section img{
    position: relative;
    margin: -5px;
    padding: 10px 0 10px 0;
    display: block;
}

.one_column_wide{
    width: 100%;
}

.two_columns{
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
    -moz-column-gap:60px; /* Firefox */
    -webkit-column-gap:60px; /* Safari and Chrome */
    column-gap:60px;
}

.screenshot_images{
    position: relative;
    display:inline-block;
    padding: 5px 7px 5px 3px;
    border: none;
}
.screenshot_images_a{
    position: relative;
    display:inline-block;
    padding: 5px 7px 5px 3px;
    border: none;
}

.back_navigation {
    text-decoration: none;
	position: absolute;
	right: 0; 
	bottom: -20px;
    font-size: 0.8em;
    line-height: 1.5em;
    padding: 7px 25px 0 0;
    background-image:url("../images/go_to_top.jpg");
    background-repeat:no-repeat;
    background-position: right center;
}

.app_version{
    margin: 0;
    padding: 20px 0 0 0;
    min-height: 130px;
	width: 100%;
	position: relative;
}

.app_description{
    margin: 0;
    padding: 0 0 20px 0;
	width: 78%;
	min-width: 250px;
	vertical-align: top;
	display: inline-block;
}

.app_description a{
    font-weight: bold;
}


.marketplace{
    margin: 0;
    padding: 0 0 0 0;
	height: 120px;
	min-width: 110px;
	width: 20%;
	text-align: right;
	position: relative;
	vertical-align: top;
    display: inline-block;
}

.market_place_img{
    margin: 0;
    padding: 0 0 0 0;
	width: 100px;
	height: 100px;
    display: inline;
	position:absolute;
	top: 0px;
	right: 0px;
}
.marketplace_a{
    color: White;
    text-decoration: none;
	position:absolute;
	bottom: 0px;
	right: 0px;
	padding: 0 20px 0 0;
    margin: 3px 0 0px 0px;	
    background-image:url("../images/download.jpg");
    background-repeat:no-repeat;
    background-position: right center;
}


.one_column{
    width: 78%;
    display: block;
}
.one_column a{
    font-weight: bold;
}

.feedback{
    width: 45%;
	min-width: 250px;
    margin: 0 2% 0 0;
    display: inline-block;
    vertical-align: top;
    padding: 0 0 20px 0;
}
.feedback h4{
    width: 35%;
    display: inline-block;
    color: rgb(201, 201, 201);
    font-weight: normal;    
    font-style: normal;
    float: left;
    margin: 0;
}
.feedback_info{
    color: rgb(255, 255, 255);
    display: inline-block;
    margin: 0 0 0 20px;
}
.feedback img{
    padding: 0 0 15px 0;
}
form label {
    width: 35%;
    display: inline-block;
    color: rgb(201, 201, 201);
    font-style: normal;
    float: left;
    margin: 0;
}
form input[type="text"], form textarea {
    margin-top: 0px;
    width: 60%;
    background-color: rgb (255, 255, 255);
}
form input[type="submit"]{
    color: white;
    margin: -10px 8px 0 0;
    float: right;
    border: none;
    padding: 0 20px 0 0;
    background-color: rgb(72, 72, 72);
    background-image:url("../images/send.jpg");
    background-repeat:no-repeat;
    background-position: right center;
    font-style: italic;
    font-size: 0.9em;
}

/* Tablets and bigger */
@media only screen and (max-width: 765px) {
    header h1 {
        top: 20px;
        left:auto;
        text-align: center;
        width: 100%;
        padding: 0;
        display: block;
        margin: 0;
    }
    .header_img {
        top: 30px;
        left: 50%;
        right: auto;
        margin: 0 0 0 -151px;
    }
    .wrapper{
        padding: 520px 0 0 0;
    }
    section{        
        padding: 35px 10px;
    }
    section h1{
        margin-left: -20px;
        margin-top: -60px;
    }	
    .top_navigation{
        position: absolute;
        top: 490px;
        z-index: 1;
        margin: 0;
        width:100%;
        max-width: 900px;
        min-width: 240px;
        text-align:center;
    }
    .top_navigation a:last-child{
        float: none;
        padding-right: 10px;
    }
}

/* Feedback on column */
@media only screen and (max-width: 600px) {
    .feedback{
        width: 65%;
    }
}

/* Only for mobile phones */
@media only screen and (max-width: 480px) {
    header{
        width: 100%;
    }
    header h1 {
        top: 60px;
        text-align: center;
        width: 100%;
    }
    .header_img {
        display:none;
    }
    .header_tausta{
        background-image:url("../images/backgorund_top_mobile.jpg");
        height: 470px;
    }
    .top_navigation{
        height: 77px;
        width: 100%;
        margin: -320px auto;
        max-width: 480px;
        text-align:center;
    }
    .top_navigation a{
        text-align: center;
        width: 35%;
        margin: 7px 0 0 0;
    }
    .top_navigation a:last-child{
        float: none;
        text-align: center;
        width: 35%;
        margin: 7px auto;        
    }
    .wrapper{
        padding: 200px 0 0 0;
    }
	section {
        width: 90%;
    }
    section h1{
        font-size: 1.2em;
        height: 30px;
    }
    section img{
        margin-top: 10px;
    }
    .feedback{
        width: 80%;
    }
}

@media only screen and (min-width: 766px) {
    header h1 {    
        top: 170px;
        padding: 0;
        display: block;
        margin: 0 auto;
        left: 5%;
    }
    .header_img {
        top: 30px;
        right: 10%;
        display: block;
    }
    .top_navigation a:last-child{
        margin-right: 5px;
    }
}

@media only screen and (min-width: 850px) {
    header h1 {
        left: 8%;
    }
    .header_img {
        right: 14%;
    }
}

@media only screen and (min-width: 950px) {
    header h1 {
        display: inline-block;
        left: 12%;
    }
    .header_img {
        right: 19%;
    }
}

@media only screen and (min-width: 1100px) {
    header h1 {
        display: inline-block;
        left: 17%;
    }
    .header_img {
        right: 24%;
    }
}


@media only screen and (min-width: 1350px) {
    header h1 {
        display: inline-block;
        left: 23%;
    }
    .header_img {
        right: 30%;
    }
}

@media only screen and (min-width: 1700px) {
    header h1 {
        display: inline-block;
        left: 29%;
    }
    .header_img {
        right: 34%;
    }
}