Esto esto es todo, perdón si les resulta molesto tantas líneas y perdón por el multiposting
Código HTML:
body {
position: relative;
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: Trebuchet MS;
background: url(http://i.imgur.com/o0lzIEg.jpg) repeat center;
}
a {
text-decoration: none
}
div, hr, span, strong, b, h1, h2, h3, h5, h6, article, input, form, fieldset, textarea, nav, header, button, footer, i, ul, li {
margin: 0px;
padding: 0px;
outline: none;
box-shadow: none;
font-size: 12px;
font-family: Trebuchet MS;
border: none
}
.Clear {
clear: both
}
#Warp {
width: 90%;
display: block;
position: relative;
margin: 10px auto;
padding: 0px
}
#Alert {
width: 95%;
background: rgba( 32, 32, 32, 1 );
position: relative;
color: rgba( 255, 255, 255, 1 );
margin: 10px auto 10px auto;
padding: 8px 4px;
cursor: pointer;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom: solid 1px rgba( 0, 0, 0, 1 );
border-left: solid 1px rgba( 0, 0, 0, 1 );
border-right: solid 1px rgba( 0, 0, 0, 1 );
box-shadow: 0px 2px 0px rgba( 0, 0, 0, 1 );
z-index: 99999 !important;
}
#Alert p.AlertTE {
font-weight: 14px;
font-weight: bold;
}
#Alert span {
width: auto;
position: relative;
top: 13px;
left: 13px;
float: left
}
#Alert p {
width: 95%;
max-width: 95%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
top: 2px;
float: right;
color: rgba( 255, 255, 255, 1 ) !important;
text-shadow: 0px 1px rgba( 0, 0, 0, 0.4 ) !important;
}
nav {
width: 100%;
left: 0px;
z-index: 888;
top: 0px;
position: fixed;
background: rgba( 26, 26, 26, 1 );
border-bottom: solid 1px rgba( 0, 0, 0, 1 );
box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.6 );
margin: 0px auto 10px auto
}
nav ul {
text-align: center
}
nav ul li {
display: inline-block;
padding: 18px 18px;
color: rgba( 255, 255, 255, 1 );
text-decoration: none
}
nav ul li:hover {
background: rgba( 35, 227, 245, 0.7 );
}
header {
position: relative;
display: block;
width: 100%;
height: 165px;
border-bottom: solid 1px rgba( 0, 0, 0, 0.1 );
box-shadow: 0px 1px 1px rgba( 0, 0, 0, 0.1 );
margin: 51px auto 0px auto
}
header #Logo {
position: absolute;
width: auto;
left: 0;
right: 0;
top: 13%;
text-align: center
}
header #Logo img {
border-radius: 3px;
cursor: pointer;
padding: 16px 12px
}
#Warp #Miniarticles {
position: relative;
display: block;
text-align: center;
margin: 10px auto;
padding: 8px 4px
}
#Miniarticles article {
display: inline-block;
position: relative;
width: 30%;
max-width: 350px;
padding: 4px 4px;
margin: auto 12px;
border-radius: 3px;
background: rgba( 32, 32, 32, 0.2 );
box-shadow: inset 0px 0px 0px 2px rgba( 255, 255, 255, 1 );
border: solid 1px rgba( 32, 32, 32, 0.2 );
height: 160px
}
#Miniarticles article .text {
background: rgba( 0, 0, 0, 0.8 );
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 96%;
max-width: 95%;
position: absolute;
color: rgba( 255, 255, 255, 1 );
padding: 14px 5px;
bottom: 8px
}
#Miniarticles article .overlay {
background: rgba( 0, 0, 0, 0.5 );
position: absolute;
display: none;
width: 99%;
height: 97.5%;
left: 2px;
top: 2px
}
#Miniarticles article .overlay i {
color: rgba( 255, 255, 255, 1 );
font-size: 44px;
text-shadow: 2px 1px rgba( 0, 0, 0, 0.6 );
position: relative;
top: 25%
}
#Miniarticles article .text a {
color: rgba( 42, 230, 249, 1 );
font-style: italic
}
#Miniarticles article:hover .overlay {
display: block
}
#Aside {
width: 63%;
position: relative;
display: block;
float: left;
padding: 8px 4px
}
#Anside {
width: 33%;
position: relative;
display: block;
float: right;
padding: 8px 4px
}
#Aside article {
background: rgba( 244, 244, 244, 1 );
border: solid 1px rgba( 0, 0, 0, 0.1 );
border-radius: 3px;
box-shadow: inset 0px 0px 0px 2px rgba( 255, 255, 255, 1 );
width: 96%;
height: 127px;
margin: 10px auto;
position: relative;
display: block
}
#Aside article .ARTimg {
position: relative;
display: block;
float: left;
margin: 0px;
width: 22%;
max-width: 122px;
top: 2.3px;
left: 2px;
padding-right: 3px;
box-shadow: inset -2px 0px 0px 0px rgba( 255, 255, 255, 1 );
}
#Aside article .ARTimg img {
width: 122px;
height: 122px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px
}
#Aside article .ARTtext {
float: right;
width: auto;
left: 0px;
width: 80%;
position: relative;
top: 20px
}
#Aside article .ARTtext a {
color: inherit
}
#Aside article .ARTtext h2 {
font-size: 16px;
position: relative;
top: 0px;
margin-top: -10px;
color: rgba( 35, 161, 200, 1 );
text-shadow: 0px 1px rgba( 255, 255, 255, 0.6 );
padding-bottom: 4px;
padding-left: 6px;
border-left: dashed 1px rgba( 35, 161, 200, 1 )
}
#Aside article .ARTtext p.textx .das {
font-size: 12px;
width: 96%;
padding-bottom: 4px;
text-overflow: ellipsis;
height: 42px;
overflow: hidden !important;
display: block;
position: relative;
}
.das {
height: 44px;
overflow: hidden;
margin: 0px;
top: -5px !important;
margin-top: -4px;
padding: 0px;
color: rgba( 58, 58, 58, 0.9 );
position: relative;
top: 0px;
margin-bottom: 6px !important;
padding-left: 4px;
border-bottom: dashed 1px rgba( 35, 161, 200, 1 )
}
#Aside article .ARTlogs {
width: 96%;
position: relative;
display: block;
margin: 0px auto
}
#Aside article .ARTlogs span {
display: inline-block;
margin: -10px 4px;
background: rgba( 0, 0, 0, 0.03 );
color: rgba( 146, 146, 146, 1 );
border-radius: 2px;
box-shadow: inset 0px 2px 0px rgba( 255, 255, 255, 0.3 );
border: solid 1px rgba( 32, 32, 32, 0.1 );
padding: 6px 8px;
text-shadow: 0px 1px rgba( 255, 255, 255, 0.3 );
cursor: pointer
}
#Aside article .ARTlogs span:hover {
background: rgba( 31, 148, 186, 1 );
color: rgba( 255, 255, 255, 1 );
text-shadow: 0px 1px rgba( 0, 0, 0, 0.3 )
}
#Aside article .ARTlogs span.more {
background: rgba( 39, 186, 31, 1 );
color: rgba( 255, 255, 255, 1 );
text-shadow: 0px 1px rgba( 0, 0, 0, 0.3 )
}
#Aside article .ARTlogs span.more:hover {
background: rgba( 28, 174, 20, 1 )
}
#Anside article {
display: block;
width: 96%;
position: relative;
margin: 10px auto
}
#Anside article .top {
border: solid 1px rgba( 0, 0, 0, 0.2 );
box-shadow: inset 0px 2px 0px rgba( 255, 255, 255, 0.6), 0px 2px 1px rgba( 0, 0, 0, 0.1 );
color: rgba( 32, 32, 32, 0.6 );
text-shadow: 0px 1px rgba( 255, 255, 255, 0.6 );
font-size: 13px;
font-weight: bolder;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 89;
padding: 12px 8px;
background: rgba( 243, 243, 243, 1 )
}
#Anside article .top i {
float: right;
padding-right: 10px
}
#Anside article .cont {
z-index: 59;
background: rgba( 255, 255, 255, 1 );
border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
border-left: solid 1px rgba( 0, 0, 0, 0.2 );
border-right: solid 1px rgba( 0, 0, 0, 0.2 );
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.1 );
padding: 8px 4px
}
#Anside article .cont p {
color: rgba( 150, 150, 150, 1 );
text-shadow: 0px 1px rgba( 255, 255, 255, 1 )
}
button.TONgreen {
background: rgba( 95, 187, 67, 1 );
padding: 12px 14px;
display: block;
margin: 10px auto;
color: rgba( 255, 255, 255, 1);
text-shadow: 0px 1px rgba( 0, 0, 0, 0.3 );
font-weight: bolder;
font-size: 13px;
cursor: pointer;
border-radius: 2px
}
button.TONgreen:hover {
background: rgba( 73, 164, 44, 1 )
}
button.TONblue {
background: rgba( 46, 133, 189, 1 );
padding: 12px 14px;
display: block;
margin: 10px auto;
color: rgba( 255, 255, 255, 1);
text-shadow: 0px 1px rgba( 0, 0, 0, 0.3 );
font-weight: bolder;
font-size: 13px;
cursor: pointer;
border-radius: 2px
}
button.TONblue:hover {
background: rgba( 25, 113, 169, 1 )
}
footer {
background: rgba( 47, 47, 47, 1 );
padding: 18px 4px;
cursor: pointer;
width: 96%;
margin: 10px auto;
position: relative;
display: block;
box-shadow: inset 0px 0px 0px 2px rgba( 255, 255, 255, 1 );
border-radius: 3px;
border: solid 1px rgba( 0, 0, 0, 0.2);
color: rgba( 255, 255, 255, 1 );
font-size: 12px;
font-weight: bolder;
text-shadow: 0px 1px rgba( 0, 0, 0, 0.3 );
text-align: center
}
#Article {
width: 92%;
position: relative;
display: block;
margin: 10px auto
}
#Article .top {
border: solid 1px rgba( 0, 0, 0, 0.2 );
box-shadow: inset 0px 2px 0px rgba( 255, 255, 255, 0.6);
color: rgba( 32, 32, 32, 0.6 );
text-shadow: 0px 1px rgba( 255, 255, 255, 0.6 );
font-size: 13px;
font-weight: bolder;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 89;
padding: 2px 2px;
border-bottom: dashed 1px rgba( 32, 32, 32, 0.3 );
background: rgba( 243, 243, 243, 1 )
}
#Article .cont {
z-index: 59;
background: rgba( 255, 255, 255, 1 );
border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
border-left: solid 1px rgba( 0, 0, 0, 0.2 );
border-right: solid 1px rgba( 0, 0, 0, 0.2 );
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.1 );
padding: 8px 2px
}