/* Theme Name: Starkers Theme URI: Description: Tema modificado/basado de Starkers Version: 1.0 (WP 2.9.2) Author: Arath Velázquez Author URI: http://www.arathvelazquez.com Tags: modificado, starkers, basic */ @import "style/css/reset.css"; @import "style/css/typography.css"; @import "style/css/layout.css"; /* STRUCTURE */ #wrapper {width:100%; margin: 0px auto; min-height: 100%; height: auto !important; height:100%;} /* HEADER */ .titlemenu {margin:0 auto; width:960px;} #top-bar {background:url(style/images/bg_black_line.jpg) repeat-x top center; height:101px;} #logo {padding:0; float:left;} h1 {text-decoration: none; border:0; width: 170px; height:30px; margin:25px 0 0 60px; padding:0; background:url(/wp-content/themes/arath/style/images/title.png) no-repeat 0 0;} h1 a {display:block; height:30px; text-indent:-9999px;} #menu-bar {padding-top:60px; margin-bottom:25px; float:right; font-size:16px;} #menu-bar li {display:inline; padding:3px 5px 3px 0px;} #menu-bar img {margin-top:-110px;} /*Solo para la imagen de RSS*/ #menu-bar a {color:#ffffff; border-raduis: 5px; -moz-border-radius: 5px; -webkit-border-radius:5px;} #menu-bar a:hover {background: white; color:#9696a1;} #header {margin:0 auto;} /* Dependiendo de la pagina, el header va a cambiar.*/ /* Header para el blog o Home en base de datos*/ #bg_header_blog {height:169px; width:100%; background:url(style/images/blog/blog_bg.jpg) top center repeat-x;} #main_txt_blog {background:url(style/images/blog/blog_txt.png) no-repeat center center; height:167px;} /* Header para Inicio*/ #bg_header {height:254px; width:100%; background:url(style/images/hd_content.jpg) top center repeat-x;} #main_txt {background:url(style/images/main_txt1.png) no-repeat center center; height:252px;} /* MID Solo aparece en la pagina de Inicio */ #mid {height:430px; background:#f1f1f1;} #mid .blog-top {background:url(style/images/shadow_up_blog.png) top center no-repeat; height:10px;} #mid .blog-bottom {background:url(style/images/shadow_down_blog.png) bottom center no-repeat; height:10px;} #blog-personal {margin:0 auto; width:850px; height:340px; padding: 35px 10px; font-size:16px;} #blog-personal a {color:#30a0ff; text-decoration:none;} #blog-personal a:hover {color:#30a0ff; text-decoration:underline;} #blog-personal li {padding: 10px 20px;} #blog-personal .logo {background:url(style/images/blogtitle.png) no-repeat; width:136px; height:28px; padding-bottom: 20px;} #lastpost {width:400px; float: left;} #lastpost img {border:5px solid #333333; margin:20px 0px 0px 0px;} #divisor {background:url(style/images/blog_div_line.jpg) no-repeat center center; width: 2px; height: 253px; float:left;} #populares {width:400px; float: right;} /* PORTAFOLIO Solo aparece en la pagina de Inicio */ #portafolio {background:url(style/images/bk1_work.jpg) repeat top center; height:750px; width:100%; padding:30px 0px 30px 0px;} #portafolio .porta-top {background:url(style/images/shadow_up_work.png) center no-repeat; height:10px; width:100%;} /* WORK Solo aparece en la pagina de Inicio */ #work {margin: 50px auto; width:900px; height: 500px; position: relative; font-size:16px;} #work .porta-left {background:url(style/images/shadow_left_work.png) left center no-repeat; height: 500px; width:10px; float:left;} #work .porta-center {height: 500px; width:780px; margin: 0 50px; float:left;} #work .porta-right {background:url(style/images/shadow_right_work.png) left center no-repeat; height: 500px; width:10px; float:right;} #work .title {color:#FFFFFF; font-size:15px;} #central {height:500px; width:780px; margin:0 auto; float:left; color:#59a3c6;} #central a {color:#30a0ff; text-decoration:none;} #central a:hover {color:#30a0ff; text-decoration:underline;} #central .up {padding:20px 0px;} #central .post_title {color:#bbbbbb;} #central .post_content {margin:30px 0px;} #central .down {height: 380px; width:100%;} #central .down .postimage_big {margin:10px 15px; height:350px; width:600px; float:left; background:transparent;} #central .down .postimage_big img {border:5px solid #444444;} /* FLECHAS Las flechas estan deshabilitadas para el SLIDESHOW - Se van a agregar pero mediante JQuery */ #central .down .leftrowa {background:url(style/images/row_left.png) center center no-repeat; height: 350px; width:55px; float:left;} #central .down .rightrowa {background:url(style/images/row_right.png) center center no-repeat; height:350px; width:55px; float:right;} /* SLIDESHOW Se tiene que reducir el Width, ya que quite las flechas de la iteración. */ #slideshow #slidesContainer {margin:0 auto; width:640px; height:500px; overflow:auto; position:relative;} /*El Overflow permite scrollbar*/ #slideshow #slidesContainer .slide {height:540px; float:left;} /* Controles para el SLLIDESHOW*/ .control {display:block; width:55px; height:500px; text-indent:-10000px; position:absolute; cursor:pointer;} #leftControl {top:50%; left:0; background:transparent url(style/images/row_left.png) no-repeat 0 0;} #rightControl {top:50%; right:0; background:transparent url(style/images/row_right.png) no-repeat 0 0;} /* SOCIAL Solo aparece en la pagina de Inicio */ #social {padding-top:20px;} /*#social #barra {margin: 0 auto; background:url(style/images/bar3_social.png) center center no-repeat; height: 190px; width:924px;} #barra .text {font-size:18px; padding:75px 60px 20px 60px;} #barra .text a {color:#3050aa;} #barra .text a:hover {color:#FF6600;} #barra .date {font-size:18px;padding-left:10px;} #barra .date a {color:#3050aa;} #barra .date a:hover {color:#11FFFF;} */ #social-bottom {background:url(style/images/shadow_down_social.png) bottom center no-repeat; height:90px;} #social-bottom #link-social {margin:0 auto; width: 500px; padding-top:10px;} #social-bottom li {display:inline;} #social-bottom .links {padding: 0px 36px;} /*sprites*/ #link-social ul,li {margin:0px; padding:0px;list-style:none;} #link-social .social-sprites li {float:left; padding: 0px 36px;} #link-social .social-sprites a {background:url(style/images/social-sprite.png); display:block; height:45px; text-indent:-1000px;} /*sprites | normal state*/ #link-social .rss a {width:43px;} #link-social .twitter a {width:53px; background-position:-44px 0px;} #link-social .wordpress a {width:48px; background-position:-94px 0px;} #link-social .gmail a {width:44px; background-position:-145px 0px;} /*sprites | rollover state*/ #link-social .rss a:hover {background-position:0px -45px;} #link-social .twitter a:hover {background-position:-44px -44px;} #link-social .wordpress a:hover {background-position:-94px -44px;} #link-social .gmail a:hover {background-position:-145px -45px;} /* FOOTER */ #footer {background:url(style/images/bg_footer_line.jpg) #000000 repeat-x top center; height:120px; color:#FFFFFF; padding:25px 0px 25px 25px;} #footer #menu {width:301px; margin-bottom:25px; float:right; font-size:16px;} #menu li {display:inline; padding:3px 5px 3px 0px;} #menu a {color:#ffffff; -moz-border-radius: 5px; -webkit-border-radius:5px;} #menu a:hover {background: white; color:#9696a1;} /* FOOTER | SEARCH Este es para el footer. El sidebar va a tener otro diseño. */ #footer #search {padding:0px; margin:0px; padding-top:20px;} #search li {display:inline; padding: 0px; margin:5px;} #search table {padding: 0px; margin: 0px;} #search .texto {padding:0px; margin:0px; background:#FFFFFF; width:150px; height:25px; border:none; font-size:16px} #search .boton {padding:0px; margin:0px; width:36px; height:25px; border: none; background:url(style/images/lupa.jpg) no-repeat right;} #search .desplazar {margin-right:15px;} /* FOOTER Sombra sobre el footer */ #bg-shadow-down-blog {background:#f1f1f1; width:100%;} #shadow-down-blog {background:url(style/images/blog/shadow_down_blog.png) bottom center no-repeat; height:10px;} /* Estas lineas solo son para la sombra inferior del blog y de las paginas | Estan en footer.php*/ /* BLOG | index.php */ #bg-blog {background:#f1f1f1; width:100%;} /*Abarca el fondo de blog y sidebar*/ #bg-blog .blog-shadow {background:url(style/images/blog/shadow_up_blog.png) top center no-repeat; height:10px;} #blog-up {background:#f1f1f1; width:100%; margin-top:-1px;} #blog-up .down {background:url(style/images/blog/shadow_down_blog.png) bottom center no-repeat; height:10px;} #blog-up .fondo-logo {background:url(style/images/blog/footer_AV_bg.jpg) repeat-x;} #blog-up .logo-footer {height:150px; width:100%; background:url(style/images/blog/footer_AV.jpg) top center no-repeat;} /*Aqui termina la sombra y el rectangulo con el logo.*/ #blog-content {margin:0 auto; width:850px; padding-top:30px;} #blog-content #blog {width:600px;} /*Esperando comentarios para justificar o no el texto del blog text-align:justify; */ #blog h2 a {font:24px normal; color:#2a5473; font-family:Trebuchet MS;} /*La font lleva normal para validar el tamaño, y lleva la family para que firefox la reconozca*/ #blog h2 a:hover {font:24px normal; color:#FF9900; font-family:Trebuchet MS;} #blog img {margin: 10px 0px;} #blog .attachment-full {border:5px solid #444444;} #blog p {margin:10px 0px 0px 0px;} #blog .post-text {font:14px; color:#666666;} #blog .post-date {font:14px; color:#444444;} #blog .post-category a {font:14px; color:#2a5473;} #blog .post-category a:hover {font:14px; color:#FF9900;} #blog .keepreading {margin:10px 0px; width:120px; position:relative; float:right;} #blog #divisionline {background:url(style/images/blog/blog_line_division.jpg) no-repeat top center; width:600px; height:2px; padding-bottom:30px;} #blog-content #blog .post-links {margin:80px 0px 20px 0px;} /* SIDEBAR */ #sidebar {width:210px; padding-left:40px;} #sidebar li {padding:0px; margin:0px;} #sidebar a {color:#2a5473;} #sidebar a:hover {color:#FF9900;} /* SIDEBAR | SIDE-SEARCH */ #sidebar #side-search {margin:0px; background:url(style/images/blog/sidebar-shadow.png) no-repeat left center; height:100px;} #side-search img {padding:10px;} #side-search table {margin:0px;} #side-search .texto {background:url(style/images/blog/sidebar_search_box.jpg); padding:0px; margin:0px; width:151px; height:25px; border:none; font-size:16px} #side-search .boton {padding:0px; margin:0px; width:36px; height:25px; border: none; background:url(style/images/blog/sidebar_search_lupa.jpg) no-repeat right;} #side-search .desplazar {margin-right:15px;} /* SIDEBAR | CATEGORIES */ #sidebar .categories, .blogroll {line-height:25px; margin:0px; padding:0px; padding-bottom:10px;} #sidebar .h2-categories {background:url(style/images/blog/sidebar_categorias.jpg) no-repeat left top; height:100px; margin:15px 0px -20px 0px;} #sidebar .h2-blogroll {background:url(style/images/blog/sidebar_blogroll.jpg) no-repeat left top; height:100px; margin:15px 0px -15px 0px;} #sidebar .categories li {padding-left:15px;} #sidebar .blogroll li {padding-left:15px;} #sidebar .sidebar-category-img {margin:0px; padding:0px;} /* SINGLE En esta pagina se muestran los posts individualmente, tendria que tener las mismas condiciones que la parte del blog. La uso para Search, Archive */ #bg-single {background:#f1f1f1; width:100%;} /*Abarca el fondo de blog y sidebar*/ #bg-single .single-shadow {background:url(style/images/blog/shadow_up_blog.png) top center no-repeat; height:10px;} #single-content {margin:0 auto; width:850px; padding-top:30px;} #single-content #single {width:600px; text-align:justify;} #single h2 {font:24px normal; color:#2a5473; font-family:Trebuchet MS;} /*La font lleva normal para validar el tamaño, y lleva la family para que firefox la reconozca*/ #single h2.title {margin-bottom:35px; text-align:center;} #single a {color:#2a5473;} #single a:hover {color:#FF9900;} #single img {margin: 10px auto;} #single p {margin:10px 0px 0px 0px;} #single blockquote {padding:20px; font-style:italic;} #single code {background:#FFFFFF;} #single h3 {font:16px normal; font-weight:bold; color:#666666; font-family:Trebuchet MS; padding:10px 0px;} #single .post-text {font:14px; color:#666666;} #single .post-rss {font:14px; color:#666666; margin-bottom:10px;} #single .post-rss a {font:14px; color:#2a5473; text-decoration:underline;} #single .post-rss a:hover {font:14px; color:#FF9900;} #single .post-category a {font:14px; color:#2a5473;} #single .post-category a:hover {font:14px; color:#FF9900;} #single img.borde-inferior {margin-bottom:30px;} #single #divisionline {background:url(style/images/blog/blog_line_division.jpg) no-repeat top center; width:600px; height:2px; margin:20px 0px 35px 0px;} #single .postlinks {margin:80px 0px 20px 0px;} /*Esta clase se necesito poner en las imagenes para flotaran a la izq y a la derecha*/ /* PAGE Para las páginas que se agreguen como Proyectos, Acerca y Contacto - page.php al final de la condicion de paginas. */ #bg-page {background:#f1f1f1; width:100%; height:100%; min-height:100%; height:auto;} /*Abarca el fondo de blog y sidebar*/ #bg-page .page-shadow {background:url(style/images/blog/shadow_up_blog.png) top center no-repeat; height:10px;} #page-content {margin:0 auto; width:900px; padding-top:-5px;} #page-content #page {width:900px; padding: 25px 0px; color:#666666; text-align:justify; font-size:14px; height:100%;} #page .page-left {background:url(style/images/shadow_right_work.png) left center no-repeat; height:500px; width:10px; float:left;} #page .page-center {margin: 0 50px; float:left; width: 780px;} #page .page-right {height: 500px; width:10px; float:right;} #page h2 {text-indent: 30px; font:24px normal; color:#2a5473; font-family:Trebuchet MS; padding-bottom:10px;} #page h2 a {font:24px normal; color:#2a5473; font-family:Trebuchet MS;} /*La font lleva normal para validar el tamaño, y lleva la family para que firefox la reconozca*/ #page h2 a:hover {font:24px normal; color:#FF9900; font-family:Trebuchet MS;} #page img {margin: 10px 0px;} #page p {margin:10px 0px 0px 0px;} #page h3 {font:18px normal; color:#666666; font-family:Trebuchet MS; padding:10px 0px;} #page a {font-style:italic;font-weight:bold;color:#666666;} #page a:hover {color:#FF9900;} #page em {font-weight:bold} #page .post-text {font:14px; color:#666666;} #page .post-date {font:14px; color:#444444;} #page .post-category a {font:14px; color:#2a5473;} #page .post-category a:hover {font:14px; color:#FF9900;} #page .keepreading {margin:10px 0px; width:120px; position:relative; float:right;} #page #divisionline {background:url(style/images/blog/blog_line_division.jpg) no-repeat top center; width:600px; height:2px; padding-bottom:30px;} #page .post-links {margin:80px 0px 20px 0px;} /* Los selectores y clases para el formulario de Contacto. */ #page #contacto-hey {position:relative; float:left; width:60%; margin:0px; padding-right:15px;} #page #contacto-form {position:relative; float:right;width:35%; margin:0px; padding:0px; background:url(style/images/shadow_left_work.png) left center no-repeat; height:500px;} #page #contacto-form table {margin-top:30px;} #aside-search .atexto {background:url(style/images/blog/sidebar_search_box.jpg); padding:0px; margin:0px; width:151px; height:25px; border:none; font-size:16px} #page #contacto-form input {margin:5px 5px; width:250px; height:25px; border:none; padding:0px; background:url(/wp-content/themes/arath/style/images/input_contactForm.jpg);} #page #contacto-form textarea {margin:10px 5px; background-color:#dddbdc; border:none} #page #contacto-form .instructions {padding-left:10px; font-size:12px;} #page #contacto-form .campos {width:250px; color:#666666; padding:0px 18px;} #page #contacto-form .hidden {color:red; font-size:10px; height:0px;} /* Estos son para el Drag & Drop de contacto */ .drags {width: 87px; height: 52px; background: url("style/images/logo.png") no-repeat; padding: 5px; margin:5px;} #dropzone {width: 88px; height: 52px; background: url("style/images/logo-shadow.png") no-repeat; color: white; padding: 5px; } /* COMENTARIOS */ #comentarios {} #comentarios .imagen {margin:0 auto;} #comentarios li {border:1px solid #dddddd; background:#ffffff; margin: 15px 0px; padding:10px;} /*Los cuadros de comentarios*/ #comentarios label {color:#aaaaaa;} #comentarios input {font-size:14px;} #comentarios #comments {margin-top:10px;} /*Este solo es para la parte de "Dejar un comentario."*/ #comentarios #post-content li a {font:14px normal; color:#2a5473; text-decoration:underline;} #comentarios #post-content li a:hover {font:14px normal; color:#FF9900;} #comentarios #commentform {padding: 15px 0px;} #comentarios #commentform p {padding-bottom:5px;} #comentarios #author {width:250px; height:25px; background:url(style/images/input_contactForm.jpg) no-repeat; border:none;} #comentarios #email {width:250px; height:25px; background:url(style/images/input_contactForm.jpg) no-repeat; border:none;} #comentarios #url {width:250px; height:25px; background:url(style/images/input_contactForm.jpg) no-repeat; border:none;} #comentarios #comment {background-color:#dddbdc; border:none;} #comentarios #submit {padding:0px; margin:0px; width:200px; height:30px; border:2px solid #666666; background: url(style/images/blog/fondoComentar.jpg); color:#ffffff;} #comentarios #botonComentar {} #comentarios .hidden {color:red; font-size:10px; height:0px; margin-bottom:5px;} /**/ #container{} .post{} .postmeta{} .postnavigation{} #searchform{} #sidebar{} #comments .comments_navigation{} .comments_navigation{} .comments_reply{} .comments_text{} .comments_meta{}