/* MAIN CSS STYLESHEET */ /* MAIN STRUCTURE ----------------------- */ html, body { color: #eaeaea; font-family: 'AvenirLTStd-Light', arial, tahoma; background: url('../img/shadow.png') repeat-y center; } #header { width: 745px; margin-left: 80px; font-family: 'AvenirLTStd-Roman', arial, tahoma; z-index: 0; overflow: hidden;} #main { float: right; margin-top: 30px; padding: 0 80px; } #footer { height: 20px; width: 100%; padding-top: 10px; bottom: 0; background-color: #414042; text-align: center; color: #BCBEC0; font-size: 10px;} .container { width: 905px; padding: 0 80px; margin: 0 auto; overflow: hidden; } .clear { clear: both; } /* GENERAL ITEMS ----------------------- */ a { text-decoration: none; color: #FFFFFF; } h1 { float: left; width: 735px; padding: 30px 0 20px 35px; font-size: 22px; color: #858585; letter-spacing: 0.5px; } h2 { margin-bottom: 30px; font-family: 'AvenirLTStd-Roman'; } hr.head-line { border: 2px solid #22ADDD; width: 700px; margin-bottom: 30px; } hr.line-small { float: left; margin-top: 55px; border: 2px solid #B3B3B3; width: 15px; } #top-background { margin-bottom: -220px; width: 100%; height: 205px; background-color: #B3B3B3; } #bottom-background { z-index: -100; width: 100%; padding-top: 125px; height: 90px; margin-top: -75px; bottom:0; left:0; background-color: #B3B3B3; } #bottom-background p { line-height: 15px; text-align: center; font-size: 11px; font-family: 'AvenirLTStd-Light'; } #shadow-left { } #shadow-right { } #header {} #header ul { list-style-type: none; } #header li { display: inline; float: left; } #header #lang-container { width: 100%; height: 15px; font-size: 10px; padding-top: 45px; } #header #lang-container ul { float: right; } #header #lang-container li { padding: 3px 3px 1px 3px; width: 11px; height: 11px; margin-left: 3px; background-color: #808285; } #header #lang-container li:hover { background-color: #E41E30; } #header #logo { float: left; width: 212px; height: 56px; background: url('../img/logo.png'); } #header ul#main-nav { float: right; margin-top: 25px; font-size: 12px; } #header ul#main-nav li { display: inline; margin-left: 20px; vertical-align: bottom; } #header ul#main-nav a:hover { color: #E11E2D; } #header ul#main-nav li#social { height: 16px; width: 16px; margin-top: -5px; } .sub-cover-photo { float: left; width: 745px; height: 110px; background: url('../img/sub-cover-photo.png') no-repeat; } .sub-cover-photo-camara { float: left; width: 745px; height: 368px; background: url('../img/la-camara-cover.png') no-repeat; } .bottom-spacer { float: left; height: 120px; width:100%; background-color: #E6E6E6; } /* MODULES ----------------------------- */ /* Main */ #main {} #main #cover-photo { float: left; width: 745px; height: 355px; background: url('../img/cover-photo.png'); } #main #main-text-about { float: left; width: 655px; text-align: center; padding: 45px 45px 45px 45px;} #main #main-text-about p { color: #858585; font-size: 22px; line-height: 40px; letter-spacing: 1px; margin: 0 auto; } #main #main-text-news { float: left; width: 655px; text-align: center; } #main #main-text-news p { color: #858585; font-size: 22px; line-height: 40px; letter-spacing: 1px; margin: 0 auto; } #main #president-letter { float: left; padding: 20px 20px; font-size: 12px; line-height: 21px; background-color: #d53636;} #main #president-letter #photo { float: left; width: 77px; height: 84px; background-image: url('../img/president-photo.png'); } #main #president-letter #col1 { float: left; padding-right: 20px; width: 332px; } #main #president-letter #col2 { float: left; padding: 90px 10px 0 10px; width: 333px; } #main #president-letter #col1 p#title { float: left; margin: 0 20px 70px 10px; font-family: 'AvenirNextLTPro-Bold'; letter-spacing: 1px; font-size: 20px; color: #BEBFC0; } #main #president-letter #text-col1 { color: #ffffff; } #main #president-letter #text-col2 { color: #ffffff; } #main #president-letter #signature { float: right; color: #ffffff; } #main #brands { float: left; padding: 40px 0px 30px 0px; height: 75px; background-color: #B3B3B3;} #main #brands ul { float: left; } #main #brands li { display: inline; float: left; width: 150px; } #main #brands .arrow { float: left; width: 52.5px; height: 42px; margin: 15px 0 0 20px;} #main #brands #left { background: url('../img/brands-arrow-left.png') no-repeat; } #main #brands #right { background: url('../img/brands-arrow-right.png') no-repeat; } #main #join { float: left; width: 370px; color:#F5F5F5;} #main #join #photo { width: 370px; height: 140px; background: url('../img/join-photo.jpg'); } #main #join #text { padding: 35px 35px 0 30px; width: 305px; height: 350px; background-color: #00AEEF; } #main #join #text p#title { font-family: 'AvenirNextLTPro-Bold'; font-size: 18px; letter-spacing: 1px;} #main #join #text p#body { font-size: 14px; font-family: 'AvenirLTStd-Roman'; line-height: 30px; letter-spacing: 1px; } #main #join #text hr { background-color: none; border-bottom: 3px solid #F5F5F5; margin: 35px 0;} #main #join #text a { float: right; font-size: 14px; margin: 20px 0; } #main #activities { float: left; height: 525px; width: 375px; margin-top: 0;} #main #activities p { float: left; color: #858585; } #main #activities #head { height: 35px; padding: 20px 0 0 40px; border-bottom: 3px solid #00AEEF; font-size: 15px; } #main #activities #nav { float: right; color: #00AEEF; margin-right: 5px; } #main #activities #month { float: left; } #main #activities .arrow { float: left; width: 10px; margin: 0 25px; } #main #activities #body .activ-item { height: 95px; padding: 10px 10px; background-color: #FFFFFF; border-bottom:1px solid #D1D1D1;} #main #activities #body .title { font-size: 16px; color: #00AEEF; } #main #activities #body .text { margin-top: 10px; margin-bottom: 10px; width: 245px; font-size: 13px; line-height: 20px; } #main #activities #body .icon { float: right; width: 18px; height: 20px; margin-top: 20px; background: url('../img/icon-plus-activities.png'); } #main #activities #body .link { float: right; width: 40px; height: 20px; margin-top: 20px; font-size: 16px; color: #00AEEF;} #main #galleria { width: 745px; height: 367px; } /* La Cámara */ #la-camara { z-index: 100; width: 745px; margin: 0 auto; margin-top: 30px; background-color: #FFFFFF; color: #858585; font-size: 16px; line-height: 20px; overflow: hidden; } #la-camara #about { float: left; padding: 0 0 0 35px; width: 325px; font-family: 'AvenirLTStd-Roman'; } #la-camara #objectives { float: left; width: 315px; color: #858585; font-size: 14px; padding-left: 40px; } #la-camara #objectives h2 { margin-bottom: 30px; font-family: 'AvenirLTStd-Roman'; font-size: 16px; } #la-camara #photo-middle { float: left; margin: 30px 0; width: 745px; height: 261px; background: url('../img/la-camara-middle.png'); } #la-camara #photo-middle2 { float: left; width: 745px; height: 640px; background: url('../img/la-camara-middle2.png'); } #la-camara #history { float: left; padding: 0 50px 0 35px; width: 690px; color: #858585; font-size: 14px; } #la-camara #history h2 { margin-bottom: 20px; font-family: 'AvenirLTStd-Roman'; font-size: 16px; } #la-camara #conformation { float: left; overflow: hidden; margin-top: 20px; width: 745px; background-color: #d53636; line-height: 25px; } #la-camara #conformation-col1 { float: left; padding: 0 40px 0 35px; width: 325px; font-size: 14px; margin: 30px 0; color: #ffffff; } #la-camara #conformation-col1 h2 { margin-bottom: 20px; font-family: 'AvenirLTStd-Roman'; font-size: 16px; } #la-camara #conformation-col2 { float: left; width: 325px; font-size: 14px; padding-top: 75px; color: #ffffff; } #la-camara #comission { float: left; padding: 45px 50px 75px 45px; width: 650px; color: #FFFFFF; background-color: #00AEEF; } #la-camara #comission ul { font-size: 12px; } #la-camara #comission li { float: left; padding: 30px 30px 0 0; width: 140px;} #la-camara #comission li#last { float: left; padding: 30px 10px 0 0; width: 130px;} /* Jopepa */ #jopepa { z-index: 100; width: 745px; margin: 0 auto; margin-top: 30px; background-color: #FFFFFF; color: #858585; font-size: 16px; line-height: 20px; overflow: hidden; } #jopepa h2 { margin: 0 0 20px 40px; } #jopepa #logo { float: left; margin: 10px 15px 25px 40px; width: 110px; height: 133px; background: url('../img/logo-jopepa.png'); } #jopepa h1#jopepa-header { font-family: 'AvenirLTStd-Roman'; font-size: 23px; line-height: 25px; border-left: 1px solid #A4A5A7; padding: 5px 0 5px 20px; width: 400px; margin-top: 60px; } #jopepa #jopepa-cover-photo { float: left; width: 745px; height: 260px; background: url('../img/jopepa-cover.png');} #jopepa #about { float: left; padding: 0 30px 50px 40px; margin-top: 45px; font-size: 13px; } #jopepa #col1 { float: left; width: 370px; height: 420px; background: url('../img/jopepa-photo-middle.png'); } #jopepa #events { float: left; width: 285px; height: 370px; padding: 50px 20px 0 70px; font-family: 'AvenirLTStd-Roman'; font-size: 14px; color: #ffffff; background-color: #22ADDD; overflow: hidden; } #jopepa #title { text-transform: uppercase; width: 200px; } #jopepa #line { width: 250px; margin: 20px 0; border-bottom: 2px solid #ffffff; } #jopepa #events .icon { float: left; color: #ffffff; font-size: 10px; margin-right: 10px; font-family: 'AvenirNextLTPro-Bold'; } #jopepa #events li { margin-bottom: 20px} #jopepa #companies h2 { margin-top: 50px; } #jopepa #companies-content { } #jopepa #companies-content ul#socios { float: left; padding: 10px 0 0 35px; width: 710px; } #jopepa #companies-content ul#socios li { float: left; width: 200px; margin-bottom: 20px; } #jopepa #companies-content ul#socios li .image { float: left; margin-right: 5px; width: 76px; height: 76px; border: 1px solid #e7e7e7 } #jopepa #companies-content ul#socios li .title { float: left; margin: 3px 0 5px 0; color: #E41E30; font-family: 'AvenirLTStd-Roman'; font-size: 14px; letter-spacing: -1px;} #jopepa #companies-content ul#socios li .text { float: left; width: 95px; height: 40px; color: #858585; font-size: 12px; line-height: normal; } #jopepa h2#activities { float: left; padding: 3px 0; width: 120px; border-right: 1px solid #A4A5A7; color: #858585; } #jopepa a#conocer { float: left; padding: 3px 0; color: #858585; } #jopepa #oportunities ul { margin-left: 50px; width: 745px; overflow: hidden; } #jopepa #oportunities li { float: left; margin-top: 20px; } #jopepa #oportunities li a { margin-left: 4px; font-size: 12px; color: #858585; } #jopepa #oportunities #title { padding: 0 0 7px 4px; margin: 0 45px 10px 0; width: 150px; color: #858585; border-bottom: 4px solid #22ADDD; } #jopepa #oportunities #title2 { width: 150px; margin-left: 280px; } #jopepa h2#more-info { margin-top: 100px; } #jopepa h3#name { margin: 30px 0 20px 55px; padding: 0 0 10px 5px; width: 345px; border-bottom: 4px solid #B3B3B3; font-family: 'AvenirLTStd-Roman'; font-size: 13px; color: #858585; } #jopepa #contact { padding: 0 0 90px 60px; font-size: 13px; line-height: 20px; font-family: 'AvenirLTStd-Roman'; font-size: 13px; color: #858585;} #jopepa #contact a { font-size: 13px; font-family: 'AvenirLTStd-Roman'; font-size: 13px; color: #858585;} /* Servicios */ #services { z-index: 100; width: 745px; margin: 0 auto; margin-top: 30px; background-color: #FFFFFF; color: #ABADAE; line-height: 20px; overflow: hidden; } #services #text { float: left; padding: 0 20px 70px 35px; font-size: 15px; color: #858585; line-height: 30px; } #services #service-list { float: left; padding: 0 20px 150px 35px; font-size: 14px; font-family: 'AvenirLTStd-Roman'; } #services #service-list li { float: left; width: 320px; height: 50px;} #services #service-list .icon { float: left; width: 10px; color: #22ADDD; font-size: 12px; margin-right: 10px; } #services #service-list li div { float: left; width: 180px; } #services #service-list li#long { height: 200px; } #services #service-list li#long li { margin: 10px 0 0 0; height: 20px; width: 250px; font-size: 11px; } #services #service-list .sub-item { padding-right: 5px; } /* Actividades */ #activities { z-index: 100; width: 745px; margin: 0 auto; margin-top: 30px; background-color: #FFFFFF; color: #ABADAE; overflow: hidden; } #activities ul#categories { padding: 0 0 55px 35px; font-size: 12px; overflow: hidden;} #activities ul#categories li { float: left; padding-bottom: 5px; margin-right: 5px; width: 85px; text-align: center; line-height: 15px; } #activities ul#categories li.oneline { padding: 10px 0 10px 0; } #activities ul#categories li#act { border-bottom: 5px solid #E41E30; } #activities ul#categories li#events { border-bottom: 5px solid #22ADDD; } #activities ul#categories li#forma { border-bottom: 5px solid #808285; } #activities ul#categories li#club { border-bottom: 5px solid #5480BC; } #activities .col { float: left; width: 248px; font-size: 18px;} #activities .col .title { text-align: center; } #activities .content { border-right: 1px solid #D1D1D1; min-height: 300px;} #activities .content .link { float: right; width: 40px; height: 20px; margin-top: 10px; font-size: 10px; color: #00AEEF;} #activities .content li { padding-left: 5px; height: 95px; margin: 30px 10px 30px 30px; } #activities .content li .day { float: left; margin-right: 5px; font-size: 30px; text-align: left; letter-spacing: 2px; } #activities .content li .month { float: left; margin-bottom: 3px; width: 160px; } #activities .content li .title { float: left; width:180px; margin-bottom: 8px; font-size: 13px; font-family: 'AvenirLTStd-Roman'; text-align: left; } #activities .content li .desc { float: left; font-size: 11px; } #activities .content li a { float: left; margin-top: 5px; font-size: 10px; font-family: 'AvenirNextLTPro-Bold'; color: #231F20; } #activities .content li.ml20 { margin-left: 20px; } .color-actividad-borde-actividades { border-left:6px solid #E41E30; } .color-actividad-borde-eventos { border-left:6px solid #22ADDD; } .color-actividad-borde-formacion { border-left:6px solid #808285; } .color-actividad-borde-club { border-left:6px solid #5480BC; } .color-actividad-titulo-actividades { color:#E41E30; } .color-actividad-titulo-eventos { color:#22ADDD; } .color-actividad-titulo-formacion { color:#808285; } .color-actividad-titulo-club { color:#5480BC; } /* De Interés */ #de-interes { z-index: 100; width: 745px; margin: 0 auto; margin-top: 30px; background-color: #FFFFFF; color: #ABADAE; overflow: hidden; } /* No se como es el tema de la ubicación de este elemento (div#filtro), en el diseño parece estar por encima de la línea, aparece con hover? Lo coloco linealmente abajo ante la duda */ #de-interes #filtro { float: left; margin: 0 0 20px 35px; width: 140px; font-size: 12px; color: #E41E30; font-family: 'AvenirNextLTPro-Bold'; } #de-interes a.cat { float: left; padding: 10px 0 0 15px; margin-top: 5px; height: 20px; width: 55px; border-bottom: 3px solid #E41E30; color: #333333; background-color: #EAEAEA; font-family: 'AvenirLTStd-Light'; } #de-interes a.cat:hover { color: #FFFFFF; background-color: #414042; } #de-interes ul#socios { float: left; padding: 10px 0 0 35px; width: 710px; } #de-interes ul#socios li { float: left; width: 200px; margin-bottom: 20px; } #de-interes ul#socios li .image { float: left; margin-right: 5px; width: 76px; height: 76px; border: 1px solid #e7e7e7 } #de-interes ul#socios li .title { float: left; margin: 3px 0 5px 0; color: #E41E30; font-family: 'AvenirLTStd-Roman'; font-size: 14px; letter-spacing: -1px; line-height: 16px;} #de-interes ul#socios li .text { float: left; width: 95px; height: 40px; color: #858585; font-size: 12px; line-height: normal; } #de-interes #links { overflow: hidden; padding: 0 0 30px 35px; color: #858585; } #de-interes #links ul li { float: left; margin-left: 15px; width: 300px; height: 60px; } #de-interes #links ul li .title { margin-bottom: 5px; } #de-interes #links ul li a { color: #22ADDD; } #de-interes #photo-polska { float: left; margin-left: 45px; width: 135px; height: 95px; background: url('../img/photo-polska.png'); } #de-interes #photo-embajada { float: left; margin-left: 45px; width: 135px; height: 95px; background: url('../img/photo-embajada.png'); } #de-interes .information { float: left; height: 95px; padding-left: 20px; margin: 0 0 30px 10px; border-left: 7px solid #B3B3B3; color: #858585; font-size: 14px; font-family: 'AvenirLTStd-Roman'; } #de-interes .information p { margin-bottom: 6px; } #de-interes .information a { color: #858585; } /* Socios */ #partners { z-index: 100; width: 745px; margin: 0 auto; margin-top: 30px; background-color: #FFFFFF; color: #ABADAE; font-size: 16px; line-height: 20px; overflow: hidden; } #partners a { color: #858585; } #partners #col1 { width: 360px; overflow: hidden; float: left; } #partners #col2 { float: left; width: 355px; padding: 10px 0 0 30px; } #partners #photo { float: left; margin: 0 0 40px 35px; width: 310px; height: 200px; background-image: url('../img/socios.png'); } #partners #text { float: left; margin-left: 35px; width: 310px; letter-spacing: -1px; color: #858585; } #partners #text p#title { font-family: 'AvenirLTStd-Roman'; margin-bottom: 25px; } #partners #text p#body { font-size: 14px; } #partners #links { float: left; width: 350px; overflow: hidden; } #partners #links a#download { float: left; padding: 30px 0 30px 60px; font-size: 15px; letter-spacing: -1px; } #partners #links a#send { float: right; margin: 0 30px 50px 0; font-size: 13px; } #partners #benefits { float: left; color: #858585;} #partners #benefits .icon { float: left; width: 10px; color: #22ADDD; font-size: 10px; margin-right: 10px; font-family: 'AvenirNextLTPro-Bold'; } #partners #benefits p { letter-spacing: -1px; margin-bottom: 30px; } #partners #benefits .title { float: left; font-size: 13px; width: 315px; } #partners #benefits ul li#first p.dot { float: left; margin: 0 5px 0 10px; font-size: 20px; color: #000000; margin-bottom: 0; } #partners #benefits ul li#first li { float: left; margin-bottom: 0; font-size: 12px; } #partners #benefits ul li#first .item { width: 300px; padding-top: 4px; } #partners #benefits ul li { overflow: hidden; margin-bottom: 10px; } #partners #benefits ul li a { font-size: 12px; } #partners a#activities { float: right; margin: 10px 30px 20px 0; width: 100px; font-size: 13px; } /* Contacto */ #contact { z-index: 100; width: 745px; margin: 0 auto; margin-top: 30px; background-color: #FFFFFF; color: #858585; font-size: 16px; line-height: 20px; overflow: hidden; } #contact #contactform { float: left; margin-left: 35px; width: 340px; } /*#contact #contactform input[type=text] { padding-left: 10px; width: 320px; height: 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #E6E6E5; border: none; }*/ #contact #contactform label { float: left; margin: 15px 0; } /*#contact #contactform textarea { padding: 10px 10px 10px 10px; width: 310px; height: 200px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #E6E6E5; border: none; resize:none; }*/ #contact #contactform .button { float: right; margin: 15px 10px 50px 0; width: 60px; height: 25px; border: none; background-color: #E41E30; color: #FFFFFF; } #contact #contactform a { float: left; margin-top: 20px; color: #858585; } #contact #info { float: left; padding: 130px 0 0 30px; margin-bottom: 100px; font-size: 17px; } #contact #info p#title { color: #000000; margin-bottom: 10px; font-family: 'AvenirLTStd-Roman'; } #contact #info p#content { font-size: 14px; line-height: 25px; } /* HELPERS ----------------------------- */