/*
 Theme Name: Radical Surf Magazine
 Theme URI: http://www.radicalsurfmag.com/
 Description: Tema de la versión digital de Radical Surf Magazine (2010).
 Version: 1.1
 Author: Alberto García
 Author URI: http://www.radicalsurfmag.com/
 */
/* montado sobre el 'Blog Style' 3 column Liquid Layout de Matthew James Taylor
 * http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths */
/*
 - GENERAL
 - ESTRUCTURA
 - ELEMENTOS ESTRUCTURA
 - PÁGINAS
 - BANNERS
*/
/* GENERAL
 -------------------------------------------------------------*/
* { margin: 0; padding: 0; }
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
background: #033946;
color:#fff;
min-width: 600px;
font: 0.8em Arial, Helvetica, Sans-Serif;
text-align: center;
}

a { color: #dcdcdc; }
h2, .col2 h3 { background-color:#000; color:#fff; line-height:1.6em; text-indent:0.4em; }
h3 { font-size:1.6em; font-weight:bolder; }
.col1 h2 { width:500px; }
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited { text-decoration: none; }
strong { font-weight:bolder; }
#container p { margin:1em 0; }
.despejar { clear:both; }
.izq, .alignleft { float:left; }
.der, .alignright { float:right; }
.post .alignright { margin: 0 0 2em 1em; }
/* ESTRUCTURA
 ************************************************************ */
#container, .inner, #footer-inner {
width: 1000px;
margin: 0 auto;
text-align: left;
}

/* HEADER
 ************************************************************ */
#header {
clear: both;
float: left;
width: 100%;
height: 242px;
background: #033946 url(picts/bg.jpg) no-repeat center 100px;
}
#header #banners { height:120px; overflow:hidden; }
#header #megabanner { float:left; width:728px; }
#header #banner { float:right; width:230px; }
h1 {
background:transparent url(picts/radical_surf_magazine_logo.png) no-repeat scroll 2em top;
float:left;
font-size:smaller;
height:110px;
width:300px;
}
h1 a {
display:block;
height:110px;
text-indent:-5000px;
width:300px;
}
#header .description {
text-indent:-5000px;
float:right;
position:absolute;
}
#navigation { float:left; height:140px; }
#navigation li { height:34px; margin-left:2em; }
#navigation li a {
color:#fff;
font-size:1.8em;
font-weight:bolder;
text-decoration:none;
}
#header .sidebar { float:right; }
#header .sidebar li { float:left; }
#header .sidebar a {
text-decoration: none;
float: left;
margin-left: 10px;
font-size: 0.85em;
display: block;
height: 20px;
line-height: 20px;
}
#header .sidebar a:hover { text-decoration: underline; }
#header .sidebar a[href^= "contacto/"] { 
background:transparent url(picts/mail.gif) no-repeat scroll right center;
padding-right: 16px;
}
#header .sidebar a { padding-right: 20px; }
/* Begin Form Elements */
#searchform { margin-left: 1em; text-align: center; }
#searchform #s { width: 100px; }
#searchsubmit { padding: 1px; width: 20px;
background: url(picts/search.png) no-repeat center center;
}
#searchsubmit:hover { background: url(picts/search-over.png) no-repeat center center; }
#subheader { height:420px; margin-bottom: 20px; clear:both; background:#0D1218 url(picts/bg.jpg) no-repeat center -142px; }

/* SUBHEADER ELEMENTS
 ======================== */
#subheader .sidebar { height: 420px; float:right; }
#subheader .sidebar h4, #subheader .sidebar img, #subheader .sidebar p { margin-bottom: 6px; }
#subheader .sidebar h4, #subheader .sidebar p {
font-size: 1.6em;
padding: 8px;
background: url(picts/current-issue.gif) no-repeat left top;
}
#subheader .sidebar a { text-transform: uppercase; font-size: 1em; font-weight:bolder; text-decoration:none; }
#subheader .sidebar a:hover { text-decoration: none; color: #ccc; }
#subheader .sidebar h4 strong { font-weight: bolder; }
#subheader .sidebar h4 span { display: block; font-size: small; }
#subheader .sidebar img { }
#subheader #slider { width: 734px; float: left; clear: both; }
/* ------------------------------------------------------------
 ----> #slider
 ------------------------------------------------------------ */
#slider {
height: 400px;
position: relative;
background: url('picts/slider.gif') 0 0 no-repeat;
}
#slider ul { font-size: .95em; }
#slider ul li { width: 734px; height: 400px; }
#slider ul li span {
position: absolute;
bottom: 9px;
left: 0;
z-index: 99;
}
#slider ul li span a { color: #fff; }
#slider ul li img { position: absolute; top: 1px; left: 0; }
#nav {
position: absolute;
bottom: 7px;
right: 5px;
font-size: .95em;
z-index: 99;
}
#nav a {
width: 19px;
line-height: 20px;
float: left;
font-weight: bold;
display: block;
text-align: center;
color: white;
margin-left: 6px;
}
#nav a.activeSlide, #nav a:hover {
color: white;
background: url('picts/slider.gif') 0 -1px no-repeat;
}
#slider a { text-decoration:none; }
#slider ul li span a:hover { text-decoration:underline; }
/* ------------------------------------------------------------
 ----> ##########
 ------------------------------------------------------------ */

/* columns container
 ************************************************************ */
.colmask {
position: relative;
clear: both;
float: left;
width: 100%;
overflow: hidden;
}

/* 3 COLUMNAS SETTINGS
 ************************************************************ */
.blogstyle .colmid {
float: left;
width: 200%;
margin-left: -170px; /* Ancho col derecha */
position: relative;
right: 100%;
}
.blogstyle .colleft {
float: left;
width: 100%;
margin-left: -300px; /* Ancho col central */
}
.blogstyle .col1wrap {
float: left;
width: 50%;
padding-bottom: 1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.blogstyle .col1 {
margin: 0 10px 0 470px; /* Centre column side padding:
 Left padding = left column width + centre column left padding width
 Right padding = right column width + centre column right padding width */
position: relative;
left: 100%;
overflow: hidden;
}

.blogstyle .col2 {
float: right;
width: 300px; /* Ancho del contenido de la col central (ancho col izquierda menos padding izquierdo y derecho) */
position: relative;
left: 290px; /* Width of the left-had side padding on the left column */
}

.blogstyle .col3 {
float: right;
width: 160px; /* Width of right column content (right column width minus left and right padding) */
position: relative;
left: 770px;
}

/* COL NOTICIAS
 ************************************************************ */
a.rss { float:right; margin:5px 30px 0 0; }
.post {
width: 160px;
float: left;
margin: 10px 10px 30px 0;
min-height: 340px;
}
.post .cat a { text-decoration:none; }
.categorias { clear:both; background-color:#000; width:500px; margin-bottom: 2em; }
.categorias h3 { text-indent:0.5em; padding-top: 0.5em; }
.categorias ul { padding: 1em 0; min-height: 4em; }
.categorias li { margin:0.2em 0; float:left; width:165px; }
.categorias li img { margin: 0 0.2em 0 1em; }
.categorias a { text-decoration:none; }
.categorias a:hover { text-decoration:underline; }
.col1 .video { margin: 2em 0; width:500px; }
.col1 .navigation { clear:both; margin-bottom:1em; }
.post .postmetadata { display:block; }
.post blockquote p { width: 400px;}
blockquote { quotes: "\201C" "\201D"; }
blockquote { font-style: italic; margin-top: 10px; margin-bottom: 10px; margin-left: 30px; padding-left: 15px; border-left: 3px solid #ccc; }
/* COL CENTRAL
 ************************************************************ */
.col2 .banners, .col2 #enlaces { margin: 6px 0 20px 0; }
.col2 .banners a, .col2 #enlaces a, col3 a { margin: 6px 0; display:block; }
.col2 li { margin:0.8em 0; }
.col2 li a { text-decoration:none; }
.col2 li a:hover { text-decoration:underline; }
.col2 ol { list-style: decimal outside; margin-left:20px; }

/* COL BANNERS
 ************************************************************ */
.col3 a { margin: 6px 0; display:block; }
.wide .vert { margin-top:6px; }
.singlepage .vert { margin-top:6px; }

/*FOOTER
 ************************************************************ */
#footer {
clear: both;
float: left;
width: 100%;
border-top: 1px solid #000;
background:#0D1218 url(picts/bg.jpg) no-repeat center top;
}
#footer img { display:block; float:left; margin-top:2em; }
#footer .categorias { padding:2em 0; clear:left; background:none; }
.categorias h4 { padding: 0.5em; background:#000; display:inline-block; }
#likebox { float:right; margin-top:2em; }
#contact { clear:left; padding: 2em 0; }
#contact .type { display: none; }
#footer .last { margin-bottom:2em; font-size:0.85em; }
/**************************************************************
 PÁGINAS
***************************************************************/
.page { width:500px; }
.wide .page { width:820px; }
.wide .page p { width:820px; }
.wide .col3 { left: 0px; }
#formulario p { width:300px;}
.singlepage .post { width:500px; }
#contenido-pag ul, .destacado { width:500px; }
.contacto .col2 h2 { margin-top:10px; }
.page h4, .page p { margin:1em 0; width:500px; }
.page h4 { font-weight:bolder; }
#staff, .destacado p { margin:1em 0; }
#staff p {  }
#staff h4 { margin-top:0; }
.org { display:none; }
.post img, .item img {
background-color:#fff;
border-top:1px solid #dcdcdc;
border-left:1px solid #dcdcdc;
border-right:1px solid #000;
border-bottom:1px solid #000;
margin:0 0 20px 0;
padding:6px;
}
.singlepage .navigation { background-color:#000; height: 2em; margin:6px 0; width:500px; }
.singlepage .navigation a { text-decoration:none; line-height:2em; width:200px; }
.singlepage .izq { margin-left:1em; }
.singlepage .der { margin-right:1em; }
.singlepage h2 { font-size: 3em; background:none; text-indent:0; line-height:1em; font-weight:bolder; width: 300px; }
.archivo h2 { margin-top:6px; }
/* Twitter */
#twitter { line-height:2em; display:inline-block; height:18px; width:82px; background:url(picts/tweet.png) no-repeat left top; vertical-align:middle; }
#twitter span { display:none; }
/* WALLPAPERS
 ************************************************************ */
.entry .item { float:left; width:220px; margin: 10px 40px 30px 0; }
#contenido-pag .item ul { 
width:180px; 
background-color: #000;
padding: 18px;
-moz-border-radius: 10px;
}
#contenido-pag .item a {
text-decoration: underline;
background: url(picts/download-page-purple.gif) no-repeat left center;
padding-left: 18px;
}
#contenido-pag .item li a {
display: block;
margin: 0.5em 0;
color: #dcdcdc;
}
/* FORMULARIOS DE COMENTARIOS
 ************************************************************ */
#respond { clear:left; }
#searchform { margin-left: 1em; text-align: center; }
#searchform #s { width: 100px; }
#searchsubmit { padding: 1px; width: 20px; background: url(picts/search.png) no-repeat center center; }
#searchsubmit:hover { background: url(picts/search-over.png) no-repeat center center; }
.entry form { text-align: center; }
select { width: 130px; }
#commentform input { width: 190px; padding: 2px; }
#commentform { margin: 5px 0; }
#commentform textarea { width: 490px; padding: 2px; }
#respond:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#commentform #submit { background-color: #11488D; color: #fff; margin: 0 24px 10px 0; float: right; }
#commentform #submit:hover { background-color: #0366CB; }
#commentform p { margin:10px 0; }
code, textarea { font-size:1.2em; font-family: "Courier New", Courier, monospace; }
.commentlist li, .destacado { margin:1em 0; background-color:#0366CB; padding:0.8em 1em; width:480px; }
.commentlist .even, .commentlist .alt { background-color:#11488D; }
.commentmetadata a { text-decoration:none; }
.commentlist h4, .commentlist small {  padding-left: 50px; display:block; }
.avatar { float:left; }
/* LIGHTBOX
 ----------------------------------*/
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading { background: #fff url(picts/loading.gif) no-repeat center; }
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 20px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink { left: 0; }
#lbPrevLink:hover { background: transparent url(picts/prevlabel.gif) no-repeat 0 15%; }
#lbNextLink { right: 0; }
#lbNextLink:hover { background: transparent url(picts/nextlabel.gif) no-repeat 100% 15%; }
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 20px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(picts/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber { margin-right: 71px; }
#lbCaption { font-weight: bold; }
/* FORECAST
 -------------------------------------------------------------*/
#spotsnav li { float: left; text-transform:uppercase; font-size:0.9em; font-weight:bolder; width:12.5%; }
#spotsnav a { height:38px; line-height:3em; background:#3F76C5 url("picts/wgseparator.gif") bottom right no-repeat; color:#E0E0E0; display: block; text-decoration: none; text-align:center; }
#spotsnav a:hover { background-color: #003399; }
#spotsnav .highlight { background-color:#E0E0E0; color: #039; }
#previsiones #spotsnav ul { display:block; height: 38px; width: 820px; background-color:#3F76C5; }
#previsiones, #euranim { margin-top: 3em; }
.forecast table { border-collapse: separate; border-spacing: 1px; }
#previsiones img { border:none; padding:0; }
.forecast-ram .forecast td { padding: 0.5em; border-right:solid 1px #E0E0E0; }
.forecast-ram .cdc .forecast td { border: none; }
.forecast-ram { color: #11488D; margin: 0 auto; }
.wgfcst {  margin-bottom:2em; width:820px; padding-top:1em; background-color:#e0e0e0; }
.wgfcst table.forecast-ram { text-align: center; }
.wgfcst table.forecast-ram tbody { color:#003399; }
.wgfcst a:link { color: #003399; }
.wgfcst a:visited { color: #003399; }
#euranim { height:500px; }
#euranim img { padding:20px; margin:0 0 20px; float: right; background-color: #fff; }