Voy a dejar una pequeña lista de modificaciones que se le pueden hacer fácilmente al fichero style.css del nuevo tema (template) por defecto de wordpress “Twenty Eleven”.

De esta forma podremos darle un estilo mucho más personalizado sin demasiado esfuerzo.

La idea es aprender de estas modificaciones y empezar a trastear con el CSS hasta dejarlo a nuestro gusto personal. Aunque puedes copiarlo tal cual y ver como queda.

editar tema wordpress css

 

Listado de modificaciones del CSS del fichero style.css del Tema: Twenty Eleven de WordPress

 

#site-title a – Cambiar varios parámetros del Título del sitio (color, tamaño, tipo de letra, etc…)

#site-title a {
color: red;
font-family: times New Roman;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}

 

#site-title a:hover – Si quieres cambiar el color del mouse over del Site Title

#site-title a:hover, #site-title a:focus, #site-title a:active {
color: #1982D1;
}

 

#site-title – Para quitar el espacio en blanco que se deja en la parte de arriba del Título de la web.

#site-title {
margin-right: 270px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 1.65625em;
}

 

#site-description – Si quieres quitar el espacio en blanco que hay justo debajo del Título de la web, entre este y la imagen de la cabecera.

#site-description {
color: #7A7A7A;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

 

#site-description – Para modificar la descripción (color, fuente, tamaño, etc…)

#site-description {
color: blue;
font-family: tahoma;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

 

#branding img – Para modificar el tamaño de la Cabecera

#branding img {
height: 100px;
margin-bottom: -7px;
width: 100%;
}

 

#branding #searchform – Si quieres ocultar mediante CSS el formulario de búsqueda, aunque recomiendo hacerlo desde código php.

#branding #searchform {
display: none;
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}

 

#acess – Para cambiar el color de fondo del menú de navegación (el superior).

#access {
background-image: -moz-linear-gradient(#252525, red);
}

 

#acess a – Para cambiar el color de la fuente de los enlaces (si no lo cambias todos serán enlaces) del menú de navegación.

#access a {
color: red;
display: block;
line-height: 3.333em;
padding-bottom: 0;
padding-left: 1.2125em;
padding-right: 1.2125em;
padding-top: 0;
text-decoration: none;
}

 

.entry-title, entry-title a – Si quieres cambiar el título de una entrada (post), puede modificar la fuente, el color, el tamaño, etc…

.entry-title, .entry-title a {
color: red;
font-family: tahoma;
font-size: 1.2em;
text-decoration: none;
}

 

Para entradas individuales del blog de Twenty Eleven.

.singular .entry-title {
color: #000000;
font-size: 36px;
font-weight: bold;
line-height: 48px;
}

 

.entry-title a:hover, .entry-title a:focus, .entry-title a:active – Para modificar el mouse hover del título del post del theme Twenty Eleven.

.entry-title a:hover, .entry-title a:focus, .entry-title a:active {
color: #1982D1;
}

 

.entry-meta – Para ocultar mediante CSS la información sobre la entrada (fecha, etc…), también ayudará a esconder la información meta del Footer.

.entry-meta {
clear: both;
color: #666666;
display: none;
font-size: 12px;
line-height: 18px;
}

 

.entry-content p – Si quieres editar el formato del contenido de una entrada (color, fuente, tamaño, etc…).

.entry-content p {
font-family: times New Roman;
color: red;
font-size: 1.1em;
}

 

.widget-title – Para editar el formato de los títulos de los widgets que tenemos en el sidebar de Twenty Eleven.

.widget-title {
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}

 

.widget-title – Si quieres añadir a los títulos de tus widgets un fondo de color.

.widget-title {
background-color: gold;
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
padding-left: 37px;
text-transform: uppercase;
}

 

.widget a – Para modificar el formato los enlaces que hay dentro de los widgets.

.widget a {
color: black;
font-family: times New Roman;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

#primary & #secondary – Son los contenedores central y sidebar respectivamente, con este código incrementamos el tamaño del sidebar de la derecha que lleva Twenty Eleven.

#primary {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: -26.4%;
margin-top: 0;
width: 90%;
}

#secondary {
float: right;
margin-right: 7.6%;
width: 24.8%;
}

 

#comments – Para esconder mediante CSS tus comentarios, lo recomendable es hacerlo desde el código php.

#comments {
display: none;
}

 

#comment-content p – Si quieres editar el formato del contenido de tus comentarios.

.comment-content p {
color: red;
font-family: times New Roman;
font-size: 16px;
}

.comment-meta – Si quieres cambiar el formato del contenido meta de los comentarios (Nombre del autor y fecha).

.comment-meta {
font-size: 16px;
line-height: 2.2em;
}

body – Para cambiar el color de fondo del tema Twenty eleven.

body {
background-color: red;}

 

#page – Para modificar el fondo de la página, la caja principal. Si no sabes a lo que me refiero, ponle color amarillo y enseguida verás lo que modifica.

#page {
background-color: yellow;
}

.entry-header .comments-link a – Si no quieres que se muestre el bocadillo con el número de comentarios en la parte derecha de las entrada, esto es nuevo con el tema Twenty Eleven.

.entry-header .comments-link a {
display: none;
}

 

#content – Para cambiar el fondo de las entradas.

#content {
background-color: gold;
margin-bottom: 0;
margin-left: 7.6%;
margin-right: 34%;
margin-top: 0;
width: 58.4%;
}

 

#branding hgroup – Si quieres eliminar todo el bloque que hay encima de la imagen del encabezado (título, descripción y search) mediante CSS, como antes, esto se debería hacer desde el código php para hacerlo correctamente.

#branding hgroup {
display: none;
margin: 0 7.6%;
}

 

#access a – Para cambiar el espacio entre los elementos del menú de navegación del tema Twenty Eleven.

#access a {
color: black;
display: block;
font-size: 14px;
line-height: 3.333em;
padding: 0 0.6em;
text-decoration: none;
}

 

Si quieres alinear los post, el título del sitio y el menú de navegación a la izquierda en el tema Twenty Eleven utiliza el siguiente código CSS.

#branding hgroup {
margin: 0 0.6%;
}
#access div {
margin: 0 0.6%;
}
#content {
margin: 0 34% 0 0.6%;
width: 58.4%;
}

 

#content – Para añadir un borde a la parte derecha del contenido de los post prueba el siguiente código CSS.

#content {
border-right: 1px dotted;
margin: 0 34% 0 0.6%;
padding-right: 11px;
width: 61.4%;
}

.widget ul li – Para quitar la bolita en los elementos de las listas que salen en el sidebar de la derecha, edita el siguiente código CSS en el archvio style.css del tema Twenty Eleven.

.widget ul li {
color: #777777;
font-size: 13px;
list-style: none outside none;
}

 

.widget – Si quieres añadir un borde después de cada widget del sidebar utiliza el siguiente código CSS.

.widget {
border-bottom: 1px dotted grey;
clear: both;
padding: 15px 0 20px;
}

 

Hay muchísimas más modificaciones que se pueden hacer, el fichero style.css del tema Twenty Eleven tiene más de 2000 líneas de código, por lo que aprender a editarlo completamente requerirá algo de tiempo. Espero que esta recopilación de pequeñas ediciones os haya servido para tomar contacto con el CSS y atreveros a ir editando vuestro tema poco a poco.

Pau Mompó (17 Posts)

Soy Project Manager y hablo sobre Marketing Online, SEO, SEM, Desarrollo Web, Tiendas Online, Redes Sociales, etc... 1985


50 pensamientos en “WordPress tema: Twenty Eleven CSS Modificación Básica (Title,Description, Post Title,Comments,Menus,Sidebar…)

  1. Pingback: Wordpress tema: Twenty Eleven CSS Modificación Básica | Diseño Web SEO | Posicionamiento web en Argentina

  2. Gonzalo

    Muchas Gracias.

    Sabes recien empiezo con mi web y tengo el mismo theme que tu, me podrías decir como hago para cambiar los H1 por H2 en la home, eso no altera el SEO para éste tema en particular? Me refiero específicamente a “”

    Desde ya te agradezco.

    Un saludo!

    Responder
    1. Balinor Autor

      Para cambiar los H1 de la página inicial por H2, tienes que ir al fichero content.php y buscar la línea dónde pone:

      < h1 class="entry-title">......< /h1>

      Y simplemente cambiarlo por:

      < h2 class="entry-title">......< /h2>

      Desde el punto de vista del posicionamiento SEO, los H1 tienen más importancia que los H2 y se valoran más. Por lo que yo recomiendo dejarlo como H1, eso sí, no vayas a empezar a poner etiquetas H1 por todas partes ya que a la hora de posicionar una página en Google valoran la “naturalidad”.

      Responder
  3. Marcos

    Hola, primero muchas gracias por el mini-tutorial.
    Tengo este theme instalado (twenty eleven) en wordpress y he puesto una imagen fija en el background muy chula pero esta en casi su totalidad tapada por el page del blog…. he intentado ponerle al tag “page” la propiedad “opacity:0.8″ para que se transparente pero se transparenta absolutamente todo tanto la fuente como la imagen de cabecera como los widget… mi pregunta es ¿sabes a que tag deberia ponerle el opacity:0.8 para que solo se transparente el fondo blanco o negro en mi caso y asi el background sea mas visible? gracias.

    Responder
  4. Balinor Autor

    Prueba a ponerle esta propiedad al CSS #page

    background-color: rgba(0, 0, 0, 0.6);

    El último campo es el nivel de transparencia, de esta forma sólo se la aplicas al background.

    Responder
  5. creaciones web

    Muy buena recopilación de código css para el tema por defecto de wordpress.
    La verdad es que es un tema muy sencillito pero con unos pocos retoques puedes dejar un theme con un aspecto muy profesional.

    Responder
  6. Javier Rodriguez

    Buenisima la recopilación, Gracias.
    En el tema se encuentran 3 lineas en le pie de pagina, una de ellas (la primera) del tamaño del texto y otras dos a lo ancho de la pagina con un sombreado gris esta ultima. Sabria alguien para poder vorrarlas y ganar espacio. Un saludo y nuevamente gracias.

    Responder
  7. Sergio

    Hola, ¿de qué manera puede afectar HTML5 al SEO?

    Si bien en este tema no se agregan secciones, la idea en HTML5 es tener varias secciones con la posibilidad de varias H1, H2… dentro de cada una y esto sí pienso que afectaría negativamente debido a posibles penalizaciones.

    Entonces, la duda es también si en este tema está bien aplicada la idea de HTML5 y cuál sería el beneficio en este momento de utilizarlo? si es que lo hay.

    Muchas gracias.

    Responder
  8. xabi

    Hola. Garcias por el aporte. Haber si me ayudas en lo que busco. Uso esta misma plantilla, pero al entrar en un post el bloque derecho se me oculta. Que deberia de hacer para que el bloque derecho este siempre visible?

    Responder
  9. ilan

    sabeis como puedo eliminar el borde ese gris que sale en la parte de arriba? (entre la caja principal y el fondo)

    muchisimas gracias, me ha servido de mucha ayuda los tips de ésta pagina. saludos!!!

    Responder
    1. ramon

      archivo footer.php

      <a href="” title=”" rel=”generator”>

      ______________________________________________________

      <a href="” title=”" rel=”generator”>

      Responder
  10. eudin

    quiero añadir un logo en la parte superior de mii paga

    Q debo hacere?
    algo asi:

    logo Club KM Venezuela
    El placer de correr

    Muchas gracias si me puedes ayudar soy nuevo en esto del wordpress

    Responder
  11. Rubén Velasco

    Hola Gonzalo,

    Gracias por la información.
    Tengo un problema. He realizado una prueba cambiando el color al #page.
    Al actualizar el cambio me indica que “File edited successfully” pero los cambios no se ven en la web ¿puedes echarme un cable?
    Gracias
    Rubén

    Responder
  12. gerardo

    Hola, sabeis como puedo añadir el sidebar a los posts individuales y a las paginas. Estube poniendo el en el single.php pero no consigo que salga sin descuadrarse.
    Gracias.

    Responder
  13. Antonio Lopez

    Saludo cordial.
    Excelentes las explicaciones para realizar los cambios en WordPress tema: Twenty Eleven CSS.

    Estoy tratando de encontrar el cambio del color cuando el cursor se posiciona en la barra de menú (logre cambiar el color a azul) y deseo otro color en la Twenty Ten.

    Si es posible.

    De antemano mil gracias.

    Antonio

    Responder
  14. roxana

    alguien sabe como cambiar el espacio que hay entre el menu y la pagina, yo tengo un menu que dice INICIO QUIENES SOMOS etc, y cuando hago click en INICIO me aparece abajo la palabra INICIO (entre espacios arriba y abajo). Quiero sacar la palabra y achicar el espacio. Muchas gracias muy instructivo el blog

    Responder
  15. anderwil

    Hola amigos como están, tengo un inconveniente y espero me puedan ayudar verán el problema es que quiero que la imagen de mi cabecera quede en lugar del titulo y eliminar ese espacio en blanco.. soy nuevo en wordpress..

    Responder
  16. Gaspi

    Buenas! muchas gracias por la ayuda! es un buen tema para empezar!

    Una pregunta que nose porque ahún no se te ha formulado:

    Como puedo hacer para que la pagina que sale al principo, sea una de las que yo he creado

    Ejemplo:

    Con el tema este, la pagina inicial se llama “página de inicio”, y esta no me aparece en el listado de paginas.

    Me he creado una que se llama noticias, que solo se publica las categorias “noticias” (con el pluguin PAGE POSTS), y me interesa, o poder editar la pagina de inicio con este pluguin y cambiar el nombre, o poner como la pagina inicial la de noticias!

    Espero se entienda! Muchas gracias de antemano!

    Responder
  17. Adriana

    Hola, soy nueva en esto y quisiera que me ayudaran con 2 dudas:

    1.- Como puedo hacer para poner un logotipo en vez del texto en la cabecera.

    Quisiera poner un logo y debaj dejar las imagenes de 1000×288 que trae por default

    2.- Como puedo hacer mas gruesa la linea gris del contorno de la pagina a modo de dar el efecto de mas profundidad.

    Gracias de antemano

    Responder
  18. Gustavo N.

    Hola a todos, alguien me puede echar un cable para quitar las fechas de las entradas a mi wordpress Twenty Eleven, ya he buscado el postdate por todos lados y no lo encuentro, en una anterior búsqueda los encontré los borre pero aun aparecen en las entradas las dichosas fechas y necesito quitarlas, agradezco cualquier ayuda. Gracias anticipadas.

    Responder
  19. Gustavo

    Hola amig@s¡¡
    Tengo un problema con este theme. Subo ariticulos en las diversas categorias de mi blog, pero no se actualizan para el publico, tengo que cambiar en nombre de la catergoria para lo haga, con la perdida de posicionamiento SEO que supone al cambiar la URL de las entradas de esa categoría.
    ¿alguna solucion? gracias de antemano.

    Responder
    1. Balinor Autor

      La verdad es que es algo muy extraño, no es normal que ocurra esto, necesitaría algo más de información o acceso a la web para poder ver que ocurre. No es normal.

      Responder
  20. m3a

    Es siempre un problema para traducir temas para espoñol. No entiendo por que… He trabajando por 3 dias para traducir, pero otra tema “crossapple” – muchas textos en sitios diferente.

    Responder
  21. JUan Pablo

    Hola amigos… necesito una ayudita
    necesito poner mi logo en la parte superior del blog…. alguna ayuda
    lo segundo, necesito si alguien pudiera decirme en que parte esta el style.css pk cuando lo hago dle editor me da como acces denied y me imagino que hay que cambiarle los permisos
    muchas gracias desde chile

    Responder
  22. Miguel Mora

    Muy buenas.
    Sensacional entrada. Nos viene genial a los que nos hemos decantado por este tema de WordPress.
    Tengo un problema, a ver si me lo saben resolver. Cuando creo una tabla sólo me salen las líneas superior e inferior, no las centrales (divisorias). Tampoco consigo que con bordercolor cambie el color de dichas líneas.
    Saludos.

    Responder
    1. joseCrea

      clicas encima de la imagen cuando estás editando el post, te saldrán configuración de la imagen y toda la pesca, debes seleccionar la pestaña de arriba; avanced settings… en image properties pones en los tres huecos un cero a cada uno…

      a mi me funciona bein!
      espero haber sido de ayuda!

      Responder
  23. Jose

    Hola, pues otro que se suma a las felicitaciones por estas explicaciones. Yo he programado mi web con iweb pero problemas de compatibilidades etc. el blog lo estoy haciendo con WordPress con la esperanza que si queda bien haré lo mismo con la web.
    Dicho esto, me gustaría preguntar si es posible poner una foto distinta en la cabecera para cada entrada. Yo soy fotógrafo y me gustaría que en cada entrada la foto hiciese alusión al tema que voy a tratar y no siempre la misma en todos lo sitios.

    Muchas gracias

    Responder
    1. Balinor Autor

      Es posible hacerlo editando un poco el código y haciendo que lea de la imagen que hayas puesto como destacada en esa entrada, pero hay que meterse a programar un poco para conseguirlo.

      Responder
  24. javier

    Hola , barbaro estos pasos, yo necesitaria :
    quiero poner mi logo arriba a la izquierda y sacar el titulo. ( o poder poner debajo del logo una linea con alguna segunda presentacion en texto.)
    y tambien a la derecha poder sacar el buscador, la caja , y poder usarlo para añadir publicidad adsense u otro codigo. Muchas gracias y un gran saludo.

    Responder
  25. Pablo Landa

    Hola, primero que nada gracias por el aporte, tengo una serie de preguntas, que espero que me puedan ayudar, vienlo los comentarios alguien ya las ha hecho pero no han recibido respuesta o reciben a medias.
    Elegí el tema Twenty Eleven, porque me parece muy limpio, pero el asunto es que en el area de contenio, previamente yo he modificado el codigo para que en vez del titulo de cada seccion (Inicio, etc) aparezca una imagen, pero el margen (espacio blanco) tanto superior como inferior es enorme, y quiero reducirlo ¿me ayudaís o me orientaís en como hacerlo?

    la otra cuestón es esa misma imagen que he puesto tiene un margen gris y quiero quitarlo, lo mismo que el margen de las imagenes de los post, ¿que hago? he visto que puede hacer desde las propiedades de edicion para el caso de los post, pero para el caso de la imagen incertada en la cabecera ¿que puedo hacer’
    la pagina es: tiyaniyyamexico.info aho podran ver que en cada pagina esta una imagen igual, esa la he insertado por codido no me acuerdo como pero lo hice, y quiero reducir los espacios en blanco que tiene arriba y abajo para que el texto sea mas facil de leer y bueno quitar ese margen gris saludos

    Responder
  26. Balinor Autor

    El tema del borde es fácil es ir al style.css y dónde pone esto:

    img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
    border: 1px solid #ddd;
    padding: 6px;
    }

    y quitar la línea del border

    El tema del margen es igual es buscar en el css dónde lo pone

    media=”all”
    img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 1.625em;
    }

    Aquí hay uno, margin-bottom: 0px;

    Responder
    1. Pablo Landa

      Muchas gracias por el apoyo, lo del margen lo he solucionado, pero el espacio sigue igual, copio el codigo del style.css para ver si me hceís el favor de decirmo donde esta el error y donde hacer la modificación :


      /*
      Theme Name: Twenty Eleven
      Theme URI: http://wordpress.org/extend/themes/twentyeleven
      Author: the WordPress team
      Author URI: http://wordpress.org/
      Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background — then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom “Ephemera” widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured “sticky” posts), and special styles for six different post formats.
      Version: 1.5
      License: GNU General Public License v2 or later
      License URI: http://www.gnu.org/licenses/gpl-2.0.html
      Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
      Text Domain: twentyeleven
      */

      /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
      ————————————————————– */

      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, font, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td {
      border: 0;
      font-family: inherit;
      font-size: 100%;
      font-style: inherit;
      font-weight: inherit;
      margin: 0;
      outline: 0;
      padding: 0;
      vertical-align: baseline;
      }
      table.nolines td
      {
      border:0;
      }
      :focus {/* remember to define focus styles! */
      outline: 0;
      }
      body {
      background: #fff;
      line-height: 1;
      }
      ol, ul {
      list-style: none;
      }
      table {/* tables still need ‘cellspacing=”0″‘ in the markup */
      border-collapse: separate;
      border-spacing: 0;
      }
      caption, th, td {
      font-weight: normal;
      text-align: left;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
      content: “”;
      }
      blockquote, q {
      quotes: “” “”;
      }
      a img {
      border: 0;
      }
      article, aside, details, figcaption, figure,
      footer, header, hgroup, menu, nav, section {
      display: block;
      }

      /* =Structure
      ———————————————– */

      body {
      padding: 0 2em;
      }
      #page {
      margin: 2em auto;
      max-width: 1000px;
      }
      #branding hgroup {
      margin: 0 7.6%;
      }
      #access div {
      margin: 0 7.6%;
      }
      #primary {
      float: left;
      margin: 0 -26.4% 0 0;
      width: 100%;
      }
      #content {
      margin: 0 -34% 0 -7.6%;
      width: 58.4%;
      }
      #secondary {
      float: right;
      margin-right: 7.6%;
      width: 18.8%;
      }

      /* Singular */
      .singular #primary {
      margin: 0;
      }
      .singular #content,
      .left-sidebar.singular #content {
      margin: 0 7.6%;
      position: relative;
      width: auto;
      }
      .singular .entry-header,
      .singular .entry-content,
      .singular footer.entry-meta,
      .singular #comments-title {
      margin: 0 auto;
      width: 68.9%;
      }

      /* Attachments */
      .singular .image-attachment .entry-content {
      margin: 0 auto;
      width: auto;
      }
      .singular .image-attachment .entry-description {
      margin: 0 auto;
      width: 68.9%;
      }

      /* Showcase */
      .page-template-showcase-php #primary,
      .left-sidebar.page-template-showcase-php #primary {
      margin: 0;
      }
      .page-template-showcase-php #content,
      .left-sidebar.page-template-showcase-php #content {
      margin: 0 7.6%;
      width: auto;
      }
      .page-template-showcase-php section.recent-posts {
      float: right;
      margin: 0 0 0 31%;
      width: 69%;
      }
      .page-template-showcase-php #main .widget-area {
      float: left;
      margin: 0 -22.15% 0 0;
      width: 22.15%;
      }

      /* error404 */
      .error404 #primary {
      float: none;
      margin: 0;
      }
      .error404 #primary #content {
      margin: 0 7.6%;
      width: auto;
      }

      /* Alignment */
      .alignleft {
      display: inline;
      float: left;
      margin-right: 1.625em;
      }
      .alignright {
      display: inline;
      float: right;
      margin-left: 1.625em;
      }
      .aligncenter {
      clear: both;
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

      /* Right Content */
      .left-sidebar #primary {
      float: right;
      margin: 0 0 0 -26.4%;
      width: 100%;
      }
      .left-sidebar #content {
      margin: 0 7.6% 0 34%;
      width: 58.4%;
      }
      .left-sidebar #secondary {
      float: left;
      margin-left: 7.6%;
      margin-right: 0;
      width: 18.8%;
      }

      /* One column */
      .one-column #page {
      max-width: 690px;
      }
      .one-column #content {
      margin: 0 7.6%;
      width: auto;
      }
      .one-column #nav-below {
      border-bottom: 1px solid #ddd;
      margin-bottom: 1.625em;
      }
      .one-column #secondary {
      float: none;
      margin: 0 7.6%;
      width: auto;
      }
      /* Simplify the showcase template */
      .one-column .page-template-showcase-php section.recent-posts {
      float: none;
      margin: 0;
      width: 100%;
      }
      .one-column .page-template-showcase-php #main .widget-area {
      float: none;
      margin: 0;
      width: auto;
      }
      .one-column .page-template-showcase-php .other-recent-posts {
      border-bottom: 1px solid #ddd;
      }
      /* Simplify the showcase template when small feature */
      .one-column section.featured-post .attachment-small-feature {
      border: none;
      display: block;
      height: auto;
      max-width: 60%;
      position: static;
      }
      .one-column article.feature-image.small {
      margin: 0 0 1.625em;
      padding: 0;
      }
      .one-column article.feature-image.small .entry-title {
      font-size: 20px;
      line-height: 1.3em;
      }
      .one-column article.feature-image.small .entry-summary {
      height: 150px;
      overflow: hidden;
      padding: 0;
      text-overflow: ellipsis;
      }
      .one-column article.feature-image.small .entry-summary a {
      left: -9%;
      }
      /* Remove the margin on singular articles */
      .one-column.singular .entry-header,
      .one-column.singular .entry-content,
      .one-column.singular footer.entry-meta,
      .one-column.singular #comments-title {
      width: 100%;
      }
      /* Simplify the pullquotes and pull styles */
      .one-column.singular blockquote.pull {
      margin: 0 0 1.625em;
      }
      .one-column.singular .pull.alignleft {
      margin: 0 1.625em 0 0;
      }
      .one-column.singular .pull.alignright {
      margin: 0 0 0 1.625em;
      }
      .one-column.singular .entry-meta .edit-link a {
      position: absolute;
      left: 0;
      top: 40px;
      }
      .one-column.singular #author-info {
      margin: 2.2em -8.8% 0;
      padding: 20px 8.8%;
      }
      /* Make sure we have room for our comment avatars */
      .one-column .commentlist > li.comment {
      margin-left: 102px;
      width: auto;
      }
      /* Make sure the logo and search form don’t collide */
      .one-column #branding #searchform {
      right: 40px;
      top: 4em;
      }
      /* Talking avatars take up too much room at this size */
      .one-column .commentlist > li.comment {
      margin-left: 0;
      }
      .one-column .commentlist > li.comment .comment-meta,
      .one-column .commentlist > li.comment .comment-content {
      margin-right: 85px;
      }
      .one-column .commentlist .avatar {
      background: transparent;
      display: block;
      padding: 0;
      top: 1.625em;
      left: auto;
      right: 1.625em;
      }
      .one-column .commentlist .children .avatar {
      background: none;
      padding: 0;
      position: absolute;
      top: 2.2em;
      left: 2.2em;
      }
      .one-column #respond {
      width: auto;
      }

      /* =Global
      ———————————————– */

      body, input, textarea {
      color: #373737;
      font: 15px “Helvetica Neue”, Helvetica, Arial, sans-serif;
      font-weight: 300;
      line-height: 1.625;
      }
      body {
      background: #e2e2e2;
      }
      #page {
      background: #fff;
      opacity:0.8;
      }

      /* Headings */
      h1,h2,h3,h4,h5,h6 {
      clear: both;
      }
      hr {
      background-color: #ccc;
      border: 0;
      height: 1px;
      margin-bottom: 0px;

      }

      /* Text elements */
      p {
      margin-bottom: 1.625em;
      }
      ul, ol {
      margin: 0 0 1.625em 2.5em;
      }
      ul {
      list-style: square;
      }
      ol {
      list-style-type: decimal;
      }
      ol ol {
      list-style: upper-alpha;
      }
      ol ol ol {
      list-style: lower-roman;
      }
      ol ol ol ol {
      list-style: lower-alpha;
      }
      ul ul, ol ol, ul ol, ol ul {
      margin-bottom: 0;
      }
      dl {
      margin: 0 1.625em;
      }
      dt {
      font-weight: bold;
      }
      dd {
      margin-bottom: 1.625em;
      }
      strong {
      font-weight: bold;
      }
      cite, em, i {
      font-style: italic;
      }
      blockquote {
      font-family: Georgia, “Bitstream Charter”, serif;
      font-style: italic;
      font-weight: normal;
      margin: 0 3em;
      }
      blockquote em, blockquote i, blockquote cite {
      font-style: normal;
      }
      blockquote cite {
      color: #666;
      font: 12px “Helvetica Neue”, Helvetica, Arial, sans-serif;
      font-weight: 300;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      }
      pre {
      background: #f4f4f4;
      font: 13px “Courier 10 Pitch”, Courier, monospace;
      line-height: 1.5;
      margin-bottom: 1.625em;
      overflow: auto;
      padding: 0.75em 1.625em;
      }
      code, kbd, samp, var {
      font: 13px Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;
      }
      abbr, acronym, dfn {
      border-bottom: 1px dotted #666;
      cursor: help;
      }
      address {
      display: block;
      margin: 0 0 1.625em;
      }
      ins {
      background: #fff9c0;
      text-decoration: none;
      }
      sup,
      sub {
      font-size: 10px;
      height: 0;
      line-height: 1;
      position: relative;
      vertical-align: baseline;
      }
      sup {
      bottom: 1ex;
      }
      sub {
      top: .5ex;
      }
      small {
      font-size: smaller;
      }

      /* Forms */
      input[type=text],
      input[type=password],
      input[type=email],
      input[type=url],
      input[type=number],
      textarea {
      background: #fafafa;
      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
      border: 1px solid #ddd;
      color: #888;
      }
      input[type=text]:focus,
      input[type=password]:focus,
      input[type=email]:focus,
      input[type=url]:focus,
      input[type=number]:focus,
      textarea:focus {
      color: #373737;
      }
      textarea {
      padding-left: 3px;
      width: 98%;
      }
      input[type=text],
      input[type=password],
      input[type=email],
      input[type=url],
      input[type=number] {
      padding: 3px;
      }
      input#s {
      background: url(images/search.png) no-repeat 5px 6px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      font-size: 14px;
      height: 22px;
      line-height: 1.2em;
      padding: 4px 10px 4px 28px;
      }
      input#searchsubmit {
      display: none;
      }

      /* Links */
      a {
      color: #1982d1;
      text-decoration: none;
      }
      a:focus,
      a:active,
      a:hover {
      text-decoration: underline;
      }

      /* Assistive text */
      .assistive-text {
      position: absolute !important;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);
      }
      #access a.assistive-text:active,
      #access a.assistive-text:focus {
      background: #eee;
      border-bottom: 1px solid #ddd;
      color: #1982d1;
      clip: auto !important;
      font-size: 12px;
      position: absolute;
      text-decoration: underline;
      top: 0;
      left: 7.6%;
      }

      /* =Header
      ———————————————– */

      #branding {
      border-top: none;
      padding-bottom: 10px;
      position: relative;
      z-index: 9999;
      }
      #site-title {
      margin-right: 270px;
      padding: 3.65625em 0 0;
      }
      #site-title a {
      color: #111;
      font-size: 30px;
      font-weight: bold;
      line-height: 36px;
      text-decoration: none;
      }
      #site-title a:hover,
      #site-title a:focus,
      #site-title a:active {
      color: #1982d1;
      }
      #site-description {
      color: #7a7a7a;
      font-size: 14px;
      margin: 0 270px 3.65625em 0;
      }
      #branding img {
      height: auto;
      display: block;
      width: 100%;
      }

      /* =Menu
      ————————————————————– */

      #access {
      background: #006400; /* Show a solid color for older browsers */
      background: -moz-linear-gradient(#006400, #0a0a0a);
      background: -o-linear-gradient(#252525, #0a0a0a);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
      background: -webkit-linear-gradient(#006400, #0a0a0a);
      -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
      -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
      box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
      clear: both;
      display: block;
      float:left;
      text-align:center;
      margin: 0 auto 6px;
      width: 100%;
      }
      #access ul {
      font-size: 13px;
      list-style: none;
      margin: 0 0 0 -0.8125em;
      padding-left: 0;
      display:inline-block;
      }
      #access li {
      float: left;
      position: relative;
      }
      #access a {
      color: #eee;
      display: block;
      line-height: 3.333em;
      padding: 0 1.2125em;
      text-decoration: none;
      line-height: 3.3em;
      font-weight: bold;
      }
      #access ul ul {
      -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
      box-shadow: 0 3px 3px rgba(0,0,0,0.2);
      display: none;
      float: left;
      margin: 0;
      position: absolute;
      top: 3.333em;
      left: 0;
      width: 188px;
      z-index: 99999;
      font-weight: bold;
      }
      #access ul ul ul {
      left: 100%;
      top: 0;
      }
      #access ul ul a {
      background: #f9f9f9;
      border-bottom: 1px dotted #ddd;
      color: #444;
      font-size: 13px;
      font-weight: bold;
      height: auto;
      line-height: 1.4em;
      padding: 10px 10px;
      width: 168px;
      }
      #access li:hover > a,
      #access ul ul :hover > a,
      #access a:focus {
      background: #efefef;
      }
      #access li:hover > a,
      #access a:focus {
      background: #f9f9f9; /* Show a solid color for older browsers */
      background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
      background: -o-linear-gradient(#f9f9f9, #e5e5e5);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
      background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
      color: #373737;
      }
      #access ul li:hover > ul {
      display: block;
      }
      #access .current-menu-item > a,
      #access .current-menu-ancestor > a,
      #access .current_page_item > a,
      #access .current_page_ancestor > a {
      font-weight: bold;
      }

      /* Search Form */
      #branding #searchform {
      position: absolute;
      top: 3.8em;
      right: 7.6%;
      text-align: right;
      }
      #branding #searchform div {
      margin: 0;
      }
      #branding #s {
      float: right;
      -webkit-transition-duration: 400ms;
      -webkit-transition-property: width, background;
      -webkit-transition-timing-function: ease;
      -moz-transition-duration: 400ms;
      -moz-transition-property: width, background;
      -moz-transition-timing-function: ease;
      -o-transition-duration: 400ms;
      -o-transition-property: width, background;
      -o-transition-timing-function: ease;
      width: 72px;
      }
      #branding #s:focus {
      background-color: #f9f9f9;
      width: 196px;
      }
      #branding #searchsubmit {
      display: none;
      }
      #branding .only-search #searchform {
      top: 5px;
      z-index: 1;
      }
      #branding .only-search #s {
      background-color: #666;
      border-color: #000;
      color: #222;
      }
      #branding .only-search #s,
      #branding .only-search #s:focus {
      width: 85%;
      }
      #branding .only-search #s:focus {
      background-color: #bbb;
      }
      #branding .with-image #searchform {
      top: auto;
      bottom: -27px;
      max-width: 195px;
      }
      #branding .only-search + #access div {
      padding-right: 205px;
      }

      /* =Content
      ———————————————– */

      #main {
      clear: both;
      padding: 1.625em 0 0;
      }
      .page-title {
      color: #666;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      margin: 0 0 2.6em;
      text-transform: uppercase;
      }
      .page-title a {
      font-size: 12px;
      font-weight: bold;
      letter-spacing: 0;
      text-transform: none;
      }
      .hentry,
      .no-results {
      border-bottom: 1px solid #ddd;
      margin: 0 0 1.625em;
      padding: 0 0 1.625em;
      position: relative;
      }
      .hentry:last-child,
      .no-results {
      border-bottom: none;
      }
      .blog .sticky .entry-header .entry-meta {
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
      }
      .entry-title,
      .entry-header .entry-meta {
      padding-right: 76px;
      }
      .entry-title {
      clear: both;
      color: #222;
      font-size: 26px;
      font-weight: bold;
      line-height: 1.5em;
      padding-bottom: 0.6em;
      padding-top: 15px;
      }
      .entry-title,
      .entry-title a {
      color: #222;
      text-decoration: none;
      }
      .entry-title a:hover,
      .entry-title a:focus,
      .entry-title a:active {
      color: #1982d1;
      }
      .entry-meta {
      color: #666;
      clear: both;
      font-size: 12px;
      line-height: 18px;
      }
      .entry-meta a {
      font-weight: bold;
      }
      .single-author .entry-meta .by-author {
      display: none;
      }
      .entry-content,
      .entry-summary {
      padding: 1.625em 0 0;
      }
      .entry-content h1,
      .entry-content h2,
      .comment-content h1,
      .comment-content h2 {
      color: #000;
      font-weight: bold;
      margin: 0 0 .8125em;
      }
      .entry-content h3,
      .comment-content h3 {
      font-size: 10px;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      text-transform: uppercase;
      }
      .entry-content table,
      .comment-content table {
      border-bottom: 1px solid #ddd;
      margin: 0 0 1.625em;
      width: 100%;
      }
      .entry-content th,
      .comment-content th {
      color: #666;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      text-transform: uppercase;
      }
      .entry-content td,
      .comment-content td {
      border-top: 1px solid #ddd;
      padding: 6px 10px 6px 0;
      }
      .entry-content #s {
      width: 75%;
      }
      .comment-content ul,
      .comment-content ol {
      margin-bottom: 1.625em;
      }
      .comment-content ul ul,
      .comment-content ol ol,
      .comment-content ul ol,
      .comment-content ol ul {
      margin-bottom: 0;
      }
      dl.gallery-item {
      margin: 0;
      }
      .page-link {
      clear: both;
      display: block;
      margin: 0 0 1.625em;
      }
      .page-link a {
      background: #eee;
      color: #373737;
      margin: 0;
      padding: 2px 3px;
      text-decoration: none;
      }
      .page-link a:hover {
      background: #888;
      color: #fff;
      font-weight: bold;
      }
      .page-link span {
      margin-right: 6px;
      }
      .entry-meta .edit-link a,
      .commentlist .edit-link a {
      background: #eee;
      -moz-border-radius: 3px;
      border-radius: 3px;
      color: #666;
      float: right;
      font-size: 12px;
      line-height: 1.5em;
      font-weight: 300;
      text-decoration: none;
      padding: 0 8px;
      }
      .entry-meta .edit-link a:hover,
      .commentlist .edit-link a:hover {
      background: #888;
      color: #fff;
      }
      .entry-content .edit-link {
      clear: both;
      display: block;
      }

      /* Images */
      .entry-content img,
      .comment-content img,
      .widget img {
      max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
      }
      img[class*="align"],
      img[class*="wp-image-"],
      img[class*="attachment-"] {
      height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
      }
      img.size-full,
      img.size-large {
      max-width: 97.5%;
      width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
      height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
      }
      .entry-content img.wp-smiley {
      border: none;
      margin-bottom: 0;
      margin-top: 0;
      padding: 0;
      }
      img.alignleft,
      img.alignright,
      img.aligncenter {
      margin-bottom: 1.625em;
      }
      p img,
      .wp-caption {
      margin-top: 0.4em;
      }
      .wp-caption {
      background: #eee;
      margin-bottom: 1.625em;
      max-width: 96%;
      padding: 9px;
      }
      .wp-caption img {
      display: block;
      margin: 0 auto;
      max-width: 98%;
      }
      .wp-caption .wp-caption-text,
      .gallery-caption {
      color: #666;
      font-family: Georgia, serif;
      font-size: 12px;
      }
      .wp-caption .wp-caption-text {
      margin-bottom: 0.6em;
      padding: 10px 0 5px 40px;
      position: relative;
      }
      .wp-caption .wp-caption-text:before {
      color: #666;
      content: ‘\2014′;
      font-size: 14px;
      font-style: normal;
      font-weight: bold;
      margin-right: 5px;
      position: absolute;
      left: 10px;
      top: 7px;
      }
      #content .gallery {
      margin: 0 auto 1.625em;
      }
      #content .gallery a img {
      border: none;
      }
      img#wpstats {
      display: block;
      margin: 0 auto 1.625em;
      }
      #content .gallery-columns-4 .gallery-item {
      width: 23%;
      padding-right: 2%;
      }
      #content .gallery-columns-4 .gallery-item img {
      width: 100%;
      height: auto;
      }

      /* Image borders */
      img[class*="align"],
      img[class*="wp-image-"],
      #content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */

      padding: 6px;
      }
      .wp-caption img {
      border-color: #eee;
      }
      a:focus img[class*="align"],
      a:hover img[class*="align"],
      a:active img[class*="align"],
      a:focus img[class*="wp-image-"],
      a:hover img[class*="wp-image-"],
      a:active img[class*="wp-image-"],
      #content .gallery .gallery-icon a:focus img,
      #content .gallery .gallery-icon a:hover img,
      #content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images … */
      background: #eee;
      border-color: #bbb;
      }
      .wp-caption a:focus img,
      .wp-caption a:active img,
      .wp-caption a:hover img {/* … including captioned images! */
      background: #fff;
      border-color: #ddd;
      }

      /* Make sure videos and embeds fit their containers */
      embed,
      iframe,
      object {
      max-width: 100%;
      }
      .entry-content .twitter-tweet-rendered {
      max-width: 100% !important; /* Override the Twitter embed fixed width */
      }

      /* Password Protected Posts */
      .post-password-required .entry-header .comments-link {
      margin: 1.625em 0 0;
      }
      .post-password-required input[type=password] {
      margin: 0.8125em 0;
      }
      .post-password-required input[type=password]:focus {
      background: #f7f7f7;
      }

      /* Author Info */
      #author-info {
      font-size: 12px;
      overflow: hidden;
      }
      .singular #author-info {
      background: #f9f9f9;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      margin: 2.2em -35.6% 0 -35.4%;
      padding: 20px 35.4%;
      }
      .archive #author-info {
      border-bottom: 1px solid #ddd;
      margin: 0 0 2.2em;
      padding: 0 0 2.2em;
      }
      #author-avatar {
      float: left;
      margin-right: -78px;
      }
      #author-avatar img {
      background: #fff;
      -moz-border-radius: 3px;
      border-radius: 3px;
      -webkit-box-shadow: 0 1px 2px #bbb;
      -moz-box-shadow: 0 1px 2px #bbb;
      box-shadow: 0 1px 2px #bbb;
      padding: 3px;
      }
      #author-description {
      float: left;
      margin-left: 108px;
      }
      #author-description h2 {
      color: #000;
      font-size: 15px;
      font-weight: bold;
      margin: 5px 0 10px;
      }

      /* Comments link */
      .entry-header .comments-link a {
      background: #eee url(images/comment-bubble.png) no-repeat;
      color: #666;
      font-size: 13px;
      font-weight: normal;
      line-height: 35px;
      overflow: hidden;
      padding: 0 0 0;
      position: absolute;
      top: 1.5em;
      right: 0;
      text-align: center;
      text-decoration: none;
      width: 43px;
      height: 36px;
      }
      .entry-header .comments-link a:hover,
      .entry-header .comments-link a:focus,
      .entry-header .comments-link a:active {
      background-color: #1982d1;
      color: #fff;
      color: rgba(255,255,255,0.8);
      }
      .entry-header .comments-link .leave-reply {
      visibility: hidden;
      }

      /*
      Post Formats Headings
      To hide the headings, display: none the “.entry-header .entry-format” selector,
      and remove the padding rules below.
      */
      .entry-header .entry-format {
      color: #666;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      position: absolute;
      text-transform: uppercase;
      top: -5px;
      }
      .entry-header hgroup .entry-title {
      padding-top: 15px;
      }
      article.format-aside .entry-content,
      article.format-link .entry-content,
      article.format-status .entry-content {
      padding: 20px 0 0;
      }
      article.format-status .entry-content {
      min-height: 65px;
      }
      .recent-posts .entry-header .entry-format {
      display: none;
      }
      .recent-posts .entry-header hgroup .entry-title {
      padding-top: 0;
      }

      /* Singular content styles for Posts and Pages */
      .singular .hentry {
      border-bottom: none;
      padding: 4.875em 0 0;
      position: relative;
      }
      .singular.page .hentry {
      padding: 3.5em 0 0;
      }
      .singular .entry-title {
      color: #000;
      font-size: 36px;
      font-weight: bold;
      line-height: 48px;
      }
      .singular .entry-title,
      .singular .entry-header .entry-meta {
      padding-right: 0;
      }
      .singular .entry-header .entry-meta {
      position: absolute;
      top: 0;
      left: 0;
      }
      blockquote.pull {
      font-size: 21px;
      font-weight: bold;
      line-height: 1.6125em;
      margin: 0 0 1.625em;
      text-align: center;
      }
      .singular blockquote.pull {
      margin: 0 -22.25% 1.625em;
      }
      .pull.alignleft {
      margin: 0 1.625em 0 0;
      text-align: right;
      }
      .singular .pull.alignleft {
      margin: 0 1.625em 0 -22.25%;
      }
      .pull.alignright {
      margin: 0 0 0 1.625em;
      text-align: left;
      }
      blockquote.pull.alignleft,
      blockquote.pull.alignright {
      width: 33%;
      }
      .singular .pull.alignright {
      margin: 0 -22.25% 0 1.625em;
      }
      .singular blockquote.pull.alignleft,
      .singular blockquote.pull.alignright {
      width: 33%;
      }
      .singular .entry-meta .edit-link a {
      bottom: auto;
      left: 50px;
      position: absolute;
      right: auto;
      top: 80px;
      }

      /* =Aside
      ———————————————– */

      .format-aside .entry-title,
      .format-aside .entry-header .comments-link {
      display: none;
      }
      .singular .format-aside .entry-title {
      display: block;
      }
      .format-aside .entry-content {
      padding: 0;
      }
      .singular .format-aside .entry-content {
      padding: 1.625em 0 0;
      }

      /* =Link
      ———————————————– */

      .format-link .entry-title,
      .format-link .entry-header .comments-link {
      display: none;
      }
      .singular .format-link .entry-title {
      display: block;
      }
      .format-link .entry-content {
      padding: 0;
      }
      .singular .format-link .entry-content {
      padding: 1.625em 0 0;
      }

      /* =Gallery
      ———————————————– */

      .format-gallery .gallery-thumb {
      float: left;
      display: block;
      margin: .375em 1.625em 0 0;
      max-width: 100%;
      }

      /* =Status
      ———————————————– */

      .format-status .entry-title,
      .format-status .entry-header .comments-link {
      display: none;
      }
      .singular .format-status .entry-title {
      display: block;
      }
      .format-status .entry-content {
      padding: 0;
      }
      .singular .format-status .entry-content {
      padding: 1.625em 0 0;
      }
      .format-status img.avatar {
      -moz-border-radius: 3px;
      border-radius: 3px;
      -webkit-box-shadow: 0 1px 2px #ccc;
      -moz-box-shadow: 0 1px 2px #ccc;
      box-shadow: 0 1px 2px #ccc;
      float: left;
      margin: 4px 10px 2px 0;
      padding: 0;
      }

      /* =Quote
      ———————————————– */

      .format-quote blockquote {
      color: #555;
      font-size: 17px;
      margin: 0;
      }

      /* =Image
      ———————————————– */

      .indexed.format-image .entry-header {
      min-height: 61px; /* Prevent the comment icon from colliding with the image when there is no title */
      }
      .indexed.format-image .entry-content {
      padding-top: 0.5em;
      }
      .indexed.format-image .entry-content p {
      margin: 1em 0;
      }
      .indexed.format-image .entry-content p:first-child,
      .indexed.format-image .entry-content p:first-child a,
      .indexed.format-image .entry-content p:first-child img {
      display: block;
      margin: 0;
      }
      .indexed.format-image .entry-content .wp-caption .wp-caption-text {
      margin: 0;
      padding-bottom: 1em;
      }
      .indexed.format-image footer.entry-meta {
      background: #ddd;
      overflow: hidden;
      padding: 4%;
      max-width: 96%;
      }
      .indexed.format-image div.entry-meta {
      display: inline-block;
      float: left;
      width: 35%;
      }
      .indexed.format-image div.entry-meta + div.entry-meta {
      float: none;
      width: 65%;
      }
      .indexed.format-image .entry-meta span.cat-links,
      .indexed.format-image .entry-meta span.tag-links,
      .indexed.format-image .entry-meta span.comments-link {
      display: block;
      }
      .indexed.format-image footer.entry-meta a {
      color: #444;
      }
      .indexed.format-image footer.entry-meta a:hover {
      color: #fff;
      }
      #content .indexed.format-image img {
      border: none;
      max-width: 100%;
      padding: 0;
      }
      .indexed.format-image .wp-caption {
      background: #111;
      margin-bottom: 0;
      max-width: 96%;
      padding: 2% 2% 0;
      }
      .indexed.format-image .wp-caption .wp-caption-text {
      color: #ddd;
      }
      .indexed.format-image .wp-caption .wp-caption-text:before {
      color: #444;
      }
      .indexed.format-image a:hover img {
      opacity: 0.8;
      }

      /* =error404
      ———————————————– */

      .error404 #main #searchform {
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-width: 1px 0;
      margin: 0 -8.9% 1.625em;
      overflow: hidden;
      padding: 1.625em 8.9%;
      }
      .error404 #main #s {
      width: 95%;
      }
      .error404 #main .widget {
      clear: none;
      float: left;
      margin-right: 3.7%;
      width: 30.85%;
      }
      .error404 #main .widget_archive {
      margin-right: 0;
      }
      .error404 #main .widget_tag_cloud {
      float: none;
      margin-right: 0;
      width: 100%;
      }
      .error404 .widgettitle {
      font-size: 10px;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      text-transform: uppercase;
      }

      /* =Showcase
      ———————————————– */

      h1.showcase-heading {
      color: #666;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      text-transform: uppercase;
      }

      /* Intro */
      article.intro {
      background: #f9f9f9;
      border-bottom: none;
      margin: -1.855em -8.9% 1.625em;
      padding: 0 8.9%;
      }
      article.intro .entry-title {
      display: none;
      }
      article.intro .entry-content {
      color: #111;
      font-size: 16px;
      padding: 1.625em 0 0.625em;
      }
      article.intro .edit-link a {
      background: #aaa;
      -moz-border-radius: 3px;
      border-radius: 3px;
      color: #fff;
      font-size: 12px;
      padding: 0 8px;
      position: absolute;
      top: 30px;
      right: 20px;
      text-decoration: none;
      }
      article.intro .edit-link a:hover,
      article.intro .edit-link a:focus,
      article.intro .edit-link a:active {
      background: #777;
      }

      /* Featured post */
      section.featured-post {
      float: left;
      margin: -1.625em -8.9% 1.625em;
      padding: 1.625em 8.9% 0;
      position: relative;
      width: 100%;
      }
      section.featured-post .hentry {
      border: none;
      color: #666;
      margin: 0;
      }
      section.featured-post .entry-meta {
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);
      position: absolute !important;
      }

      /* Small featured post */
      section.featured-post .attachment-small-feature {
      float: right;
      height: auto;
      margin: 0 -8.9% 1.625em 0;
      max-width: 59%;
      position: relative;
      right: -15px;
      }
      section.featured-post.small {
      padding-top: 0;
      }
      section.featured-post .attachment-small-feature:hover,
      section.featured-post .attachment-small-feature:focus,
      section.featured-post .attachment-small-feature:active {
      opacity: .8;
      }
      article.feature-image.small {
      float: left;
      margin: 0 0 1.625em;
      width: 45%;
      }
      article.feature-image.small .entry-title {
      line-height: 1.2em;
      }
      article.feature-image.small .entry-summary {
      color: #555;
      font-size: 13px;
      }
      article.feature-image.small .entry-summary p a {
      background: #222;
      color: #eee;
      display: block;
      left: -23.8%;
      padding: 9px 26px 9px 85px;
      position: relative;
      text-decoration: none;
      top: 20px;
      width: 180px;
      z-index: 1;
      }
      article.feature-image.small .entry-summary p a:hover {
      background: #1982d1;
      color: #eee;
      color: rgba(255,255,255,0.8);
      }

      /* Large featured post */
      section.feature-image.large {
      border: none;
      max-height: 288px;
      padding: 0;
      width: 100%;
      }
      section.feature-image.large .showcase-heading {
      display: none;
      }
      section.feature-image.large .hentry {
      border-bottom: none;
      left: 9%;
      margin: 1.625em 9% 0 0;
      position: absolute;
      top: 0;
      }
      article.feature-image.large .entry-title a {
      background: #222;
      background: rgba(0,0,0,0.8);
      -moz-border-radius: 3px;
      border-radius: 3px;
      color: #fff;
      display: inline-block;
      font-weight: 300;
      padding: .2em 20px;
      }
      section.feature-image.large:hover .entry-title a,
      section.feature-image.large .entry-title:hover a {
      background: #eee;
      background: rgba(255,255,255,0.8);
      color: #222;
      }
      article.feature-image.large .entry-summary {
      display: none;
      }
      section.feature-image.large img {
      display: block;
      height: auto;
      max-width: 117.9%;
      padding: 0 0 6px;
      }

      /* Featured Slider */
      .featured-posts {
      border-bottom: 1px solid #ddd;
      display: block;
      height: 328px;
      margin: 1.625em -8.9% 20px;
      max-width: 1000px;
      padding: 0;
      position: relative;
      overflow: hidden;
      }
      .featured-posts .showcase-heading {
      padding-left: 8.9%;
      }
      .featured-posts section.featured-post {
      background: #fff;
      height: 288px;
      left: 0;
      margin: 0;
      position: absolute;
      top: 30px;
      width: auto;
      }
      .featured-posts section.featured-post.large {
      max-width: 100%;
      overflow: hidden;
      }
      .featured-posts section.featured-post {
      -webkit-transition-duration: 200ms;
      -webkit-transition-property: opacity, visibility;
      -webkit-transition-timing-function: ease;
      -moz-transition-duration: 200ms;
      -moz-transition-property: opacity, visibility;
      -moz-transition-timing-function: ease;
      }
      .featured-posts section.featured-post {
      opacity: 0;
      visibility: hidden;
      }
      .featured-posts #featured-post-1 {
      opacity: 1;
      visibility: visible;
      }
      .featured-post .feature-text:after,
      .featured-post .feature-image.small:after {
      content: ‘ ‘;
      background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00ffffff’, endColorstr=’#ffffff’,GradientType=0 ); /* IE6-9 */
      background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
      width: 100%;
      height: 45px;
      position: absolute;
      top: 230px;
      }
      .featured-post .feature-image.small:after {
      top: 253px;
      }
      #content .feature-slider {
      top: 5px;
      right: 8.9%;
      overflow: visible;
      position: absolute;
      }
      .feature-slider ul {
      list-style-type: none;
      margin: 0;
      }
      .feature-slider li {
      float: left;
      margin: 0 6px;
      }
      .feature-slider a {
      background: #3c3c3c;
      background: rgba(60,60,60,0.9);
      -moz-border-radius: 12px;
      border-radius: 12px;
      -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
      -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
      box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
      display: block;
      width: 14px;
      height: 14px;
      }
      .feature-slider a.active {
      background: #1982d1;
      -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
      -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
      box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
      cursor: default;
      opacity: 0.5;
      }

      /* Recent Posts */
      section.recent-posts {
      padding: 0 0 1.625em;
      }
      section.recent-posts .hentry {
      border: none;
      margin: 0;
      }
      section.recent-posts .other-recent-posts {
      border-bottom: 1px solid #ddd;
      list-style: none;
      margin: 0;
      }
      section.recent-posts .other-recent-posts li {
      padding: 0.3125em 0;
      position: relative;
      }
      section.recent-posts .other-recent-posts .entry-title {
      border-top: 1px solid #ddd;
      font-size: 17px;
      }
      section.recent-posts .other-recent-posts a[rel="bookmark"] {
      color: #373737;
      float: left;
      max-width: 84%;
      }
      section.recent-posts .other-recent-posts a[rel="bookmark"]:after {
      content: ‘-’;
      color: transparent;
      font-size: 11px;
      }
      section.recent-posts .other-recent-posts a[rel="bookmark"]:hover {
      }
      section.recent-posts .other-recent-posts .comments-link a,
      section.recent-posts .other-recent-posts .comments-link > span {
      border-bottom: 2px solid #999;
      bottom: -2px;
      color: #444;
      display: block;
      font-size: 10px;
      font-weight: 500;
      line-height: 2.76333em;
      padding: 0.3125em 0 0.3125em 1em;
      position: absolute;
      right: 0;
      text-align: right;
      text-transform: uppercase;
      z-index: 1;
      }
      section.recent-posts .other-recent-posts .comments-link > span {
      border-color: #bbb;
      color: #888;
      }
      section.recent-posts .other-recent-posts .comments-link a:hover {
      color: #1982d1;
      border-color: #1982d1;
      }
      section.recent-posts .other-recent-posts li:after {
      clear: both;
      content: ‘.’;
      display: block;
      height: 0;
      visibility: hidden;
      }

      /* =Attachments
      ———————————————– */

      .image-attachment div.attachment {
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-width: 1px 0;
      margin: 0 -8.9% 1.625em;
      overflow: hidden;
      padding: 1.625em 1.625em 0;
      text-align: center;
      }
      .image-attachment div.attachment img {
      display: block;
      height: auto;
      margin: 0 auto 1.625em;
      max-width: 100%;
      }
      .image-attachment div.attachment a img {
      border-color: #f9f9f9;
      }
      .image-attachment div.attachment a:focus img,
      .image-attachment div.attachment a:hover img,
      .image-attachment div.attachment a:active img {
      border-color: #ddd;
      background: #fff;
      }
      .image-attachment .entry-caption p {
      font-size: 10px;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      margin: 0 0 2.6em;
      text-transform: uppercase;
      }

      /* =Navigation
      ————————————————————– */

      #content nav {
      clear: both;
      overflow: hidden;
      padding: 0 0 1.625em;
      }
      #content nav a {
      font-size: 12px;
      font-weight: bold;
      line-height: 2.2em;
      }
      #nav-above {
      padding: 0 0 1.625em;
      }
      #nav-above {
      display: none;
      }
      .paged #nav-above {
      display: block;
      }
      .nav-previous {
      float: left;
      width: 50%;
      }
      .nav-next {
      float: right;
      text-align: right;
      width: 50%;
      }
      #content nav .meta-nav {
      font-weight: normal;
      }

      /* Singular navigation */
      #nav-single {
      float: right;
      position: relative;
      top: -0.3em;
      text-align: right;
      z-index: 1;
      }
      #nav-single .nav-previous,
      #nav-single .nav-next {
      width: auto;
      }
      #nav-single .nav-next {
      padding-left: .5em;
      }
      #nav-single .nav-previous {
      padding-right: .5em;
      }

      /* =Widgets
      ———————————————– */

      .widget-area {
      font-size: 12px;
      }
      .widget {
      word-wrap: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
      clear: both;
      margin: 0 0 2.2em;
      }
      .widget-title {
      color: #666;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      line-height: 2.6em;
      text-transform: uppercase;
      }
      .widget ul {
      font-size: 15px;
      margin: 0;
      }
      .widget ul ul {
      margin-left: 1.5em;
      }
      .widget ul li {
      color: #777;
      font-size: 13px;
      }
      .widget a {
      font-weight: bold;
      text-decoration: none;
      }
      .widget a:hover,
      .widget a:focus,
      .widget a:active {
      text-decoration: underline;
      }

      /* Search Widget */
      .widget_search form {
      margin: 0 0 1.625em;
      }
      .widget_search #s {
      width: 77%;
      }
      .widget_search #searchsubmit {
      background: #ddd;
      border: 1px solid #ccc;
      -webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
      -moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
      box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
      color: #888;
      font-size: 13px;
      line-height: 25px;
      position: relative;
      top: -2px;
      }
      .widget_search #searchsubmit:active {
      background: #1982d1;
      border-color: #0861a5;
      -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
      color: #bfddf3;
      }

      /* Ephemera Widget */
      section.ephemera ol,
      .widget_twentyeleven_ephemera ol {
      list-style: square;
      margin: 5px 0 0;
      }
      .widget_twentyeleven_ephemera .widget-entry-title {
      font-size: 15px;
      font-weight: bold;
      padding: 0;
      }
      .widget_twentyeleven_ephemera .comments-link a,
      .widget_twentyeleven_ephemera .comments-link > span {
      color: #666;
      display: block;
      font-size: 10px;
      font-weight: 500;
      line-height: 2.76333em;
      text-transform: uppercase;
      }
      section.ephemera .entry-title .comments-link a:hover,
      .widget_twentyeleven_ephemera .entry-title .comments-link a:hover {
      }
      section.ephemera .entry-title a span {
      color: #29628d;
      }

      /* Twitter */
      .widget_twitter li {
      list-style-type: none;
      margin-bottom: 14px;
      }
      .widget_twitter .timesince {
      display: block;
      font-size: 11px;
      margin-right: -10px;
      text-align: right;
      }

      /* Widget Image */
      .widget_image img {
      border: 0;
      padding: 0;
      height: auto;
      max-width: 100%;
      }

      /* Calendar Widget */

      .widget_calendar #wp-calendar {
      color: #555;
      width: 95%;
      text-align: center;
      }
      .widget_calendar #wp-calendar caption,
      .widget_calendar #wp-calendar td,
      .widget_calendar #wp-calendar th {
      text-align: center;
      }
      .widget_calendar #wp-calendar caption {
      font-size: 11px;
      font-weight: 500;
      padding: 5px 0 3px 0;
      text-transform: uppercase;
      }
      .widget_calendar #wp-calendar th {
      background: #f4f4f4;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      font-weight: bold;
      }
      .widget_calendar #wp-calendar tfoot td {
      background: #f4f4f4;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      }

      /* =Comments
      ———————————————– */

      #comments-title {
      color: #666;
      font-size: 10px;
      font-weight: 500;
      line-height: 2.6em;
      padding: 0 0 2.6em;
      text-transform: uppercase;
      }
      .nopassword,
      .nocomments {
      color: #aaa;
      font-size: 24px;
      font-weight: 100;
      margin: 26px 0;
      text-align: center;
      }
      .commentlist {
      list-style: none;
      margin: 0 auto;
      width: 68.9%;
      }
      .content .commentlist,
      .page-template-sidebar-page-php .commentlist {
      width: 100%; /* reset the width for the one-column and sidebar page layout */
      }
      .commentlist > li.comment {
      background: #f6f6f6;
      border: 1px solid #ddd;
      -moz-border-radius: 3px;
      border-radius: 3px;
      margin: 0 0 1.625em;
      padding: 1.625em;
      position: relative;
      }
      .commentlist .pingback {
      margin: 0 0 1.625em;
      padding: 0 1.625em;
      }
      .commentlist .children {
      list-style: none;
      margin: 0;
      }
      .commentlist .children li.comment {
      background: #fff;
      border-left: 1px solid #ddd;
      -moz-border-radius: 0 3px 3px 0;
      border-radius: 0 3px 3px 0;
      margin: 1.625em 0 0;
      padding: 1.625em;
      position: relative;
      }
      .commentlist .children li.comment .fn {
      display: block;
      }
      .comment-meta .fn {
      font-style: normal;
      }
      .comment-meta {
      color: #666;
      font-size: 12px;
      line-height: 2.2em;
      }
      .commentlist .children li.comment .comment-meta {
      line-height: 1.625em;
      margin-left: 50px;
      }
      .commentlist .children li.comment .comment-content {
      margin: 1.625em 0 0;
      word-wrap: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
      }
      .comment-meta a {
      font-weight: bold;
      }
      .comment-meta a:focus,
      .comment-meta a:active,
      .comment-meta a:hover {
      }
      .commentlist .avatar {
      -moz-border-radius: 3px;
      border-radius: 3px;
      -webkit-box-shadow: 0 1px 2px #ccc;
      -moz-box-shadow: 0 1px 2px #ccc;
      box-shadow: 0 1px 2px #ccc;
      left: -102px;
      padding: 0;
      position: absolute;
      top: 0;
      }
      .commentlist > li:before {
      content: url(images/comment-arrow.png);
      left: -21px;
      position: absolute;
      }
      .commentlist > li.pingback:before {
      content: ”;
      }
      .commentlist .children .avatar {
      background: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      left: 2.2em;
      padding: 0;
      top: 2.2em;
      }
      a.comment-reply-link {
      background: #eee;
      -moz-border-radius: 3px;
      border-radius: 3px;
      color: #666;
      display: inline-block;
      font-size: 12px;
      padding: 0 8px;
      text-decoration: none;
      }
      a.comment-reply-link:hover,
      a.comment-reply-link:focus,
      a.comment-reply-link:active {
      background: #888;
      color: #fff;
      }
      a.comment-reply-link > span {
      display: inline-block;
      position: relative;
      top: -1px;
      }

      /* Post author highlighting */
      .commentlist > li.bypostauthor {
      background: #ddd;
      border-color: #d3d3d3;
      }
      .commentlist > li.bypostauthor .comment-meta {
      color: #575757;
      }
      .commentlist > li.bypostauthor .comment-meta a:focus,
      .commentlist > li.bypostauthor .comment-meta a:active,
      .commentlist > li.bypostauthor .comment-meta a:hover {
      }
      .commentlist > li.bypostauthor:before {
      content: url(images/comment-arrow-bypostauthor.png);
      }

      /* Post Author threaded comments */
      .commentlist .children > li.bypostauthor {
      background: #ddd;
      border-color: #d3d3d3;
      }

      /* sidebar-page.php comments */
      /* Make sure we have room for our comment avatars */
      .page-template-sidebar-page-php .commentlist > li.comment,
      .page-template-sidebar-page-php.commentlist .pingback {
      margin-left: 102px;
      width: auto;
      }
      /* And a full-width comment form */
      .page-template-sidebar-page-php #respond {
      width: auto;
      }

      /* Comment Form */
      #respond {
      background: #ddd;
      border: 1px solid #d3d3d3;
      -moz-border-radius: 3px;
      border-radius: 3px;
      margin: 0 auto 1.625em;
      padding: 1.625em;
      position: relative;
      width: 68.9%;
      }
      #respond input[type="text"],
      #respond textarea {
      background: #fff;
      border: 4px solid #eee;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
      -moz-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
      box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
      position: relative;
      padding: 10px;
      text-indent: 80px;
      }
      #respond .comment-form-author,
      #respond .comment-form-email,
      #respond .comment-form-url,
      #respond .comment-form-comment {
      position: relative;
      }
      #respond .comment-form-author label,
      #respond .comment-form-email label,
      #respond .comment-form-url label,
      #respond .comment-form-comment label {
      background: #eee;
      -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
      -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
      box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
      color: #555;
      display: inline-block;
      font-size: 13px;
      left: 4px;
      min-width: 60px;
      padding: 4px 10px;
      position: relative;
      top: 40px;
      z-index: 1;
      }
      #respond input[type="text"]:focus,
      #respond textarea:focus {
      text-indent: 0;
      z-index: 1;
      }
      #respond textarea {
      resize: vertical;
      width: 95%;
      }
      #respond .comment-form-author .required,
      #respond .comment-form-email .required {
      color: #bd3500;
      font-size: 22px;
      font-weight: bold;
      left: 75%;
      position: absolute;
      z-index: 1;
      }
      #respond .comment-notes,
      #respond .logged-in-as {
      font-size: 13px;
      }
      #respond p {
      margin: 10px 0;
      }
      #respond .form-submit {
      float: right;
      margin: -20px 0 10px;
      }
      #respond input#submit {
      background: #222;
      border: none;
      -moz-border-radius: 3px;
      border-radius: 3px;
      -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
      -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
      box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
      color: #eee;
      cursor: pointer;
      font-size: 15px;
      margin: 20px 0;
      padding: 5px 42px 5px 22px;
      position: relative;
      left: 30px;
      text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
      }
      #respond input#submit:active {
      background: #1982d1;
      color: #bfddf3;
      }
      #respond #cancel-comment-reply-link {
      color: #666;
      margin-left: 10px;
      text-decoration: none;
      }
      #respond .logged-in-as a:hover,
      #respond #cancel-comment-reply-link:hover {
      text-decoration: underline;
      }
      .commentlist #respond {
      margin: 1.625em 0 0;
      width: auto;
      }
      #reply-title {
      color: #373737;
      font-size: 24px;
      font-weight: bold;
      line-height: 30px;
      }
      #cancel-comment-reply-link {
      color: #888;
      display: block;
      font-size: 10px;
      font-weight: normal;
      line-height: 2.2em;
      letter-spacing: 0.05em;
      position: absolute;
      right: 1.625em;
      text-decoration: none;
      text-transform: uppercase;
      top: 1.1em;
      }
      #cancel-comment-reply-link:focus,
      #cancel-comment-reply-link:active,
      #cancel-comment-reply-link:hover {
      color: #ff4b33;
      }
      #respond label {
      line-height: 2.2em;
      }
      #respond input[type=text] {
      display: block;
      height: 24px;
      width: 75%;
      }
      #respond p {
      font-size: 12px;
      }
      p.comment-form-comment {
      margin: 0;
      }
      .form-allowed-tags {
      display: none;
      }

      /* =Footer
      ———————————————– */

      #colophon {
      clear: both;
      }
      #supplementary {
      border-top: 1px solid #ddd;
      padding: 1.625em 7.6%;
      overflow: hidden;
      }

      /* Two Footer Widget Areas */
      #supplementary.two .widget-area {
      float: left;
      margin-right: 3.7%;
      width: 48.1%;
      }
      #supplementary.two .widget-area + .widget-area {
      margin-right: 0;
      }

      /* Three Footer Widget Areas */
      #supplementary.three .widget-area {
      float: left;
      margin-right: 3.7%;
      width: 30.85%;
      }
      #supplementary.three .widget-area + .widget-area + .widget-area {
      margin-right: 0;
      }

      /* Site Generator Line */
      #site-generator {
      background: #f9f9f9;
      border-top: none;
      color: #666;
      font-size: 12px;
      line-height: 2.2em;
      padding: 2.2em 0.5em;
      text-align: center;
      }
      #site-generator a {
      color: #006400;
      font-weight: bold;
      }

      /* =Responsive Structure
      ———————————————– */

      @media (max-width: 800px) {
      /* Simplify the basic layout */
      #main #content {
      margin: 0 7.6%;
      width: auto;
      }
      #nav-below {
      border-bottom: 1px solid #ddd;
      margin-bottom: 1.625em;
      }
      #main #secondary {
      float: none;
      margin: 0 7.6%;
      width: auto;
      }
      /* Simplify the showcase template */
      .page-template-showcase-php .featured-posts {
      min-height: 280px;
      }
      .featured-posts section.featured-post {
      height: auto;
      }
      .page-template-showcase-php section.recent-posts {
      float: none;
      margin: 0;
      width: 100%;
      }
      .page-template-showcase-php #main .widget-area {
      float: none;
      margin: 0;
      width: auto;
      }
      .page-template-showcase-php .other-recent-posts {
      border-bottom: 1px solid #ddd;
      }
      /* Simplify the showcase template when small feature */
      section.featured-post .attachment-small-feature,
      .one-column section.featured-post .attachment-small-feature {
      border: none;
      display: block;
      float: left;
      height: auto;
      margin: 0.625em auto 1.025em;
      max-width: 30%;
      position: static;
      }
      article.feature-image.small {
      float: right;
      margin: 0 0 1.625em;
      width: 64%;
      }
      .one-column article.feature-image.small .entry-summary {
      height: auto;
      }
      article.feature-image.small .entry-summary p a {
      left: 0;
      padding-left: 20px;
      padding-right: 20px;
      width: auto;
      }
      /* Remove the margin on singular articles */
      .singular .entry-header,
      .singular .entry-content,
      .singular footer.entry-meta,
      .singular #comments-title {
      width: 100%;
      }
      /* Simplify the pullquotes and pull styles */
      .singular blockquote.pull {
      margin: 0 0 1.625em;
      }
      .singular .pull.alignleft {
      margin: 0 1.625em 0 0;
      }
      .singular .pull.alignright {
      margin: 0 0 0 1.625em;
      }
      .singular .entry-meta .edit-link a {
      left: 0;
      position: absolute;
      top: 40px;
      }
      .singular #author-info {
      margin: 2.2em -8.8% 0;
      padding: 20px 8.8%;
      }
      /* Make sure we have room for our comment avatars */
      .commentlist {
      width: 100%;
      }
      .commentlist > li.comment,
      .commentlist .pingback {
      margin-left: 102px;
      width: auto;
      }
      /* And a full-width comment form */
      #respond {
      width: auto;
      }
      /* No need to float footer widgets at this size */
      #colophon #supplementary .widget-area {
      float: none;
      margin-right: 0;
      width: auto;
      }
      /* No need to float 404 widgets at this size */
      .error404 #main .widget {
      float: none;
      margin-right: 0;
      width: auto;
      }

      }
      @media (max-width: 650px) {
      /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
      body, input, textarea {
      font-size: 13px;
      }
      #site-title a {
      font-size: 24px;
      }
      #site-description {
      font-size: 12px;
      }
      #access ul {
      font-size: 12px;
      }
      article.intro .entry-content {
      font-size: 12px;
      }
      .entry-title {
      font-size: 21px;
      }
      .featured-post .entry-title {
      font-size: 14px;
      }
      .singular .entry-title {
      font-size: 28px;
      }
      .entry-meta {
      font-size: 12px;
      }
      blockquote {
      margin: 0;
      }
      blockquote.pull {
      font-size: 17px;
      }
      /* Reposition the site title and description slightly */
      #site-title {
      padding: 5.30625em 0 0;
      }
      #site-title,
      #site-description {
      margin-right: 0;
      }
      /* Make sure the logo and search form don’t collide */
      #branding #searchform {
      top: 1.625em !important;
      }
      /* Floated content doesn’t work well at this size */
      .alignleft,
      .alignright {
      display: block;
      float: none;
      margin-left: 0;
      margin-right: 0;
      }
      /* Make sure the post-post navigation doesn’t collide with anything */
      #nav-single {
      display: block;
      position: static;
      }
      .singular .hentry {
      padding: 1.625em 0 0;
      }
      .singular.page .hentry {
      padding: 1.625em 0 0;
      }
      /* Talking avatars take up too much room at this size */
      .commentlist > li.comment,
      .commentlist > li.pingback {
      margin-left: 0 !important;
      }
      .commentlist .avatar {
      background: transparent;
      display: block;
      padding: 0;
      position: static;
      }
      .commentlist .children .avatar {
      background: none;
      left: 2.2em;
      padding: 0;
      position: absolute;
      top: 2.2em;
      }
      /* Use the available space in the smaller comment form */
      #respond input[type="text"] {
      width: 95%;
      }
      #respond .comment-form-author .required,
      #respond .comment-form-email .required {
      left: 95%;
      }
      #content .gallery-columns-3 .gallery-item {
      width: 31%;
      padding-right: 2%;
      }
      #content .gallery-columns-3 .gallery-item img {
      width: 100%;
      height: auto;
      }

      }
      @media (max-width: 450px) {
      #content .gallery-columns-2 .gallery-item {
      width: 45%;
      padding-right: 4%;
      }
      #content .gallery-columns-2 .gallery-item img {
      width: 100%;
      height: auto;
      }

      }
      @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
      body {
      padding: 0;
      }
      #page {
      margin-top: 0;
      }
      #branding {
      border-top: none;
      }

      }

      /* =Print
      ———————————————– */

      @media print {
      body {
      background: none !important;
      font-size: 10pt;
      }
      footer.entry-meta a[rel=bookmark]:link:after,
      footer.entry-meta a[rel=bookmark]:visited:after {
      content: ” [" attr(href) "] “; /* Show URLs */
      }
      #page {
      clear: both !important;
      display: block !important;
      float: none !important;
      max-width: 100%;
      position: relative !important;
      }
      #branding {
      border-top: none !important;
      padding: 0;
      }
      #branding hgroup {
      margin: 0;
      }
      #site-title a {
      font-size: 21pt;
      }
      #site-description {
      font-size: 10pt;
      }
      #branding #searchform {
      display: none;
      }
      #branding img {
      display: none;
      }
      #access {
      display: none;
      }
      #main {
      border-top: none;
      box-shadow: none;
      }
      #primary {
      float: left;
      margin: 0;
      width: 100%;
      }
      #content {
      margin: 0;
      width: auto;
      }
      .singular #content {
      margin: 0;
      width: 100%;
      }
      .singular .entry-header .entry-meta {
      position: static;
      }
      .entry-meta .edit-link a {
      display: none;
      }
      #content nav {
      display: none;
      }
      .singular .entry-header,
      .singular .entry-content,
      .singular footer.entry-meta,
      .singular #comments-title {
      margin: 0;
      width: 100%;
      }
      .singular .hentry {
      padding: 0;
      }
      .entry-title,
      .singular .entry-title {
      font-size: 21pt;
      }
      .entry-meta {
      font-size: 10pt;
      }
      .entry-header .comments-link {
      display: none;
      }
      .page-link {
      display: none;
      }
      .singular #author-info {
      background: none;
      border-bottom: none;
      border-top: none;
      margin: 2.2em 0 0;
      padding: 0;
      }
      #respond {
      display: none;
      }
      .widget-area {
      display: none;
      }
      #colophon {
      display: none;
      }

      /* Comments */
      .commentlist > li.comment {
      background: none;
      border: 1px solid #ddd;
      -moz-border-radius: 3px 3px 3px 3px;
      border-radius: 3px 3px 3px 3px;
      margin: 0 auto 1.625em;
      padding: 1.625em;
      position: relative;
      width: auto;
      }
      .commentlist .avatar {
      height: 39px;
      left: 2.2em;
      top: 2.2em;
      width: 39px;
      }
      .commentlist li.comment .comment-meta {
      line-height: 1.625em;
      margin-left: 50px;
      }
      .commentlist li.comment .fn {
      display: block;
      }
      .commentlist li.comment .comment-content {
      margin: 1.625em 0 0;
      }
      .commentlist .comment-edit-link {
      display: none;
      }
      .commentlist > li::before,
      .commentlist > li.bypostauthor::before {
      content: ”;
      }
      .commentlist .reply {
      display: none;
      }

      /* Post author highlighting */
      .commentlist > li.bypostauthor {
      color: #444;
      }
      .commentlist > li.bypostauthor .comment-meta {
      color: #666;
      }
      .commentlist > li.bypostauthor:before {
      content: none;
      }

      /* Post Author threaded comments */
      .commentlist .children > li.bypostauthor {
      background: #fff;
      border-color: #ddd;
      }
      .commentlist .children > li.bypostauthor > article,
      .commentlist .children > li.bypostauthor > article .comment-meta {
      color: #666;
      }

      }

      /* =IE7
      ———————————————– */

      #ie7 article.intro {
      margin-left: -7.6%;
      margin-right: -7.6%;
      padding-left: -7.6%;
      padding-right: -7.6%;
      max-width: 1000px;
      }
      #ie7 section.featured-post {
      margin-left: -7.6%;
      margin-right: -7.6%;
      max-width: 850px;
      }
      #ie7 section.recent-posts {
      margin-right: 7.6%;
      }

      /* =IE8
      ———————————————– */

      #ie8 section.feature-image.large img {
      width: 100%;
      }

      Responder
      1. Pau Mompó Autor

        Necesitaría que especificases con qué imagenes te ocurren en tu web, saber la url dónde ocurre.

        En cualquier caso viendo tu style.css el único margen de imagen que veo es aquí:

        img.alignleft, img.alignright, img.aligncenter {
        margin-bottom: 1.625em;
        }

        Tendrías que quitar esa línea si lo quieres quitar

        Responder
  27. edizzz

    hola muy buen tuto, bueno lo que aun necesito es cambiar el nav. el menu superior de mi tema necesito que sea fijo arriba, por mas que lo intente no consigo dejarlo fijo. el acces, podrian ayudarme?

    Responder
  28. José Rubio

    Excelente el tutorial, te felicito, es muy valioso sobre todo para novatos como yo. Mi pregunta es como modifico el twenty eleven para que los titulos de las páginas y los posts me queden centrados? Te agradezco de antemano tu ayuda.

    Responder
  29. Núria

    Hola! Yo estoy usando Touchfolio, y tengo varias dudas que no puedo solucionar en ninguna plantilla css.
    - Cambiar el tamaño del título de la web.
    - Cambiar el margen de las imagenes que aparecen en las galerias.

    He intentado poner codido en styles, en style-touchfolio-.less, y de ninguna manera lo consigo.
    No entiendo mucho de css, pero estoy intentando hacer algo muy sencillo.

    Alguien me puede ayudar, porfavor?

    Gracias de antemano,

    Núria.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>