/* CARTAS A DIEGO - COLOR PALETTE 
  hard blue: #20313D;
  inactive tab blue: #727D85;
  tags blue: #EFF6FF;
  orange user: #FF591F;
  footer black: #353535;
  footer text: #656565;
*/ 
/* RESET STYLES - EricMeyer */
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* COMUNES */
.cleaner { clear: both; }

/* 404 */
.foroufor { width: 700px; margin: 50px auto; background: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-align: center; }
.foroufor h1 { font-size: 220px; font-weight: bold; margin: 100px auto 0px; letter-spacing:-10px; font-family: Helvetica, Arial, sans-serif; padding-top: 20px; }
.foroufor h2 { font-size: 18px; font-weight: bold; margin: 0px 0px 0px; padding-bottom: 10px;} 

/* SELECTORS */
body { background: white url(../img/bgtest.png); color: black; font-family: 'Lucida Sans', 'Trebuchet MS', sans-serif; font-size: 13px; }
hr { clear: both; margin: 20px auto; width: 92%; color: #efefef; }
h1, h2, h3, h4, h5 { font-family: Helvetica, Arial, sans-serif; }

/* STRUCTURE */
#wrapper { width: 970px; margin: 30px auto 0px; }
#mainCol { width: 700px; background: white; float: left; }
#mainCol { -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; } /* CSS3 property */
#sideCol { width: 250px; float: right; }

/* HEADER */
#bottombox, #box { height: 70px; }
#header { background-color: #20313D; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; height: 100px; position: relative;  }
#header h1 { color: white; font-size: 40px; letter-spacing: -2px; font-weight: bold; padding: 20px 30px 0px 150px; width: 70%; float: left;}
#header h1 a { color: white; text-decoration: none; }
#header div.logo { float: left; position: absolute; top: -40px; left: -10px; }
#header p.tagline { color: white; font-size: 14px; letter-spacing: -0.1px; padding: 10px 0px 0px 150px; }
#header div.rssfeed { float: right; position: absolute; top: -50px; left: 900px; }

/* FORM */
.letterForm p { width: 45%; float: right; text-align: right; padding-top: 10px; font-family: Helvetica, Arial, sans-serif; padding-bottom: 4px;}
.letterForm p a { background: #6FB5FC url(../img/btn-escribicarta.png) repeat-x; color: white; margin: 0px 20px 0px 0px; font-size: 20px; letter-spacing: -1px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-weight: bold; padding: 4px 10px 2px; }

/* NAVIGATION */
#nav { background: #20313D; padding-top: 30px; }
#nav ul { width: 100%; padding: 10px 0px 4px 30px;}
#nav li { display: inline; letter-spacing: -0.9px; margin: 0px 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif; }
#nav li.here { font-size: 22px; color: #20313D; padding: 10px 5px 5px 5px; background: white;}
#nav li.here { -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; } /* CSS3 property */
#nav li.here a { background: white; color: #20313D; padding-bottom: 5px; }
#nav li a { font-size: 18px; color: white; background: #727D85; padding: 10px 10px 0px 10px; text-decoration: none; padding-bottom: 4px;}
#nav li a:hover { background: white; color: #20313D; }
#nav li a { -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; } /* CSS3 property */ 

/* LETTERS STRUCTURE */
.letter { width: 940px; margin: 20px auto; }
.letterNumber { width: 65px; height: 65px; float: left; margin-left: 30px; }
.letterContent { width: 430px; float: left; margin-right: 20px; } 
.letterTools { width: 120px; float: left; }

/* LETTERS NUMBER */ 
.letterNumber { background: url(../img/tshirt.png) no-repeat; color: black; font-size: 20px; font-weight: bold; text-align: center; padding-top: 20px; }

/* LETTERS CONTENT */ 
.viewMore { font-size: 12px; padding-left: 5px; }

.letterText { font-size: 15px; padding: 0px 10px 0px; line-height: 20px;}
.letterText p { padding: 5px 0px; }
.letterText a { color: #333; text-decoration: none; }
.letterText small { font-size: 11px; font-weight: bold; }

.letterTagCloud { margin-bottom: 10px; font-size: 10px; }
.letterTagCloud ul { padding-left: 30px; background: url(../img/tags-icon.png) no-repeat; padding-bottom: 20px;}
.letterTagCloud li { display: inline; margin: 0px 5px; }
.letterTagCloud li a { text-decoration: none; background: #EFF6FF; color: #727D85; padding: 1px 4px; line-height: 20px;}
.letterTagCloud li a:hover { background: #727D85; color: white; }

.letterInfo { clear: both; font-weight: normal; color: #666; margin: 0px 0px; font-size: 11px; padding: 0px  0px 20px !important; }
.letterInfo strong { color: #FF591F; }

.letterReporting { padding-left: 20px; margin-left: 10px; background: url(../img/cards-icon.png) no-repeat; font-size: 11px;} 
.letterReporting a { color: #727D85; font-style: italic;  }

/* LETTER TOOLS */
.voteCount { width: 107px; height: 70px; background: url(../img/dowant.png) no-repeat; margin-bottom: 5px; }
.voteCount p { color: white; font-size: 30px; letter-spacing: -1px; text-align: center; width: 98%; padding: 10px 0px 0px;}
.voteCount p.small { font-size: 11px; width: 98%; padding: 0px; }

.voteButton { width: 107px; height: 33px; background: url(../img/metoo.png) no-repeat; margin-bottom: 10px; cursor: pointer; font-family: Helvetica, Arial, sans-serif;}
.voteButton p { color: white; font-size: 14px; font-weight: bold; text-align: center; padding: 10px 0px 0px;}
.current { filter: alpha(opacity=20); opacity: 0.2; cursor: default !important; }

.shareLetter { font-weight: bold; color: #515151; }
.shareLetter ul { margin: 10px 0px 0px; }
.shareLetter li { display: inline; margin: 0px 5px; }

/* PAGINATION */
.pagination { margin: 0px auto; font-size: 11px; position: relative; }
.previousPage { width: 110px; float: left; margin-left: 30px; }
.paginationStats { width: 400px; float: left; text-align: center; position: absolute; left: 120px; }
.nextPage { width: 110px; float: right; text-align: right; margin-right: 30px; }
.pagination a { color: #20313D; text-decoration: underline; padding: 2px 4px;  }  
.pagination a:hover { background: #727D85; color: white; -moz-border-radius: 3px; -webkit-border-radius: 3px;  text-decoration: none; }

/* MODAL */
#modal { display: none;}
#dimmer { background-color: black; filter: alpha(opacity=70); opacity: 0.7; width: 100%; height: 500px; position: absolute; top: 0px; left: 0px;}
#zoom_indicator { width: 24px; height: 24px; background: url(../img/indicator.gif) no-repeat; margin: 0 auto;}

/* FORMULARIO */
#form h1 { margin: 0px 0px 20px; font-size: 18px; }
#form p { padding: 5px 0px; }
#form label { width: 100px; float: left; }
#form input { width: 300px; padding: 2px; font-size: 16px; }
#form textarea { padding: 2px; font-size: 16px; font-family: Arial; width: 300px;}
#form #button { background: #6FB5FC url(../img/btn-escribicarta.png) repeat-x; color: white; margin: 10px 20px 0px 0px; font-size: 18px; letter-spacing: -1px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-weight: bold; padding: 3px 10px 2px; } 

/* FOOTER */
#footer { border-top: 1px dashed #ccc; background: #353535; margin-top: 20px; color: #656565; font-size: 11px; }
#footer a { color: #656565; font-weight: bold; text-decoration: underline; }
#footer a:hover { color: white; } 
#footer .leftblock { width: 40%; float: left; padding: 10px 20px;}
#footer .leftblock p { padding: 3px 0px; }
#footer .rightblock { width: 40%; float: right; padding: 10px 20px;}
#footer .rightblock p { padding: 3px 0px; text-align: right;}
#footer p.contact { padding-left: 30px; background: url(../img/contact-icon.png) no-repeat 0px 50%; margin-top: 10px; } 

/* ABOUT */
#aboutModal { display: none; }
#about h1 { margin: 0px 0px 20px; font-size: 18px; }
#about p { padding: 5px 0px; }
#about .experiment { color: #333; }

/* COMMENTS */ 
.commentsCount { padding-bottom: 10px; }
.commentsCount a { font-size: 12px; padding: 2px 4px; color: #727D85; }
.commentsCount a:hover { background: #727D85; color: white; -moz-border-radius: 3px; -webkit-border-radius: 3px;  text-decoration: none; }
.dsq-by, #dsq-login { display: none; }
#disqus_thread h3 { font-size: 16px; }
.dsq-list-style a { font-size: 11px; padding: 2px 4px!important; color: #727D85; }
.dsq-list-style a:hover { background: #727D85 !important; color: white; -moz-border-radius: 3px; -webkit-border-radius: 3px;  text-decoration: none; }

/* SIDECOLUM */
.sideBox { background: white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; margin: 0px 0px 10px; position: relative; }
.sideBox h2 { color: #20313D; font-size: 20px; font-weight: bold; padding: 10px; }
h2.tagcloudTTL { background: url(../img/tags-icon.png) no-repeat 0px 50%; padding-left: 30px; } 

/* TAGCLOUD */
div#tagCloud { padding: 10px 5px; line-height: 20px; background: #EFF6FF; -moz-border-radius: 5px; -webkit-border-radius: 5px;  } 
div#tagCloud a { text-decoration: none; background: #EFF6FF; color: #727D85; padding: 1px 4px; line-height: 30px; margin: 0px 3px;}
div#tagCloud a:hover { background: #727D85; color: white; }
div#tagCloud a.cloud1 { font-size: 11px; }
div#tagCloud a.cloud2 { font-size: 14px; }
div#tagCloud a.cloud3 { font-size: 18px; }
div#tagCloud a.cloud4 { font-size: 24px; }

/* TWITTERFOLLOW */
.twitterFollow { margin-top: 30px; }
.twitterFollow h2 { font-size: 16px; padding-left: 70px; }
.twitterFollow img { position: absolute; top:-20px; left: 10px; }
.twitterFollow a { color: #20313D; text-decoration: none; }
.twitterFollow a:hover { text-decoration: underline; }  

/* RSS */
.rssbox { margin-top: 30px; }
.rssbox h2 { font-size: 16px; padding-left: 70px; }
.rssbox img { position: absolute; top:-20px; left: 10px; }
.rssbox a { color: #20313D; text-decoration: none; }
.rssbox a:hover { text-decoration: underline; }