/* 
Theme Name: ilogica-portafolio
Theme URI: http://www.ilogica.cl
Description: Theme desarrollado por ILÓGICA para Portafolio provisorio
Version: 1.0
Author: ILOGICA
Author URI: http://www.ilogica.cl
*/
@charset "utf-8";
* {margin: 0px; padding: 0px;}

/* Reset */
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, embed, font, 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, a img { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body { line-height: 1; }
ol, ul { list-style: none;}
blockquote, q { quotes: quotes; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}

/* body */
body {background: #333; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, sans-serif; font-size: 12px; font-weight: normal; color: #333; cursor: default; margin: 0px;padding: 0px;}
a , a:visited {outline: none 0px; text-decoration: none; color: #00B1E5;}
a:hover, a:active {color: #288fae; text-decoration: underline;}
.clear {clear: both;}
.hide {display: none;}
acronym {border-bottom: 1px dotted #ccc; cursor: help;}
.warning p {text-align: center; line-height: 1.3em; background: #ffb; border: 1px solid #fc0; margin-bottom: 1px; padding: 10px;}

#header_wrapper, #footer_wrapper {width: 100%; height: 120px; color: #fff; margin: 0px; padding: 0px;background: url(img/bg_header_footer.png) repeat-x top #1271B0;}
div.border {width: 100%; height: 5px; background: #00B1E5;}
#content_wrapper {width: 100%; background: #fff;}
#header, #content, #footer {position: relative; width: 920px; margin: auto; clear: both;}

/* header */
#header {height: 125px;}
#header h1 span {display: none;}
#header h1 a {position: absolute; bottom: 20px; display: block; width: 234px; height: 76px; background: url(img/logo_ilogica.png) no-repeat;}
h2.frase {position: absolute; bottom: 19px; left: 140px; color: #88B8D7; font-size: 22px; font-weight: normal; text-shadow: 0 0 5px #000;}
h3.port a {position: absolute; bottom: 20px; right: 0px; color: #09496C; font-size: 22px; text-shadow: 0 1px 0 #88B8D7;}
span.current {position: absolute; width: 11px; height: 6px; bottom: -5px; right: 48px; background: url(img/current.png) no-repeat;}

/* content */
#content {padding: 50px 0px; font-size: 16px; line-height: 1.3em;} 
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {margin-bottom: 15px;}
#content p, #content ul, #content ol {margin-bottom: 1.5em;}

/* slider */
#slider {width: 920px; height: 240px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #00B1E5;position: relative;}
a#prev, a#next {display: block; width: 20px; height: 20px; background: #000; position: absolute; top: 100px; z-index: 999; background: url(img/nav.png) no-repeat;}
a#prev {left: 0px; background-position: top left;}
a#next {right: 0px; background-position:top right;}
a#prev:hover {background-position: bottom left;}
a#next:hover {background-position: bottom right;}
#slider_content {width: 860px; margin-left: 30px; margin-right: 30px;}

.project {width: 840px; padding: 8px 10px 0 10px;}
.project_info {float: left; width: 428px;}
.project_img {float: right; width: 390px; height: 220px; background: #eaeaea; border: 1px solid #ccc; position: relative;}
.project_img .ribbon {position: absolute; top: -8px; right: -8px; width: 127px; height: 127px; background: url(img/ribbon.png) no-repeat;}
.project_info h2 {font-size: 22px;}
.project_info ul {font-size: 12px; margin-bottom: 10px !important;}
.project_info p {font-size: 14px;}

a.site {width: 108px; height: 32px; display: block; padding-left: 33px; padding-top: 4px; color: #fff; text-decoration: none; background: url(img/btn_ver_proyecto.png) no-repeat;}
a.desarrollo {width: 111px; height: 40px; display: block; padding-top: 10px; padding-left: 40px; color: #fff; text-decoration: none; background: url(img/btn_en_desarrollo.png) no-repeat;}
a.offline {width: 61px; height: 40px; display: block; padding-top: 10px; padding-left: 55px; color: #fff; text-decoration: none; background: url(img/btn_offline.png) no-repeat;}

/* team, contact */
.cols {background: url(img/bg_cols.png) repeat-y center top;}
h2.title {font-size: 30px; font-weight: normal; text-shadow: 0 0 1px #333;}
#team {width: 440px; padding-right: 20px; float: left;}
#contact{width: 440px; padding-left: 20px; float: right;}
#contact ul {margin-bottom: 30px;}
#contact ul li {padding-left: 35px; margin-bottom: 10px;}
#contact ul li.map {background: url(img/map.png) left center no-repeat;}
#contact ul li.fono {background: url(img/fono.png) left center no-repeat;}
#contact ul li.email {background: url(img/email.png) left center no-repeat;}
#contact ul li.social {background: url(img/social.png) left center no-repeat;}
#contact ul li.social a img{margin-bottom: -6px;}

.member * {margin: 0px!important;}
.member {position: relative; width: 430px; clear: both; padding: 10px 5px 10px 5px; border-bottom: 1px solid #eaeaea;}
.member h3 {font-size: 16px; font-weight: bold;}
.member p {font-size: 14px;}
.member:hover {background: #f5f9fb;}
.member:hover ul.social {display: block;}

ul.social {display: none; position: absolute; right: 5px; top: 5px;}
ul.social li {float: left; margin-left: 5px!important;}
img.avatar {float: left; margin-right: 10px !important; background: #ccc; width: 60px; height: 60px;}
.member_content {width: 360px; float: right;}

/* form */
fieldset {border: 0px none;}
form p {margin-bottom: 5px !important;}
label {float: left; padding-top: 5px; width: 85px; display: block;}
legend {display: none;}
input.text, textarea {font-size: 100%; font-family: inherit; margin-bottom: 1px !important;}
.text {width: 345px; padding: 3px; border: 1px solid #999;}
.text:focus {border-color: #00B1E5;}
.btn {float: right; display: block; width: 112px; height: 41px; padding-left: 48px; font-weight: bold; color: #fff; border: 0; cursor: pointer; background: url(img/btn_enviar.png) no-repeat;}
span.error {display: block; clear: both; width: 331px; margin-left: 85px; font-size: 11px; text-align: left; background: url(img/cancel.png) no-repeat left #fbfcda; border: 1px solid #dbdbd3; padding: 5px 0px 5px 20px; margin-bottom: 10px;}
img.icon {float: left; margin-right: 20px; padding-bottom: 50px;}

@-moz-keyframes bounce {50% {opacity: .3;}}
@-webkit-keyframes bounce {50% {opacity: .3;}}
@-o-keyframes bounce {50% {opacity: .3;}}
@-ms-keyframes bounce {50% {opacity: .3;}}

.member.die {
    -moz-animation-name: bounce;
    -moz-animation-duration: .3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-name: bounce;
    -webkit-animation-duration: .3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -o-animation-name: bounce;
    -o-animation-duration: .3s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    -o-animation-timing-function: ease-in-out;
    -ms-animation-name: bounce;
    -ms-animation-duration: .3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: alternate;
    -ms-animation-timing-function: ease-in-out;}

/* footer */
#footer_wrapper {display:none;}
#footer {padding: 20px 0px 0px 150px; width: 770px; height: 110px; background: url(img/logo_ilogica_footer.png) center left no-repeat;}
#footer ul {list-style: disc; margin-left: 14px;}
#footer a, #footer a:visited {color: #00B1E5;}
#footer a:hover, #footer a:active {color: #fff;}
.footer_box {float: left; height: 110px; border-left: 1px solid #999; padding: 0px 50px;}
.footer_box h3 {margin-bottom: 10px;}