/* General */

body {	
	background-repeat:no-repeat;
	background-color: #f8f8f8;
	-webkit-tap-highlight-color: #999999;
}

hr {
	margin-top: 2em;
	margin-bottom: 2em;
}

a:hover {
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}

:focus {
  outline: 0;		/* Chrome: hide outline on tap */
}

.frame {
	display: block;
	margin: 0;
	width: 100%;
	border: none;
}

.button {
	color: #FFFFFF;
	background: #17DDD5;
	font-size: 0.9em;
	padding: 2px 16px;
	text-align: center;
	line-height: 32px;
	max-width: 200px;
	border: none;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
}

.button a {
	color: #FFFFFF;
}

.button:hover {
	background-color: #CCC;
}

.button:touch {
	color: #07CBD2; 
}

#content {
	margin: 0 auto;
}

#container {
  width: 85%;
  margin: 120px auto 40px auto;
  max-width: 768px;
  text-align: center;
}

#main {
	margin: 50px auto 30px auto;
	padding: 1% 10%; 
	max-width: 768px;
}

/* Press */

#photo { background-image: url(/img_/press/press_orkut.jpg) }
#logos { background-image: url(/img_/press/press_logo.png) }
#iOS { background-image: url(/img_/press/press_iOS.png) }
#android { background-image: url(/img_/press/press_android.png) }

.press {
  margin-bottom: 2em;
}


/* Header */

#header {
	position: fixed;
	width: 100%;
	top: 0px;
	height: 50px;
	z-index: 99;
	box-shadow: 0px 5px 20px 0px rgba(128, 128, 128, 0.1);
}

#nav {
	position: absolute;
	line-height: 48px;
	right: 10%;
	font-size: 0.8em;
}	

.links {
	font-size: 0.9em;
	margin-top: 20px;
}

.linkspace {
	margin: 0 20px;
}

#logo {
	position: absolute;
	top: 10px;
	left: 10%;
}

#menu {
	display: none;
	position: absolute;
	top: 15px;
	right: 10%;
}

#menuDIV {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	display: none;
	margin: 0 auto;
	z-index: 99;
}

#menuDIV .frame {
	height: 350px;
	box-shadow: 0px 5px 20px 0px rgba(128, 128, 128, 0.5);
}

#close {
	position: absolute;
	top: 15px;
	right: 10%;
}

#language {
	position: absolute;
	left: 10%;
	line-height: 48px;
	font-size: 12pt;
}

#langDIV {
	width: 200px;
	position: fixed;
	top: 0px;
	display: none;
	padding-left: calc(10% - 20px);
	z-index: 99;
}

#langDIV .frame {	
	height: 196px;	/* 49px for each language (EN, ES, FR, PT) */
	box-shadow: 0px 5px 20px 0px rgba(128, 128, 128, 0.5);
}

.langFlag {
	height: 20px;
	margin-right: 10px;
	vertical-align: middle;
}

#min-header {
	position: fixed;
	width: 100%;
	top: 0px;
	height: 50px;
	z-index: 99;
	background-color: #FFF;
}

#min-header img {
  display: block;
  margin: 0 auto;
  padding-top: 12px;
}

/* Best of Hello */

#bestofhello {
  text-align: center;
  margin: 0 auto;
  padding: 30px 5%;
}

.jot,
.featured {
	display: inline-block;
	padding: 1%;
	width: 40%;
	min-width: 300px;
	max-width: 400px;
}

.featured {
  width: 60%;
  max-width: 480px;
}

.jot img,
.featured img {
	vertical-align: middle;
	width: 100%;
	border-radius: 4px;
}

.creator {
	font-size: 0.9em;
	display: absolute;
	margin: 6px 0;
	text-align: left;
	color: #333333;
}

.creator img{
	margin-right: 10px;
	width: 40px;
	border-radius: 4px;
}


/* Footer */

#getapp {
	padding: 30px 0;
	text-align: center;
	background: #FFFFFF;
}

#getapp p {
	margin: 0 auto;
	width: 90%;
}

.download {
  margin: 0 auto;
}

.download_btn {
	width: 35%;
	max-width: 320px;
	min-width: 260px;
	margin-top: 15px;
}

#footer {
	text-align: center;
	padding-bottom: 20px;
	overflow: hidden;
	height: 440px;
}

.icon {
	margin: 0 15px;
	width: 26px;
	height: 26px;
}

#footer .links {
	position: relative;
	left: 0;
	margin: 1.5em auto;
	width: 100%;
}

@media (min-width: 1200px) {

	#nav,
	#menu {
		right: 15%;
	}

	#logo,
	#language {
		left: 15%;
	}

	#langDIV {
		padding-left: calc(15% - 20px);
	}

	#main {
		padding: 1% 15%;
	}
}

@media (max-width: 1024px) {

	#main {
		font-size: 1.0em;
	}
}

@media (max-width: 960px) {

	.linkspace {
		margin: 0 12px;
	}
}

@media (max-width: 768px) {

  #nav {
    display: none;
  }

  #menu {
    display: block;
  }

  .download {
    width: 320px;
    text-align: center;
  }

	.jot,
	.featured {
		padding: 2% 0;
		width: 100%;
		max-width: 400px;
	}

	#footer {
		height: 360px;
	}
}

@media (max-width: 480px) {

	#nav,
	#menu,
	#close {
		right: 7%;
	}

	#logo,
	#language {
		left: 7%;
	}

	#langDIV {
		padding-left: calc(7% - 20px);
	}

	#main {
		padding: 1% 7%;
	}

	.download_icon {
		max-width: 300px;
		min-width: 260px;
	}

	.jot,
	.featured {
		max-width: 320px;
	}
}

@media (max-width: 320px) {

	.jot,
	.featured {
		min-width: 280px;
	}
}