/*
Theme Name: Javi Malabares
Theme URI: http://javimalabares.com/
Author: Mark MacKay
Description: 2011 theme for Javi Malabares
Version: 1.0
License: All rights reserved
Tags: black, one-column
*/
/* @group HTML5 ✰ Boilerplate */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul, ul.list { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }


body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

nav ul, nav li, ul.list, ul.list li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; }
a:link { -webkit-tap-highlight-color: #FF5E99; } 

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; } 
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.center { text-align: center; }
/** arreglo cita**/
.first { padding-left: 30px; margin: 20px 0 0; 
	font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
}
p.first:before {
  color: #7A7A7A;
  content: "\201C";
    display: block;
    font-size: 80px;
    left: -38px;
    position: relative;
    top: 38px;
}

.last { padding-right: 0; margin-right: 0; }
.top { padding-top: 0; margin-top: 0; }
.bottom { padding-bottom: 0; margin-bottom: 0; }
.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;	 } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* @end */

/* @group Forms */

input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
label {font-weight:bold;}
fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}
fieldset, #IE8#HACK {padding-top:1.4em;}
legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
input[type=text], input[type=password], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}
select {background-color:#fff;border-width:1px;border-style:solid;}
input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}
.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}
.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}
.info {background:#d5edf8;color:#205791;border-color:#92cae4;}
.error a, .alert a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
.info a {color:#205791;}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

/* @end */

/* @group Wordpress */

a, a:visited {color: #fff;}
a:hover {color: #f90;}
p img {
	padding: 0;
	max-width: 100%;
}
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignright { float: right; }
.alignleft { float: left; }

/* @end */

/* @group Media Queries */

@media all and (orientation:portrait) { 
  
}

@media all and (orientation:landscape) { 
  
}

@media screen and (max-device-width: 480px) {
  
  
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }  
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

/* @end */

body {
	background-color: #000;
  color: #ccc;
  line-height: 130%;
}

h1, h2, h3  {
	font-weight: normal;
}


section {
	width: 739px;
	margin: 0 auto 50px auto;
	position: relative;
	left: 60px;
	margin-top: 50px;
	border: solid #222 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
  background-color: #151515;
  padding: 10px;
}

section h2 {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	float: left;
	padding: 5px 10px;
	margin-bottom: 10px;
	background-color: #f90;
	color: #222;
}

section img {
	display: block;
}

section#videos {padding-bottom: 45px; z-index: 3}
section#videos .youtube {
  position: absolute;
  bottom: 8px;
  right: 10px;
  height: 22px;
}

section#videos .youtube a {
  line-height: 22px;
  text-decoration: none;
  height: 22px;
  background: transparent url(http://javimalabares.com/images/youtubelogo.gif) 100% 50% no-repeat;
  display: block;
  padding-right: 60px;
  color: #999;
}

section#videos .youtube a:hover {
  text-decoration: underline;
}

div.thumbcontainer {
  text-align: center;
}

a.thumb {
	text-decoration: none;
	display: inline-block;
	margin: 25px 12px 0 12px;
	position: relative;
}

a.thumb.active {
  outline: solid #f90 5px;
}

a.thumb img.thumb {
  padding-bottom: 45px;
}

a.thumb span {
	position: absolute;
	bottom: 0;
	color: #aaa;
	line-height: 130%;
	font-size: 12px;
  background: #000;
	display: block;
	left: 0;
	right: 0;
	padding: 7px;
	min-height: 2.5em;
	text-shadow: 0 1px 1px #000;
	font-weight: bold;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px ;
	border-radius: 0 0 5px 5px;
}

a.thumb:hover span {
	color: #fff;
}

a.thumb span.play {
	top: 5px;
	right: 5px;
  bottom: auto;
	left: auto;
	min-height: 0;
	padding: 3px 5px;
	white-space: nowrap;
	font-size: 10px;
	text-transform: uppercase;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

section#videos a.thumb.active span.play {
  display: none;
}

a.thumb span.play img {
  display: inline;
  margin-left: 3px;
}

a.thumb img.thumb {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

header {
	height: 580px;
	width: 970px;
	margin: 0 auto;
	position: relative;
        z-index: 2;
}
.tel {
    color: #888;
	font: 19px/150% Constantina, Georgia, serif;
    text-align: right;
}
.tel a {
    color: #888;
	font: 14px/150%  Arial, Helvetica, sans-serif;
	text-decoration: none;   
}
.tel a:hover {
    color: #F90; 
}
#intro {
		background: #000;
}

header #info {
	position: absolute;
	top: 120px;
	left: 540px;
	z-index: 3;
	width: 400px;
}


header h1 {
	background: transparent url(images/logo.png) 0 0 no-repeat;
  color: transparent;
  text-indent: -10000px;
  height: 75px;
  position: relative;
  width: 400px;
}

header img {
	position: absolute;
}

header .javi {
top: -2px;
left: 148px;
}



header p {
  font: normal 15px/145% Arial, Helvetica, sans-serif;
}

header p.first + p {
	margin-bottom: 1em;
	padding-left: 30px;
	text-shadow: 1px 1px 2px #000;
	color: #999;
    font-size: 14px;
    font-style: italic;
    margin-top: 15px;
}

nav {
	position: fixed;
	top: 80px;
	z-index: 2;
}

nav a {
	display: block;
	width: 148px;
	height: 37px;
	background: transparent url(images/nav.png) 0 0 no-repeat;
	color: transparent;
	text-indent: -10000px;
	}
	
nav a:visited, nav a:hover, nav a:link {
	color: transparent;
  text-indent: -10000px;
}

nav a:hover {  background-color: #151515; color: transparent  }
nav a.inicio {  background-position: 0 0;  }
nav a.inicio.active {  background-position: -148px 0;  }
nav a.videos {  background-position: 0 -37px; }
nav a.videos.active {  background-position: -148px -37px; }
nav a.fotos {  background-position: 0 -74px; }
nav a.fotos.active {  background-position: -148px -74px; }
nav a.mensajes {  background-position: 0 -111px; }
nav a.mensajes.active {  background-position: -148px -111px; }
nav a.contacto {  background-position: 0 -148px; }
nav a.contacto.active {  background-position: -148px -148px; }
nav a.prensa {  background-position: 0 -185px; }
nav a.prensa.active {  background-position: -148px -185px; }
nav a.historial {  background-position: 0 -222px; }
nav a.historial.active {  background-position: -148px -222px; }

.media {
	padding-bottom: 0;
}

#fotos .pagination {
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #999;
}

#fotos #description {
	margin-top: 10px;
}

.ie7 #fotos {
	padding-bottom: 25px;
}

.ie7 #fotos #description  {
	margin-top: 5px;
}

.ie7 #fotos .pagination {
	bottom: 0;
}

#fotos .arrowleft, #fotos .arrowright {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 51px;
	opacity: 0.7;
	filter:alpha(opacity=70);
}

#fotos .arrowleft:hover, #fotos .arrowright:hover {
	opacity: 1;
	filter:alpha(opacity=100);
}

#fotos .arrowleft {
	left: 30px;
	background: transparent url(images/arrowleft.png) no-repeat 0 50%;
}

#fotos .arrowright {
	right: 30px;
	background: transparent url(images/arrowright.png) no-repeat 0 50%;
}


#tweet {
	font: 15px/120% Arial, Helvetica, sans-serif;
	clear: both;
	padding: 10px;
background-color: #f90;
color: #000;
text-shadow: none;
position: relative;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 380px;
}

#tweet .meta {
  text-align: right;
  font-size: 11px;
  color: transparent;
  position: absolute;
  top: -17px;
  width: 30px;
  height: 20px;
  left: 110px;
  overflow: hidden;
  whitespace: nowrap;
  text-indent: 30px;
  background: transparent url(images/tail.png) no-repeat 100% 100%;
}

#tweet .meta img {
  margin-right: 10px;
}

#historial .logos {
  float: right;
  width: 250px;
}

#historial .presentaciones {
  float: left;
  width: 450px;
  height: 400px;
  overflow-y: scroll;
}

#historial .presentaciones h4 {
  font: bold 12px/140% Arial, sans-serif;
  text-transform: uppercase;
  color: #f90;
  margin: 20px 0 10px 10px;
}

#historial .presentaciones .evento {
  padding: 10px;
}

#historial .presentaciones .title {
  display: block;
  color: #fff;
  font: 18px/140% Arial, sans-serif;
}

#historial .presentaciones .date {
  color: #999;
  font: 13px/140% Arial, sans-serif;
  text-decoration: none;
  display: block;
  text-transform: capitalize;
}

section#contacto {
  z-index: 1;
}

div.contacto {
	background-color: #000;
	height: 552px;
	position: relative;
}

.ie7 div.contacto {
	height: 600px;
}

.contacto .textfield {
	width: 379px;
	height: 44px;
	background: #fff url(images/field.png) 0 0 no-repeat;
	margin-bottom: 15px;
}


.contacto .textarea  {
	width: 495px;
	height: 157px;
	background: #fff url(images/textarea.png) no-repeat 0 0;
}

.contacto textarea {
	width: 480px;
	height: 110px;
	padding: 30px 0 0 10px;
	border: none;
	background-color: transparent;
	font-size: larger;
	color: #f60;
}

.contacto label {
	display: block;
	float: left;
	text-transform: uppercase;
	padding: 15px 10px 0 10px;
	color: #999;
}

.contacto label#fortextfield {
	position: absolute;
}

.contacto input {
	border: none;
	-webkit-appearance: none;
	font-size: large;
	padding: 5px 10px;
	width: 270px;
	color: #f60;
	margin-top: 7px;
}

.contacto section {
  background-color: transparent;
  border:none;

}

.contacto a.button {
	text-indent: -10000px;
	text-align: left;
	display: block;
	width: 171px;
	height: 42px;
	background: #f90 url(images/enviar.png) no-repeat 0 0;
	opacity: 0.9;
	-moz-opacity: 0.9;
	filter:alpha(opacity=90);
	color: transparent;
}

.contacto a.button:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

.contacto a.button:active {
	background-position: 0 -43px;
}

.contacto .enviar {
	text-align: left;
	width: 490px;
	margin-top: 15px;
}

.contacto #trompo {
	position: absolute;
	bottom: 0;
	right: 10px;
}

.contacto form {
	display: block;
	position: relative;
	z-index: 2;
	clear: both;
}

.footer {
	background-color: #222;
	padding: 30px 0;
}

footer {
	color: #fff;
	width: 750px;
	margin: 0 auto;
	position: relative;
	left: 60px;
}

footer h3 {
	text-transform: uppercase;
	color: #999;
}

footer h1  {
	font: 36px/150% Constantina, Georgia, serif;
}

footer a  {
	font: 18px/130% Arial, Helvetica, sans-serif;
	text-decoration: none;
}

footer .copyright  {
	position: absolute;
	right: 0;
	top: 30px;
}

footer a  {
  color: #999;
}

#play {
	clear: both;
}

.hide {
	display: none;
}

.carousel {
	clear: both;
}

#carousel {
	height: 500px;
	overflow: hidden;
		list-style: none;
		margin: 0;
		padding: 0;
}

.jcarousel-item {
	width: 739px;
	text-align: center;
	vertical-align: middle;
	height: 500px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	list-style: none;
        background: black;
        line-height: 500px;
}

.jcarousel-item img {
	display: inline-block;
	vertical-align: middle;
}

#icons {
	position: absolute;
	bottom: 15px;
        right: 90px;
        width: 336px;
	height: 46px;
        background: transparent url(images/iconos.png) top left no-repeat;
  
}

#facebook {
	position: absolute;
  bottom: 10px;
  right: 0;
}

#tweet ul, #tweet li {
	list-style-type: none;
	margin: 0;
  padding: 0;
}

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

img.fira {
 position: relative;
 top: -10px;
 left: 15px;
}