/*
* Itransformer.es is an online application to transform images
Copyright (C) 2013 Manolo Salsas
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Contact: manolez@gmail.com - http://msalsas.com
* */
* {
margin: 0px;
padding: 0px;
}
body {
font: 1em Varela Round, verdana, sans-serif;
text-align: center;
max-width:2000px;
min-width:333px;
}
.articulo {
background: #bbddcc; /* Old browsers */
background: -moz-linear-gradient(-45deg, #AAC8CD 0%, #9EE588 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#AAC8CD), color-stop(100%,#9EE588)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #AAC8CD 0%,#9EE588 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #AAC8CD 0%,#9EE588 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #AAC8CD 0%,#9EE588 100%); /* IE10+ */
background: linear-gradient(135deg, #AAC8CD 0%,#9EE588 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAC8CD', endColorstr='#9EE588',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #999999;
padding: 10px;
margin-bottom: 15px;
}
.seccion {
font-size: 1.1em;
}
.seccion h1 {
font: 1.5em fuente_titulo, Varela Round, verdana, sans-serif;
margin: 10px 10px;
}
.seccion h2 {
font: 1.3em fuente_titulo, Varela Round, verdana, sans-serif;
margin: 10px 10px;
}
.seccion, footer, .menu, .menu_auth, .articulo, figure, figcaption {
display: block;
}
#social {
display: inline-block;
zoom: 1;
*display: inline;
margin: 0px 2px 2px 150px;
}
.articulo footer {
text-align: right;
}
time {
color: #999999;
}
figcaption {
font-style: italic;
text-align: center;
}
#agrupar {
background: #4ab279; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRhYjI3OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMWRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4ab279 0%, #b1dddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ab279), color-stop(100%,#b1dddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4ab279 0%,#b1dddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4ab279 0%,#b1dddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4ab279 0%,#b1dddd 100%); /* IE10+ */
background: linear-gradient(to bottom, #4ab279 0%,#b1dddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ab279', endColorstr='#b1dddd',GradientType=0 ); /* IE6-8 */
width: 100%;
text-align: left;
}
#img {
display: block;
margin: auto;
text-align: center;
}
#ini_mess {
background: #98613F;
font-size:0.6em;
/*height: 35px;*/
text-align: left;
position: relative;
top:0px;
left:0px;
width:100%;
}
#ini_mess p {
width: 82%;
}
#cabecera {
background: #e5a076; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1YTA3NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2RjY2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e5a076 0%, #f7dccd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5a076), color-stop(100%,#f7dccd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5a076 0%,#f7dccd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5a076 0%,#f7dccd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e5a076 0%,#f7dccd 100%); /* IE10+ */
background: linear-gradient(to bottom, #e5a076 0%,#f7dccd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a076', endColorstr='#f7dccd',GradientType=0 ); /* IE6-8 */
box-shadow: rgba(2,2,2,0.8) 5px 5px 20px;
min-height: 100px;
padding: 10px;
}
#img_cabecera {
margin: 5px;
max-width:100%;
height:auto;
width:auto\9; /*ie8*/
}
#img_cabecera2 {
position: absolute;
top: 15px;
left: 44%;
}
#twi {
float:right;
}
.seccion {
background: #206620;
background: #B2E8DA;
float: left;
width: 40%;
margin: 20px;
box-shadow: rgba(2,2,2,0.8) 5px 5px 20px;
}
#menu {
display: inline-block;
font: bold small-caps 0.7em Varela Round, sans-serif;
position: relative;
top: 0px;
left: 0%;
}
#menu_auth {
display: inline-block;
font: bold small-caps 0.6em Varela Round, sans-serif;
left: 80%;
position: relative;
top: -120px;
width: 170px;
}
#menu li, #menu_auth li, #languages li {
display: inline-block;
zoom: 1;
*display: inline;
padding: 5px;
}
#menu a {
color: #000000;
text-decoration: none;
}
#menu_auth a {
color: #000000;
text-decoration: none;
}
#columna {
height:auto;
float: left;
width: 48%;
margin: 20px 10px 10px 10px;
padding: 20px;
background: #bbddcc; /* Old browsers */
background: -moz-linear-gradient(-45deg, #AAC8CD 0%, #9EE588 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#AAC8CD), color-stop(100%,#9EE588)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #AAC8CD 0%,#9EE588 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #AAC8CD 0%,#9EE588 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #AAC8CD 0%,#9EE588 100%); /* IE10+ */
background: linear-gradient(135deg, #AAC8CD 0%,#9EE588 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAC8CD', endColorstr='#9EE588',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
font-size: 0.8em;
line-height:30px;
box-shadow: rgba(2,2,2,0.8) 5px 5px 20px;
}
#pie {
background: #B28D4A;
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
box-shadow: rgba(2,2,2,0.8) 5px 5px 20px;
}
#img_cargada {
display: none;
height:auto;
max-width:100%;
width:auto\9; /*ie8*/
}
#lienzo {
position: absolute;
}
#img_cargando {
margin-left: 40%;
display: none;
max-width:100%;
}
#error {
color: red;
font-size: 1.3em;
}
.cargando {
background:url(/public/img/ajax-loader.gif);
}
.form {
border: 1px solid #999999;
padding: 20px;
background: #4EA168;
background: rgb(78,161,104); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNGVhMTY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiZGRjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg, #4EA168 0%, #BBDDCC 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#BBDDCC), color-stop(100%,rgba(187,221,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, 4EA168 0%,#BBDDCC 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, BBDDCC 0%,4EA168 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, BBDDCC 0%,4EA168 100%); /* IE10+ */
background: linear-gradient(45deg, BBDDCC 0%,4EA168 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ea168', endColorstr='#bbddcc',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
#form {
display: none;
}
.in_file {
margin: 5px;
width: 80%;
border-width: 3px;
}
.enviar {
margin: 5px;
}
.validacion{
color:red;
font-size: 0.8em;
}
.ui-widget {
font-size: 0.8em;
}
.tituloCond {
font-size: 1.3em;
}
.tituloCond2 {
font-size: 1.1em;
}
#FLink, #TLink, #GLink {
position: fixed;
top: 110px;
right: 0px;
}
#TLink {
top: 150px;
}
#GLink {
top: 190px;
}
input[type=number] {
margin: 3px 3px;
width: 70px;
}
.accion input[type=checkbox] {
display: clear;
position: relative;
left: 15%;
cursor:pointer;
}
#firma {
font-size: 1.1em;
}
#firma:link {
color: #FF5500;
}
#firma:visited {
color: #00BB55;
}
#firma:hover {
color: red;
}
#links_footer {
width: 95%;
}
#languages {
font: bold small-caps 0.7em Varela Round, sans-serif;
position: relative;
top: 0px;
left: 70%;
width: 150px;
}
#buttonCookies {
font-size: 0.6em;
position: absolute;
top:0px;
right: 0px;
}
#googlemas {
position: relative;
top: 0px;
left: 45%;
width: 300px;
}
#dibujo img {
max-width:100%;
height:auto;
width:auto\9; /*ie8*/
}
/************** Effects **********************/
#img_cabecera2 img{
transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 7s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 7s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 7s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 7s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
width: 300px;
margin-top:90px;
}
#img_cabecera2 img:hover {
transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 5s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 5s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 5s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: width, transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 5s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
transform:rotate(270deg);
transform-origin: center center;
-ms-transform:rotate(270deg); /* IE 9 */
-ms-transform-origin: center center;
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-webkit-transform-origin: center center;
-o-transform:rotate(270deg); /* Opera */
-o-transform-origin: center center;
width: 150px;
}
#img_cabecera {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-in-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 0.5s;
-o-transition-timing-function: ease-in-out;
-o-transition-delay: 0.1s;
}
#img_cabecera:hover {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 1s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
transform:scale(1.1, 1.3);
transform-origin: center center;
-ms-transform:scale(1.1, 1.3); /* IE 9 */
-ms-transform-origin: center center;
-webkit-transform:scale(1.1, 1.3); /* Safari and Chrome */
-webkit-transform-origin: center center;
-o-transform:scale(1.1, 1.3); /* Opera */
-o-transform-origin: center center;
}
#dibujo img {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-in-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 0.5s;
-o-transition-timing-function: ease-in-out;
-o-transition-delay: 0.1s;
}
#dibujo img:hover {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 0.5s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
transform: skew(45deg) scaleX(0.85);
transform-origin: center center;
-ms-transform: skew(45deg) scaleX(0.85); /* IE 9 */
-ms-transform-origin: center center;
-webkit-transform:skew(45deg) scaleX(0.85); /* Safari and Chrome */
-webkit-transform-origin: center center;
-o-transform:skew(45deg) scaleX(0.85); /* Opera */
-o-transform-origin: center center;
}
/*************************************************/
/************** Addsense background **************/
.adsbygoogle {
background: url(/public/img/raya.png);
}
/***************************************************/
.progress { position:relative; width:99%; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:30px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
/*********************** Media query ***************/
@media only screen and (min-width:1401px){
body{font-size:1.3em;}
input[type=number]{width:60px;}
}
@media only screen and (min-width:1200px) and (max-width:1400px){
body{font-size:1.2em;}
input[type=number]{width:65px;}
}
@media only screen and (min-width:1000px) and (max-width:1199px){
body{font-size:1.1em;}
input[type=number]{width:60px;}
}
@media only screen and (min-width:851px) and (max-width:999px){
body{font-size:1em;}
input[type=number]{width:55px;}
#FLink img, #TLink img, #GLink img {width: 20px;}
#TLink {top: 135px;}
#GLink {top: 160px;}
}
@media only screen and (min-width:579px) and (max-width:852px){
body{font-size:1.2em;}
input[type=number]{width:65px;}
#ini_mess {font-size: 0.5em;}
}
@media only screen and (min-width:840px) and (max-width:850px){
#ini_mess {font-size: 0.7em;}
}
@media only screen and (max-width:852px){
#columna{width:90%; margin:10px 0px;}
.seccion{width:90%;}
#menu_auth {left: 70%; width: 150px;}
}
@media only screen and (min-width:579px){
@font-face {
font-family: 'fuente_titulo';
src: url('/fonts/Kaushan/kaushanscript-regular-webfont.eot');
src: url('/fonts/Kaushan/kaushanscript-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Kaushan/kaushanscript-regular-webfont.woff') format('woff'),
url('/fonts/Kaushan/kaushanscript-regular-webfont.ttf') format('truetype'),
url('/fonts/Kaushan/kaushanscript-regular-webfont.svg#fuente_titulo') format('svg');
font-weight: normal; font-style: normal;
}
}
@media only screen and (max-width:578px){
input[type=number]{width:60px; font-size:1.2em;}
body{font-size:1em;}
.ui-button{font-size:1.1em;}
#FLink img, #TLink img, #GLink img {width: 20px;}
#TLink {top: 135px;}
#GLink {top: 160px;}
#menu_auth {width: 130px;}
#languages {width: 130px; left: 30%;}
#googlemas {left: 20%;}
}
@media only screen and (max-width:430px){
body{font-size:0.9em;}
#FLink img, #TLink img, #GLink img {width: 10px;}
#TLink {top: 125px;}
#GLink {top: 140px;}
#menu_auth {top: -100px;}
#ini_mess {font-size: 0.5em;}
}
|
Download
