shock/Articles/style.css

@font-face {
    font-family: 'journal';
    src: url('Gravity.ttf');
}

* { transition: all 0.5s ease;}


html,body {
min-height:100%;
width:100%;
margin:0;
}

body {
background-color:#ddd;
color:#000;
font-family:sans-serif;
margin:0;
padding:0;
}

a {
color:#369;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.header {
background-image: -moz-linear-gradient(top, #ffffff, #000000);
background-image: -o-linear-gradient(top, #ffffff, #000000);
background-image: -webkit-linear-gradient(top, #ffffff, #000000);
background-image: linear-gradient(top, #ffffff, #000000);
background-color:#ccc;
border:0;
text-align:center;
margin-left:auto;
margin-right:auto;
line-height:.75em;
padding:.5em;
}

.header a {
border:0;
color:#111;
text-decoration:none;
}

.headerTitle {
border:0;
font-size:1.5em;
font-weight:700;
margin:0 0 0 .5em;
padding:.25em;
}

.headerTitle a {
border:0;
text-decoration:none;
color:#444;
}

.headerTitle a:hover {
border:0;
text-decoration:underline;
}

.headerSubtitle {
margin-left:1em;
font-size:.5em;
font-style:italic;
text-align:right;
text-shadow:0 0 0 #fff;
}

code {
background-color:#ddd;
border:0;
padding:0;
font-size:1.15em;
}

pre {
background-color:#ddd;
font-family:monospace;
max-height:26em;
overflow-y:auto;
border:1px #ccc dotted;
margin:0 .11em 0 1em;
padding:.2em;
}

blockquote {
font-family:monospace;
text-align:justify;
margin:.2em;
margin-left:3em;
margin-right:3em;
padding:.2em .75em;
font-size:1.2em;
}

blockquote blockquote {
border:0;
text-align:right;
text-decoration:underline;
font-size:1em;
}

table {
border-color:#aaa;
border-style:solid;
border-width:1px;
}

td {
vertical-align:middle;
border-color:transparent;
border-style:solid;
border-width:1px;
}

.topOfPage a {
background-color:#ddd;
font-size:2em;
position:fixed;
top:50%;
right:1em;
border-radius:.25em;
border:1px solid #ccc;
opacity:0.6;
margin:0 auto;
padding:.2em;
}

.topOfPage a:hover {
transition:all .5s ease;
text-decoration:none;
opacity:1;
background-color:#aaa;
color:#f0f0f0;
border:1px solid #ddd;
}

#top {
border-bottom:1px solid #ccc;
}

#menu {
background-image: linear-gradient(right, #f0f0f0, #000000);
float: left;
border:0;
border-radius: 10px;
overflow:hidden;
text-align:center;
max-width:15%;
margin:0 auto;
border:solid 1px #ccc;
}

#menu a {
display:inline;
text-decoration:none;
padding:0 .5em;
}

#menu ul {
list-style-type:none;
list-style-image:none;
background-color:#ddd;
margin:0;
padding:.3em;
}

#menu li {
display:inline;
line-height:1.2em;
white-space:nowrap;
}

#menu ul li a {
background-color:transparent;
padding:.1em 1ex;
}

#menu ul li a:hover {
color:#111;
text-decoration:none;
text-shadow:2px 2px 4px #999;
}

#menu a.thisPage {
font-weight:700;
color:#444;
font-size:1em;
}

#main {
color:#111;
background-color:#f0f0f0;
font-family:serif;
font-size:.85em;
text-align:justify;
margin-left:auto;
margin-right:auto;
width:65%;
max-width:65%;
border:solid 1px #ccc;
padding:1em 2em;
margin-bottom: 8em; /*footer height*/
}

li {list-style-type: square;}

#main ul li {
padding:.2em 1em;
}

#main ul ul ul {
list-style-type:none;
}

h1 {
text-align:center;
font-size:2em;
color:#444;
border-bottom:1px solid #aaa;
text-shadow:2px 2px 4px #999;
margin:0px .5em 0px 0ex;
}

h2 {
font-size:1.7em;
color:#444;
border-bottom:1px dotted #aaa;
margin:1em 1em 0px 0ex;
}

h3 {
font-size:1.45em;
color:#444;
margin:.9em .2em .2ex 0px;
}

h4 {
font-size:1.2em;
color:#444;
margin:.8em .3em .2ex 0px;
}

.center {
background-image: -moz-linear-gradient(top, #ffffff, #000000);
background-image: -o-linear-gradient(top, #ffffff, #000000);
background-image: -webkit-linear-gradient(top, #ffffff, #000000);
background-image: linear-gradient(top, #ffffff, #000000);
margin-left:auto;
margin-right:auto;
width:70%;
text-align:center;
}

.left {
float:left;
margin:0;
padding:0;
}

.right {
float:right;
margin:0;
padding:0;
}

#footer {
color:#999999;
border-radius: 28px;
background-image: -moz-linear-gradient(top, #000000, transparent);
background-image: -o-linear-gradient(top, #000000, transparent);
background-image: -webkit-linear-gradient(top, #000000, transparent);
background-image: linear-gradient(top, #000000, transparent);
background-clip: padding-box;
height:3em;
background-color:#ddd;
font-size:.8em;
text-align:center;
position:fixed;
bottom:0px;
right:0px;
z-index:1;
margin:0 auto;
padding:.2em;
width:100%;
opacity:0.91;
}

#footer:hover {
opacity:1;
}

#footer img {
margin-left:.2em;
margin-right:.2em;
vertical-align:middle;
}

#footer .left {
text-align:left;
float:left;
clear:left;
}

#footer .right {
text-align:right;
}

abbr,acronym {
border-bottom:1px dotted #333;
cursor:help;
}

img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video {
max-width:100%;
}

hr {
color:#aaa;
background-color:#aaa;
height:1px;
border:0;
margin-top:0;
margin-bottom:1.5em;
}

code,pre,samp {
white-space:pre-wrap;
}

#extrait {
margin-top:1em;
font-family:sans-serif;
font-size:12px;
column-count:2;
-moz-column-count:2;
column-gap:30px;
-moz-column-gap:30px;
}

#extrait h1 {
color:#444;
border-bottom:0;
text-shadow:0 0 0 #fff;
font-size:14px;
text-align:center;
}

#extrait h2 {font-size:11px;}
#extrait h3 {font-size:10px;}

*,textarea,table,td,th,code,pre,samp {
word-wrap:break-word;
hyphens:auto;
}

p img, p a img {
    overflow: hidden;
    padding: 10px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

p a img:hover {
    box-shadow: 2px 2px 6px #999;
    text-shadow:2px 2px 6px #999;
}

#ad {
position:absolute;
width:350px;
top:10%;
right:-370px;
border:1px solid #ccc;
padding: 20px;
background-color:#ccc;
word-wrap:break-word;
hyphens:auto;
}

#ad:hover {
right:0px;
}

#imagewall img{
clear:both;
}


form {text-align:center;}
input {text-align:center;}


.ca-menu{
    clear:both;
    padding:0;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    word-wrap:break-word;
    hyphens:auto;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.ca-menu li{
    width: 140px;
    height: 100px;
    position: relative;
    display: inline-block;
}
.ca-menu li:last-child{
    margin-right: 0px;
    margin-left: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    color: #444;
}
.ca-icon{
    font-family: monospace;
    font-size: 6em;
    color: #aaa;
    position: absolute;
    width: 100%;
    left: 0px;
    text-align: center;
    opacity:1;
}
.ca-main{
    font-family: sans;
    font-size: 0;
    position: absolute;
    width: 140px;
    text-align: center;
    opacity:0;
    top:10px;
}
.ca-desc{
    font-family: sans;
    font-size: 0;
    position: absolute;
    width: 140px;
    text-align: center;
    opacity:0;
    top:35px;
}
.ca-menu li:hover .ca-icon{
    font-size:0;
    opacity:0;
}
.ca-menu li:hover .ca-main{
    font-size: 1.4em;
    opacity: 1;
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
}
.ca-menu li:hover .ca-desc{
    font-size: 0.9em;
    opacity: 1;
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
}