/* CSS Document */ /* project: design: carlos flores añez - carlos fa. framework: Negs (www.scz.com.bo) */ @font-face { font-family: 'Helvetica-Light'; src: local('Helvetica-Light'), local('Helvetica-Light'), url("../fonts/Helvetica-Light.otf") format("Helvetica-Light.otf"); } html { background: url(../img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /*------------------------------------------------header--------------------*/ #cont-floating{ background:url(../img/bg-cont.png); padding:40px 40px 0 40px; font:normal 13px Helvetica-Light; text-align:justify; margin:0px 60px; height:400px;} #cont-floating h1{ font:normal 22px Helvetica-Light; padding:0; margin:0; display:inline-block;} #cont-floating h2{ font:normal 13px Helvetica-Light; background:url(../img/bg-cont.png); display:block; padding:10px; margin:2px 0 2px 0;} #cont-floating h3{ font:bold 13px Helvetica-Light; display:block; padding:10px; margin:2px 0 2px 0; border-bottom:1px solid #f4f4f4;} #cont-floating strong{ font-weight:bold;} #cont-mv{ background:url(../img/bg-cont.png); padding:60px 80px; font:normal 14px Helvetica-Light; text-align:justify; margin:0 120px 10px 120px;} #cont-mv h1{ font:normal 22px Helvetica-Light; padding:0; margin:0;} #cont-mv h2{ font:normal 13px Helvetica-Light; background:url(../img/bg-cont.png); display:block; padding:10px; margin:2px 0 2px 0;} #cont-mv strong{ font-weight:bold;} #header{width:1042px; margin:0 auto; padding:10px;} a.header:visited, a.header:active, a.header:link { border-right:1px solid #FFFFFF; color:#FFFFFF; font:normal 14px Helvetica-Light; display:inline-table; padding:0px 8px; text-decoration:none;} a.header:hover { color:#CCCCCC;} .borde-right{} a.uno:visited, a.uno:active, a.uno:link {background:url(../capa/1.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.uno:hover {background:url(../capa/1.jpg) top left no-repeat; background-position: 0 -125px;} a.dos:visited, a.dos:active, a.dos:link {background:url(../capa/2.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.dos:hover {background:url(../capa/2.jpg) top left no-repeat; background-position: 0 -125px;} a.tres:visited, a.tres:active, a.tres:link {background:url(../capa/3.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.tres:hover {background:url(../capa/3.jpg) top left no-repeat; background-position: 0 -125px;} a.cuatro:visited, a.cuatro:active, a.cuatro:link {background:url(../capa/4.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.cuatro:hover {background:url(../capa/4.jpg) top left no-repeat; background-position: 0 -125px;} a.cinco:visited, a.cinco:active, a.cinco:link {background:url(../capa/5.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.cinco:hover {background:url(../capa/5.jpg) top left no-repeat; background-position: 0 -125px;} a.seis:visited, a.seis:active, a.seis:link {background:url(../capa/6.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.seis:hover {background:url(../capa/6.jpg) top left no-repeat; background-position: 0 -125px;} a.siete:visited, a.siete:active, a.siete:link {background:url(../capa/7.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.siete:hover {background:url(../capa/7.jpg) top left no-repeat; background-position: 0 -125px;} a.ocho:visited, a.ocho:active, a.ocho:link {background:url(../capa/8.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.ocho:hover {background:url(../capa/8.jpg) top left no-repeat; background-position: 0 -125px;} a.nueve:visited, a.nueve:active, a.nueve:link {background:url(../capa/9.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; } a.nueve:hover {background:url(../capa/9.jpg) top left no-repeat; background-position: 0 -125px;} a.aei:visited, a.aei:active, a.aei:link {background:url(../capa/aei.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; cursor:default; } a.aei:hover {background:url(../capa/aei.jpg) top left no-repeat; background-position: 0 -125px;} a.aei2:visited, a.aei2:active, a.aei2:link {background:url(../capa/aei2.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; cursor:default; } a.aei2:hover {background:url(../capa/aei2.jpg) top left no-repeat; background-position: 0 -125px;} a.aei3:visited, a.aei3:active, a.aei3:link {background:url(../capa/aei3.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; cursor:default; } a.aei3:hover {background:url(../capa/aei3.jpg) top left no-repeat; background-position: 0 -125px;} a.aei4:visited, a.aei4:active, a.aei4:link {background:url(../capa/aei4.jpg) top left no-repeat; background-position: 0 0px; width:260px; height:125px; display:inline-block; cursor:default; } a.aei4:hover {background:url(../capa/aei4.jpg) top left no-repeat; background-position: 0 -125px;} a.volver:visited, a.volver:active, a.volver:link { background:#FFFFFF; font:normal 14px Arial, Helvetica, sans-serif; color:#333333; text-decoration:none; display:inline-block; padding:10px 20px; margin-right:40px;} a.volver:hover {background:#333; font:normal 14px Arial, Helvetica, sans-serif; color:#fff;} /*------------------------------------------------header--------------------*/ #content{ width:1062px; margin-left:auto; margin-right:auto; clear:both; height:420px;} #man-pred{text-align:center; width:100%; height:100%; padding-top:6%; color:#ccc; font:normal 14px Helvetica-Light; margin-left:auto; margin-right:auto; } #man-pred ul{ padding:10px 0px; list-style-type:none; text-shadow: #333 1px 1px 1px; } #man-pred li{background:url(../img/bg-cont.png); padding:10px; list-style-type:none; display:inline-block; margin:1px; } #man-pred h1{ font:normal 24px Helvetica-Light; margin:0 0 6px 10px; color:#FFFFFF; } #slide-bg{ clear:both; background:url(../img/bg-slide.png); padding:15px 0px; height:90px;} #slide{ margin-left:auto; margin-right:auto; width:1062px;} #box-1 { width:172px; margin:0 4px 54px 0; float:left;} #box-1 h1{font:normal 15px/24px Helvetica-Light; padding:0; margin:10px; text-transform:uppercase;} #box-1 h2{font:normal 12px/18px Helvetica-Light; padding:0; margin:10px;} #box-1 img{ padding:0 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; behavior:url(border-radius.htc); border-bottom:2px solid #333333;} #box-1 a:link, #box-1 a:visited, #box-1 a:active{ color:#333333; text-decoration:none;} #box-1 a:hover{ color:#666;} #pie-bg{ padding:20px 0px; clear:both; background:url(../img/bg-pie.png);} #pie{ margin:0 auto; width:1022px; font-size:10px;} #pie-borde{ border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; color:#fff; text-align:center; font:normal 12px Helvetica-Light;} a.pie-esp:visited, a.pie-esp:active, a.pie-esp:link {color: #fff; font:normal 12px Helvetica-Light; background:url(../img/esp.jpg) left no-repeat; padding:0 25px; 0 25px; display:inline-block; text-transform:capitalize; text-decoration:none;} a.pie-esp:hover { color:#CCCCCC;} a.pie-eng:visited, a.pie-eng:active, a.pie-eng:link {color: #fff; font:normal 12px Helvetica-Light; background:url(../img/eng.jpg) left no-repeat; padding:0 25px; 0 25px; display:inline-block; text-transform:capitalize; text-decoration:none;} a.pie-eng:hover { color:#CCCCCC;} a.pie-bol:visited, a.pie-bol:active, a.pie-bol:link {color: #fff; font:normal 12px Helvetica-Light; background:url(../img/bol.jpg) left no-repeat; padding:0 25px; 0 25px; display:inline-block; text-transform:capitalize; text-decoration:none; cursor:default;} a.pie-bol:hover { color:#CCCCCC;} a.logo:visited, a.logo:active, a.logo:link {background:url(../img/logo.png) top left no-repeat; background-position: 0 0px; width:187px; height:63px; display:block; text-align:center; padding:0px 10px;} a.logo:hover {background:url(../img/logo.png) top left no-repeat; background-position: 0 -63px;} .form {BORDER: #f5f5f5 1px solid; FONT-SIZE: 11px; MARGIN-LEFT: 0px; WIDTH:490px; COLOR: #000; MARGIN-RIGHT: 0px; HEIGHT: 30px; BACKGROUND-COLOR: #f5f5f5;} .form2 {BORDER: #f5f5f5 1px solid; FONT-SIZE: 11px; MARGIN-LEFT: 0px; WIDTH:200px; COLOR: #000; MARGIN-RIGHT: 0px; HEIGHT: 30px; BACKGROUND-COLOR: #f5f5f5;} .textarea {BORDER: #f5f5f5 1px solid; FONT-SIZE: 11px; MARGIN-LEFT: 0px; OVERFLOW: auto; WIDTH: 490px; COLOR: #000; MARGIN-RIGHT: 0px; HEIGHT: 60px; BACKGROUND-COLOR:#f5f5f5;} .btn_ev_borr {BORDER: medium none; FONT-SIZE: 95%; WIDTH: 180px; COLOR: #ffffff; HEIGHT: 30px; BACKGROUND-COLOR:#00457F} a.fb:visited, a.fb:active, a.fb:link { border:5px solid #fff; margin:2px; -moz-border-radius: 8px; -webkit-border-radius: 8px; behavior:url(border-radius.htc);} a.fb:hover {border:5px solid #000;} td{ color:#FFFFFF;} /*slide*/ #makeMeScrollable {width:100%; position: relative; } #makeMeScrollable div.scrollableArea * { position: relative; display: block; float: left; /* If you don't want the images in the scroller to be selectable, try the following block of code. It's just a nice feature that prevent the images from accidentally becoming selected/inverted when the user interacts with the scroller. */ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } /* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */ /* Invisible left hotspot */ div.scrollingHotSpotLeft { /* The hotspots have a minimum width of 100 pixels and if there is room the will grow and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */ min-width: 250px; width: 10%; height: 100%; /* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */ background-position: center center; position: absolute; z-index: 200; left: 0; /* The first url is for Firefox and other browsers, the second is for Internet Explorer */ } /* Visible left hotspot */ div.scrollingHotSpotLeftVisible { background-image:url(../slide/arrow_left.gif); background-color: #000; background-repeat: no-repeat; opacity: 0.80; /* Standard CSS3 opacity setting */ -moz-opacity: 0.80; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */ filter: alpha(opacity = 80); /* Opacity for Internet Explorer. */ zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */ } /* Invisible right hotspot */ div.scrollingHotSpotRight { min-width: 250px; width: 10%; height: 100%; background-position: center center; position: absolute; z-index: 200; right: 0; } /* Visible right hotspot */ div.scrollingHotSpotRightVisible { background-image: url(../slide/arrow_right.gif); background-color: #000; background-repeat: no-repeat; opacity: 0.80; filter: alpha(opacity = 80); -moz-opacity: 0.80; zoom: 1; } /* The scroll wrapper is always the same width and height as the containing element (div). Overflow is hidden because you don't want to show all of the scrollable area. */ div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } div.scrollableArea { position: relative; width: auto; height: 100%; } div#wrapper { width: 952px; margin: 0 auto; text-align: left; background: #fff; } div#mainColumn { padding: 0; float: left; padding: 16px 0px 16px 16px; width: 728px; margin-bottom: 50px; background: #fff; } div#rightColumn { float: right; padding: 16px; background: #fff; } /* tooltip styling. by default the element to be styled is .tooltip */ .tooltip { display:none; background:url(../slide/black_arrow.png); font-size:12px; height:70px; width:160px; padding:25px; color:#eee; z-index:10000; } /* style the trigger elements */ #demo img { border:1px solid #000; background:#1E1E1E; padding:8px; margin:1px; opacity: 0.90; filter: alpha(opacity = 90); -moz-opacity: 0.90; } /*slide*/