/* The images which help create rounded corners depend on the following widths and measurements. If you want to change these measurements, the images will also need to change. */ @import url('font.css'); /*---------- Import ----------*/ * { padding: 0px; margin: 0px; } body { background-color: #c3c3c3; color: #222; font-family: sourcesanspro; } /*---------- head ----------*/ .head { background-color: #000; width: 100%; height:40px; box-shadow: 0px 0px 5px #c2c2c2; } .head li { float: right; padding-left: 15px; text-decoration: none; margin-top: 10px; } .head li a { text-decoration: none; color: #fff; list-style: none; transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; } .head ul li a { padding:10px; margin: 10px; list-style: none; } .head li a:hover { background-color: #00BFFF; } .head li { list-style: none; } .head .border1 { border: 1px solid #00BFFF; border-top: 0px; border-right: 0px; border-bottom: 0px; height: 40px; padding: 0px; margin-top: 10px; } .head .border1:hover { background-color: #00BFFF; } .head a { padding: 10px; margin: 10px; } .head #back { background-color: #00BFFF; } /*---------- head ----------*/ /*---------- Buscador ----------*/ .buscador { padding-top: 10px; height: 30px; padding: 6px; border: 0px; } form { border: 1px solid #363739; border-radius: 12px 12px 12px 12px; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.5); height: 22px; margin-top: 0px; float: left; position: absolute; bottom: 5px; top: 10px; } form input{ border-radius: 50px; border: none; box-shadow: inset 0px 0px 5px rgba(0,0,0,0.4); color: #fff; height: 22px; outline: none; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAQAAABedl5ZAAAAzklEQVQYlWNgAIP%2F9v%2FrwVCfARn85%2F%2B%2F%2Fz8CzEeS%2BnMQJPL0%2Ba37796DJfsZ4EYBwar9DBkMCQwFR86DJeXBUo%2F6QToYHCAKtaO%2Bf%2F%2F%2F%2F3kmmHNm%2Fv%2F%2FD27CTee4c%2Ff%2F%2F2vT4VKfXiM5CQg2t4M5lckQd%2F3nB0n8vQji5HhCFEpArP73AeGF35dACkEgYPtxmODXnxueg2igbqikh3l%2F1%2FpV%2B7vWyzUwxHatB%2BvcBLNfgMEA6AEDBg4g26Br%2FffvqeUMWIEBULcEdikGkG4AzGOfgUQC7TUAAAAASUVORK5CYII%3D') no-repeat 7px center; text-shadow: 0px 1px 0px #2c2d2f ; padding: 0 0 0 30px; width: 100px; transition: 0.5s; -webkit-transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; } form input:focus { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D') no-repeat 7px center #FFF; color: #222; text-shadow: 0 1px 0 #FFFFFF; width: 250px; } /*---------- Buscador ----------*/ /*---------- IMG ----------*/ #fondo { margin-top: 30px; margin-left: 170px; float: center; width: 1024px; height: 1300px; background-color: #fff; box-shadow: 0px 0px 10px #000; } img.img { margin-left: 8px; margin-top: 5px; width: 1004px; height: 330px; box-shadow: 0px 0px 6px #000; border: 3px double #000; border-radius: 0px; } /*---------- IMG ----------*/ /*---------- Menu ----------*/ #menu-wrapper ul{ padding: 0px; list-style: none; } #hmenu > li { display: inline-block; } #hmenu > li > a { margin-left: 15px; display: block; padding: 10px 5px; width: 90px; } #hmenu li a { } #hmenu li:first-child a { border-left: none; } #hmenu li:last-child a{ border-right: none; } li ul { position: absolute; display: none; } .sub-menu a { display: block; padding: 10px 5px; width: 130px; transition:all 0.5s linear; -webkit-transition:all 0.5s linear; -o-transition:all 0.5s linear; -moz-transition:all 0.5s linear; } .sub-menu a:hover { background-color: #00BFFF; } li:hover ul { display: block; } #menu-wrapper, li ul { background-color: #333; transition:all 0.5s linear; -webkit-transition:all 0.5s linear; -o-transition:all 0.5s linear; -moz-transition:all 0.5s linear; } #hmenu { width: 1024px; margin-top:5px; font-family: bebas; box-shadow: 0px 0px 6px #000; -moz-box-shadow: 0px 0px 6px #000; -o-box-shadow: 0px 0px 6px #000; -webkit-box-shadow: 0px 0px 6px #000; transition:all 0.5s linear; -webkit-transition:all 0.5s linear; -o-transition:all 0.5s linear; -moz-transition:all 0.5s linear; } #hmenu a { color: #fff; text-decoration: none; font-family: sourcesans; transition:all 0.5s linear; -webkit-transition:all 0.5s linear; -o-transition:all 0.5s linear; -moz-transition:all 0.5s linear; } #hmenu li:hover { background-color: #a3cd39; transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; -moz-transition:all 0.3s linear; } /*---------- Menu ----------*/