You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
shock/Articles/style.css

474 lines
6.9 KiB

@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);
}