/*
Theme Name: Rocker
Theme URI: http://www.comalcool.com
Description: Default theme for ComalCool websiete
Version: 1.0
Author: David Prunonosa
Author URI: http://www.usehelvetica.net
*/

@import url(reset.css);

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #bcbcbc;
	background: url(img/bg.jpg) center top no-repeat #151719;
}

a { text-decoration: none; outline: none; }
a:link { color: #fff; }
a:visited { color: #fff; }
a:active { color: #fff; }
a:hover { color: #caff8c; }

h1 { font-size: 0.8em; }
h2 { font-size: 2.5em; font-weight: bold;  letter-spacing: -0.04em; line-height: 1em; margin-bottom: 20px; }
h3 { font-size: 2em; padding: 0 0 5px 0; line-height: 0.9em;  }
h4 { font-size: 1.1em; letter-spacing: -0.04em; font-weight: bold; line-height: 1em; }
h5 { font-size: 1.8em; font-style: italic; letter-spacing: -0.02em; }
h6 { font-size: 1.3em; color: #202020; font-weight: bold; } 
h7 { font-size: 1.3em; overflow-y: hidden; font-weight: bold; }

.clear { clear: both; }
.box { width: 960px; height: 100%; margin: 0px auto; position: relative; }

abbr { font-weight: bold; }
table { font-size: 0.9em; margin-bottom: 30px;  }

#top { height: 30px; /* background-color: #caff8c; */}
#top .box { background: url(img/bg-top.jpg) center no-repeat; }
#top .box p { font-size: 0.7em; top: 8px; position: absolute; right: 0px; color: #fff; }
#top .box p a { font-weight: bold; color: #caff8c; } 
#top .box p a:hover { color: #fff; }

#header { height: 80px; background: url(img/bg-sections.jpg) bottom center no-repeat; }
#header .box {  }

#logo { width: 155px; height: 39px; background: url(img/logo.gif) no-repeat; position: absolute; top: 18px; }
#logo a { display: block; width: 100%; height: 100%; text-indent: -10000px; }

#menu { position: absolute; right: 0px; bottom: 2px; }
#menu li { float: left; padding: 0 0px 0 12px; text-transform: uppercase; }
#menu a { font-weight: bold; color: #fff; font-size: 0.7em; display: block; height: 42px; }
#menu a:hover { background: url(img/bg-menu.gif) bottom center no-repeat; color: #caff8c; }

#frase { background: url(img/bg-sections.jpg) bottom center no-repeat;  }
#frase .box { padding-bottom: 18px;  }
#frase .box p { height: auto; font-weight: bold; font-size: 3.3em; color: #caff8c; line-height: 1em; margin-top: 10px; }

#banner { background: url(img/bg-sections-nobg.jpg) bottom center no-repeat; }
#banner .box { height: 345px; overflow-y: hidden; }

#slider { width: 100%; margin: 15px 0 0px 0; background-color: black; }

.columnas { background: url(img/bg-sections-nobg.jpg) bottom center no-repeat; margin-top: 20px; overflow-y: hidden; }
.columnas .box { overflow-y: hidden; }
.columnas .box .separador { width: 30px; height: 20px; float: left !important; }
.columnas .box .col300 { width: 300px; overflow-y: hidden; float: left; margin-bottom: 20px; }
.columnas .box .col300 h4 { color: #707070; }
.columnas .box .col300 .social { margin-top: 15px; }
.columnas .box .col300 .social li { float: left; margin-right: 5px; }
.columnas .box .col300 small { margin-left: 50px;  }
.columnas .box .col300 small { font-weight: bold; display: block;  font-size: 0.8em; }
.columnas .box .col300 small a { color: #caff8c; font-weight: bold; }
.columnas .box .col300 small a:hover { color: #fff; }

#twitter_div { width: 250px; background: url(img/logo-twitter.jpg) top left no-repeat; overflow-y: hidden; margin-top: 15px; padding-left: 50px; font-size: 0.8em; padding-bottom: 20px; }
#twitter_update_list { padding: 0px; margin: 0px; }

#col630 { width: 630px; float: left; height: auto; overflow: hidden; margin-top: 10px; }
#sidebar { width: 300px; float: left !important; overflow-y: hidden; margin-bottom: 30px; margin-top: 10px; }

#sidebar .sidebar-title { font-size: 1em; color: #caff8c; margin-bottom: 5px; font-weight: bold; text-transform: uppercase;  }
#sidebar .elblog { width: 300px; height: 181px; display: block; padding-bottom: 20px;  }

.sidebar-categories { overflow-y: hidden; margin-bottom: 35px; }
.sidebar-categories li { padding: 6px 0 6px 0; margin: 0 10px 0px 0; width: 140px; float: left; font-size: 0.9em; background: url(img/bg-cat.jpg) bottom no-repeat; font-size: 0.7em; }
.sidebar-categories li a { font-weight: bold; text-transform: uppercase; }

.sidebar-tags { overflow-y: hidden; margin-bottom: 35px; }
.sidebar-comments { overflow: hidden; margin-bottom: 35px; }
.sidebar-comments li { padding: 15px 0 15px 0; width: 100%; font-size: 0.8em; background: url(img/bg-cat.jpg) bottom repeat-x; }
.sidebar-comments li p { margin-bottom: 5px;  }
.sidebar-comments li strong { font-weight: bold; }
.sidebar-comments li a { color: #caff8c; }
.sidebar-comments li a:hover { color: #fff; }
.sidebar-comments li span { font-weight: bold; }


/* ----------------- Estilos del Post y paginas ------------------------------------ */

#col360 .box { overflow-y: hidden; }
#col630 .post-title { width: 480px; background: url(img/flecha.gif) bottom left no-repeat;  } 
#col630 .post-title a { font-weight: bold;  letter-spacing: -0.04em; line-height: 0.95em; color: white; }
#col630 .post-title a:hover { color: #caff8c; }

#col630 .post-meta { font-size: 0.8em; color: #fff; text-transform: uppercase; }

#col630 .post-meta a { color: #caff8c; font-weight: bold; }
#col630 .post-meta a:hover { color: #fff; }

#col630 .post-content { float: left; width: 630px; font-size: 0.9em; line-height: 1.4em; margin: 15px 0 40px 0; overflow-y: hidden; }

#col630 .post-content a { color: #caff8c; }
#col630 .post-content a:hover { color: #fff;}

#col630 .post-content img { padding: 5px; border: 1px dotted #838383; }
#col630 .post-content p { margin-bottom: 15px; }
#col630 .post-content .more-link { margin-left: 0px; }
#col630 .post-content strong { font-weight: bold; color: white; }
#col630 .post-content em { font-style: italic; }
#col630 .post-content h4 { font-size: 1.5em; font-weight: normal; color: #fff; padding: 10px 0 10px 0; }
#col630 .post-content h5 { font-size: 1.2em; font-weight: bold; color: #caff8c; letter-spacing: -0.02em; font-style: normal; }

#col630 .commentlist a { margin: 0px; }
#col630 .comment-meta, .commentmetadata { margin-bottom: 10px; }
#col630 #respond { margin-top: 30px; border: 1px dotted #333; padding: 20px; background-image: url(img/bg-stripe.png); width: 80%; overflow-y: hidden; }
#col630 h3#comments { margin-bottom: 20px; font-weight: bold; }
#col630 h3#comments strong { font-weight: bold;  }

#col630 .post-content .post-tags { font-size: 0.9em; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  }
#col630 .post-content .post-tags a { font-size: 0.9em; padding-left: 14px; background: url(img/tag.png) left center no-repeat; margin-left: 5px; color: white; }
#col630 .post-content .post-tags a:hover { text-decoration: underline; }


/* ---------------- Varios ------------------------------------ */

#blog { background: url(img/bg-sections-nobg.jpg) bottom center no-repeat; }
#blog .box { padding: 10px 0 10px 0; overflow-y: hidden; }
#blog .box .delblog { width: 135px; height: 38px; display: block; background: url(img/bt-desde-blog.jpg) top center; text-indent: -10000px; float: left; margin-right: 20px; overflow: hidden; }
#blog .box .delblog:hover { background: url(img/bt-desde-blog.jpg) bottom center; width: 135px; height: 38px; }
#blog .box p { display: block; padding-left: 100px; margin-top: 6px; position: relative; font-weight: bold !important; font-size: 1.2em; }
#blog .box p a { color: #caff8c !important; }
#blog .box p a:hover { color: #fff !important; }

#footer {  }
#footer .box { height: 100px; padding-top: 10px; }
#footer .box p { font-size: 0.8em; }
#footer .box p a { font-weight: bold; }
#footer .box p a:hover { color: #caff8c; }
#footer .box p cite { font-weight: bold; color: #caff8c; }


/* ---------------- Wordpress -------------------------------- */

.more-link { background-color: #caff8c; border: 1px dotted #caff8c; color: #000 !important; font-size: 0.9em; padding: 0 5px 1px 6px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.more-link:hover { background-color: #fff; color: #151719 !important; }

input { margin-bottom: 5px; background-color: #000; border: 1px solid #333; padding: 3px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
input:hover { border: 1px solid #fff; }
textarea { margin-bottom: 5px; background-color: #000; border: 1px solid #333; padding: 3px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 90%; }
textarea:hover { border: 1px solid #fff; }
#submit { background-color: #caff8c; padding: 10px; color: #104448; font: 1.3em bold "helvetica neue", helvetica, arial, sans-serif; border: none; }
#submit:hover { background-color: #fff; }
.avatar { display: block; margin-bottom: 5px; }
.comment-author { margin-bottom: 5px; }
object, embed { margin-bottom: 15px; }
.comment { padding: 20px; border: 1px dotted #333; margin-bottom: 10px; }
.pdf { background: url(img/pdf-32.png) no-repeat left center #ffc9db; padding: 6px 10px 5px 70px; border: #ff1864 dotted 1px; color: #ff1864 !important; font-size: 1.2em;  letter-spacing: -0.01em; }
.gallery-item { text-align: left; }
.side-blog { display: block; margin-bottom: 30px; }


#feedburner { margin-top: 20px; }
#feedburner p { font-size: 0.8em; }
#feedburner #submit { background-color: #caff8c; cursor: move; padding: 3px; color: #104448; font: 1em bold "helvetica neue", helvetica, arial, sans-serif; border: none; }
#feedburner #submit:hover { background-color: #fff; }
#feedburner h7:hover { font-weight: normal; padding: 2px 10px 2px 10px }


/* Easy Slider */

	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:960px;
		height:310px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		}	
	#nextBtn{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:30px;
		height:77px;
		background:url(images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a{ 
		background:url(images/btn_next.gif) no-repeat 0 0;	
		}												

/* // Easy Slider */