/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
	-webkit-touch-callout: none;
	/*-webkit-user-select: none;*/
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
		padding: 0px;
    	margin: 0px;
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
	overflow:hidden;
    /*position: absolute;
    	top: 0px;
    	bottom: 0px;
    	left: 0px;
    	right: 0px;
    	overflow: hidden;
    	padding: 0px;
    	margin: 0px;
    	backface-visibility: hidden;
    	-webkit-backface-visibility: hidden;
    	-webkit-transform: translate3d(0,0,0);
    	-moz-transform: translate3d(0,0,0);
    	-o-transform: translate3d(0,0,0);
    	-ms-transform: translate3d(0,0,0);
    	transform: translate3d(0,0,0);*/
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

@font-face {
    font-family: "Lobster";
    src: url("../fonts/Lobster/Lobster.ttf") format("opentype");   
        /* Make sure you defined the correct path, which is related to
            the location of your file `my_css.css` */ 
    }

@font-face {
  font-family: "Changa-regular";
  src: url("../fonts/Changa/ChangaOne-Regular.ttf") format("opentype");   
      /* Make sure you defined the correct path, which is related to
          the location of your file `my_css.css` */ 
  }

@font-face {
  font-family: "Changa-italic";
  src: url("../fonts/Changa/ChangaOne-Italic.ttf") format("opentype");   
      /* Make sure you defined the correct path, which is related to
          the location of your file `my_css.css` */ 
  }

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
	font-family:'Changa-regular';
	text-transform:none;
	color:white;
	text-align:center;
	width:100%;
	margin-top:5px;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

/*.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

*/


.app-view {
	width:100%;
	height:100%;
	position:absolute;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	overflow:hidden;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*ACCESS REQUEST VIEW*/

.access {
	background:url('../img/login-bg-i3.jpg') top no-repeat;
	width:100%;
	height:100%;
	position:absolute;
}

.loginform {
	background:url('../img/fields-login.png') top center no-repeat;
	width:100%;
	height:auto;
	position:absolute;
	text-align:center;
	padding-bottom:10px;
}

.signupform {
	background:url('../img/fields-register.png') top center no-repeat;
	width:100%;
	height:auto;
	position:absolute;
	text-align:center;
	padding-bottom:10px;
}

.loginput {
	width:88%;
	height:35px;
	text-align:left;
	font-size:17px;
	color:black;
	top:5px;
	position:relative;
	border:none;
	font-weight:bold;
	background:none;
}

.button-big {
	width:100%;
	height:45px;
	display:block;
	position:relative;
}

.orbrkr {
	width:100%;
	height:15px;
	display:block;
	position:relative;
	background: url('../img/or.png') center no-repeat;
	
}

.facebook {
	background: url('../img/facebook-login.png') center 0 no-repeat;
}

.facebook:active {
	background: url('../img/facebook-login.png') center -45px no-repeat;
}

.login {
	background: url('../img/button-login.png') center 0 no-repeat;
}

.login:active {
	background: url('../img/button-login.png') center -45px no-repeat;
}

.signup {
	background: url('../img/button-signup.png') center 0 no-repeat;
}

.signup:active {
	background: url('../img/button-signup.png') center -45px no-repeat;
}

.toolbar {
	width:100%;
	background: #007aae;
	height:44px;
	position:absolute;
	padding:0px;
	/*float:left;*/
	/*clear:both;*/
	text-align:center;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	overflow: hidden;
	backface-visibility: hidden;
	display:block;
	left: 0px;
	opacity: 1;
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/*Alertas*/

.alerta {
	width:99%;
	height:60px;
	padding:1%;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	z-index:999;
}

.error {
	background:rgba(239, 98, 98 , 0.7);
	color:white;
	text-align:center;
	font-weight:bold;
	position:absolute;
	top:0px;
}

/*TOOLBAR*/

.app-header {
	float:left;
	width:62%;
}

	.app-header img {
		float:right;
		margin-right:2%;
		margin-top:9px;
	}

.app-header h1 .flag-icon {
	float:right;
	margin-right:2%;
	margin-top:9px;
	width:16px;
	height:16px;
	display:block;
}

.esp{
	background: url('../img/Spain-Flag-16.png') no-repeat;
}

.eng {
	background: url('../img/United-Kingdom-Flag-16.png') no-repeat;
}

.button-top {
	height:44px;
	overflow:hidden;
	width:14%;
}

.leftb {
	float:left;
	margin-left:5%;
}

.rightb {
	float:right;
	margin-right:5%;
}

.contextual-button {
	background: url('../img/button-topleft.png') no-repeat left center;
}

.contextual-button:active {
	background: url('../img/button-topleft-ontap.png') no-repeat left center;
}

.add-button {
	background:url('../img/button-add.png') no-repeat right center;
}

.add-button:active {
	background:url('../img/button-add-ontap.png') no-repeat right center;
}

.back-button {
	background: url('../img/back-button.png') no-repeat left center;
}

.esp-button {
	background: url('../img/Spain-Flag-16.png') right center no-repeat
}

.bookmark-button {
	background: url('../img/button-bookmark.png') right center no-repeat;
}

.bookmark-button:active {
	background: url('../img/button-bookmark-ontap.png') right center no-repeat;
}

.search-button {
	background: url('../img/button-search.png') right center no-repeat;
}

.search-button:active {
	background: url('../img/button-search-ontap.png') right center no-repeat;
}

.esp-button span{
	color:white;
	padding-top:12px;
	float:left;
	text-transform:none;
	font-size:14px;
}

.location-item {
	padding-top:20px;
	padding-bottom:20px;
	width:100%;
	margin:0 auto;
	border-bottom: solid 1px #cecece;
	/*margin-left:10px;*/
	
}

.location-container {
	width:96%;
	margin:0 auto;
	background:url('../img/arrow.png') no-repeat right;
}

.location-item:active {
	background: #fffdc5;
}


	.location-item .location-foto {
		float:left;
		margin-right:10px;
	}
	
	.location-item .location-info {
		float:left;
		margin-right:10px;
	}
		
		.location-item .location-info .location-stars{
			float:left;
			clear:both;
		}
		
		.location-item .location-info .location-direction{
			float:left;
			clear:both;
			font-size:14px;
		}
		
		.location-item .location-info .location-category{
			float:left;
			clear:both;
			font-size:12px;
		}
	
		.location-item .location-info h3 {
			float:left;
			margin-top:0px;
			margin-bottom:5px;
			color:red;
			line-height:14px;
		}

.content-holder {
	width: 100%;
	opacity: 1;
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
	overflow: auto;
	-webkit-backface-visibility: visible;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: auto;
	padding: 0px;
	margin: 0px;
	-webkit-overflow-scrolling: touch;
	min-width: 100%;
	min-height: 100% backface-visibility: hidden;
}

.main-content {
	/*float:left;
		clear:both;*/
	width:100%;
	height:100%;
	/*padding-top:44px;*/
	/*padding-bottom:48px;*/
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	position:absolute;
	top:-12px;
}


.bookshelf {
	float:left;
	width:100%;
	clear:both;
	height:202px;
	background: url('../img/bookshelf.png') center bottom no-repeat;
	
	
}

.bookshelf:first-child {
	height:8px;
}

.library {
	background: white;
	/*height:2000px;*/
	display:block;
	height:auto;
	padding-bottom:100px;
	
}

.book-item {
	width:160px;
	height:176px;
	float:left;
	position:relative;
	margin-top:6px;
}

.book-badge {
	position:absolute;
	width:26px;
	height:35px;
	z-index:3;
	right:18px;
}

.rss-badge {
	background: url('../img/rss-badge.png');
}

.book-cover {
	background:url('../img/book-cover.png') -3px center  no-repeat;
	position:absolute;
	width:170px;
	height:176px;
	z-index:2;
}

.book-cover .text-container {
	position: relative;
	width: 128px;
	height: 160px;
	margin-left: 16px;
	margin-top: 3px;
}

.book-cover h2 {
	width:100%;
	text-align: center;
	font-size: 15px;
	color: white;
	text-transform: none;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
	/*vertical-align: bottom;
		display: table-cell;
		alignment-baseline: baseline;*/
	font-weight: lighter;
	position: absolute;
	bottom: 0;
	overflow:hidden;
}

.book-img {
	position:absolute;
	margin-left:12px;
	margin-top:3px;
	width:133px;
	height:160px;
	overflow:hidden;
	z-index:1;
}

.book-img img {
	position:absolute;
	top:0;
	left:-25%;
}

.tapbar {
	background: #007aae;
	clear:both;
	width:100%;
	position:fixed;
	bottom:0;
	height:48px;
	z-index:99;
}
	
	
	.tapbar .icon {
		float:left;
		text-align:center;
		height:12px;
		padding-top:28px;
		display:block;
	}
	
	.tapbar .two-icons {
		width:50%;
	}
	
	.tapbar .three-icons {
		width:33.333333333%;
	}
	
	.tapbar .four-icons {
		width:25%;
	}
	
	.tapbar .five-icons {
		width:50%;
	}
	
	
	.tapbar .icon span {
		color:white;
		font-family: 'HelveticaNeue', 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
		font-size:10px;
		font-weight:bold;
		vertical-align:bottom;
		height:100%;
		text-transform:none;
	}
	
	.tapbar .selected {
		background:rgba(0, 0, 0, 0.2);
		width: 100%;
		height: 48px;
		position: relative;
		top: -46px;
	}
	
	.tapbar .no-selected {
		/*background:rgba(0, 0, 0, 0.2);*/
		width: 100%;
		height: 48px;
		position: relative;
		top: -46px;
	}
	
	.icon .no-selected:active {
		background:rgba(0, 0, 0, 0.2);
		width: 100%;
		height: 48px;
		position: relative;
		top: -46px;
	}
	
	/* Icon Images  */
	
	.home-icon {
		background: url('../img/icon-home.png') center 4px no-repeat;
	}
	
	.add-icon {
		background: url('../img/icon-add.png') center 4px no-repeat;
	}
	
	.newwords-icon {
		background: url('../img/icon-newwords.png') center 3px no-repeat;
	}
	
	.learnedwords-icon {
		background: url('../img/icon-learnedwords.png') center 3px no-repeat;
	}
	
	.settings-icon {
		background: url('../img/icon-settings.png') center 3px no-repeat;
	}
	
	
	
	.cerca-icon {
		background: url('../img/icon-location.png') center 3px no-repeat;
	}
	
	.mapa-icon {
		background: url('../img/icon-map.png') center 3px no-repeat;
	}
	
	.cuenta-icon {
		background: url('../img/icon-account.png') center 3px no-repeat;
	}
	
	.favoritos-icon {
		background: url('../img/icon-favorites.png') center 3px no-repeat;
	}
	
	
	
	#magazine{
		width:320px;
		height:400px;
	}
	#magazine .turn-page{
		background-color:#ccc;
		background-size:100% 100%;
	}


/*LECTURE VIEW*/

.toolbar-lecture {
	width:100%;
	background:rgba(0, 0, 0, 0.7);
	height:44px;
	position:absolute;
	padding:0px;
	/*float:left;*/
	/*clear:both;*/
	text-align:center;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	overflow: hidden;
	backface-visibility: hidden;
	display:block;
	left: 0px;
	opacity: 1;
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
	z-index:12;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.toolbar-lecture .app-header h1 {
	font-size:18px;
	font-family:'Georgia';
	font-weight:lighter;
	line-height:34px;
}

.lecture-container {
	width:100%;
	height:100%;
	background:url('../img/bg-lecture-1.jpg');
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	position:absolute;
	margin-top:44px;
}

.reading-block {
	width:92%;
	margin:0 auto;
}

.reading-block h1:first-child {
	margin-top:60px;
}

.reading-block p {
	font-size:1.3em;
	
}

#mapa1 {
	width:100%;
	height:100%;
	position:absolute;
	display:block;
}

#mapa2 {
	width:100%;
	height:200px;
	display:block;
	position:absolute;
	margin-bottom:40px;
}


/*IPHONE 4 AND IPHONE 5 **********************************************************************/	

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	
		.access {
			background:url('../img/login-bg-i4.jpg');
			-webkit-background-size: 320px 480px;
		}
		
       
		
		.library {
			background-image: url('../img/base@2x.jpg');
			-webkit-background-size: 320px 893px; 
		}
		
		/*.tapbar {
					background: url('../img/tapbar-bottom@2x.jpg');
					-webkit-background-size: 640px 48px; 
				}*/
		
		.bookshelf {
			background: url('../img/bookshelf@2x.png') center bottom no-repeat;
			-webkit-background-size: 320px 42px; 
		}
		
		.add-icon {
			background: url('../img/icon-add@2x.png') center 6px no-repeat;
			-webkit-background-size: 36px 32px; 
		}
		
		.newwords-icon {
			background: url('../img/icon-newwords@2x.png') center 5px no-repeat;
			-webkit-background-size: 36px 32px; 
		}

		.learnedwords-icon {
			background: url('../img/icon-learnedwords@2x.png') center 4px no-repeat;
			-webkit-background-size: 36px 32px; 
		}

		.settings-icon {
			background: url('../img/icon-settings@2x.png') center 4px no-repeat;
			-webkit-background-size: 36px 32px; 
		}
		
		.cerca-icon {
			background: url('../img/icon-location@2x.png') center 3px no-repeat;
			-webkit-background-size: 36px 32px; 
		}

		.mapa-icon {
			background: url('../img/icon-map@2x.png') center 3px no-repeat;
			-webkit-background-size: 36px 32px; 
		}

		.cuenta-icon {
			background: url('../img/icon-account@2x.png') center 3px no-repeat;
			-webkit-background-size: 36px 32px; 
		}

		.favoritos-icon {
			background: url('../img/icon-favorites@2x.png') center 3px no-repeat;
			-webkit-background-size: 36px 32px; 
		}
		
		.contextual-button {
			background: url('../img/button-topleft@2x.png') no-repeat left center;
			-webkit-background-size: 38px 34px; 
		}
		
		.contextual-button:active {
			background: url('../img/button-topleft-ontap@2x.png') no-repeat left center;
			-webkit-background-size: 38px 34px; 
		}
		
		
		.add-button {
			background:url('../img/button-add@2x.png') no-repeat right center;
			-webkit-background-size: 35px 31px; 
		}
		
		.add-button:active {
			background:url('../img/button-add-ontap@2x.png') no-repeat right center;
			-webkit-background-size: 35px 31px; 
		}

		.esp-button {
			background: url('../img/Spain-Flag-32.png') right center no-repeat;
			-webkit-background-size: 16px 16px; 
		}
		
		.bookmark-button {
			background: url('../img/button-bookmark@2x.png') right center no-repeat;
			-webkit-background-size: 17px 23px; 
		}

		.bookmark-button:active {
			background: url('../img/button-bookmark-ontap@2x.png') right center no-repeat;
			-webkit-background-size: 17px 23px; 
		}
		
		.search-button {
			background: url('../img/button-search@2x.png') right center no-repeat;
			-webkit-background-size: 38px 34px; 
		}

		.search-button:active {
			background: url('../img/button-search-ontap@2x.png') right center no-repeat;
			-webkit-background-size: 38px 34px; 
		}
		
		.book-cover {
			background:url('../img/book-cover.png') -3px center  no-repeat;
			-webkit-background-size: 170px 176px; 
		}
		
		.book-img {
			position:absolute;
			margin-left:15px;
			margin-top:3px;
			width:135px;
			height:160px;
			overflow:hidden;
			z-index:1;
		}
		
		.rss-badge {
			background: url('../img/rss-badge@2x.png');
			-webkit-background-size: 26px 35px; 
		}
		
		.orbrkr {
			background: url('../img/or@2x.png') no-repeat;
			-webkit-background-size: 299px 15px; 
		}

		.facebook {
			background: url('../img/facebook-login@2x.png') center 0 no-repeat;
			-webkit-background-size:298px 90px;
		}

		.facebook:active {
			background: url('../img/facebook-login@2x.png') center -45px no-repeat;
			-webkit-background-size:298px 90px;
		}

		.login {
			background: url('../img/button-login@2x.png') center 0 no-repeat;
			-webkit-background-size:298px 90px;
		}

		.login:active {
			background: url('../img/button-login@2x.png') center -45px no-repeat;
			-webkit-background-size:298px 90px;
		}

		.signup {
			background: url('../img/button-signup@2x.png') center 0 no-repeat;
			-webkit-background-size:298px 90px;
		}

		.signup:active {
			background: url('../img/button-signup@2x.png') center -45px no-repeat;
			-webkit-background-size:298px 90px;
		}
		
}



@media only screen and (min-height: 560px) and (max-device-height: 1136px) {

/* iPhone 5 CSS */

.access {
	background:url('../img/login-bg-i5.jpg') no-repeat top;
	-webkit-background-size: 320px 568px;
}

}