html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Extended base styles (site specific)
*****************************************************************/
html {
overflow-y: scroll; }
/* always force a scrollbar in non-IE */
body {
background-image:url(../imgs/back-sky.jpg);
min-height: 700px;
overflow-x: hidden;
overflow-y: hidden;
height: 3000px;
width: auto;
color: #000;
}
#branding {
position: fixed;
float: left;
top: -30px;
left: -120px;
z-index: 9998;
}
#content header h1 {
font-family: 'Open Sans Condensed', sans-serif;
}
a, a:link,
a:active,
a:visited {
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
color:#cc0101;
outline: none;
text-decoration:none;
}
a:hover {
color:red;
}
img {
display:block;
}
p {
font-family: 'Open Sans Condensed', sans-serif;
color: #404040;
text-align: justify;
}
/* Common shared styles
*****************************************************************/
hr {
margin: 0;
border: none;
/*border-top: 1px solid #3b3b3b;
border-bottom: 1px solid #3b3b3b;*/
height: 3px;
}
/* Page structure
*****************************************************************/
#wrapper {
position: relative;
}
#branding h1 {
width: 100%;
height: 135px;
padding: 15px 20px;
margin-left: 90px;
z-index: 1;
position: fixed;
}
.fb-like{
float: right;
}
/* Nav
*****************************************************************/
nav#main-menu{
background: url(../imgs/back-menu.png) no-repeat;
top:300px;
height: 230px;z
width: 257px;
z-index: 9999;
position: fixed;
left: 55px;
margin-top: 0px;
}
nav#main-menu ul {
display: block;
margin-right: 40px;
list-style: none;
list-style-type: none;
}
nav#main-menu ul li{
display: block;
position: relative;
width: 159px;
height: 35px;
}
nav#main-menu ul li a{
display: block;
width: 159px;
height: 35px;
}
nav#main-menu ul li.home a { background: url(../imgs/b00.png) no-repeat; }
nav#main-menu ul li.nosotros a { background: url(../imgs/b01.png) no-repeat; }
nav#main-menu ul li.servicios a { background: url(../imgs/b02.png) no-repeat; }
nav#main-menu ul li.contacto a { background: url(../imgs/b03.png) no-repeat; }
/*
nav#main-menu li.home a.active { background: url(../img/b01_on.png) no-repeat; }
nav#main-menu li.servicios a.active { background: url(../img/b02_on.png) no-repeat; }
nav#main-menu li.portafolio a.active { background: url(../img/b03_on.png) no-repeat; }
nav#main-menu li.contacto a.active { background: url(../img/b04_on.png) no-repeat; }
nav#main-menu li.home a:hover { background: url(../img/b01_hover.gif) no-repeat; }
nav#main-menu li.servicios a:hover { background: url(../img/b_serv_hov.png) no-repeat; }
nav#main-menu li.portafolio a:hover{ background: url(../img/b_port_hov.png) no-repeat; }
nav#main-menu li.contacto a:hover { background: url(../img/b_conta_hov.png) no-repeat; }
*/
/* Parallax
*****************************************************************/
/* content */
#content {
z-index: 7;
position: relative;
max-width: 940px;
padding: 0 10px;
margin: 0 auto;
}
#content article {
width: 600px;
}
#content article p {
}
#home {
margin-left: 350px;
padding-top: 300px;
position: relative;
top: 0px;
}
#home h2 {
font-weight: 700;
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
color: #ffffff;
text-shadow: 2px 2px 4px #000000;
}
#home h3 {
font-size:20px;
font-family: 'Open Sans Condensed', sans-serif;
color: #ffffff;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
#home p{
width: 400px;
font-size: 16px;
line-height: 20px;
float: left;
margin-left: 140px;
margin-top:-75px;
font-weight: 300;
color: #000;
}
#home img{
float: left;
}
#nosotros {
margin-left: 850px;
position: absolute;
top: 800px;
padding-top: 100px;
}
#nosotros h2 {
margin-left: -250px;
width: 400px;
font-weight: 700;
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
color: #ffffff;
text-shadow: 2px 2px 4px #000000;
}
#nosotros p{
width: 300px;
font-size: 16px;
line-height: 20px;
margin-left: -250px;
margin-top: 10px;
font-weight: 300;
color: #fff;
}
#servicios {
position: absolute;
margin-left: 850px;
top: 1750px;
}
#servicios h2 {
margin-left: -400px;
width: 400px;
padding-top: 60px;
font-weight: 700;
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
color: #ffffff;
text-shadow: 2px 2px 4px #000000;
padding-bottom: 10px;
}
#servicios h3 {
margin-left: -400px;
width: 400px;
padding-top: 5px;
font-weight: 700;
font-size: 20px;
font-family: 'Open Sans Condensed', sans-serif;
color: #ffffff;
text-shadow: 2px 2px 4px #000000;
}
#servicios p{
width: 400px;
font-size: 14px;
line-height: 17px;
margin-left: -400px;
margin-top: -5px;
font-weight: 300;
text-align: justify;
}
#contacto {
margin-left: 550px;
padding-top: 0px;
position: absolute;
top: 2500px;
}
#contacto h2 {
margin-left: 0px;
width: 400px;
font-weight: 700;
font-size: 30px;
font-family: 'Open Sans Condensed', sans-serif;
color: #ffffff;
text-shadow: 2px 2px 4px #000000;
}
#contacto p{
color: #ffffff;
font-weight: 700;
text-shadow: 2px 2px 4px #000000;
}
/* foreground (ballons/landscape) */
#parallax-bg3 {
z-index: 2;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 940px;
margin-left: -600px; /* move left by half element's width */
}
/* balloon */
#bg3-1 {
position: absolute;
top: 0px;
left: 300px;
}
#bg3-2 {
position: absolute;
top: 400px;
left: -150px;
}
#bg3-3 {
position: absolute;
top: 1628px;
left: 403px;
}
#bg3-4 {
position: absolute;
top: 3150px;
left: -450px;
}
/* midground (clouds) */
#parallax-bg2 {
z-index: 3;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 1200px;
margin-left: -600px; /* move left by half element's width */
}
#bg2-1 {
position: absolute;
top: -500px;
left: 150px;
}
#bg2-2 {
position: absolute;
top: 400px;
left: 0px;
}
#bg2-3 {
position: absolute;
top: 800px;
left: -35px;
}
#bg2-4 {
position: absolute;
top: 1180px;
left: 250px;
}
#bg2-5 {
position: absolute;
top: 900px;
left: 890px;
}
#bg2-6 {
position: absolute;
top: 2200px;
left: 950px;
}
#bg2-7 {
position: absolute;
top: 2200px;
left: 1100px;
}
/* background (clouds) */
#parallax-bg1 {
z-index: 1;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 1200px;
margin-left: -450px; /* move left by half element's width */
}
#bg1-1 {
position: absolute;
top: 60px;
left: 1px;
}
#bg1-2 {
position: absolute;
top: 650px;
left: 500px;
}
#bg1-3 {
position: absolute;
top: 1000px;
left: 10px;
}
#bg1-4 {
position: absolute;
top: 800px;
left: 700px;
}
#contacto form {
margin-top: 10px;
margin-left: 0px;
}
#contacto label,
{
font-size: 15px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
margin-bottom: 5px;
margin-top: 10px;
}
#submit {
background: url(../img/ficha-verde-mas.png) no-repeat;
font-size: 20px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
color: #fff;
margin-left: 2px;
margin-top: 10px;
text-indent: -1px;
cursor:pointer;
opacity: .8;
}
#submit:hover {
opacity: 1;
}
input{
background-image: scr;
width: 300px;
resize:none;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
}
textarea {
margin-top: 10px;
width: 300px;
resize:none;
height:80px;
line-height: 150%;
}